:root{
  --ink:#1B1B1F; --navy:#16223F; --navy-2:#0F1830;
  --off:#FAF6EB; --white:#fff; --beige:#E9E0D2;
  --gold:#C2A15A; --gold-hi:#D9BE8A;         /* sparing brand accent — type on NAVY + all rules/borders/hovers */
  --gold-ink:#8A6B26;                        /* gold as TYPE on light grounds — 4.64:1 on #FAF6EB.
                                                Clears AA: .hero h1 em is 35–83px = LARGE text (3:1 bar);
                                                also clears the 4.5:1 normal-text bar for the small uses. */
  --muted:#8A8172;                            /* neutral eyebrow / meta */
  --pg-bg:#FAF6EB; --pg-ink:#1B1B1F;         /* continuous scroll-linked colour journey */
  --serif:'Cormorant', Georgia, serif;
  --sans:'Inter', system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--pg-bg)}   /* the CANVAS itself rides the journey — zoom-out, overscroll and load gaps can never flash white */
html,body{color:var(--pg-ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
#pgbg{position:fixed;inset:0;z-index:-3;background:var(--pg-bg)}
/* boutique matte frame: soft vanilla passe-partout on left/right (+half on top, none
   below) — content glides beneath it. Above chrome, below drawer/cursor. */
#pageframe{position:fixed;inset:0;pointer-events:none;z-index:94;overflow:hidden;
  --fx:clamp(18px,1.65vw,30px)}
#pageframe::before{content:"";position:absolute;
  left:var(--fx);right:var(--fx);top:calc(var(--fx)/2);bottom:-60px;
  border-radius:16px 16px 0 0;                 /* softly curved inner corners */
  box-shadow:0 0 0 220px #FFFCF7}
/* cursor hide retired (owner 2026-08-04): native cursor everywhere */

.eyebrow{font-size:.7rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--pg-ink);opacity:.58}
.display{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.01em}
.said{font-family:var(--serif);font-style:italic;font-weight:400;line-height:1.28}
/* simpler matching 'a' — same Garamond family, calmer text-cut glyph */
.sa{font-family:'Cormorant Infant','Cormorant Garamond',var(--serif)}
section{position:relative;padding:16vh 8vw}
.wrap{max-width:min(1560px,93vw);margin:0 auto;position:relative;z-index:2}
/* ══ TEXT LAYOUT LAW (owner 2026-07-23) ═══════════════════════════════════════
   Copy breaks into SYMMETRIC lines, fills the horizontal space, and keeps equal
   sleek gutters on both sides — never a narrow column stranded in a wide section.
   Headlines/ledes balance (even line lengths); body copy fills the wrap and only
   avoids orphans. Skill: ~/.claude/skills/balanced-text-layout. ══ */
.display:not(#h1),.said,.lede,.shead h2,h2,h3,.p-role{text-wrap:balance}
.wrap p,.p-bio{text-wrap:pretty}
.light,.dark,.deep{background:transparent}

/* ══ TOP BAR — logo lockup + her name/details (left) · nav (right) ══ */
header.bar{
  position:fixed;inset:0 0 auto 0;z-index:96;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding:14px 5vw;
  background:transparent;transform:translateZ(0);
  border-bottom:1px solid transparent;
  transition:color .45s, opacity .55s ease;
}
/* IMMERSION: header fades out while the pinned flight fills the screen (no head/roofline can clip
   under it), and fades back the moment the flight ends. Toggled by the descent ScrollTrigger. */
html.flight-immersion header.bar{opacity:0;pointer-events:none}
/* header colour tracks the journey via JS (see the colour-journey update()) so its edge never cuts the gradient */
/* fade skirt: text scrolling toward the slim band eases out over ~140px before it goes
   under — no hard edge, no ghost. Colour rides the journey via --pg-bg. Off at rest. */
header.bar::after{content:"";position:absolute;top:100%;left:0;right:0;height:140px;pointer-events:none;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--pg-bg) 97%, transparent) 0%,
    color-mix(in srgb, var(--pg-bg) 86%, transparent) 26%,
    color-mix(in srgb, var(--pg-bg) 58%, transparent) 55%,
    color-mix(in srgb, var(--pg-bg) 24%, transparent) 80%,
    transparent 100%);
  opacity:0;transition:opacity .4s ease}
header.bar.condensed.scrolled::after{opacity:1}   /* skirt only once the page scrolls — never veils hero at rest */
.bar .id{display:flex;flex-direction:column;align-items:flex-start;gap:74px;text-decoration:none;color:inherit;min-width:0;transition:gap .5s cubic-bezier(.4,0,.2,1)}
.bar .logo{height:clamp(178px,16.8vw,222px);width:auto;display:block;transition:height .55s cubic-bezier(.4,0,.2,1),opacity .42s ease}
.bar .logo-white{display:none}
header.bar.on-dark .logo-black{display:none}
header.bar.on-dark .logo-white{display:block}

/* ── logo sting: owner's original motion file plays IN PLACE over the header logo.
   Geometry measured off the file's final frame so the drawn lockup lands exactly on
   the static PNG; multiply + tiny brightness lift makes the white frame invisible. */
.logo-box{position:relative;display:block;line-height:0}
#logosting{position:absolute;left:-121.96%;top:-39.97%;width:342.31%;height:auto;
  mix-blend-mode:multiply;filter:brightness(1.06);opacity:0;pointer-events:none;
  transition:opacity .42s ease}
#stingback{position:absolute;left:-121.96%;top:-39.97%;width:342.31%;aspect-ratio:16/9;
  background:var(--pg-bg);opacity:0;pointer-events:none;transition:opacity .42s ease}
.logo-box.sting-live #logosting,.logo-box.sting-live #stingback{opacity:1}
/* The static mark is the permanent safety layer — it is never hidden, so a
   stalled, blocked or failed sting can never leave an empty logo area. The
   opaque #stingback underlay covers it only once the video really plays. */
html.sting-wait .bar .logo,.logo-box.sting-live .logo{opacity:1}

.bar .who{min-width:0;max-height:440px;overflow:hidden;transition:opacity .55s ease,max-height .65s cubic-bezier(.4,0,.2,1)}
/* owner 2026-07-23: "The Executive Team" eyebrow centred over the BAHAR name (not the wide
   column). who-lead shrinks to the name width; the eyebrow centres inside it. */
.bar .who .who-lead{display:block;width:fit-content;text-align:center}
.bar .who .team{display:inline-block;font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;opacity:.6;margin-bottom:16px;padding-bottom:7px;border-bottom:1.4px solid currentColor}
.bar .who .nm{display:block;font-family:var(--serif);font-size:1.2rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
/* owner 2026-07-23: logo is the home link; each principal's name links to their About section */
.bar .id-home{display:block;text-decoration:none;color:inherit}
.bar .who a.nm{width:fit-content;text-decoration:none;color:inherit;cursor:pointer;transition:opacity .3s,color .3s}
.bar .who .who-lead a.nm{margin:0 auto}                 /* keep Bahar's name centred under the eyebrow */
.bar .who a.nm:hover{opacity:1;color:var(--gold-ink)}
header.bar.on-dark .who a.nm:hover{color:var(--gold-hi)}
.bar .who .nm2{margin-top:16px}
.bar .who .ttl{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;opacity:.75;margin-top:7px;white-space:nowrap}

/* ── primary nav (top right) + gold flourish hover draw ── */
.nav{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;row-gap:4px;gap:clamp(10px,1.4vw,28px);flex:none;position:relative;min-width:0;max-width:100%}
.nav a{position:relative;font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:inherit;text-decoration:none;padding:10px 3px 16px;opacity:.72;transform-origin:center bottom;transition:transform .34s cubic-bezier(.34,1.1,.4,1),opacity .3s}
.nav a:hover{opacity:1;transform:scale(1.26)}
.nav a.active{opacity:1}
.nav .nav-item>a[href="/newsletter/"]{font-size:.7rem}
/* single "magic" underline that slides under the active / hovered item */
.nav .magic{position:absolute;left:0;bottom:6px;height:1.6px;width:0;background:currentColor;border-radius:2px;transform:translateX(0);transition:transform .42s cubic-bezier(.7,0,.2,1),width .42s cubic-bezier(.7,0,.2,1);pointer-events:none}

/* ══ HERO ══ */
/* owner 2026-07-23: hero no longer forced to 100vh (that left a ~580px void under the
   headline in the condensed-header state). Cue now housed by padding-bottom → the gap below
   the copy is ~70% smaller and state-independent. nav↔text space +60% via .hero .wrap margin. */
.hero{display:flex;flex-direction:column;justify-content:flex-start;padding-top:calc(var(--header-h,480px) + clamp(30px,5vh,64px));padding-bottom:clamp(200px,22vh,290px);overflow:hidden}
.hero .wrap{margin-top:clamp(40px,6vh,74px)}   /* +60% breathing room between the nav and the headline */
.hero h1{font-size:clamp(2.2rem,5.6vw,5.2rem);max-width:22ch}
.hero h1 em{color:var(--gold-ink);font-style:italic}
.hero h1 .w{display:inline-block}
@media(min-width:1025px){.hero h1,.hero .im{margin-left:clamp(300px,26vw,560px)}}
.hero .im{margin-top:30px;font-size:clamp(1.3rem,3vw,2.1rem);color:var(--pg-ink);opacity:.72}
/* A11Y: was var(--muted) #8A8172 = 3.56:1 on vanilla at .68rem (10.9px) → FAILED AA.
   var(--pg-ink) computes to #1B1B1F on vanilla = 15.90:1, and self-corrects if the
   journey ever darkens behind it. */

.scrollcue{position:absolute;bottom:6vh;left:8vw;display:flex;align-items:center;gap:14px;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--pg-ink)}
.scrollcue .ln{width:60px;height:1px;background:#cdbfab;position:relative;overflow:hidden}
.scrollcue .ln::after{content:"";position:absolute;inset:0;width:40%;background:rgba(194,161,90,.75);animation:sl 2.6s ease-in-out infinite}
@keyframes sl{0%{transform:translateX(-120%)}60%,100%{transform:translateX(320%)}}

/* ══ AVATAR — the moving guide ══ */
#avatar{
  position:fixed;z-index:40;left:0;top:0;
  width:min(220px,26vw);aspect-ratio:3/4.4;pointer-events:none;
  will-change:transform;opacity:0;
}
#avatar .card{
  width:100%;height:100%;border-radius:120px 120px 10px 10px;
  border:1px solid rgba(15,24,48,.40);
  background:
    radial-gradient(90% 70% at 50% 18%, rgba(15,24,48,.10), transparent 60%),
    linear-gradient(180deg, rgba(22,34,63,.06), rgba(22,34,63,.20));
  backdrop-filter:blur(2px);
  display:flex;align-items:flex-end;justify-content:center;
  padding:14px;text-align:center;
  box-shadow:0 30px 60px -30px rgba(22,34,63,.45);
}
#avatar .card span{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);background:rgba(250,246,235,.9);border-radius:100px;padding:6px 12px}
/* NOTE: #avatar is no longer in index.html (guide removed) — this is DEAD CSS.
   Colour corrected anyway: --muted at 1rem was 3.56:1 and would fail AA if revived. */
#avatar .cap{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--pg-ink)}

/* ══ SPOKEN LINES ══ */
.spoken .said{font-size:clamp(1.9rem,4.8vw,3.6rem)}
.spoken .said .accent{color:var(--gold-ink)}
.spoken .said .wd{display:inline-block;opacity:.12;transform:translateY(.25em)}

/* ══ TALKING SCENES — T1–T5 avatar placeholders (portrait video + locked line) ══ */
.talk-badge{font-size:.54rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);border:1px solid rgba(194,161,90,.5);border-radius:100px;padding:6px 13px}
.talk-setting{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--pg-ink);opacity:.5}
.note{font-size:.7rem;letter-spacing:.04em;color:var(--pg-ink);opacity:.5;margin-top:16px}

/* ══ WALKTHROUGH (pinned, scroll-scrubbed) — navy family only ══ */

/* ══ DIVE (pinned cinematic — the one place colour is allowed) ══ */
#dive{padding:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:transparent}
#dive .cam{position:absolute;inset:-12%;will-change:transform}
#dive .st{position:absolute;inset:0;opacity:0}
/* poolside sunlight glinting on water */
#dive .st.sun{background:
  radial-gradient(60% 42% at 72% 20%, rgba(255,231,178,.95) 0%, rgba(240,163,92,.55) 26%, transparent 62%),
  linear-gradient(180deg,#8bb3d6 0%,#4f83ad 46%,#2b537a 78%,#16223F 100%);opacity:1}
/* surface / entering the water */
#dive .st.water{background:linear-gradient(180deg,#8fd3ea 0%,#2f86b4 46%,#0f4d75 78%,#0a3350 100%)}
/* underwater — caustics + god-rays shafting down from the surface */
#dive .st.under{background:
  linear-gradient(102deg, transparent 28%, rgba(233,247,255,.16) 40%, transparent 50%, rgba(233,247,255,.10) 62%, transparent 72%, rgba(233,247,255,.08) 82%, transparent 90%),
  radial-gradient(70% 46% at 50% -14%, rgba(190,232,255,.55), transparent 62%),
  linear-gradient(180deg,#1f8fbe 0%,#0e6c8f 42%,#08415f 74%,#062637 100%)}
/* breaking the surface → blue sky with drifting clouds, settling back to beige */
#dive .st.sky{background:
  radial-gradient(38% 22% at 22% 32%, rgba(255,255,255,.92), transparent 60%),
  radial-gradient(32% 18% at 66% 24%, rgba(255,255,255,.85), transparent 62%),
  radial-gradient(30% 16% at 86% 40%, rgba(255,255,255,.72), transparent 60%),
  linear-gradient(180deg,#8fd0ff 0%,#bfe6ff 40%,#e9f6ff 72%,#FAF6EB 100%);
  background-repeat:no-repeat;
  background-size:150% 100%,150% 100%,150% 100%,100% 100%;
  animation:clouddrift 40s linear infinite}
@keyframes clouddrift{0%{background-position:0% 32%,0% 24%,0% 40%,0 0}100%{background-position:34% 32%,-28% 24%,22% 40%,0 0}}
/* light-bloom flash as the camera breaks surface */
#dive .bloom{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 46%, #ffffff 0%, rgba(255,255,255,.6) 34%, transparent 72%)}
#dive .line{position:relative;z-index:3;color:#fff;font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,4.4vw,3.2rem);text-align:center;max-width:22ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}

/* ══ PHILOSOPHY ══ */
.philo{text-align:center;padding-block:clamp(74px,9vh,120px)}   /* owner 2026-07-23: kill the wasted vertical space */
.philo .said{font-size:clamp(2rem,5.6vw,4.4rem);max-width:16ch;margin:0 auto}
.philo .sig{margin-top:48px;font-family:var(--serif);font-style:italic;font-size:1.4rem;color:var(--gold)}

/* ══ TESTIMONIALS ══ */
.shead{display:flex;align-items:baseline;gap:20px;margin-bottom:76px;flex-wrap:wrap}
.shead h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5vw,3.6rem);line-height:1.04}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:52px}
.quote{border-top:1px solid rgba(140,130,118,.35);padding-top:28px;will-change:transform}
.quote p{font-family:var(--serif);font-size:1.3rem;line-height:1.4}
.quote .who{margin-top:16px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.quote .where{display:block;margin-top:4px;color:var(--pg-ink);opacity:.55;text-transform:none;letter-spacing:.05em}

/* ══ REACH / FAMILY / WORLD ══ */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:60px}
.col h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;margin-bottom:10px}
.col p{color:var(--pg-ink);opacity:.78;font-size:.96rem}
/* ══ EXPERIENCE — the two principals, each their own block (owner 2026-07-23) ══
   Two aligned grids on ONE spine: 2 principal bios over 4 capability columns.
   Same 64px column-gap on both → each bio sits squarely above two columns; the
   centre + outer edges line up. Symmetric, no orphaned 4th item. ══ */
.people2{display:grid;grid-template-columns:repeat(2,1fr);column-gap:64px;row-gap:clamp(38px,4vw,56px);margin:8px 0 76px}
.person .eyebrow{display:block;margin-bottom:10px}
.person .p-role{font-family:var(--serif);font-weight:500;font-size:1.35rem;line-height:1.15;margin-bottom:16px}
.person .p-bio{color:var(--pg-ink);opacity:.82;font-size:1rem;line-height:1.75}
#experience .cols{grid-template-columns:repeat(4,1fr);column-gap:64px;row-gap:56px}
@media(max-width:900px){
  .people2{grid-template-columns:1fr;row-gap:48px}
  #experience .cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){ #experience .cols{grid-template-columns:1fr} }
.lede{font-family:var(--serif);font-size:clamp(1.6rem,3.6vw,2.7rem);line-height:1.3;max-width:23ch}
/* HERO LAW: hero text centred; sentences finish on ONE line — scale the type, never wrap */
.hero-c{text-align:center}
.hero-c .display{white-space:nowrap;max-width:none;font-size:min(7vw,4.6rem)}
.hero-c .lede{max-width:none;margin-left:auto;margin-right:auto;font-size:clamp(1.05rem,2.2vw,2.7rem)}
@media(min-width:640px){.hero-c .lede{white-space:nowrap}}
.lede .accent{color:var(--gold-ink)}
.taglist{display:flex;flex-wrap:wrap;gap:12px;margin-top:46px}
.taglist span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(140,130,118,.4);border-radius:100px;padding:9px 16px;color:var(--pg-ink);opacity:.82}

/* ══ CONTACT ══ */
.contact{text-align:center;padding-block:clamp(90px,11vh,150px)}   /* owner 2026-07-23: trim the empty tail */
.contact h2{font-family:var(--serif);font-size:clamp(2.4rem,7vw,5.6rem);font-weight:400;line-height:1.05}
.contact h2 em{font-style:italic;color:var(--gold)}
.cta{display:inline-flex;align-items:center;gap:12px;margin-top:42px;text-decoration:none;color:var(--pg-ink);border:1px solid rgba(140,130,118,.45);border-radius:100px;padding:18px 36px;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;transition:.4s}
.cta:hover{background:var(--pg-ink);border-color:var(--pg-ink);color:var(--pg-bg)}
.lines{margin-top:44px;display:flex;gap:36px;justify-content:center;flex-wrap:wrap;font-size:.82rem}
.lines a{color:var(--pg-ink);text-decoration:none;opacity:.8;border-bottom:1px solid transparent;padding-bottom:3px}
.lines a:hover{opacity:1;border-color:var(--gold)}
footer{background:transparent;color:color-mix(in srgb, var(--pg-ink) 70%, var(--pg-bg));padding:38px 8vw;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.7rem;letter-spacing:.1em}
footer .nm{font-family:var(--serif);letter-spacing:.28em;text-transform:uppercase;color:var(--pg-ink)}

/* ══ DRAGONFLY cursor — her REAL logo mark as a colourable mask ══ */
#cursor{position:fixed;top:0;left:0;width:33px;height:34px;z-index:9999;pointer-events:none;transform:translate(-120px,-120px);will-change:transform,color,filter,opacity}
#cursor .dfly-mask{width:100%;height:100%;background:currentColor;
  -webkit-mask:url('assets/cursor-dragonfly.png') center/contain no-repeat;
          mask:url('assets/cursor-dragonfly.png') center/contain no-repeat;
  transform-origin:50% 45%;will-change:transform,filter}

@media (max-width:760px){
  section{padding:16vh 7vw}
  .bar .who .ttl{white-space:normal}
  .nav{display:none}
  .bar .logo{height:112px}
  #avatar{width:32vw}
}
@media (prefers-reduced-motion:reduce){
  #cursor,#avatar .cap,.scrollcue .ln::after{display:none}
  body,a,button{cursor:auto}
}

/* ══ ABOUT — non-talking cinematic slots (guitar · baking) ══ */
.cinepair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.5vw,48px);margin-top:64px}
.cine-frame{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;
  border:1px solid rgba(150,140,125,.38);
  background:radial-gradient(85% 60% at 50% 20%, rgba(194,161,90,.10), transparent 60%),linear-gradient(180deg, rgba(130,130,145,.08), rgba(130,130,145,.2));
  box-shadow:0 40px 80px -48px rgba(0,0,0,.45);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;padding-bottom:26px;text-align:center}
.cine-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.cinepair{grid-template-columns:1fr}}
/* CONTRAST LAW (header): ink STEPS at the crossover — never gray-on-gray mid-transition */
header.bar{color:var(--ink)}
header.bar.on-dark{color:var(--off)}
/* ══ NAVY END PANEL — homepage bottom (owner ref 2026-07-16): solid navy, light ink ══ */
.endpanel{background:var(--navy);color:var(--off)}
.endpanel .eyebrow{color:rgba(250,246,235,.6);opacity:1}
.endpanel h2 em{color:var(--gold-hi)}
.endpanel .cta{color:var(--off);border-color:rgba(250,246,235,.42)}
.endpanel .cta:hover{background:var(--off);border-color:var(--off);color:var(--navy)}
.endpanel .lines a{color:var(--off)}
.endpanel .lines a:hover{border-color:var(--gold-hi)}
footer.endpanel{background:var(--navy);color:rgba(250,246,235,.72);opacity:1}
footer.endpanel .nm{color:var(--off)}

/* ══ ANTI-GLITCH GUARDS (site-wide) ══
   1. overflow-anchor off — browser scroll-anchoring causes jumps on slow reverse scrolls
   2. fixed chrome promoted to its own compositor layer (no backdrop-filter anywhere —
      it re-rasterizes content sliding beneath and flickers while the journey recolors) */
html{overflow-anchor:none}
#pgbg{transform:translateZ(0)}

/* ══ CONTACT — the executive team's direct lines (inside the navy end panel) ══ */
.cpeople{display:flex;gap:clamp(40px,7vw,110px);justify-content:center;flex-wrap:wrap;margin-top:54px}
.cperson{display:flex;flex-direction:column;gap:9px;text-align:center}
.cperson .cname{font-family:var(--serif);font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase;color:var(--off);margin-bottom:2px}
.cperson a{color:var(--off);text-decoration:none;opacity:.78;font-size:.9rem;letter-spacing:.04em;border-bottom:1px solid transparent;padding-bottom:2px;transition:.3s}
.cperson a:hover{opacity:1;border-color:var(--gold-hi)}

/* ══ CONDENSING HEADER — full identity block at page top; slim bar while scrolling
   (the tall fixed header was veiling ~40% of every scrolled view) ══ */
.bar .who{overflow:hidden;max-height:340px;transition:max-height .6s cubic-bezier(.6,0,.2,1),opacity .38s ease}
header.bar.condensed .who{max-height:0;opacity:0}
header.bar.condensed .logo{height:105px}
header.bar.condensed .id{gap:0}


/* footer wordmark — same lockup style as the logo: 'spring' lowercase serif over letterspaced BOUTIQUE */
footer .flock{display:flex;flex-direction:column;line-height:1;color:var(--pg-ink)}
footer.endpanel .flock{color:var(--off)}
footer .flock .l1{font-family:var(--serif);font-weight:500;font-size:1.7rem;letter-spacing:.015em;text-transform:lowercase}
footer .flock .l2{font-family:var(--serif);font-weight:400;font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;margin-top:4px}
/* ══ HOMEPAGE LOGO INTRO — plays once per page load (homepage only) ══ */
/* ══ NAV — Newsletter CTA pill, far right & separated ══ */
.nav a.nav-cta{font-size:.7rem;margin-left:clamp(10px,1.2vw,28px);border:1px solid currentColor;border-radius:100px;padding:10px 18px;opacity:.88;white-space:nowrap}
.nav a.nav-cta:hover{transform:none;opacity:1;background:rgba(140,130,118,.14)}
.nav a.nav-cta.active{background:rgba(140,130,118,.16);opacity:1}

/* ══ BLOG — cards grid (homepage Recent Insights + blog index) ══ */
/* auto-fit + a container max-width: ONE post renders as a single properly-sized card
   (not a stretched full-width slab), and three will fill three columns with zero rework. */
.bloggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(24px,3vw,44px);max-width:1180px}
#insights .bloggrid:has(> :only-child),
#newsletters .bloggrid:has(> :only-child){max-width:420px}   /* a lone card stays card-sized */
.bcard{display:block;text-decoration:none;color:var(--pg-ink);border:1px solid rgba(140,130,118,.35);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.25);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.bcard:hover{transform:translateY(-7px);box-shadow:0 34px 64px -42px rgba(15,24,48,.4)}
.bcard .bimg{aspect-ratio:16/10;background:linear-gradient(140deg,#16223F 0%,#22345c 55%,#C2A15A 135%);background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:16px}
.bcard .bcat{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:#FAF6EB;border:1px solid rgba(250,246,235,.55);border-radius:100px;padding:5px 13px}
.bcard .bbody{padding:20px 22px 26px}
.bcard .btitle{font-family:var(--serif);font-size:1.4rem;line-height:1.2}
.bcard .bex{margin-top:10px;font-size:.92rem;line-height:1.6;opacity:.72}
.bcard .bdate{margin-top:12px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;opacity:.5}

/* ══ NEIGHBORHOODS — real photography cards + guide pages ══ */
.hood-intro{max-width:none;margin:0 auto 34px;text-align:justify;text-justify:inter-word;hyphens:auto;
  -webkit-hyphens:auto;font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.6;opacity:.9}
.bcard .bimg{position:relative}
.bimg .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bimg .bcat{position:relative;z-index:2}
/* photo credit: bottom-right, tiny, white on a soft corner scrim — never a solid box */
.ph-credit{position:absolute;right:0;bottom:0;z-index:2;font-size:10.5px;line-height:1;letter-spacing:.02em;
  color:rgba(255,255,255,.85);padding:26px 9px 7px 34px;white-space:nowrap;pointer-events:none;
  background:linear-gradient(to top left,rgba(8,10,16,.55) 0%,rgba(8,10,16,.28) 34%,rgba(8,10,16,0) 64%)}
.hood-hero{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/7;border:1px solid rgba(140,130,118,.35)}
.hood-hero img{width:100%;height:100%;object-fit:cover;display:block}
/* guide body: justified column, every line filled edge to edge */
.hood-article{max-width:72ch;margin:56px auto 0;text-align:justify;text-justify:inter-word;hyphens:auto;
  -webkit-hyphens:auto;line-height:1.7;font-size:1.02rem}
.hood-article .hood-snap{font-family:var(--serif);font-size:1.24rem;line-height:1.65}
.hood-article h2{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  margin:36px 0 9px;text-align:left;opacity:.72}
.hood-article p{margin:0}
.hood-nav{max-width:72ch;margin:74px auto 0;display:flex;justify-content:space-between;align-items:baseline;
  gap:18px;flex-wrap:wrap;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.hood-nav a{color:var(--pg-ink);text-decoration:none;opacity:.65;transition:opacity .3s}
.hood-nav a:hover{opacity:1}
.foot-credit{flex-basis:100%;font-size:.64rem;letter-spacing:.08em;opacity:.55}

/* ══ NEWSLETTER i18n — language selector, editions, localized forms, RTL ══ */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lang-pick{margin-top:34px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
/* owner 2026-07-23: lift the hero (which holds the language dropdown) above the next section's
   .wrap (z-index:2) so the open menu is never covered by — or its hover stolen by — the body below */
.hero-c .wrap{position:relative;z-index:40}
/* compact in-page dropdown — always opens attached to the control, matches the pill preset */
.nl-dd{position:relative;display:inline-block}
.nl-dd-btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pg-ink);background:transparent;
  border:1px solid rgba(140,130,118,.5);border-radius:100px;padding:8px 16px;cursor:pointer;transition:border-color .3s}
.nl-dd-btn:hover{border-color:var(--pg-ink)}
.nl-dd-btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.nl-dd-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:20;
  min-width:100%;margin:0;padding:6px;list-style:none;background:#FFFCF7;
  border:1px solid rgba(140,130,118,.4);border-radius:16px;box-shadow:0 18px 40px -24px rgba(15,24,48,.35)}
.nl-dd-menu a{display:block;padding:8px 18px;border-radius:100px;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pg-ink);text-decoration:none;white-space:nowrap;text-align:center;opacity:.75;cursor:pointer}
.nl-dd-menu a:hover,.nl-dd-menu a:focus-visible{opacity:1;background:rgba(140,130,118,.14);outline:none}
.nl-dd-menu a[aria-current]{opacity:1;font-weight:600}
html[lang="fa"] .nl-dd-btn,html[lang="fa"] .nl-dd-menu a{letter-spacing:.04em}
.nl-edition{margin-top:56px}
.nl-edition:first-child{margin-top:0}
.nl-unavailable{font-size:1.02rem;opacity:.7}
.nl-ref{opacity:.55;font-size:.9em}
.nl-form .nl-lang-note{font-size:.85rem;letter-spacing:.04em;opacity:.65;margin:0 0 14px}
.nl-form{display:block}
.nl-form .nl-row{display:flex;gap:12px;flex-wrap:wrap;max-width:620px;margin:0 auto}
.nl-form .nl-row input{flex:1;min-width:230px}
.nl-consent{display:block;margin:16px auto 0;max-width:620px;font-size:.82rem;line-height:1.6;opacity:.8;cursor:pointer}
.nl-consent input{margin-inline-end:8px;accent-color:var(--navy)}
.nl-consent a{color:inherit}
/* Persian: Vazirmatn everywhere on fa pages (Cormorant has no Persian glyphs) */
html[lang="fa"] body{font-family:'Vazirmatn',var(--sans)}
html[lang="fa"] .display,html[lang="fa"] .lede,html[lang="fa"] .eyebrow,html[lang="fa"] .cta,
html[lang="fa"] .sub-form button{font-family:'Vazirmatn',var(--sans)}
html[lang="fa"] .display{letter-spacing:0;font-weight:500}
html[lang="fa"] .eyebrow{letter-spacing:.08em}

/* ══ SUBSCRIBE — minimal blocks + slim left sticky ══ */
.sub-block{border-top:1px solid rgba(140,130,118,.3);padding-top:40px;max-width:600px}
.sub-line{font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.4;margin-top:14px}
.sub-form{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.sub-form input:not([type="checkbox"]){flex:1;min-width:230px;background:transparent;border:1px solid rgba(140,130,118,.45);border-radius:100px;padding:14px 24px;font:inherit;font-size:.95rem;color:var(--pg-ink)}
.sub-form input:not([type="checkbox"])::placeholder{color:var(--pg-ink);opacity:.4}
.sub-form button{background:#8A8886;color:#fff;border:0;border-radius:100px;padding:14px 32px;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;transition:.3s}
.sub-form button:hover{opacity:.85}
.sub-ok{font-family:var(--serif);font-style:italic;font-size:1.15rem;margin-top:22px}
.sub-sticky{position:fixed;left:62px;top:50%;transform:translate(-50%,-50%) rotate(-90deg);z-index:70;font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:#fff;border:0;border-radius:100px;padding:20px 13px;text-decoration:none;background:#8A8886;transition:.3s}
.sub-sticky:hover{background:#767472;color:#fff}
@media(max-width:900px){.sub-sticky{display:none}}

/* blog post view */
.postview{max-width:760px}
.postview .pcat{font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;opacity:.6}
.postview h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.08;margin-top:16px}
.postview .pdate{margin-top:12px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;opacity:.5}
.postview .pcontent{margin-top:34px;font-size:1.04rem;line-height:1.85;opacity:.88}
.postview .pback{display:inline-block;margin-bottom:30px;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--pg-ink);text-decoration:none;opacity:.65}
.postview .pback:hover{opacity:1}
/* ══ THE DRAGONFLY JOURNAL — index + post chrome ══ */
.jfilters{display:flex;flex-wrap:wrap;gap:12px}
.jpill{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pg-ink);text-decoration:none;border:1px solid rgba(140,130,118,.4);border-radius:100px;padding:10px 20px;opacity:.75;transition:.3s}
.jpill:hover{opacity:1}
.jpill.on{background:var(--pg-ink);color:var(--pg-bg);opacity:1;border-color:var(--pg-ink)}
.jfeatured{display:grid;grid-template-columns:1.2fr 1fr;align-items:stretch}
.jfeatured .bimg{aspect-ratio:auto;min-height:320px}
@media(max-width:820px){.jfeatured{grid-template-columns:1fr}.jfeatured .bimg{aspect-ratio:16/10;min-height:0}}
.crumbs{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.pbyline{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;align-items:baseline}
.pbyline .pauthor{font-family:var(--serif);font-size:1rem;letter-spacing:.12em;text-transform:uppercase}
.pbyline .pcred,.pcred{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.ptoc{margin:38px 0;border:1px solid rgba(140,130,118,.35);border-radius:14px;padding:22px 26px;display:inline-block}
.ptoc a{display:block;color:var(--pg-ink);text-decoration:none;font-size:.92rem;padding:5px 0;opacity:.8}
.ptoc a:hover{opacity:1}
.pcontent h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,2.6vw,1.9rem);margin:40px 0 14px}
.pcontent p{margin:0 0 18px}
.pfaq-item{border-top:1px solid rgba(140,130,118,.3);padding:18px 0}
.pfaq-item h3{font-family:var(--serif);font-weight:500;font-size:1.15rem;margin-bottom:8px}
.pfaq-item p{opacity:.8;line-height:1.7}
.pauthorbox{margin-top:70px;border:1px solid rgba(140,130,118,.35);border-radius:16px;padding:26px 30px}

/* ══ HOMEPAGE header logo — plays the brand sting in place on load, then settles to static ══ */
.logo-wrap{position:relative;display:block;overflow:hidden}
.logo-anim{position:absolute;left:50%;top:50%;height:172%;width:auto;transform:translate(-50%,-48%);pointer-events:none;opacity:0;transition:opacity .45s ease}
.logo-wrap.playing .logo-anim{opacity:1}
/* ── newsletter issue: cover-only card -> opens the horizontal page-turn reader ── */
.issue-cover{display:inline-block;margin:26px 0 8px;text-decoration:none;cursor:pointer}
.issue-frame{display:block;width:min(400px,84vw);aspect-ratio:8.5/11;overflow:hidden;
  border:1px solid rgba(140,130,118,.42);border-radius:6px;background:#0F1830;
  box-shadow:0 26px 60px -32px rgba(15,24,48,.5);
  transition:transform .45s cubic-bezier(.4,0,.2,1),box-shadow .45s ease}
.issue-frame iframe{width:100%;height:100%;border:0;pointer-events:none}
.issue-cover:hover .issue-frame{transform:translateY(-6px);box-shadow:0 40px 80px -36px rgba(15,24,48,.6)}
.journal-title{white-space:nowrap;max-width:none;font-size:min(7vw,4.6rem);text-align:center}   /* always ONE line */
.journal-note{border-top:0;padding-top:0;max-width:none;text-align:center}
.journal-note .sub-line{font-size:clamp(0.95rem,1.5vw,1.45rem)}
.journal-note .cta{background:#8A8886;border-color:#8A8886;color:#fff}
.journal-note .cta:hover{background:#767472;border-color:#767472;color:#fff}
@media(min-width:640px){.journal-note .sub-line{white-space:nowrap}}              /* one line on anything but phones */
.journal-note .sub-form{max-width:620px;margin-left:auto;margin-right:auto}       /* form centres with its block */

.issue-cap{display:block;margin-top:14px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pg-ink)}

/* ── embedded weekly property edition (magazine iframe inside a post) ── */
.edition-embed{border:1px solid rgba(140,130,118,.4);border-radius:14px;overflow:hidden;background:#d7d3cc;margin:26px 0 10px}
.edition-embed iframe{display:block;width:100%;height:min(82vh,980px);border:0}
.edition-open{margin:4px 0 30px}
.edition-open a{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pg-ink);border-bottom:1px solid currentColor;text-decoration:none;padding-bottom:3px}

/* ══ NAV v2 — dropdowns · valuation CTA · mobile drawer (BAHAR_NAV_AND_PAGES_BRIEF) ══ */
.nav .nav-item{position:relative;display:inline-flex}
.nav .nav-sub{position:absolute;top:100%;left:50%;transform:translate(-50%,6px);min-width:176px;
  background:var(--pg-bg);border:1px solid rgba(140,130,118,.35);border-radius:14px;padding:8px;
  opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease;box-shadow:0 26px 60px -30px rgba(15,24,48,.35);z-index:90}
.nav .nav-item.has-sub:hover .nav-sub,.nav .nav-item.has-sub:focus-within .nav-sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav .nav-sub a{display:block;padding:9px 14px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pg-ink);text-decoration:none;border-radius:9px;opacity:.8;transform-origin:16px center}
.nav .nav-sub a:hover{opacity:1;transform:scale(1.08)}
.navburger{display:none;align-self:flex-start;background:none;border:1px solid rgba(140,130,118,.45);border-radius:10px;padding:11px 12px;cursor:pointer;flex-direction:column;gap:5px}
.navburger span{display:block;width:22px;height:1.6px;background:var(--pg-ink);transition:.3s}
header.bar.on-dark .navburger span{background:var(--off)}
.drawer{position:fixed;inset:0;z-index:99998;background:#0B0B0C;color:var(--off);display:flex;flex-direction:column;padding:110px 8vw 30px}
.drawer[hidden]{display:none}
.drawer-scroll{overflow:auto;flex:1}
/* owner 2026-07-23: the drawer covered the hamburger, leaving no way out. Explicit ✕ close,
   top-right where the hamburger sits, returns to the page. */
.drawer-close{position:absolute;top:14px;right:5vw;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid rgba(250,246,235,.4);border-radius:10px;color:var(--off);font-size:1.25rem;line-height:1;cursor:pointer;transition:background .3s,border-color .3s}
.drawer-close:hover{background:rgba(250,246,235,.12);border-color:rgba(250,246,235,.7)}
.drawer-item{border-bottom:1px solid rgba(250,246,235,.14)}
.drawer-row{display:flex;align-items:center;justify-content:space-between}
.drawer-row a{display:block;padding:19px 0;font-family:var(--serif);font-size:1.35rem;letter-spacing:.1em;text-transform:uppercase;color:var(--off);text-decoration:none}
.drawer-acc{background:none;border:0;color:var(--off);font-size:1.5rem;padding:10px 14px;cursor:pointer;opacity:.7}
.drawer-sub{max-height:0;overflow:hidden;transition:max-height .35s ease}
.drawer-item.open .drawer-sub{max-height:300px}
.drawer-sub a{display:block;padding:11px 0 11px 18px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,246,235,.75);text-decoration:none}
.drawer-cta{margin-top:22px;justify-content:center;color:var(--off);border-color:rgba(250,246,235,.4);text-align:center}
@media (prefers-reduced-motion:reduce){.nav .nav-sub,.drawer-sub{transition:none}}
@media(max-width:1180px){.bar .who .ttl{white-space:normal}}
/* The 9-item nav + CTA only fits on ONE line at >=1400px (measured). Below that it
   wrapped to 3 rows and the .magic underline floated down to the CTA. So: hamburger
   below 1400, full nav at/above. Keeps the 1512 desktop view unchanged. */
@media(max-width:1399px){
  .nav{display:none}
  .navburger{display:inline-flex}
  .bar .id{gap:0}
  .bar .who{display:none}
}
/* Keep navigation unmistakable on laptops and non-full-width desktop windows.
   Phones retain the compact icon-only control. */
@media(min-width:761px) and (max-width:1399px){
  .navburger{
    display:grid;
    grid-template-columns:auto 20px;
    grid-template-rows:repeat(3,2px);
    align-items:center;
    column-gap:11px;
    row-gap:5px;
    padding:10px 14px;
    color:inherit;
  }
  .bar .logo{height:clamp(96px,10vw,128px)}
  .navburger::before{
    content:"Menu";
    grid-column:1;
    grid-row:1 / 4;
    align-self:center;
    font-family:var(--sans);
    font-size:.64rem;
    font-weight:500;
    letter-spacing:.2em;
    line-height:1;
    text-transform:uppercase;
  }
  .navburger span{grid-column:2;width:20px}
  header.bar.on-dark .navburger{border-color:rgba(250,246,235,.48)}
}
/* ══ PAGE COMPONENTS — brief part 3/4 ══ */
.tbd{opacity:.55;font-style:italic;font-size:.98rem;line-height:1.7;max-width:62ch}
.pgrid2{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,5vw,70px);align-items:start}
.pgrid2.flip .pcol-media{order:2}
@media(max-width:900px){.pgrid2{grid-template-columns:1fr}.pgrid2.flip .pcol-media{order:0}}
.pcol-media{aspect-ratio:3/3.6;border-radius:20px;border:1px solid rgba(140,130,118,.38);overflow:hidden;
  background:radial-gradient(85% 60% at 50% 22%, rgba(194,161,90,.12), transparent 62%),linear-gradient(180deg, rgba(130,130,145,.10), rgba(130,130,145,.22));
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:26px}
/* owner 2026-07-23: real headshot fills the media column (Shahryar). */
.pcol-media:has(img){display:block;padding:0}
.pcol-media img{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:inherit;display:block}
.cards6{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(20px,3vw,40px)}
.card6{border:1px solid rgba(140,130,118,.35);border-radius:18px;padding:28px 28px 30px}
.card6 h3{font-family:var(--serif);font-weight:500;font-size:1.3rem;margin-bottom:10px}
.card6 p{font-size:.95rem;line-height:1.7;opacity:.82}
.mission{background:var(--navy);color:var(--off);border-radius:22px;padding:clamp(40px,6vw,80px)}
.mission h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,4vw,3rem)}
.mission .accent{color:var(--gold-ink)}
.lcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(22px,3vw,44px)}
.lcard{display:block;text-decoration:none;color:var(--pg-ink);border:1px solid rgba(140,130,118,.35);border-radius:18px;overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.lcard:hover{transform:translateY(-7px);box-shadow:0 34px 64px -42px rgba(15,24,48,.4)}
/* listing card internals (owner 2026-07-23) */
.lcard .limg{position:relative;aspect-ratio:3/2;overflow:hidden;background:linear-gradient(180deg,rgba(130,130,145,.10),rgba(130,130,145,.22))}
.lcard .limg img{width:100%;height:100%;object-fit:cover;display:block}
.lcard .lstatus{position:absolute;top:14px;left:14px;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#FAF6EB;background:rgba(15,24,48,.82);border-radius:100px;padding:6px 13px}
.lcard .lbody{padding:20px 22px 24px}
.lcard .lprice{font-family:var(--serif);font-size:1.6rem;font-weight:500;line-height:1}
.lcard .laddr{font-family:var(--serif);font-weight:500;font-size:1.16rem;margin-top:8px;line-height:1.25}
.lcard .lloc{font-size:.9rem;opacity:.72;margin-top:3px}
.lcard .lspecs{font-size:.92rem;opacity:.85;margin-top:13px;letter-spacing:.01em}
.lcard .lmeta{font-size:.72rem;opacity:.6;margin-top:9px;letter-spacing:.08em;text-transform:uppercase}
.lcard .lagent{font-size:.8rem;margin-top:15px;padding-top:13px;border-top:1px solid rgba(140,130,118,.28);opacity:.85}
/* blog post inline figures (owner 2026-07-23) */
.pcontent figure.post-fig{margin:38px 0}
.pcontent figure.post-fig img{width:100%;height:auto;border-radius:16px;display:block}
.pcontent figure.post-fig figcaption{margin-top:12px;font-size:.82rem;opacity:.68;line-height:1.5}
:root[dir="rtl"] .pcontent,[dir="rtl"] .pcontent{text-align:right}
.lmedia{aspect-ratio:16/11;background:linear-gradient(140deg,#16223F 0%,#22345c 55%,#C2A15A 135%);position:relative;display:flex;align-items:flex-start;justify-content:flex-end;padding:14px}
.lbadge{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:#FAF6EB;border:1px solid rgba(250,246,235,.55);border-radius:100px;padding:5px 13px;background:rgba(15,24,48,.35)}
.lbody{padding:20px 22px 24px}
.lprice{font-family:var(--serif);font-size:1.5rem}
.laddr{margin-top:6px;font-size:.95rem;opacity:.8}
.lmeta{margin-top:10px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.filterbar{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 44px}
.filterbar select{background:transparent;border:1px solid rgba(140,130,118,.45);border-radius:100px;padding:11px 18px;font:inherit;font-size:.8rem;color:var(--pg-ink)}
.statstrip{display:flex;flex-wrap:wrap;gap:clamp(26px,6vw,80px);margin:8px 0 40px}
.stat .sn{font-family:var(--serif);font-size:clamp(1.8rem,3.6vw,2.8rem)}
.stat .sl{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;opacity:.6;margin-top:4px}
.doorways{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
@media(max-width:820px){.doorways{grid-template-columns:1fr}}
.doorway{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;border-radius:20px;overflow:hidden;text-decoration:none;color:var(--off);padding:30px;background:linear-gradient(160deg,#1b2a4c 0%,#16223F 55%,#0F1830 100%)}
.doorway h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.3rem)}
.doorway p{margin-top:8px;opacity:.8}
.doorway .arr{position:absolute;top:26px;right:28px;font-size:1.5rem;color:var(--gold-ink);transition:transform .3s}
.doorway:hover .arr{transform:translateX(6px)}
.steps{counter-reset:st;display:grid;gap:22px;max-width:720px}
.step{display:flex;gap:20px;align-items:flex-start}
.step .sn{counter-increment:st;font-family:var(--serif);font-size:1.5rem;color:var(--gold-ink);min-width:44px}
.step h3{font-family:var(--serif);font-weight:500;font-size:1.2rem;margin-bottom:6px}
.faq details{border-top:1px solid rgba(140,130,118,.3);padding:6px 0}
.faq summary{cursor:pointer;font-family:var(--serif);font-size:1.15rem;padding:16px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--gold-ink);font-size:1.3rem}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 18px;opacity:.8;line-height:1.7}
.vform,.cform{display:grid;gap:16px;max-width:560px}
.vform input,.vform select,.cform input,.cform select,.cform textarea{background:transparent;border:1px solid rgba(140,130,118,.45);border-radius:14px;padding:15px 20px;font:inherit;font-size:.95rem;color:var(--pg-ink);width:100%}
.cform textarea{min-height:130px;resize:vertical}
.vform button,.cform button{background:var(--pg-ink);color:var(--pg-bg);border:0;border-radius:100px;padding:16px 34px;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;justify-self:start}
.spring-letter{display:flex;justify-content:flex-end}
.spring-letter .sub-block{border-top:0;border:1px solid rgba(140,130,118,.35);border-radius:20px;padding:36px 40px;max-width:520px;width:100%}
@media(max-width:820px){.spring-letter{justify-content:center}}
.foot-left{display:flex;flex-direction:column;gap:18px}
.sub-form--compact{margin-top:0}
.sub-form--compact input:not([type="checkbox"]){min-width:170px;padding:10px 16px;font-size:.85rem}
.sub-form--compact button{padding:10px 20px;font-size:.66rem}

/* two-row header at mid widths: nav takes its own row under the identity block */
@media(min-width:1621px){
  .hero{padding-top:calc(var(--navzone-h,120px) + clamp(46px,7vh,90px))}
  .nav{align-self:flex-start;margin-top:clamp(30px,2.6vw,46px);transition:margin-top .5s cubic-bezier(.4,0,.2,1)}
  header.bar.condensed .nav{margin-top:72px}
}
@media(max-width:1620px) and (min-width:1400px){
  /* A 14–16" laptop still receives the full navigation, but not the
     oversized presentation masthead used by very wide displays. */
  header.bar{
    flex-wrap:wrap;
    align-items:flex-start;
    row-gap:4px;
    padding-top:10px;
    padding-bottom:8px;
  }
  .bar .id{
    flex-direction:row;
    align-items:center;
    gap:clamp(28px,3vw,48px);
  }
  .bar .logo{height:clamp(118px,9.5vw,148px)}
  .bar .who .team{margin-bottom:6px;padding-bottom:4px}
  .bar .who .nm{font-size:.92rem}
  .bar .who .nm2{margin-top:6px}
  .bar .who .ttl{font-size:.56rem;margin-top:3px}
  .nav{
    order:4;
    width:100%;
    justify-content:flex-start;
    margin-top:0;
  }
}

/* ══ SITE-WIDE RESPONSIVE QC — compact phones, landscape phones and tablets ══
   Keep the editorial breathing room without allowing fixed card widths, single-line
   titles or small form type to break narrow screens. */
@media(max-width:760px){
  .hero-c .display,
  .journal-title{
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
    hyphens:none;
    font-size:clamp(2.15rem,11vw,3.65rem);
    line-height:1;
  }
  .hero-c .lede,
  .journal-note .sub-line{white-space:normal}

  .bloggrid,
  .quotes,
  .cards6,
  .lcards{grid-template-columns:minmax(0,1fr)}

  .sub-form{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .sub-form input:not([type="checkbox"]),
  .sub-form--compact input:not([type="checkbox"]){min-width:0;width:100%;font-size:16px}
  .sub-form button{width:100%}

  .vform input,
  .vform select,
  .cform input,
  .cform select,
  .cform textarea,
  .filterbar select{font-size:16px}

  .issue-frame{width:100%;max-width:400px}
  .edition-embed iframe{height:clamp(360px,72svh,720px);min-height:0}

  /* Inline 28vh article spacing is too short on landscape phones and too tall on
     some portrait screens. Tie it to the actual compact header instead. */
  section:has(> .postwrap){
    padding-top:calc(var(--header-h,128px) + 28px)!important;
  }
}

@media(max-width:380px){
  .card6,
  .bcard .bbody,
  .lcard .lbody{padding-left:20px;padding-right:20px}
  .ptoc{display:block;padding:20px}
  .hood-nav{gap:18px;align-items:flex-start;flex-direction:column}
}


/* ══════════════════════════════════════════════════════════════════════
   DESCENT — canvas frame-scrub set-piece inside #dive (the Apple moment).
   Canvas is the BASE plate (z0); the existing .cam CSS stages ride above it
   and still play their pool→underwater→sky choreography untouched.
   Scrim is navy-only per palette law: rgba(15,24,48,x) — never a warm scrim.
   ══════════════════════════════════════════════════════════════════════ */
#descent{position:absolute;inset:0;display:block;width:100%;height:100vh;z-index:0;
  opacity:0;transition:opacity .7s ease;background:#0F1830;
  filter:saturate(1.12) contrast(1.06)}   /* let the blossom sing */
#dive.descent-ready #descent{opacity:1}
/* NO FEATHERS. The scrim is transparent across the frame and resolves to SOLID #0F1830
   at the bottom boundary, so the join to the next section is invisible with a HARD edge —
   no fog band, no mask feather, no vignette. Type legibility comes from the LOCAL scrim
   behind the beat block only (see #dive .dbeat::before), never a full-frame wash. */
#dive .descent-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(15,24,48,0) 74%, rgba(15,24,48,.5) 88%, rgba(15,24,48,1) 100%)}

/* RETIRED: the placeholder CSS cinematic (.cam sun/water/under/sky + bloom) painted
   fully-opaque blue gradients OVER the canvas — that is why the descent frames read as
   an empty blue wash. The real aerial has landed, so the stand-in comes out. */
#dive .cam,#dive .bloom{display:none}
#dive .descent-beats{position:absolute;inset:0;z-index:4;pointer-events:none}
/* beats sit in the LOWER third so they never collide with the centred #diveline */
/* NOTE: max-width in `ch` + 8vw padding under border-box left almost no content width,
   which stacked the eyebrow one word per line. Sized in px against the viewport instead. */
#dive .dbeat{position:absolute;left:0;right:0;bottom:13vh;margin:0 auto;
  max-width:min(900px,92vw);padding:0 2vw;text-align:center;
  opacity:0;will-change:opacity,transform}
/* the HEADLINE is what wraps — constrain it in ch so line length is editorial (~2 lines),
   never the one-word-per-line stack a squeezed container produced. */
#dive .dbeat .display{max-width:24ch;margin-left:auto;margin-right:auto}
/* Owner 2026-07-23: the local navy scrim BOX behind the beat copy read as cheap — removed.
   Legibility over bright blossom now rides a boxless text-shadow, never a panel. */
#dive .dbeat .eyebrow{white-space:nowrap}
#dive .dbeat .eyebrow{display:block;margin-bottom:18px;color:#FAF6EB;opacity:.7;text-shadow:0 1px 20px rgba(15,24,48,.62),0 1px 3px rgba(15,24,48,.5)}
#dive .dbeat .display{color:#FAF6EB;font-size:clamp(1.7rem,4.4vw,3.2rem);line-height:1.06;text-shadow:0 2px 28px rgba(15,24,48,.68),0 1px 4px rgba(15,24,48,.5)}
#dive .dbeat .lede{color:#FAF6EB;opacity:.82;margin-top:14px;font-size:clamp(1rem,1.5vw,1.15rem);text-shadow:0 1px 20px rgba(15,24,48,.62),0 1px 3px rgba(15,24,48,.5)}
/* MUTUAL EXCLUSION: the descent carries the three BEATS (they hold real information).
   #diveline is the legacy spoken line — suppressed entirely so two text systems can never
   render on the same plate. The timeline still swaps its textContent; it is just not shown. */
#dive .line{display:none}
@media (prefers-reduced-motion:reduce){
  #descent{transition:none}
  #dive .dbeat{position:relative;opacity:1!important;transform:none!important}
}

/* The colour journey SNAPS --pg-ink (never interpolates it). This transition turns the
   hard switch into a settle rather than a flicker. `color` is inherited, so animating it
   on html/body carries every descendant that doesn't set its own colour. */
html,body,.eyebrow,.scrollcue,.hero .im,.hero h1,.said,.display,.lede{transition:color .18s linear}

/* ══ SCENE VIDEO BEDS — full-bleed loop footage behind a section's copy.
   .wrap already sits at z-index:2, so text rides above without extra rules.
   Scrim is navy-only per palette law (rgba(15,24,48,x)) — never a warm scrim. ══ */
/* ── MELT (Apple law: media melts into the page — no visible clip boundary) ──
   The bed rides ON the page colour (never black, even before the video decodes) and its
   top+bottom edges feather into --pg-bg, so scrolling in reveals the footage GRADUALLY out
   of the cream rather than a hard black box that pops. The feather is a GPU mask — no
   per-frame JS, no scroll write. The local text scrim (.wrap::before) is OUTSIDE this mask,
   so copy legibility never rides the melt. */
.scenebg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:var(--pg-bg);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%)}
.scenebg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.scenebg-scrim{position:absolute;inset:0;
  /* Full-frame scrim eased WAY back from .72/.58/.78 — that crush was the reason the bed read
     as a black box. Footage now reads bright and cinematic; type legibility comes from the
     LOCAL scrim behind the copy block only (.scenebg ~ .wrap::before), never a full wash —
     same law the descent bed already follows. */
  background:linear-gradient(180deg,rgba(15,24,48,.38) 0%,rgba(15,24,48,.28) 46%,rgba(15,24,48,.52) 100%)}
/* these three sections now carry footage — hold the copy clear of the top edge */
.scenebg ~ .wrap{padding-block:2vh}
@media (prefers-reduced-motion:reduce){ .scenebg video{display:none} }  /* poster layer only */

/* A section with a .scenebg now has a DARK (navy-scrimmed) video bed, so gold type there
   must use the LIGHT gold #C2A15A (6.40:1 on navy), not the light-ground --gold-ink. */
.scenebg ~ .wrap .accent{color:var(--gold)}


/* ══ ONE-FILM GRADE ══════════════════════════════════════════════════════════
   The section footage (B/C/D + walkthrough) was shot warm — cedar and glass.
   The descent is cool: brick Federal at blue hour. On one page they read as two
   different shoots. Subject can't be fixed in CSS, but temperature can: pull the
   warm footage toward the navy world so the page reads as ONE film.
   Applied to CONTENT video only — never #logosting (the logo must stay true). */
.cine-frame video,
.scenebg video{
  filter:saturate(.88) contrast(1.04) brightness(.96) hue-rotate(-4deg);
}

/* ══ SECTION CARRYING A VIDEO BED — type must be LIGHT and locally scrimmed.
   The Promise sits on dark footage; --pg-ink can resolve dark there and the copy
   disappeared. Force the vanilla ink and put a scrim behind the TEXT BLOCK only. ══ */
.scenebg ~ .wrap,
.scenebg ~ .wrap p,
.scenebg ~ .wrap .lede,
.scenebg ~ .wrap .eyebrow,
.scenebg ~ .wrap h2{color:#FAF6EB;text-shadow:0 2px 26px rgba(15,24,48,.72),0 1px 4px rgba(15,24,48,.6)}
.scenebg ~ .wrap .eyebrow{opacity:.78}
.scenebg ~ .wrap{position:relative;z-index:2}
/* Owner 2026-07-23: the local navy scrim BOX behind the copy read as cheap — removed.
   Legibility for the light type now rides the boxless text-shadow above + the full-frame
   .scenebg-scrim, never a panel. */
/* gold accent still wins on a dark bed */
.scenebg ~ .wrap .accent{color:var(--gold)}
/* "of Compass" reads as the quiet third line of the wordmark: smaller than
   BOUTIQUE, centred under it, and sitting directly beneath with no extra
   leading. text-indent cancels the trailing letter-space so the optical
   centre matches the geometric one. The brand box hugs its widest line
   (BOUTIQUE) so "centred" means centred on the lockup, not on the column. */
.sb-footer__brand{width:max-content;max-width:100%}
.foot-suffix{display:block;font-size:.54rem;letter-spacing:.24em;text-indent:.24em;
  text-transform:uppercase;opacity:.72;margin-top:0;text-align:center}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER — one calm masthead system for every desktop width           (b50)
   Replaces two conflicting layouts: the ≥1621px "presentation masthead"
   (which stacked nav-over-logo-over-names and stood 552px tall — over half
   a viewport) and the 1400–1620px row. At rest it is a compact masthead;
   the moment the page moves it becomes a single slim bar, giving the films
   and the editorial their negative space back.
   ═══════════════════════════════════════════════════════════════════════ */
@media(min-width:1400px){
  header.bar{
    flex-wrap:wrap;
    align-items:flex-start;
    row-gap:0;
    padding-top:clamp(14px,1.5vh,20px);
    padding-bottom:clamp(8px,1vh,14px);
  }
  .bar .id{
    flex-direction:row;          /* names beside the logo, never stacked under it */
    align-items:center;
    gap:clamp(24px,2.2vw,40px);
  }
  .bar .logo{height:clamp(100px,7.2vw,126px)}      /* one size down from the old masthead */
  .bar .who{max-width:none;transition:opacity .5s ease,max-height .6s cubic-bezier(.4,0,.2,1),max-width .6s cubic-bezier(.4,0,.2,1)}
  .bar .who .team{margin-bottom:5px;padding-bottom:4px}
  .bar .who .nm{font-size:.9rem}
  .bar .who .nm2{margin-top:5px}
  .bar .who .ttl{font-size:.55rem;margin-top:3px}
  .bar .nav{
    order:4;
    width:100%;
    align-self:auto;
    justify-content:flex-start;
    margin-top:clamp(4px,.6vh,10px);
    transition:margin-top .5s cubic-bezier(.4,0,.2,1),gap .5s ease;
  }

  /* ── condensed: names retire, logo halves, nav joins the logo's row ── */
  header.bar.condensed{
    flex-wrap:nowrap;
    align-items:center;
    padding-top:clamp(7px,.8vh,12px);
    padding-bottom:clamp(7px,.8vh,12px);
  }
  header.bar.condensed .id{gap:0}
  header.bar.condensed .logo{height:clamp(38px,2.70vw,46px)}   /* ≈ half the at-rest mark */
  header.bar.condensed .who{max-width:0;max-height:0;opacity:0;overflow:hidden}
  header.bar.condensed .nav{
    order:0;
    width:auto;
    margin-top:0;
    margin-left:auto;
    justify-content:flex-end;
    gap:clamp(8px,1vw,18px);
  }
  header.bar.condensed .nav a{font-size:.74rem;padding:8px 2px 10px}
  header.bar.condensed .nav-cta{font-size:.68rem;padding:9px 18px}
}

/* The skirt under the header was a 140px gradient — it washed the top of every
   film and read as an unwanted feather. Keep only enough to soften the edge. */
header.bar::after{height:52px}
header.bar.condensed.scrolled::after{opacity:.85}

/* The logo-sting underlay is deliberately larger than the mark so the animation
   registers, but it is opaque — it must never paint over the agents' names. */
.bar .who{position:relative;z-index:3}

/* The logo sting is a hero moment only. Once the bar condenses it must be gone:
   its underlay is opaque page-cream and was painting a pale plate over the navy
   chapters, with the dark mark on top. The static logo is the permanent layer. */
header.bar.condensed #logosting,
header.bar.condensed #stingback{opacity:0!important}
/* Dark chapters take the light mark. */
.editorial-home header.bar.editorial-dark .logo-black{display:none}
.editorial-home header.bar.editorial-dark .logo-white{display:block}
.editorial-home header.bar.editorial-dark #stingback{background:var(--sb-deep)}

/* ══════════════════════════════════════════════════════════════════════════
   MEDIUM WINDOWS — the full masthead, and a logo that shrinks the right way
   Two faults reported from a half-screen window:

   1. Medium windows fell back to the burger, leaving a nearly empty header
      beside one small button. They now carry the same navigation as large
      windows, scaled to the measure; only true phones keep the burger.

   2. The condensed logo was 140px while the at-rest logo was 112px, so the
      mark GREW on scroll instead of shrinking — the reverse of the intent,
      and only at these widths (large screens were always correct).
   ═══════════════════════════════════════════════════════════════════════ */
@media(min-width:1000px) and (max-width:1399px){
  .nav{display:flex}
  .navburger{display:none}

  /* the mark is smaller at rest here, and always smaller again once condensed */
  .bar .logo{height:clamp(84px,8.4vw,112px)}
  header.bar.condensed .logo{height:clamp(34px,3.45vw,45px)}

  /* the identity block stacks, as it does on large screens */
  header.bar .id{flex-direction:column;align-items:flex-start;gap:clamp(14px,1.8vh,24px)}

  /* the navigation spans its own line, proportioned to the window */
  header.bar .nav{
    flex:1 1 100%;
    width:100%;
    justify-content:space-between;
    gap:clamp(6px,.8vw,16px);
    margin-top:clamp(10px,1.4vh,20px);
    flex-wrap:nowrap;
  }
  .nav a{font-size:clamp(.78rem,.95vw,.94rem);letter-spacing:.1em;padding:8px 2px 12px;white-space:nowrap}  /* floor 12.5px — the old .56rem floor was 9px, unreadable in a half-size window */
  .nav .nav-item>a[href="/newsletter/"]{font-size:clamp(.5rem,.62vw,.62rem)}
  .nav-cta{
    font-size:clamp(.54rem,.68vw,.66rem);
    padding:9px 14px;
    letter-spacing:.1em;
    white-space:nowrap;
    margin-left:clamp(6px,.9vw,16px);
  }
  /* hover scale is too much at this measure — it would collide with neighbours */
  .nav a:hover{transform:scale(1.1)}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE POINTER — visible first, elegant second
   The page hid the system cursor and drew a 33px dragonfly in its place. It
   tracked correctly, but a thin silhouette on cream is genuinely hard to
   find, and a pointer you have to hunt for is a broken pointer. The real
   cursor comes back everywhere, and the custom mark becomes a fine ring that
   trails it — the touch of difference, without the guessing.
   ═══════════════════════════════════════════════════════════════════════ */
@media (hover:hover) and (pointer:fine){
  .dfly-page,
  .dfly-page a,
  .dfly-page button,
  .dfly-page input,
  .dfly-page label{cursor:auto}
  .dfly-page a,
  .dfly-page button,
  .dfly-page label,
  .dfly-page [role="button"],
  .dfly-page summary{cursor:pointer}
  .dfly-page input,
  .dfly-page textarea,
  .dfly-page select{cursor:text}
  .dfly-page input[type="checkbox"],
  .dfly-page input[type="radio"],
  .dfly-page select{cursor:pointer}

  /* the ring: hairline, unfilled, slightly behind the pointer */
  #cursor{
    width:30px;
    height:30px;
    mix-blend-mode:normal;
    transition:opacity .3s ease;
  }
  #cursor .dfly-mask{
    width:100%;
    height:100%;
    background:none;
    -webkit-mask-image:none;
            mask-image:none;
    border:1.25px solid currentColor;
    border-radius:50%;
    opacity:.42;
    transition:transform .28s cubic-bezier(.22,.7,.2,1),opacity .28s ease,border-color .3s ease;
  }
  /* over anything clickable the ring opens and lightens, so the native arrow
     stays the thing you read and the ring is only an accent */
  #cursor.on-link .dfly-mask{transform:scale(1.5);opacity:.26}
}
/* Touch, coarse pointers and reduced motion never get the ring. */
@media (hover:none),(pointer:coarse){
  #cursor{display:none}
  .dfly-page,.dfly-page a,.dfly-page button,.dfly-page input,.dfly-page label{cursor:auto}
}
@media (prefers-reduced-motion:reduce){
  #cursor{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   LOGO CONDENSE — 40% smaller, never more, at every size
   The mark was dropping to roughly half its resting height, which left it
   unreadable; and at medium widths it was inverted, growing on scroll.
   Condensed is now 0.6x the resting height everywhere.
   ═══════════════════════════════════════════════════════════════════════ */
@media(min-width:1400px){
  header.bar.condensed .logo{height:clamp(45px,3.24vw,57px)}   /* 0.6 x 100/7.2vw/126 */
}
@media(min-width:1000px) and (max-width:1399px){
  header.bar.condensed .logo{height:clamp(38px,3.78vw,50px)}   /* 0.6 x 84/8.4vw/112 */
}
@media(min-width:721px) and (max-width:999px){
  .bar .logo{height:clamp(76px,9vw,100px)}
  header.bar.condensed .logo{height:clamp(34px,4.05vw,45px)}    /* 0.6 x the above */
}
@media(max-width:720px){
  header.bar .logo{height:clamp(50px,13.5vw,64px)}
  header.bar.condensed .logo{height:clamp(22px,6.07vw,28px)}    /* 0.6 x the above */
}

/* ══════════════════════════════════════════════════════════════════════════
   THE MASTHEAD IS OPAQUE, AND IT CONDENSES SMOOTHLY
   Two faults, one cause. The bar was transparent at rest, so anything
   scrolling beneath it read as text crossing the navigation — it was never
   an overlap in layout, it was the page showing through. And the condense
   changed height, logo and padding with no shared timing, so it snapped.

   The bar now always carries its own surface, and every property that moves
   during condensing moves on the same curve and duration as the rest of the
   site's motion.
   ═══════════════════════════════════════════════════════════════════════ */
header.bar{
  background:var(--pg-cream,#FAF6EB);
  transition:
    background-color .5s cubic-bezier(.4,0,.2,1),
    padding .55s cubic-bezier(.4,0,.2,1),
    color .45s,
    opacity .55s ease;
}
header.bar.on-dark,
header.bar.editorial-dark{background:var(--navy,#16223F)}
header.bar.condensed{background:var(--pg-cream,#FAF6EB)}
header.bar.condensed.on-dark,
header.bar.condensed.editorial-dark{background:var(--navy,#16223F)}

/* everything that moves while condensing shares one curve */
.bar .id,
.bar .logo,
.bar .who,
.bar .nav,
.bar .nav-cta{
  transition:
    height .55s cubic-bezier(.4,0,.2,1),
    max-height .55s cubic-bezier(.4,0,.2,1),
    max-width .55s cubic-bezier(.4,0,.2,1),
    gap .55s cubic-bezier(.4,0,.2,1),
    margin .55s cubic-bezier(.4,0,.2,1),
    padding .55s cubic-bezier(.4,0,.2,1),
    opacity .42s ease,
    transform .55s cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion:reduce){
  header.bar,
  .bar .id,.bar .logo,.bar .who,.bar .nav,.bar .nav-cta{transition:none}
}

/* --pg-cream is itself transparent (it drives the page wash), so binding the
   masthead to it produced a bar with alpha 0 — which is exactly what let the
   headline read through the navigation. Literal surfaces here. */
header.bar{background:#FAF6EB}
header.bar.on-dark,
header.bar.editorial-dark,
header.bar.condensed.on-dark,
header.bar.condensed.editorial-dark{background:#16223F}
header.bar.condensed{background:#FAF6EB}

/* The snap: condensing flipped flex-wrap from wrap to nowrap, which moves the
   navigation up a whole row in a single frame — 305px to 82px, untweenable.
   The rows stay put; the identity block collapses on the shared curve, so the
   masthead shortens continuously instead of jumping. */
@media(min-width:1000px){
  header.bar.condensed{flex-wrap:wrap}
  header.bar.condensed .nav{margin-top:clamp(4px,.6vh,10px)}
  header.bar.condensed .who{
    max-height:0;
    opacity:0;
    margin:0;
    overflow:hidden;
    pointer-events:none;
  }
  header.bar.condensed .id{gap:0}
}

/* The sliding rule beneath the navigation is retired site-wide — every page,
   every breakpoint. The active item carries its state by weight and opacity
   alone, which is quieter and never draws a line under a heading. */
.nav .magic{display:none!important}
.nav a.active::after,
.nav a::after{display:none!important}
.nav a.active{opacity:1;text-decoration:none}

/* The bar begins condensing within 10px of scroll, but a 550ms shrink meant
   it was still at full height for half a second while the copy was already
   moving — which is exactly the overlap being reported. Quick enough that
   nothing catches a tall bar, slow enough to still read as a movement. */
header.bar,
.bar .id,.bar .logo,.bar .who,.bar .nav,.bar .nav-cta{
  transition-duration:.28s!important;
  transition-timing-function:cubic-bezier(.32,.72,.28,1)!important;
}
@media (prefers-reduced-motion:reduce){
  header.bar,.bar .id,.bar .logo,.bar .who,.bar .nav,.bar .nav-cta{transition-duration:0s!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT — the salutation sits over the advisors, not over the page
   "Contact" and "Let's Connect" were centred on the viewport while the two
   advisor columns sat in the right-hand half, so nothing shared an axis. The
   heading now uses the same two-column grid as the body beneath it and takes
   the second column, which puts it on the advisors' centre line. "Languages"
   already centres within that column, so all three now agree.
   ═══════════════════════════════════════════════════════════════════════ */
@media(min-width:901px){
  .hero-c--aligned .wrap{
    display:grid;
    grid-template-columns:1fr 1.15fr;          /* identical to .pgrid2 below */
    gap:clamp(30px,5vw,70px);
    align-items:end;
  }
  .hero-c--aligned .wrap > .eyebrow,
  .hero-c--aligned .wrap > .display{
    grid-column:2;
    text-align:center;
    margin-left:0;
    margin-right:0;
  }
}

/* The series has no episodes published yet, so the invitation says so rather
   than pointing at an empty channel. */
.mission__soon{
  margin-top:14px;
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  opacity:.62;
}

/* ══════════════════════════════════════════════════════════════════════════
   THE MATTE FRAME IS RETIRED — the background runs edge to edge
   #pageframe painted a near-white (#FFFCF7) passe-partout down the left and
   right of every page (and half across the top) using a 220px box-shadow.
   That is what read as white side bars on every screen. Each section now
   carries its own colour the full width of the display, the way the sites
   this is measured against do.
   ═══════════════════════════════════════════════════════════════════════ */
#pageframe{display:none!important}
html,body{background:var(--pg-bg,#FAF6EB)}

/* ══════════════════════════════════════════════════════════════════════════
   RTL PAGES KEEP THE MASTHEAD IN ITS FIXED ORDER
   dir="rtl" mirrors the whole document, which reversed the navigation on the
   Farsi blog and newsletter — the mark jumped right, the menu ran backwards,
   and the site read as a different site. Navigation is chrome, not prose: it
   holds one order everywhere. Only the page's own content mirrors.
   ═══════════════════════════════════════════════════════════════════════ */
[dir="rtl"] header.bar,
[dir="rtl"] .bar .id,
[dir="rtl"] .bar .nav,
[dir="rtl"] .bar .nav-sub,
[dir="rtl"] .bar .nav-cta,
[dir="rtl"] .navburger,
[dir="rtl"] .drawer,
[dir="rtl"] .drawer .dnav,
[dir="rtl"] footer{
  direction:ltr;
}
/* the advisors' own names stay left-read inside that chrome */
[dir="rtl"] .bar .who,
[dir="rtl"] .bar .who *{direction:ltr;text-align:left}
/* …while anything genuinely Farsi inside the drawer still reads right-to-left */
[dir="rtl"] .drawer [lang="fa"]{direction:rtl;text-align:right}

/* ══════════════════════════════════════════════════════════════════════════
   THE MASTHEAD IS ONE FIXED ROW — it never resizes
   Everything sits on a single line from the first paint: the mark at the far
   left, the two names beside it, the navigation and the call to action at the
   right, with real air on both sides of the navigation. Nothing condenses,
   nothing reflows, nothing shifts as the page moves — which also ends, at its
   source, every overlap between the headline and the bar.
   ═══════════════════════════════════════════════════════════════════════ */
@media(min-width:1400px){
  header.bar,
  header.bar.condensed{
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:clamp(28px,3vw,58px);
    padding-top:clamp(14px,1.5vh,22px)!important;
    padding-bottom:clamp(14px,1.5vh,22px)!important;
  }
  /* the identity block: mark, then the names tucked in beside it */
  header.bar .id,
  header.bar.condensed .id{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:clamp(16px,1.5vw,26px)!important;
    flex:0 0 auto;
  }
  /* one constant mark size, at rest and at every scroll position */
  header.bar .logo,
  header.bar.condensed .logo{height:clamp(44px,3.30vw,56px)!important}

  /* the names stay open — they are the masthead's substance, not a detail */
  header.bar .who,
  header.bar.condensed .who{
    max-width:none!important;
    max-height:none!important;
    opacity:1!important;
    overflow:visible!important;
    display:flex!important;
    flex-direction:column;
    gap:1px;                      /* tucked closer together */
    line-height:1.24;
    pointer-events:auto!important;
  }
  header.bar .who .team{font-size:.52rem;letter-spacing:.2em}
  header.bar .who .nm{font-size:.72rem;letter-spacing:.11em}   /* one step down */
  header.bar .who .ttl{font-size:.48rem;letter-spacing:.09em;opacity:.62}
  header.bar .who .nm2{margin-top:5px}

  /* navigation and its call to action ride the right, with air on both sides */
  header.bar .nav,
  header.bar.condensed .nav{
    margin-left:auto!important;
    margin-top:0!important;
    gap:clamp(20px,2.1vw,40px)!important;
  }
  header.bar .nav-cta,
  header.bar.condensed .nav-cta{margin-left:clamp(20px,2vw,38px)!important;flex:0 0 auto}
}

/* The bar rides as .condensed on every scrolled page, and its .74rem nav rule
   was outranking the readable floor — links measured 11.8px in a half-size
   window. One rule for both states, and the row never wraps. */
@media(min-width:1400px){
  header.bar .nav a,
  header.bar.condensed .nav a{font-size:clamp(.78rem,.95vw,.92rem)}
  header.bar .nav,
  header.bar.condensed .nav{flex-wrap:nowrap}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE MARK STANDS ALONE, AND STANDS LARGER
   With the executive-team block gone from the masthead, the mark carries the
   left on its own — so it takes the room that block was using. Two sizes up,
   and the artwork itself now sets OF COMPASS large enough to read.
   ═══════════════════════════════════════════════════════════════════════ */
@media(min-width:1400px){
  header.bar .logo,
  header.bar.condensed .logo{height:clamp(69px,5.25vw,88px)!important}
  header.bar .id,
  header.bar.condensed .id{gap:0!important}
}
@media(min-width:1000px) and (max-width:1399px){
  header.bar .logo,
  header.bar.condensed .logo{height:clamp(58px,4.80vw,72px)!important}
}
@media(max-width:720px){
  header.bar .logo,
  header.bar.condensed .logo{height:clamp(50px,12.75vw,63px)!important}
}

/* Two languages, one per line — a clause hyphenated across a line break read
   as a broken heading rather than as the two things being offered. */
.card6__langs{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.card6__langs li{
  position:relative;
  padding-left:18px;
  font-size:1.02rem;
  line-height:1.35;
  color:var(--pg-ink);
}
.card6__langs li::before{
  content:"";
  position:absolute;
  left:0;
  top:.58em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold,#C2A15A);
}

/* The native script sits to the RIGHT of its English label. Without the bdi
   isolate the bidi algorithm reorders the run to the head of the line, which
   is why the Persian was landing first. */
.card6__langs .lang-native{
  margin-left:.45em;
  font-family:'Vazirmatn',var(--sans,inherit);
  font-size:.94em;
  opacity:.72;
  unicode-bidi:isolate;
}

/* Seven cards into a two-column grid leaves the last one alone on its row.
   Letting it run the full width reads as a deliberate closing statement
   rather than as a leftover. Only when the count is genuinely odd, and only
   at the width where the grid is two columns. */
@media(min-width:600px) and (max-width:1099px){
  .cards6>.card6:last-child:nth-child(odd){grid-column:1/-1}
}

/* Nine cards into four columns strands the last one alone at 288px. Three
   columns divides evenly AND gives the body copy a proper measure — 288px was
   a narrow column to read a paragraph in. A lone last card still spans, for
   whatever count comes next. */
@media(min-width:1100px){
  .cards6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards6>.card6:last-child:nth-child(3n+1){grid-column:1/-1}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE MARK, AT ITS OWN PROPORTIONS, LARGE ENOUGH TO READ
   "OF COMPASS" had been stretched 1.4x on its own inside the artwork, which
   broke the lockup — in the real mark that line is small and centred under
   "spring", and the mark is not ours to redraw. The artwork is restored, and
   legibility is now solved the only honest way: by scaling the WHOLE mark.

   "OF COMPASS" measures 4.80% of the logo's height, so the rendered size of
   that line is simply height x 0.048. The heights below put it at roughly
   8-8.5 CSS px on every screen — and on a phone, at 3x device pixels, that is
   about 22 real pixels, which reads instantly without zooming.
   ═══════════════════════════════════════════════════════════════════════ */
@media(min-width:1400px){
  header.bar .logo,
  header.bar.condensed .logo{height:132px!important}        /* OF COMPASS ≈ 8.4px */
}
@media(min-width:1100px) and (max-width:1399px){
  header.bar .logo,
  header.bar.condensed .logo{height:129px!important}        /* ≈ 8.3px */
}
@media(min-width:721px) and (max-width:1099px){
  header.bar .logo,
  header.bar.condensed .logo{height:124px!important}        /* ≈ 8.0px */
}
@media(max-width:720px){
  header.bar .logo,
  header.bar.condensed .logo{height:112px!important}        /* ≈ 7.2px x3 DPR = 22 device px */
}
@media(max-width:380px){
  header.bar .logo,
  header.bar.condensed .logo{height:99px!important}        /* narrow phones keep the mark whole */
}
@media(max-width:380px){
  header.bar .logo,
  header.bar.condensed .logo{height:108px!important}   /* ≈ 6.9 CSS px x3 DPR = 21 device dots */
}
/* the bar sits tight around the mark — the mark sets the height, not padding */
@media(min-width:721px){
  header.bar,
  header.bar.condensed{
    padding-top:clamp(9px,1vh,14px)!important;
    padding-bottom:clamp(9px,1vh,14px)!important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   NEWSLETTER READS THE SAME SIZE ON EVERY PAGE
   The item is deliberately set smaller than its neighbours. That held on the
   homepage but nowhere else, because subpages carry `condensed` on the bar and
   `header.bar.condensed .nav a` (0,3,2) outranks `.nav .nav-item>a[href]`
   (0,3,1). Restated here above both, so one size governs the whole site.
   ═══════════════════════════════════════════════════════════════════════ */
header.bar .nav .nav-item>a[href="/newsletter/"],
header.bar.condensed .nav .nav-item>a[href="/newsletter/"]{font-size:.7rem}

@media(min-width:1000px) and (max-width:1399px){
  header.bar .nav .nav-item>a[href="/newsletter/"],
  header.bar.condensed .nav .nav-item>a[href="/newsletter/"]{font-size:clamp(.5rem,.62vw,.62rem)}
}


/* ══════════════════════════════════════════════════════════════════════════
   THE MARK, WHOLE AND LARGER
   The lockup stands as drawn — dragonfly, "spring", "BOUTIQUE" and
   "OF COMPASS" together, at the artwork's own proportions. Nothing is cropped
   and nothing is re-set as type. It simply runs larger than it used to, so
   the smallest line is legible: "OF COMPASS" is 4.8% of the mark's height, so
   these sizes put it at roughly 9-10px, and on a phone at 3x device pixels
   that is around 26 real dots.
   ═══════════════════════════════════════════════════════════════════════ */
@media(min-width:1400px){
  header.bar .logo, header.bar.condensed .logo{height:105px!important}   /* OF COMPASS ≈ 9.4px */
}
@media(min-width:1100px) and (max-width:1399px){
  header.bar .logo, header.bar.condensed .logo{height:101px!important}   /* ≈ 9.1px */
}
@media(min-width:721px) and (max-width:1099px){
  header.bar .logo, header.bar.condensed .logo{height:98px!important}   /* ≈ 8.7px */
}
@media(max-width:720px){
  header.bar .logo, header.bar.condensed .logo{height:92px!important}   /* ≈ 8.3px x3 DPR */
}
@media(max-width:380px){
  header.bar .logo, header.bar.condensed .logo{height:82px!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   ONE SIZE — THE ANIMATION AND THE SETTLED MARK ARE THE SAME MARK
   The sting is aligned to the static logo by hard percentages, and those were
   tuned against older artwork. Measured, the animation was rendering 160x171
   while the static mark rendered 177x196 — 13% smaller — so the logo grew the
   moment the video handed over. That was the size change.

   Recomputed from the footage: the lockup occupies x711-1217, y270-809 of a
   1920x1080 frame, and the mark is 602x666. Anchored on the "spring" wordmark,
   which is the eye's reference point.
   ═══════════════════════════════════════════════════════════════════════ */
#logosting,
#stingback{
  left:-140.24%!important;
  top:-48.91%!important;
  width:378.70%!important;
}

/* Navigation set 30% smaller. Newsletter is deliberately its own size and is
   left exactly as it was. */
header.bar .nav a,
header.bar.condensed .nav a{font-size:.602rem!important;letter-spacing:.1em}
header.bar .nav .nav-cta,
header.bar.condensed .nav .nav-cta{font-size:.588rem!important}
header.bar .nav .nav-item>a[href="/newsletter/"],
header.bar.condensed .nav .nav-item>a[href="/newsletter/"]{font-size:.7rem!important}
@media(min-width:1000px) and (max-width:1399px){
  header.bar .nav a,
  header.bar.condensed .nav a{font-size:clamp(.546rem,.665vw,.658rem)!important}
  header.bar .nav .nav-item>a[href="/newsletter/"],
  header.bar.condensed .nav .nav-item>a[href="/newsletter/"]{font-size:clamp(.5rem,.62vw,.62rem)!important}
}

/* ── Nav: three sizes up, set closer, more air after the mark ──────────────
   Items rise 9.63 -> ~12.4px (three 8% steps). The word-to-word gap tightens,
   and because the nav is pushed right by margin-left:auto, tighter gaps move
   the whole block away from the logo — both asks with one change. Newsletter
   keeps its own deliberate size, per the standing instruction. */
header.bar .nav a,
header.bar.condensed .nav a{font-size:.773rem!important}
header.bar .nav .nav-cta,
header.bar.condensed .nav .nav-cta{font-size:.755rem!important}
header.bar .nav .nav-item>a[href="/newsletter/"],
header.bar.condensed .nav .nav-item>a[href="/newsletter/"]{font-size:.7rem!important}
@media(min-width:1400px){
  header.bar .nav,
  header.bar.condensed .nav{gap:clamp(12px,1.25vw,24px)!important}
}
@media(min-width:1000px) and (max-width:1399px){
  header.bar .nav a,
  header.bar.condensed .nav a{font-size:clamp(.7rem,.855vw,.845rem)!important}
  header.bar .nav .nav-item>a[href="/newsletter/"],
  header.bar.condensed .nav .nav-item>a[href="/newsletter/"]{font-size:clamp(.5rem,.62vw,.62rem)!important}
  header.bar .nav,
  header.bar.condensed .nav{gap:clamp(10px,1.1vw,20px)!important}
}

/* ── Nav refinement: tighter words, wider margins, one size, true centre ───
   Items sit closer; the group gains air on BOTH sides (auto-margin from the
   logo grows as the items compress, and the CTA pushes further off with a
   larger margin); Newsletter joins the common size; and the row is vertically
   centred against the Get Home Valuation pill — link padding was 8/12
   asymmetric, which is what held the words high. */
header.bar .nav .nav-item>a[href="/newsletter/"],
header.bar.condensed .nav .nav-item>a[href="/newsletter/"]{font-size:.773rem!important}
header.bar .nav,
header.bar.condensed .nav{align-items:center!important}
header.bar .nav .nav-item>a,
header.bar.condensed .nav .nav-item>a{padding:10px 2px!important}
@media(min-width:1400px){
  header.bar .nav,
  header.bar.condensed .nav{gap:clamp(8px,.85vw,16px)!important}
  header.bar .nav .nav-cta,
  header.bar.condensed .nav .nav-cta{margin-left:clamp(46px,4vw,84px)!important}
}
@media(min-width:1000px) and (max-width:1399px){
  header.bar .nav .nav-item>a[href="/newsletter/"],
  header.bar.condensed .nav .nav-item>a[href="/newsletter/"]{font-size:clamp(.7rem,.855vw,.845rem)!important}
  header.bar .nav,
  header.bar.condensed .nav{gap:clamp(7px,.75vw,14px)!important}
  header.bar .nav .nav-cta,
  header.bar.condensed .nav .nav-cta{margin-left:clamp(34px,3vw,60px)!important}
}

/* The nav was flex:1 1 100% with space-between, so it stretched across the
   masthead and DISTRIBUTED the leftover space — the gap value was cosmetic
   and the words could never sit closer. It now hugs its content: the gaps are
   real, and every pixel the items give up flows into the air beside the logo. */
@media(min-width:1000px){
  header.bar .nav,
  header.bar.condensed .nav{
    flex:0 0 auto!important;
    width:auto!important;
    justify-content:flex-end!important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MASTHEAD, AS THE OWNER CHOSE IT (base: the spread navigation)
   The tight-group experiment is reverted: the navigation distributes across
   the masthead again (that spread is the approved look). On top of that base,
   two edits: (1) the whole masthead — mark, menu, pill — sits a few lines
   lower; (2) the menu gains air after the logo, which shifts the whole run
   of items toward the valuation pill.
   ═══════════════════════════════════════════════════════════════════════ */
@media(min-width:1000px){
  header.bar .nav,
  header.bar.condensed .nav{
    flex:1 1 100%!important;
    width:auto!important;
    justify-content:space-between!important;   /* the chosen base */
    padding-left:clamp(64px,5.5vw,120px)!important;  /* edit 2 */
  }
  header.bar,
  header.bar.condensed{
    padding-top:clamp(42px,4.8vh,68px)!important;    /* edit 1 */
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   NAV DRAWER — the menu opens outward from its centre
   One effect, nothing stacked on it: a clip window widens from the middle of
   the menu to both ends at the same pace. The items themselves NEVER move —
   layout is fully settled before the reveal — so words cannot cross, touch,
   or start on top of each other at any window size, by construction.
   Plays only when html.nav-wait is set (arrival from outside or a refresh,
   the same gate as the logo). Desktop and iPad only; phones use the burger.
   ═══════════════════════════════════════════════════════════════════════ */
.nav-set{
  display:flex;
  flex:1 1 100%;
  justify-content:space-between;
  align-items:center;
  gap:inherit;
  min-width:0;
  padding-right:3px;    /* measured: lands the approved ~76px run-out before the pill */
}
@media(min-width:721px){
  html.nav-wait .nav-set{
    /* `backwards` holds the closed state through the delay, then RELEASES the
       clip when the reveal ends — `both` kept clipping forever, which sliced
       the dropdown panels to a bare rounded edge and ate hover overflow. */
    animation:sbNavDrawer 1.05s cubic-bezier(.3,.72,.16,1) .35s backwards;
  }
  @keyframes sbNavDrawer{
    from{clip-path:inset(-14px 50% -14px 50%)}
    to  {clip-path:inset(-14px 0% -14px 0%)}
  }
}
@media (prefers-reduced-motion:reduce){
  html.nav-wait .nav-set{animation:none}
}


/* the mark breathes a little off the left edge */
@media(min-width:721px){
  header.bar .id,
  header.bar.condensed .id{margin-left:clamp(12px,1.2vw,26px)!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   MEDIUM WINDOWS: THE ROW MUST ACTUALLY FIT
   The wide layout is approved and untouched (≥1400px). Below that, the same
   type and air no longer fit one row, and because nothing wraps the menu ran
   into the valuation pill (NEWSLETTER under GET HOME…). The medium band takes
   its own tighter setting — smaller type, closer tracking, less lead-in air —
   sized so the row always clears the pill down to 1000px.
   ═══════════════════════════════════════════════════════════════════════ */
@media(min-width:1000px) and (max-width:1399px){
  header.bar .nav a,
  header.bar.condensed .nav a{
    font-size:clamp(.56rem,.74vw,.72rem)!important;
    letter-spacing:.055em!important;
  }
  header.bar .nav .nav-item>a[href="/newsletter/"],
  header.bar.condensed .nav .nav-item>a[href="/newsletter/"]{
    font-size:clamp(.56rem,.74vw,.72rem)!important;
    letter-spacing:.055em!important;
  }
  header.bar .nav .nav-cta,
  header.bar.condensed .nav .nav-cta{
    font-size:clamp(.54rem,.7vw,.68rem)!important;
    padding:8px 13px!important;
    margin-left:clamp(18px,1.8vw,34px)!important;
  }
  header.bar .nav,
  header.bar.condensed .nav{padding-left:clamp(24px,2.6vw,54px)!important}
  .nav-set{padding-right:2px}
  header.bar .nav .nav-item>a,
  header.bar.condensed .nav .nav-item>a{padding:10px 1px!important}
}


/* ── About: the capability cards rise in together ─────────────────────────
   One movement for the whole set — the navigation's pace and curve, no
   stagger, no draw. Armed by script; without it the cards are simply there. */

/* ══════════════════════════════════════════════════════════════════════════
   THE BAR IS OPAQUE ON EVERY PAGE — global backstop
   The opaque rules lived in homepage-editorial.css, which only the homepage
   loads; and on subpages the page-wash script returns early for a
   pre-condensed bar, so nothing ever painted its background. Content scrolled
   straight through the menu. This is the sitewide guarantee.
   ═══════════════════════════════════════════════════════════════════════ */
header.bar{background:#FAF6EB!important}
header.bar.on-dark,
header.bar.editorial-dark{background:#16223F!important}

/* ── About: half-size portraits, tighter air ──────────────────────────────
   The photographs read at half their former size; the words keep their
   column. Grid air comes in a step. */
@media(min-width:901px){
  #apart-portraits .pgrid2, .pgrid2{grid-template-columns:.5fr 1.15fr;gap:clamp(24px,3.6vw,50px)}
  .pgrid2.flip{grid-template-columns:1.15fr .5fr}
  .pgrid2.flip .pcol-media{order:2}
}

/* ── WHAT SETS THEM APART — staggered arrival, every time ─────────────────
   Armed by script. Each card follows the one before by 90ms on a long quiet
   ease; leaving the screen resets them instantly (invisible anyway), so the
   entrance replays on every arrival from either direction. */
#apart .cards6.arm .card6{
  opacity:0;
  transform:translateY(26px);
  /* 30% slower, same style: 0.95s -> 1.24s, the stagger stretches with it */
  transition:opacity 1.24s cubic-bezier(.22,.61,.21,1), transform 1.24s cubic-bezier(.22,.61,.21,1);
  transition-delay:calc(var(--i,0)*117ms);
}
#apart .cards6.arm.in .card6{opacity:1;transform:none}
#apart .cards6.arm:not(.in) .card6{transition-duration:.15s;transition-delay:0s}
@media (prefers-reduced-motion:reduce){
  #apart .cards6.arm .card6{opacity:1;transform:none;transition:none}
}

/* ── The valuation pill breathes: smaller text, real side air ─────────────
   The label was filling the capsule edge to edge once the bar condensed —
   same on every subpage. One size down and honest padding, everywhere. */
@media(min-width:1000px){
  header.bar .nav .nav-cta,
  header.bar.condensed .nav .nav-cta{
    font-size:.64rem!important;
    padding:9px 20px!important;
    letter-spacing:.12em!important;
    white-space:nowrap;
  }
}

/* About: each principal's name + title arrive like the cards — same numbers */
.bio-rise.arm{
  opacity:0;transform:translateY(26px);
  transition:opacity 1.24s cubic-bezier(.22,.61,.21,1), transform 1.24s cubic-bezier(.22,.61,.21,1);
  transition-delay:calc(var(--i,0)*117ms);
}
.bio-rise.arm.in{opacity:1;transform:none}
.bio-rise.arm:not(.in){transition-duration:.15s;transition-delay:0s}
@media (prefers-reduced-motion:reduce){.bio-rise.arm{opacity:1;transform:none;transition:none}}

/* ══ CURSOR, RE-CUT — native arrow restored; a thin editorial ring trails it.
   The ring lives in difference blend: ink-dark over the cream, cream-light
   over the navy, no colour logic needed. The dragonfly mark is retired. ══ */
@media (hover:hover) and (pointer:fine){
  .dfly-page, .dfly-page label, .dfly-page input{cursor:auto}
  .dfly-page a, .dfly-page button, .dfly-page [role="button"],
  .dfly-page [onclick], .dfly-page [data-target]{cursor:pointer}
}
#cursor{
  width:36px;height:36px;
  border-radius:50%;
  border:1px solid #fff;
  background:transparent;
  mix-blend-mode:difference;
  opacity:0;
  transition:opacity .35s ease;
}
#cursor .dfly-mask{display:none}

/* The ring is retired — the mark is now a single quiet DOT: 5px, trailing
   the arrow on a soft lerp, inverting over any surface, doubling over
   clickables. Minimal, editorial, silent. */
#cursor{
  width:5px;height:5px;
  border:0;
  background:#fff;
  border-radius:50%;
  mix-blend-mode:difference;
}

/* Final cursor: NOTHING. The native arrow, clean pointer on links — the
   most minimal, most premium possible. The custom mark is retired. */
#cursor{display:none}

/* ══ THE COMPASS NEEDLE ══ The cursor's companion mark: a slender needle
   that turns toward your direction of travel and settles NORTH at rest —
   the brand, made literal. Difference blend: ink over cream, cream over
   navy. The native arrow stays. ══ */
#cursor{
  display:block;
  width:9px;height:22px;
  border:0;
  background:transparent;
  border-radius:0;
  mix-blend-mode:difference;
}
#cursor::after{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  clip-path:polygon(50% 0, 78% 50%, 50% 100%, 22% 50%);
}

/* ══ THE COMPASS MARK ══ Final cursor: the official Compass logomark — a
   fine circle with the angled needle line inside. At rest the line sits at
   the logo's 45°; in motion it steers toward your direction of travel.
   Difference blend keeps it ink-on-cream / cream-on-navy. ══ */
#cursor{
  display:block;
  width:22px;height:22px;
  border:1px solid #fff;
  border-radius:50%;
  background:transparent;
  mix-blend-mode:difference;
}
#cursor::after{
  content:"";
  position:absolute;
  inset:auto;
  left:50%;top:50%;
  width:13px;height:1.5px;
  background:#fff;
  clip-path:none;
  transform:translate(-50%,-50%) rotate(var(--na,-45deg));
}

/* ══ CURSOR, FINAL — "the quiet compass" ══
   At rest: a 3px trailing dot, near-invisible; the site stays calm.
   Over anything clickable: the dot blooms into the official Compass mark —
   the fine circle with its 45° needle — then melts back on leave.
   Difference blend throughout. ══ */
#cursor{
  display:block;
  width:16px;height:16px;
  border:0;border-radius:0;
  background:transparent;
  mix-blend-mode:difference;
}
#cursor .dfly-mask{
  display:block;
  -webkit-mask:none;mask:none;
  position:absolute;left:50%;top:50%;
  width:3px;height:3px;border-radius:50%;
  background:#fff;
  transform:translate(-50%,-50%);
  transition:opacity .25s ease;
}
#cursor::before{
  content:"";position:absolute;inset:0;
  border:1px solid #fff;border-radius:50%;
  background:transparent;
  opacity:0;transform:scale(.5);
  transition:opacity .3s ease,transform .35s cubic-bezier(.22,.61,.36,1);
}
#cursor::after{
  content:"";position:absolute;inset:auto;left:50%;top:50%;
  width:9px;height:1.2px;background:#fff;clip-path:none;
  opacity:0;
  transform:translate(-50%,-50%) rotate(-45deg) scale(.4);
  transition:opacity .3s ease,transform .35s cubic-bezier(.22,.61,.36,1);
}
#cursor.is-mark .dfly-mask{opacity:0}
#cursor.is-mark::before{opacity:1;transform:scale(1)}
#cursor.is-mark::after{opacity:1;transform:translate(-50%,-50%) rotate(-45deg) scale(1)}

/* Compass bloom mark, corrected to the official logomark: circle and line
   share the SAME stroke weight; the line stays inside the circle at 45°. */
#cursor::before{border-width:1.6px}
#cursor::after{width:7.5px;height:1.6px}

/* ══ THE DRAGONFLY ARROW ══ The pointer itself: the classic arrow body with
   ONE slender wing stroke off its shoulder — her dragonfly, abstracted to a
   single line. Cream fringe keeps it alive on navy. Falls back to the OS
   arrow wherever custom cursors are unsupported. ══ */
/* svg dragonfly cursor retired (owner 2026-08-04): native arrow */

/* subpage bodies carry no page class — the dragonfly arrow applies by
   element, sitewide */
/* svg dragonfly cursor retired (owner 2026-08-04): native arrow */

/* ══ THE DRAGONFLY POINTER, LIVE ══ The arrow is the body; an X of wing
   strokes crosses AT its tail tip. The wings idle with a faint beat and
   blur with speed — the body never blurs. Native cursor hidden; element
   follows tight. Reduced motion / touch: normal system cursor. ══ */
/* dragonfly-era cursor:none on body/a/button — retired: the native arrow is back */
@media (prefers-reduced-motion: reduce){
  body, a, button, input, label{cursor:auto}
  #dflyarrow{display:none}
}
#dflyarrow{
  position:fixed;top:0;left:0;
  width:34px;height:34px;
  z-index:9998;
  pointer-events:none;
  transform:translate(-200px,-200px);
  will-change:transform;
}
#dflyarrow svg{display:block;width:100%;height:100%;overflow:visible}
#dflyarrow .dfw{will-change:transform,filter}


/* the custom pointer marks are permanently off (owner): native cursor only */
#dflyarrow,#cursor{display:none !important}

/* ══ FOOTER BOTTOM LINE — legal nav left, studio credit right ══
   The credit lives OUTSIDE .sb-footer__legal on purpose: that block carries an
   opacity, which would dim the gold wordmark. It is placed back into the legal
   column of the footer grid, and the nav is restyled here to the identical
   type it inherited before, so nothing about the legal row changes visually. */
.sb-footer__bottom{
  grid-column:2;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px 32px;
  flex-wrap:wrap;
  margin-top:12px;
}
.sb-footer__bottom nav{display:flex;gap:24px}
.sb-footer__bottom nav a{
  color:rgba(250,246,235,.62);
  font-size:.65rem;
  letter-spacing:.04em;
  text-decoration:none;
}
.sb-footer__bottom nav a:hover{color:rgba(250,246,235,.85)}
/* The credit must not read as one more line of legal type — it is a signature.
   Hierarchy does the work instead of loudness: a small letterspaced "SITE BY"
   against the gold wordmark set larger and wider. Quiet, but unmistakable. */
.studio-credit{
  margin:0;
  display:inline-flex;
  align-items:baseline;
  gap:.62em;
  white-space:nowrap;
}
.studio-credit__by{
  font-size:.64rem;                 /* ~10px */
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(250,246,235,.6);       /* --off, held back so the gold leads */
}
.studio-credit__mark{
  color:var(--off);                 /* #FAF6EB — owner: the gold read as mustard */
  font-size:1.02rem;                /* ~16px — clearly above the legal register */
  font-weight:500;
  letter-spacing:.16em;
  text-indent:.16em;                /* cancel the trailing letter-space */
  text-decoration:none;
  transition:color .18s ease;
}
.studio-credit__mark:hover{
  color:#fff;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
@media(max-width:1020px){
  .sb-footer__bottom{grid-column:auto}
}
@media(max-width:720px){
  .sb-footer__bottom{flex-direction:column;align-items:center;text-align:center}
  .sb-footer__bottom nav{justify-content:center}
}


/* Footer wordmark = the masthead artwork with the dragonfly cropped away, so
   the relative sizes and positions of spring / BOUTIQUE / OF COMPASS are the
   logo's own and can never drift from the top of the page. Height is set to
   the wordmark's share of the 140px masthead mark (272/552 of it). */
.foot-wordmark{
  display:block;
  width:auto;
  height:clamp(56px,5.4vw,78px);
  max-width:100%;
  align-self:flex-start;   /* .foot-left is a COLUMN flexbox: its default
    align-items:stretch was forcing the img to container width (323px) while
    the height rule held 78px — the squashed lockup on every subpage footer.
    flex-start lets width:auto keep the artwork's own proportions. */
}

/* ══ NAV — every label on ONE line, one size, more air ═══════════════════
   "Buy & Sell" and "Spring Style" were the only labels containing a space, so
   they were the only ones that wrapped — the row read as a mix of one- and
   two-line items. nowrap settles that. The type then steps down so nine
   labels + the pill fit the row comfortably, and the gap is opened back up
   with the width that saves, so the row breathes instead of crowding.
   !important is required here only because the tuned rules above use it. */
@media(min-width:1000px){
  header.bar .nav .nav-item>a,
  header.bar.condensed .nav .nav-item>a,
  header.bar .nav .nav-item>a[href="/newsletter/"],
  header.bar.condensed .nav .nav-item>a[href="/newsletter/"]{
    white-space:nowrap!important;
    font-size:clamp(.58rem,.65vw,.68rem)!important;
    letter-spacing:.14em!important;
  }
  header.bar .nav,
  header.bar.condensed .nav{
    flex-wrap:nowrap!important;
    row-gap:0!important;
    gap:clamp(13px,1.15vw,22px)!important;
  }
  header.bar .nav .nav-cta,
  header.bar.condensed .nav .nav-cta{
    white-space:nowrap!important;
    font-size:clamp(.56rem,.62vw,.66rem)!important;
  }
}

/* Drawer: the last item ("Newsletter") sat under the Get Home Valuation
   button — 15px into it on a 390x844 phone, 119px on a 360x740 one. The
   scrolling list now keeps a lane clear for the button, so every item can be
   scrolled fully into view and tapped. */
.drawer-scroll{padding-bottom:18px}
.drawer .drawer-cta{flex:0 0 auto;margin-top:14px}

/* Tighter navigation (owner, 2026-09-18): closer items, still centred in the bar. */
.nav{gap:clamp(22px,2.4vw,38px)}
.nav .nav-set{justify-content:center;gap:clamp(22px,2.4vw,38px);column-gap:clamp(22px,2.4vw,38px)}
@media(min-width:1400px){
  /* the item group is centred on the page, not in the space left of the logo */
  header.bar nav.nav{position:absolute;left:0;right:0;top:calc(var(--header-h,196px)/2 - 1px);bottom:auto;margin:0 auto;width:max-content;height:max-content;max-width:calc(100vw - 560px);transform:none;padding:0!important}
  header.bar nav.nav .nav-set{justify-content:center;gap:clamp(22px,2.4vw,38px)}
}

/* Owner, 2026-09-18: the masthead logo is 25% smaller on every page, and it no
   longer shrinks on scroll — one fixed size everywhere. */
.bar .logo{height:clamp(75px,5.4vw,95px)!important;transition:none!important}
@media(min-width:1400px){ .bar .logo{height:clamp(75px,5.4vw,95px)!important} }
.bar.condensed .logo{height:clamp(75px,5.4vw,95px)!important}

/* Owner, 2026-09-18: the masthead sits higher and further left, with clear air
   between the logo and whatever is underneath. Same on every page. */
header.bar{padding-top:clamp(8px,1vh,14px)!important;padding-bottom:clamp(20px,2.4vh,32px)!important;padding-left:clamp(16px,2.2vw,34px)!important}
header.bar .id{margin-top:0!important}
@media(min-width:1400px){
  header.bar{padding-top:clamp(8px,1vh,14px)!important;padding-bottom:clamp(20px,2.4vh,32px)!important;padding-left:clamp(16px,2.2vw,34px)!important}
}

/* ══ UNIFIED FOOTER — owner 2026-09-22 ══════════════════════════════════════
   Every inner page carries the homepage footer exactly: logo bottom-left, the
   legal block beside it, a hairline, then Privacy / Compass terms. The studio
   credit stays on the homepage only. Mirrors homepage-editorial.css rules. */
body footer.sb-footer{display:block!important;background:transparent!important;color:#1B1B1F!important;
  padding:clamp(36px,4.4vh,52px) var(--sb-gutter,68px) clamp(22px,2.6vh,30px)!important;margin:0!important;
  border-top:1px solid rgba(27,27,31,.14);line-height:1.6!important;opacity:1!important}
body footer.sb-footer .sb-footer__main{display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:clamp(48px,7vw,120px)}
body footer.sb-footer .sb-footer__brand{display:block;align-self:end;line-height:0;width:max-content}
body footer.sb-footer .foot-wordmark{height:clamp(72px,6.2vw,96px)!important;width:auto!important;margin:0!important;display:block}
body footer.sb-footer .sb-footer__legal{display:flex!important;flex-direction:column;gap:6px!important;opacity:1!important;align-self:end;justify-self:end;text-align:right}
body footer.sb-footer .sb-footer__legal p{margin:0!important;font-size:clamp(.74rem,.8vw,.84rem)!important;line-height:1.55!important;letter-spacing:.02em!important;color:rgba(27,27,31,.62)!important;max-width:none}
body footer.sb-footer .sb-footer__legal .sb-footer__who{color:rgba(27,27,31,.86)!important;letter-spacing:.04em!important}
body footer.sb-footer .sb-footer__bottom{grid-column:auto;display:flex!important;justify-content:space-between;align-items:center;margin-top:clamp(22px,2.8vh,32px);padding-top:clamp(14px,1.8vh,18px);border-top:1px solid rgba(27,27,31,.12)}
body footer.sb-footer .sb-footer__bottom nav{display:flex;gap:26px;margin:0}
body footer.sb-footer .sb-footer__bottom nav a{font-size:.74rem!important;letter-spacing:.14em;text-transform:uppercase;line-height:1!important;margin:0!important;color:rgba(27,27,31,.72)!important;text-decoration:none}
body footer.sb-footer .sb-footer__bottom nav a:hover{color:#1B1B1F!important}
@media(max-width:900px){
  body footer.sb-footer .sb-footer__main{grid-template-columns:1fr;row-gap:22px}
  body footer.sb-footer .sb-footer__legal{justify-self:start;text-align:left}
  body footer.sb-footer .sb-footer__bottom{flex-direction:column;align-items:flex-start;gap:14px}
}
/* Gutter = the homepage's --sb-gutter at every breakpoint, so the logo and the
   legal block sit on exactly the same pixels as the homepage footer. */
body footer.sb-footer{padding-left:clamp(26px,7.6vw,138px)!important;padding-right:clamp(26px,7.6vw,138px)!important}
body footer.sb-footer .sb-footer__wrap{max-width:none!important;margin:0!important;padding:0!important}
@media(max-width:1020px){body footer.sb-footer{padding-left:clamp(24px,6vw,68px)!important;padding-right:clamp(24px,6vw,68px)!important}}
@media(max-width:720px){body footer.sb-footer{padding-left:24px!important;padding-right:24px!important}}
/* The homepage bottom bar carries the 24.86px studio credit; inner pages hold an
   invisible spacer of the same height so Privacy / Compass terms and the
   footer's total height land on the homepage's exact pixels. */
body footer.sb-footer:not(.endpanel) .sb-footer__bottom::after{content:"";display:block;width:1px;height:24.859375px;visibility:hidden}

/* Contact / valuation: shown only if the email could not be sent. */
.form-err{margin:14px 0 0;font-size:.9rem;line-height:1.55;color:var(--pg-ink,#1B1B1F);max-width:34em}
.form-err a{color:#C4157A;text-decoration:underline;text-underline-offset:3px}
form button[type=submit][disabled]{opacity:.55;cursor:progress}

/* Newsletter archive — owner 2026-09-22: three editions per row, newest top-left,
   only the date above each; no copy above the grid. */
.nl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,40px);margin-top:clamp(18px,2.4vh,28px)}
.nl-card{display:block;text-decoration:none;color:var(--pg-ink,#1B1B1F)}
.nl-date{display:block;margin-bottom:12px;font-family:Inter,system-ui,sans-serif;font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.nl-frame{display:block;position:relative;aspect-ratio:8.5/11;overflow:hidden;background:#FCF8EE;border:1px solid rgba(27,27,31,.18);border-radius:4px;
  box-shadow:0 18px 40px -28px rgba(27,27,31,.35);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.nl-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.nl-card:hover .nl-frame{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(27,27,31,.45)}
.nl-sub{margin-top:clamp(34px,4.6vh,56px)}
@media(max-width:900px){.nl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.nl-grid{grid-template-columns:1fr}}

/* Logo sting — owner 2026-09-22: Safari plays <video> on a hardware layer and
   ignores mix-blend-mode there, so the white frame showed as a white box. The
   page's cream (#FAF6EB) is now baked into the file (logo-sting-cream.mp4 =
   original x1.06 lift, multiplied by the cream), so no blending is needed in
   any browser and the result matches what the blend produced. */
#logosting{mix-blend-mode:normal!important;filter:none!important}
/* Browsers decode video colour a shade or two differently (WebKit renders the
   baked cream 1–2 levels lighter than the page), so the sting's rectangle is
   feathered into the page: fully opaque where the lockup draws (the centre),
   fading to nothing at the frame edge. Safari honours masks on video layers. */
#logosting,#stingback{
  -webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);
}

/* ── Nav: "Let's Connect" — owner 2026-09-27. Replaces "Contact" as the one
   prominent button in the bar: a filled ink pill, larger than the links,
   brand fuchsia on hover; inverts to cream over dark chapters. ── */
header.bar .nav a.nav-connect,
header.bar.condensed .nav a.nav-connect{
  display:inline-flex;align-items:center;
  font-size:.8rem!important;letter-spacing:.14em;font-weight:500;
  padding:13px 26px!important;margin-left:clamp(6px,.8vw,14px);
  background:#1B1B1F;color:#FAF6EB;border-radius:999px;opacity:1;
  transform:none!important;white-space:nowrap;
  transition:background .25s ease,color .25s ease;
}
header.bar .nav a.nav-connect:hover,
header.bar .nav a.nav-connect:focus-visible{background:#C4157A;color:#fff}
header.bar.on-dark .nav a.nav-connect{background:#FAF6EB;color:#1B1B1F}
header.bar.on-dark .nav a.nav-connect:hover{background:#C4157A;color:#fff}

/* ---------------------------------------------------------------------------
   Insights + Compass blog posts — owner 2026-09-27.
   Order: Events, Fall Guides, Newsletter, Blog; subscribe form under the
   Newsletter and the Blog. Type sized for older readers: body 19px, nothing
   under 14px. */
.ins-sec{padding:clamp(44px,6.5vh,80px) 0;scroll-margin-top:96px}
.ins-sec--first{padding-top:calc(var(--header-h,250px) + clamp(8px,1.6vh,20px))}
.ins-h{font-size:min(7vw,4.6rem);text-align:center;margin:0 0 clamp(24px,3.2vh,40px)}
.ins-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin:0 0 clamp(30px,4vh,48px)}
.ins-jump a{font-size:.9375rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pg-ink);text-decoration:none;border:1px solid rgba(140,130,118,.5);border-radius:100px;padding:12px 24px;transition:background .3s,color .3s,border-color .3s}
.ins-jump a:hover{background:var(--pg-ink);color:var(--pg-bg);border-color:var(--pg-ink)}

/* Events — "This Weekend in the DMV" */
.ev-card{max-width:880px;margin:0 auto;background:#FCF8EE;border:1px solid rgba(27,27,31,.14);border-radius:18px;padding:clamp(32px,4.6vw,60px) clamp(22px,5vw,72px);text-align:center;box-shadow:0 30px 60px -44px rgba(27,27,31,.35)}
.ev-kicker{font-size:.9375rem;letter-spacing:.2em;text-transform:uppercase;opacity:.65;margin:0}
.ev-title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2.5rem,5.4vw,4.1rem);line-height:1.02;margin:14px 0 12px}
.ev-date{font-size:1.0625rem;letter-spacing:.24em;text-transform:uppercase;margin:0;opacity:.82}
.ev-date::after{content:"";display:block;width:64px;height:1px;background:currentColor;opacity:.5;margin:24px auto 0}
.ev-list{list-style:none;margin:clamp(20px,3vh,32px) 0 0;padding:0;text-align:left}
.ev{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;padding:clamp(20px,2.6vh,28px) 0;border-top:1px solid rgba(27,27,31,.12)}
.ev:first-child{border-top:0}
.ev-badge{align-self:start;margin-top:5px;min-width:54px;text-align:center;font-size:.9375rem;font-weight:600;letter-spacing:.12em;color:#FAF6EB;background:#1B1B1F;border-radius:6px;padding:6px 10px;line-height:1.3}
.ev-place{font-family:var(--serif);font-size:clamp(1.6rem,2.4vw,1.95rem);line-height:1.15;margin:0}
.ev-name{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.35rem,2vw,1.6rem);line-height:1.25;color:#C4157A;margin:4px 0 0}
.ev-info{font-size:1.125rem;line-height:1.6;margin:8px 0 0;opacity:.85}
.ev-foot{font-family:var(--serif);font-size:clamp(1.4rem,2.1vw,1.7rem);margin:clamp(24px,3vh,34px) 0 8px}
.ev-tag{font-family:var(--serif);font-style:italic;font-size:1.1875rem;opacity:.75;margin:0}
@media(max-width:560px){.ev{grid-template-columns:1fr}.ev-badge{justify-self:start;margin:0 0 6px}}

/* Fall guides — three PDF covers */
.gd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,40px)}
.gd-card{display:block;text-decoration:none;color:var(--pg-ink);text-align:center}
.gd-cover{display:block;aspect-ratio:850/1100;overflow:hidden;border-radius:6px;border:1px solid rgba(27,27,31,.14);box-shadow:0 18px 40px -28px rgba(27,27,31,.4);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.gd-cover img{width:100%;height:100%;object-fit:cover;display:block}
.gd-card:hover .gd-cover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(27,27,31,.5)}
.gd-name{display:block;font-family:var(--serif);font-size:clamp(1.5rem,2vw,1.8rem);margin-top:18px}
.gd-open{display:block;font-size:.9375rem;letter-spacing:.14em;text-transform:uppercase;opacity:.72;margin-top:6px}
@media(max-width:700px){.gd-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}}

/* Newsletter — Compass issues, cover images */
.nlc .nlc-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.nlc-title{display:block;font-family:var(--serif);font-size:clamp(1.4rem,1.9vw,1.7rem);line-height:1.2;margin-top:16px;text-align:center}
.nl-date{font-size:.9375rem}

/* Subscribe blocks */
.ins-sub{max-width:660px;margin:clamp(44px,5.5vh,68px) auto 0;text-align:center;border-top:1px solid rgba(140,130,118,.3);padding-top:clamp(30px,4vh,46px)}
.ins-sub__line{font-family:var(--serif);font-size:clamp(1.6rem,2.5vw,2.1rem);line-height:1.2;margin:0 0 20px}
.ins-sub .sub-form input:not([type="checkbox"]){font-size:1.0625rem;padding:15px 24px}
.ins-sub .sub-form button{font-size:.9375rem;letter-spacing:.16em;padding:15px 34px}
.ins-sub .nl-consent{font-size:.9375rem}
.ins-blog{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1100px;margin:0 auto}
@media(max-width:760px){.ins-blog{grid-template-columns:1fr}}
.ins-blog .btitle{font-size:clamp(1.55rem,2.2vw,1.9rem)}
.ins-blog .bex{font-size:1.0625rem}
.ins-blog .bdate{font-size:.875rem;letter-spacing:.12em}

/* Blog post page */
.post-page{display:block;padding-top:calc(var(--header-h,250px) + clamp(20px,3vh,40px));padding-bottom:clamp(60px,8vh,100px)}
.post-page .postwrap{max-width:820px;margin:0 auto}
.post-page .crumbs{font-size:.875rem}
.post-page .postview{max-width:none}
.post-page .postview h1{font-size:clamp(2.5rem,5vw,3.9rem);margin-top:22px}
.post-deck{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.2vw,1.75rem);line-height:1.35;margin:14px 0 0;opacity:.88}
.post-meta{font-size:1rem;letter-spacing:.04em;margin:18px 0 0;opacity:.72}
.post-hero{margin:34px 0 0}
.post-hero img{width:100%;height:auto;border-radius:16px;display:block}
.post-page .pcontent{font-size:1.1875rem;line-height:1.8;opacity:1}
.post-page .pcontent h2{font-size:clamp(1.75rem,3vw,2.35rem);font-weight:500;line-height:1.15;margin:56px 0 18px}
.post-page .pcontent a{color:inherit;text-decoration:underline;text-decoration-color:#C4157A;text-underline-offset:4px}
.post-page .pcontent a:hover{color:#C4157A}
.post-when{font-weight:600}
.post-more{font-size:1.0625rem}
.post-links{list-style:none;padding:0;margin:0 0 20px}
.post-links li{margin:0 0 12px}
.post-sign{font-family:var(--serif);font-size:1.75rem;margin-top:36px}
.post-disclaimer{font-size:1rem;font-style:italic;opacity:.75;margin-top:32px;border-top:1px solid rgba(140,130,118,.3);padding-top:18px}
.post-page .pcontent figure.post-fig figcaption{font-size:.875rem;opacity:.75}
.post-page .pcontent figure.post-fig figcaption a{text-decoration-color:rgba(27,27,31,.35)}
.post-fig--logo{text-align:center}
.post-page .pcontent figure.post-fig--logo img{width:auto;max-width:min(320px,70%);margin:0 auto;border-radius:0;mix-blend-mode:multiply}
.post-cta{margin-top:48px;text-align:center}

/* Resources — owner 2026-09-27 (Compass Concierge + Vista Media). */
.rs-eyebrow{font-size:.9375rem;letter-spacing:.24em;text-transform:uppercase;opacity:.65;margin:0 0 14px;text-align:center}
.rs-h1{font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.05;text-align:center;max-width:18ch;margin:0 auto}
.rs-lede{max-width:760px;margin:clamp(24px,3.4vh,38px) auto 0;font-size:1.1875rem;line-height:1.8}
.rs-lede p{margin:0 0 18px}
.rs-intro a,.rs-block a:not(.cta),.rs-h2 a{color:inherit;text-decoration:underline;text-decoration-color:#C4157A;text-underline-offset:5px;text-decoration-thickness:1px}
.rs-block .rs-wrap{max-width:900px;background:#FCF8EE;border:1px solid rgba(27,27,31,.12);border-radius:18px;padding:clamp(32px,4.6vw,64px) clamp(22px,5vw,72px);box-shadow:0 30px 60px -46px rgba(27,27,31,.35);font-size:1.1875rem;line-height:1.8}
.rs-block p{margin:0 0 18px}
.rs-h2{font-size:clamp(2rem,3.8vw,3rem);line-height:1.1;text-align:center;margin:0 auto clamp(20px,3vh,30px);max-width:22ch}
.rs-h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.2;margin:34px 0 12px}
.rs-list{list-style:none;margin:6px 0 24px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px}
.rs-list li{position:relative;padding:12px 0 12px 28px;border-top:1px solid rgba(27,27,31,.1);line-height:1.5}
.rs-list li::before{content:"";position:absolute;left:4px;top:1.15em;width:8px;height:8px;border-radius:50%;background:#C4157A}
.rs-note{font-size:1rem;font-style:italic;line-height:1.7;opacity:.78;margin-top:10px!important;border-top:1px solid rgba(140,130,118,.3);padding-top:18px}
.rs-cta{text-align:center;margin:30px 0 0!important}
.rs-cta .cta,.rs-close .cta{margin-top:0;font-size:.9375rem;letter-spacing:.16em}
.rs-close{text-align:center}
.rs-close__line{font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.2rem);margin:0 0 22px}
@media(max-width:640px){.rs-list{grid-template-columns:1fr}}

/* Insights only — black page, white text (owner 2026-09-27). site.js paints the
   journey colour from PAGE_JOURNEY; these !important tokens win over its inline
   values so the ink is pure white rather than the site cream. */
html.page-black{--pg-bg:#0B0B0C!important;--pg-ink:#FFFFFF!important;background:#0B0B0C}
html.page-black body{background:#0B0B0C;color:#fff}
html.page-black header.bar,html.page-black header.bar.on-dark,html.page-black header.bar.condensed,html.page-black header.bar.condensed.on-dark{background:#0B0B0C!important;color:#fff}
html.page-black header.bar .nav a{color:#fff}
html.page-black .ins-jump a{border-color:rgba(255,255,255,.4);color:#fff}
html.page-black .ins-jump a:hover{background:#fff;color:#0B0B0C;border-color:#fff}
html.page-black .ev-card{background:#151517;border-color:rgba(255,255,255,.14);box-shadow:none;color:#fff}
html.page-black .ev{border-top-color:rgba(255,255,255,.14)}
html.page-black .ev:first-child{border-top:0}
html.page-black .ev-badge{background:#fff;color:#0B0B0C}
html.page-black .ev-name{color:#F26AAE}
html.page-black .ev-info,html.page-black .ev-kicker,html.page-black .ev-date,html.page-black .ev-tag{opacity:.88}
html.page-black .gd-card,html.page-black .nl-card{color:#fff}
html.page-black .gd-cover,html.page-black .nl-frame{border-color:rgba(255,255,255,.16);box-shadow:none}
html.page-black .bcard{color:#fff;background:#151517;border-color:rgba(255,255,255,.14)}
html.page-black .bcard:hover{box-shadow:0 34px 64px -40px rgba(0,0,0,.9)}
html.page-black .bcard .bex{opacity:.85}
html.page-black .bcard .bdate{opacity:.7}
html.page-black .ins-sub{border-top-color:rgba(255,255,255,.18)}
html.page-black .sub-form input:not([type="checkbox"]){color:#fff;border-color:rgba(255,255,255,.45)}
html.page-black .sub-form input:not([type="checkbox"])::placeholder{color:#fff;opacity:.55}
html.page-black .sub-form button{background:#fff;color:#0B0B0C}
html.page-black .sub-form button:hover{background:#F26AAE;color:#fff;opacity:1}
html.page-black .nl-consent{opacity:.9}
html.page-black .nl-consent input{accent-color:#F26AAE}
html.page-black body footer.sb-footer{color:#fff!important}
html.page-black body footer.sb-footer .sb-footer__bottom{border-top-color:rgba(255,255,255,.16)}
html.page-black body footer.sb-footer a{color:#fff}

/* ── NAV TYPE — owner 2026-09-27 ("two sizes bigger", older readers) ─────
   The layers above left the nav at 9–11px. This is the one rule that decides
   it now, in every header state (rest, scrolled, condensed), on every page:
   links and the Let's Connect button share one size, with wider spacing. */
html body header#bar.bar .nav .nav-item>a,
html body header#bar.bar.condensed .nav .nav-item>a{
  font-size:clamp(.9375rem,1.18vw,1.0625rem)!important;letter-spacing:.14em!important;opacity:.9}
html body header#bar.bar .nav .nav-item>a.active,
html body header#bar.bar .nav .nav-item>a:hover{opacity:1}
html body header#bar.bar .nav .nav-item>a:hover{transform:scale(1.06)}
html body header#bar.bar .nav .nav-item>a.nav-connect,
html body header#bar.bar.condensed .nav .nav-item>a.nav-connect{padding:15px 30px!important;opacity:1}
html body header#bar.bar .nav .nav-item>a.nav-connect:hover{transform:none}
html body header#bar.bar .nav,
html body header#bar.bar .nav .nav-set{gap:clamp(26px,3vw,56px)!important;column-gap:clamp(26px,3vw,56px)!important}
/* Resources papers — light grey ground (owner 2026-09-27) */
.rs-block .rs-wrap{background:#ECEBE9;border-color:rgba(27,27,31,.16)}
.rs-block .rs-list li{border-top-color:rgba(27,27,31,.14)}
/* Resources papers on the black page (owner 2026-09-27): Concierge light grey,
   Vista Media beige; both with black text. */
.rs-block .rs-wrap{color:#1B1B1F}
.rs-block .rs-wrap .rs-eyebrow,.rs-block .rs-wrap .rs-h2,.rs-block .rs-wrap .rs-h3,.rs-block .rs-wrap p,.rs-block .rs-wrap li{color:#1B1B1F}
.rs-block .rs-wrap a:not(.cta){color:#1B1B1F;text-decoration-color:#C4157A}
.rs-block .rs-wrap .cta{color:#1B1B1F;border-color:rgba(27,27,31,.4)}
.rs-block .rs-wrap .cta:hover{background:#1B1B1F;color:#fff;border-color:#1B1B1F}
#vista-media .rs-wrap,#nyxmaya .rs-wrap{background:#FAF6EB;border-color:rgba(27,27,31,.12)}
html.page-black .rs-block .rs-wrap{box-shadow:none}
html.page-black body footer.sb-footer .sb-footer__legal,html.page-black body footer.sb-footer .sb-footer__legal p,html.page-black body footer.sb-footer .sb-footer__who,html.page-black body footer.sb-footer .sb-footer__bottom nav a{color:rgba(255,255,255,.86)!important}

/* Listings only — light grey ground, same grey as the Resources paper (owner 2026-09-27) */
html.page-grey{--pg-bg:#ECEBE9!important;background:#ECEBE9}
html.page-grey body{background:#ECEBE9}
html.page-grey header.bar,html.page-grey header.bar.condensed{background:#ECEBE9!important}

/* ── READABILITY FLOOR — owner 2026-09-27 ────────────────────────────────
   Older readers: labels never under 14px, secondary text 15–16px, reading
   copy 18px. One scale on every page. */
.eyebrow,html body .wrap>span.eyebrow{font-size:.9375rem!important;letter-spacing:.22em}
.cta{font-size:.9375rem;letter-spacing:.18em}
html body footer.sb-footer .sb-footer__legal,html body footer.sb-footer .sb-footer__legal p,html body footer.sb-footer .sb-footer__who{font-size:.875rem!important;line-height:1.6!important}
html body footer.sb-footer .sb-footer__bottom nav a{font-size:.875rem!important}
.cform button,.vform button,form button[type=submit]{font-size:.9375rem!important;letter-spacing:.16em}
.cform input,.cform textarea,.cform select,.vform input,.vform textarea,.vform select{font-size:1.0625rem!important}
.cform label,.vform label{font-size:.9375rem}
/* listings (Compass mirror) */
html body .cx-badge{font-size:.875rem!important}
html body .cx-addr{font-size:.9375rem!important;line-height:1.5}
html body .cx-tab{font-size:.9375rem!important}
html body .cx-specs,html body .cx-specs span{font-size:.9375rem!important}
html body .cx-price{font-size:1.1875rem!important}
/* privacy */
html body .hood-article h2{font-size:.9375rem!important}
html body .hood-article p,html body .hood-article li{font-size:1.125rem!important;line-height:1.75}
/* about + contact */
html body .cperson a{font-size:1rem!important}
html body .cperson .cname{font-size:1.25rem!important}
/* nav links two sizes down (owner 2026-09-27) — Let's Connect keeps its size */
html body header#bar.bar .nav .nav-item>a:not(.nav-connect),
html body header#bar.bar.condensed .nav .nav-item>a:not(.nav-connect){font-size:clamp(.875rem,1.02vw,.9375rem)!important}
/* footer wordmark the same size as the header logo (owner 2026-09-27) */
html body footer.sb-footer .foot-wordmark{height:auto!important;width:96px!important;max-width:none!important}
@media(max-width:767px){html body footer.sb-footer .foot-wordmark{width:85px!important}}
/* tap targets on touch screens (owner 2026-09-27 mobile pass): footer links,
   listing tabs and pagination reach 44px */
@media (hover:none) and (pointer:coarse){
  html body footer.sb-footer .sb-footer__bottom nav a{display:inline-flex!important;align-items:center;min-height:44px}
  html body .cx-tab,html body .cx-pager a,html body .cx-pager button{min-height:44px!important;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
}
/* nav one more size down, Let's Connect included (owner 2026-09-27) */
html body header#bar.bar .nav .nav-item>a:not(.nav-connect),
html body header#bar.bar.condensed .nav .nav-item>a:not(.nav-connect){font-size:clamp(.8125rem,.95vw,.875rem)!important}
html body header#bar.bar .nav .nav-item>a.nav-connect,
html body header#bar.bar.condensed .nav .nav-item>a.nav-connect{font-size:clamp(.875rem,1.05vw,.9375rem)!important;padding:13px 26px!important}
/* nav on the page's exact centre line at every desktop width (owner 2026-09-27) */
@media(min-width:1000px){
  html body header#bar.bar>nav.nav{position:absolute!important;left:50%!important;transform:translateX(-50%)!important;margin:0!important;right:auto!important}
}
html body header#bar.bar>nav.nav{padding-left:0!important;padding-right:0!important}
html body header#bar.bar>nav.nav>.nav-set{padding-left:0!important;padding-right:0!important}

/* Listings (owner 2026-09-27): beige page; each group of homes sits on its own
   rounded, softly transparent black panel; the cards stay white with black type. */
.cx-page .cx-cards,.cx-page .cx-grid{background:rgba(18,18,20,.86);border-radius:24px;padding:clamp(20px,2.4vw,34px);box-shadow:0 30px 60px -42px rgba(27,27,31,.55)}
.cx-page .cx-pager{margin-top:clamp(18px,2.4vh,26px)}

/* Events (owner 2026-09-27, 2): written on the page, not on a card — no panel,
   no border, no shadow; same type, same rhythm. */
.ins-sec .ev-card{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;max-width:880px}

/* Resources (owner 2026-09-27, 2): beige page, the Concierge and Vista Media
   text straight on it — no papers. A hairline between the two keeps the rhythm. */
.rs-block .rs-wrap,#vista-media .rs-wrap,#nyxmaya .rs-wrap{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding-left:0!important;padding-right:0!important}
#vista-media .rs-wrap,#nyxmaya .rs-wrap{border-top:1px solid rgba(27,27,31,.14)!important;padding-top:clamp(48px,7vh,80px)!important}
/* no hairline under the dark header (it read as a light line over the black rooms) */
header.bar.on-dark,header.bar.editorial-dark,header.bar.condensed.on-dark{border-bottom-color:transparent!important}
/* listing panels full black (owner 2026-09-27) */
.cx-page .cx-cards,.cx-page .cx-grid{background:#000!important}
/* "Past Sales" / "Past Rentals" set exactly like the Sales / Rentals tabs (owner 2026-09-27) */
html body .cx-page .cx-sub{font-family:var(--sans,'Inter',system-ui,sans-serif)!important;font-size:.9375rem!important;font-weight:500!important;letter-spacing:.16em!important;text-transform:uppercase!important;line-height:1!important;color:#1B1B1F!important}
/* Listings rhythm (owner 2026-09-27): air under each title, under each
   tab row / section label, and much more between one section and the next. */
html body .cx-page .cx-h{margin-bottom:clamp(30px,4.4vh,54px)!important}
html body .cx-page .cx-tabs,html body .cx-page .cx-sub{margin-bottom:clamp(30px,4.2vh,52px)!important}
html body .cx-page.cx-page--deals{padding-top:clamp(130px,17vh,210px)!important;padding-bottom:clamp(120px,16vh,200px)!important}
html body .cx-deals+.cx-deals{margin-top:clamp(110px,14vh,180px)!important}
html body .cx-page .cx-sub{margin-bottom:clamp(40px,5.4vh,58px)!important}
html body .cx-page .cx-tabs{margin-bottom:clamp(8px,1.4vh,16px)!important}
/* Listings panels (owner 2026-09-27, 3): full width, three across as before;
   the black around and between the cards is half as thick. */
html body .cx-page .cx-cards,html body .cx-page .cx-grid{padding:clamp(10px,1.2vw,17px)!important;gap:12px!important}

/* Events in two columns (owner 2026-09-27): DC over VA on the left, MD over MD
   on the right; titles unchanged above. */
@media(min-width:760px){
  .ins-sec .ev-card{max-width:1080px!important}
  .ins-sec .ev-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,5vw,80px)}
  .ins-sec .ev{border-top:0}
  .ins-sec .ev:nth-child(n+3){border-top:1px solid rgba(27,27,31,.12)}
}

/* Section menu as a right-hand rail (owner 2026-09-27): on wide screens the
   Events / Fall Guides / Newsletter / Blog pills stand in one fixed column on
   the right; the page leaves room for it; the current section is filled. */
@media(min-width:1200px){
  html body .ins-jump{position:fixed;top:50%;right:clamp(18px,2vw,36px);transform:translateY(-50%);z-index:40;
    display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:0!important;width:188px;transition:opacity .35s ease}
  html body .ins-jump a{text-align:center;font-size:.875rem;letter-spacing:.14em;padding:11px 14px;background:rgba(250,246,235,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  html body .ins-jump a.is-current{background:#1B1B1F;color:#FAF6EB;border-color:#1B1B1F}
  html body .ins-jump.is-away{opacity:0;pointer-events:none}
  html body .ins-sec{padding-left:232px!important;padding-right:232px!important}   /* symmetric: the page keeps its centre axis */
}

/* Events on black (owner 2026-09-27): white type, fuchsia event names and
   hashtag, white state badges; the section runs edge to edge. */
.ins-sec#events{background:#000;color:#fff}
.ins-sec#events .ins-h,.ins-sec#events .ev-title,.ins-sec#events .ev-place,.ins-sec#events .ev-foot{color:#fff!important}
.ins-sec#events .ev-kicker{color:#F26AAE!important;opacity:1!important}
.ins-sec#events .ev-date,.ins-sec#events .ev-info{color:rgba(255,255,255,.86)!important;opacity:1!important}
.ins-sec#events .ev-date::after{background:rgba(255,255,255,.55)}
.ins-sec#events .ev-name{color:#F26AAE!important}
.ins-sec#events .ev-badge{background:#fff!important;color:#000!important}
.ins-sec#events .ev{border-top-color:rgba(255,255,255,.16)!important}
.ins-sec#events .ev-tag{color:rgba(255,255,255,.72)!important;opacity:1!important}
.ins-sec#events{padding-bottom:clamp(64px,9vh,110px)!important}
/* the rail's pills over the black section stay legible */
@media(min-width:1200px){html body .ins-jump a{border-color:rgba(27,27,31,.35)}}
/* the section menu now sits above Events on its own beige band */
.ins-top{padding-top:calc(var(--header-h,250px) + clamp(8px,1.6vh,20px));padding-bottom:clamp(26px,3.6vh,42px)}
.ins-top .ins-jump{margin:0 auto!important}
.ins-sec--events{padding-top:clamp(64px,9vh,110px)!important}
@media(min-width:1200px){.ins-top{padding-bottom:0;height:0;padding-top:var(--header-h,250px)}}
/* "Spring Boutique's Transactions" three lines higher; everything else stays put (owner 2026-09-27) */
html body .cx-page .cx-h--deals{position:relative;top:-90px}


/* Events on white (owner 2026-09-27, 3): black type, fuchsia event names and
   hashtag, black state badges. */
.ins-sec#events{background:#FFFFFF!important;color:#1B1B1F}
.ins-sec#events .ins-h,.ins-sec#events .ev-title,.ins-sec#events .ev-place,.ins-sec#events .ev-foot{color:#1B1B1F!important}
.ins-sec#events .ev-date,.ins-sec#events .ev-info{color:rgba(27,27,31,.82)!important}
.ins-sec#events .ev-date::after{background:rgba(27,27,31,.45)}
.ins-sec#events .ev-tag{color:rgba(27,27,31,.68)!important}
.ins-sec#events .ev-kicker,.ins-sec#events .ev-name{color:#C4157A!important}
.ins-sec#events .ev-badge{background:#1B1B1F!important;color:#FFFFFF!important}
.ins-sec#events .ev{border-top-color:rgba(27,27,31,.12)!important}

/* Listings fill the page (owner 2026-09-27): the column was capped at 1170px;
   it now runs to 92% of the window (max 1640px), and the cards scale with it —
   larger photos, larger price and details. */
html body .cx-wrap{max-width:min(1640px,92vw)!important}
html body .cx-page{padding-left:clamp(16px,2vw,32px)!important;padding-right:clamp(16px,2vw,32px)!important}
@media(min-width:1000px){
  html body .cx-page .cx-deal{gap:22px!important;padding:20px!important}
  html body .cx-page .cx-deal__img{flex:0 0 clamp(104px,8vw,132px)!important;width:clamp(104px,8vw,132px)!important;height:clamp(104px,8vw,132px)!important;border-radius:6px!important}
  html body .cx-page .cx-deal .cx-price{font-size:clamp(1.25rem,1.35vw,1.45rem)!important}
  html body .cx-page .cx-deal .cx-specs,html body .cx-page .cx-deal .cx-specs span{font-size:clamp(1rem,1.02vw,1.0625rem)!important}
  html body .cx-page .cx-deal .cx-addr{font-size:clamp(.9375rem,.98vw,1rem)!important}
  html body .cx-page .cx-cards,html body .cx-page .cx-grid{gap:16px!important;padding:clamp(12px,1.2vw,20px)!important}
}
html body .cx-pager{gap:10px!important;margin-top:28px!important}
html body .cx-pager button{min-width:38px!important;height:38px!important;font-size:.9375rem!important;border-radius:6px!important}
html body .cx-pager .cx-arrow{font-size:1.3rem!important}

/* Resources, designed (owner 2026-09-27): a large standout page title with its
   line beneath, the section menu as the same right-hand rail as Insights, and
   section titles set like Insights' (Compass Concierge / Vista Media). */
.rs-intro{padding-top:clamp(56px,8vh,100px)!important}
.rs-title{font-size:clamp(4rem,9vw,7.6rem)!important;line-height:.92!important;letter-spacing:-.015em;text-align:center;margin:0}
.rs-sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.7rem,2.9vw,2.6rem);line-height:1.15;text-align:center;margin:clamp(10px,1.6vh,18px) 0 0;color:#1B1B1F}
.rs-sub::after{content:"";display:block;width:64px;height:1px;background:rgba(27,27,31,.45);margin:clamp(26px,3.6vh,40px) auto 0}
.rs-intro .rs-lede{margin-top:clamp(28px,4vh,44px)}
.rs-block .rs-sec-title{margin-bottom:clamp(10px,1.4vh,16px)!important}
.rs-block .rs-h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.2;text-align:center;max-width:26ch;margin:0 auto clamp(26px,3.6vh,40px)!important}
.rs-block .rs-h2 a{text-decoration-color:#C4157A}
/* rail pills keep one line */
@media(min-width:1200px){html body .ins-jump{width:max-content;min-width:188px}html body .ins-jump a{white-space:nowrap;letter-spacing:.1em}}
/* Listings even bigger (owner 2026-09-27, 2) */
html body .cx-wrap{max-width:min(1860px,96vw)!important}
@media(min-width:1000px){
  html body .cx-page .cx-deal{gap:26px!important;padding:24px!important}
  html body .cx-page .cx-deal__img{flex:0 0 clamp(130px,10.5vw,176px)!important;width:clamp(130px,10.5vw,176px)!important;height:clamp(130px,10.5vw,176px)!important;border-radius:8px!important}
  html body .cx-page .cx-deal .cx-price{font-size:clamp(1.45rem,1.7vw,1.8rem)!important}
  html body .cx-page .cx-deal .cx-specs,html body .cx-page .cx-deal .cx-specs span{font-size:clamp(1.0625rem,1.2vw,1.25rem)!important}
  html body .cx-page .cx-deal .cx-addr{font-size:clamp(1rem,1.1vw,1.125rem)!important}
  html body .cx-page .cx-cards,html body .cx-page .cx-grid{gap:18px!important}
  html body .cx-page .cx-card .cx-price{font-size:clamp(1.45rem,1.7vw,1.8rem)!important}
}
/* two big cards per row until the screen is wide enough for three (owner 2026-09-27) */
@media(min-width:1000px) and (max-width:1699px){html body .cx-page .cx-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
html body .cx-page .cx-deal .cx-specs{flex-wrap:nowrap!important;white-space:nowrap}
/* Resources body text in long lines (owner 2026-09-27): paragraphs and lists
   use the full content column; titles unchanged. */
.rs-intro .rs-lede{max-width:none!important}
.rs-block .rs-wrap{max-width:none!important}
.rs-block .rs-list{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media(max-width:1100px){.rs-block .rs-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:640px){.rs-block .rs-list{grid-template-columns:1fr!important}}
@media(min-width:1200px){html body .ins-sec{padding-left:262px!important;padding-right:262px!important}}
/* section subtitles on one line, no underline on the Compass Concierge link (owner 2026-09-27) */
.rs-block .rs-h2{max-width:none!important;white-space:nowrap}
.rs-block .rs-h2 a{text-decoration:none!important}
@media(max-width:760px){.rs-block .rs-h2{white-space:normal}}
/* links to Compass: the underline is black, not fuchsia (owner 2026-09-27) */
html body a[href*="compass.com"],html body a[href*="compassglobaldivision.com"]{text-decoration-color:#1B1B1F!important}
/* Resources: no dead band between the intro and Compass Concierge (owner 2026-09-27) */
.rs-intro{padding-bottom:0!important}
.rs-block#concierge{padding-top:clamp(52px,7vh,80px)!important}
.rs-block#concierge .rs-wrap{padding-top:0!important}
.rs-block#concierge{padding-bottom:0!important}
.rs-block#vista-media,.rs-block#nyxmaya{padding-top:clamp(40px,5vh,56px)!important}
#vista-media .rs-wrap,#nyxmaya .rs-wrap{padding-top:clamp(40px,5.5vh,60px)!important}
/* air above the Explore / Visit buttons on Resources (owner 2026-09-27) */
.rs-block .rs-cta{margin-top:clamp(44px,6vh,64px)!important}
/* no divider line before Vista Media, and a tight gap (owner 2026-09-27) */
#vista-media .rs-wrap,#nyxmaya .rs-wrap{border-top:0!important;padding-top:0!important}
.rs-block#vista-media,.rs-block#nyxmaya{padding-top:clamp(28px,3.6vh,40px)!important}

/* Newsletters in a rounded black panel (owner 2026-09-27); labels and titles white */
.ins-sec#newsletter .nl-grid{background:#000;border-radius:24px;padding:clamp(22px,2.6vw,40px);box-shadow:0 30px 60px -42px rgba(27,27,31,.55)}
.ins-sec#newsletter .nl-card,.ins-sec#newsletter .nl-date,.ins-sec#newsletter .nlc-title{color:#FFFFFF!important}
.ins-sec#newsletter .nl-frame{border-color:rgba(255,255,255,.14)!important;box-shadow:none!important}
.ins-sec#newsletter .nl-card:hover .nl-frame{box-shadow:0 22px 44px -26px rgba(255,255,255,.18)!important}

/* Events on a concrete panel (owner 2026-09-27): the "Meet Bahar and Shah"
   concrete as a rounded vertical panel behind the content; the section around
   it stays white, so the corners and edges read white. */
.ins-sec#events>.wrap{background:#D9D8D5 url("/assets/textures/concrete-light.webp") center/1100px repeat;border-radius:28px;
  padding:clamp(40px,5.5vh,72px) clamp(24px,4vw,64px) clamp(44px,6vh,76px);box-sizing:border-box}
.ins-sec#events{padding-top:clamp(36px,5vh,60px)!important;padding-bottom:clamp(36px,5vh,60px)!important}
.ins-sec#events .ev{border-top-color:rgba(27,27,31,.16)!important}

/* Blog on a vanilla panel (owner 2026-09-27): the Events panel's shape in a
   soft vanilla white; the cards go white so they lift off it. */
.ins-sec#blog>.wrap{background:#FFFCF5;border:1px solid rgba(27,27,31,.07);border-radius:28px;box-shadow:0 30px 70px -48px rgba(27,27,31,.28);
  padding:clamp(40px,5.5vh,72px) clamp(24px,4vw,64px) clamp(44px,6vh,76px);box-sizing:border-box}
.ins-sec#blog .bcard{background:#FFFFFF}
/* whole Insights page on the site beige; the panels keep their own grounds (owner 2026-09-27) */
.ins-sec#events{background:transparent!important}

/* Newsletter: the whole section in one black panel, like the Blog panel —
   title, the three issues and the subscribe form (owner 2026-09-27). */
.ins-sec#newsletter>.wrap{background:#000;border-radius:28px;box-shadow:0 30px 70px -44px rgba(27,27,31,.55);
  padding:clamp(40px,5.5vh,72px) clamp(24px,4vw,64px) clamp(44px,6vh,76px);box-sizing:border-box;color:#fff}
.ins-sec#newsletter .nl-grid{background:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
.ins-sec#newsletter .ins-h{color:#FFFFFF!important}
.ins-sec#newsletter .ins-sub{border-top-color:rgba(255,255,255,.18)!important}
.ins-sec#newsletter .ins-sub__line{color:#FFFFFF!important}
.ins-sec#newsletter .sub-form input:not([type="checkbox"]){color:#FFFFFF!important;border-color:rgba(255,255,255,.5)!important;background:transparent!important}
.ins-sec#newsletter .sub-form input:not([type="checkbox"])::placeholder{color:#FFFFFF;opacity:.6}
.ins-sec#newsletter .sub-form button{background:#FFFFFF!important;color:#000!important}
.ins-sec#newsletter .sub-form button:hover{background:#C4157A!important;color:#fff!important;opacity:1}
.ins-sec#newsletter .nl-consent,.ins-sec#newsletter .nl-consent a{color:rgba(255,255,255,.88)!important}
.ins-sec#newsletter .nl-consent input{accent-color:#F26AAE}
.ins-sec#newsletter .sub-ok{color:#FFFFFF}
/* the Events sign-off in white (owner 2026-09-27), with a soft shadow so it holds on the light concrete */
.ins-sec#events .ev-tag{color:#FFFFFF!important;opacity:1!important;font-size:1.3rem!important;text-shadow:0 1px 2px rgba(27,27,31,.55),0 0 14px rgba(27,27,31,.35)}

/* About (owner 2026-09-27, trial): each bio — portrait and text — in a rounded
   black box, white type. */
#bahar .pgrid2,#shahryar .pgrid2{background:#000;color:#FFFFFF;border-radius:28px;padding:clamp(24px,3vw,48px);box-shadow:0 30px 70px -44px rgba(27,27,31,.55);box-sizing:border-box}
#bahar .pgrid2 *,#shahryar .pgrid2 *{color:#FFFFFF}
#bahar .pcol-media,#shahryar .pcol-media{border-radius:18px;overflow:hidden}
/* no divider line above any subscribe block (owner 2026-09-27) */
html body .ins-sub,html body .sub-block,html body .nl-sub,html body .ins-sec#newsletter .ins-sub{border-top:0!important}
/* the Events sign-off back to black, bigger (owner 2026-09-27) */
.ins-sec#events .ev-tag{color:#1B1B1F!important;text-shadow:none!important;font-size:clamp(1.5rem,2vw,1.75rem)!important;opacity:1!important}


/* Fall Guides on a panel of abstract bare branches (owner 2026-09-27;
   tools/make_guides_branches.py): beige, black and light grey */
.ins-sec#guides>.wrap{background:#F1EBDF url("/assets/textures/guides-branches.webp") center/cover no-repeat;border-radius:28px;
  padding:clamp(40px,5.5vh,72px) clamp(24px,4vw,64px) clamp(44px,6vh,76px);box-sizing:border-box;box-shadow:0 30px 70px -48px rgba(27,27,31,.3)}


/* Resources titles (owner 2026-09-27, 3): the three big titles are black pills
   with white, letter-spaced capitals — the menu-pill style; the line under each
   is plain black text. No strokes. */
.pill-title{display:inline-block;background:#1B1B1F;color:#FFFFFF!important;border-radius:999px;font-family:var(--sans,'Inter',system-ui,sans-serif);
  font-weight:500;text-transform:uppercase;letter-spacing:.16em;line-height:1.15;padding:.72em 1.7em .7em 1.86em;font-size:clamp(1.25rem,2.2vw,2rem);white-space:nowrap}
.pill-title--page{font-size:clamp(1.6rem,3vw,2.7rem)}
.rs-hero{background:none!important;box-shadow:none!important;border-radius:0!important;width:auto!important;aspect-ratio:auto!important;padding:0!important;display:block!important;text-align:center}
.rs-hero .rs-title,.rs-block .rs-sec-title{font-size:inherit!important;line-height:1!important;margin:0 0 clamp(18px,2.6vh,28px)!important;text-align:center}
.rs-hero .rs-title{position:static!important;transform:none!important}
.rs-hero .rs-sub,.rs-block .rs-h2{position:static!important;transform:none!important;font-family:var(--serif);font-style:normal!important;font-weight:400;color:#1B1B1F!important;
  font-size:clamp(1.35rem,2.2vw,2rem)!important;line-height:1.3!important;text-align:center;white-space:normal!important;margin:0 auto clamp(22px,3.2vh,36px)!important}
.rs-hero .rs-sub::after{display:none!important}
.rs-block .rs-h2 a{color:#1B1B1F!important;text-decoration:none!important}
@media(max-width:560px){.pill-title{white-space:normal;letter-spacing:.12em}}

.rs-intro{padding-top:clamp(36px,5vh,64px)!important}
/* the serif "a" swap must not touch the sans pill titles */
.pill-title .sa{font-family:inherit!important}

/* About bios (owner 2026-09-27, 2): no black fill — a thin, elegant black
   outline with rounded corners; type back to ink. */
#bahar .pgrid2,#shahryar .pgrid2{background:transparent!important;color:#1B1B1F!important;border:1px solid #1B1B1F!important;box-shadow:none!important}
#bahar .pgrid2 *,#shahryar .pgrid2 *{color:#1B1B1F!important}
/* "Resources" as an outlined pill, like the menu pills (owner 2026-09-27) */
.pill-title.pill-title--page{background:transparent!important;color:#1B1B1F!important;border:1.5px solid rgba(27,27,31,.38)}
/* all three Resources titles as outlined pills (owner 2026-09-27) */
.pill-title{background:transparent!important;color:#1B1B1F!important;border:1.5px solid rgba(27,27,31,.38)}
/* no capsules on the Resources titles; Concierge and Vista Media underlined (owner 2026-09-27) */
.pill-title{border:0!important;padding:0!important;border-radius:0!important}
.rs-block .pill-title{text-decoration:underline;text-decoration-color:#1B1B1F;text-decoration-thickness:1.5px;text-underline-offset:.32em}
/* About bios: text fills its column at every width (owner 2026-09-27) */
#bahar .pgrid2 p,#shahryar .pgrid2 p,#bahar .pgrid2 h2,#shahryar .pgrid2 h2{max-width:none!important}

/* Resources sections framed like the About bios (owner 2026-09-27): a thin
   black rounded outline around the intro, Compass Concierge and Vista Media */
.rs-intro>.wrap,.rs-block>.wrap.rs-wrap,#vista-media>.wrap.rs-wrap,#nyxmaya>.wrap.rs-wrap{border:1px solid #1B1B1F!important;border-radius:28px!important;background:transparent!important;box-shadow:none!important;
  padding:clamp(34px,4.6vh,56px) clamp(24px,3vw,48px) clamp(38px,5vh,60px)!important;box-sizing:border-box}
.rs-block#concierge>.wrap.rs-wrap,#vista-media>.wrap.rs-wrap,#nyxmaya>.wrap.rs-wrap{padding-top:clamp(34px,4.6vh,56px)!important}
.rs-intro>.wrap,.rs-block>.wrap.rs-wrap{max-width:min(1560px,93vw)!important;margin-left:auto!important;margin-right:auto!important}
.rs-block#vista-media,.rs-block#nyxmaya{padding-top:clamp(52px,7vh,80px)!important}
/* Listings panels as the same thin black outline as the bios (owner 2026-09-27) */
html body .cx-page .cx-cards,html body .cx-page .cx-grid{background:transparent!important;border:1px solid #1B1B1F!important;border-radius:28px!important;box-shadow:none!important;padding:clamp(16px,1.8vw,28px)!important}
html body .cx-page .cx-deal,html body .cx-page .cx-card{box-shadow:0 1px 2px rgba(27,27,31,.08),0 8px 22px -14px rgba(27,27,31,.22)}
/* "Resources" underlined in fuchsia (owner 2026-09-27) */
.pill-title.pill-title--page{text-decoration:underline;text-decoration-color:#C4157A;text-decoration-thickness:2px;text-underline-offset:.32em}
/* the Events sign-off in the site fuchsia (owner 2026-09-27) */
.ins-sec#events .ev-tag{color:#C4157A!important}

/* Compass Concierge as a black box, white type (owner 2026-09-27) */
.rs-block#concierge>.wrap.rs-wrap{background:#000!important;border-color:#000!important;color:#FFFFFF!important}
#concierge .rs-wrap,#concierge .rs-wrap p,#concierge .rs-wrap li,#concierge .rs-wrap h2,#concierge .rs-wrap h3,#concierge .rs-wrap strong,#concierge .pill-title,#concierge .rs-h2,#concierge .rs-h2 a{color:#FFFFFF!important}
#concierge .pill-title{text-decoration-color:#FFFFFF!important}
#concierge .rs-list li{border-top-color:rgba(255,255,255,.18)!important}
#concierge .rs-list li::before{background:#F26AAE!important}
#concierge .rs-note{border-top-color:rgba(255,255,255,.22)!important;opacity:.85!important}
#concierge .rs-wrap a:not(.cta){color:#FFFFFF!important;text-decoration-color:#FFFFFF!important}
#concierge .cta{color:#FFFFFF!important;border-color:rgba(255,255,255,.6)!important;background:transparent!important}
#concierge .cta:hover{background:#FFFFFF!important;color:#000!important}

/* Vista Media as a black box, white type (owner 2026-09-27) — same as Concierge */
#vista-media>.wrap.rs-wrap,#nyxmaya>.wrap.rs-wrap{background:#000!important;border-color:#000!important;color:#FFFFFF!important}
#vista-media .rs-wrap,#vista-media .rs-wrap p,#vista-media .rs-wrap li,#vista-media .rs-wrap h2,#vista-media .rs-wrap h3,#vista-media .rs-wrap strong,#vista-media .pill-title,#vista-media .rs-h2,#nyxmaya .rs-wrap,#nyxmaya .rs-wrap p,#nyxmaya .rs-wrap li,#nyxmaya .rs-wrap h2,#nyxmaya .rs-wrap h3,#nyxmaya .rs-wrap strong,#nyxmaya .pill-title,#nyxmaya .rs-h2{color:#FFFFFF!important}
#vista-media .pill-title,#nyxmaya .pill-title{text-decoration-color:#FFFFFF!important}
#vista-media .rs-list li,#nyxmaya .rs-list li{border-top-color:rgba(255,255,255,.18)!important}
#vista-media .rs-list li::before,#nyxmaya .rs-list li::before{background:#F26AAE!important}
#vista-media .rs-wrap a:not(.cta),#nyxmaya .rs-wrap a:not(.cta){color:#FFFFFF!important;text-decoration-color:#FFFFFF!important}
#vista-media .cta,#nyxmaya .cta{color:#FFFFFF!important;border-color:rgba(255,255,255,.6)!important;background:transparent!important}
#vista-media .cta:hover,#nyxmaya .cta:hover{background:#FFFFFF!important;color:#000!important}
/* Resources intro box on the soft light-grey concrete (owner 2026-09-27) — same slab as "Meet Bahar and Shah" */
.rs-intro>.wrap{background:#D9D8D5 url("/assets/textures/concrete-light.webp") center/1100px repeat!important}
/* Resources intro box in vanilla white instead (owner 2026-09-27) — same vanilla as the Blog panel */
.rs-intro>.wrap{background:#FFFCF5!important}
/* Events panel in vanilla white (owner 2026-09-27) — same vanilla, edge and shadow as the Blog panel */
.ins-sec#events>.wrap{background:#FFFCF5!important;border:1px solid rgba(27,27,31,.07);box-shadow:0 30px 70px -48px rgba(27,27,31,.28)}
/* Concierge + Vista Media: the title and subtitle sit in a vanilla header band
   across the top of the black box, black text, no underline; the rest of the
   box stays black (owner 2026-09-27). Negative margins cancel the box padding. */
.rs-block .pill-title{text-decoration:none!important}
.rs-block .rs-head{background:#FFFCF5;border-radius:27px 27px 0 0;
  margin:calc(-1*clamp(34px,4.6vh,56px)) calc(-1*clamp(24px,3vw,48px)) clamp(34px,4.6vh,52px);
  padding:clamp(34px,4.6vh,56px) clamp(24px,3vw,48px) clamp(28px,3.8vh,44px)}
#concierge .rs-head .pill-title,#concierge .rs-head .rs-h2,#concierge .rs-head .rs-h2 a,
#vista-media .rs-head .pill-title,#vista-media .rs-head .rs-h2,#nyxmaya .rs-head .pill-title,#nyxmaya .rs-head .rs-h2{color:#000!important}
.rs-block .rs-head .rs-h2{margin-bottom:0!important}
/* Subscribe buttons black, fuchsia on hover — the Newsletter button's hover (owner 2026-09-27).
   The Newsletter panel keeps its white button through its own id rule. */
.sub-form button{background:#000!important;color:#FFFFFF!important;opacity:1}
.sub-form button:hover,.sub-form button:focus-visible{background:#C4157A!important;color:#FFFFFF!important;opacity:1}
/* About title: a quiet entrance on load — words rise a few pixels out of a
   soft blur, one after another (owner 2026-09-27) */
.about-title .tw{display:inline-block;opacity:0;transform:translateY(.2em);filter:blur(6px);
  transition:opacity 1.2s cubic-bezier(.22,.61,.21,1),transform 1.2s cubic-bezier(.22,.61,.21,1),filter 1.2s cubic-bezier(.22,.61,.21,1);
  transition-delay:calc(var(--i,0)*90ms)}
.about-title.in .tw{opacity:1;transform:none;filter:none}
/* About bios: the copy under each name writes itself in — a fast, soft word
   stream (owner 2026-09-27) */
.bio-type.arm .bw{opacity:0;transition:opacity .42s cubic-bezier(.22,.61,.21,1);transition-delay:var(--d,0ms)}
.bio-type.arm.in .bw{opacity:1}
.bio-type.arm:not(.in) .bw{transition-duration:.12s;transition-delay:0s}
@media (prefers-reduced-motion:reduce){.about-title .tw,.bio-type.arm .bw{opacity:1;transform:none;filter:none;transition:none}}
/* Inner-page footers in black with white text (owner 2026-09-27); the
   homepage footer stays exactly as it is. */
body:not(.editorial-home) footer.sb-footer{background:#000!important;color:#FFFFFF!important;border-top-color:#000!important}
body:not(.editorial-home) footer.sb-footer .foot-wordmark{filter:brightness(0) invert(1)}
body:not(.editorial-home) footer.sb-footer .sb-footer__legal p{color:rgba(255,255,255,.7)!important}
body:not(.editorial-home) footer.sb-footer .sb-footer__legal .sb-footer__who{color:rgba(255,255,255,.92)!important}
body:not(.editorial-home) footer.sb-footer .sb-footer__bottom{border-top-color:rgba(255,255,255,.18)!important}
body:not(.editorial-home) footer.sb-footer .sb-footer__bottom nav a{color:rgba(255,255,255,.8)!important}
body:not(.editorial-home) footer.sb-footer .sb-footer__bottom nav a:hover{color:#FFFFFF!important}
/* Listings panels white inside, thin black outline kept (owner 2026-09-27) */
html body .cx-page .cx-cards,html body .cx-page .cx-grid{background:#FFFFFF!important}
/* Resources: each panel floats on a soft, cinematic looping film (owner 2026-09-27).
   The film is pinned to the screen as a 16:9 backdrop while its panel scrolls
   over it, with a window of film above, beside and below the panel. The soft
   focus is baked into the encode. */
section#concierge.rs-cine,section#vista-media.rs-cine,section#nyxmaya.rs-cine{--rs-pad:0px;position:relative;isolation:isolate;overflow:clip;background:#2A2622;
  padding-top:0!important;padding-bottom:0!important;margin:0!important}
@media(min-width:1200px){section#concierge.rs-cine,section#vista-media.rs-cine,section#nyxmaya.rs-cine{--rs-pad:262px}}
.rs-cine__film{position:sticky;top:var(--header-h,138px);z-index:-1;display:block;
  height:calc(100vh - var(--header-h,138px));height:calc(100svh - var(--header-h,138px));
  width:calc(100% + 2*var(--rs-pad));margin:0 calc(-1*var(--rs-pad));
  margin-bottom:calc(var(--header-h,138px) - 100vh);margin-bottom:calc(var(--header-h,138px) - 100svh);
  object-fit:cover;pointer-events:none}
#concierge .rs-cine__film{object-position:100% 50%}
section#concierge.rs-cine>.wrap.rs-wrap,section#vista-media.rs-cine>.wrap.rs-wrap,section#nyxmaya.rs-cine>.wrap.rs-wrap{
  margin-top:clamp(150px,27vh,330px)!important;margin-bottom:clamp(110px,17vh,210px)!important;
  box-shadow:0 44px 90px -38px rgba(0,0,0,.6)!important}
@media(max-width:1199px){section#concierge.rs-cine>.wrap.rs-wrap,section#vista-media.rs-cine>.wrap.rs-wrap,section#nyxmaya.rs-cine>.wrap.rs-wrap{max-width:86vw!important}}
@media(max-width:760px){
  section#concierge.rs-cine>.wrap.rs-wrap,section#vista-media.rs-cine>.wrap.rs-wrap,section#nyxmaya.rs-cine>.wrap.rs-wrap{max-width:92vw!important;margin-top:120px!important;margin-bottom:64px!important}
}
/* Vista Media's own mark beside its name, as on vistamedia.ai */
.rs-sec-title .rs-logo{display:inline-block;width:1.3em;height:1.3em;vertical-align:-.3em;margin-right:.55em}
/* Listings on black (owner 2026-09-27): the white panels and cards keep their
   dark copy; every word outside them is white. */
html.page-black .cx-page .cx-price{color:#1B1B1F}
html.page-black body .cx-page .cx-sub{color:#FFFFFF!important}
html.page-black .cx-page .cx-tab{color:rgba(255,255,255,.58)}
html.page-black .cx-page .cx-tab[aria-selected="true"],html.page-black .cx-page .cx-tab:hover{color:#FFFFFF}
/* Insights: the cards rise into place as they scroll in (owner 2026-09-27) —
   the About cards' pace and ease, one after another, replaying on re-entry.
   An animation on `translate`, so the cards' own hover transitions stay intact. */
@keyframes cardRise{from{opacity:0;translate:0 26px}to{opacity:1;translate:none}}
.card-rise.arm>*{opacity:0}
.card-rise.arm.in>*{animation:cardRise 1.1s cubic-bezier(.22,.61,.21,1) both;animation-delay:calc(var(--i,0)*110ms)}
@media (prefers-reduced-motion:reduce){.card-rise.arm>*{opacity:1;animation:none}}
/* No rubber-band bounce at the page ends (owner 2026-09-27): a fast fling to the
   bottom stretched the page past the black footer and flashed the beige page
   colour underneath for a moment before it settled. */
html,body{overscroll-behavior-y:none}
/* Compass Concierge: Compass's own wordmark in place of the word, in black, its
   letters matched to the title's capitals (owner 2026-09-27) */
.rs-sec-title .rs-wordmark{display:inline-block;height:.97em;width:auto;vertical-align:-.12em;margin-right:.5em;filter:brightness(0)}
/* Resources intro box back on the soft light-grey concrete (owner 2026-09-27) */
.rs-intro>.wrap{background:#D9D8D5 url("/assets/textures/concrete-light.webp") center/1100px repeat!important}
/* Resources intro out of its box (owner 2026-09-27): no border, no concrete —
   the title with its fuchsia line, the subtitle and the copy sit straight on
   the page above the first film, centred, each paragraph's lines balanced so
   none ends on a short orphan line. */
.rs-intro>.wrap{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  padding:0!important;max-width:min(1180px,100%)!important}
.rs-intro .rs-lede{text-align:center;color:#1B1B1F}
.rs-intro .rs-lede p{text-wrap:balance;margin:0 0 clamp(16px,2vh,22px)}
.rs-intro .rs-lede p:last-child{margin-bottom:0}
html body section.rs-intro{padding-bottom:clamp(64px,9vh,112px)!important}
@media(max-width:1199px){.rs-intro>.wrap{padding:0 clamp(22px,5vw,44px)!important}}
/* Resources intro, longer lines (owner 2026-09-27): one size up, a wider
   measure, the first two paragraphs as one, and equal space above and below
   the copy. */
.rs-intro>.wrap{max-width:min(1500px,100%)!important}
.rs-intro .rs-lede{font-size:1.3125rem!important;line-height:1.75!important;margin-top:clamp(40px,5.5vh,72px)!important}
.rs-intro .rs-hero .rs-sub{margin-bottom:0!important}
html body section.rs-intro{padding-bottom:clamp(40px,5.5vh,72px)!important}
/* About bios: a heavier black frame so the boxes read more strongly (owner 2026-09-27) */
#bahar .pgrid2,#shahryar .pgrid2{border:3px solid #000!important}
/* About: the bio copy is hidden from the very first paint until its stream is
   armed, so it never flashes before it writes itself in; a failsafe shows it
   after 2.5 s if the script never runs (owner 2026-09-27). */
html.bio-js #bahar .pgrid2>div:not(.pcol-media)>p:not(.bio-type),
html.bio-js #shahryar .pgrid2>div:not(.pcol-media)>p:not(.bio-type){opacity:0;animation:bioFailsafe 0s 2.5s forwards}
@keyframes bioFailsafe{to{opacity:1}}
/* Listings pager on black (owner 2026-09-27): every page number a white box
   with dark digits; the current page is framed in fuchsia; arrows white. */
html.page-black .cx-pager button:not(.cx-arrow){background:#FFFFFF!important;color:#1B1B1F!important;border:1px solid #FFFFFF!important;box-shadow:none}
html.page-black .cx-pager button:not(.cx-arrow):hover{background:#F4EDDF!important}
html.page-black .cx-pager button[aria-current="page"],html.page-black .cx-pager button[aria-current="page"]:hover{background:#C4157A!important;color:#FFFFFF!important;border-color:#C4157A!important;box-shadow:none!important}
html.page-black .cx-pager .cx-arrow{color:#FFFFFF!important;background:none!important;border:0!important}
html.page-black .cx-pager .cx-arrow:disabled{color:rgba(255,255,255,.28)!important}
/* About bios: soft vanilla white inside the black frame (owner 2026-09-27) */
#bahar .pgrid2,#shahryar .pgrid2{background:#FFFCF5!important}

/* NYXMAYA (owner 2026-10-03): its stylized mark in black on the vanilla header band, sized like the Compass lockup */
.rs-nyx{display:inline-block;line-height:0}
.rs-nyx__mark{display:block;height:clamp(18px,1.75vw,26px);width:auto;max-width:100%}   /* a touch larger than the Vista Media title, not more (owner 2026-10-03) */

/* NYXMAYA is never underlined (owner rule) */
#nyxmaya .rs-wrap a.rs-plain{text-decoration:none!important;font-weight:500}

/* NYXMAYA "Benefits to you" (owner 2026-10-03): a larger title above the services */
.rs-h3.rs-h3--lead{font-size:clamp(2rem,3.2vw,2.6rem)!important;margin-top:40px}
#nyxmaya .rs-benefit{font-size:clamp(1.06rem,1.3vw,1.2rem);line-height:1.7}

/* NYXMAYA subtitle: the aim sits on its own centred line under the first (owner 2026-10-03) */
#nyxmaya .rs-h2 .sub-l2{display:block;margin-top:.35em}

/* NYXMAYA (owner 2026-10-03): the studio line centred in italics; services in two fixed columns read top to bottom, even spacing */
#nyxmaya .rs-studio{text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,2.3vw,2.05rem);line-height:1.35;margin-bottom:.7em}   /* a little larger than the text below (owner 2026-10-03) */
@media(min-width:900px){#nyxmaya .rs-studio{white-space:nowrap}}
#nyxmaya .rs-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px;margin:6px 0 24px;align-items:start}
#nyxmaya .rs-cols .rs-list{grid-template-columns:1fr!important;margin:0}
@media(max-width:640px){#nyxmaya .rs-cols{grid-template-columns:1fr}}

/* ── Logo sting as an animated image (owner 2026-10-04). Geometry = the file's crop
   (x385-1530, y193-1063 of the 1920x1080 frame) mapped through the video placement
   above: left -64.30%, top -14.10%, width 225.84% of the logo box. Transparent, so
   no underlay; the static mark hides while it draws and in dark chapters the ink is
   lifted to the white mark's #FAFAFA. Plays in the condensed bar too (mid-page reload). */
.logo-box img#logosting{left:-64.30%!important;top:-14.10%!important;width:225.84%!important;height:auto;
  max-width:none;-webkit-mask-image:none!important;mask-image:none!important;mix-blend-mode:normal!important;filter:none!important;
  opacity:0;transition:opacity .42s ease}
.logo-box.sting-live img#logosting,.logo-box.sting-hold img#logosting,
header.bar.condensed .logo-box.sting-live img#logosting,header.bar.condensed .logo-box.sting-hold img#logosting{opacity:1!important;transition:none}
.logo-box.sting-live .logo{opacity:0!important;transition:none!important}
header.bar.on-dark .logo-box img#logosting,header.bar.editorial-dark .logo-box img#logosting{filter:invert(1) brightness(1.05)!important}

/* ── Desktop navigation at every window size (owner 2026-10-06) ─────────────────
   The links stay in the bar and tighten as the window narrows, instead of collapsing
   into MENU and a full-screen panel. From 700px up the bar always shows Home through
   Let's Connect; between 700 and 999px the gaps, tracking and pill padding scale
   down so the row fits beside the logo. Phones use the /m/ edition, untouched. */
@media(min-width:700px) and (max-width:999px){
  header.bar .nav{display:flex!important;margin-left:auto}
  header.bar .navburger{display:none!important}
  html body header#bar.bar .nav,html body header#bar.bar .nav .nav-set{gap:clamp(10px,calc(5vw - 24px),26px)!important}
  html body header#bar.bar .nav .nav-item > a:not(.nav-connect),
  html body header#bar.bar.condensed .nav .nav-item > a:not(.nav-connect){font-size:clamp(12px,1.3vw,13px)!important;letter-spacing:.08em!important}
  html body header#bar.bar .nav .nav-item > a.nav-connect,
  html body header#bar.bar.condensed .nav .nav-item > a.nav-connect{font-size:clamp(12px,1.4vw,15px)!important;letter-spacing:.1em!important;
    padding-left:clamp(14px,calc(4vw - 14px),26px)!important;padding-right:clamp(14px,calc(4vw - 14px),26px)!important}
}
/* Narrower than 700px the panel is still the way in — on cream with ink type, never
   a dark page (owner: no black or navy menu page). */
.drawer{background:#FAF6EB!important;color:#1B1B1F}
.drawer-close{border-color:rgba(27,27,31,.35)!important;color:#1B1B1F!important}
.drawer-close:hover{background:rgba(27,27,31,.06)!important;border-color:rgba(27,27,31,.6)!important}
.drawer-item{border-bottom-color:rgba(27,27,31,.14)!important}
.drawer-row a,.drawer-acc,.drawer .drawer-cta{color:#1B1B1F!important}
.drawer-sub a{color:rgba(27,27,31,.72)!important}
.drawer .drawer-cta{border-color:rgba(27,27,31,.35)!important}