/* Layout: an airy editorial magazine. Asymmetric two-column spreads, an arched "doorway" crop on photos,
   generous white space, color used in small doses. Fonts are free stand-ins for Editor's Note (display)
   and Proxima Nova (text); swap the two font tokens below to use the licensed fonts. */
:root{
  color-scheme: light;
  --paper:#faf9f7;      /* brand off-white, main ground */
  --linen:#f1ede4;      /* warmer alternate ground */
  --ink:#38352d;        /* warm charcoal text */
  --ink-soft:#6b665a;   /* secondary text */
  --olive:#796836;      /* brand olive: buttons, headings accents */
  --sage:#a79a79;       /* brand tan-sage: rules, labels */
  --maple:#df8f4f;      /* brand orange: tiny accents only */
  --mist:#c7c8cf;       /* brand cool grey: hairlines */
  --rule:#e3ddd0;
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --text:"Montserrat","Proxima Nova","Helvetica Neue",Arial,sans-serif;
  --wrap:1240px;
  --gutter:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-weight:400;font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.01em}
em,.it{font-style:italic}
p{margin:0}
.eyebrow{font-family:var(--text);font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:1em 1.9em;font-family:var(--text);font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border:1px solid var(--olive);background:var(--olive);color:var(--paper);transition:background .25s,color .25s;cursor:pointer}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn.ghost{background:transparent;color:var(--olive)}
.btn.ghost:hover{background:var(--olive);color:var(--paper)}
.link{font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--olive);border-bottom:1px solid var(--sage);padding-bottom:.35em;transition:border-color .2s}
.link:hover{border-color:var(--maple)}

/* top note */
.note{background:var(--linen);text-align:center;font-size:.8rem;padding:.65em var(--gutter);color:var(--ink-soft)}
.note a{color:var(--olive);font-weight:500;text-underline-offset:3px}

/* header */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid transparent}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px}
.brand img{height:44px;width:auto}
nav.main{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px)}
nav.main a{font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
nav.main a:not(.btn):hover{color:var(--olive)}
nav.main .btn{padding:.85em 1.4em}
.menu-btn{display:none;background:none;border:0;font:inherit;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);cursor:pointer;padding:8px 0}
@media (max-width:980px){
  .menu-btn{display:block}
  nav.main{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:18px;padding:24px var(--gutter) 32px;background:var(--paper);border-bottom:1px solid var(--rule);display:none}
  nav.main.open{display:flex}
}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);align-items:end;padding-block:clamp(40px,7vw,96px) clamp(56px,8vw,120px)}
.hero h1{font-size:clamp(3.6rem,10.5vw,9rem);line-height:.92;margin-block:.28em .32em;color:var(--ink)}
.hero h1 em{color:var(--olive)}
.hero .lede{font-family:var(--display);font-size:clamp(1.3rem,2.1vw,1.7rem);line-height:1.4;max-width:30ch;color:var(--ink)}
.hero .sub{margin-top:1.2em;max-width:46ch;color:var(--ink-soft)}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.2em}
.pride{margin-top:2.6em;font-size:.8rem;color:var(--ink-soft);display:flex;align-items:center;gap:.8em}
.pride::before{content:"";width:28px;height:1px;background:var(--sage)}
.portrait{position:relative;justify-self:end;width:100%;max-width:470px}
.arch{border-radius:999px 999px 0 0;overflow:hidden;aspect-ratio:4/5.4;background:var(--linen)}
.arch img{width:100%;height:100%;object-fit:cover}
.stamp{position:absolute;left:-58px;bottom:-46px;width:150px;height:150px;border-radius:50%;background:var(--paper);padding:10px}
.stamp img{width:100%;height:100%}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.stamp img{animation:none}html{scroll-behavior:auto}}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;align-items:start}
  .portrait{justify-self:center;max-width:380px;margin-top:8px}
  .stamp{left:-14px;bottom:-36px;width:118px;height:118px}
}

/* mission */
.mission{border-top:1px solid var(--rule);padding-block:clamp(64px,9vw,128px)}
.mission .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:clamp(24px,5vw,72px)}
.mission p{font-family:var(--display);font-size:clamp(1.55rem,3.1vw,2.6rem);line-height:1.32;color:var(--ink);max-width:34ch}
.mission p em{color:var(--olive)}
@media (max-width:820px){.mission .grid{grid-template-columns:1fr}}

/* about */
.about{padding-block:clamp(40px,6vw,80px) clamp(72px,10vw,140px)}
.about .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:center}
.collage{position:relative;padding-bottom:16%}
.collage .a{width:72%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.collage .b{position:absolute;right:0;bottom:0;width:58%;aspect-ratio:4/3;object-fit:cover;border:10px solid var(--paper)}
.collage figcaption{position:absolute;left:0;bottom:0;max-width:38%;font-size:.78rem;line-height:1.55;color:var(--ink-soft)}
.about h2{font-size:clamp(2.6rem,5.4vw,4.4rem);margin:.35em 0 .3em}
.about h2 em{color:var(--olive)}
.tags{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--olive);font-weight:500}
.about .copy{display:grid;gap:1.1em;margin-top:1.6em;max-width:52ch;color:var(--ink-soft)}
.about .actions{display:flex;flex-wrap:wrap;gap:28px;align-items:center;margin-top:2.2em}
@media (max-width:820px){.about .grid{grid-template-columns:1fr}.collage{order:2}}

/* facts */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.facts div{padding:28px clamp(16px,2vw,28px);border-left:1px solid var(--rule)}
.facts div:first-child{border-left:0;padding-left:0}
.facts h3{font-weight:400;font-size:1.5rem;margin-bottom:.4em}
.facts h3 em{color:var(--olive)}
.facts p{font-size:.88rem;line-height:1.65;color:var(--ink-soft)}
@media (max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.facts div:nth-child(3){border-left:0;padding-left:0}.facts div:nth-child(n+3){border-top:1px solid var(--rule)}}
@media (max-width:520px){.facts{grid-template-columns:1fr}.facts div{border-left:0;padding-left:0}.facts div+div{border-top:1px solid var(--rule)}}

/* services */
.services{background:var(--linen);padding-block:clamp(72px,10vw,140px)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(48px,6vw,80px)}
.head h2{font-size:clamp(2.6rem,5.4vw,4.6rem);margin-top:.35em}
.head h2 em{color:var(--olive)}
.head p{color:var(--ink-soft);max-width:48ch}
@media (max-width:820px){.head{grid-template-columns:1fr}}
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.5vw,56px)}
.path{display:flex;flex-direction:column;gap:18px;min-width:0}
.path .ph{aspect-ratio:4/3;overflow:hidden;background:var(--paper)}
.path .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.path:hover .ph img{transform:scale(1.03)}
.path h3{font-size:clamp(1.6rem,2.3vw,2rem)}
.path h3 em{color:var(--olive)}
.path > p{color:var(--ink-soft);font-size:.94rem}
.path ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.path li{display:flex;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rule);font-family:var(--display);font-size:1.12rem}
.path li span{font-family:var(--text);font-size:.68rem;letter-spacing:.14em;color:var(--olive);font-weight:500;min-width:2ch}
.path .link{align-self:flex-start;margin-top:auto}
@media (max-width:900px){.paths{grid-template-columns:1fr;max-width:560px}}

/* reviews */
.reviews{padding-block:clamp(72px,10vw,140px)}
.reviews .grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.feature blockquote{margin:.6em 0 0;font-family:var(--display);font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.22}
.feature blockquote::before{content:"\201C";display:block;font-size:4em;line-height:.6;color:var(--maple);margin-bottom:.1em}
.feature cite{display:block;margin-top:1.4em;font-style:normal;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.more{display:grid;gap:0}
.more figure{margin:0;padding:24px 0;border-top:1px solid var(--rule)}
.more figure:last-child{border-bottom:1px solid var(--rule)}
.more blockquote{margin:0;font-family:var(--display);font-size:1.22rem;line-height:1.45}
.more figcaption{margin-top:.7em;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--olive)}
.stars{color:var(--maple);letter-spacing:.2em;font-size:.8rem}
.reviews .foot{margin-top:40px}
@media (max-width:820px){.reviews .grid{grid-template-columns:1fr}}

/* listings */
.listings{padding-block:0 clamp(72px,10vw,140px)}
.track{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
.card{scroll-snap-align:start;text-decoration:none;display:flex;flex-direction:column;gap:12px;min-width:0}
.card .ph{aspect-ratio:4/5;overflow:hidden;background:var(--linen);position:relative}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.card:hover .ph img{transform:scale(1.04)}
.status{position:absolute;left:10px;top:10px;background:var(--paper);font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:.45em .8em}
.status.pending{color:#9a5220}
.card h3{font-weight:400;font-size:1.25rem;line-height:1.2}
.card p{font-size:.84rem;color:var(--ink-soft);line-height:1.5}
.card .area{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--olive);font-weight:500}

/* newsletter */
.letter{background:var(--olive);color:var(--paper);padding-block:clamp(64px,9vw,120px);position:relative;overflow:hidden}
.letter .grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.lphoto{border-radius:999px 999px 0 0;overflow:hidden;aspect-ratio:4/5;max-width:440px}
.lphoto img{width:100%;height:100%;object-fit:cover}
.lcol{display:grid;gap:4px}
.lcol form{margin-top:28px}
.letter .eyebrow{color:var(--linen)}
.letter h2{font-size:clamp(2.6rem,5vw,4.2rem);margin:.3em 0 .35em;color:var(--paper)}
.letter p{max-width:44ch;color:var(--linen)}
.letter form{display:grid;gap:14px}
.letter label{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.letter input{width:100%;font:inherit;font-size:1rem;padding:.95em 0;background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,var(--paper) 70%,var(--olive));color:var(--paper);border-radius:0}
.letter input::placeholder{color:color-mix(in srgb,var(--paper) 90%,var(--olive))}
.letter input:focus{outline:none;border-bottom-color:var(--paper)}
.letter .btn{background:var(--paper);color:var(--olive);border-color:var(--paper);margin-top:12px;justify-self:start}
.letter .btn:hover{background:transparent;color:var(--paper)}
.letter .fine{font-size:.78rem;margin-top:6px}
.letter .fine a{color:var(--paper)}
.letter .ok{font-family:var(--display);font-size:1.4rem}
.letter .stampbg{position:absolute;right:-90px;bottom:-110px;width:360px;opacity:.12;filter:brightness(0) invert(1)}
@media (max-width:820px){.letter .grid{grid-template-columns:1fr}.lphoto{max-width:320px}}

/* coffee CTA */
.coffee{padding-block:clamp(80px,11vw,150px)}
.cgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,7vw,110px);align-items:center}
.cphoto{aspect-ratio:4/5;overflow:hidden;max-width:460px}
.cphoto img{width:100%;height:100%;object-fit:cover}
.coffee h2{font-size:clamp(2.6rem,5.6vw,5rem);margin:.35em 0 .45em;max-width:12ch}
.csub{color:var(--ink-soft);max-width:42ch;margin-bottom:2em}
@media (max-width:820px){.cgrid{grid-template-columns:1fr}.cphoto{max-width:340px}}
.coffee h2 em{color:var(--olive)}

/* footer */
footer{border-top:1px solid var(--rule);padding-block:56px 40px;font-size:.88rem;color:var(--ink-soft)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:36px}
.fgrid h4{margin:0 0 14px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:500}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fgrid a{text-decoration:none}
.fgrid a:hover{color:var(--olive)}
.fgrid .logo{height:52px;width:auto;margin-bottom:18px}
.wm{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;border:1px dashed var(--sage);padding:12px 14px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.wm b{font-family:var(--display);font-size:1.3rem;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:500}
.legal{margin-top:44px;padding-top:24px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;font-size:.76rem;line-height:1.6}
@media (max-width:900px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}

/* draft-only markers */
.todo{outline:1px dashed var(--maple);outline-offset:4px}

/* Oct 7: longer hero headline */
.hero h1.long{font-size:clamp(2.9rem,6.6vw,5.8rem);line-height:1}

/* Oct 7: mission, readable at every size */
.mission .msub{margin-top:1.4em;font-family:var(--text);font-size:1rem;line-height:1.75;color:var(--ink-soft);max-width:52ch}
.mission p:first-child{font-weight:400}

/* Oct 7: review quote mark no longer collides with the label */


/* ===== Phone layout (Oct 7 mobile pass): image first, less text, swipe instead of stack ===== */
@media (max-width:820px){
  .m-hide{display:none!important}

  /* hero: photo first, then one headline, one line, one button */
  .hero{padding-block:16px 56px;gap:28px}
  .hero .portrait{order:-1;max-width:none;margin:0}
  .hero .arch{aspect-ratio:4/4.3}
  .hero .arch img{object-position:50% 25%}
  .stamp{width:96px;height:96px;left:-6px;bottom:-30px;padding:7px}
  .hero h1.long{font-size:2.6rem;line-height:1.04;margin-block:.15em .35em}
  .hero .actions{margin-top:1.6em}
  .pride{margin-top:1.8em}

  /* two doors: compact tappable rows */

  /* mission: one readable sentence */
  .mission{padding-block:56px}
  .mission p{font-size:1.55rem;line-height:1.35}

  /* about: one photo, above the words */
  .about{padding-block:0 64px}
  .about .grid{gap:28px}
  .collage{order:-1;padding-bottom:0}
  .collage .a{width:100%;aspect-ratio:4/3.6}
  .collage .b,.collage figcaption{display:none}
  .about h2{font-size:2.6rem;margin:.25em 0 .2em}

  /* services: swipe through three cards */
  .services{padding-block:56px}
  .head{margin-bottom:24px;gap:12px}
  .head h2{font-size:2.4rem}
  .paths{display:flex;max-width:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);padding-bottom:8px;scrollbar-width:none}
  .paths::-webkit-scrollbar{display:none}
  .path{flex:0 0 80%;scroll-snap-align:start;gap:12px}
  .path > p,.path ol{display:none}
  .path h3{font-size:1.5rem}
  .path .link{margin-top:4px}

  /* neighborhoods: featured home card, then a swipe row of names */

  /* reviews: one big quote, one supporting, then the link */

  /* newsletter and contact: smaller photos */
  .letter{padding-block:56px}
  .lphoto{max-width:220px}
  .letter h2{font-size:2.5rem}
  .coffee{padding-block:64px}
  .cphoto{max-width:none;aspect-ratio:4/3}
  .coffee h2{font-size:2.5rem}
}
@media (max-width:820px){
  .paths{scroll-padding-inline:var(--gutter)}
  .letter .stampbg{display:none}
}

/* ===== Design pass 2 (Oct 7) ===== */
:root{
  --olive-deep:#655730;
  --shadow-sm:0 1px 2px rgba(56,53,45,.06),0 2px 8px rgba(56,53,45,.05);
  --shadow-md:0 1px 2px rgba(56,53,45,.06),0 14px 36px -14px rgba(56,53,45,.28);
  --radius:18px;
}
section[id],main{scroll-margin-top:84px}

/* Buttons: soft pills, sentence case, quiet motion */
.btn{border-radius:999px;border:0;padding:.85em 1.55em;font-size:.94rem;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.2;min-height:46px;box-shadow:var(--shadow-sm);transition:background .2s ease,transform .15s ease,box-shadow .2s ease}
.btn:hover{background:var(--olive-deep);box-shadow:var(--shadow-md)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--olive);box-shadow:inset 0 0 0 1px var(--olive)}
.btn.ghost:hover{background:var(--olive);color:var(--paper)}
nav.main a.btn{color:var(--paper);font-size:.86rem;letter-spacing:0;text-transform:none;padding:.6em 1.2em;min-height:40px}
nav.main a.btn:hover{color:var(--paper)}
.letter .btn{background:var(--paper);color:var(--olive)}
.letter .btn:hover{background:#fff;color:var(--olive-deep)}

/* Text links: sentence case with a small chevron */
.link{font-size:.95rem;font-weight:500;letter-spacing:0;text-transform:none;border-bottom:0;padding-bottom:0;display:inline-flex;align-items:center;gap:.35em;color:var(--olive)}
.link::after{content:"\203A";font-size:1.25em;line-height:1;transform:translateY(-.04em);transition:transform .2s ease}
.link:hover{text-decoration:underline;text-underline-offset:4px}
.link:hover::after{transform:translate(3px,-.04em)}

/* Shared section head: title left, link right */
.shead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 40px;margin-bottom:clamp(24px,4vw,48px)}
.shead h2{font-size:clamp(2.3rem,5vw,4.2rem);margin-top:.3em}
.shead h2 em{color:var(--olive)}

/* Two doors: photo cards with depth */
.doors{padding-block:0 clamp(64px,9vw,120px)}
.dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.5vw,32px);margin-top:18px}
.door{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:inset 0 0 0 1px #e8e1d3;transition:transform .3s ease,box-shadow .3s ease}
.door:hover{transform:translateY(-3px)}
.dimg{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--linen)}
.dimg img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.door:hover .dimg img{transform:scale(1.03)}
.dbody{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,3vw,32px);padding-right:84px}
.dlabel{font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--olive)}
.door h2{font-size:clamp(1.7rem,3vw,2.5rem)}
.door h2 em{color:var(--olive)}
.dtext{color:var(--ink-soft);max-width:40ch}
.dgo{font-size:.95rem;font-weight:500;color:var(--olive)}
.darrow{position:absolute;right:clamp(20px,3vw,28px);bottom:clamp(22px,3vw,30px);width:44px;height:44px;border-radius:50%;background:var(--olive);color:var(--paper);display:grid;place-items:center;transition:transform .3s ease}
.darrow svg{width:18px;height:18px}
.door:hover .darrow{transform:translateX(3px)}

/* Neighborhood cards */
.hoods{padding-block:clamp(72px,10vw,140px) 0}
.ntrack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.ncard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;aspect-ratio:3/4;padding:24px 24px 26px;border-radius:var(--radius);text-decoration:none;box-shadow:none;transition:transform .3s ease,box-shadow .3s ease}
.ncard:hover{transform:translateY(-3px)}
.nlabel{position:absolute;top:22px;left:24px;font-size:.66rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.nname{font-family:var(--display);font-size:clamp(1.8rem,2.6vw,2.4rem);line-height:1.05}
.nline{font-size:.9rem;line-height:1.5;max-width:24ch;padding-right:48px}
.ngo{position:absolute;right:20px;bottom:22px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.ngo svg{width:17px;height:17px}
.tone-olive{background:var(--olive);color:var(--paper)}
.tone-olive .ngo{background:var(--paper);color:var(--olive)}
.tone-linen{background:#e9e2d3;color:var(--ink)}
.tone-linen .nlabel{color:var(--olive-deep)}
.tone-linen .ngo{background:var(--olive);color:var(--paper)}
.tone-ink{background:var(--ink);color:var(--paper)}
.tone-ink .ngo{background:var(--paper);color:var(--ink)}
.tone-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--mist)}
.tone-line .nlabel{color:var(--olive)}
.tone-line .ngo{box-shadow:inset 0 0 0 1px var(--olive);color:var(--olive)}
.tone-line .nname{font-size:clamp(1.5rem,2.1vw,1.9rem)}
/* Neighborhood card with a photo: swap the img src to change it */
.tone-photo{color:var(--paper);overflow:hidden;background:var(--ink)}
.tone-photo .nphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .8s ease}
.tone-photo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(30,28,22,.72) 0%,rgba(30,28,22,.25) 45%,rgba(30,28,22,.05) 65%,rgba(30,28,22,.55) 100%)}
.tone-photo>span{position:relative;z-index:2}
.tone-photo .nlabel,.tone-photo .ngo{position:absolute;z-index:2}
.tone-photo .ngo{background:var(--paper);color:var(--olive)}
.tone-photo:hover .nphoto{transform:scale(1.04)}

/* Reviews: cards instead of a big quote mark */
.reviews{padding-block:clamp(72px,10vw,140px)}
.rscore{display:flex;align-items:center;gap:12px;font-size:.92rem;color:var(--ink-soft)}
.rscore a{color:var(--olive);font-weight:500}
.rtrack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.rcard{margin:0;display:flex;flex-direction:column;gap:16px;background:#fff;border-radius:var(--radius);padding:clamp(24px,2.6vw,32px);box-shadow:inset 0 0 0 1px #e8e1d3}
.rcard blockquote{margin:0;font-family:var(--display);font-size:1.2rem;line-height:1.45;color:var(--ink);flex:1}
.rcard figcaption{display:grid;gap:2px;padding-top:14px;border-top:1px solid var(--rule)}
.rcard figcaption b{font-weight:500;font-size:.92rem}
.rcard figcaption span{font-size:.82rem;color:var(--ink-soft)}
.rbig{grid-column:span 2;background:var(--linen);box-shadow:none}
.rbig blockquote{font-size:clamp(1.55rem,2.6vw,2.2rem);line-height:1.3}
.rcta{background:transparent;box-shadow:inset 0 0 0 1px var(--mist);text-decoration:none;color:var(--ink);justify-content:center;align-items:flex-start}
.rcta .eyebrow{color:var(--olive)}
.rcta-t{font-family:var(--display);font-size:1.5rem;line-height:1.25}
.rall{margin-top:28px}

/* Footer: a tidy package */
.site-foot{background:var(--linen);padding-block:clamp(56px,7vw,88px) 32px;font-size:.92rem;color:var(--ink-soft)}
.ftop{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr);gap:clamp(32px,5vw,72px)}
.site-foot .logo{height:52px;width:auto}
.ftag{margin-top:18px;max-width:34ch;line-height:1.6}
.social{list-style:none;margin:22px 0 0;padding:0;display:flex;gap:10px}
.social a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--olive);background:var(--paper);box-shadow:inset 0 0 0 1px #d8cfbc;transition:background .2s,color .2s,box-shadow .2s}
.social a:hover{background:var(--olive);color:var(--paper);box-shadow:none}
.social svg{width:20px;height:20px}
.site-foot h4{margin:0 0 16px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:500}
.fcontact{display:grid;gap:12px;align-content:start}
.fline{display:flex;gap:12px;align-items:flex-start;margin:0;text-decoration:none;color:var(--ink);line-height:1.5}
.fline svg{width:19px;height:19px;flex:0 0 auto;color:var(--olive);margin-top:1px}
a.fline:hover span{color:var(--olive)}
.fnav{display:grid;gap:10px;align-content:start}
.fnav a{text-decoration:none;color:var(--ink)}
.fnav a:hover{color:var(--olive)}
.fbase{margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px solid #ddd5c4;display:flex;flex-wrap:wrap;align-items:center;gap:18px 40px}
.wlogo{height:44px;width:auto}
.fbase p{flex:1 1 360px;font-size:.78rem;line-height:1.7}
.fbase a{color:inherit}

/* Design pass 2: phones */
@media (max-width:820px){
  .services .head p{display:none}
  .dgrid{grid-template-columns:1fr;gap:14px}
  .door{flex-direction:row;align-items:stretch;min-height:132px}
  .dimg{flex:0 0 38%;aspect-ratio:auto}
  .dbody{padding:18px 56px 18px 18px;gap:6px;justify-content:center}
  .door h2{font-size:1.45rem;line-height:1.12}
  .dgo{font-size:.88rem}
  .darrow{width:36px;height:36px;right:14px;bottom:14px}
  .darrow svg{width:15px;height:15px}

  .hoods{padding-top:64px}
  .shead .link{order:2}
  .ntrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter)*-1);padding:4px var(--gutter) 14px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .ntrack::-webkit-scrollbar,.rtrack::-webkit-scrollbar{display:none}
  .ncard{flex:0 0 66%;scroll-snap-align:start;aspect-ratio:4/5}

  .reviews{padding-block:64px}
  .rscore{font-size:.86rem}
  .rtrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter)*-1);padding:4px var(--gutter) 14px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .rcard{flex:0 0 82%;scroll-snap-align:start}
  .rbig blockquote{font-size:1.45rem}
  .rall{margin-top:16px}

  .site-foot{text-align:center;padding-top:52px}
  .ftop{grid-template-columns:1fr;gap:36px}
  .fid{display:flex;flex-direction:column;align-items:center}
  .ftag{margin-inline:auto}
  .social{justify-content:center}
  .fcontact{justify-items:center}
  .fline{justify-content:center;text-align:left}
  .fnav{display:none}
  .fbase{flex-direction:column;text-align:center}
  .fbase p{flex:none}
}

/* Reviews page: profile links */
.r-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:28px}

/* Oct 7: readability pass (WCAG AA). Small labels moved from tan to olive; stars a touch deeper so they stay visible.
   To change later: the label color is var(--olive) in the rules above; the star color is --star here. */
:root{--star:#bf6a2c}
.stars{color:var(--star)}
.status.pending{color:#9a5220}

/* Newsletter backup button: shows until the Flodesk form loads, then hides */
.letter .fd-fallback{background:var(--paper);border-color:var(--paper);color:var(--olive);margin:6px 0 18px}
.letter .fd-fallback:hover{background:var(--linen);border-color:var(--linen);color:var(--ink)}
.letter .fd-fallback[hidden]{display:none}


/* Flodesk inline form, restyled to match the site (newsletter band).
   Flodesk still draws and sends the form; these rules only change how it looks.
   Change colors here; change the fields or button words in Flodesk. */
.letter [data-ff-el="root"]{color:var(--paper)!important;font-family:var(--text)!important}
.letter [data-ff-el="root"] [class*="__container"],
.letter [data-ff-el="root"] [class*="__wrapper"],
.letter [data-ff-el="root"] [class*="__form"],
.letter [data-ff-el="root"] [class*="__content"]{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;max-width:none!important;width:100%!important;text-align:left!important}
.letter [data-ff-el="root"] [class*="__title"],
.letter [data-ff-el="root"] [class*="__subtitle"]{display:none!important}
.letter [data-ff-el="root"] [class*="__fields"]{display:grid!important;gap:6px!important;margin:0!important}
.letter [data-ff-el="root"] .fd-form-group{margin:0!important;position:relative!important}
.letter [data-ff-el="root"] .fd-form-control{width:100%!important;height:auto!important;font-family:var(--text)!important;font-size:1rem!important;line-height:1.4!important;color:var(--paper)!important;background:transparent!important;border:0!important;border-bottom:1px solid color-mix(in srgb,var(--paper) 70%,var(--olive))!important;border-radius:0!important;padding:1.35em 0 .55em!important;box-shadow:none!important;text-align:left!important}
.letter [data-ff-el="root"] .fd-form-control:focus{border-bottom-color:var(--paper)!important;outline:none!important}
.letter [data-ff-el="root"] .fd-form-label{left:0!important;right:auto!important;font-family:var(--text)!important;font-size:.68rem!important;font-weight:500!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:var(--linen)!important;text-align:left!important;padding:0!important}
.letter [data-ff-el="root"] [class*="__footer"]{margin:22px 0 0!important;padding:0!important;text-align:left!important;justify-content:flex-start!important;display:flex!important}
.letter [data-ff-el="root"] .fd-btn{width:auto!important;min-width:0!important;height:auto!important;background:var(--paper)!important;color:var(--olive)!important;border:1px solid var(--paper)!important;border-radius:999px!important;padding:.85em 1.55em!important;min-height:46px!important;font-family:var(--text)!important;font-size:.94rem!important;font-weight:500!important;letter-spacing:0!important;line-height:1.2!important;text-transform:none!important;cursor:pointer!important;transition:background .25s,color .25s!important}
.letter [data-ff-el="root"] .fd-btn:hover{background:transparent!important;color:var(--paper)!important}
.letter [data-ff-el="root"] .fd-form-success,
.letter [data-ff-el="root"] .fd-form-success *{color:var(--paper)!important;font-family:var(--display)!important;font-size:1.4rem!important;text-align:left!important;background:transparent!important}
.letter [data-ff-el="root"] .fd-form-error{color:#fff!important;text-align:left!important;font-size:.85rem!important}

/* Instagram strip above the footer (photos come from instagram.js; turn on there) */
.ig{background:var(--linen);padding-top:clamp(48px,6vw,72px)}
.ig-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px 24px;flex-wrap:wrap}
.ig-head h2{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15}
.ig-head h2 em{color:var(--olive)}
.ig-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:20px}
.ig-grid[hidden]{display:none}
.ig-grid a{aspect-ratio:1;overflow:hidden;display:block;border-radius:6px;background:var(--paper)}
.ig-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.ig-grid a:hover img{transform:scale(1.04)}
.ig + .site-foot{padding-top:clamp(40px,5vw,56px)}
@media (max-width:700px){.ig-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ig-grid a:nth-child(n+4){display:none}}

/* Client photo circles next to reviewer names (photos in images/clients/) */
.has-av{display:grid!important;grid-template-columns:48px 1fr;column-gap:12px;align-items:center}
.has-av .av{grid-row:1 / span 2;width:48px;height:48px;border-radius:50%;object-fit:cover;display:block}
.has-av b,.has-av span{grid-column:2}
/* "Welcome home" client photo strip on the Reviews page */
.welcome{padding-block:clamp(56px,8vw,96px)}
.welcome h2{font-size:clamp(2.2rem,4.6vw,3.6rem);margin-top:.3em}
.welcome h2 em{color:var(--olive)}
.wgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:22px}
.wgrid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
@media(max-width:700px){.wgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Oct 11 design edits */
/* 1. Listing status tags: soft pill, olive text */
.status{border-radius:999px;background:rgba(250,249,247,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--olive);font-size:.62rem;letter-spacing:.16em;padding:.5em 1em;left:12px;top:12px;box-shadow:none;border:0}
.status.pending{color:#9a5220}
/* 2. Newsletter: breathing room between the copy and the sign-up form */
.letter [id^="fd-form-"]{margin-top:28px}
.letter .fd-fallback{margin-top:28px}
/* 3. Review photo circles: more space before the name */
.has-av{column-gap:18px}
/* 5. Welcome home photos: larger, portrait, nothing squeezed */
.wgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:900px}
.wgrid img{aspect-ratio:4/5;height:auto;border-radius:12px}
@media(max-width:700px){.wgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}

/* Oct 12 tweaks */
/* Kitchen-island photo: keep Amy's face in frame at every crop and screen size */
img[src$="amy-kitchen.jpg"]{object-position:60% 22% !important}
/* Newsletter band: centered on phones */
@media (max-width:820px){
  .letter .lcol{text-align:center;justify-items:center}
  .letter .lcol p{margin-inline:auto}
  .letter .btn{justify-self:center}
  .letter .lphoto{margin-inline:auto}
  .letter [id^="fd-form-"]{width:100%}
}
/* Footer bottom: Windermere logo and license line centered */
.fbase{flex-direction:column;justify-content:center;text-align:center;gap:14px}
.fbase p{flex:none}