:root{
  --snow:#f7f6f2;
  --snow2:#efede6;
  --pine:#152430;
  --pine2:#1c3040;
  --ink:#131c24;
  --body:#3b444c;
  --fog:#7b848c;
  --cedar:#c08a3e;
  --cedar2:#d9a95f;
  --line:rgba(19,28,36,.15);
  --line2:rgba(19,28,36,.08);
  --wline:rgba(247,246,242,.16);
  --ease:cubic-bezier(.22,1,.36,1);
  --bb:'Bebas Neue',Impact,sans-serif;
  --ns:'Nunito Sans',-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--ns);background:var(--snow);color:var(--ink);
  font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--cedar);color:var(--snow)}

/* ---------- type ---------- */
.bb{font-family:var(--bb);font-weight:400;letter-spacing:.045em;line-height:.95;text-transform:uppercase}
.bb .ced{color:var(--cedar)}
.kick{font-size:.68rem;letter-spacing:.36em;text-transform:uppercase;color:var(--cedar);
  font-weight:700;display:inline-block}
.lede{font-size:1.06rem;color:var(--body);line-height:1.85;font-weight:400}
.outline-word{position:absolute;font-family:var(--bb);text-transform:uppercase;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(19,28,36,.10);letter-spacing:.03em;
  pointer-events:none;user-select:none;white-space:nowrap;z-index:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.8em;font-family:var(--bb);font-size:1rem;
  letter-spacing:.14em;padding:.95em 2.6em .8em;border:1px solid var(--ink);color:var(--ink);
  text-transform:uppercase;transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.btn:hover{background:var(--ink);color:var(--snow)}
.btn.light{border-color:rgba(247,246,242,.6);color:var(--snow)}
.btn.light:hover{background:var(--snow);color:var(--ink);border-color:var(--snow)}
.btn.solid{background:var(--cedar);border-color:var(--cedar);color:var(--snow)}
.btn.solid:hover{background:var(--ink);border-color:var(--ink)}
.wlink{font-family:var(--bb);font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6em;padding-bottom:.3em;position:relative}
.wlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--cedar);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.wlink:hover::after{transform:scaleX(1)}
.wlink .ar{transition:transform .5s var(--ease);color:var(--cedar)}
.wlink:hover .ar{transform:translateX(6px)}

/* ---------- nav ---------- */
header{position:fixed;top:0;left:0;width:100%;z-index:120;
  padding:1.5rem clamp(1.4rem,4vw,3.6rem);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  transition:background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease)}
header.solid{background:var(--snow);padding:.9rem clamp(1.4rem,4vw,3.6rem);box-shadow:0 1px 0 var(--line2)}
.brand{display:flex;align-items:center;gap:.85rem;z-index:2;grid-column:1;justify-self:start}
.brand .mono{width:44px;height:44px;display:block;color:var(--snow);
  transition:color .5s var(--ease),transform .55s var(--ease);
  filter:drop-shadow(0 1px 3px rgba(6,12,18,.55))}
.brand .mono svg{width:100%;height:100%;display:block;overflow:visible}
.brand .mono .mk-frame{fill:rgba(19,28,36,.28);stroke:var(--cedar2);stroke-width:1.5;
  transition:fill .5s var(--ease),stroke .5s var(--ease)}
.brand .mono .mk-inner{stroke:var(--cedar2);stroke-width:.6;opacity:.42;
  stroke-dasharray:118;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease),opacity .5s var(--ease)}
.brand .mono .mk-letters path{stroke:currentColor;stroke-width:2.05;stroke-linecap:square;stroke-linejoin:miter}
.brand .mono .mk-wave{stroke:var(--cedar2);stroke-width:1.15;stroke-linecap:round;opacity:.85;
  transition:transform .6s var(--ease)}
.brand:hover .mono{transform:translateY(-1px)}
.brand:hover .mono .mk-inner{stroke-dashoffset:118;opacity:.85}
.brand:hover .mono .mk-wave{transform:translateX(2px)}
header.solid .brand .mono{color:var(--ink);filter:none}
header.solid .brand .mono .mk-frame{fill:transparent;stroke:var(--cedar)}
header.solid .brand .mono .mk-inner{stroke:var(--cedar)}
header.solid .brand .mono .mk-wave{stroke:var(--cedar)}
@media(prefers-reduced-motion:reduce){
  .brand .mono,.brand .mono .mk-inner,.brand .mono .mk-wave{transition:none}
  .brand:hover .mono .mk-inner{stroke-dashoffset:0}
}
.brand .bt{display:flex;flex-direction:column;line-height:1.05}
.brand .bt .nm{font-family:var(--bb);font-size:1.3rem;letter-spacing:.09em;color:var(--snow);transition:color .5s var(--ease)}
.brand .bt .sub{font-size:.55rem;letter-spacing:.4em;text-transform:uppercase;font-weight:700;
  color:rgba(247,246,242,.75);transition:color .5s var(--ease)}

header.solid .brand .bt .nm{color:var(--ink)}
header.solid .brand .bt .sub{color:var(--fog)}
.navlinks{display:flex;align-items:center;justify-content:center;gap:2.2rem;grid-column:2}
.navlinks a{font-family:var(--bb);font-size:1.04rem;letter-spacing:.14em;color:rgba(247,246,242,.92);
  transition:color .45s var(--ease);position:relative;padding:.3em 0}
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--cedar);
  transform:scaleX(0);transform-origin:center;transition:transform .4s var(--ease)}
.navlinks a:hover::after,.navlinks a.active::after{transform:scaleX(1)}
header.solid .navlinks a{color:var(--ink)}
.navlinks a.active{color:var(--cedar2)}
header.solid .navlinks a.active{color:var(--cedar)}
.navtools{display:flex;align-items:center;justify-content:flex-end;gap:1.5rem;z-index:2;grid-column:3}
.navcta{font-family:var(--bb);font-size:.88rem;letter-spacing:.14em;padding:.75em 1.7em .6em;
  border:1px solid rgba(247,246,242,.6);color:var(--snow);transition:all .45s var(--ease);white-space:nowrap}
.navcta:hover{background:var(--cedar);border-color:var(--cedar);color:var(--snow)}
header.solid .navcta{border-color:var(--ink);color:var(--ink)}
header.solid .navcta:hover{background:var(--cedar);border-color:var(--cedar);color:var(--snow)}

.menutog{display:none;flex-direction:column;gap:5px;width:26px;cursor:pointer;z-index:130}
.menutog span{height:2px;width:100%;background:var(--snow);transition:.4s var(--ease)}
header.solid .menutog span{background:var(--ink)}
body.menuopen .menutog span{background:var(--snow)}
body.menuopen .menutog span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menuopen .menutog span:nth-child(2){opacity:0}
body.menuopen .menutog span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:115;background:var(--pine);display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:.4rem;opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease),visibility .5s var(--ease)}
body.menuopen .drawer{opacity:1;visibility:visible}
.drawer a{font-family:var(--bb);font-size:2.8rem;letter-spacing:.06em;padding:.15rem 0;
  color:var(--snow);position:relative;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s var(--ease)}
.drawer a:hover,.drawer a:focus-visible{color:var(--cedar2)}
.drawer a:active{color:var(--cedar2)}
/* current section reads gold, with a rule under it so it is unmistakable */
.drawer a.active{color:var(--cedar2)}
.drawer a.active::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:.05em;width:2.1em;height:2px;background:var(--cedar2)}
/* the drawer is navy, so the bar above it stays light whatever the scroll state */
body.menuopen header{background:transparent;box-shadow:none}
body.menuopen header .brand .bt .nm{color:var(--snow)}
body.menuopen header .brand .bt .sub{color:rgba(247,246,242,.75)}
body.menuopen header .brand .mono{color:var(--snow)}
body.menuopen header .brand .mono .mk-frame{fill:transparent;stroke:var(--cedar2)}
body.menuopen header .brand .mono .mk-inner{stroke:var(--cedar2)}
body.menuopen header .brand .mono .mk-wave{stroke:var(--cedar2)}
body.menuopen .drawer a{opacity:1;transform:none}
body.menuopen .drawer a:nth-child(1){transition-delay:.08s}
body.menuopen .drawer a:nth-child(2){transition-delay:.14s}
body.menuopen .drawer a:nth-child(3){transition-delay:.2s}
body.menuopen .drawer a:nth-child(4){transition-delay:.26s}
body.menuopen .drawer a:nth-child(5){transition-delay:.32s}
body.menuopen .drawer a:nth-child(6){transition-delay:.38s}
body.menuopen .drawer a:nth-child(7){transition-delay:.44s}

/* ---------- router / reveal ---------- */
.page{display:none}
.page.current{display:block;animation:pagein .8s var(--ease)}
@keyframes pagein{from{opacity:0}to{opacity:1}}
.rv{opacity:0;transform:translateY(38px);filter:blur(7px);
  transition:opacity .95s var(--ease),transform 1.15s var(--ease),filter .8s var(--ease)}
.rv.in{opacity:1;transform:none;filter:none}
.rv-d1{transition-delay:.12s}.rv-d2{transition-delay:.24s}.rv-d3{transition-delay:.36s}

/* ---------- scroll-tied motion ----------
   the engine writes a 0..1 progress value into --p on every [data-sp] element
   as it crosses the viewport, so these read as continuous with the scroll
   rather than firing once at a threshold. .5 is the resting default so the
   layout is correct before the first frame and under reduced motion. */
.rbar{position:fixed;top:0;left:0;height:2px;width:100%;z-index:130;
  background:var(--cedar2);transform:scaleX(var(--rp,0));transform-origin:0 50%;
  will-change:transform;pointer-events:none}
[data-sp]{--p:.5}
.qband img{will-change:transform;
  transform:scale(calc(1.14 - var(--p) * .14)) translate3d(0,calc((var(--p) - .5) * -70px),0)}
.qband .qb-in{will-change:transform;
  transform:translate3d(0,calc((var(--p) - .5) * -54px),0)}
.arow.diffrow .a-img img{will-change:transform;
  transform:scale(calc(1.1 - var(--p) * .1))}
@media(prefers-reduced-motion:reduce){
  .rv{filter:none;transform:none}
  .rbar{display:none}
  .qband img,.qband .qb-in,.arow.diffrow .a-img img{transform:none}
}
.rv-img{overflow:hidden}
.rv-img img{transform:scale(1.12);transition:transform 1.8s var(--ease);will-change:transform}
.rv-img.in img{transform:scale(1)}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;min-height:660px;overflow:hidden;display:flex;
  flex-direction:column;justify-content:flex-end}
.hero-bg{position:absolute;inset:0;background:#0a1016}
.hero-bg img,.hero-bg video{width:100%;height:114%;object-fit:cover;transform:scale(1.07);animation:hkb 16s ease-out forwards}
.hero-bg video{display:block;position:absolute;inset:0;animation:hkb 26s ease-out forwards}
@keyframes hkb{to{transform:scale(1) translateY(-2.5%)}}
@media(prefers-reduced-motion:reduce){.hero-bg video{animation:none;transform:none;height:100%}}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,16,22,.42),rgba(10,16,22,.16) 40%,rgba(10,16,22,.5) 66%,rgba(10,16,22,.72))}
.hero-in{position:relative;z-index:2;color:var(--snow);padding:0 clamp(1.4rem,5vw,4.5rem) clamp(7rem,16vh,12rem)}
.hero-tag{font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;font-weight:700;
  color:var(--snow);margin-bottom:1.2rem;display:flex;align-items:center;gap:1rem;
  text-shadow:0 1px 2px rgba(6,12,18,.9),0 2px 16px rgba(6,12,18,.75)}
.hero-tag::before{content:"";width:44px;height:1.5px;background:var(--snow);
  box-shadow:0 1px 3px rgba(6,12,18,.9)}
.hero h1{font-family:var(--bb);font-size:clamp(3.4rem,11vw,9rem);letter-spacing:.03em;
  line-height:.92;color:var(--snow)}
.hero h1 .row2{display:block;position:relative;color:transparent;font-weight:400;
  -webkit-text-stroke:.0097em rgba(247,246,242,.85)}
.hero h1 .row2::after{content:attr(data-text);position:absolute;left:.018em;top:0;width:100%;
  color:transparent;-webkit-text-stroke:.0097em rgba(247,246,242,.85);pointer-events:none}
.hero-cta{margin-top:clamp(1.6rem,3.5vh,2.6rem)}
.hero-cta .btn{box-shadow:0 12px 34px -14px rgba(6,12,18,.7)}

/* ---------- hero entrance ----------
   line 1 letters rise out of a clipped line-box; line 2's two outline layers
   start apart and converge into the 2.6px offset they hold at rest. */
.hero h1 .l1{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ltr{display:inline-block;transform:translateY(112%);
  animation:heroLtr .95s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes heroLtr{to{transform:none}}
.anim .hero-tag{opacity:0;animation:heroFade .9s var(--ease) .1s forwards}
.anim .hero-tag::before{width:0;animation:heroRule .9s var(--ease) .25s forwards}
@keyframes heroRule{to{width:44px}}
.anim .hero h1 .row2{opacity:0;animation:heroFade .8s var(--ease) var(--r2,.6s) forwards}
.anim .hero h1 .row2::after{animation:heroEcho 1.15s var(--ease) var(--r2,.6s) backwards}
@keyframes heroEcho{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.anim .hero-cta{opacity:0;animation:heroRise 1s var(--ease) var(--cta,1.1s) forwards}
@keyframes heroFade{to{opacity:1}}
@keyframes heroRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .hero h1 .ltr{transform:none;animation:none}
  .anim .hero-tag,.anim .hero h1 .row2,.anim .hero-cta{opacity:1;animation:none}
  .anim .hero-tag::before{width:44px;animation:none}
  .anim .hero h1 .row2::after{animation:none}
}

/* ---------- floating contact widget ---------- */
.fab{position:fixed;right:2.4rem;bottom:2.4rem;z-index:120;display:flex;flex-direction:column;align-items:flex-end;gap:1rem;pointer-events:none}
.fabbtn{width:66px;height:66px;border-radius:50%;padding:0;border:2px solid var(--cedar);background:var(--pine);overflow:hidden;box-shadow:0 10px 30px -8px rgba(6,12,18,.55);transition:transform .4s var(--ease),box-shadow .4s var(--ease);opacity:0;animation:fabup .9s var(--ease) 1.4s forwards;pointer-events:auto;cursor:pointer}
.fabbtn img{width:100%;height:100%;object-fit:cover;object-position:center top}
.fabbtn:hover{transform:scale(1.06);box-shadow:0 14px 34px -8px rgba(6,12,18,.6)}
@keyframes fabup{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}
.fabcard{width:330px;max-width:calc(100vw - 3rem);background:#fff;color:var(--ink);border-radius:20px;box-shadow:0 24px 60px -18px rgba(6,12,18,.5);overflow:hidden;transform-origin:bottom right;transform:scale(.9) translateY(10px);opacity:0;pointer-events:none;transition:transform .38s var(--ease),opacity .38s var(--ease)}
.fab.open .fabcard{transform:none;opacity:1;pointer-events:auto}
.fabcbody{padding:1.7rem 1.6rem 1.2rem;text-align:center;position:relative}
.fabclose{position:absolute;top:1rem;right:1rem;width:34px;height:34px;border-radius:50%;border:none;background:var(--pine);color:var(--snow);font-size:1.15rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s var(--ease)}
.fabclose:hover{background:var(--cedar)}
.fabhead{width:80px;height:80px;border-radius:50%;overflow:hidden;margin:0 auto .8rem;border:1px solid var(--line);box-shadow:0 6px 18px -6px rgba(19,28,36,.35);background:var(--pine)}
.fabhead img{width:100%;height:100%;object-fit:cover;object-position:center top}
.fabname{font-family:var(--bb);font-size:1.35rem;letter-spacing:.08em}
.fabbrk{font-size:.76rem;line-height:1.55;color:var(--fog);margin-top:.35rem;letter-spacing:.03em}
.fabsoc{display:flex;justify-content:center;gap:.75rem;margin-top:.95rem}
.fabsoc a{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.fabsoc a:hover{background:var(--pine);color:var(--snow);border-color:var(--pine)}
.fabsoc svg{width:15px;height:15px;display:block}
.fabacts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.fa-lbl{display:none}
html.is-mobile .fa-num{display:none}
html.is-mobile .fa-lbl{display:inline}
.fabact{display:flex;align-items:center;justify-content:center;gap:.45rem;padding:1.05rem .35rem;font-family:var(--bb);font-size:.84rem;letter-spacing:.04em;white-space:nowrap;color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease)}
.fabact:first-child{border-right:1px solid var(--line)}
.fabact:hover{background:var(--pine);color:var(--snow)}
.fabact svg{width:16px;height:16px;flex:none}

/* ---------- ticker ---------- */
.strip{position:relative;background:var(--pine);color:var(--snow);overflow:hidden;
  padding:1.35rem 0;
  /* hairlines rather than a hard colour break: the band reads as a considered
     rule between sections instead of a stripe dropped on top of one */
  border-top:1px solid rgba(217,169,95,.3);border-bottom:1px solid rgba(217,169,95,.3)}
/* the names dissolve into both edges instead of being sliced off mid-letter */
.strip::before,.strip::after{content:"";position:absolute;top:0;bottom:0;z-index:2;
  width:clamp(56px,11vw,190px);pointer-events:none}
.strip::before{left:0;background:linear-gradient(90deg,var(--pine),rgba(21,36,48,0))}
.strip::after{right:0;background:linear-gradient(270deg,var(--pine),rgba(21,36,48,0))}
.strip .st-track{display:flex;width:max-content;animation:stmq 30s linear infinite}
.strip:hover .st-track{animation-play-state:paused}
@keyframes stmq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.strip .st-set{display:flex;align-items:center;white-space:nowrap}
/* smaller and much wider tracked: the letterspacing is what carries the
   editorial feel, and it lets more of the radius fit on screen at once */
.strip .st-set span{font-family:var(--bb);font-size:1.1rem;letter-spacing:.3em;
  padding:0 2.1rem;color:rgba(247,246,242,.9)}
/* a small gold lozenge sits quieter between names than the filled triangle did */
.strip .st-set .tic{display:block;flex:none;padding:0;font-size:0;
  width:5px;height:5px;background:var(--snow);transform:rotate(45deg)}
@media(max-width:640px){
  .strip{padding:1.05rem 0}
  .strip .st-set span{font-size:.98rem;letter-spacing:.24em;padding:0 1.5rem}
  .strip .st-set .tic{width:4px;height:4px}
}

/* ---------- explore san diego ---------- */
.areas{background:var(--snow2);padding:clamp(4rem,8vw,6rem) clamp(1.4rem,6vw,7rem) clamp(4rem,7vw,5.5rem);
  position:relative;overflow:hidden}
.areas-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.areas .sechead{max-width:none;margin:0}
.areas .sechead h2{font-size:clamp(2.4rem,4.6vw,3.6rem)}
.areas-lede{max-width:600px;margin-top:1.5rem}
.areas-ctl{display:flex;gap:.7rem;flex:none}
.areas-ctl button{width:50px;height:50px;border:1px solid var(--line);background:transparent;color:var(--ink);
  font-size:1.05rem;display:flex;align-items:center;justify-content:center;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),opacity .35s var(--ease)}
.areas-ctl button:hover{background:var(--pine);color:var(--snow);border-color:var(--pine)}
.areas-ctl button[disabled]{opacity:.28;pointer-events:none}
.areas-rail{overflow:hidden;position:relative;margin-top:clamp(2.4rem,4vw,3.4rem);padding-bottom:2.6rem;
  cursor:grab;outline:none}
.areas-rail.drag{cursor:grabbing}
.areas-rail:focus-visible{outline:2px solid var(--cedar);outline-offset:6px}
.areas-track{display:flex;gap:1.4rem;transition:transform .7s var(--ease);align-items:flex-start;
  will-change:transform}
.areas-rail.drag .areas-track{transition:none}
.area{flex:0 0 calc((100% - 4.2rem)/4);position:relative;height:clamp(380px,44vw,500px);overflow:hidden;
  isolation:isolate;display:flex;align-items:flex-end;background:var(--pine);
  transition:transform .6s var(--ease)}
.area:nth-child(even){transform:translateY(2.2rem)}
.area img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:saturate(.8) brightness(.72);transition:filter .7s var(--ease),transform 1.2s var(--ease)}
.area::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(21,36,48,.92),rgba(21,36,48,.15) 62%)}
.area:hover img{filter:saturate(.95) brightness(.85);transform:scale(1.06)}
.areas-rail:not(.drag) .area:hover{transform:translateY(-6px)}
.areas-rail:not(.drag) .area:nth-child(even):hover{transform:translateY(1.85rem)}
.ar-n{position:absolute;top:1.3rem;right:1.4rem;font-family:var(--bb);font-size:2.4rem;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(217,169,95,.75);z-index:1}
.ar-in{position:relative;z-index:1;padding:1.6rem 1.5rem 1.7rem;width:100%}
.ar-in h3{font-size:1.7rem;letter-spacing:.05em;color:var(--snow)}
.ar-in h3::after{content:"";display:block;width:30px;height:2px;background:var(--cedar2);
  margin:.7rem 0 .8rem;transition:width .5s var(--ease)}
.area:hover .ar-in h3::after{width:58px}
.ar-in p{font-size:.86rem;line-height:1.7;color:rgba(247,246,242,.78);
  max-height:0;opacity:0;overflow:hidden;transition:max-height .55s var(--ease),opacity .45s var(--ease)}
.area:hover .ar-in p{max-height:8rem;opacity:1}
.ar-go{display:flex;align-items:center;gap:.5rem;margin-top:.9rem;font-family:var(--bb);
  font-size:.85rem;letter-spacing:.14em;color:var(--cedar2)}
.ar-go::after{content:"\2192";transition:transform .4s var(--ease)}
.area:hover .ar-go::after{transform:translateX(6px)}
.areas-bar{height:2px;background:var(--line);position:relative;margin-top:.4rem}
.areas-bar span{position:absolute;left:0;top:0;height:100%;width:0;background:var(--cedar);
  transition:width .6s var(--ease),transform .6s var(--ease)}
.areas-side{display:none}
@media(max-width:1080px){
  .area{flex:0 0 calc((100% - 1.4rem)/2)}
}
@media(max-width:640px){
  .areas-ctl{display:none}
  .area{flex:0 0 100%;height:clamp(340px,72vw,420px)}
  .area:nth-child(even){transform:none}
  .areas-rail:not(.drag) .area:hover,.areas-rail:not(.drag) .area:nth-child(even):hover{transform:none}
  .areas-rail{padding-bottom:0}
  .ar-in p{max-height:8rem;opacity:1}
  .areas-side{display:flex;position:absolute;top:50%;transform:translateY(-50%);z-index:4;
    width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--wline);
    background:rgba(21,36,48,.6);color:var(--snow);font-size:1rem}
  .areas-side[disabled]{opacity:.25;pointer-events:none}
  .areas-side-l{left:.7rem}
  .areas-side-r{right:.7rem}
}
@media(prefers-reduced-motion:reduce){
  .areas-track,.area,.area img{transition:none}
}

/* ---------- generic ---------- */
.sec{padding:clamp(5rem,10vw,8.5rem) clamp(1.4rem,6vw,7rem);position:relative}
/* the stat strip already reads as a divider, so the section under it does not
   need a full pad above its kicker as well */
.herovp + .sec{padding-top:clamp(3rem,5.5vw,4.4rem)}
.phero + .sec{padding-top:clamp(3rem,5.5vw,4.6rem)}
/* ---------- navy section theme ---------- */
.sec.navy{background:var(--pine);color:rgba(247,246,242,.82)}
.sec.navy .kick{color:var(--cedar2)}
.sec.navy h2,.sec.navy h3,.sec.navy h4{color:var(--snow)}
.sec.navy .ced{color:var(--cedar2)}
.sec.navy .lede,.sec.navy .sechead p{color:rgba(247,246,242,.8)}
.sec.navy .val{background:var(--pine2);color:rgba(247,246,242,.78)}
.sec.navy .val:hover{background:#22384a}
.sec.navy .vals{background:var(--wline)}
.sec.navy .val p{color:rgba(247,246,242,.72)}
.sec.navy .val .vn,.sec.navy .pritem .pnum{-webkit-text-stroke-color:var(--cedar2)}
.sec.navy .pritem{border-top-color:var(--wline)}
.sec.navy .pritem:last-child{border-bottom-color:var(--wline)}
.sec.navy .pritem p{color:rgba(247,246,242,.72)}
.sec.navy .pritem .tag{color:var(--cedar2)}
.sec.navy .incl{background:var(--wline);border-color:var(--wline)}
.sec.navy .incl .ic{background:var(--pine2)}
.sec.navy .incl .ic p{color:rgba(247,246,242,.72)}
.sec.navy .chips span{background:transparent;border-color:var(--wline);color:rgba(247,246,242,.9)}
.sec.navy .chips span:hover{border-color:var(--cedar2);color:var(--cedar2)}
.sec.navy .tickl li{color:rgba(247,246,242,.8)}
.sec.navy .ai{border-color:var(--wline)}
.sec.navy .ai:last-child{border-color:var(--wline)}
.sec.navy .aq{color:var(--snow)}
.sec.navy .aa .inner{color:rgba(247,246,242,.75)}
.sec.navy + .board,.sec.navy + .backed{border-top:1px solid var(--wline)}
.wrap{max-width:1280px;margin:0 auto;position:relative;z-index:1}
.center{text-align:center}
.sechead{max-width:760px;margin:0 auto}
.sechead .kick{margin-bottom:1.3rem}
.sechead h2{font-size:clamp(2.6rem,5.6vw,4.4rem)}

/* ---------- how i can help ---------- */
.help{padding-top:clamp(3rem,5.5vw,4.6rem)}
.help .sechead{max-width:920px;margin:0}
.help .sechead .lede{max-width:640px;margin-top:1.5rem}
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--wline);
  border:1px solid var(--wline);margin-top:clamp(3rem,6vw,4.6rem)}
.svc{background:var(--pine);display:flex;flex-direction:column;position:relative;
  transition:background .45s var(--ease)}
.svc:hover{background:var(--pine2)}
.svc-img{aspect-ratio:4/3;overflow:hidden;position:relative}
.svc-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,36,48,.28),rgba(21,36,48,.78));
  transition:opacity .5s var(--ease)}
.svc:hover .svc-img::after{opacity:.65}
.svc-img img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);filter:saturate(.85)}
.svc:hover .svc-img img{transform:scale(1.06)}
.svc-in{padding:clamp(1.7rem,2.6vw,2.3rem);display:flex;flex-direction:column;flex:1;position:relative}
.svc-n{position:absolute;top:-1.55em;right:clamp(1.7rem,2.6vw,2.3rem);font-family:var(--bb);
  font-size:2.9rem;line-height:1;color:transparent;-webkit-text-stroke:1px var(--cedar2);opacity:.85}
.svc-in h3{font-size:1.85rem;letter-spacing:.05em;color:var(--snow)}
.svc-in h3::after{content:"";display:block;width:34px;height:2px;background:var(--cedar);
  margin:.85rem 0 1rem;transition:width .5s var(--ease)}
.svc:hover .svc-in h3::after{width:64px}
.svc-in p{font-size:.95rem;line-height:1.75;color:rgba(247,246,242,.72);flex:1}
.svc-go{margin-top:1.6rem;font-family:var(--bb);font-size:.95rem;letter-spacing:.14em;
  color:var(--cedar2);display:flex;align-items:center;gap:.6rem}
.svc-go::after{content:"→";transition:transform .4s var(--ease)}
.svc:hover .svc-go::after{transform:translateX(6px)}
.sec:not(.navy) .svcs{background:transparent;border:0;gap:1.5rem}
@media(max-width:900px){
  .svcs{grid-template-columns:1fr}
  .svc-img{aspect-ratio:16/7}
}

/* ---------- intro split ---------- */
.intro{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2.5rem,7vw,6.5rem);align-items:center}
.intro .por{position:relative}
.intro .por .frame{overflow:hidden;aspect-ratio:3/3.4;position:relative;background:var(--pine)}
.intro .por .frame img{width:100%;height:100%;object-fit:cover;object-position:top center}
.intro .por .frame.nophoto img{display:none}
.intro .por .frame.nophoto::after{content:"AB";position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--bb);font-size:7rem;color:var(--cedar);letter-spacing:.1em}
.intro .por::after{content:"";position:absolute;right:-1.3rem;bottom:-1.3rem;width:60%;height:60%;
  border:1.5px solid var(--cedar);z-index:-1}
.intro .itxt h2{font-size:clamp(2.4rem,5vw,3.9rem);margin:1.1rem 0 1.5rem}
.intro .itxt p{margin-bottom:1.25rem;color:var(--body);max-width:540px}
.intro .introcta{display:flex;gap:1rem;margin-top:2rem;padding-top:1.8rem;
  border-top:1px solid var(--line);flex-wrap:wrap;align-items:center}
.intro .introcta .dre{flex-basis:100%;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--fog);margin-top:.6rem}

/* ---------- stats board ---------- */
.board{background:var(--pine);color:var(--snow);position:relative;overflow:hidden}
.board .outline-word{-webkit-text-stroke-color:rgba(247,246,242,.07);font-size:clamp(8rem,22vw,19rem);
  right:-2%;top:-4%}
.board-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.board .bc{padding:clamp(2.6rem,5vw,4.2rem) 1.6rem;text-align:center;position:relative}
.board .bc + .bc::before{content:"";position:absolute;left:0;top:24%;height:52%;width:1px;background:var(--wline)}
.board .bc .n{font-family:var(--bb);font-size:clamp(3rem,6.5vw,5.2rem);letter-spacing:.02em;line-height:1;
  color:var(--snow);margin-bottom:.6rem}
.board .bc .n .ced{color:var(--cedar2)}
.board .bc .l{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:rgba(247,246,242,.65)}
.board .foot{border-top:1px solid var(--wline);text-align:center;padding:1.2rem;font-size:.78rem;
  color:rgba(247,246,242,.55);letter-spacing:.06em;font-style:italic}

/* ---------- listings ---------- */
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.3rem,2.6vw,2.2rem);margin-top:3.5rem}
.lcard{cursor:pointer;background:#fff;border:1px solid var(--line2);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.lcard:hover{transform:translateY(-6px);box-shadow:0 24px 48px -24px rgba(19,28,36,.35)}
.lcard .li{overflow:hidden;position:relative;aspect-ratio:4/3}
.lcard .li img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.lcard:hover .li img{transform:scale(1.07)}
.lcard .li .stt{position:absolute;top:1rem;left:1rem;font-family:var(--bb);font-size:.82rem;
  letter-spacing:.12em;background:var(--cedar);color:var(--snow);padding:.45em 1em .3em}
.lcard .li .stt.sold{background:var(--pine)}
.lcard .lm{padding:1.4rem 1.5rem 1.6rem}
.lcard .lm h3{font-family:var(--bb);font-size:1.5rem;letter-spacing:.05em;margin-bottom:.15rem}
.lcard .lm .loc{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;font-weight:700;color:var(--fog);margin-bottom:.8rem}
.lcard .lm .pr{font-family:var(--bb);font-size:1.35rem;letter-spacing:.04em;color:var(--cedar)}
.lcard .lm .specs{display:flex;gap:1.3rem;margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line2);
  font-size:.78rem;color:var(--fog)}

/* ---------- parallax bands ---------- */
.px{position:absolute;inset:-14% 0;z-index:0;will-change:transform}
.px img{width:100%;height:100%;object-fit:cover}
.band{position:relative;min-height:86vh;display:flex;align-items:center;overflow:hidden;color:var(--snow)}
.band::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,16,22,.68),rgba(10,16,22,.24))}
.band .b-in{position:relative;z-index:2;padding:clamp(4rem,8vw,7rem) clamp(1.4rem,6vw,7rem);max-width:860px}
.band .b-in h2{font-size:clamp(2.6rem,6vw,4.8rem);color:var(--snow);margin-bottom:1.4rem}
.band .b-in h2 .row2{color:transparent;-webkit-text-stroke:.0125em rgba(247,246,242,.8);display:block}
.band .b-in p{color:rgba(247,246,242,.92);font-size:1.06rem;line-height:1.85;max-width:560px;margin-bottom:2.2rem}

/* ---------- promise list ---------- */
.pritem{display:grid;grid-template-columns:96px 1fr auto;gap:clamp(1.2rem,3.5vw,2.6rem);align-items:center;
  padding:2rem .4rem;border-top:1px solid var(--line)}
.pritem:last-child{border-bottom:1px solid var(--line)}
.pritem .pnum{font-family:var(--bb);font-size:2.6rem;color:transparent;-webkit-text-stroke:1.2px var(--cedar);letter-spacing:.03em;line-height:1}
.pritem h4{font-family:var(--bb);font-size:1.65rem;letter-spacing:.06em;margin-bottom:.35rem}
.pritem p{color:var(--body);max-width:640px;font-size:.97rem}
.pritem .tag{font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;font-weight:700;
  color:var(--fog);white-space:nowrap;align-self:center}

/* ---------- testimonials ---------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.3rem,2.8vw,2.2rem);margin-top:3.5rem}
.tcard{background:#fff;border:1px solid var(--line2);padding:clamp(1.8rem,3.2vw,2.6rem);display:flex;flex-direction:column}
.tcard .stars{color:var(--cedar);letter-spacing:.25em;margin-bottom:1.2rem;font-size:.85rem}
.tcard .tq{font-size:.98rem;line-height:1.8;color:var(--body);margin-bottom:1.6rem;flex:1}
.tcard .tn{font-family:var(--bb);font-size:1.05rem;letter-spacing:.1em}
.tcard .tl{font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--fog)}
/* ---------- rotating quotes ---------- */
.qslide{position:relative;min-height:260px;max-width:920px;margin:3rem auto 0;display:flex;align-items:center;justify-content:center}
.qt{position:absolute;inset:0;opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);pointer-events:none;display:flex;align-items:center;justify-content:center}
.qt.on{opacity:1;transform:none;pointer-events:auto}
.qt blockquote{font-family:var(--ns);font-weight:300;font-size:clamp(1.35rem,2.9vw,2.05rem);line-height:1.5;letter-spacing:.005em;color:var(--ink);text-align:center;margin:0;max-width:880px}
.qmark{font-family:var(--bb);font-size:clamp(3.4rem,7vw,5rem);line-height:.6;color:var(--cedar);display:block;margin-bottom:1.1rem}
.qdots{display:flex;gap:.7rem;justify-content:center;margin-top:2.8rem}
.qdots button{width:2.6rem;height:2px;background:var(--line);border:none;padding:0;cursor:pointer;transition:background .4s var(--ease)}
.qdots button.on{background:var(--cedar)}
.sec.navy .qt blockquote{color:var(--snow)}
.sec.navy .qmark{color:var(--cedar2)}
.sec.navy .qdots button{background:var(--wline)}
.sec.navy .qdots button.on{background:var(--cedar2)}

/* ---------- CTA band ---------- */
.ctaband{position:relative;overflow:hidden;text-align:center;color:var(--snow);padding:clamp(5.5rem,11vw,9rem) 1.5rem}
.ctaband::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(10,16,22,.58)}
.ctaband .cb{position:relative;z-index:2;max-width:780px;margin:0 auto}
.ctaband h2{font-size:clamp(2.8rem,6.5vw,5rem);color:var(--snow);margin-bottom:1.2rem}
.ctaband p{color:rgba(247,246,242,.9);margin-bottom:2.4rem;font-size:1.05rem;line-height:1.8}

/* ---------- page hero ---------- */
.phero{position:relative;min-height:clamp(620px,94vh,960px);display:flex;align-items:flex-end;overflow:hidden}
/* the inner heroes no longer carry a gold kicker above the heading. the copy is
   bottom-aligned, so dropping it would have left the heading exactly where it
   was: this pad puts back the height the kicker occupied, lifting the heading. */
:root{--kickpad:2.15rem}
/* about, faq and the blog index run the full viewport like the homepage does.
   they used to be lifted by 149px - 6vh so their headings lined up with the
   buy/sell heroes, which sit above a stat strip. at full height there is no
   line to hold any more, and they carry a cta button the others do not. */
/* svh, like .herovp already uses: on a phone 100vh is the address-bar-collapsed
   height, so the cta gets pushed under the bar until the user scrolls */
.phero.full{min-height:100vh;min-height:100svh}
.phero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,16,22,.44),rgba(10,16,22,.16) 34%,rgba(10,16,22,.58) 64%,rgba(10,16,22,.84))}
.phero .ph-in{position:relative;z-index:2;color:var(--snow);
  padding:clamp(122px,17vh,178px) clamp(1.4rem,6vw,7rem)
          calc(clamp(2.8rem,6vw,4.6rem) + var(--kickpad));max-width:1080px}
.phero h1{font-size:clamp(3rem,8vw,6.4rem);color:var(--snow)}
.phero h1 .row2{display:block;position:relative;color:transparent;font-weight:400;
  -webkit-text-stroke:.0117em rgba(247,246,242,.85)}
.phero h1 .row2::after{content:attr(data-text);position:absolute;left:.0215em;top:0;width:100%;
  color:transparent;-webkit-text-stroke:.0117em rgba(247,246,242,.85);pointer-events:none}
.phero p{color:rgba(247,246,242,.92);max-width:560px;font-size:1.02rem;line-height:1.8;margin-top:1rem}
.phero .ph-cta{margin-top:2.2rem}
@media(max-width:640px){.phero .ph-cta{margin-top:1.8rem}}

/* ---------- split rows ---------- */
.arow{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,6vw,6rem)}
.arow.flip .a-txt{order:2}
.arow .a-img{overflow:hidden;aspect-ratio:4/3.1}
.arow .a-img img{width:100%;height:100%;object-fit:cover}
.arow .a-txt h3{font-size:clamp(2.2rem,4.4vw,3.4rem);margin:1rem 0 1.3rem}
.arow .a-txt p{color:var(--body);margin-bottom:1.2rem;max-width:500px}
.arow + .arow{margin-top:clamp(4rem,7vw,6rem)}
/* the difference rows carry a portrait, so let the frame run the full height of
   the copy beside it instead of holding a fixed 4:3.1 box */
.arow.diffrow{align-items:stretch}
/* the frame carries no intrinsic height of its own: the image is taken out of
   flow so the grid row is sized by the copy column, and the portrait crops to
   fit rather than stretching the row to its own 3:4 proportions. */
.arow.diffrow .a-img{aspect-ratio:auto;position:relative;min-height:420px}
.arow.diffrow .a-img img{position:absolute;inset:0;object-position:center top}
.arow.diffrow .a-txt{display:flex;flex-direction:column;justify-content:center}
@media(max-width:860px){
  .arow.diffrow .a-img{aspect-ratio:4/3.1;min-height:0}
  .arow.diffrow .a-img img{position:static}}

/* ---------- timeline ---------- */
.tl{max-width:860px;margin:3.5rem auto 0;position:relative;padding-left:2.2rem}
.tlitem{position:relative;padding:0 0 2.6rem 1.8rem}
.tlitem:last-child{padding-bottom:0}
/* dot: 18px overall (13px core + 2.5px ring each side), so its centre sits 9px in and 15px down */
.tlitem::before{content:"";position:absolute;left:-2.2rem;top:6px;width:13px;height:13px;
  background:var(--snow);border:2.5px solid var(--cedar);border-radius:50%;z-index:1}
/* one segment per item, drawn dot-centre to dot-centre, so the run ends on the last dot */
.tlitem::after{content:"";position:absolute;left:calc(-2.2rem + 9px);top:15px;bottom:-15px;
  width:1.5px;transform:translateX(-50%);background:var(--line)}
.tlitem:last-child::after{display:none}
/* fade only: a translate would slide the dots off the connector line */
.tlitem.rv{transform:none}
.tlitem .yr{font-family:var(--bb);font-size:1.6rem;letter-spacing:.08em;color:var(--cedar)}
.tlitem h4{font-family:var(--bb);font-size:1.35rem;letter-spacing:.06em;margin:.2rem 0 .4rem}
.tlitem p{color:var(--body);max-width:600px;font-size:.97rem}
.sec.navy .tlitem::after{background:rgba(217,169,95,.42)}
.sec.navy .tlitem::before{background:var(--pine);border-color:var(--cedar2);
  box-shadow:0 0 0 4px rgba(217,169,95,.14)}
.sec.navy .tlitem .yr{color:var(--cedar2)}
.sec.navy .tlitem p{color:rgba(247,246,242,.8)}

/* ---- float section: centred column with parallaxed photos hanging off both edges ---- */
.floats{overflow:hidden;isolation:isolate}
.floats .wrap{position:relative;z-index:2}
.floats .tl{max-width:36rem;padding-left:2.6rem}
.floats .tlitem p{max-width:none}
.fimg{position:absolute;z-index:1;object-fit:cover;object-position:center;
  width:clamp(240px,24vw,400px);height:clamp(340px,34vw,540px);
  /* no transition: the offset is written every frame from a smoothing loop, and
     a css transition on top of that fought the scroll and read as stutter */
  box-shadow:0 30px 70px -24px rgba(19,28,36,.42);
  will-change:transform;backface-visibility:hidden}
.fimg.fl{left:-7rem}
.fimg.fr{right:-7rem}
@media(max-width:991px){.fimg{display:none}
  .floats .tl{max-width:860px;padding-left:2.2rem}}
@media(prefers-reduced-motion:reduce){.fimg{transform:none !important}}

/* ---------- values ---------- */
/* ---------- full-bleed quote band ---------- */
.qband{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(380px,52vh,560px);display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:clamp(3.4rem,7vw,6rem) clamp(1.3rem,6vw,7rem)}
/* bled 70px past each edge: the scroll-tied lift below moves this image by up
   to 35px, and at inset:0 that uncovered a grey strip along the bottom. */
.qband img{position:absolute;left:0;top:-70px;width:100%;height:calc(100% + 140px);
  object-fit:cover;z-index:-2}
/* the navy wash keeps the outlined type legible over any part of the photo */
/* the copy is centred now, so the wash has to be even across the frame rather
   than weighted to the left edge it used to sit against */
.qband::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(19,28,36,.62),rgba(19,28,36,.78))}
.qband .qb-in{max-width:52rem}
.qband blockquote{font-family:var(--bb);font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.12;
  letter-spacing:.03em;color:var(--snow);margin:0}
.qband blockquote .ced{color:var(--cedar2)}
.qband .qb-by{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:1.8rem;
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;font-weight:700;
  color:rgba(247,246,242,.72)}
.qband .qb-by::before{content:"";width:38px;height:1.5px;background:var(--cedar2);flex:none}
@media(max-width:640px){.qband{min-height:clamp(300px,60vh,420px)}
  .qband::after{background:linear-gradient(180deg,rgba(19,28,36,.72),rgba(19,28,36,.88))}
  /* the rule before the byline eats a third of a phone's line width when the
     name wraps, so stack it under the attribution instead */
  .qband .qb-by{flex-direction:column;gap:.7rem}}

.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line2);
  border:1px solid var(--line2);margin-top:3.5rem}
.val{background:var(--snow);padding:clamp(2rem,3.6vw,3rem);transition:background .5s var(--ease)}
.val:hover{background:#fff}
.val .vn{font-family:var(--bb);font-size:2rem;color:transparent;-webkit-text-stroke:1.2px var(--cedar);
  letter-spacing:.04em;line-height:1;margin-bottom:1.1rem}
.val h3{font-family:var(--bb);font-size:1.4rem;letter-spacing:.07em;margin-bottom:.7rem}
.val p{color:var(--body);font-size:.94rem;line-height:1.75}

/* ---------- backed banner ---------- */
.backed{background:var(--pine);color:var(--snow);padding:clamp(3.5rem,7vw,5.5rem) clamp(1.4rem,6vw,7rem);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
/* width tracks the wordmark box it replaced (423px wide at a 960px viewport) */
.backed .blogo{display:block;width:clamp(240px,44vw,430px);max-width:100%;height:auto}
.backed p{color:rgba(247,246,242,.85);max-width:720px;font-size:1rem;line-height:1.85}
.backed p b{color:var(--snow);font-weight:700}

/* ---------- accordion ---------- */
.acc{max-width:880px;margin:0 auto}
.ai{border-top:1px solid var(--line)}
.ai:last-child{border-bottom:1px solid var(--line)}
.aq{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1.7rem .2rem;font-family:var(--bb);font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:.05em;color:var(--ink)}
.aq .ico{position:relative;width:16px;height:16px;flex-shrink:0}
.aq .ico::before,.aq .ico::after{content:"";position:absolute;background:var(--cedar);transition:transform .45s var(--ease)}
.aq .ico::before{top:50%;left:0;width:100%;height:2px;transform:translateY(-50%)}
.aq .ico::after{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
.ai.open .aq .ico::after{transform:translateX(-50%) scaleY(0)}
.aa{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.aa .inner{padding:0 .2rem 1.8rem;color:var(--body);line-height:1.85;max-width:740px}

/* ---------- guide: promise strip ---------- */
.herovp{height:100vh;height:100svh;display:flex;flex-direction:column}
.herovp .phero{flex:1 1 auto;min-height:0}
.pstrip{display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--pine);color:rgba(247,246,242,.82)}
.pstrip .ps{padding:clamp(1.9rem,3.4vw,2.9rem) clamp(1.1rem,2.4vw,2rem);position:relative}
.pstrip .ps + .ps::before{content:"";position:absolute;left:0;top:26%;height:48%;width:1px;background:var(--wline)}
.pstrip .ps b{display:block;font-family:var(--bb);font-size:clamp(1.35rem,2.4vw,1.85rem);
  letter-spacing:.06em;font-weight:400;line-height:1.05;margin-bottom:.55rem;color:var(--snow)}
.pstrip .ps span{display:block;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  font-weight:700;color:var(--cedar2)}

/* ---------- guide: tick list ---------- */
.tickl{list-style:none;margin-top:2rem;display:grid;gap:1rem}
.tickl li{position:relative;padding-left:2.1rem;color:var(--body);font-size:.99rem;line-height:1.75}
.tickl li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:6px;
  border-left:2px solid var(--cedar);border-bottom:2px solid var(--cedar);transform:rotate(-45deg)}

/* ---------- guide: audience chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.6rem;justify-content:center}
.chips span{border:1px solid var(--line);padding:.7em 1.25em .58em;font-family:var(--bb);
  font-size:.95rem;letter-spacing:.09em;color:var(--ink);background:var(--snow);
  transition:border-color .4s var(--ease),color .4s var(--ease)}
.chips span:hover{border-color:var(--cedar);color:var(--cedar)}

/* ---------- guide: included grid ---------- */
.incl{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line2);
  border:1px solid var(--line2);margin-top:3rem}
.incl .ic{background:var(--snow);padding:clamp(1.5rem,2.6vw,2.1rem)}
.incl .ic h4{font-family:var(--bb);font-size:1.12rem;letter-spacing:.06em;margin-bottom:.55rem}
.incl .ic p{color:var(--body);font-size:.88rem;line-height:1.7}

/* ---------- book ---------- */
/* stretch so the info column ends level with the scheduler card */
/* start-aligned so the info column keeps its own height: stretching it meant the
   contact rows got shoved down every time the scheduler grew a taller step.
   sticky keeps it in view while the questions step scrolls past it. */
.bookgrid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.binfo{display:flex;flex-direction:column;position:sticky;top:104px}
.binfo h2{font-size:clamp(2.6rem,5vw,4rem);margin:1rem 0 1.4rem}
.binfo p{color:var(--body);margin-bottom:1.6rem;max-width:460px;line-height:1.85}
/* the paragraph's own bottom margin stacked on top of the rule's margin, so the
   gap above the hairline was reading as two gaps. the rule owns that space now. */
.binfo p:last-of-type{margin-bottom:0}
.contactrow{display:flex;flex-direction:column;margin-top:2.6rem;padding-top:1.9rem;border-top:1px solid var(--line)}
.cr{display:flex;align-items:center;gap:1.15rem;padding:.78rem 0;border-bottom:1px solid var(--line2)}
.cr:last-child{border-bottom:none;padding-bottom:0}
/* square hairline tile, to match the site's cornered vocabulary */
.cr .ic{width:42px;height:42px;flex:none;border:1px solid var(--line);color:var(--cedar);
  display:flex;align-items:center;justify-content:center;transition:border-color .35s var(--ease)}
.cr .ic svg{width:18px;height:18px}
.cr:hover .ic{border-color:var(--cedar)}
.cr .k{font-size:.55rem;letter-spacing:.28em;text-transform:uppercase;color:var(--fog);font-weight:700;display:block;margin-bottom:.2rem}
.cr .v{font-family:var(--bb);font-size:1.35rem;letter-spacing:.05em;color:var(--ink)}
.cr .v a{color:inherit;transition:color .3s var(--ease)}
.cr .v a:hover{color:var(--cedar)}
.form{background:#fff;padding:clamp(2rem,4vw,3.2rem);border:1px solid var(--line2)}
.field{margin-bottom:1.5rem}
.field label{display:block;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--fog);font-weight:700;margin-bottom:.6rem}
.field input,.field select,.field textarea{width:100%;background:transparent;border:none;
  border-bottom:1.5px solid var(--line);padding:.65rem 0;font-family:var(--ns);font-size:1rem;
  color:var(--ink);transition:border-color .4s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cedar)}
.field textarea{resize:vertical;min-height:90px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.form .btn{width:100%;justify-content:center;margin-top:.4rem}
.formok{text-align:center;padding:3rem 1rem;display:none}
.formok.show{display:block;animation:pagein .7s var(--ease)}
.formok .chk{width:64px;height:64px;border:2px solid var(--cedar);border-radius:50%;margin:0 auto 1.6rem;
  display:flex;align-items:center;justify-content:center;color:var(--cedar)}
.formok h3{font-family:var(--bb);font-size:2.2rem;letter-spacing:.06em;margin-bottom:.8rem}
.formok p{color:var(--fog)}

/* ---------- scheduler ---------- */
.sched{background:#fff;border:1px solid var(--line2);border-top:3px solid var(--cedar);
  padding:clamp(1.8rem,3vw,2.9rem);min-height:540px}
.sstep{display:none}
.sstep.current{display:block;animation:schedIn .55s var(--ease)}
@keyframes schedIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sched :focus{outline:none}
.sched :focus-visible{outline:2px solid var(--cedar2);outline-offset:2px}
.sched-h{font-family:var(--bb);font-size:2rem;letter-spacing:.06em;color:var(--ink);line-height:1}
.sched-sub{font-size:.9rem;color:var(--fog);margin:.5rem 0 1.7rem}
.step-back{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--bb);font-size:.8rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fog);margin-bottom:1.4rem;
  background:none;border:none;cursor:pointer;transition:color .3s var(--ease)}
.step-back:hover{color:var(--cedar)}
/* calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.3rem}
.cal-title{font-family:var(--bb);font-size:1.4rem;letter-spacing:.08em;color:var(--ink)}
.cal-nav{width:42px;height:42px;border:1px solid var(--line);background:none;color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.cal-nav:hover:not(:disabled){border-color:var(--cedar);color:var(--cedar)}
.cal-nav:disabled{opacity:.28;cursor:not-allowed}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem;margin-bottom:.6rem}
.cal-dow span{text-align:center;font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fog);font-weight:700}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem}
.cal-cell{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  font-family:var(--bb);font-size:1.15rem;letter-spacing:.04em;color:var(--ink);
  border:1px solid transparent;background:none;transition:all .22s var(--ease);cursor:pointer}
.cal-cell.empty{cursor:default;pointer-events:none}
.cal-cell.disabled{color:var(--fog);opacity:.4;cursor:not-allowed;pointer-events:none}
.cal-cell.selectable:hover{background:var(--snow2)}
.cal-cell.today{border-color:var(--ink);font-weight:700}
.cal-cell.picked{background:var(--pine);color:var(--snow);border-color:var(--pine)}
.cal-tz{margin-top:1.6rem;display:flex;align-items:center;justify-content:center;gap:.7rem}
.cal-tz label{font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fog);font-weight:700}
.cal-tz-wrap{position:relative}
.cal-tz select{appearance:none;-webkit-appearance:none;border:1px solid var(--line);background:#fff;
  color:var(--ink);font-family:var(--ns);font-size:.82rem;padding:.5rem 2rem .5rem .8rem;
  cursor:pointer;transition:border-color .3s var(--ease)}
.cal-tz select:hover,.cal-tz select:focus{border-color:var(--cedar)}
.cal-tz-wrap::after{content:"";position:absolute;right:.8rem;top:50%;width:6px;height:6px;
  border-right:1.5px solid var(--fog);border-bottom:1.5px solid var(--fog);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
/* time slots */
/* fixed viewport: extra slots scroll inside the card instead of stretching it */
.slot-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;
  max-height:298px;overflow-y:auto;padding-right:.5rem;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;overscroll-behavior:contain}
.slot-grid::-webkit-scrollbar{width:5px}
.slot-grid::-webkit-scrollbar-track{background:transparent}
.slot-grid::-webkit-scrollbar-thumb{background:var(--line)}
.slot-grid::-webkit-scrollbar-thumb:hover{background:var(--cedar)}
/* a soft fade cues that the list keeps going */
/* the grid's old bottom margin collapsed out of this wrapper, so the overlay's
   bottom edge landed 27px above the list and cut a hard white line across the
   last row. the gap lives on the wrapper now and the fade sits flush at bottom:0. */
.slot-wrap{position:relative;margin-bottom:1.7rem}
.slot-wrap::after{content:"";position:absolute;left:0;right:.5rem;bottom:0;height:34px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff);pointer-events:none}
.slot{border:1px solid var(--line);background:none;color:var(--ink);padding:.92rem;
  font-family:var(--bb);font-size:1.05rem;letter-spacing:.06em;cursor:pointer;transition:all .22s var(--ease)}
.slot:hover{border-color:var(--cedar)}
.slot.picked{border-color:var(--cedar);color:var(--cedar);background:rgba(192,138,62,.07)}
.sched-next{width:100%;padding:1.05rem;background:var(--pine);color:var(--snow);
  font-family:var(--bb);font-size:.85rem;letter-spacing:.28em;text-transform:uppercase;
  border:none;cursor:pointer;transition:all .35s var(--ease)}
.sched-next:disabled{background:var(--snow2);color:var(--fog);cursor:not-allowed}
.sched-next:not(:disabled):hover{background:var(--cedar);color:#fff}
/* questions */
.q-summary{background:var(--snow2);padding:.95rem 1.1rem;font-size:.85rem;color:var(--ink);
  margin:1.1rem 0 1.8rem;border-left:3px solid var(--cedar);line-height:1.6}
.q-summary b{font-weight:700}
.qsec{margin-top:1.9rem;padding-top:1.6rem;border-top:1px solid var(--line2)}
.qsec-t{font-family:var(--bb);font-size:.85rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--cedar);margin-bottom:1.2rem}
.qlabel{display:block;font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--fog);font-weight:700;margin:1.3rem 0 .6rem}
.qlabel:first-child{margin-top:0}
.qinput,.qtext{width:100%;background:transparent;border:none;border-bottom:1.5px solid var(--line);
  padding:.65rem 0;font-family:var(--ns);font-size:1rem;color:var(--ink);
  transition:border-color .4s var(--ease)}
.qinput::placeholder,.qtext::placeholder{color:var(--fog)}
.qinput:focus,.qtext:focus{outline:none;border-color:var(--cedar)}
.qtext{resize:vertical;min-height:56px}
.qchips{display:flex;flex-wrap:wrap;gap:.6rem}
.qchip{border:1px solid var(--line);background:#fff;color:var(--ink);padding:.6rem 1.15rem;
  font-family:var(--ns);font-size:.85rem;cursor:pointer;transition:all .22s var(--ease)}
.qchip:hover{border-color:var(--cedar)}
.qchip.on{background:var(--pine);border-color:var(--pine);color:var(--snow)}
.qother{margin-top:.9rem;animation:schedIn .35s var(--ease)}
.qcond{display:none}
.qcond.show{display:block;animation:schedIn .45s var(--ease)}
.qsubmit{width:100%;margin-top:2.2rem;padding:1.15rem;background:var(--cedar);color:#fff;
  font-family:var(--bb);font-size:.85rem;letter-spacing:.28em;text-transform:uppercase;
  border:none;cursor:pointer;transition:all .35s var(--ease)}
.qsubmit:hover{background:var(--pine);color:var(--snow)}
/* done */
.sdone{text-align:center;padding:2.5rem 1rem}
.sdone .ring{width:74px;height:74px;border:2px solid var(--cedar);border-radius:50%;
  margin:0 auto 1.8rem;display:flex;align-items:center;justify-content:center;color:var(--cedar)}
.sdone h3{font-family:var(--bb);font-size:2.4rem;letter-spacing:.06em;line-height:1.05}
.sdone .ddetail{color:var(--body);margin-top:1rem;font-size:.98rem;line-height:1.8;
  max-width:26rem;margin-left:auto;margin-right:auto}
.sdone .ddetail b{color:var(--ink);font-weight:700}
.gcal{display:inline-flex;align-items:center;gap:.7rem;margin-top:2rem;border:1px solid var(--pine);
  color:var(--pine);padding:.95rem 2rem;font-family:var(--bb);font-size:.85rem;letter-spacing:.2em;
  text-transform:uppercase;transition:all .35s var(--ease)}
.gcal:hover{background:var(--pine);color:var(--snow)}
.gcal svg{width:17px;height:17px}
.dnote{margin-top:1.6rem;font-size:.78rem;color:var(--fog)}
@media(max-width:520px){.cal-cell{font-size:1rem}}

/* ---------- desktop nav dropdown ---------- */
.ndrop{position:relative;display:flex;align-items:center}
.ndrop-t{display:flex;align-items:center;gap:.5rem;background:none;border:none;cursor:pointer;
  font-family:var(--bb);font-size:1.04rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(247,246,242,.92);padding:0;position:relative;transition:color .35s var(--ease)}
.ndrop-t::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:100%;background:var(--cedar);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.ndrop:hover .ndrop-t::after,.ndrop-t.active::after{transform:scaleX(1)}
.ndrop-t.active{color:var(--cedar2)}
header.solid .ndrop-t{color:var(--ink)}
header.solid .ndrop-t.active{color:var(--cedar)}
.ncaret{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--ease)}
.ndrop:hover .ncaret,.ndrop-t[aria-expanded="true"] .ncaret{transform:translateY(1px) rotate(225deg)}
/* the gap between the trigger and the panel would drop the hover, so the panel
   starts flush under the bar and pads itself instead */
.ndrop-menu{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);margin-top:1.1rem;
  min-width:11.5rem;background:var(--snow);border:1px solid var(--line2);
  box-shadow:0 26px 60px -24px rgba(19,28,36,.45);
  padding:.5rem 0;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
.ndrop-menu::before{content:"";position:absolute;left:0;right:0;top:-1.1rem;height:1.1rem}
.ndrop:hover .ndrop-menu,.ndrop:focus-within .ndrop-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.ndrop-menu a{display:block;font-family:var(--bb);font-size:1rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);padding:.7rem 1.4rem;transition:all .3s var(--ease)}
.ndrop-menu a:hover{background:var(--snow2);color:var(--cedar)}
.ndrop-menu a.active{color:var(--cedar)}
.ndrop-menu a.active::after{display:none}

/* ---------- blog ---------- */
/* the post heroes use the standard .phero height, the same one the about page
   runs at before it goes full-viewport, so a post opens at the same scale as
   the rest of the site rather than as a short banner */
.blogsec{padding:clamp(4rem,8vw,6.5rem) clamp(1.4rem,6vw,7rem)}
.blogsec .kick{display:block;margin-bottom:2rem}
/* featured post: image left, copy right, collapsing to a stack on tablet down */
.feat{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.8rem,4vw,3.4rem);
  align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(1.8rem,3.5vw,3rem) 0;transition:background .5s var(--ease)}
.feat:hover{background:var(--snow2)}
.feat .fclip{overflow:hidden;aspect-ratio:16/10}
.feat .fclip img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.feat:hover .fclip img{transform:scale(1.05)}
.feat h2{font-family:var(--bb);font-size:clamp(1.9rem,3.4vw,2.9rem);letter-spacing:.045em;
  line-height:1.02;text-transform:uppercase;margin:.9rem 0 .9rem}
.feat p{color:var(--body);font-size:1rem;line-height:1.8;max-width:44ch}
.bmeta{display:flex;align-items:center;gap:.85rem;font-size:.6rem;letter-spacing:.26em;
  text-transform:uppercase;font-weight:700;color:var(--fog)}
.bmeta .bcat{color:var(--cedar)}
.bmeta .bdot{width:3px;height:3px;background:var(--line2);transform:rotate(45deg);flex:none}
/* SANDIEGO6 is a 1750x800 banner, so a portrait phone hero shows barely a fifth
   of its width and a centred crop lands on blank stucco. bias it left onto the
   window, roof line and front door so it still reads as a house. desktop shows
   60% of the width and is well composed centred, so this stays phone-only. */
@media(max-width:640px){
  #page-post-monthly-cost .px img{object-position:38% center}
}
/* over a hero photo the cedar gold all but disappeared against a bright sky, so
   the post's own meta line runs white with the same shadow the headline carries */
.phero .bmeta{color:var(--snow);
  text-shadow:0 1px 2px rgba(6,12,18,.9),0 2px 16px rgba(6,12,18,.75)}
.phero .bmeta .bcat{color:var(--snow)}
.phero .bmeta .bdot{background:var(--snow);opacity:.75}
.rlink{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.5rem;
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;font-weight:700;color:var(--cedar)}
.rlink::after{content:"";width:30px;height:1.5px;background:var(--cedar);
  transition:width .45s var(--ease)}
.feat:hover .rlink::after,.bcard:hover .rlink::after{width:48px}
.bposts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.2rem);margin-top:clamp(2.6rem,5vw,4rem)}
.bcard{display:block;border-top:1px solid var(--line);padding-top:1.6rem}
.bcard .fclip{overflow:hidden;aspect-ratio:16/10;margin-bottom:1.4rem}
.bcard .fclip img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.bcard:hover .fclip img{transform:scale(1.05)}
.bcard h3{font-family:var(--bb);font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:.05em;
  line-height:1.06;text-transform:uppercase;margin:.85rem 0 .8rem}
.bcard p{color:var(--body);font-size:.95rem;line-height:1.78}
@media(max-width:860px){
  .feat{grid-template-columns:1fr;gap:1.4rem}
  .bposts{grid-template-columns:1fr;gap:2.4rem}
}

/* ---------- post ---------- */
.byline{display:flex;align-items:center;gap:1.1rem;max-width:44rem;
  margin:0 auto;padding:clamp(2.2rem,4vw,3rem) 0 0}
.byline .avatar{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:top center;
  flex:none;border:1.5px solid var(--cedar);background:var(--pine)}
.byline .bn{font-family:var(--bb);font-size:1.15rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.byline .br{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  color:var(--fog);margin-top:.3rem}
.article{max-width:44rem;margin:0 auto;padding:clamp(2rem,4vw,2.8rem) 0}
.article > * + *{margin-top:1.35rem}
.article p{color:var(--body);font-size:1.04rem;line-height:1.9}
.article p.lede{font-size:1.18rem;line-height:1.8;color:var(--ink)}
.article h2{font-family:var(--bb);font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:.05em;
  text-transform:uppercase;line-height:1.06;color:var(--ink);margin-top:2.8rem}
.article h3{font-family:var(--bb);font-size:1.3rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);margin-top:2rem}
.article b{color:var(--ink);font-weight:700}
.article a{color:var(--cedar);text-decoration:underline;text-underline-offset:3px}
.article ul{padding-left:1.2rem}
.article ul li{color:var(--body);font-size:1.02rem;line-height:1.85;margin-bottom:.7rem;
  list-style:none;position:relative;padding-left:1.3rem}
.article ul li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;
  background:var(--cedar);transform:rotate(45deg)}
.pullq{border-left:2px solid var(--cedar);padding:.4rem 0 .4rem 1.7rem;margin:2.6rem 0}
.pullq p{font-family:var(--bb);font-size:clamp(1.4rem,2.6vw,1.95rem);letter-spacing:.035em;
  line-height:1.16;text-transform:uppercase;color:var(--ink)}
.postfig{max-width:56rem;margin:clamp(2.4rem,5vw,3.6rem) auto}
.postfig .fclip{overflow:hidden;aspect-ratio:16/9}
.postfig img{width:100%;height:100%;object-fit:cover}
.postfig figcaption{margin-top:.9rem;font-size:.78rem;color:var(--fog);line-height:1.7}
.postnote{max-width:44rem;margin:0 auto;padding:1.6rem 0 0;border-top:1px solid var(--line)}
.postnote p{font-size:.8rem;color:var(--fog);line-height:1.75}
/* next-up rail so a reader never dead-ends at the bottom of a post */
.morep{max-width:56rem;margin:0 auto;padding:clamp(2.6rem,5vw,4rem) 0 0}
.morep .kick{display:block;margin-bottom:1.6rem}
.morep .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.4rem)}
.morep a{display:block;border-top:1px solid var(--line);padding-top:1.2rem;transition:opacity .35s var(--ease)}
.morep a:hover{opacity:.66}
.morep h4{font-family:var(--bb);font-size:1.22rem;letter-spacing:.05em;text-transform:uppercase;
  line-height:1.1;margin-top:.7rem;color:var(--ink)}
@media(max-width:640px){
  .morep .mgrid{grid-template-columns:1fr;gap:1.8rem}
  .byline .avatar{width:50px;height:50px}
  .article p{font-size:1rem}
}

/* ---------- footer ---------- */
footer{background:var(--pine);color:var(--snow);padding:clamp(4rem,7vw,5.5rem) clamp(1.4rem,6vw,7rem) 2.4rem;
  position:relative;overflow:hidden}
footer .outline-word{-webkit-text-stroke-color:rgba(247,246,242,.06);font-size:clamp(7rem,20vw,17rem);
  left:50%;transform:translateX(-50%);bottom:-6%}
footer .wrap{position:relative;z-index:1}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:3rem;padding-bottom:3.6rem}
.fbrand{display:block}
.fbrand .nm{display:block;font-family:var(--bb);font-size:2.2rem;letter-spacing:.08em;
  color:var(--snow);line-height:1}
.fbrand .sub{display:block;font-size:.56rem;letter-spacing:.42em;text-transform:uppercase;
  font-weight:700;color:var(--cedar2);margin-top:.5rem}
.fbrandwrap{display:block}
/* 260px == rendered width of "ARI BHATTACHARJEE" at 2.2rem Bebas */
.fcbw{display:block;width:260px;max-width:100%;height:auto;margin-top:1.7rem}
.fgrid .fabout{color:rgba(247,246,242,.66);font-size:.86rem;line-height:1.8;max-width:19rem;margin-top:1.7rem}
.fpower{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:1.3rem 0 2.8rem;
  font-size:.82rem;letter-spacing:.28em;text-transform:uppercase;color:#e9e6e0;transition:opacity .3s}
.fpower:hover{opacity:.65}
.fpower .clozma{height:23px;width:auto;display:block}
footer h5{font-family:var(--bb);font-size:1.05rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cedar2);margin-bottom:1.4rem;font-weight:400}
footer ul{list-style:none}
footer ul li{margin-bottom:.7rem}
footer ul a{font-size:.86rem;color:rgba(247,246,242,.75);letter-spacing:.06em;
  transition:color .3s var(--ease),padding-left .3s var(--ease)}
footer ul a:hover{color:var(--cedar2);padding-left:.35rem}
.fcontact p{font-size:.86rem;line-height:1.8;color:rgba(247,246,242,.75);margin-bottom:.6rem}
.fcontact b{color:var(--snow);font-weight:600}
.fcontact p a{transition:color .3s var(--ease)}
.fcontact p a:hover{color:var(--cedar2)}
.fcontact .fbookrow{margin-top:1.1rem}
.fcontact .fbookrow a{color:var(--cedar2);font-weight:600;letter-spacing:.06em;
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),padding-left .3s var(--ease)}
.fcontact .fbookrow a:hover{border-bottom-color:var(--cedar2);padding-left:.25rem}
.fbase{display:flex;flex-direction:column;align-items:flex-start;gap:1.3rem;padding-top:2.2rem;
  font-size:.78rem;letter-spacing:.01em;color:rgba(247,246,242,.55);border-top:1px solid var(--wline)}
.ftrec{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:.7rem 1.6rem}
.ftrec a{color:rgba(247,246,242,.6);letter-spacing:.01em;border-bottom:1px solid rgba(247,246,242,.28);
  padding-bottom:1px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.ftrec a:hover{color:var(--cedar2);border-bottom-color:var(--cedar2)}
@media(max-width:960px){
  .fgrid{grid-template-columns:1fr 1fr;gap:2.6rem 3rem}
  .fgrid>*{min-width:0}
}
@media(max-width:640px){
  .fgrid{grid-template-columns:1fr}
}
@media(min-width:641px){
  .fbase{padding-right:7rem}
}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .bookgrid{grid-template-columns:1fr;gap:3rem}
  .binfo{position:static;top:auto}
  .intro{grid-template-columns:1fr;gap:3.6rem}
  .intro .por{max-width:460px}
  .lgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .navlinks,.navcta{display:none}
  .menutog{display:flex}
  .board-grid{grid-template-columns:1fr 1fr}
  .board .bc:nth-child(3)::before{display:none}
  .arow{grid-template-columns:1fr;gap:1.8rem}
  .arow.flip .a-txt{order:0}
  .tgrid{grid-template-columns:1fr}
  .vals{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .backed{grid-template-columns:1fr}
  .pritem{grid-template-columns:64px 1fr;grid-template-rows:auto auto}
  .pritem .tag{grid-column:2;justify-self:start}
  .hero-foot .hf-cta{border-left:none;border-top:1px solid var(--wline);width:100%}
  .pstrip{grid-template-columns:1fr 1fr}
  .pstrip .ps:nth-child(3)::before{display:none}
  .pstrip .ps:nth-child(n+3){border-top:1px solid var(--wline)}
  .incl{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .lgrid{grid-template-columns:1fr}
  .board-grid{grid-template-columns:1fr}
  .board .bc + .bc::before{display:none}
  .board .bc + .bc{border-top:1px solid var(--wline)}
  .frow{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .pstrip{grid-template-columns:1fr}
  .pstrip .ps + .ps::before{display:none}
  .pstrip .ps + .ps{border-top:1px solid var(--wline)}
  .incl{grid-template-columns:1fr}
  .chips{justify-content:flex-start}
  .fab{right:.9rem;bottom:.9rem;gap:.7rem}
  .fabbtn{width:58px;height:58px}
}

/* ============================================================
   MOBILE REFINEMENTS
   ============================================================ */

/* --- logo lockup: the full name wrapped to two lines under 640px --- */
@media(max-width:640px){
  .brand{gap:.6rem}
  .brand .mono{width:38px;height:38px}
  .brand .bt .nm{font-size:1.02rem;letter-spacing:.06em;white-space:nowrap}
  .brand .bt .sub{font-size:.5rem;letter-spacing:.26em;white-space:nowrap}
  header{padding:1rem 1.1rem}
}
@media(max-width:360px){
  .brand .bt .nm{font-size:.92rem;letter-spacing:.04em}
}

/* --- open drawer is light, so the header has to wear its dark treatment --- */
/* the open drawer is light, so the navy bar keeps its own light lockup */
/* the floating contact bubble must not sit on top of the open menu */
body.menuopen .fab{opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease)}
.drawer{overflow-y:auto;padding:5.5rem 1.2rem 2.5rem}
@media(max-width:640px){
  .drawer a{font-size:2.2rem;letter-spacing:.05em;padding:.35rem 0}
}
@media(max-height:620px){
  .drawer a{font-size:1.7rem;padding:.2rem 0}
}

/* --- stacked intro: hairline + heading, then the photo, then copy + CTAs --- */
@media(max-width:1080px){
  .intro{display:flex;flex-direction:column;gap:0;align-items:stretch;text-align:left}
  .intro .itxt{display:contents}
  .intro .itxt>.kick{order:1;display:flex;align-items:center;gap:.85rem}
  .intro .itxt>.kick::before{content:"";width:38px;height:1.5px;background:var(--cedar);flex:none}
  .intro .itxt>h2{order:2;margin:1rem 0 1.7rem}
  .intro .por{order:3;margin-bottom:2.2rem;max-width:none;align-self:stretch}
  .intro .itxt>p{order:4}
  .intro .itxt>.introcta{order:5}
}

/* --- mobile type + spacing --- */
@media(max-width:640px){
  .sec{padding:clamp(3.4rem,11vw,5rem) 1.3rem}
  .phero + .sec{padding-top:clamp(2.4rem,8vw,3.4rem)}
  .hero h1{font-size:clamp(2.9rem,13vw,4.2rem)}
  .phero h1{font-size:clamp(2.4rem,11vw,3.4rem)}
  .hero-tag::before{display:none}
  /* buy/sell lock hero+stats into one viewport on desktop; on a phone that
     squeezes the hero, so let it stand at ~88vh and the stats flow below */
  .herovp{height:auto}
  .phero,.herovp .phero{min-height:clamp(560px,88vh,780px)}
  .phero .ph-in{padding-left:1.3rem;padding-right:1.3rem}
  .binfo h2,.intro .itxt h2{font-size:clamp(2.1rem,9vw,2.9rem)}
  .sechead h2{font-size:clamp(2.1rem,9vw,2.9rem)}
  .introcta .btn{width:100%;justify-content:center}
  .areas{padding-left:1.3rem;padding-right:1.3rem}
  .backed{padding-left:1.3rem;padding-right:1.3rem}
  .wrap{padding-left:0;padding-right:0}
  .qtext{min-height:56px}
}

/* --- the gold brokerage tab crowds the portrait once it goes full width --- */
@media(max-width:640px){
  .intro .por .tape{display:none}
  .intro .por::after{display:none}
}

/* --- numbered rows: number sits above its heading, not in a side column --- */
@media(max-width:640px){
  .pritem{grid-template-columns:1fr;grid-template-rows:auto;gap:.5rem;padding:2.1rem 0}
  .pritem .pnum,.pritem>div,.pritem .tag{grid-column:1}
  .pritem .pnum{font-size:2.1rem;margin-bottom:.1rem}
  .pritem h4{font-size:1.5rem}
  .pritem p{max-width:none}
  .pritem .tag{justify-self:start;margin-top:.5rem}
  .val{padding-top:1.9rem}
  .val .vn{font-size:1.9rem;margin-bottom:.5rem}
}

/* --- carousel: arrows move out of the artwork and under the progress bar --- */
@media(max-width:640px){
  .areas .wrap{display:flex;flex-direction:column}
  .areas-head{display:contents}
  .areas .sechead{order:1}
  .areas-lede{order:2}
  .areas-rail{order:3}
  .areas-bar{order:4}
  .areas-side{display:none}
  .areas-ctl{order:5;display:flex;justify-content:center;gap:1rem;margin-top:1.5rem}
  .areas-ctl button{width:52px;height:52px;background:var(--pine);border-color:var(--pine);
    color:var(--snow);font-size:1.1rem}
  .areas-ctl button[disabled]{opacity:.3}
}

/* --- stat strips centre up and read a touch larger on phones --- */
@media(max-width:640px){
  .pstrip .ps{text-align:center;padding:1.15rem 1.3rem}
  .pstrip .ps b{font-size:1.6rem;margin-bottom:.3rem}
  .pstrip .ps span{font-size:.66rem;letter-spacing:.22em}
  .board .bc{text-align:center;padding:1.7rem 1.3rem}
  .board .bc .n{font-size:3.4rem;margin-bottom:.3rem}
  .board .bc .l{font-size:.68rem;letter-spacing:.24em}
  .intro .creds,.hero-foot{text-align:center}
}

/* --- scheduler on small screens --- */
@media(max-width:640px){
  .sched{padding:1.4rem 1.15rem;min-height:0}
  .cal-grid{gap:.25rem}
  .cal-cell{font-size:1rem}
  .cal-nav{width:38px;height:38px}
  .cal-tz{flex-direction:column;gap:.5rem;align-items:flex-start}
  .cal-tz select{width:100%}
  .cr .v{font-size:1.15rem;word-break:break-word}
}