/* Cecilia Brignole - design system.
   Palette and type taken from Cecilia's own mockups. */
:root{
  --cream:#f4f0e9; --cream-deep:#e8dfd3; --white:#fffdf9;
  --ink:#25211d; --ink-soft:#544d47; --taupe:#6a6259; --taupe-light:#90877d;
  /* was --gold. The gold #a98a53 is retired brand-wide and this token was never
     gold anyway, it held taupe. Named honestly so it does not creep back. */
  --accent:#6a6259; --line:#d3c9bc;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* 9 Oct: a link to a section lands with its heading clear of the fixed header */
section[id]{scroll-margin-top:88px}
body{background:var(--cream);color:var(--ink);
  font-family:Jost,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:300;-webkit-font-smoothing:antialiased;line-height:1.7}
h1,h2,h3,.serif{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;letter-spacing:.01em;line-height:1.15;text-wrap:balance}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 3.5vw}
.pad{padding-top:3.5rem;padding-bottom:5rem}
.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);display:block}
.rule{width:60px;height:1px;background:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--ink);color:var(--white);
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;padding:1rem 1.7rem;
  border:1px solid var(--ink);transition:background .3s,color .3s;cursor:pointer}
.btn:hover{background:transparent;color:var(--ink)}
.link-underline{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);padding-bottom:2px;display:inline-flex;gap:.5rem;transition:opacity .25s}
.link-underline:hover{opacity:.55}

/* NAV */
header.site{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;
  border-bottom:1px solid rgba(255,253,249,.16);transition:background .45s ease,border-color .45s ease,backdrop-filter .45s ease}
header.site .logo,header.site .navlinks a{color:var(--white);transition:color .45s ease}
header.site .nav-cta{background:transparent;border:1px solid rgba(255,253,249,.7);color:var(--white);
  transition:background .45s,color .45s,border-color .45s}
header.site .nav-cta:hover{background:var(--white);color:var(--ink)}
header.site .menu-toggle{color:var(--white)}
header.site .navlinks a.active{border-bottom-color:rgba(255,253,249,.8)}
/* once scrolled past the hero */
header.site.solid{background:rgba(244,241,234,.95);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
header.site.solid .logo,header.site.solid .navlinks a{color:var(--ink)}
header.site.solid .nav-cta{background:var(--ink);border-color:var(--ink);color:var(--white)}
header.site.solid .menu-toggle{color:var(--ink)}
header.site.solid .navlinks a.active{border-bottom-color:var(--ink)}
nav{position:relative;display:flex;align-items:center;justify-content:space-between;padding:1.15rem 3.5vw;gap:1rem;max-width:1500px;margin:0 auto}
.logo{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.5rem;letter-spacing:.05em;white-space:nowrap}
.navlinks{display:flex;gap:2.2rem;list-style:none;align-items:center}
.navlinks a{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding-bottom:5px;transition:color .25s}
.navlinks a:hover{color:var(--accent)}
.navlinks a.active{border-bottom:1px solid var(--ink)}
.nav-cta{background:var(--ink);color:var(--white);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.7rem 1.4rem;white-space:nowrap}
.menu-toggle{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--ink);padding:.25rem .5rem}

/* HERO - full bleed, text low, maximum air */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;
  background:linear-gradient(150deg,#2a2622 0%,#443c33 55%,#5d5348 100%)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 0%;filter:saturate(.92)}
.hero::after{content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,rgba(14,12,10,.82) 0%,rgba(14,12,10,.66) 28%,rgba(14,12,10,.26) 56%,rgba(14,12,10,.1) 100%),
    linear-gradient(180deg,rgba(14,12,10,.42) 0%,rgba(14,12,10,.12) 38%,rgba(14,12,10,.55) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;padding:9rem 3.5vw 6rem;max-width:none;padding-left:5vw}
.hero .eyebrow{color:rgba(255,253,249,.82);margin-bottom:1.6rem}
.hero h1{text-shadow:0 1px 34px rgba(10,9,7,.5);color:var(--white);font-size:clamp(3rem,7.2vw,6.4rem);line-height:1.02;font-weight:300;letter-spacing:-.02em;max-width:11em}
.hero h1 em{font-style:italic;font-weight:300}
.hero .rule{margin:2.4rem 0 1.8rem;background:rgba(255,253,249,.55);width:90px}
.hero .more{text-shadow:0 1px 20px rgba(10,9,7,.6);display:inline-block;margin-top:2.4rem;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--white);border-bottom:1px solid rgba(255,253,249,.5);padding-bottom:3px}
.hero-italic{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(1.4rem,2.5vw,2rem);color:rgba(255,253,249,.94);max-width:32rem;line-height:1.45}
.hero-locations{margin-top:1.8rem;font-size:.82rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,253,249,.94);line-height:2.2;text-shadow:0 1px 20px rgba(10,9,7,.6)}

/* STATEMENT - one line, enormous air */
.statement{text-align:center;padding:11rem 3.5vw 10rem;max-width:56rem;margin:0 auto}
.statement p{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(1.9rem,4.4vw,3.5rem);line-height:1.28;letter-spacing:-.012em}
.statement .rule{margin:3rem auto 0;width:52px}

/* PILLARS - full bleed tiles, no borders */
.pillars{display:grid;grid-template-columns:repeat(3,1fr)}
.pillar{position:relative;min-height:min(78vh,720px);overflow:hidden;display:flex;align-items:flex-end;
  background:linear-gradient(160deg,#3a342c,#5a5145);text-decoration:none}
.pillar-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.88);transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}
.pillar::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,16,13,.34) 0%,rgba(18,16,13,.12) 30%,rgba(18,16,13,.82) 100%);
  transition:opacity .8s ease}
.pillar:hover .pillar-media{transform:scale(1.045)}
.pillar:hover::after{opacity:.88}
/* every row aligns across all three tiles, whatever the copy length */
.pillar-body{position:relative;z-index:2;width:100%;padding:0 2.6rem 3.2rem;color:var(--white);
  display:grid;grid-template-rows:auto auto auto minmax(5.25em,auto) auto auto;
  justify-items:start;row-gap:0}
.pillar-body .eyebrow{color:rgba(255,253,249,.8);letter-spacing:.3em;line-height:1.6}
.pillar-body .rule{width:30px;background:var(--accent);margin:.9rem 0 1.1rem}
.pillar-body h3{font-size:clamp(2rem,2.9vw,2.8rem);font-weight:300;line-height:1.05;margin-bottom:.9rem;
  min-height:1.05em;display:flex;align-items:flex-end}
.pillar-body p{font-size:.9rem;line-height:1.75;color:rgba(255,253,249,.9);max-width:23rem;font-weight:300;
  align-self:start}
.pillar-body .more{display:inline-block;margin-top:1.5rem;font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--white);border-bottom:1px solid rgba(255,253,249,.5);padding-bottom:3px;
  align-self:end}

/* ABOUT - asymmetric, image beside text */
.about{display:grid;grid-template-columns:1fr 1.05fr;gap:min(7vw,6rem);align-items:center;
  max-width:1240px;margin:0 auto;padding:10rem 3.5vw}
.about figure{aspect-ratio:4/5;overflow:hidden;background:var(--cream-deep)}
.about img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:saturate(.95)}
.about h2{font-size:clamp(2.1rem,4vw,3.4rem);font-weight:300;line-height:1.06;margin:1.1rem 0 1.8rem;letter-spacing:-.015em}
.about p{color:var(--ink-soft);font-size:1rem;line-height:1.85;margin-bottom:1.3rem;max-width:34rem}
.about .rule{margin-bottom:2.2rem}
.proof{display:grid;grid-template-columns:repeat(2,auto);gap:1.8rem 3rem;margin-top:2.6rem;justify-content:start}
.proof div span{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:2.5rem;line-height:1;color:var(--ink)}
.proof div small{display:block;margin-top:.5rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}

/* JOURNAL - no borders, image then type */
.jsection{padding:9rem 3.5vw;max-width:1240px;margin:0 auto}
.jhead{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3.5rem;flex-wrap:wrap}
.jhead h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:300;line-height:1.06;margin-top:.9rem;letter-spacing:-.015em}
.jgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:min(4vw,3.2rem)}
.jcard{display:flex;flex-direction:column;background:none;border:0}
.jcard figure{aspect-ratio:4/3;overflow:hidden;background:var(--cream-deep);margin-bottom:1.3rem}
.jcard figure.noimg{background:linear-gradient(150deg,var(--cream-deep),var(--line))}
.jcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.jcard:hover img{transform:scale(1.05)}
.jcard-body{display:flex;flex-direction:column;gap:.6rem;padding:0}
.jcard-body .eyebrow{letter-spacing:.26em;font-size:.66rem}
.jcard-body h3{font-size:1.55rem;font-weight:400;line-height:1.2}
.jcard-body p{font-size:.9rem;color:var(--ink-soft);line-height:1.75;font-weight:300}
.jcard-meta{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe-light);margin-top:.3rem}
.empty{color:var(--taupe);font-style:italic}

/* scroll reveal. 9 Oct: on a phone, sections sat as blank cream bands while they waited
   for 12% of themselves to show and then took 1.3 s to fade in. Now a section only starts
   hidden once the page script has run (html.js, set in each page head), it fades in over
   0.4 s as its first pixel nears the screen, and each page has a 1.5 s fail safe that shows
   anything already in view. Without JavaScript, or with reduced motion, it is simply shown. */
.js .rise{opacity:0;transform:translateY(14px);transition:opacity .4s ease-out,transform .4s ease-out}
.js .rise.in{opacity:1;transform:none}
/* laptops and larger keep the original slow rise (22 px over 1.3 s); only the trigger is new */
@media (min-width:901px){.js .rise{transform:translateY(22px);transition:opacity 1.3s cubic-bezier(.2,.6,.2,1),transform 1.3s cubic-bezier(.2,.6,.2,1)}}
@media (prefers-reduced-motion:reduce){ .js .rise{opacity:1;transform:none} }

/* ENTRY */
.page-head{text-align:center;padding:8.5rem 3.5vw 1rem;max-width:44rem;margin:0 auto}
.page-head h1{font-size:clamp(2.1rem,4.5vw,3.1rem);margin-top:.6rem}
.entry{max-width:44rem;margin:0 auto;padding:4rem 3.5vw 5rem}
.entry-head{text-align:center;margin-bottom:2.4rem}
.entry-head h1{font-size:clamp(2rem,4.4vw,3rem);margin:.7rem 0 .8rem}
.entry-head time{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}
.entry-hero{margin:0 0 2.6rem;aspect-ratio:16/9;overflow:hidden;background:var(--cream-deep)}
.entry-hero img{width:100%;height:100%;object-fit:cover}
.prose p{margin-bottom:1.3rem;font-size:1.02rem;color:var(--ink-soft)}
.prose h2{font-size:1.7rem;margin:2.4rem 0 .9rem;color:var(--ink)}
.prose h3{font-size:1.35rem;margin:2rem 0 .7rem;color:var(--ink)}
.prose ul{margin:0 0 1.3rem 1.2rem;color:var(--ink-soft)}
.prose li{margin-bottom:.5rem}
.prose blockquote{border-left:2px solid var(--accent);padding-left:1.4rem;margin:1.8rem 0;
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:1.3rem;color:var(--ink)}
.sources{margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.sources ul{list-style:none;margin-top:.6rem}
.sources li{font-size:.85rem;color:var(--taupe);margin-bottom:.3rem}
.back{margin-top:3rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}

/* CONTACT */
.contact{background:var(--ink);color:var(--white);padding:5rem 3.5vw;text-align:center}
.contact h2{font-size:clamp(2rem,4vw,2.8rem);color:var(--white);margin-bottom:.8rem}
.contact p{color:#cfc9bc;max-width:34rem;margin:0 auto 2rem;font-size:.97rem}
.contact .btn{background:transparent;border-color:var(--white);color:var(--white)}
.contact .btn:hover{background:var(--white);color:var(--ink)}
.cform{max-width:34rem;margin:0 auto;display:grid;gap:1rem;text-align:left}
.cform label{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#cfc9bc;display:block;margin-bottom:.35rem}
.cform input,.cform select,.cform textarea{width:100%;background:rgba(255,253,249,.06);border:1px solid rgba(255,253,249,.28);
  color:var(--white);padding:.8rem .9rem;font-family:inherit;font-size:1rem;font-weight:300;border-radius:0}
.cform textarea{min-height:7rem;resize:vertical}
.cform input:focus,.cform select,.cform textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.cform option{color:var(--ink)}
.cform .btn{justify-self:start;margin-top:.4rem}

/* FOOTER */
footer.site{background:var(--cream-deep);padding:3.5rem 3.5vw 2.5rem;border-top:1px solid var(--line)}
.fgrid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
.fgrid h4{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);
  font-weight:500;font-family:Jost,sans-serif;margin-bottom:.8rem}
.fgrid ul{list-style:none}
.fgrid li{margin-bottom:.45rem;font-size:.87rem;color:var(--ink-soft)}
.fgrid a:hover{color:var(--accent)}
.fbrand .logo{font-size:1.6rem;margin-bottom:.5rem;display:block}
.fbrand p{font-size:.85rem;color:var(--taupe);max-width:20rem}
.fbrand .fstates{white-space:nowrap;margin-top:.35rem}
.fbase{max-width:1240px;margin:2.5rem auto 0;padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.75rem;color:var(--taupe)}

@media (max-width:900px){
  .pillars{grid-template-columns:1fr;gap:1.6rem}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  /* one breakpoint for the whole site, matching the homepage, so the nav never sits
     cramped between 768 and 900 on a tablet */
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);color:var(--ink);
    flex-direction:column;gap:0;padding:.5rem 0;border-bottom:1px solid var(--line)}
  .navlinks.open{display:flex}
  header.site .navlinks.open a{color:var(--ink)}
  .navlinks li{width:100%}
  .navlinks a{display:block;padding:.9rem 3.5vw;border-bottom:1px solid var(--line)}
  .menu-toggle{display:block}
  .hero{min-height:72vh}
  .hero-inner{padding:3.5rem 3.5vw}
  .fgrid{grid-template-columns:1fr}
}
@media (pointer:coarse){
  .cform input,.cform select,.cform textarea{font-size:16px;min-height:48px}
  .btn,.nav-cta{min-height:48px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* elevated contact */
.contact{padding:9rem 3.5vw}
.contact h2{font-size:clamp(2.2rem,4.4vw,3.6rem);font-weight:300;letter-spacing:-.015em;line-height:1.08;margin-bottom:1.2rem}
.contact .rule{margin:0 auto 2rem;background:var(--accent)}
.contact p{font-size:1rem;line-height:1.8}
@media (max-width:980px){
  .pillars{grid-template-columns:1fr}
  .pillar{min-height:64vh}
  .about{grid-template-columns:1fr;gap:3rem;padding:6rem 3.5vw}
  .about figure{aspect-ratio:4/3}
  .statement{padding:7rem 3.5vw 6rem}
  .jsection{padding:6rem 3.5vw}
}

/* Serhant mark */
.powered{display:block;margin-top:1.1rem;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,253,249,.7);min-height:1.6em;align-self:end}
.powered.spacer{visibility:hidden}
.powered b{font-weight:600;letter-spacing:.02em;color:rgba(255,253,249,.95)}

/* statement + tag row */
.statement{padding:8rem 3.5vw 5rem;max-width:60rem}
.statement p{font-size:clamp(1.6rem,3.4vw,2.7rem);font-style:normal;line-height:1.35}
.tagrow{display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin-top:3rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.4rem 0}
.tagrow span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);
  padding:.25rem 1.5rem;border-right:1px solid var(--line);line-height:1.6}
.tagrow span:last-child{border-right:0}

/* quote band */
.quoteband{display:grid;grid-template-columns:1fr 1fr;gap:min(7vw,5rem);align-items:center;
  max-width:1240px;margin:0 auto;padding:6rem 3.5vw 8rem}
.quoteband blockquote p{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.35;color:var(--ink)}
.quoteband cite{display:block;margin-top:1.4rem;font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;font-size:1.5rem;color:var(--taupe)}
.quoteband-text p{color:var(--ink-soft);font-size:1rem;line-height:1.85;margin-bottom:1.6rem;max-width:30rem}

@media (max-width:900px){
  .quoteband{grid-template-columns:1fr;gap:2.5rem;padding:4rem 3.5vw 5rem}
  .tagrow span{padding:.25rem 1rem;font-size:.62rem}
  .statement{padding:5rem 3.5vw 3rem}
}
@media (prefers-reduced-motion:reduce){
  .hero-media,.pillar-media{display:none}
}

/* SKELETON - media placeholders while we wait on her photographs */
.pillar.skeleton{background:linear-gradient(160deg,var(--deep,#e8dfd3),var(--line))}
.pillar.skeleton::after{background:linear-gradient(180deg,rgba(18,16,13,.5) 0%,rgba(18,16,13,.34) 30%,rgba(18,16,13,.8) 100%)}
.slot{position:absolute;inset:1rem;border:1px dashed rgba(255,253,249,.28);z-index:1;
  display:flex;align-items:flex-start;justify-content:center;padding-top:1.5rem;pointer-events:none}
.slot span{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,253,249,.5)}
.about figure.skeleton{background:linear-gradient(150deg,var(--cream-deep),var(--line));position:relative}
.about figure.skeleton:after{content:'Portrait';position:absolute;inset:1rem;border:1px dashed var(--taupe-light);
  display:flex;align-items:center;justify-content:center;font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--taupe)}

/* ---------- SUBPAGE HERO ---------- */
.phero{position:relative;min-height:66vh;display:flex;align-items:flex-end;overflow:hidden;
  background:linear-gradient(150deg,#2a2622 0%,#443c33 55%,#5d5348 100%)}
.phero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 30%;filter:saturate(.9)}
.phero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(14,12,10,.78) 0%,rgba(14,12,10,.5) 34%,rgba(14,12,10,.16) 70%),
    linear-gradient(180deg,rgba(14,12,10,.3) 0%,rgba(14,12,10,.1) 38%,rgba(14,12,10,.72) 100%)}
/* The 1 Sep skyline is far brighter through the park than the image it replaced, and on a
   phone the headline sits exactly over that sunlit foliage. The side gradient does the work on
   desktop, where the text is left-aligned in the dark corner; on a narrow screen there is no
   dark corner, so the bottom has to carry it. */
@media (max-width:760px){
  .phero::after{
    background:linear-gradient(180deg,rgba(14,12,10,.42) 0%,rgba(14,12,10,.22) 30%,
      rgba(14,12,10,.68) 62%,rgba(14,12,10,.86) 100%)}
  .phero h1{text-shadow:0 2px 26px rgba(10,9,7,.75)}
  .phero .eyebrow{color:rgba(255,253,249,.95)}
}
.phero-inner{position:relative;z-index:2;width:100%;max-width:1500px;margin:0 auto;padding:9rem 3.5vw 6vh}
.phero .eyebrow{color:rgba(255,253,249,.82);letter-spacing:.3em}
.phero h1{color:var(--white);font-size:clamp(3rem,8vw,6.5rem);font-weight:300;line-height:.95;
  letter-spacing:-.02em;margin:.6rem 0 0;text-shadow:0 1px 30px rgba(10,9,7,.45)}
.phero .rule{margin:1.8rem 0 1.3rem;background:rgba(255,253,249,.55);width:64px}
.phero-sub{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(1.15rem,2vw,1.5rem);color:rgba(255,253,249,.94)}
.phero-loc{margin-top:1rem;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,253,249,.72)}
.phero.skeleton-hero .slot{inset:1.2rem;align-items:flex-start;padding-top:5.5rem}

/* ---------- OFFER ROWS ---------- */
.offer{max-width:56rem;margin:0 auto;padding:1rem 3.5vw 6rem;display:flex;flex-direction:column}
.orow{display:grid;grid-template-columns:5rem 1fr;gap:1.5rem;padding:2.6rem 0;border-top:1px solid var(--line);align-items:start}
.orow:last-child{border-bottom:1px solid var(--line)}
.onum{font-family:"Cormorant Garamond",Georgia,serif;font-size:2.2rem;font-weight:300;color:var(--accent);line-height:1}
.orow h3{font-size:1.8rem;font-weight:300;margin-bottom:.6rem}
.orow p{font-size:.97rem;color:var(--ink-soft);line-height:1.8;max-width:36rem}

/* ---------- MARKETS + SERHANT ---------- */
.markets{text-align:center;padding:0 3.5vw 6rem}
.markets .eyebrow{margin-bottom:1.6rem}
.powered-dark{margin-top:2.2rem;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
.powered-dark b{font-weight:600;color:var(--ink)}

/* ---------- CTA BAND ---------- */
.cta-band{background:var(--ink);color:var(--white);text-align:center;padding:6.5rem 3.5vw}
.cta-band h2{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:300;color:var(--white);letter-spacing:-.015em;margin-bottom:.9rem}
.cta-band p{color:#cfc9bc;font-size:.98rem;max-width:30rem;margin:0 auto 2.2rem}
.btn-light{display:inline-flex;align-items:center;gap:.6rem;background:transparent;color:var(--white);
  border:1px solid rgba(255,253,249,.75);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  padding:1rem 1.9rem;transition:background .35s,color .35s}
.btn-light:hover{background:var(--white);color:var(--ink)}

/* ---------- LUXURY MOTION ---------- */
@keyframes pagein{from{opacity:0}to{opacity:1}}
body{animation:pagein .55s ease both}
@keyframes heroup{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.hero .eyebrow{animation:heroup .9s .2s cubic-bezier(.2,.6,.2,1) both}
.hero h1{animation:heroup 1s .35s cubic-bezier(.2,.6,.2,1) both}
.hero .rule,.phero .rule{transform-origin:left;animation:draw 1.1s .8s cubic-bezier(.2,.6,.2,1) both}
.hero-italic,.phero-sub{animation:heroup 1s .6s cubic-bezier(.2,.6,.2,1) both}
.hero-locations,.hero .more,.phero-loc{animation:heroup 1s .8s cubic-bezier(.2,.6,.2,1) both}
.phero .eyebrow{animation:heroup .9s .15s cubic-bezier(.2,.6,.2,1) both}
.phero h1{animation:heroup 1s .3s cubic-bezier(.2,.6,.2,1) both}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero-media,.phero-media{animation:kenburns 26s ease-in-out infinite alternate}
/* nav underline slide */
.navlinks a{position:relative}
.navlinks a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:currentColor;transition:width .4s cubic-bezier(.2,.6,.2,1)}
.navlinks a:hover::after{width:100%}
/* link arrows drift */
.more,.link-underline{transition:letter-spacing .4s ease,opacity .25s}
.pillar:hover .more{letter-spacing:.3em}
/* (9 Oct: the slower 1.3 s rise now lives in the min-width:901px rule under "scroll reveal" near the top.) */

/* pages that open on a light section clear the fixed header */
main > .page-head:first-child{padding-top:9rem}
main > .entry:first-child{padding-top:9rem}

/* ---------- CONTENT HOME ----------
   The structure Cecilia asked for on 31 August: every piece of writing has ONE home, in the
   section it belongs to, and the Journal carries only a short excerpt that links back here.
   Edit the full piece in its home and the Journal excerpt is the only other place to touch. */
.report{max-width:1240px;margin:0 auto;padding:6rem 3.5vw;border-top:1px solid var(--line)}
.report-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;
  flex-wrap:wrap;margin-bottom:2.4rem}
.report-head h2{font-size:clamp(2rem,4vw,3.1rem);font-weight:300;line-height:1.06;
  margin-top:.9rem;letter-spacing:-.015em}
.report-date{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe)}
.report-body{max-width:44rem}
.report-body p{color:var(--ink-soft);font-size:1.02rem;line-height:1.85;margin-bottom:1.3rem}
.report-body p:last-of-type{margin-bottom:0}
.report-body h3{font-size:1.35rem;font-weight:400;margin:2.2rem 0 .8rem;color:var(--ink)}
.report-lead{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.45;color:var(--ink);margin-bottom:1.8rem}
/* the drafting state, so an unwritten month still looks intentional */
.report.awaiting .report-body{border-left:1px solid var(--line);padding-left:1.8rem}
.report .awaiting-note{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:1.15rem;color:var(--taupe)}
.report-foot{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe-light)}
@media (max-width:900px){ .report{padding:4rem 5vw} .report.awaiting .report-body{padding-left:1.2rem} }

/* Journal excerpt cards point back to the home */
.jcard .excerpt{color:var(--ink-soft);font-size:.92rem;line-height:1.75}
.jcard .readfull{margin-top:1rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);padding-bottom:2px;display:inline-flex;gap:.5rem;
  transition:opacity .25s;color:var(--ink)}
.jcard .readfull:hover{opacity:.55}



/* ---------- COMING SOON - a placeholder that reads as designed restraint rather than
   as a missing image ---------- */
.jcard.soon .jcard-body h3{font-weight:400}
figure.placeholder{position:relative;aspect-ratio:4/3;overflow:hidden;margin-bottom:1.3rem;
  background:linear-gradient(150deg,var(--cream-deep) 0%,var(--line) 100%);
  display:flex;align-items:center;justify-content:center}
figure.placeholder::after{content:'';position:absolute;inset:14px;border:1px solid rgba(255,253,249,.5)}
figure.placeholder span{position:relative;z-index:1;font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;font-size:1.45rem;color:var(--taupe);letter-spacing:.01em}

/* ---------- NEWSLETTER SIGNUP ---------- */
.signup{background:var(--cream-deep);padding:6rem 3.5vw;border-top:1px solid var(--line)}
.signup-inner{max-width:44rem;margin:0 auto;text-align:center}
.signup h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:300;line-height:1.1;
  letter-spacing:-.015em;margin:.9rem 0 1rem}
.signup p{color:var(--ink-soft);font-size:1rem;line-height:1.8;max-width:32rem;margin:0 auto}
.signup form{margin-top:2.2rem}
.signup-row{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
.signup-row input{flex:1 1 13rem;min-width:0;background:var(--white);border:1px solid var(--line);
  padding:.95rem 1.1rem;font-family:inherit;font-size:1rem;font-weight:300;color:var(--ink);border-radius:0}
.signup-row input:focus{outline:2px solid var(--taupe);outline-offset:1px}
.signup-row .btn{flex:0 0 auto;cursor:pointer}
.signup-fine{margin-top:1.2rem;font-size:.78rem;color:var(--taupe-light);letter-spacing:.02em}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.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}
@media (max-width:560px){
  .signup{padding:4.5rem 6vw}
  .signup-row{flex-direction:column}
  .signup-row .btn{justify-content:center}
}

/* ---------- FULL-BLEED VIDEO BAND (Aug 28: Ceci asked for a markets video between
   the stats and the practice section) ---------- */
.videoband{position:relative;overflow:hidden;background:#2a2622}
.videoband video{display:block;width:100%;height:min(72vh,640px);object-fit:cover;filter:saturate(.94)}
.videoband .vb-cap{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 5vw 1.6rem;
  background:linear-gradient(180deg,rgba(14,12,10,0) 0%,rgba(14,12,10,.55) 100%);
  color:var(--white);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase}

/* ---------- STATS ROW (subpages) ---------- */
.statrow{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:2rem 5rem;
  padding:4.5rem 3.5vw 1rem;text-align:center}
.statrow span{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:2.7rem;line-height:1;color:var(--ink)}
.statrow small{display:block;margin-top:.55rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}

/* ---------- FEATURED LISTING ---------- */
.listing{max-width:1240px;margin:0 auto;padding:6rem 3.5vw}
.listing-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:min(6vw,5rem);align-items:center}
.listing-imgs{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.listing-imgs figure{aspect-ratio:4/3;overflow:hidden;background:var(--cream-deep);margin:0}
.listing-imgs figure.tall{grid-column:1/-1;aspect-ratio:16/9}
.listing-imgs img{width:100%;height:100%;object-fit:cover}
.listing h2{font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:300;line-height:1.08;margin:.9rem 0 .4rem}
.listing .lsub{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:1.35rem;color:var(--taupe);margin-bottom:1.4rem}
.listing p{color:var(--ink-soft);font-size:.98rem;line-height:1.85;max-width:34rem}
.lspecs{display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem;margin:1.6rem 0}
.lspecs div span{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.9rem;line-height:1;color:var(--ink)}
.lspecs div small{display:block;margin-top:.35rem;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe)}
@media (max-width:900px){
  .listing-grid{grid-template-columns:1fr;gap:2.4rem}
  .statrow{gap:1.6rem 2.4rem}
  .statrow span{font-size:2.1rem}
  .videoband video{height:52vh}
}



/* ============================================================================
   MARKET REPORTS  ·  added 31 August
   Three pieces: the CARDS that sit on the Real Estate page, the ARCHIVE index,
   and the one-page REPORT itself. Direction color is direction only, never a
   judgement: falling inventory and falling price are both "down".
   ============================================================================ */
:root{ --up:#5f7355; --down:#9a6a52; --paper:#fffdf9; }

/* --- the two cards on /real-estate/ ------------------------------------- */
.rcards{max-width:1240px;margin:0 auto;padding:6rem 3.5vw;border-top:1px solid var(--line)}
.rcards-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;
  flex-wrap:wrap;margin-bottom:2.8rem}
.rcards-head h2{font-size:clamp(2rem,4vw,3.1rem);font-weight:300;line-height:1.06;
  letter-spacing:-.02em;margin-top:.7rem}
.rcards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1.6rem}
.rcard{background:var(--paper);border:1px solid var(--line);padding:2.4rem 2.2rem 2rem;
  display:flex;flex-direction:column;transition:border-color .3s ease,transform .3s ease}
.rcard:hover{border-color:var(--taupe-light);transform:translateY(-2px)}
.rcard h3{font-size:1.9rem;font-weight:300;margin:.7rem 0 .3rem;letter-spacing:-.01em}
.rcard .rcard-period{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe-light)}
.rcard-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  margin:1.8rem 0 1.6rem;padding:1.3rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rcard-stats div span{display:block;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.5rem;font-weight:400;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.rcard-stats div small{display:block;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--taupe-light);margin-top:.35rem;line-height:1.4}
.rcard p{font-size:.94rem;color:var(--ink-soft);line-height:1.8;flex:1}
.rcard .readfull{margin-top:1.6rem;align-self:flex-start}
.rcards-foot{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  font-size:.78rem;letter-spacing:.05em;color:var(--taupe)}

/* --- the archive index -------------------------------------------------- */
.arch{max-width:52rem;margin:0 auto;padding:2rem 3.5vw 5rem}
.arch-group{margin-bottom:3.4rem}
.arch-group > .eyebrow{padding-bottom:.9rem;border-bottom:1px solid var(--ink);margin-bottom:.4rem}
.arow{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;
  padding:1.5rem 0;border-bottom:1px solid var(--line);transition:padding-left .3s ease}
.arow:hover{padding-left:.6rem}
.arow h3{font-size:1.35rem;font-weight:400;margin-bottom:.3rem}
.arow p{font-size:.88rem;color:var(--taupe);line-height:1.7;max-width:32rem}
.arow .arow-go{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);white-space:nowrap}
.arow:hover .arow-go{color:var(--ink)}

/* --- the one-page report ------------------------------------------------ */
.rpt{max-width:58rem;margin:0 auto;padding:2.5rem 3.5vw 4rem}
.rpt-head{border-bottom:1px solid var(--ink);padding-bottom:2rem;margin-bottom:2.6rem}
.rpt-head h1{font-size:clamp(2.4rem,5.5vw,4rem);font-weight:300;letter-spacing:-.03em;
  line-height:1.02;margin:.9rem 0 .8rem}
.rpt-head .rpt-sub{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:1.25rem;color:var(--ink-soft);line-height:1.5}
.rpt-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:1.4rem;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe-light)}

.rpt h2{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);
  font-family:Jost,sans-serif;font-weight:400;margin:3.2rem 0 1.2rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.rpt h2:first-of-type{margin-top:0}
.rpt p{font-size:1rem;color:var(--ink-soft);line-height:1.85;margin-bottom:1.2rem;max-width:44rem}
.rpt p:last-child{margin-bottom:0}
.rpt-lead{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:1.35rem !important;line-height:1.6 !important;color:var(--ink) !important;
  border-left:1px solid var(--accent);padding-left:1.5rem;margin-bottom:1.8rem !important}

/* tables: scroll sideways on a phone rather than squeezing the page */
.rpt-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1.4rem}
table.rpt-t{width:100%;border-collapse:collapse;font-size:.9rem;min-width:34rem}
table.rpt-t caption{text-align:left;font-size:.78rem;color:var(--taupe);
  padding-bottom:.8rem;letter-spacing:.04em}
table.rpt-t th,table.rpt-t td{padding:.85rem .9rem;text-align:right;
  border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap}
table.rpt-t th:first-child,table.rpt-t td:first-child{text-align:left;white-space:normal;
  position:sticky;left:0;background:var(--cream);padding-left:0}
table.rpt-t thead th{font-family:Jost,sans-serif;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--taupe);font-weight:400;border-bottom:1px solid var(--ink);
  vertical-align:bottom;line-height:1.4;white-space:normal}
table.rpt-t tbody td:first-child{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.15rem;color:var(--ink)}
table.rpt-t tbody tr:last-child td{border-bottom:0}
table.rpt-t .v{display:block;color:var(--ink);font-size:.98rem}
.delta{display:block;font-size:.68rem;letter-spacing:.06em;margin-top:.2rem;color:var(--taupe-light)}
.delta.up{color:var(--up)}
.delta.down{color:var(--down)}
.rpt-legend{font-size:.72rem;color:var(--taupe-light);letter-spacing:.04em;margin-bottom:2rem}
.rpt-legend b{font-weight:400}
.rpt-legend .up{color:var(--up)}
.rpt-legend .down{color:var(--down)}

.rpt-cols{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;margin-bottom:1rem}
.rpt-cols h3{font-size:1.5rem;font-weight:300;margin-bottom:1rem}
.rpt-cols ul{list-style:none}
.rpt-cols li{font-size:.94rem;color:var(--ink-soft);line-height:1.75;padding:.85rem 0 .85rem 1.3rem;
  border-bottom:1px solid var(--line);position:relative}
.rpt-cols li:last-child{border-bottom:0}
.rpt-cols li::before{content:'';position:absolute;left:0;top:1.5rem;width:5px;height:1px;background:var(--accent)}
.rpt-cols li b{font-weight:500;color:var(--ink)}

.rpt-note{background:var(--paper);border:1px solid var(--line);padding:2.2rem;margin-top:1rem}
.rpt-note h3{font-size:1.5rem;font-weight:300;margin-bottom:.9rem}
.rpt-note p{max-width:none}
.rpt-sign{margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid var(--ink);
  display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.rpt-sign .n{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.4rem}
.rpt-sign .r{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe-light);
  text-align:right;line-height:1.9}
.rpt-back{max-width:58rem;margin:0 auto;padding:8.5rem 3.5vw 0}

@media (max-width:760px){
  .rpt-cols{grid-template-columns:1fr;gap:2rem}
  .rcards{padding:4rem 5vw}
  .rcard{padding:2rem 1.6rem 1.8rem}
  .arow{grid-template-columns:1fr;gap:.5rem}
  .arow .arow-go{text-align:left}
}

@media print{
  header.site,footer.site,.cta-band,.rpt-back,.signup,.menu-toggle{display:none !important}
  body{background:#fff;font-size:11pt}
  .rpt{max-width:none;padding:0}
  .rpt h2{margin-top:1.4rem;page-break-after:avoid}
  .rpt-note,.rpt-cols,table.rpt-t{page-break-inside:avoid}
  table.rpt-t td:first-child,table.rpt-t th:first-child{background:#fff}
  .rpt-tw{overflow:visible}
  table.rpt-t{min-width:0}
  a{text-decoration:none}
}

/* ============================================================================
   THE JOURNAL ISSUE  ·  added 31 August
   Each month's issue is its own page at /journal/YYYY-MM/. The Journal index
   carries a summary card that opens it. Long-form, letter-like, centered column.
   ============================================================================ */
.ihead{max-width:52rem;margin:0 auto;padding:2.5rem 3.5vw 0;text-align:center}
.ihead .eyebrow{margin-bottom:1.4rem}
.ihead h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:300;letter-spacing:-.03em;line-height:1.02}
.ihead .isub{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:1.3rem;color:var(--ink-soft);line-height:1.6;max-width:34rem;margin:1.4rem auto 0}
.ihead .rule{margin:2.2rem auto}

.iquote{max-width:38rem;margin:0 auto;padding:1rem 3.5vw 3.5rem;text-align:center}
.iquote p{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:1.5rem;
  line-height:1.5;color:var(--ink)}
.iquote cite{display:block;margin-top:1rem;font-style:normal;font-size:.68rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--taupe-light)}

.isec{max-width:44rem;margin:0 auto;padding:3.6rem 3.5vw;border-top:1px solid var(--line)}
.isec > .eyebrow{margin-bottom:1rem}
.isec h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:300;line-height:1.1;
  letter-spacing:-.02em;margin-bottom:1.4rem}
.isec p{font-size:1.02rem;color:var(--ink-soft);line-height:1.9;margin-bottom:1.2rem}
.isec p:last-child{margin-bottom:0}
.isec p em{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.2rem}
.isec .readfull{margin-top:1.6rem}
.ifig{max-width:60rem;margin:0 auto;padding:0 3.5vw}
.ifig img{width:100%;height:clamp(16rem,42vw,30rem);object-fit:cover}
.ifig figcaption{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--taupe-light);padding-top:.9rem;text-align:center}

.ipause{background:var(--cream-deep);margin-top:3.6rem;padding:5rem 3.5vw;text-align:center}
.ipause-in{max-width:34rem;margin:0 auto}
.ipause h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:300;line-height:1.14;margin:1rem 0 1.2rem}
.ipause p{font-size:1.02rem;color:var(--ink-soft);line-height:1.9}
.isign{max-width:44rem;margin:0 auto;padding:3.6rem 3.5vw 1rem;text-align:center;
  border-top:1px solid var(--line)}
.isign p{font-size:1.02rem;color:var(--ink-soft);line-height:1.9;margin-bottom:1rem}
.isign .n{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.8rem;display:block;margin-top:.6rem}

/* summary card on the Journal index that opens the full issue */
.icard{background:var(--paper);border:1px solid var(--line);display:grid;
  grid-template-columns:1fr 1fr;gap:0;overflow:hidden;
  transition:border-color .3s ease}
.icard:hover{border-color:var(--taupe-light)}
.icard img{width:100%;height:100%;min-height:22rem;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.icard:hover img{transform:scale(1.03)}
.icard-body{padding:3rem 2.8rem;display:flex;flex-direction:column;justify-content:center}
.icard-body h3{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:300;line-height:1.08;
  letter-spacing:-.02em;margin:.8rem 0 1rem}
.icard-body p{font-size:.98rem;color:var(--ink-soft);line-height:1.85}
.icard-inside{margin:1.6rem 0 0;padding-top:1.3rem;border-top:1px solid var(--line);
  list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.icard-inside li{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.icard-body .readfull{margin-top:1.6rem;align-self:flex-start}
@media (max-width:820px){
  .icard{grid-template-columns:1fr}
  .icard img{min-height:15rem}
  .icard-body{padding:2.2rem 1.8rem}
}


/* Narrow (3-column) report tables fit a phone outright, so they never scroll.
   Wide ones do, and a swipe is not discoverable, so they say so under 760px. */
table.rpt-t.narrow{min-width:0}
table.rpt-t.narrow th,table.rpt-t.narrow td{padding-left:.4rem;padding-right:.4rem}
@media (max-width:760px){
  .rpt-tw.wide::after{
    content:'Swipe the table to see every column \2192';
    display:block;font-size:.7rem;letter-spacing:.1em;color:var(--taupe-light);
    padding-top:.9rem;
  }
  table.rpt-t.narrow{font-size:.84rem}
}

/* ============================================================================
   ABOUT  ·  added 31 August
   Two-column prose pairs, and the credentials list. The markers on the practice
   rows are YEARS, not 01/02/03, because the three practices really did arrive
   in that order and the dates are the story.
   ============================================================================ */
.onum.year{font-size:1.4rem;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  padding-top:.35rem;display:block}

.duo{max-width:60rem;margin:0 auto;padding:4.5rem 3.5vw;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1.15fr .85fr;gap:min(7vw,5rem);align-items:start}
.duo h2{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:300;line-height:1.1;
  letter-spacing:-.02em;margin:.9rem 0 1.4rem}
.duo h3{font-size:clamp(1.5rem,2.6vw,1.9rem);font-weight:300;line-height:1.14;
  letter-spacing:-.015em;margin:.9rem 0 1.2rem}
.duo p{color:var(--ink-soft);font-size:1rem;line-height:1.88;margin-bottom:1.2rem}
.duo p:last-child{margin-bottom:0}
.duo b{font-weight:500;color:var(--ink)}

.creds{list-style:none;margin-top:.4rem}
.creds li{position:relative;padding:.85rem 0 .85rem 1.5rem;
  border-bottom:1px solid var(--line);
  font-size:.93rem;color:var(--ink-soft);line-height:1.65}
.creds li:last-child{border-bottom:0}
.creds li::before{content:'';position:absolute;left:0;top:1.5rem;
  width:6px;height:1px;background:var(--accent)}

@media (max-width:860px){
  .duo{grid-template-columns:1fr;gap:2.8rem;padding:3.5rem 5vw}
}

/* ============================================================================
   ABOUT HERO  ·  no banner
   Cecilia's own About layout: the intro text beside a contained portrait, on the
   cream ground. Replaces the full-bleed photo banner with text over it.
   ============================================================================ */
.abouthero{max-width:66rem;margin:0 auto;padding:9rem 3.5vw 4rem;
  display:grid;grid-template-columns:1.05fr .95fr;gap:min(7vw,5rem);align-items:center}
.abouthero h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:300;letter-spacing:-.035em;
  line-height:.98;margin:1.1rem 0 0}
.abouthero .rule{margin:2rem 0 1.5rem}
.abouthero .ah-sub{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(1.3rem,2.6vw,1.75rem);color:var(--ink);line-height:1.35}
.abouthero .ah-lede{color:var(--ink-soft);font-size:1.02rem;line-height:1.9;
  max-width:30rem;margin-top:1.3rem}
.abouthero figure{aspect-ratio:4/5;overflow:hidden;background:var(--cream-deep)}
.abouthero picture{display:block;width:100%;height:100%}
.abouthero img{width:100%;height:100%;object-fit:cover;object-position:50% 4%;
  filter:saturate(.97)}
@media (max-width:860px){
  .abouthero{grid-template-columns:1fr;gap:2.6rem;padding:7.5rem 6vw 3rem}
  .abouthero figure{aspect-ratio:3/4;max-width:22rem;margin:0 auto}
  .abouthero .ah-lede{max-width:none}
}

/* ============================================================================
   LISTINGS BANNER  ·  built for 10+ listings
   A scrolling row of tiles. Each tile is one link to its listing's own page
   (/real-estate/listings/<address>/). To add a listing, build its page, then copy
   one <a class="ltile"> block. Nothing else changes.
   ============================================================================ */
.lband{max-width:1240px;margin:0 auto;padding:5.5rem 3.5vw;border-top:1px solid var(--line)}
.lband-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;
  flex-wrap:wrap;margin-bottom:2.2rem}
.lband-head h2{font-size:clamp(2rem,4vw,3.1rem);font-weight:300;line-height:1.06;
  letter-spacing:-.02em;margin-top:.7rem}
/* Capped, not 1fr: with a single listing the tile keeps a normal card width
   instead of stretching across the page. Ten listings scroll. */
.lrow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(15.5rem,21rem);
  justify-content:start;
  gap:1.2rem;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:1rem;scroll-snap-type:x mandatory}
.lrow::-webkit-scrollbar{height:3px}
.lrow::-webkit-scrollbar-thumb{background:var(--line)}
.ltile{scroll-snap-align:start;background:var(--paper);border:1px solid var(--line);
  cursor:pointer;text-align:left;padding:0;font:inherit;color:inherit;
  display:flex;flex-direction:column;transition:border-color .3s ease,transform .3s ease}
.ltile:hover{border-color:var(--taupe);transform:translateY(-2px)}
.ltile:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ltile figure{aspect-ratio:4/3;overflow:hidden;background:var(--cream-deep)}
.ltile img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.ltile:hover img{transform:scale(1.04)}
.ltile-body{padding:1.3rem 1.2rem 1.4rem;display:flex;flex-direction:column;flex:1}
.ltile-body .eyebrow{font-size:.6rem;letter-spacing:.18em}
.ltile-body h3{font-size:1.2rem;font-weight:400;line-height:1.25;margin:.5rem 0 .35rem}
.ltile-price{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.35rem;
  color:var(--ink);font-variant-numeric:tabular-nums}
.ltile-avail{font-size:1.05rem;line-height:1.35;font-style:italic;color:var(--ink-soft)}
/* the price line on a tile: the address's size, so the price never reads bigger than the address */
.ltile-rent{font-size:1.2rem;line-height:1.3;margin:.15rem 0 .1rem;font-variant-numeric:lining-nums tabular-nums}
.ltile-meta{margin-top:.5rem;font-size:.72rem;letter-spacing:.06em;color:var(--taupe);
  padding-top:.7rem;border-top:1px solid var(--line)}
/* the cue at the foot of a tile (9 Oct): the whole tile is the link, this says so */
.ltile-cue{margin-top:auto;padding-top:1.15rem;align-self:flex-start;display:inline-flex;gap:.55rem;
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:3px;transition:gap .3s ease}
.ltile:hover .ltile-cue{gap:.95rem}
@media (prefers-reduced-motion:reduce){ .ltile,.ltile img,.ltile-cue{transition:none} .ltile:hover{transform:none} }
.lband-foot{margin-top:1.6rem;font-size:.78rem;letter-spacing:.05em;color:var(--taupe);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* the detail panel */
.lsheet[hidden]{display:none}
.lsheet{position:fixed;inset:0;z-index:60;background:rgba(37,33,29,.55);
  display:flex;align-items:center;justify-content:center;padding:4vh 4vw;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.lsheet-inner{background:var(--cream);max-width:60rem;width:100%;max-height:92vh;
  overflow-y:auto;position:relative;padding:3rem 2.6rem 2.6rem}
.lsheet-close{position:absolute;top:1rem;right:1rem;background:none;border:1px solid var(--line);
  width:2.4rem;height:2.4rem;cursor:pointer;font-size:1.1rem;line-height:1;color:var(--ink)}
.lsheet-close:hover{border-color:var(--taupe)}
.lsheet h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:300;line-height:1.1;margin:.7rem 0 .4rem}
.lsheet .lsub{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:1.15rem;color:var(--ink-soft);margin-bottom:1.4rem}
.lsheet-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1.4rem 0}
.lsheet-imgs img{width:100%;aspect-ratio:4/3;object-fit:cover}
.lsheet p{color:var(--ink-soft);font-size:.98rem;line-height:1.85;margin-bottom:1rem}
@media (max-width:700px){
  .lsheet-inner{padding:2.6rem 1.4rem 1.8rem}
  .lsheet-imgs{grid-template-columns:1fr 1fr}
  .lband{padding:4rem 5vw}
}

/* ============================================================================
   STAGING PORTFOLIO BANNER
   Same idea, photos only. To add one, copy a <figure> and drop the file in.
   ============================================================================ */
.pband{max-width:1240px;margin:0 auto;padding:3rem 3.5vw 5.5rem}
.prow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(13rem,17rem);
  justify-content:start;
  gap:.9rem;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:1rem;
  scroll-snap-type:x mandatory}
.prow::-webkit-scrollbar{height:3px}
.prow::-webkit-scrollbar-thumb{background:var(--line)}
.prow figure{scroll-snap-align:start;aspect-ratio:4/5;overflow:hidden;background:var(--cream-deep)}
.prow img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.prow figure:hover img{transform:scale(1.05)}
.bandhint{font-size:.7rem;letter-spacing:.1em;color:var(--taupe-light);margin-top:.6rem;display:none}
.bandhint.show{display:block}
@media (min-width:901px){ .bandhint,.bandhint.show{display:none} }

/* The markets band on /real-estate/. Full-bleed, capped so it never dominates the page,
   and it does not fetch a byte until it is near the viewport. */
.vband{margin:4.5rem 0 0;background:#1b1815;overflow:hidden}
.vband-media{display:block;width:100%;height:clamp(300px,46vh,540px);object-fit:cover}
@media (prefers-reduced-motion:reduce){ .vband-media{height:clamp(240px,34vh,420px)} }

/* ---- THE REFLECTION CARD, Ceci 1 Sep. A square card carrying the three-part label she
   wrote, opening the full piece in place. Future issues drop straight into the same shape. */
.refcard{
  display:block;width:100%;max-width:44rem;margin:0 auto;
  background:var(--paper);border:1px solid var(--line);
  padding:3.2rem 2.6rem 2.8rem;text-align:center;cursor:pointer;
  font:inherit;color:inherit;transition:border-color .3s ease,transform .3s ease;
}
.refcard:hover{border-color:var(--taupe);transform:translateY(-2px)}
.refcard:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.refcard-kicker,.refcard-issue{
  display:block;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe);
}
.refcard-bar{display:block;width:34px;height:1px;background:var(--line);margin:.85rem auto}
.refcard-title{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(2.2rem,4vw,3rem);line-height:1.05;margin:1rem 0 .9rem;
}
.refcard-teaser{
  font-size:.98rem;line-height:1.8;color:var(--ink-soft);max-width:32rem;margin:0 auto 1.6rem;
}
.refcard-open{
  display:inline-block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:.3rem;
}
.refdlg{
  border:0;padding:0;max-width:52rem;width:calc(100% - 2rem);
  background:var(--paper);color:var(--ink);
}
.refdlg::backdrop{background:rgba(20,17,14,.55)}
.refdlg-inner{padding:3rem clamp(1.4rem,4vw,3.4rem) 3.4rem}
.refdlg-x{
  position:sticky;top:0;margin-left:auto;display:block;
  background:var(--paper);border:0;font-size:2rem;line-height:1;
  padding:.6rem 1.1rem;cursor:pointer;color:var(--taupe);
}
.refdlg-x:hover{color:var(--ink)}
@media (max-width:620px){ .refcard{padding:2.4rem 1.4rem 2rem} }

/* Social row in the footer. Ceci, 1 Sep: "Add icons/links for Instagram, Facebook, LinkedIn,
   and WhatsApp." Facebook, LinkedIn and WhatsApp point at placeholders until she sends the
   handles; Instagram is her live account. */
/* Sits directly under her name and the licence line, inside the brand block, because that is
   where Ceci asked for it and because a row floating between the footer grid and the base rule
   read as an orphan. Every mark is drawn in the same frame at the same weight, from social.js. */
.fsocial{display:flex;gap:.95rem;align-items:center;margin:1.15rem 0 0}
.fsocial a{color:var(--taupe);display:inline-flex;transition:color .25s ease,transform .25s ease}
.fsocial a:hover{color:var(--ink);transform:translateY(-1px)}
.fsocial a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:760px){ .fsocial{justify-content:flex-start;margin-top:1rem} }

/* Ceci, 1 Sep: an arrow on Buying, Selling, New Development and Relocation, because each will
   open to its own page explaining how she works. The indicator ships now; the pages follow. */
.svc-arrow{
  display:inline-block;margin-left:.45rem;color:var(--taupe);
  font-size:.8em;transform:translateX(0);transition:transform .3s ease,color .3s ease;
}

/* ---- 100+ STAGED UNITS, Ceci 1 Sep. A scroll-snap rail rather than a fading slideshow:
   staging work is judged by comparison, so letting someone move through it at their own pace
   beats a carousel that advances on its own timer. Arrows for the desktop, swipe on a phone. */
.port{max-width:1500px;margin:0 auto;padding:5rem 3.5vw 1rem}
.port-head{max-width:44rem;margin:0 0 2.6rem}
.port-head h2{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1.04;margin:.7rem 0 .9rem;
}
.port-head p{color:var(--ink-soft);font-size:1rem;line-height:1.85;max-width:34rem}
.port-rail{
  display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:1.2rem;
  scrollbar-width:none;-ms-overflow-style:none;
}
.port-rail::-webkit-scrollbar{display:none}
.pslide{
  flex:0 0 clamp(260px,32vw,420px);scroll-snap-align:start;margin:0;
  aspect-ratio:4/3;overflow:hidden;background:var(--sand);
}
.pslide img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s ease}
.pslide:hover img{transform:scale(1.03)}
.port-nav{display:flex;gap:.6rem;justify-content:flex-end;padding:.4rem 0 0}
.port-btn{
  width:44px;height:44px;border:1px solid var(--line);background:transparent;
  color:var(--taupe);font-size:1rem;cursor:pointer;
  transition:border-color .25s ease,color .25s ease;
}
.port-btn:hover{border-color:var(--ink);color:var(--ink)}
.port-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:760px){
  .port{padding:3.5rem 5vw 1rem}
  .pslide{flex:0 0 78vw}
  .port-nav{justify-content:center}
}

/* The reflection card had no section padding, so it sat flush against the dark closing band
   below it and the two read as one block. Ceci, 1 Sep: lift the white tile so it does not
   merge into the brown banner. */
#reflection{padding:1.5rem 3.5vw 6.5rem}
@media (max-width:760px){ #reflection{padding:1rem 5vw 4.5rem} }

/* ---- SINGLE-LINE SERVICE STRIP, Ceci 1 Sep: "make sure all the words are horizontal and
   doesnt wrap, make it smaller if you need to." A modifier rather than a change to .tagrow,
   because the Real Estate listing tags use the same class with a variable number of items and
   genuinely need to wrap. Here the type scales down until the five fit on one line; below that
   the strip scrolls sideways rather than stacking, so it stays horizontal on a phone too. */
/* min-width:0 is load-bearing, on the row AND on its wrapper. A flex item defaults to
   min-width:auto, which means "at least as wide as my content". A nowrap row of five items is
   718px of content, so the wrapper refused to shrink below that and pushed the whole page
   sideways on a phone: 731px of document inside a 375px screen. Letting both shrink to zero
   hands the overflow back to the row, which is what overflow-x:auto is there to absorb. */
.offer > div{min-width:0;width:100%}
.tagrow-line{flex-wrap:nowrap;overflow-x:auto;max-width:100%;min-width:0;
  scrollbar-width:none;-ms-overflow-style:none}
.tagrow-line::-webkit-scrollbar{display:none}
.tagrow-line span{
  white-space:nowrap;flex:0 0 auto;
  /* Measured, not guessed: at .68rem with 1.5rem padding the five items needed 980px inside a
     896px container and the strip scrolled. These caps make it land at about 870px. */
  /* The usable width does not grow with the viewport: .offer caps at 56rem and its 3.5vw
     padding keeps taking more as the screen widens, so the row has about 762px to live in at
     1920 and about 806 at 1280. These caps put the five items near 675px, inside both. */
  font-size:clamp(.5rem,.92vw,.55rem);
  letter-spacing:clamp(.09em,.15vw,.15em);
  padding:.25rem clamp(.5rem,1.4vw,.92rem);
}
@media (max-width:760px){
  .tagrow-line span{font-size:.58rem;letter-spacing:.14em;padding:.25rem .85rem}
}

/* ============================================================================
   STAGING GALLERIES (added 4 September 2026)
   Each residence in "Staged this season" carries its own photo set: a swipeable
   rail inside the card, and a full-screen viewer behind it.

   TO ADD A PHOTO to a residence: export it twice into images/hh/, as
   <slug>-<n>.webp (1000px wide, for the card) and <slug>-<n>-lg.webp (1800px
   wide, for the viewer). Then add one <img> line to that card's .gal-rail in
   hygge-haus/index.html. The dots and the counter build themselves.
   TO ADD A RESIDENCE: copy one <article class="jcard"> block and give the .gal
   a new data-gal slug. Nothing here needs touching.
   ============================================================================ */
.gal{position:relative;margin-bottom:1.3rem}
.gal-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;aspect-ratio:4/3;
  background:var(--cream-deep);scrollbar-width:none;-ms-overflow-style:none;cursor:zoom-in}
.gal-rail::-webkit-scrollbar{display:none}
.gal-rail img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;
  transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.jcard:hover .gal-rail img{transform:scale(1.03)}
.gal-count{position:absolute;top:.85rem;right:.85rem;pointer-events:none;
  background:rgba(37,33,29,.58);color:var(--white);font-size:.6rem;letter-spacing:.16em;
  padding:.3rem .58rem}
.gal-dots{position:absolute;left:0;right:0;bottom:.85rem;display:flex;gap:.42rem;justify-content:center}
.gal-dots:empty{display:none}
.gal-dot{width:6px;height:6px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,253,249,.5);transition:background .3s,transform .3s}
.gal-dot.on{background:var(--white);transform:scale(1.35)}
.gal-dot:focus-visible{outline:2px solid var(--white);outline-offset:3px}

/* The full-screen viewer. One element on the page, borrowed by whichever
   residence was clicked. */
.lbox{position:fixed;inset:0;z-index:200;background:rgba(32,29,25,.97);
  display:none;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3.5rem)}
.lbox.open{display:flex}
.lbox img{width:auto;max-width:100%;max-height:80vh;object-fit:contain}
.lbox-cap{position:absolute;left:0;right:0;bottom:clamp(1.1rem,3.5vw,2.4rem);text-align:center;
  color:rgba(255,253,249,.7);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  padding:0 3.5rem}
.lbox-btn{position:absolute;background:none;border:1px solid rgba(255,253,249,.28);
  color:var(--white);width:2.9rem;height:2.9rem;cursor:pointer;font-size:1rem;line-height:1;
  transition:border-color .3s,opacity .3s}
.lbox-btn:hover{border-color:rgba(255,253,249,.85)}
.lbox-btn:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.lbox-nav{top:50%;transform:translateY(-50%)}
.lbox-prev{left:clamp(.6rem,2.5vw,2.2rem)}
.lbox-next{right:clamp(.6rem,2.5vw,2.2rem)}
.lbox-close{top:clamp(.7rem,2.5vw,2.2rem);right:clamp(.7rem,2.5vw,2.2rem)}
body.lbox-open{overflow:hidden}
@media(max-width:700px){
  .lbox-nav{display:none}
  .lbox img{max-height:72vh}
  .lbox-cap{font-size:.6rem;letter-spacing:.16em}
}
@media(prefers-reduced-motion:reduce){
  .gal-rail img,.jcard:hover .gal-rail img{transition:none;transform:none}
}


/* The "how did you hear about me" field on the newsletter form. Matches the
   existing inputs rather than inheriting the browser's default select, which
   looks like a tax form next to Cormorant Garamond. */
.fld{display:block;margin:0 0 .9rem}
.fld>span{display:block;font-family:'Jost',sans-serif;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:#6a6259;margin:0 0 .35rem}
.fld select{width:100%;padding:.7rem .8rem;border:1px solid #d3c9bc;background:#fffdf9;
  color:#25211d;font:300 .95rem/1.4 'Jost',sans-serif;border-radius:0;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%236a6259'/></svg>");
  background-repeat:no-repeat;background-position:right .8rem center}
.fld select:focus{outline:none;border-color:#6a6259}