/* =========================================================
   ASPIRE ESTATES — stylesheet (v2: door motif + crafted motion)
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face{font-family:"New Spirit";src:url("../assets/fonts/NewSpirit-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"New Spirit";src:url("../assets/fonts/NewSpirit-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"New Spirit";src:url("../assets/fonts/NewSpirit-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"New Spirit";src:url("../assets/fonts/NewSpirit-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}

/* ---------- Tokens ---------- */
:root{
  --forest:#033F2E;--willow:#2f6e57;--deep:#04271e;
  --black:#1c1c1c;--white:#fcfcfc;--stone:#d8cfc4;--bone:#e8e3dc;
  --ink:#26302c;--muted:#5b6560;
  --font-display:"New Spirit",Georgia,"Times New Roman",serif;
  --font-body:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --radius:10px;--radius-lg:16px;--container:1240px;
  --gutter:clamp(1.25rem,4vw,2.5rem);--section:clamp(4.5rem,9vw,8rem);
  --ease:cubic-bezier(.22,.61,.36,1);--ease-door:cubic-bezier(.76,0,.24,1);
  --shadow-sm:0 2px 10px rgba(4,39,30,.06);--shadow-md:0 18px 50px -22px rgba(4,39,30,.28);
}
::selection{background:var(--willow);color:#fff;}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
/* scroll-padding-top stops in-page anchors (e.g. /contact/#valuation) landing
   underneath the fixed 84px header — without it the target's top is buried.
   Applies to every anchor on the site, plus breathing room so it lands neatly. */
html{scroll-behavior:smooth;scroll-padding-top:calc(84px + 2rem);-webkit-text-size-adjust:100%;}
body{font-family:var(--font-body);color:var(--black);background:var(--white);font-size:clamp(1rem,.97rem + .18vw,1.125rem);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* kern + common ligatures: the small typographic tells of considered setting */
  font-kerning:normal;font-variant-ligatures:common-ligatures contextual;}
body.locked{overflow:hidden;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.05;color:var(--forest);letter-spacing:-.01em;
  /* balance evens out the rag so headings never leave one word stranded */
  text-wrap:balance;}
/* pretty prevents orphans (a single word alone on the last line) in body copy */
p,li,blockquote,figcaption,dd{text-wrap:pretty;}
/* brand heading accent: one word in New Spirit italic (never a run) */
h1 em,h2 em,h3 em,h4 em{font-style:italic;font-weight:500;}
/* numbers should line up in tabular contexts (stats, prices, counts) */
.stat-num,.listing-price,.case-facts dd{font-variant-numeric:tabular-nums;}
/* form controls inherit the brand rather than the OS */
:root{accent-color:var(--forest);}
input,select,textarea{caret-color:var(--forest);}

/* ---------- Layout helpers ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.kicker{display:inline-block;font-family:var(--font-body);font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--willow);margin-bottom:1.1rem;}
.kicker.light{color:rgba(255,255,255,.66);}
.hl{color:var(--forest);font-weight:500;font-style:italic;}
.hl-light{color:var(--stone);font-style:italic;}
.section-head{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,4rem);}
.section-head h2{font-size:clamp(2rem,1.3rem + 2.6vw,3.4rem);}
.section-head.row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;max-width:none;flex-wrap:wrap;}
/* centred variant — a deliberate counterpoint to the left-aligned heads, so
   the page alternates its rhythm rather than stacking everything hard-left. */
.section-head.center{max-width:42rem;margin-inline:auto;text-align:center;}
.section-head.center h2{font-size:clamp(2.1rem,1.3rem + 2.9vw,3.7rem);}

/* =========================================================
   EDITORIAL HEADINGS (brand guidelines §5.7 / §6.4)
   Two-line, one-word ITALIC, stepped/offset onto the 12-col
   grid — "headings don't always sit top-left". Reusable so
   section heads across the site stop reading as templated.
   ========================================================= */
.eyebrow{display:inline-flex;align-items:center;gap:clamp(.7rem,2vw,1.4rem);margin-bottom:clamp(1.1rem,2.4vw,1.75rem);
  font-family:var(--font-body);font-weight:600;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--willow);}
.eyebrow::after{content:"";width:clamp(2rem,5vw,4rem);height:1px;background:var(--stone);}
.eyebrow.light{color:rgba(255,255,255,.7);}
.eyebrow.light::after{background:rgba(255,255,255,.3);}
.ehead{font-family:var(--font-display);font-weight:400;color:var(--forest);
  font-size:clamp(2rem,1.2rem + 3vw,4.2rem);line-height:1;letter-spacing:-.025em;margin:0;text-wrap:balance;}
.ehead .l{display:block;}
/* the stepped second line — sits ~1-2 columns in, on the grid */
.ehead .l2{padding-left:clamp(1.25rem,11vw,8rem);}
.ehead em{font-style:italic;font-weight:500;}   /* one-word accent — never a run */
.ehead .hl{color:var(--forest);}                 /* .hl already italic+medium; keep colour on forest heads */
/* whole-head offset onto the grid (opens to the right of column 1) */
.ehead-wrap--offset{margin-left:auto;max-width:min(46rem,82%);}
/* a right-aligned editorial head, for variety */
.ehead-wrap--right{text-align:right;margin-left:auto;max-width:46rem;}
.ehead-wrap--right .ehead .l2{padding-left:0;padding-right:clamp(1.25rem,11vw,8rem);}
.ehead-wrap--right .eyebrow{flex-direction:row-reverse;}
@media (max-width:600px){
  .ehead .l2{padding-left:clamp(.75rem,6vw,2.5rem);}
  .ehead-wrap--offset,.ehead-wrap--right{max-width:100%;margin-left:0;text-align:left;}
  .ehead-wrap--right .ehead .l2{padding-right:0;padding-left:clamp(.75rem,6vw,2.5rem);}
  .ehead-wrap--right .eyebrow{flex-direction:row;}
}
/* scoped smaller ehead where it sits in a narrow column */
.process-intro .ehead{font-size:clamp(1.9rem,1.2rem + 2vw,3rem);}
.process-intro .ehead .l2{padding-left:clamp(1rem,7vw,3.5rem);}
/* on dark (forest) sections the editorial head must be white */
.compare .ehead,.green .ehead,.cta .ehead,.astats .ehead,.doorway .ehead{color:#fff;}
.skip-link{position:absolute;left:-999px;top:0;z-index:400;background:var(--forest);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--radius) 0;}
.skip-link:focus{left:0;}

/* ---------- Buttons ---------- */
.btn{--btn-bg:var(--forest);--btn-fg:#fff;--btn-bd:var(--forest);display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-body);font-weight:600;font-size:.98rem;padding:.95rem 1.85rem;border-radius:999px;border:1.5px solid var(--btn-bd);background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);will-change:transform;}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(3,63,46,.55);}
.btn:active{transform:translateY(0);}
.btn-primary:hover{--btn-bg:var(--deep);}
.btn-dark{--btn-bg:var(--deep);--btn-fg:#fff;--btn-bd:var(--deep);}
.btn-ghost{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.75);}
.btn-ghost:hover{--btn-bg:rgba(255,255,255,.14);}
.btn-light{--btn-bg:var(--white);--btn-fg:var(--forest);--btn-bd:var(--white);}
.btn-light:hover{--btn-bg:var(--bone);--btn-bd:var(--bone);}
.btn-ghost-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.6);}
.btn-ghost-light:hover{--btn-bg:rgba(255,255,255,.14);}
.btn-block{width:100%;}
/* padding lifts the tap target to ~44px without changing how it looks */
/* Blog posts aren't written yet — these placeholders must not behave like
   working links (a click used to jump the user to the top of the page). */
a[data-placeholder]{cursor:not-allowed;}
a[data-placeholder]:hover{color:inherit;}
.post-card:has(a[data-placeholder]):hover{transform:none;box-shadow:var(--shadow-sm);}
.link-arrow{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;color:var(--forest);font-size:1rem;padding-block:.7rem;}
.link-arrow svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease);}
.link-arrow:hover svg{transform:translateX(6px);}
.link-arrow.sm{font-size:.9rem;}

/* =========================================================
   DOOR INTRO (signature load animation)
   ========================================================= */
.door-intro{display:none;position:fixed;inset:0;z-index:300;pointer-events:none;}
.door-intro.is-active{display:block;}
.door-panel{position:absolute;top:0;height:100%;width:51%;will-change:transform;}
.door-l{left:0;background:linear-gradient(90deg,var(--deep),var(--forest));}
.door-r{right:0;background:linear-gradient(-90deg,var(--deep),var(--forest));}
.door-seam{position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:100%;background:linear-gradient(180deg,transparent,rgba(191,227,207,.7),transparent);opacity:0;transition:opacity .5s ease;}
.door-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);width:64px;height:auto;opacity:.95;transition:opacity .5s ease,transform .8s var(--ease);}
.door-intro.is-active .door-seam{opacity:1;}
.door-intro.is-open .door-l{transform:translateX(-101%);transition:transform 1.05s var(--ease-door);}
.door-intro.is-open .door-r{transform:translateX(101%);transition:transform 1.05s var(--ease-door);}
.door-intro.is-open .door-mark{opacity:0;transform:translate(-50%,-50%) scale(1.5);}
.door-intro.is-open .door-seam{opacity:0;}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(252,252,252,.72);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid rgba(4,39,30,.06);transition:box-shadow .3s var(--ease),background .3s var(--ease),transform .4s var(--ease);}
.site-header.scrolled{background:rgba(252,252,252,.92);box-shadow:var(--shadow-sm);}
.header-inner{display:flex;align-items:center;gap:2rem;height:84px;}
.brand{display:flex;align-items:center;flex-shrink:0;}
.brand-logo{width:auto;height:36px;}
.primary-nav{flex:1;display:flex;justify-content:center;}
.primary-nav ul{display:flex;gap:clamp(1.6rem,2.8vw,3rem);}
.primary-nav a{font-size:.88rem;font-weight:500;color:var(--ink);letter-spacing:.005em;padding:.4rem 0;position:relative;white-space:nowrap;transition:color .25s var(--ease);}
.primary-nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:-1px;height:1.5px;background:var(--forest);transition:left .3s var(--ease),right .3s var(--ease);}
.primary-nav a:hover,.primary-nav a.is-current{color:var(--forest);}
.primary-nav a:hover::after,.primary-nav a.is-current::after{left:0;right:0;}
.btn-nav{padding:.72rem 1.4rem;font-size:.86rem;flex-shrink:0;}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;background:none;border:none;cursor:pointer;margin-left:auto;}
.nav-toggle span{display:block;height:2px;width:24px;background:var(--forest);border-radius:2px;transition:transform .3s var(--ease),opacity .2s var(--ease);}
.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);}
.mobile-nav{position:fixed;inset:0;z-index:99;background:linear-gradient(165deg,var(--forest) 0%,var(--deep) 100%);display:flex;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;}
.mobile-nav.open{opacity:1;visibility:visible;}
.mobile-nav-inner{width:100%;max-width:30rem;margin-inline:auto;min-height:100%;padding:6.5rem 2rem 2.5rem;display:flex;flex-direction:column;justify-content:center;}
.mobile-nav ul{display:flex;flex-direction:column;margin-bottom:2.4rem;}
.mobile-nav ul li{border-bottom:1px solid rgba(255,255,255,.1);}
.mobile-nav ul a{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);font-size:1.65rem;color:#fff;padding:1rem 0;opacity:0;transform:translateX(-14px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .25s var(--ease);}
.mobile-nav ul a::after{content:"→";font-family:var(--font-body);font-size:1rem;color:rgba(255,255,255,.32);transition:transform .3s var(--ease),color .25s var(--ease);}
.mobile-nav ul a:hover{color:var(--stone);}
.mobile-nav ul a:hover::after{transform:translateX(5px);color:var(--stone);}
.mobile-nav.open ul a{opacity:1;transform:none;}
.mobile-nav.open ul li:nth-child(1) a{transition-delay:.08s;}
.mobile-nav.open ul li:nth-child(2) a{transition-delay:.14s;}
.mobile-nav.open ul li:nth-child(3) a{transition-delay:.20s;}
.mobile-nav.open ul li:nth-child(4) a{transition-delay:.26s;}
.mobile-nav.open ul li:nth-child(5) a{transition-delay:.32s;}
.mobile-nav.open ul li:nth-child(6) a{transition-delay:.38s;}
.mobile-nav-foot{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease) .44s,transform .5s var(--ease) .44s;}
.mobile-nav.open .mobile-nav-foot{opacity:1;transform:none;}
.mobile-nav-cta{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;background:var(--white);color:var(--forest);font-family:var(--font-body);font-weight:600;font-size:1rem;padding:1.05rem;border-radius:999px;transition:background .25s var(--ease),transform .25s var(--ease);}
.mobile-nav-cta svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease);}
.mobile-nav-cta:hover{background:var(--bone);transform:translateY(-2px);}
.mobile-nav-cta:hover svg{transform:translateX(4px);}
.mobile-nav-contact{display:flex;flex-direction:column;gap:.5rem;margin-top:1.6rem;text-align:center;}
.mobile-nav-contact a{color:rgba(255,255,255,.66);font-size:.95rem;transition:color .2s var(--ease);}
.mobile-nav-contact a:hover{color:#fff;}
.mobile-nav-hours{display:block;color:rgba(255,255,255,.5);font-size:.9rem;margin-top:.3rem;}
.footer-hours{color:rgba(255,255,255,.55);}
.listings-empty{grid-column:1/-1;color:var(--muted);padding:1.5rem 0;}
.listings-empty a{color:var(--forest);font-weight:600;text-decoration:underline;}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-start;padding-top:84px;overflow:hidden;}
.hero-media{position:absolute;inset:0;z-index:-2;will-change:transform;}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% 20%;transform:scale(1.12);transition:transform 1.8s var(--ease);}
body.hero-in .hero-media img{transform:scale(1);}
/* Directional scrim: darkens the left/lower copy column for guaranteed legibility,
   clears to transparent on the right so the child stays luminous. Light top wash
   catches the headline; chessboard along the bottom stays bright. */
.hero-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,39,30,.42) 0%,rgba(4,39,30,.16) 28%,transparent 50%),linear-gradient(106deg,rgba(4,39,30,.92) 0%,rgba(4,39,30,.7) 32%,rgba(4,39,30,.44) 52%,rgba(4,39,30,.16) 68%,transparent 80%);}
.hero-inner{padding-block:clamp(3rem,7vw,6rem);width:100%;}
.hero-copy{max-width:44rem;}
.hero-title{color:#fff;font-size:clamp(3rem,2rem + 6.5vw,7rem);line-height:.98;letter-spacing:-.02em;text-shadow:0 2px 24px rgba(4,39,30,.45);}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.04em;}
.hero-title .line>span{display:block;transform:translateY(115%);transition:transform 1s var(--ease);}
body.hero-in .hero-title .line:nth-child(1)>span{transition-delay:.05s;transform:none;}
body.hero-in .hero-title .line:nth-child(2)>span{transition-delay:.16s;transform:none;}
.hero-sub{color:rgba(255,255,255,.92);font-size:clamp(1.05rem,1rem + .5vw,1.4rem);margin-top:1.6rem;max-width:30rem;line-height:1.5;text-shadow:0 1px 2px rgba(4,39,30,.7),0 2px 18px rgba(4,39,30,.5);opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease) .4s,transform .8s var(--ease) .4s;}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.4rem;opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease) .55s,transform .8s var(--ease) .55s;}
body.hero-in .hero-sub,body.hero-in .hero-actions{opacity:1;transform:none;}
.hero-scroll{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;z-index:1;}
.hero-scroll span{position:relative;padding-bottom:26px;display:block;}
.hero-scroll span::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:20px;background:rgba(255,255,255,.6);animation:scrolldot 1.8s var(--ease) infinite;}
/* SHORT VIEWPORTS — laptops with browser chrome, landscape phones, resized
   windows. The hero's display size and padding are driven by WIDTH only, so on
   a short-but-wide screen the content outgrew the viewport: the CTAs and the
   scroll cue fell below the fold (measured 579px of content in a 450px window).
   Scale the vertical rhythm against height so it always fits. */
@media (min-width:641px) and (max-height:720px){
  .hero{padding-top:76px;}
  .hero-inner{padding-block:clamp(1.25rem,3vh,2.5rem);}
  .hero-title{font-size:clamp(2.3rem,7.4vh,4.6rem);}
  .hero-sub{margin-top:1rem;font-size:clamp(1rem,2.3vh,1.2rem);}
  .hero-actions{margin-top:1.5rem;}
  .hero-scroll{display:none;}   /* no room for it, and it was being clipped */
}
@keyframes scrolldot{0%{transform:translateY(-10px) scaleY(.4);opacity:0;}50%{opacity:1;}100%{transform:translateY(6px) scaleY(1);opacity:0;}}

/* =========================================================
   TRUST STRIP
   ========================================================= */
.trust{background:var(--white);border-bottom:1px solid var(--bone);}
.trust-inner{display:flex;align-items:center;justify-content:center;gap:clamp(1.5rem,5vw,3.5rem);flex-wrap:wrap;padding-block:1.7rem;}
.trust-rating{display:flex;align-items:center;gap:.7rem;font-size:.98rem;}
.stars{color:#c79a3b;letter-spacing:.1em;font-size:1.05rem;}
.trust-rating-text strong{color:var(--forest);}
.trust-stats{display:flex;gap:clamp(1.5rem,4vw,3rem);padding-left:clamp(1.5rem,5vw,3.5rem);border-left:1px solid var(--stone);}
.trust-stats li{display:flex;flex-direction:column;line-height:1.1;}
.stat-num{font-family:var(--font-display);font-size:clamp(1.5rem,1.2rem + 1vw,2rem);color:var(--forest);font-variant-numeric:tabular-nums;}
.stat-label{font-size:.8rem;color:var(--muted);margin-top:.2rem;}
.trust-featured{display:flex;align-items:center;gap:.9rem;font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
.featured-logos{display:flex;gap:1rem;}
.featured-logos span{font-family:var(--font-display);font-size:.95rem;color:var(--ink);opacity:.55;text-transform:none;letter-spacing:0;}

/* ---------- As seen in — marquee ---------- */
.marquee{background:var(--bone);border-bottom:1px solid rgba(4,39,30,.07);overflow:hidden;}
.marquee-viewport{-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.marquee-track{display:flex;width:max-content;animation:marquee 40s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-group{display:flex;align-items:center;flex-shrink:0;padding-block:1.15rem;}
.marquee-group>span{white-space:nowrap;padding-inline:1.5rem;font-family:var(--font-display);font-size:1.15rem;color:var(--forest);opacity:.62;}
.marquee-group .marquee-cap{font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--forest);opacity:1;}
.marquee-group .sep{font-size:.5rem;opacity:.3;padding-inline:0;position:relative;top:-.15em;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* =========================================================
   INTRO
   ========================================================= */
.intro{padding-block:var(--section);}
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;column-gap:clamp(2.5rem,6vw,5.5rem);row-gap:1.6rem;align-items:start;}
.intro .kicker{grid-column:1;grid-row:1;margin:0;}
.intro-head{grid-column:1;grid-row:2;font-size:clamp(1.85rem,1.2rem + 2.5vw,3.25rem);line-height:1.07;}
.intro-body{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:1.1rem;color:var(--muted);}
.intro-body .lede{font-size:1.12em;color:var(--ink);}
.intro-body strong{color:var(--ink);}

/* =========================================================
   TWO PATHS (designed hover)
   ========================================================= */
.paths{padding-bottom:var(--section);}
.paths-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,3vw,2rem);}
.path-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--bone);transition:transform .5s var(--ease),box-shadow .5s var(--ease);display:flex;flex-direction:column;}
.path-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(4,39,30,.4);}
.path-media{position:relative;overflow:hidden;aspect-ratio:16/10;margin:0;}
.path-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 1.3s var(--ease);}
.path-card.in-view .path-media img{transform:scale(1);}
.path-card.in-view:hover .path-media img{transform:scale(1.05);}
.path-media figcaption{position:absolute;top:1rem;left:1rem;background:rgba(4,39,30,.82);backdrop-filter:blur(4px);color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .8rem;border-radius:999px;}
.path-body{padding:clamp(1.5rem,3vw,2.4rem);display:flex;flex-direction:column;flex:1;}
.path-body .link-arrow{margin-top:auto;align-self:flex-start;}
.path-body h3{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.3rem);margin-bottom:.7rem;display:inline-block;position:relative;}
.path-body h3::after{content:"";position:absolute;left:0;bottom:-.1em;width:100%;height:2px;background:var(--willow);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);}
.path-card:hover .path-body h3::after{transform:scaleX(1);}
.path-body p{color:var(--muted);margin-bottom:1.4rem;}
.path-body strong{color:var(--ink);}

/* =========================================================
   VALUES
   ========================================================= */
.values{padding-block:var(--section);background:var(--bone);}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);}
.value{background:var(--white);border-radius:var(--radius-lg);padding:clamp(1.8rem,3vw,2.6rem);box-shadow:var(--shadow-sm);transition:transform .5s var(--ease),box-shadow .5s var(--ease);display:flex;flex-direction:column;}
.value .link-arrow{margin-top:auto;align-self:flex-start;}
.value:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.value-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;background:rgba(3,63,46,.08);margin-bottom:1.4rem;transition:background .4s var(--ease),transform .5s var(--ease);}
.value:hover .value-icon{background:var(--forest);transform:rotate(-4deg);}
.value-icon svg{width:28px;height:28px;fill:none;stroke:var(--forest);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s var(--ease);}
.value:hover .value-icon svg{stroke:#fff;}
.value h3{font-size:1.55rem;margin-bottom:.65rem;}
.value p{color:var(--muted);margin-bottom:1.3rem;}

/* =========================================================
   PROCESS (pinned intro + scroll-lit steps)
   ========================================================= */
/* Home SELL SIGNPOST — editorial teaser to the full process on /sell/.
   Shares the About masthead's offset/stepped language (kicker+rule, a stepped
   two-line headline, a standfirst offset to the right) so the home page breaks
   its own left-aligned rhythm and reads as designed, not templated. */
.selltease{overflow:hidden;}
.selltease-index{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.5rem);margin-bottom:clamp(1.5rem,3.5vw,2.5rem);
  font-family:var(--font-body);font-weight:600;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--willow);}
.selltease-index::after{content:"";flex:1;height:1px;background:var(--stone);}
.selltease-index-alt{order:3;color:var(--muted);letter-spacing:.14em;}
.selltease-head{font-family:var(--font-display);font-weight:400;color:var(--forest);
  font-size:clamp(2.4rem,1rem + 6vw,6rem);line-height:.94;letter-spacing:-.03em;margin:0;}
.selltease-head span{display:block;}
.selltease-step{padding-left:clamp(1.5rem,13vw,10rem);}   /* the offset step */
.selltease-head em{font-style:italic;font-weight:500;}
.selltease-foot{margin-top:clamp(2.5rem,5vw,4rem);display:grid;gap:1.5rem;align-items:start;}
@media (min-width:900px){
  .selltease-foot{grid-template-columns:clamp(6rem,13vw,10rem) minmax(0,36rem);
    justify-content:end;margin-left:auto;}   /* standfirst sits right, under the step */
}
.selltease-foot p{grid-column:2;font-size:clamp(1.05rem,1rem + .4vw,1.25rem);line-height:1.55;color:var(--muted);margin:0;}
.selltease-foot .link-arrow{grid-column:2;}

.process{padding-block:var(--section);}
.process-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;}
.process-intro{position:sticky;top:104px;}
.process-intro h2{font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem);margin-bottom:1.1rem;}
.process-lead{color:var(--muted);margin-bottom:2rem;max-width:26rem;}
.steps{position:relative;padding-left:2.4rem;}
.steps-progress{position:absolute;left:0;top:0;width:2px;height:100%;background:var(--bone);border-radius:2px;overflow:hidden;}
.steps-progress i{display:block;width:100%;height:var(--p,0%);background:var(--forest);transition:height .15s linear;}
.step{display:flex;gap:clamp(1.2rem,3vw,2.2rem);padding-block:clamp(1.5rem,3vw,2.2rem);border-top:1px solid var(--bone);opacity:.4;transition:opacity .5s var(--ease);}
.step:last-child{border-bottom:1px solid var(--bone);}
.step.lit{opacity:1;}
.step-num{font-family:var(--font-display);font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);color:var(--stone);line-height:1;min-width:2.5ch;transition:color .5s var(--ease);}
.step.lit .step-num{color:var(--willow);}
.step h3{font-size:1.4rem;margin-bottom:.4rem;color:var(--ink);}
.step p{color:var(--muted);}
.step strong{color:var(--forest);}

/* =========================================================
   COMPARE
   ========================================================= */
.compare{padding-block:var(--section);background:var(--forest);position:relative;}
.compare .section-head h2{color:#fff;}

/* Frosted-glass table */
.compare-table.reveal{opacity:1;transform:none;}   /* panel itself stays put; rows animate */
.compare-table{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(158deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 44px 90px -44px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.18);}
/* light sheen that sweeps across as it scrolls into view */
.compare-table::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.04) 56%,transparent 72%);
  transform:translateX(-135%);}
.compare-table.in-view::after{transform:translateX(135%);transition:transform 1.6s var(--ease) .35s;}

.compare-row{display:grid;grid-template-columns:2.6fr 1fr 1fr;padding:0 clamp(1.2rem,2.5vw,2.4rem);
  border-bottom:1px solid rgba(255,255,255,.1);position:relative;
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),background .3s var(--ease);}
.compare-row:last-child{border-bottom:none;}
.compare-table.in-view .compare-row{opacity:1;transform:none;}
.compare-table.in-view .compare-row:nth-child(1){transition-delay:.04s;}
.compare-table.in-view .compare-row:nth-child(2){transition-delay:.10s;}
.compare-table.in-view .compare-row:nth-child(3){transition-delay:.16s;}
.compare-table.in-view .compare-row:nth-child(4){transition-delay:.22s;}
.compare-table.in-view .compare-row:nth-child(5){transition-delay:.28s;}
.compare-table.in-view .compare-row:nth-child(6){transition-delay:.34s;}
.compare-row:not(.compare-header):hover{background:rgba(255,255,255,.06);}

.compare-row>span{display:flex;align-items:center;padding-block:1.3rem;position:relative;z-index:1;}
.compare-label{justify-content:flex-start;color:rgba(255,255,255,.9);font-weight:500;}
.compare-row .col-aspire,.compare-row .col-other{justify-content:center;}
.col-aspire{background:rgba(255,255,255,.07);}

.compare-header{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.2);}
.compare-header .col-aspire{color:#fff;font-weight:700;}

.compare-row svg{width:24px;height:24px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.ic-yes{stroke:#fff;}
.ic-no{stroke:rgba(255,255,255,.34);}
/* Cursor-follow 3D tilt + glare (JS-driven, desktop pointer only) */
.compare-table{will-change:transform;}
.compare-glare{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);mix-blend-mode:soft-light;}
.compare-table.tilting .compare-glare{opacity:1;}

/* =========================================================
   CASE STUDY
   ========================================================= */
/* white bg: .case now only appears on Sell, directly after the bone fees
   section — keeping it bone would merge the two into one block. */
.case{padding-block:var(--section);}
.case-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.case-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);margin:0;}
.case-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transform:scale(1.12);transition:transform 1.4s var(--ease);}
.case-media.in-view img{transform:scale(1);}
.case-media figcaption{position:absolute;bottom:1rem;left:1rem;background:rgba(252,252,252,.92);color:var(--forest);font-size:.75rem;font-weight:600;letter-spacing:.06em;padding:.4rem .9rem;border-radius:999px;}
.case-body h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.9rem);margin-bottom:1.8rem;}
.case-facts{display:flex;flex-direction:column;gap:.9rem;margin-bottom:1.8rem;}
.case-facts>div{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding-bottom:.9rem;border-bottom:1px solid var(--stone);}
.case-facts dt{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--willow);font-weight:600;padding-top:.15rem;}
.case-facts dd{color:var(--ink);}

/* =========================================================
   DOORWAY (full-bleed cinematic + parting panels)
   ========================================================= */
.doorway{position:relative;min-height:min(88vh,760px);display:flex;align-items:center;overflow:hidden;color:#fff;}
.doorway-media{position:absolute;inset:0;z-index:0;will-change:transform;}
.doorway-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;}
.doorway-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(4,39,30,.9) 0%,rgba(4,39,30,.66) 40%,rgba(4,39,30,.28) 72%,rgba(4,39,30,.12) 100%);}
.doorway-panels{position:absolute;inset:0;z-index:2;pointer-events:none;}
.doorway-panels .dp{position:absolute;top:0;height:100%;width:51%;background:var(--deep);will-change:transform;transition:transform 1.15s var(--ease-door);}
.doorway-panels .dp-l{left:0;}
.doorway-panels .dp-r{right:0;}
.doorway.in-view .dp-l{transform:translateX(-101%);}
.doorway.in-view .dp-r{transform:translateX(101%);}
.doorway-content{position:relative;z-index:3;max-width:38rem;padding-block:clamp(3rem,7vw,5rem);opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease) .5s,transform .9s var(--ease) .5s;}
.doorway.in-view .doorway-content{opacity:1;transform:none;}
.doorway-content h2{color:#fff;font-size:clamp(2.4rem,1.6rem + 3.4vw,4.4rem);margin-bottom:1.4rem;line-height:1;}
.doorway-content p{color:rgba(255,255,255,.85);margin-bottom:1.8rem;max-width:30rem;}
.doorway-areas{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.2rem;}
.doorway-areas li{font-size:.85rem;padding:.4rem .9rem;border:1px solid rgba(255,255,255,.24);border-radius:999px;color:rgba(255,255,255,.8);}

/* =========================================================
   LISTINGS
   ========================================================= */
.listings{padding-block:var(--section);}
.listing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,3vw,2rem);}
.listing{border-radius:var(--radius-lg);overflow:hidden;background:var(--white);box-shadow:var(--shadow-sm);border:1px solid var(--bone);transition:transform .5s var(--ease),box-shadow .5s var(--ease);}
.listing:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.listing-media{position:relative;overflow:hidden;aspect-ratio:4/5;}
.listing-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.3s var(--ease);}
.listing.in-view .listing-media img{transform:scale(1);}
.listing.in-view:hover .listing-media img{transform:scale(1.06);}
.listing-tag{position:absolute;top:1rem;left:1rem;background:rgba(4,39,30,.9);backdrop-filter:blur(4px);color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .8rem;border-radius:999px;}
.listing-go{position:absolute;bottom:1rem;right:1rem;width:46px;height:46px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(10px) scale(.85);transition:opacity .45s var(--ease),transform .45s var(--ease);box-shadow:0 8px 20px -6px rgba(4,39,30,.45);}
.listing-go svg{width:19px;height:19px;fill:none;stroke:var(--forest);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.listing:hover .listing-go{opacity:1;transform:none;}
.listing-info{padding:1.4rem 1.5rem 1.7rem;}
.listing-info h3{font-size:1.3rem;color:var(--ink);margin-bottom:.3rem;}
.listing-meta{font-size:.9rem;color:var(--muted);margin-bottom:.7rem;}
.listing-price{font-family:var(--font-display);font-size:1.4rem;color:var(--forest);}
/* whole card is the click target */
.listing{cursor:pointer;}
.listing:focus-visible{outline:3px solid var(--willow);outline-offset:3px;}
.listing-cta{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;font-family:var(--font-body);font-weight:600;font-size:.92rem;color:var(--forest);}
.listing-cta svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease);}
.listing:hover .listing-cta svg{transform:translateX(5px);}

/* ---- Listing detail popup ------------------------------------------------ */
.plisting{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;padding:clamp(.6rem,3vw,2rem);}
.plisting.open{display:flex;}
.plisting-backdrop{position:absolute;inset:0;background:rgba(4,39,30,.62);backdrop-filter:blur(5px);opacity:0;animation:plFade .3s var(--ease) forwards;}
.plisting-panel{position:relative;z-index:1;width:min(980px,96vw);max-height:92vh;background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 40px 90px -30px rgba(4,39,30,.6);display:flex;align-items:stretch;opacity:0;transform:translateY(12px) scale(.98);animation:plRise .4s var(--ease) .04s forwards;}
.plisting-media{flex:1.2 1 0;min-width:0;display:flex;flex-direction:column;}
@keyframes plFade{to{opacity:1;}}
@keyframes plRise{to{opacity:1;transform:none;}}
.plisting-close{position:absolute;top:.85rem;right:.85rem;z-index:3;width:42px;height:42px;border:none;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 6px 18px -6px rgba(4,39,30,.5);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.plisting-close svg{width:18px;height:18px;fill:none;stroke:var(--forest);stroke-width:2.4;stroke-linecap:round;}
.plisting-close:hover{background:#fff;}
.plisting-gallery{position:relative;flex:0 0 auto;height:min(60vh,500px);background:var(--deep);}
.plisting-img{width:100%;height:100%;object-fit:cover;display:block;}
.plisting-tag{position:absolute;top:1rem;left:1rem;background:rgba(4,39,30,.9);color:#fff;font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .8rem;border-radius:999px;}
.plisting-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,.9);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px -6px rgba(4,39,30,.5);}
.plisting-nav.prev{left:.8rem;} .plisting-nav.next{right:.8rem;}
.plisting-nav svg{width:20px;height:20px;fill:none;stroke:var(--forest);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.plisting-nav:hover{background:#fff;}
.plisting-count{position:absolute;bottom:1rem;right:1rem;background:rgba(4,39,30,.82);color:#fff;font-size:.8rem;font-weight:600;padding:.3rem .7rem;border-radius:999px;}
.plisting-thumbs{flex:0 0 auto;display:flex;gap:.5rem;padding:.7rem;overflow-x:auto;scrollbar-width:thin;background:var(--bone);}
.plisting-thumb{flex:0 0 auto;width:74px;height:56px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;background:none;opacity:.6;transition:opacity .25s,border-color .25s;}
.plisting-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.plisting-thumb.is-active{opacity:1;border-color:var(--forest);}
.plisting-body{flex:1 1 0;min-width:0;min-height:0;padding:clamp(1.4rem,2.5vw,2.1rem);overflow-y:auto;}
.plisting-head{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.1rem;}
.plisting-title{font-family:var(--font-display);font-size:clamp(1.5rem,1rem + 1.4vw,2rem);color:var(--forest);line-height:1.1;}
.plisting-price{font-family:var(--font-display);font-size:1.5rem;color:var(--ink);font-variant-numeric:tabular-nums;}
.plisting-facts{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.2rem;padding:0;}
.plisting-facts li{background:var(--bone);color:var(--ink);font-size:.86rem;font-weight:600;padding:.4rem .85rem;border-radius:999px;}
.plisting-desc{color:var(--black);line-height:1.65;margin-bottom:1.5rem;}
.plisting-cta{display:flex;flex-wrap:wrap;gap:.7rem;}
.plisting-cta .btn{flex:1 1 auto;text-align:center;}
.form-prefill-note{margin:-.4rem 0 1rem;font-weight:600;color:var(--forest);}
@media (max-width:820px){
  .plisting-panel{flex-direction:column;width:96vw;}
  .plisting-media{flex:0 0 auto;}
  .plisting-gallery{height:min(42vh,340px);}
  .plisting-body{flex:1 1 auto;}
}
@media (prefers-reduced-motion:reduce){
  .plisting-backdrop,.plisting-panel{animation:none;opacity:1;transform:none;}
}

/* =========================================================
   TESTIMONIAL (editorial pull-quote)
   ========================================================= */
/* REVIEWS — auto-sliding carousel.
   The quote mark sits outside the viewport so it stays put while the quotes
   slide beneath it. Slides live in a flex row, so the track is always as tall
   as the longest review and the section never jumps height between slides. */
.testimonial{padding-block:var(--section);}
.tcar{max-width:54rem;margin-inline:auto;text-align:center;position:relative;}
.quote-mark{font-family:var(--font-display);font-size:7rem;line-height:.5;color:var(--stone);display:block;margin-bottom:.3rem;}
.tcar-viewport{overflow:hidden;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;}
.tcar-viewport:active{cursor:grabbing;}
.tcar-track{display:flex;transition:transform .85s var(--ease);will-change:transform;}
.tcar-slide{flex:0 0 100%;min-width:0;margin:0;padding-inline:.25rem;
  opacity:.25;transition:opacity .6s var(--ease);}
.tcar-slide.is-active{opacity:1;}
.testimonial blockquote{font-family:var(--font-display);font-size:clamp(1.4rem,1.05rem + 1.7vw,2.4rem);line-height:1.28;color:var(--forest);margin-bottom:1.6rem;text-wrap:balance;}
.testimonial figcaption{color:var(--muted);font-weight:600;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;}
.testimonial figcaption .stars{font-size:1rem;color:#c9a227;letter-spacing:.08em;}
/* dots */
.tcar-dots{display:flex;justify-content:center;gap:.55rem;margin-top:clamp(1.75rem,3vw,2.5rem);}
.tcar-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--stone);transition:background .35s var(--ease),width .35s var(--ease);}
.tcar-dot.is-active{background:var(--forest);width:24px;border-radius:999px;}
.tcar-dot:hover{background:var(--willow);}
/* keep the tap target comfortable without enlarging the visible dot */
.tcar-dot::before{content:"";position:absolute;inset:-14px;}
.tcar-dot{position:relative;}
@media (prefers-reduced-motion:reduce){
  .tcar-track{transition:none;}
  .tcar-slide{opacity:1;}
}

/* =========================================================
   FAQ
   ========================================================= */
.faq{padding-block:var(--section);background:var(--bone);}
.faq-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:start;}
.faq-intro{position:sticky;top:104px;}
.faq-intro h2{font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem);margin-bottom:1.1rem;}
.faq-lead{color:var(--muted);margin-bottom:2rem;max-width:26rem;}
.faq-list{border-top:1px solid rgba(3,63,46,.14);}
.faq-item{border-bottom:1px solid rgba(3,63,46,.14);}
.faq-q{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:1.5rem 0;font-family:var(--font-display);font-size:clamp(1.1rem,1rem + .5vw,1.45rem);line-height:1.25;color:var(--forest);transition:color .2s var(--ease);}
.faq-q:hover{color:var(--willow);}
.faq-icon{position:relative;width:18px;height:18px;flex-shrink:0;margin-top:.2em;}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease);}
.faq-icon::before{top:50%;left:0;width:100%;height:2px;transform:translateY(-50%);}
.faq-icon::after{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%);}
.faq-item.open .faq-icon::after{transform:translateX(-50%) scaleY(0);opacity:0;}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease);}
.faq-item.open .faq-a{grid-template-rows:1fr;}
.faq-a>div{overflow:hidden;}
.faq-a p{padding-bottom:1.6rem;color:var(--muted);max-width:44rem;}

/* =========================================================
   CTA
   ========================================================= */
.cta{background:var(--forest);color:#fff;padding-block:var(--section);}
.cta-inner{text-align:center;max-width:40rem;margin-inline:auto;}
.cta h2{color:#fff;font-size:clamp(2.2rem,1.5rem + 3vw,4rem);margin-bottom:1rem;}
.cta p{color:rgba(255,255,255,.85);margin-bottom:2rem;font-size:1.1rem;}
.cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--deep);color:rgba(255,255,255,.8);padding-top:clamp(3.5rem,6vw,5.5rem);}
/* Every page ends CTA (forest) → footer (deep). Without a seam the two greens
   merge into one heavy mass; a hairline reads as a deliberate edge. */
.cta + .site-footer{border-top:1px solid rgba(255,255,255,.1);}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(2rem,5vw,4rem);padding-bottom:clamp(2.5rem,4vw,3.5rem);align-items:start;}
.footer-logo{height:21px;width:auto;margin-bottom:1.4rem;}
.footer-brand p{max-width:24rem;font-size:.95rem;line-height:1.6;margin-bottom:1.6rem;}
.footer-contact{justify-self:start;}
.socials{display:flex;gap:.7rem;}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);}
.socials a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);transform:translateY(-2px);}
.socials svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.footer-col h4{font-family:var(--font-body);font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:1.2rem;}
.footer-col ul{display:flex;flex-direction:column;gap:.75rem;font-size:.95rem;}
/* the plain-text rows (Leeds / opening hours) had no size set, so they
   inherited the larger body size and out-sized the phone/email links. */
.footer-col li{font-size:.95rem;line-height:1.5;}
.footer-col a{transition:color .2s var(--ease);}
.footer-col a:hover{color:#fff;}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:1.6rem;border-top:1px solid rgba(255,255,255,.12);font-size:.85rem;color:rgba(255,255,255,.55);}

/* =========================================================
   STICKY MOBILE CTA
   ========================================================= */
.mobile-cta{display:none;position:fixed;left:1rem;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0));z-index:90;text-align:center;background:var(--forest);color:#fff;font-weight:600;padding:1rem;border-radius:999px;box-shadow:0 12px 30px -8px rgba(4,39,30,.6);transform:translateY(160%);transition:transform .45s var(--ease);}
.mobile-cta.show{transform:none;}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .9s var(--ease);}
.reveal.in-view{opacity:1;transform:none;}
.reveal[data-delay="1"]{transition-delay:.09s;}
.reveal[data-delay="2"]{transition-delay:.18s;}
.reveal[data-delay="3"]{transition-delay:.27s;}
.reveal-head{opacity:0;transform:translateY(22px);clip-path:inset(0 -6% 108% -6%);transition:clip-path 1s var(--ease),transform 1s var(--ease),opacity .6s var(--ease);}
.reveal-head.in-view{opacity:1;transform:none;clip-path:inset(-10% -6% -14% -6%);}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .primary-nav,.btn-nav{display:none;}
  .nav-toggle{display:flex;}
  .header-inner{gap:1rem;height:74px;}
}
@media (max-width:900px){
  .intro-grid{grid-template-columns:1fr;gap:1.3rem;}
  .intro .kicker,.intro-head,.intro-body{grid-column:1;grid-row:auto;}
  .paths-grid,.values-grid,.listing-grid{grid-template-columns:1fr;}
  .process-grid,.case-grid{grid-template-columns:1fr;gap:2.5rem;}
  .process-intro{position:static;}
  .faq-grid{grid-template-columns:1fr;gap:2rem;}
  .faq-intro{position:static;}
  .doorway-scrim{background:linear-gradient(180deg,rgba(4,39,30,.5) 0%,rgba(4,39,30,.35) 40%,rgba(4,39,30,.85) 100%);}
}
@media (max-width:640px){
  .hero{min-height:90vh;overflow:hidden;}
  /* Ease the framing so the child's head stays fully visible and lower in the
     frame, with the chessboard dropping below the buttons. */
  .hero-media img{height:108%;object-position:50% 12%;}
  /* Stronger, full-height scrim so the heading, sub-text and BOTH buttons stay readable. */
  .hero-overlay{background:linear-gradient(180deg,rgba(4,39,30,.86) 0%,rgba(4,39,30,.6) 34%,rgba(4,39,30,.42) 58%,rgba(4,39,30,.34) 78%,rgba(4,39,30,.3) 100%);}
  .hero-copy{max-width:100%;}
  .hero-actions{flex-direction:column;}
  .hero-actions .btn{width:100%;}
  /* "Browse homes" (ghost) sat over the busy chessboard — give it a legible translucent fill. */
  .hero .btn-ghost{background:rgba(4,39,30,.42);backdrop-filter:blur(3px);border-color:rgba(255,255,255,.9);}
  .hero-scroll{display:none;}
  .trust-inner{flex-direction:column;align-items:flex-start;gap:1.4rem;}
  .trust-stats{width:100%;justify-content:space-between;gap:1rem;padding-left:0;border-left:none;}
  .section-head.row{align-items:flex-start;}
  .case-facts>div{grid-template-columns:1fr;gap:.15rem;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;gap:.4rem;}
  .compare-row{grid-template-columns:1.4fr 1fr 1fr;padding-inline:.85rem;font-size:.92rem;}
  .compare-header{font-size:.72rem;letter-spacing:.03em;}
  .compare-header .col-aspire,.compare-header .col-other{padding-inline:.15rem;text-align:center;text-wrap:balance;line-height:1.15;}
  .mobile-cta{display:block;}
  /* listings become a snap-scroll carousel */
  .listing-grid{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:1rem;margin-inline:calc(-1 * var(--gutter));padding:.5rem var(--gutter) 1rem;}
  .listing-grid::-webkit-scrollbar{display:none;}
  .listing{flex:0 0 82%;scroll-snap-align:center;}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .reveal,.reveal-head,.compare-row{opacity:1;transform:none;clip-path:none;}
  .compare-table::after,.compare-glare{display:none;}
  .hero-media img,.path-media img,.case-media img,.listing-media img{transform:none!important;}
  .hero-title .line>span,.hero-sub,.hero-actions{transform:none;opacity:1;}
  .door-intro{display:none!important;}
  .doorway-panels{display:none;}
  .doorway-content{opacity:1;transform:none;}
  .hero-scroll{display:none;}
}

:focus-visible{outline:3px solid var(--willow);outline-offset:3px;border-radius:4px;}
.btn:focus-visible{outline-offset:4px;}
.doorway :focus-visible,.compare :focus-visible,.cta :focus-visible{outline-color:var(--stone);}

/* =========================================================
   INTERIOR PAGES — shared page hero
   ========================================================= */
.page-hero{position:relative;background:var(--bone);padding-top:calc(84px + clamp(2.5rem,6vw,4.5rem));padding-bottom:clamp(2.5rem,6vw,4.5rem);overflow:hidden;}
.page-hero .container{max-width:60rem;}
.page-hero .kicker{margin-bottom:1.1rem;}
.page-hero h1{font-family:var(--font-display);font-weight:400;color:var(--forest);font-size:clamp(2.4rem,1.6rem + 3vw,4.2rem);line-height:1.02;letter-spacing:-.015em;margin-bottom:1.2rem;}
.page-hero h1 .hl{color:var(--forest);}
.page-hero-lede{font-size:clamp(1.1rem,1rem + .5vw,1.4rem);color:var(--muted);max-width:44rem;line-height:1.5;}
.page-hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem;}
/* idle float, shared by the .lhero figure + chip */
@keyframes sellFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

/* ============ SELL PAGE — editorial statement (varies the rhythm) ============ */
.statement .kicker{display:inline-block;}
.statement-head{font-family:var(--font-display);font-weight:400;color:var(--forest);font-size:clamp(2rem,1.2rem + 3.2vw,3.8rem);line-height:1.05;letter-spacing:-.015em;max-width:18ch;margin-bottom:2.2rem;}
.statement-body{margin-left:auto;max-width:38rem;display:flex;flex-direction:column;gap:1.1rem;color:var(--muted);padding-left:1.75rem;border-left:2px solid var(--stone);}
.statement-body .lede{font-size:1.15em;color:var(--ink);line-height:1.5;}
.statement-body strong{color:var(--ink);}
@media (max-width:720px){
  .statement-body{margin-left:0;padding-left:1.2rem;}
}
.page-section{padding-block:var(--section);}
.page-section.bone{background:var(--bone);}
.page-section.green{background:var(--forest);color:#fff;}
.page-section.green h2,.page-section.green .section-head h2{color:#fff;}
.page-lead{max-width:44rem;color:var(--muted);font-size:1.1rem;line-height:1.6;}

/* =========================================================
   SHARED — layered editorial page hero (About + Buy)
   ========================================================= */
.lhero{overflow:visible;padding-bottom:clamp(3rem,6vw,5rem);}
.lhero .container{max-width:var(--container);}
.lhero-inner{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(1.5rem,4vw,3.75rem);align-items:center;}
.lhero-copy{position:relative;z-index:2;}
.lhero-index{display:flex;align-items:center;gap:.75rem;font-family:var(--font-body);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--willow);margin-bottom:1.35rem;}
.lhero-index span{display:inline-flex;}
.lhero-index::after{content:"";flex:0 0 3rem;height:2px;background:var(--willow);opacity:.55;}
.lhero .page-hero-lede{margin-top:1.2rem;}
/* media stack: shape (behind) · figure (float) · chip (front) */
.lhero-media{position:relative;margin-bottom:-2.25rem;}
.lhero-figure{position:relative;z-index:2;margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 32px 64px -30px rgba(4,39,30,.5);aspect-ratio:5/4;animation:sellFloat 7.5s ease-in-out infinite;}
.lhero-figure img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
/* opt-in framing shift for images whose subject sits off-centre (Sell) */
.lhero-figure--offset img{object-position:66% center;}
.lhero-shape{position:absolute;z-index:1;right:-1.5rem;top:1.6rem;width:72%;height:90%;border-radius:var(--radius-lg);background:linear-gradient(155deg,var(--willow),var(--forest));opacity:.16;}
.lhero-chip{position:absolute;z-index:3;left:-1rem;bottom:1.4rem;display:inline-flex;align-items:center;gap:.55rem;background:rgba(252,252,252,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--forest);font-weight:600;font-size:.86rem;padding:.7rem 1.1rem;border-radius:999px;box-shadow:var(--shadow-md);animation:sellFloat 7.5s ease-in-out infinite .4s;}
.lhero-chip svg{width:18px;height:18px;fill:none;stroke:var(--forest);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:820px){
  .lhero-inner{grid-template-columns:1fr;gap:2.25rem;}
  .lhero-media{margin-bottom:0;max-width:32rem;}
  .lhero-figure{aspect-ratio:16/10;}
  .lhero-shape{right:-1rem;top:1rem;height:88%;}
}

/* =========================================================
   ABOUT PAGE — its own layout language.
   Deliberately breaks the kicker/heading/grid rhythm the other pages share:
   a type-only masthead, an asymmetric story with a breaking pull-quote,
   a full-bleed dark stats band, and a stepped "creed" list.
   ========================================================= */

/* --- masthead: pure typography, no image --- */
.amast{position:relative;background:var(--bone);overflow:hidden;
  padding-top:calc(84px + clamp(2.5rem,6vw,5rem));padding-bottom:clamp(3rem,7vw,6rem);}
.amast-meta{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.5rem);margin-bottom:clamp(2rem,5vw,3.5rem);
  font-family:var(--font-body);font-weight:600;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--willow);}
.amast-meta::after{content:"";flex:1;height:1px;background:var(--stone);}
.amast-meta-alt{order:3;color:var(--muted);letter-spacing:.14em;}
.amast-title{font-family:var(--font-display);font-weight:400;color:var(--forest);
  font-size:clamp(2.6rem,1rem + 7.4vw,7.4rem);line-height:.92;letter-spacing:-.035em;margin:0;}
.amast-title span{display:block;}
/* the asymmetric step — the single move that makes it read as designed */
.amast-l2{padding-left:clamp(1.25rem,12vw,9rem);}
.amast-l2 em{font-style:italic;font-weight:500;}
.amast-foot{display:grid;gap:clamp(1.25rem,3vw,2.5rem);margin-top:clamp(2.5rem,5vw,4rem);align-items:start;}
@media (min-width:900px){
  .amast-foot{grid-template-columns:clamp(6rem,16vw,12rem) minmax(0,34rem);
    margin-left:auto;margin-right:0;justify-content:end;}  /* standfirst sits right, under the stepped line */
}
.amast-rule{height:1px;background:var(--stone);margin:0;margin-top:.9rem;}
@media (max-width:899px){ .amast-rule{max-width:5rem;} }
.amast-lede{font-size:clamp(1.05rem,1rem + .45vw,1.3rem);line-height:1.55;color:var(--muted);margin:0;}
.amast-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.75rem;}

/* --- story: asymmetric, quote breaks the column --- */
.astory{padding-block:var(--section);}
.astory-grid{display:grid;gap:clamp(1.5rem,4vw,3rem);}
@media (min-width:900px){
  .astory-grid{grid-template-columns:1fr 1fr;column-gap:clamp(2.5rem,6vw,5.5rem);align-items:start;}
  .astory-side{position:sticky;top:110px;}
}
.astory-head{font-family:var(--font-display);font-weight:400;color:var(--forest);
  font-size:clamp(1.9rem,1.2rem + 2.6vw,3.2rem);line-height:1.05;letter-spacing:-.02em;max-width:16ch;}
.astory-body{display:flex;flex-direction:column;gap:1.1rem;color:var(--muted);}
.astory-body .lede{font-size:1.12em;color:var(--ink);line-height:1.55;}
/* pull-quote breaks out of the body column back toward the left */
.astory-quote{margin:clamp(1.5rem,3vw,2.5rem) 0 0;padding:0;border:0;}
.astory-quote p{font-family:var(--font-display);font-style:italic;font-weight:400;color:var(--forest);
  font-size:clamp(1.35rem,1.1rem + 1.4vw,2.3rem);line-height:1.25;letter-spacing:-.015em;margin:0;text-wrap:balance;}
@media (min-width:900px){
  .astory-quote{grid-column:1 / -1;margin-top:clamp(3rem,6vw,5rem);
    padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--stone);}
  .astory-quote p{max-width:22ch;margin-left:auto;text-align:right;}
}

/* --- stats: full-bleed dark band --- */
.astats{background:var(--forest);color:#fff;padding-block:clamp(2.75rem,5.5vw,4.5rem);}
.astats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,3vw,2.5rem);}
.astat{display:flex;flex-direction:column;gap:.45rem;padding-left:clamp(1rem,2vw,1.75rem);border-left:1px solid rgba(255,255,255,.18);}
.astat:first-child{padding-left:0;border-left:0;}
.astats .stat-num{color:#fff;font-size:clamp(2.1rem,1.4rem + 2.6vw,4rem);line-height:1;font-variant-numeric:tabular-nums;}
.astat-label{font-size:.85rem;line-height:1.4;color:rgba(255,255,255,.66);}
@media (max-width:760px){
  .astats-grid{grid-template-columns:1fr 1fr;gap:1.75rem 1.25rem;}
  .astat:nth-child(odd){padding-left:0;border-left:0;}
}

/* --- creed: a stepped descent, not three equal boxes --- */
.acreed{padding-block:var(--section);}
.acreed-head{font-family:var(--font-display);font-weight:400;color:var(--forest);
  font-size:clamp(2rem,1.3rem + 2.6vw,3.4rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:clamp(2rem,4vw,3rem);}
.acreed-list{list-style:none;margin:0;padding:0;}
.acreed-item{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,2.5rem);align-items:start;
  padding-block:clamp(1.5rem,3vw,2.25rem);border-top:1px solid var(--stone);}
/* each entry steps further right */
@media (min-width:760px){
  .acreed-item:nth-child(2){margin-left:clamp(2rem,8vw,6rem);}
  .acreed-item:nth-child(3){margin-left:clamp(4rem,16vw,12rem);}
}
.acreed-num{font-family:var(--font-display);font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);line-height:1;color:var(--stone);min-width:2.5ch;transition:color .45s var(--ease);}
.acreed-item:hover .acreed-num{color:var(--willow);}
.acreed-copy h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.9rem);color:var(--ink);margin-bottom:.45rem;}
.acreed-copy p{color:var(--muted);max-width:38rem;}

/* =========================================================
   ABOUT — team showcase: hero + index
   Markup generated by build.py from data/team.json.
   The active member fills the hero stage and their details show on the
   right; the small overlapping thumbnails are the index. main.js cycles
   through them, and hover/focus takes the cycle over.
   ========================================================= */
.teamshow{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(1.75rem,3.5vw,2.75rem);max-width:64rem;}
@media (min-width:900px){ .teamshow{flex-direction:row;align-items:center;gap:clamp(2.25rem,4.5vw,4rem);} }

/* — hero stage: every portrait stacked in one cell, cross-fading — */
.teamshow-stage{position:relative;display:grid;flex-shrink:0;width:100%;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:var(--stone);
  box-shadow:0 2px 4px rgba(28,28,28,.05),0 10px 24px rgba(28,28,28,.09),0 24px 48px rgba(28,28,28,.07);}
.teamshow-hero{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transform:scale(1.06);
  transition:opacity .18s var(--ease),visibility .18s,transform .18s var(--ease);}
.teamshow-hero.is-active{opacity:1;visibility:visible;transform:scale(1);
  transition:opacity .55s var(--ease) .18s,transform 1.1s var(--ease) .18s,visibility 0s;}
.teamshow-hero img{width:100%;height:100%;object-fit:cover;display:block;}

/* — left column: hero with its index strip sitting directly beneath, both
     locked to the same width so the strip reads as part of the composition — */
.teamshow-left{display:flex;flex-direction:column;gap:.85rem;flex-shrink:0;width:clamp(210px,30vw,370px);max-width:100%;}
/* stacked: let the hero use the width it's got, or the thumbs get too small to read */
@media (max-width:899px){ .teamshow-left{width:100%;max-width:23rem;} }

/* — details panel: all stacked in one grid cell so the box is as tall as the
     tallest and nothing shifts between people. Outgoing clears before incoming
     arrives, so two names never ghost over each other. — */
.teamshow-info{display:grid;flex:1;min-width:0;width:100%;}
.teamshow-panel{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;}
.teamshow-panel.is-active{opacity:1;visibility:visible;transform:none;
  transition:opacity .4s var(--ease) .16s,transform .45s var(--ease) .16s,visibility 0s;}

.teamshow-role{margin:0 0 .6rem;position:relative;padding-left:3.25rem;font-family:var(--font-body);font-weight:600;font-size:.7rem;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:var(--willow);}
.teamshow-role::before{content:"";position:absolute;left:0;top:.5em;width:2.5rem;height:2px;background:var(--willow);opacity:.6;}
.teamshow-name{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,1.4rem + 2vw,3.1rem);line-height:1.02;letter-spacing:-.015em;color:var(--forest);margin:0;}
.teamshow-note{margin:1rem 0 0;max-width:28rem;font-family:var(--font-display);font-style:italic;font-size:clamp(1.05rem,1rem + .35vw,1.35rem);line-height:1.45;color:var(--ink);}
.teamshow-social{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;}
.teamshow-social a{display:inline-flex;padding:.4rem;border-radius:6px;color:var(--muted);transition:color .15s var(--ease),background .15s var(--ease),transform .15s var(--ease);}
.teamshow-social a:hover{color:var(--forest);background:rgba(3,63,46,.1);transform:translateY(-2px);}
.teamshow-social svg{width:14px;height:14px;fill:currentColor;}

/* — index strip: sits under the hero, sized to match it. Thumbs are big enough
     to read as faces (a muddle of overlapping heads is not premium) with just
     enough overlap for depth. — */
/* NB: no overflow here. A scroll container clips its children at the padding
   box — shadows included — which slices hard straight edges across them. The
   thumbs are flex:1 1 0 so they always fit; nothing needs to scroll. */
.teamshow-photos{display:flex;align-items:flex-start;gap:.45rem;padding:.4rem 0 .5rem;max-width:100%;}
.teamshow-card{position:relative;z-index:1;margin:0;flex:1 1 0;min-width:0;overflow:hidden;border-radius:10px;cursor:pointer;background:var(--stone);aspect-ratio:1/1;
  box-shadow:0 1px 2px rgba(28,28,28,.06),0 4px 10px rgba(28,28,28,.08);
  transition:opacity .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);}
.teamshow-card img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;}
.teamshow-card:focus-visible{outline:3px solid var(--willow);outline-offset:3px;}
.teamshow-card.is-active{z-index:10;transform:translateY(-6px) scale(1.06);
  box-shadow:0 2px 4px rgba(28,28,28,.06),0 10px 22px rgba(28,28,28,.10),0 18px 36px rgba(28,28,28,.07);}
.teamshow[data-active] .teamshow-card:not(.is-active){opacity:.5;}
.teamshow-card:hover{opacity:1;}

@media (prefers-reduced-motion:reduce){
  .teamshow-card,.teamshow-card.is-active,
  .teamshow[data-active] .teamshow-card:not(.is-active){transform:none;}
  .teamshow-panel,.teamshow-hero,.teamshow-hero.is-active{transform:none;}
}

/* =========================================================
   FORMS (contact / valuation)
   ========================================================= */
.form{display:grid;gap:1.1rem;}
/* .form-body wraps the fields so the success message can replace them. It must
   carry the rhythm itself — .form's gap only separates it from .form-success,
   so without this every row, the submit button and the note sit flush (0px). */
.form-body{display:grid;gap:1.1rem;}
.form-row.two{display:grid;gap:1.1rem;}
@media (min-width:640px){ .form-row.two{grid-template-columns:1fr 1fr;} }
.field{display:flex;flex-direction:column;gap:.4rem;}
.field label{font-size:.85rem;font-weight:600;color:var(--ink);}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:1rem;padding:.85rem 1rem;border:1px solid var(--stone);border-radius:10px;background:var(--white);color:var(--ink);width:100%;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);}
/* Native select chrome is the clearest "template" tell — replace it with a
   brand chevron. appearance:none strips the OS widget on every engine. */
.field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:2.75rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23033F2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:1.05rem;}
.field select::-ms-expand{display:none;}
.field select:hover{border-color:var(--willow);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(3,63,46,.12);}
.field textarea{min-height:130px;resize:vertical;}
.form-note{font-size:.85rem;color:var(--muted);}
.form-note a{color:var(--forest);font-weight:600;}
.form .btn{justify-self:start;}
.form-success{display:none;padding:1.25rem 1.4rem;border-radius:var(--radius);background:rgba(3,63,46,.06);color:var(--forest);font-weight:500;}
.form.sent .form-success{display:block;}
.form.sent .form-body{display:none;}

/* CONTACT PAGE */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;}
.contact-info .contact-lines{display:flex;flex-direction:column;gap:1rem;margin:1.4rem 0 1.8rem;}
.contact-line{display:flex;gap:.9rem;align-items:flex-start;}
.contact-line svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:var(--willow);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:.15rem;}
.contact-line a{color:var(--ink);font-weight:600;}
.contact-line a:hover{color:var(--forest);}
.contact-line span{color:var(--muted);}
.contact-map{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--bone);aspect-ratio:16/10;margin-top:1.5rem;}
.contact-map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.2);}
.contact-form-card{background:var(--white);border:1px solid var(--bone);border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,2.5rem);box-shadow:var(--shadow-md);}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;gap:2.5rem;} }

/* =========================================================
   BUY — "how buying works" route
   Deliberately NOT the .steps pattern (already used on Sell + Home).
   Steps hang from a horizontal hairline with node markers; numerals are
   outlined rather than filled — an editorial touch used nowhere else.
   ========================================================= */
.route{position:relative;}
.route-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,3vw,2.5rem);list-style:none;margin:0;padding:0;}
/* the hairline the steps hang from */
.route-track::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--stone) 8%,var(--stone) 92%,transparent);}
.route-step{position:relative;padding-top:2.4rem;}
/* Gentle stagger so it reads as a composition, not a rigid grid — applied to
   the content only, so the nodes stay anchored on the hairline. */
.route-step:nth-child(even) .route-num{margin-top:clamp(.9rem,1.8vw,1.6rem);}
/* node sitting on the hairline */
.route-node{position:absolute;top:0;left:0;width:11px;height:11px;margin-top:-5px;border-radius:50%;background:var(--bone);border:1.5px solid var(--stone);transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease);}
/* Solid display numerals in a light tone, deepening on hover — matching
   .step-num / .point-num. (An outlined/stroke treatment was tried here and
   rejected: it's used nowhere else in the brand and read as out of place.) */
.route-num{display:block;font-family:var(--font-display);font-size:clamp(3.2rem,5.5vw,5rem);line-height:.9;color:var(--stone);margin-bottom:.9rem;transition:color .45s var(--ease);}
.route-step:hover .route-num{color:var(--willow);}
.route-step h3{font-size:clamp(1.15rem,1rem + .45vw,1.4rem);color:var(--ink);margin-bottom:.5rem;}
.route-step p{color:var(--muted);font-size:.98rem;max-width:26rem;}
.route-step:hover .route-node{background:var(--forest);border-color:var(--forest);transform:scale(1.25);}
/* a quiet closing line, sits under the route */
.route-foot{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:clamp(1.5rem,3vw,2rem);border-top:1px solid var(--stone);display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;}
.route-foot p{color:var(--muted);margin:0;}
@media (max-width:900px){
  .route-track{grid-template-columns:1fr 1fr;gap:2rem clamp(1.25rem,3vw,2rem);}
  .route-step:nth-child(even) .route-num{margin-top:0;}
  .route-step:nth-child(n+3){padding-top:2rem;}
}
@media (max-width:560px){
  .route-track{grid-template-columns:1fr;}
  .route-track::before{display:none;}
  .route-step{padding-top:1.6rem;border-top:1px solid var(--stone);}
  .route-node{display:none;}
  .route-num{font-size:2.8rem;margin-bottom:.5rem;}
}
@media (prefers-reduced-motion:reduce){
  .route-step:hover .route-node{transform:none;}
}

/* BUY — filters */
.filters{display:flex;flex-wrap:wrap;gap:.8rem;align-items:end;margin-bottom:clamp(1.5rem,3vw,2.5rem);}
.filters .field{flex:1 1 150px;gap:.35rem;}
.filters .field label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--willow);}
.filters .field select{padding:.7rem 2.5rem .7rem .9rem;background-position:right .8rem center;}
.filters-reset{background:none;border:none;color:var(--muted);font-weight:600;cursor:pointer;padding:.7rem .4rem;font-size:.9rem;}
.filters-reset:hover{color:var(--forest);}
.listings-count{color:var(--muted);font-size:.95rem;margin-bottom:1.2rem;}

/* SELL — fees / points (depth + motion) */
.points-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,3vw,2rem);}
.point{position:relative;overflow:hidden;background:var(--white);border:1px solid var(--bone);border-radius:var(--radius-lg);padding:clamp(1.75rem,3vw,2.4rem);box-shadow:var(--shadow-sm);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);}
.point:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--willow);}
.point .point-num{position:absolute;top:.1rem;right:1.1rem;z-index:0;font-family:var(--font-display);font-size:5.5rem;line-height:1;color:var(--bone);pointer-events:none;transition:color .5s var(--ease);}
.point:hover .point-num{color:var(--stone);}
.point h3{position:relative;z-index:1;display:inline-block;font-size:1.3rem;margin:.4rem 0 .5rem;color:var(--ink);}
.point h3::after{content:"";position:absolute;left:0;bottom:-.15em;width:100%;height:2px;background:var(--willow);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);}
.point:hover h3::after{transform:scaleX(1);}
.point p{position:relative;z-index:1;color:var(--muted);}
@media (min-width:821px){ .points-grid .point:nth-child(2){margin-top:-1.75rem;} }
@media (max-width:820px){ .points-grid{grid-template-columns:1fr;} }
@media (prefers-reduced-motion:reduce){
  .lhero-figure,.lhero-chip{animation:none;}
  .point{transition:box-shadow .3s var(--ease);}
  .point:hover{transform:none;}
}

/* BLOG — post cards */
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1.5rem,3vw,2.2rem);}

/* ---- Blog article pages ------------------------------------------------- */
.post-hero{background:var(--bone);padding-top:clamp(3.5rem,7vw,5.5rem);padding-bottom:clamp(2.6rem,6vw,4.6rem);border-bottom:1px solid rgba(4,39,30,.07);}
.post-hero-inner{max-width:50rem;}
.post-hero .post-cat{margin-bottom:1rem;}
.post-hero h1{font-family:var(--font-display);font-weight:400;color:var(--forest);font-size:clamp(2rem,1.2rem + 3vw,3.4rem);line-height:1.08;letter-spacing:-.02em;text-wrap:balance;}
.post-standfirst{margin-top:1.2rem;font-size:clamp(1.1rem,1rem + .5vw,1.35rem);color:var(--muted);line-height:1.5;max-width:40rem;}
.post-hero .post-meta{margin-top:1.4rem;}
.prose{max-width:44rem;margin-inline:auto;padding-block:clamp(2.5rem,5vw,4rem);color:var(--black);}
.prose>*+*{margin-top:1.15em;}
.prose p{line-height:1.75;}
.prose h2{font-family:var(--font-display);font-weight:400;color:var(--forest);font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);line-height:1.15;margin-top:2.4em;letter-spacing:-.015em;text-wrap:balance;}
.prose h3{font-family:var(--font-body);font-weight:700;color:var(--ink);font-size:1.2rem;margin-top:1.8em;}
.prose ul{padding-left:1.3em;display:flex;flex-direction:column;gap:.5em;}
.prose li{line-height:1.6;}
.prose li::marker{color:var(--willow);}
.prose strong{color:var(--ink);font-weight:700;}
.prose a{color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.prose .prose-lede{font-size:1.15rem;color:var(--ink);}
.post-faq{margin-top:2.6em;padding-top:2em;border-top:1px solid var(--bone);}
.post-faq h3{margin-top:1.6em;}
.post-faq h3:first-of-type{margin-top:1em;}
.post-card{display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;background:var(--white);border:1px solid var(--bone);box-shadow:var(--shadow-sm);transition:transform .5s var(--ease),box-shadow .5s var(--ease);}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.post-media{aspect-ratio:3/2;overflow:hidden;}
.post-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);}
.post-card:hover .post-media img{transform:scale(1.05);}
.post-body{padding:1.4rem 1.5rem 1.7rem;display:flex;flex-direction:column;gap:.5rem;flex:1;}
.post-cat{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--willow);font-weight:600;}
.post-card h3{font-size:1.3rem;color:var(--ink);line-height:1.2;}
.post-excerpt{color:var(--muted);font-size:.95rem;flex:1;}
.post-meta{font-size:.82rem;color:var(--muted);margin-top:.3rem;}
@media (max-width:900px){ .post-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .post-grid{grid-template-columns:1fr;} }

/* =====================================================
   AI CHAT WIDGET
   ===================================================== */
.chat{position:fixed;right:clamp(1rem,3vw,1.75rem);bottom:calc(clamp(1rem,3vw,1.75rem) + env(safe-area-inset-bottom,0));z-index:95;font-family:var(--font-body);}
.chat .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;}
.chat [hidden]{display:none !important;}

/* Launcher */
.chat-launcher{display:inline-flex;align-items:center;gap:.55rem;background:var(--forest);color:#fff;border:0;cursor:pointer;
  padding:.85rem 1.25rem;border-radius:999px;font:600 .95rem/1 var(--font-body);
  box-shadow:0 14px 34px -10px rgba(4,39,30,.65);transition:transform .3s var(--ease),background .3s var(--ease);}
.chat-launcher:hover{background:var(--willow);transform:translateY(-2px);}
.chat-launcher:focus-visible{outline:3px solid var(--willow);outline-offset:3px;}
.chat-launcher svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.chat-launcher-close{display:none;}
.chat[data-open="true"] .chat-launcher-open,
.chat[data-open="true"] .chat-launcher-label{display:none;}
.chat[data-open="true"] .chat-launcher-close{display:block;}
.chat[data-open="true"] .chat-launcher{padding:.85rem;}

/* Panel */
.chat-panel{position:absolute;right:0;bottom:calc(100% + .85rem);width:min(23rem,calc(100vw - 2rem));
  max-height:min(34rem,calc(100vh - 6rem));display:flex;flex-direction:column;overflow:hidden;
  background:var(--white);border:1px solid var(--bone);border-radius:var(--radius-lg);
  box-shadow:0 30px 70px -24px rgba(4,39,30,.55);
  opacity:0;transform:translateY(12px) scale(.98);transform-origin:bottom right;pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease);}
.chat[data-open="true"] .chat-panel{opacity:1;transform:none;pointer-events:auto;}

.chat-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.9rem 1rem;background:var(--forest);color:#fff;}
.chat-head-id{display:flex;align-items:center;gap:.65rem;}
.chat-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);flex:none;}
.chat-avatar svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linejoin:round;}
.chat-title{font:600 1rem/1.1 var(--font-body);margin:0;}
.chat-sub{font-size:.74rem;opacity:.75;margin:.15rem 0 0;}
.chat-close{background:transparent;border:0;color:#fff;cursor:pointer;padding:.3rem;border-radius:8px;line-height:0;}
.chat-close svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;}
.chat-close:hover{background:rgba(255,255,255,.14);}
.chat-close:focus-visible{outline:2px solid #fff;outline-offset:2px;}

.chat-log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.65rem;background:var(--bone);}
.chat-msg{max-width:85%;padding:.7rem .85rem;border-radius:14px;font-size:.9rem;line-height:1.45;white-space:pre-wrap;}
.chat-msg.bot{align-self:flex-start;background:#fff;color:var(--ink);border-bottom-left-radius:4px;box-shadow:var(--shadow-sm);}
.chat-msg.user{align-self:flex-end;background:var(--forest);color:#fff;border-bottom-right-radius:4px;}
.chat-msg a{color:inherit;text-decoration:underline;}
.chat-typing{align-self:flex-start;display:inline-flex;gap:.28rem;padding:.8rem .9rem;background:#fff;border-radius:14px;border-bottom-left-radius:4px;box-shadow:var(--shadow-sm);}
.chat-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.5;animation:chatBlink 1.1s infinite ease-in-out;}
.chat-typing span:nth-child(2){animation-delay:.2s;}
.chat-typing span:nth-child(3){animation-delay:.4s;}
@keyframes chatBlink{0%,60%,100%{opacity:.25;transform:translateY(0);}30%{opacity:.9;transform:translateY(-3px);}}

.chat-chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem 1rem;background:var(--white);border-top:1px solid var(--bone);}
.chat-chip{background:var(--bone);border:1px solid var(--stone);color:var(--forest);cursor:pointer;
  font:500 .8rem/1 var(--font-body);padding:.5rem .7rem;border-radius:999px;transition:background .2s var(--ease),color .2s var(--ease);}
.chat-chip:hover{background:var(--forest);color:#fff;border-color:var(--forest);}
.chat-chip:focus-visible{outline:2px solid var(--willow);outline-offset:2px;}

.chat-input{display:flex;align-items:center;gap:.5rem;padding:.65rem .75rem;background:var(--white);border-top:1px solid var(--bone);}
.chat-input input{flex:1;border:1px solid var(--stone);border-radius:999px;padding:.65rem .9rem;font:400 .9rem var(--font-body);color:var(--ink);background:#fff;}
.chat-input input:focus{outline:2px solid var(--willow);outline-offset:1px;border-color:var(--willow);}
.chat-send{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:var(--forest);cursor:pointer;transition:background .2s var(--ease);}
.chat-send svg{width:20px;height:20px;fill:#fff;}
.chat-send:hover{background:var(--willow);}
.chat-send:focus-visible{outline:2px solid var(--willow);outline-offset:2px;}
.chat-send:disabled{opacity:.5;cursor:default;}

.chat-foot{margin:0;padding:.45rem 1rem .7rem;font-size:.72rem;color:var(--muted);text-align:center;background:var(--white);}
.chat-foot a{color:var(--forest);font-weight:600;}

/* In-chat enquiry form */
.chat-enquiry{padding:.9rem 1rem 1rem;background:var(--white);border-top:1px solid var(--bone);overflow-y:auto;}
.chat-enquiry-intro{margin:0 0 .7rem;font-weight:600;color:var(--ink);font-size:.92rem;}
.chat-enquiry-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;}
.chat-enquiry label{display:flex;flex-direction:column;gap:.25rem;font-size:.78rem;font-weight:600;color:var(--muted);}
.chat-enquiry input[type=text],.chat-enquiry input[type=tel],.chat-enquiry input[type=email],.chat-enquiry textarea{
  border:1px solid var(--stone);border-radius:8px;padding:.5rem .6rem;font:400 .88rem var(--font-body);color:var(--ink);background:#fff;font-weight:400;}
.chat-enquiry input:focus,.chat-enquiry textarea:focus{outline:2px solid var(--willow);outline-offset:1px;border-color:var(--willow);}
.chat-enquiry-kind{border:0;margin:.7rem 0 0;padding:0;display:flex;gap:1.1rem;}
.chat-enquiry-kind legend{font-size:.78rem;font-weight:600;color:var(--muted);padding:0;margin-bottom:.35rem;}
.chat-enquiry-kind label{flex-direction:row;align-items:center;gap:.35rem;color:var(--ink);font-weight:500;}
.chat-enquiry-msg{margin-top:.7rem;}
.chat-enquiry-msg span{font-weight:400;}
.chat-consent{flex-direction:row;align-items:flex-start;gap:.5rem;margin-top:.8rem;font-weight:400;color:var(--muted);font-size:.78rem;line-height:1.4;}
.chat-consent input{margin-top:.15rem;flex:none;}
.chat-consent a{color:var(--forest);font-weight:600;}
.chat-enquiry-actions{display:flex;gap:.6rem;align-items:center;margin-top:.9rem;}
.chat-enquiry-actions .btn{flex:1;}
.chat-enquiry-cancel{background:transparent;border:0;color:var(--muted);cursor:pointer;font:600 .85rem var(--font-body);text-decoration:underline;padding:.4rem 0;}
.chat-enquiry-cancel:hover{color:var(--forest);}

/* Mobile: lift launcher above the sticky CTA; panel goes near-fullscreen */
@media (max-width:640px){
  .chat{right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0));}
  body:has(.mobile-cta) .chat{bottom:calc(4.75rem + env(safe-area-inset-bottom,0));}
  .chat-panel{width:calc(100vw - 2rem);max-height:calc(100vh - 8rem);}
}

@media (prefers-reduced-motion:reduce){
  .chat-launcher,.chat-panel,.chat-chip,.chat-send{transition:none;}
  .chat-launcher:hover{transform:none;}
  .chat-typing span{animation:none;}
}