/* ==========================================================================
   OCTAVE REALTY — Design system
   Primary display serif: Cormorant Garamond
   Secondary editorial serif: Playfair Display (supporting + feature headings)
   Functional sans: Nunito Sans (body, navigation, UI, property data)
   Palette: warm ivory / soft stone / near-black / muted bronze
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root{
  /* surface + ink */
  --ink:#14110E;
  --soot:#1D1915;
  --char:#42392F;
  --muted:#6B6157;
  --stone:#E6E0D4;
  --bone:#F1EDE3;
  --ivory:#FBF8F2;

  /* line work */
  --line:#DCD4C6;
  --line-soft:#E7E1D6;
  --line-dark:rgba(251,248,242,.14);
  --line-dark-soft:rgba(251,248,242,.07);

  /* accent — muted bronze, used sparingly */
  --clay:#7A5F44;
  --taupe:#A79378;
  --dim:rgba(246,242,234,.62);
  --dim-2:rgba(246,242,234,.56);

  /* type */
  /* PRIMARY — major headlines, hero, large editorial statements, key headings */
  --serif:'Cormorant Garamond','Iowan Old Style',Georgia,serif;
  /* SECONDARY — supporting headings, feature headings, editorial accents */
  --serif-alt:'Playfair Display','Iowan Old Style',Georgia,serif;
  /* FUNCTIONAL — body, navigation, buttons, labels, property detail, captions */
  --sans:'Nunito Sans','Helvetica Neue',Helvetica,Arial,sans-serif;

  /* Cormorant sets optically small, so the display end of the scale still runs
     ahead of the text sizes — but only just. The whole editorial range was
     pulled back roughly a fifth: at these sizes the headings stop shouting and
     the generous section padding around them starts doing the work instead,
     which is what reads as quiet luxury rather than a poster. Nunito Sans has a
     generous x-height, so functional text is left where it is. */
  --t-display:clamp(3.05rem,10.2vw,9.1rem);
  --t-h1:clamp(2.4rem,5.8vw,5rem);
  --t-h2:clamp(1.95rem,4.1vw,3.35rem);
  --t-h3:clamp(1.28rem,1.85vw,1.7rem);
  --t-h4:clamp(1.05rem,1.28vw,1.24rem);
  --t-quote:clamp(1.22rem,2.1vw,1.78rem);
  --t-lead:clamp(1rem,1.24vw,1.18rem);
  --t-body:clamp(.9125rem,.97vw,.9875rem);
  --t-small:.8rem;
  --t-eyebrow:.675rem;
  --t-micro:.625rem;

  /* rhythm */
  --gut:clamp(20px,4.6vw,68px);
  --section:clamp(78px,10.5vw,164px);
  --maxw:1340px;
  --maxw-wide:1560px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.75;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
h1,h2,h3,h4{font-weight:400;line-height:1.06;text-wrap:balance}
h1,h2{font-family:var(--serif);letter-spacing:-.022em;line-height:1}
h3,h4{font-family:var(--serif-alt);letter-spacing:-.012em}
::selection{background:var(--ink);color:var(--ivory)}
:focus-visible{outline:1px solid var(--clay);outline-offset:4px}
.on-dark :focus-visible,.is-dark :focus-visible{outline-color:var(--taupe)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:-100px;left:24px;z-index:600;background:var(--ink);color:var(--ivory);padding:14px 22px;font-size:var(--t-eyebrow);letter-spacing:.28em;text-transform:uppercase;transition:top .3s var(--ease)}
.skip:focus{top:16px}

/* -------------------------------------------------------------- helpers -- */
.shell{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);width:100%}
.shell--wide{max-width:var(--maxw-wide)}
.shell--flush{padding-inline:var(--gut)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:clamp(40px,5vw,72px)}

.section{padding-block:var(--section);position:relative}
.section--tight{padding-block:clamp(56px,7vw,104px)}
.is-dark{background:var(--ink);color:var(--ivory)}
.is-bone{background:var(--bone)}
.is-stone{background:var(--stone)}

.rule{height:1px;background:var(--line);border:0;width:100%}
.is-dark .rule{background:var(--line-dark)}

/* shared section header — title block left, standfirst right ----------- */
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end;row-gap:24px;margin-bottom:clamp(48px,6.2vw,86px)}
.sec-head__title{grid-column:1/8}
.sec-head__meta{grid-column:9/13;text-align:right;font-size:var(--t-small);color:var(--muted);line-height:1.75}
.is-dark .sec-head__meta{color:var(--dim)}
@media (max-width:900px){.sec-head__title,.sec-head__meta{grid-column:1/-1}.sec-head__meta{text-align:left}}

/* eyebrow ------------------------------------------------------------- */
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--clay);line-height:1;margin-bottom:clamp(22px,2.6vw,38px)
}
.is-dark .eyebrow{color:var(--taupe)}
.eyebrow i{font-style:normal;opacity:.55;font-variant-numeric:tabular-nums}
.eyebrow::after{content:'';flex:0 0 auto;width:clamp(24px,4vw,56px);height:1px;background:currentColor;opacity:.4}
.eyebrow--plain::after{display:none}

/* type utilities ------------------------------------------------------ */
.display{font-family:var(--serif);font-size:var(--t-display);font-weight:300;line-height:.84;letter-spacing:-.032em}
.h1{font-family:var(--serif);font-size:var(--t-h1);font-weight:300;letter-spacing:-.026em;line-height:.98}
.h2{font-family:var(--serif);font-size:var(--t-h2);font-weight:300;letter-spacing:-.024em;line-height:1.02}
.h3{font-family:var(--serif-alt);font-size:var(--t-h3);font-weight:400;letter-spacing:-.012em;line-height:1.22}
.h4{font-family:var(--serif-alt);font-size:var(--t-h4);font-weight:600;letter-spacing:-.006em;line-height:1.34}
em,.it{font-style:italic}
.lead{font-size:var(--t-lead);line-height:1.72;color:var(--muted);max-width:56ch}
.is-dark .lead{color:var(--dim)}
.body{color:var(--muted);max-width:60ch;line-height:1.85}
.is-dark .body{color:var(--dim)}
.body + .body{margin-top:1.1em}
.micro{font-size:var(--t-micro);letter-spacing:.34em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.is-dark .micro{color:var(--dim-2)}
.tnum{font-variant-numeric:tabular-nums}

/* links --------------------------------------------------------------- */
.ul{position:relative;display:inline}
.ul::after{content:'';position:absolute;left:0;right:0;bottom:-.22em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease)}
.ul:hover::after,a:hover > .ul::after{transform:scaleX(1);transform-origin:0 50%}

.arrow{
  display:inline-flex;align-items:center;gap:16px;
  font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink);padding-block:6px;position:relative
}
.is-dark .arrow{color:var(--ivory)}
.arrow::before{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.22}
.arrow::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s var(--ease)}
.arrow:hover::after{transform:scaleX(1);transform-origin:0 50%}
.arrow svg{flex:0 0 auto;transition:transform .5s var(--ease)}
.arrow:hover svg{transform:translateX(7px)}

.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:28px;
  padding:1.15rem 1.75rem;border:1px solid currentColor;position:relative;overflow:hidden;
  font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.28em;text-transform:uppercase;line-height:1;
  isolation:isolate
}
.btn::before{content:'';position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease);z-index:-1}
.btn > *{transition:color .45s var(--ease)}
.btn:hover > *{color:var(--ivory)}
.btn:hover::before{transform:scaleY(1)}
.is-dark .btn::before,.btn--invert::before{background:var(--ivory)}
.is-dark .btn:hover > *,.btn--invert:hover > *{color:var(--ink)}
/* quieter sibling: same geometry, dimmer rule — the primary action stays primary */
.btn--quiet{border-color:currentColor;opacity:.62;transition:opacity .45s var(--ease)}
.btn--quiet:hover{opacity:1}
.btn--solid{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.btn--solid::before{background:var(--clay)}
.btn--solid:hover > *{color:var(--ivory)}

/* figures + image motion ---------------------------------------------- */
.fig{position:relative;overflow:hidden;background:var(--stone);display:block}
.fig img{width:100%;height:100%;object-fit:cover}
.js .fig img{transform:scale(1.07);transition:transform 1.5s var(--ease)}
.js .fig.is-in img{transform:scale(1)}
/* The wipe clips the IMAGE, never the .fig box itself. .fig is what the
   IntersectionObserver watches, and a clip-path on the observed element
   collapses its intersection rect to zero area — the observer then never
   reports it as intersecting, .is-in is never added, and the portrait stays
   clipped to nothing for the life of the page. Clipping the child keeps the
   observed box measurable while the reveal reads identically. */
.js .fig--wipe img{clip-path:inset(0 0 100% 0);transition:transform 1.5s var(--ease),clip-path 1.15s var(--ease)}
.js .fig--wipe.is-in img{clip-path:inset(0 0 0 0)}
.fig--zoom:hover img,a:hover > .fig img,.card:hover .fig img{transform:scale(1.05);transition:transform 1.3s var(--ease)}
.fig figcaption{margin-top:18px}

/* reveals -------------------------------------------------------------- */
/* Reveal states are scoped to .js so that every image, heading and block is
   visible by default. If the interaction layer fails to load, the page still
   renders complete rather than blank. */
.js [data-reveal]{opacity:0;transform:translate3d(var(--rv-x,0),var(--rv-y,20px),0);transition:opacity .95s var(--ease),transform .95s var(--ease);transition-delay:var(--rv-d,0ms)}
.js [data-reveal].is-in{opacity:1;transform:none}

.linesplit{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.js .linesplit > span{display:block;transform:translateY(calc(100% + .2em));transition:transform 1.05s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.js .is-in .linesplit > span,.js .linesplit.is-in > span{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .fig--wipe img{clip-path:none}
  .js .fig img{transform:none}
  .js .linesplit > span{transform:none}
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:300;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:var(--nav-h,88px);padding-inline:var(--gut);
  color:var(--ink);
  transition:height .5s var(--ease),background .5s var(--ease),color .4s var(--ease),box-shadow .5s var(--ease)
}
.nav::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.nav.is-solid{--nav-h:66px;background:rgba(251,248,242,.9);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px)}
.nav.is-solid::after{transform:scaleX(1)}
.nav.is-inverted{color:var(--ivory)}
.nav.is-hidden{transform:translateY(-100%);transition:transform .5s var(--ease),background .5s var(--ease)}

/* Supplied Octave wordmark. Two artwork variants — the dark lockup for light
   grounds, the reversed lockup for ink grounds. Height is driven, width is auto,
   so the artwork keeps its native 6.88:1 proportion at every breakpoint. */
.mark{display:flex;align-items:center;gap:14px;line-height:0}
/* One wordmark image, never two. The artwork itself is swapped in JS by
   pointing the same <img> at the ink or reverse lockup, so the header only
   ever contains a single logo element. Height alone is set — width stays
   auto so the supplied lockup keeps its original 640:93 proportions. */
.mark img{display:block;width:auto;height:var(--mark-h,22px);transition:height .5s var(--ease)}
.nav.is-solid .mark img{--mark-h:19px}
@media (max-width:520px){.mark img{--mark-h:19px}}

.nav-links{display:flex;align-items:center;gap:clamp(20px,2.6vw,44px)}
.nav-links a{font-size:var(--t-eyebrow);letter-spacing:.22em;text-transform:uppercase;font-weight:600;position:relative;padding-block:6px;white-space:nowrap}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:0 50%}

.nav-cta{display:flex;align-items:center;gap:20px}
.nav-enquire{
  display:inline-flex;align-items:center;gap:12px;padding:.72rem 1.25rem;
  border:1px solid currentColor;font-size:var(--t-micro);letter-spacing:.3em;text-transform:uppercase;font-weight:600;
  position:relative;overflow:hidden;isolation:isolate
}
.nav-enquire::before{content:'';position:absolute;inset:0;background:currentColor;transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s var(--ease);z-index:-1}
.nav-enquire span{transition:color .4s var(--ease)}
.nav-enquire:hover::before{transform:scaleY(1)}
.nav-enquire:hover span{color:var(--ivory)}
.nav.is-inverted .nav-enquire:hover span{color:var(--ink)}

.burger{display:none;width:34px;height:34px;position:relative;flex:0 0 auto}
.burger i{position:absolute;left:4px;right:4px;height:1px;background:currentColor;transition:transform .45s var(--ease),opacity .3s}
.burger i:nth-child(1){top:13px}
.burger i:nth-child(2){top:20px}
body.menu-open .burger i:nth-child(1){transform:translateY(3.5px) rotate(15deg)}
body.menu-open .burger i:nth-child(2){transform:translateY(-3.5px) rotate(-15deg)}

@media (max-width:1080px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-enquire{display:none}
}

/* mobile drawer -------------------------------------------------------- */
.drawer{
  position:fixed;inset:0;z-index:280;background:var(--ivory);color:var(--ink);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--nav-h,88px) + 32px) var(--gut) calc(var(--gut) + 16px);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
  visibility:hidden;overflow-y:auto
}
body.menu-open .drawer{clip-path:inset(0 0 0 0);visibility:visible}
body.menu-open{overflow:hidden}
/* the drawer is an ivory ground: the nav sits on top of it, so the inverted
   state has to fall back to the ink lockup and ink chrome while it is open */
body.menu-open .nav{color:var(--ink)}
.drawer-links li{border-top:1px solid var(--line)}
.drawer-links li:last-child{border-bottom:1px solid var(--line)}
.drawer-links a{
  display:flex;align-items:baseline;gap:20px;padding:clamp(16px,2.6vw,24px) 0;
  font-family:var(--serif);font-size:clamp(1.85rem,6.4vw,2.75rem);font-weight:300;letter-spacing:-.024em;line-height:1;
  opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s
}
.drawer-links a em{font-size:var(--t-micro);letter-spacing:.3em;font-style:normal;color:var(--clay);opacity:.7}
body.menu-open .drawer-links a{opacity:1;transform:none;transition-delay:calc(120ms + var(--i,0) * 55ms)}
.drawer-links a:hover{color:var(--clay)}
.drawer-foot{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:flex-end;justify-content:space-between;padding-top:36px}
.drawer-foot a{font-size:var(--t-small);letter-spacing:.02em}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;background:var(--ink);color:var(--ivory);overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2;background:var(--ink)}
.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s var(--ease-soft)}
.hero__media video.is-ready{opacity:1}
@media (prefers-reduced-motion:reduce){.hero__media video{transition:none}}

.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:
    /* nav band: keeps the ivory lockup and links legible over a bright plate */
    linear-gradient(to bottom,rgba(20,17,14,.66) 0%,rgba(20,17,14,.22) 14%,rgba(20,17,14,0) 30%),
    linear-gradient(to top,rgba(20,17,14,.93) 0%,rgba(20,17,14,.62) 34%,rgba(20,17,14,.16) 64%,rgba(20,17,14,.3) 100%),
    linear-gradient(to right,rgba(20,17,14,.72) 0%,rgba(20,17,14,.2) 58%,rgba(20,17,14,0) 100%)
}
.hero__grain{position:absolute;inset:0;z-index:-1;opacity:.35;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* architectural hairline crossing the hero */
.hero__axis{position:absolute;top:0;bottom:0;left:min(38%,620px);width:1px;background:linear-gradient(to bottom,transparent,rgba(251,248,242,.18) 22%,rgba(251,248,242,.18) 78%,transparent);z-index:0}
@media (max-width:900px){.hero__axis{display:none}}

.hero__inner{position:relative;z-index:1;width:100%;max-width:var(--maxw-wide);margin-inline:auto;padding:calc(var(--nav-h,88px) + clamp(48px,10vh,120px)) var(--gut) 0;flex:1;display:flex;flex-direction:column;justify-content:flex-end}
.hero__eyebrow{display:flex;align-items:center;gap:16px;font-size:var(--t-eyebrow);letter-spacing:.34em;text-transform:uppercase;font-weight:600;color:#D8C7AE;margin-bottom:clamp(24px,4vh,44px)}
.hero__eyebrow::after{content:'';width:clamp(28px,6vw,88px);height:1px;background:currentColor;opacity:.45}
.hero h1{font-size:var(--t-display);font-weight:300;line-height:.84;letter-spacing:-.036em;margin-bottom:clamp(28px,4.5vh,56px)}
.hero h1 em{font-weight:300;display:block;padding-left:clamp(0px,7vw,150px)}
.hero__sub{max-width:40ch;font-size:clamp(.875rem,1vw,1rem);line-height:1.75;letter-spacing:.002em;color:rgba(251,248,242,.72);margin-bottom:clamp(36px,6vh,68px)}

.hero__rail{
  border-top:1px solid var(--line-dark);
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:32px;
  padding:clamp(20px,2.6vw,30px) 0 clamp(22px,3vw,36px)
}
.hero__index{display:flex;flex-wrap:wrap;gap:clamp(20px,3.4vw,64px)}
.hero__index li{display:flex;gap:10px;align-items:baseline}
.hero__index b{font-family:var(--serif);font-size:.9rem;font-weight:300;color:var(--taupe);opacity:.85}
.hero__index span{font-size:var(--t-micro);letter-spacing:.3em;text-transform:uppercase;color:rgba(251,248,242,.78);font-weight:600}
.hero__scroll{display:flex;align-items:center;gap:14px;font-size:var(--t-micro);letter-spacing:.34em;text-transform:uppercase;color:rgba(251,248,242,.68)}
.hero__scroll i{display:block;width:1px;height:34px;background:linear-gradient(to bottom,var(--taupe),transparent);animation:scrollPulse 2.6s var(--ease-soft) infinite}
@keyframes scrollPulse{0%{transform:scaleY(.2);transform-origin:0 0;opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:0 100%;opacity:0}}
@media (max-width:520px){.hero__eyebrow{letter-spacing:.2em;gap:12px}}
@media (max-width:760px){
  .hero__rail{grid-template-columns:1fr;row-gap:22px}
  .hero__scroll{display:none}
  .hero h1 em{padding-left:0}
}

/* page hero (interior pages) ------------------------------------------- */
.phero{position:relative;background:var(--ink);color:var(--ivory);padding:calc(var(--nav-h,88px) + clamp(84px,14vh,168px)) 0 clamp(64px,9vw,128px);overflow:hidden;isolation:isolate}
.phero__media{position:absolute;inset:0;z-index:-2}
.phero__media img{width:100%;height:100%;object-fit:cover}
.phero__scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to bottom,rgba(20,17,14,.5) 0%,rgba(20,17,14,.14) 18%,rgba(20,17,14,0) 34%),
  linear-gradient(to right,rgba(20,17,14,.94),rgba(20,17,14,.72) 55%,rgba(20,17,14,.5))}
.crumb{display:flex;gap:12px;align-items:center;font-size:var(--t-micro);letter-spacing:.28em;text-transform:uppercase;color:var(--dim-2);margin-bottom:clamp(28px,4vw,44px)}
.crumb a:hover{color:var(--taupe)}
.phero h1{font-size:var(--t-h1);font-weight:300;letter-spacing:-.028em}

/* ==========================================================================
   01 · POSITIONING
   ========================================================================== */
.overture{padding-block:clamp(96px,12.6vw,198px)}
.overture__note{grid-column:1/4;position:relative;padding-top:6px}
.overture__note dl{border-top:1px solid var(--line);padding-top:20px}
.overture__note dt{font-family:var(--serif-alt);font-size:1.26rem;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.overture__note dt small{display:block;font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.3em;text-transform:uppercase;color:var(--clay);margin-top:10px}
.overture__note dd{margin-top:16px;font-size:var(--t-small);line-height:1.85;color:var(--muted)}
.overture__body{grid-column:5/13}
.overture__body p{font-family:var(--serif);font-size:clamp(1.45rem,2.62vw,2.32rem);font-weight:300;line-height:1.22;letter-spacing:-.018em;text-wrap:balance}
.overture__body p + p{margin-top:.9em}
.overture__body .soft{color:var(--muted)}
.overture__facts{grid-column:5/13;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);border-top:1px solid var(--line);padding-top:clamp(24px,2.6vw,36px);margin-top:clamp(12px,2vw,24px)}
.overture__facts div span{display:block;font-size:var(--t-micro);letter-spacing:.3em;text-transform:uppercase;color:var(--clay);margin-bottom:10px}
.overture__facts div p{font-family:var(--serif);font-size:1.26rem;font-weight:400;line-height:1.3;letter-spacing:-.01em}
@media (max-width:980px){
  .overture__note,.overture__body,.overture__facts{grid-column:1/-1}
  .overture__facts{grid-template-columns:1fr;gap:26px}
  .overture__facts div{border-top:1px solid var(--line-soft);padding-top:18px}
  .overture__facts div:first-child{border-top:0;padding-top:0}
}

/* ==========================================================================
   03 · CREED — why octave
   ========================================================================== */
.creed{background:var(--ink);color:var(--ivory);padding-block:var(--section)}
.creed__aside{grid-column:1/6;position:sticky;top:clamp(90px,14vh,150px);align-self:start}
.creed__list{grid-column:7/13}
/* the aside is a column, not a full-bleed head — set it a size that holds its
   two intended lines rather than orphaning “is” onto a line of its own */
.creed__aside h2{font-size:clamp(1.85rem,3.3vw,2.9rem)}
.creed__list li{border-top:1px solid var(--line-dark);position:relative}
.creed__list li:last-child{border-bottom:1px solid var(--line-dark)}
.creed__list a,.creed__list .row{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(22px,3vw,48px);padding:clamp(26px,3vw,40px) 0;transition:padding-left .55s var(--ease)}
.creed__list li:hover .row{padding-left:clamp(8px,1.4vw,20px)}
.creed__list li::before{content:'';position:absolute;inset:0 -24px;background:rgba(167,147,120,.055);opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.creed__list li:hover::before{opacity:1}
.creed__n{font-family:var(--serif);font-size:clamp(1.5rem,2.2vw,2rem);font-weight:300;color:var(--taupe);opacity:.62;line-height:1;padding-top:.14em;transition:opacity .5s var(--ease)}
.creed__list li:hover .creed__n{opacity:1}
.creed__t{font-family:var(--serif-alt);font-size:clamp(1.2rem,1.75vw,1.58rem);font-weight:400;letter-spacing:-.015em;line-height:1.2;margin-bottom:12px}
.creed__b{font-size:var(--t-small);line-height:1.9;color:var(--dim);max-width:52ch}
@media (max-width:980px){
  .creed__aside,.creed__list{grid-column:1/-1}
  .creed__aside{position:static}
}

/* ==========================================================================
   04 · DISCIPLINES — services as chapters
   ========================================================================== */
.chapter{border-top:1px solid var(--line);padding-block:clamp(44px,5.5vw,84px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:32px;position:relative}
.chapter:last-of-type{border-bottom:1px solid var(--line)}
.chapter__mark{grid-column:1/5}
.chapter__mark .n{font-family:var(--serif);font-size:clamp(2.5rem,4.9vw,4.8rem);font-weight:300;line-height:.8;color:#D6CCBA;display:block;margin-bottom:clamp(18px,2.4vw,32px);transition:color .6s var(--ease)}
.chapter:hover .chapter__mark .n{color:var(--clay)}
.chapter__mark h3{font-family:var(--serif-alt);font-size:clamp(1.44rem,2.25vw,2.02rem);font-weight:400;letter-spacing:-.016em;line-height:1.16}
.chapter__mark .kicker{display:block;margin-top:14px;font-size:var(--t-micro);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.chapter__body{grid-column:6/10}
/* Positioning line that opens each discipline — the promise, ahead of the detail. */
.chapter__lede{font-family:var(--serif-alt);font-size:clamp(1.06rem,1.42vw,1.34rem);font-weight:400;line-height:1.42;letter-spacing:-.008em;max-width:34ch;margin-bottom:1.05em}
.chapter__list{grid-column:10/13}
.chapter__list li{border-top:1px solid var(--line-soft);padding:11px 0;font-size:var(--t-small);color:var(--muted);line-height:1.6}
.chapter__list li:first-child{border-top:0;padding-top:0}
.chapter--flip .chapter__mark{grid-column:9/13;order:2;text-align:right}
.chapter--flip .chapter__body{grid-column:4/8;order:1}
.chapter--flip .chapter__list{grid-column:1/4;order:0}
@media (max-width:1080px){
  .chapter__mark,.chapter__body,.chapter__list,
  .chapter--flip .chapter__mark,.chapter--flip .chapter__body,.chapter--flip .chapter__list{grid-column:1/-1;order:initial;text-align:left}
}

/* fee band */
.fee{background:var(--ink);color:var(--ivory);padding-block:clamp(72px,9vw,140px)}
.fee__num{grid-column:1/6}
/* nowrap is the point: "2.0" and "%" are one number and must never be split
   across two lines, whatever the column width does at intermediate viewports. */
.fee__num b{display:block;white-space:nowrap;font-family:var(--serif);font-size:clamp(4rem,11.4vw,9.8rem);font-weight:300;line-height:.78;letter-spacing:-.05em}
/* The % is part of the number, not a footnote to it: large enough to read as
   one figure, and pulled in tight against the final digit. */
.fee__num b .pct{font-size:.66em;letter-spacing:-.02em;margin-left:-.05em;vertical-align:baseline}
.fee__num > span{display:block;margin-top:clamp(18px,2vw,28px);font-size:var(--t-micro);letter-spacing:.34em;text-transform:uppercase;color:var(--taupe)}
.fee__side{grid-column:7/13;align-self:end}
.fee__side li{border-top:1px solid var(--line-dark);padding:clamp(13px,1.5vw,18px) 0;display:grid;grid-template-columns:auto 1fr;gap:20px;font-size:var(--t-small);color:var(--dim);line-height:1.7}
.fee__side li i{font-style:normal;color:var(--taupe);font-family:var(--serif);font-size:.85rem;opacity:.8}
.fee__side li:last-child{border-bottom:1px solid var(--line-dark)}
@media (max-width:900px){.fee__num,.fee__side{grid-column:1/-1}}

/* ==========================================================================
   05 · TERRITORY
   ========================================================================== */
.terr{background:var(--bone);position:relative;overflow:hidden}
.terr__river{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:min(660px,58vw);opacity:.5;pointer-events:none;z-index:0}
.terr__river path{fill:none;stroke:var(--line);stroke-width:1.25}
.terr .grid{position:relative;z-index:1}
.terr__intro{grid-column:1/6;position:sticky;top:clamp(90px,14vh,150px);align-self:start}
.terr__list{grid-column:7/13}
.terr__list li{border-top:1px solid var(--line)}
.terr__list li:last-child{border-bottom:1px solid var(--line)}
.terr__list button{
  width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:clamp(11px,1.35vw,16px) 0;text-align:left;transition:padding .5s var(--ease),color .35s
}
.terr__list button:hover,.terr__list button[aria-pressed="true"]{padding-left:14px;color:var(--clay)}
.terr__list .name{font-family:var(--serif-alt);font-size:clamp(1rem,1.45vw,1.24rem);font-weight:400;letter-spacing:-.01em}
.terr__list .pc{font-size:var(--t-micro);letter-spacing:.24em;color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:900px){.terr__intro,.terr__list{grid-column:1/-1}.terr__intro{position:static}.terr__river{opacity:.28;right:-24%}}

/* ==========================================================================
   05 · PEOPLE & EXPERTISE — editorial profile spreads
   Two practitioners, one shared photographic treatment: identical 4:5 crops,
   identical column width, mirrored composition. Balanced, not repeated.
   ========================================================================== */
.people{padding-block:var(--section)}
.people .sec-head{margin-bottom:clamp(58px,7.5vw,118px)}
/* the two profile spreads sit directly against one another */
.people .shell + .shell{margin-top:clamp(76px,9.5vw,148px)}

.profile{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gut);row-gap:clamp(38px,4.8vw,62px);align-items:center
}
.profile__fig{grid-column:1/6}
.profile__text{grid-column:7/12}
.profile--flip .profile__fig{grid-column:8/13;order:2}
.profile--flip .profile__text{grid-column:2/7;order:1}

.profile__fig .fig{aspect-ratio:4/5}
.profile__cap{
  margin-top:clamp(15px,1.7vw,21px);display:flex;align-items:baseline;justify-content:space-between;
  gap:18px;font-size:var(--t-micro);letter-spacing:.28em;text-transform:uppercase;color:var(--muted)
}
.profile__cap i{font-style:normal;color:var(--clay)}

.profile__name{
  font-family:var(--serif);font-size:clamp(2.75rem,5.9vw,5rem);font-weight:300;
  letter-spacing:-.03em;line-height:.88
}
.profile__title{
  margin-top:clamp(22px,2.5vw,32px);display:flex;flex-wrap:wrap;align-items:center;gap:.45em .7em;
  font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.2em;line-height:1.5;
  text-transform:uppercase;color:var(--char)
}
.profile__title i{font-style:normal;font-weight:400;color:var(--taupe);opacity:.6}
.profile__desc{
  margin-top:clamp(30px,3.4vw,44px);font-size:var(--t-lead);line-height:1.9;
  color:var(--muted);max-width:46ch;text-wrap:pretty
}
/* Two short paragraphs read as two thoughts, not as one wrapped block. */
.profile__desc + .profile__desc{margin-top:1.75em}
.profile__quote{
  margin-top:clamp(28px,3.4vw,44px);padding-left:clamp(20px,2.4vw,32px);border-left:1px solid var(--clay);
  font-family:var(--serif-alt);font-style:italic;font-size:var(--t-quote);font-weight:400;line-height:1.4;letter-spacing:-.014em;text-wrap:pretty
}
.profile__quote cite{display:block;font-style:normal;font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:20px}

.profile__act{margin-top:clamp(36px,4vw,52px);display:flex;flex-wrap:wrap;gap:16px 34px;align-items:center}

@media (max-width:1080px){
  .profile__fig{grid-column:1/7}
  .profile__text{grid-column:8/13}
  .profile--flip .profile__fig{grid-column:7/13}
  .profile--flip .profile__text{grid-column:1/6}
}
@media (max-width:900px){
  .profile{row-gap:clamp(30px,4vw,44px)}
  .profile__fig,.profile__text,
  .profile--flip .profile__fig,.profile--flip .profile__text{grid-column:1/-1;order:initial}
  .profile__fig{max-width:430px}
  .profile__desc{max-width:56ch}
}

.fine{margin-top:clamp(44px,5vw,72px);border-top:1px solid var(--line);padding-top:24px;font-size:var(--t-small);line-height:1.85;color:var(--muted);max-width:74ch}

/* ==========================================================================
   07 · REGARD — testimonials
   ========================================================================== */
.regard{background:var(--bone);padding-block:var(--section)}
.regard__score{grid-column:1/5;position:sticky;top:clamp(90px,14vh,150px);align-self:start}
.regard__score b{display:block;font-family:var(--serif);font-size:clamp(3.6rem,7.9vw,6.7rem);font-weight:300;line-height:1;letter-spacing:-.05em}
.regard__score .srcs{margin-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--line);padding-top:18px}
.regard__score .srcs li{font-size:var(--t-small);color:var(--muted);padding:5px 0}
.regard__quotes{grid-column:6/13}
.regard__quotes li{border-top:1px solid var(--line);padding:clamp(26px,3.2vw,44px) 0}
.regard__quotes li:last-child{border-bottom:1px solid var(--line)}
.regard__quotes blockquote{font-family:var(--serif-alt);font-size:clamp(1.08rem,1.6vw,1.42rem);font-weight:400;font-style:italic;line-height:1.5;letter-spacing:-.012em;text-wrap:pretty}
.regard__quotes figcaption{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:var(--t-micro);letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.regard__quotes figcaption i{font-style:normal;color:var(--clay)}
@media (max-width:980px){.regard__score,.regard__quotes{grid-column:1/-1}.regard__score{position:static}}

/* ==========================================================================
   08 · JOURNAL — field notes
   ========================================================================== */
.journal{padding-block:var(--section)}
.note-lead{grid-column:1/8}
.note-lead .kicker,.note__meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:var(--t-micro);letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.note-lead .kicker i,.note__meta i{font-style:normal;color:var(--clay)}
.note-lead h3{font-size:clamp(1.55rem,2.7vw,2.25rem);font-weight:300;letter-spacing:-.026em;line-height:1.07;margin-bottom:clamp(22px,2.6vw,34px)}
.note-lead .prose{color:var(--muted);line-height:1.92;max-width:58ch}
.note-lead .prose > p:first-of-type::first-letter{
  float:left;font-family:var(--serif);font-size:4.1em;line-height:.78;font-weight:300;color:var(--ink);
  padding:.06em .12em 0 0
}
.note-lead .prose p + p{margin-top:1.15em}
.note-aside{grid-column:9/13;align-self:start;border-top:1px solid var(--ink);padding-top:18px}
.note-aside p{font-family:var(--serif-alt);font-size:1.14rem;font-weight:400;font-style:italic;line-height:1.45;letter-spacing:-.012em}
.note-aside span{display:block;margin-top:18px;font-size:var(--t-micro);letter-spacing:.3em;text-transform:uppercase;color:var(--clay)}
.notes{grid-column:1/13;margin-top:clamp(20px,3vw,44px)}
.notes details{border-top:1px solid var(--line)}
.notes details:last-of-type{border-bottom:1px solid var(--line)}
.notes summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  column-gap:clamp(18px,2.6vw,44px);padding:clamp(22px,2.6vw,34px) 0;transition:padding-left .5s var(--ease)
}
.notes summary::-webkit-details-marker{display:none}
.notes summary:hover{padding-left:clamp(6px,1vw,16px)}
.notes summary b{font-size:var(--t-micro);letter-spacing:.28em;color:var(--clay);font-weight:600}
.notes summary h3{font-family:var(--serif-alt);font-size:clamp(1.16rem,1.9vw,1.62rem);font-weight:400;letter-spacing:-.018em;line-height:1.15}
.notes summary h3 span{display:block;font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.notes .sign{position:relative;width:16px;height:16px;flex:0 0 auto;align-self:center}
.notes .sign::before,.notes .sign::after{content:'';position:absolute;background:var(--ink);transition:transform .45s var(--ease),opacity .3s}
.notes .sign::before{left:0;right:0;top:50%;height:1px}
.notes .sign::after{top:0;bottom:0;left:50%;width:1px}
.notes details[open] .sign::after{transform:scaleY(0)}
.notes details[open] summary h3{color:var(--clay)}
.notes .note__body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding-bottom:clamp(30px,3.6vw,52px)}
.notes .note__body .prose{grid-column:4/11;color:var(--muted);line-height:1.92}
.notes .note__body .prose p + p{margin-top:1.1em}
@media (max-width:980px){
  .note-lead,.note-aside,.notes{grid-column:1/-1}
  .note-aside{border-top-color:var(--line)}
  .notes .note__body .prose{grid-column:1/-1}
}

/* ==========================================================================
   09 · ENQUIRY
   ========================================================================== */
.enquiry{background:var(--ink);color:var(--ivory);padding-block:var(--section)}
.enquiry__intro{grid-column:1/6}
.enquiry__form{grid-column:7/13}
@media (max-width:980px){.enquiry__intro,.enquiry__form{grid-column:1/-1}}
.contact-index{margin-top:clamp(34px,4vw,54px)}
.contact-index li{border-top:1px solid var(--line-dark);display:grid;grid-template-columns:minmax(88px,.34fr) 1fr;gap:16px;padding:clamp(13px,1.5vw,17px) 0;align-items:baseline}
.contact-index li:last-child{border-bottom:1px solid var(--line-dark)}
.contact-index span{font-size:var(--t-micro);letter-spacing:.3em;text-transform:uppercase;color:var(--dim-2)}
.contact-index a,.contact-index p{font-size:var(--t-body);color:var(--ivory);letter-spacing:.005em}
.contact-index a{position:relative;display:inline-block}
.contact-index a::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--taupe);transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease)}
.contact-index a:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* form ----------------------------------------------------------------- */
.field{position:relative;padding-top:26px;margin-bottom:clamp(20px,2.4vw,30px)}
.field > label{position:absolute;top:0;left:0;font-size:var(--t-micro);letter-spacing:.3em;text-transform:uppercase;color:var(--dim-2);transition:color .3s}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-dark);
  padding:12px 0;font-size:var(--t-body);color:var(--ivory);outline:none;
  transition:border-color .4s var(--ease);border-radius:0
}
.field textarea{resize:vertical;min-height:96px;line-height:1.75}
.field select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--taupe) 50%),linear-gradient(135deg,var(--taupe) 50%,transparent 50%);background-position:calc(100% - 9px) 21px,calc(100% - 4px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.field select option{background:var(--soot);color:var(--ivory)}
.field input::placeholder,.field textarea::placeholder{color:rgba(246,242,234,.34)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--taupe)}
.field:focus-within > label{color:var(--taupe)}
.field .err{display:block;margin-top:9px;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:#D8A07A;opacity:0;transform:translateY(-3px);transition:opacity .3s,transform .3s}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-bottom-color:#C9784A}
.field.has-error .err{opacity:1;transform:none}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px)}
@media (max-width:560px){.field-row{grid-template-columns:1fr;gap:0}}
.form-submit{width:100%;justify-content:space-between;margin-top:8px}
.form-note{margin-top:18px;font-size:var(--t-small);color:var(--dim-2);line-height:1.7}
.form-alt{display:flex;align-items:center;gap:18px;margin:clamp(28px,3.2vw,40px) 0}
.form-alt i{flex:1;height:1px;background:var(--line-dark)}
.form-alt span{font-size:var(--t-micro);letter-spacing:.34em;text-transform:uppercase;color:var(--dim-2)}
.form-done{border:1px solid var(--line-dark);padding:clamp(32px,4vw,54px);text-align:left}
.form-done h3{font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:300;letter-spacing:-.024em;margin-bottom:16px}
.form-done p{color:var(--dim);font-size:var(--t-small);line-height:1.85;max-width:44ch}
[hidden]{display:none !important}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--ink);color:var(--ivory);border-top:1px solid var(--line-dark);padding-block:clamp(56px,7vw,104px) clamp(24px,3vw,36px)}
.foot__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:clamp(40px,5vw,60px)}
.foot__brand{grid-column:1/5}
.foot__brand .mark img{--mark-h:26px}
.foot__brand p{margin-top:22px;font-size:var(--t-small);line-height:1.9;color:var(--dim);max-width:34ch}
.foot__col{grid-column:span 2}
.foot__col:nth-of-type(2){grid-column:6/9}
.foot__col:nth-of-type(3){grid-column:9/11}
.foot__col:nth-of-type(4){grid-column:11/13}
.foot__col h4{font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.3em;text-transform:uppercase;color:var(--taupe);margin-bottom:22px;font-weight:600}
.foot__col li{padding:6px 0}
.foot__col a,.foot__col p{font-size:var(--t-small);color:var(--dim);transition:color .3s}
.foot__col a:hover{color:var(--ivory)}
.foot__col li span{display:block;font-size:var(--t-micro);letter-spacing:.26em;text-transform:uppercase;color:var(--dim-2);margin-bottom:2px}
@media (max-width:980px){
  .foot__brand{grid-column:1/-1}
  .foot__col,.foot__col:nth-of-type(2),.foot__col:nth-of-type(3),.foot__col:nth-of-type(4){grid-column:span 6}
}
@media (max-width:560px){.foot__col,.foot__col:nth-of-type(2),.foot__col:nth-of-type(3),.foot__col:nth-of-type(4){grid-column:1/-1}}

.foot__sign{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:clamp(56px,7vw,100px);border-top:1px solid var(--line-dark);padding-top:clamp(22px,2.6vw,32px)}
.foot__sign .sigil{flex:0 0 auto;width:clamp(58px,7vw,104px);height:auto;align-self:flex-end;opacity:.16;pointer-events:none;user-select:none}
.foot__legal{font-size:var(--t-micro);letter-spacing:.1em;color:var(--dim-2);line-height:2;text-align:right;max-width:52ch}
.foot__legal .nb{white-space:nowrap}
.foot__legal a{color:var(--dim-2)}
.foot__legal a:hover{color:var(--taupe)}
@media (max-width:760px){.foot__sign{flex-direction:column;align-items:flex-start}.foot__legal{text-align:left}
  /* at 58px and .16 the sigil is a void rather than a mark — drop it */
  .foot__sign .sigil{display:none}}

/* ==========================================================================
   INTERIOR PAGE UTILITIES (property management / privacy)
   ========================================================================== */
.prose-page{grid-column:1/9;grid-row:1}
/* section heads in a long legal document are supporting headings, not
   editorial statements — Playfair, the secondary face. Playfair sets
   optically larger than Cormorant, so the size steps down to match. */
.prose-page h2{font-family:var(--serif-alt);font-size:clamp(1.3rem,2vw,1.72rem);font-weight:400;letter-spacing:-.012em;margin:clamp(44px,5vw,72px) 0 20px}
.prose-page h2:first-child{margin-top:0}
.prose-page h3{font-family:var(--sans);font-size:var(--t-body);font-weight:600;letter-spacing:.01em;margin:32px 0 10px}
.prose-page p,.prose-page li{color:var(--muted);line-height:1.95;font-size:var(--t-small)}
.prose-page p + p{margin-top:1.05em}
.prose-page ul{margin:14px 0 0}
.prose-page ul li{position:relative;padding-left:22px;margin-bottom:9px}
.prose-page ul li::before{content:'';position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--clay)}
.prose-page a{color:var(--clay);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose-toc{grid-column:10/13;grid-row:1;position:sticky;top:clamp(90px,14vh,140px);align-self:start;border-top:1px solid var(--line);padding-top:18px}
.prose-toc li a{display:block;padding:7px 0;font-size:var(--t-small);color:var(--muted);transition:color .3s}
.prose-toc li a:hover{color:var(--clay)}
@media (max-width:980px){.prose-page,.prose-toc{grid-column:1/-1;grid-row:auto}.prose-toc{position:static;order:-1}}

/* FAQ (property management page) */
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:clamp(20px,2.4vw,28px) 0;transition:padding-left .5s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{padding-left:12px}
.faq summary h3{font-family:var(--serif-alt);font-size:clamp(1.04rem,1.55vw,1.3rem);font-weight:400;letter-spacing:-.014em;line-height:1.3}
.faq .sign{position:relative;width:15px;height:15px;flex:0 0 auto}
.faq .sign::before,.faq .sign::after{content:'';position:absolute;background:var(--ink);transition:transform .45s var(--ease)}
.faq .sign::before{left:0;right:0;top:50%;height:1px}
.faq .sign::after{top:0;bottom:0;left:50%;width:1px}
.faq details[open] .sign::after{transform:scaleY(0)}
.faq .ans{padding-bottom:clamp(22px,2.6vw,32px);max-width:70ch;color:var(--muted);font-size:var(--t-small);line-height:1.92}
.faq .ans p + p{margin-top:1em}

/* generic two-column feature list used on interior pages */
.ledger li{border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,36px);padding:clamp(20px,2.4vw,30px) 0}
.ledger li:last-child{border-bottom:1px solid var(--line)}
.ledger b{font-size:var(--t-micro);letter-spacing:.26em;color:var(--clay);font-weight:600;padding-top:.45em}
.ledger h3{font-family:var(--serif-alt);font-size:clamp(1.06rem,1.55vw,1.32rem);font-weight:600;letter-spacing:-.014em;margin-bottom:9px}
.ledger p{font-size:var(--t-small);line-height:1.85;color:var(--muted);max-width:60ch}
.is-dark .ledger li{border-color:var(--line-dark)}
.is-dark .ledger p{color:var(--dim)}
.is-dark .ledger b{color:var(--taupe)}

/* anchor offset under the fixed nav */
[id]{scroll-margin-top:clamp(80px,12vh,124px)}

/* ==========================================================================
   INTERIOR: process steps + closing band
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut);row-gap:clamp(34px,4vw,52px)}
.steps li{border-top:1px solid var(--line);padding-top:clamp(18px,2vw,26px)}
.steps b{display:block;font-family:var(--serif);font-size:clamp(2rem,3.6vw,3.15rem);font-weight:300;line-height:.8;color:#D6CCBA;letter-spacing:-.04em;margin-bottom:clamp(20px,2.4vw,32px);transition:color .6s var(--ease)}
.steps li:hover b{color:var(--clay)}
.steps h3{font-family:var(--serif-alt);font-size:clamp(1.04rem,1.45vw,1.26rem);font-weight:600;letter-spacing:-.014em;margin-bottom:10px}
.steps p{font-size:var(--t-small);line-height:1.85;color:var(--muted)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

.cta{background:var(--ink);color:var(--ivory);padding-block:clamp(84px,11vw,168px);position:relative;overflow:hidden}
.cta__inner{grid-column:1/9}
.cta h2{font-size:clamp(1.9rem,4.3vw,3.6rem);font-weight:300;letter-spacing:-.035em;line-height:1}
.cta h2 em{display:block;color:var(--taupe);padding-left:clamp(0px,6vw,120px)}
.cta__acts{display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(36px,4.4vw,58px)}
.cta__side{grid-column:10/13;align-self:end}
.cta__side li{border-top:1px solid var(--line-dark);padding:clamp(12px,1.4vw,16px) 0}
.cta__side li:last-child{border-bottom:1px solid var(--line-dark)}
.cta__side span{display:block;font-size:var(--t-micro);letter-spacing:.3em;text-transform:uppercase;color:var(--dim-2);margin-bottom:5px}
.cta__side a,.cta__side p{font-size:var(--t-small);color:var(--ivory)}
@media (max-width:900px){.cta__inner,.cta__side{grid-column:1/-1}}

/* phero supporting rail */
.phero__rail{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,72px);border-top:1px solid var(--line-dark);margin-top:clamp(40px,5vw,68px);padding-top:clamp(22px,2.6vw,32px)}
.phero__rail div span{display:block;font-size:var(--t-micro);letter-spacing:.32em;text-transform:uppercase;color:var(--dim-2);margin-bottom:8px}
.phero__rail div p{font-family:var(--serif);font-size:1.1rem;font-weight:400;color:var(--ivory)}
.phero__sub{max-width:46ch;font-size:var(--t-lead);line-height:1.7;color:var(--dim);margin-top:clamp(24px,3vw,36px)}

/* callout blocks inside long-form pages */
.prose-page .callout{border:1px solid var(--line);padding:clamp(22px,2.6vw,32px);margin:26px 0 0;background:var(--bone)}
.prose-page .callout p{font-size:var(--t-small);line-height:1.85}
.prose-page .callout p strong{color:var(--ink);font-weight:600}
.prose-page .callout p + p{margin-top:.35em}