/* ==========================================================================
   Inspired Interiors — public theme
   Editorial luxury interior-design brand: soft cool gray (#F1F3F6), brass
   accent (#b89a47), near-black ink, high-contrast serif (Cormorant Garamond)
   paired with a geometric sans (Jost) echoing the DESIGN·BUILD·FURNISH mark.
   ========================================================================== */
:root {
  --ink: #151515;          /* near-black: hero overlay, buttons, footer */
  --charcoal: #222222;
  --body: #33373b;         /* cool dark-gray body text */
  --muted: #666b73;        /* cool muted gray (AA on cream + white) */
  --gold: #b89a47;         /* brass accent (primary; decorative/large + on-dark) */
  --gold-dark: #7c6526;    /* deep brass for small text/links on light (WCAG AA) */
  --cream: #f1f3f6;        /* cool soft-gray section background */
  --sand: #e7eaef;
  --line: #e1e5ec;         /* cool hairline */
  --line-soft: #eceff4;
  --white: #fff;
  --maxw: 1200px;
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--body);
  background: var(--white);
  line-height: 1.75;
  font-size: 16px;
}
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.1; letter-spacing: .005em; color: var(--ink); margin: 0 0 .5em; }
p { margin: 0 0 1rem; }
a { color: var(--gold-dark); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--ink); }
/* WCAG 1.4.1: links inside running text (paragraphs, article/legal body) must be
   distinguishable without relying on color alone, so they carry an underline.
   Standalone/link-styled elements (nav, buttons, cards, arrows) are unaffected. */
p a, .article__body a, .prose a, .obf-email { text-decoration: underline; text-underline-offset: .14em; text-decoration-thickness: 1px; }
p a:hover, .article__body a:hover, .prose a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; display: block; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
/* Visually hidden but available to screen readers + search engines (skip links,
   heading context). Not display:none, so it stays in the accessibility tree. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Skip link (WCAG 2.4.1): off-screen until it receives keyboard focus, then it
   slides into the top-left so keyboard users can jump straight to <main>. */
.skip-link {
  position: absolute; top: 0; left: 0; z-index: 200;
  transform: translateY(-120%);
  padding: .75rem 1.25rem;
  background: var(--ink); color: var(--white);
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip-link:focus {
  transform: translateY(0);
  color: var(--white);
  outline: 2px solid var(--gold); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* Eyebrow / section labels — thin, uppercase, gold, letter-spaced */
.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--gold-dark);
  margin: 0 0 1rem;
}
.eyebrow--light { color: var(--gold); }

/* Section title with optional centered gold rule */
.section-title { font-size: clamp(2.1rem, 3.9vw, 3.1rem); font-weight: 600; margin: 0 0 1rem; }
/* No straggling last word on display text: balance titles, hero ledes, and
   centered intro paragraphs. Browsers skip balancing past ~6 lines, so long
   prose is unaffected; unsupported browsers just keep normal wrapping. */
.section-title, .section__title, .page-hero h1, .page-hero__intro,
.prose.center > p { text-wrap: balance; }
.rule { width: 56px; height: 2px; background: var(--gold); border: 0; margin: 1.25rem 0; }
.rule--center { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 2rem;
  font-family: var(--font-sans);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--white); background: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer; transition: all .25s var(--ease);
}
.btn:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--white); }
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.btn--ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--white); }
.btn--sm { padding: .6rem 1.1rem; font-size: .7rem; letter-spacing: .14em; }

/* ---------- Utility bar ---------- */
.utilitybar { background: var(--ink); color: #cfcfcf; font-size: .8rem; }
.utilitybar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: 1rem; }
.utilitybar a { color: #d8c79e; letter-spacing: .04em; }
.utilitybar a:hover { color: var(--white); }
.utilitybar__left { flex: 0 1 320px; min-width: 0; margin-right: 1.5rem; }
.utilitybar__right { display: flex; gap: 1.25rem; align-items: center; flex: none; }
@media (max-width: 720px) { .utilitybar__left { display: none; } .utilitybar__inner { justify-content: center; } }

/* Neighborhood ticker (top utility bar) — seamless infinite marquee */
.ticker { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker__track { display: inline-flex; white-space: nowrap; will-change: transform; animation: ticker 55s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { padding: 0 1.4rem; color: #cdb98e; letter-spacing: .08em; font-size: .78rem; }
.ticker__item::after { content: "·"; margin-left: 1.4rem; color: var(--gold); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 84px; gap: 1.5rem; transition: min-height .3s var(--ease); }
.brand { display: flex; flex-direction: row; align-items: center; gap: .8rem; line-height: 1; }
.brand:hover { color: inherit; }
/* The brand link is never underlined. !important defends it when this header is
   stitched into the IDX vendor's page, whose stylesheet adds a generic
   a:hover { text-decoration: underline } that would otherwise hit the logo/name. */
.brand,
.brand:hover,
.brand:focus,
.brand:hover .brand__name,
.brand:hover .brand__tag { text-decoration: none !important; }
.brand__logo { height: 48px; width: auto; display: block; transition: height .3s var(--ease); }
.brand__text { display: flex; flex-direction: column; }
.brand__name { font-family: var(--font-serif); font-size: 1.55rem; font-weight: 700; color: var(--ink); letter-spacing: .02em; transition: font-size .3s var(--ease); }
.brand__tag { font-size: .58rem; text-transform: uppercase; letter-spacing: .34em; color: var(--gold-dark); margin-top: .35rem; transition: font-size .3s var(--ease), opacity .3s var(--ease); }
.site-header.is-scrolled .brand__logo { height: 40px; }

/* Compact state after scrolling past the threshold (toggled by JS) */
.site-header.is-scrolled { background: rgba(255,255,255,.82); box-shadow: 0 6px 22px rgba(0,0,0,.09); }
.site-header.is-scrolled .site-header__inner { min-height: 58px; }
.site-header.is-scrolled .brand__name { font-size: 1.2rem; }
.site-header.is-scrolled .brand__tag { font-size: .5rem; margin-top: .2rem; opacity: .85; }
.site-nav { display: flex; align-items: center; gap: 1.35rem; }
.nav-item { position: relative; display: flex; align-items: center; }
.site-nav .nav-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--charcoal); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: .4rem 0; }
.site-nav .nav-link:hover { color: var(--gold-dark); }
.nav-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; opacity: .55; transition: transform .2s var(--ease); }
.nav-item--has-children:hover .nav-caret,
.nav-item--has-children:focus-within .nav-caret { transform: rotate(180deg); }

/* Dropdown */
.nav-dropdown {
  position: absolute; top: 100%; left: 0; margin-top: .85rem; min-width: 230px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 38px rgba(0,0,0,.12);
  padding: .5rem 0; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; z-index: 60;
}
/* invisible bridge so the menu doesn't drop while moving the cursor down */
.nav-item--has-children::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 1rem; }
.nav-item--has-children:hover .nav-dropdown,
.nav-item--has-children:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: none; }
.site-nav .nav-dropdown a { display: block; padding: .6rem 1.2rem; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--charcoal); white-space: nowrap; }
.site-nav .nav-dropdown a:hover { background: #fafbfc; color: var(--gold-dark); }
.nav-dropdown--mega { display: grid; grid-template-columns: 1fr 1fr; min-width: 380px; }

/* Desktop: the mobile accordion wrapper is transparent and its toggle is hidden,
   so the hover-dropdown nav is unchanged. Both come alive in the mobile menu. */
.nav-row { display: contents; }
.nav-subtoggle { display: none; }

.nav-toggle, .nav-toggle-label { display: none; }

@media (max-width: 940px) {
  .site-header__inner { min-height: 70px; }
  .nav-toggle-label {
    display: block; cursor: pointer; width: 30px; height: 22px; position: relative; z-index: 30;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after {
    content: ""; position: absolute; left: 0; width: 30px; height: 2px; background: var(--ink); border-radius: 2px;
    transition: transform .33s var(--ease), top .33s var(--ease), opacity .2s var(--ease), background .25s var(--ease);
  }
  .nav-toggle-label span { top: 10px; }
  .nav-toggle-label span::before { top: -8px; }
  .nav-toggle-label span::after { top: 8px; }
  /* Morph the three lines into an X when open */
  .nav-toggle:checked ~ .nav-toggle-label span { background: transparent; }
  .nav-toggle:checked ~ .nav-toggle-label span::before { top: 0; transform: rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle-label span::after { top: 0; transform: rotate(-45deg); }

  /* Drop-down panel: kept in the DOM so it can animate; hidden + inert when closed
     (visibility/opacity/transform are all iOS-Safari friendly — no JS, no :hover). */
  .site-nav {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--white); border-bottom: 1px solid var(--line); padding: .5rem 1.5rem 1rem;
    max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    box-shadow: 0 18px 34px rgba(0,0,0,.12);
    opacity: 0; visibility: hidden; transform: translateY(-12px); pointer-events: none;
    transition: opacity .33s var(--ease), transform .33s var(--ease), visibility .33s var(--ease);
  }
  .nav-toggle:checked ~ .site-nav {
    opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  }
  /* Slim, on-brand scrollbar when the menu overflows (iOS keeps its overlay one) */
  .site-nav { scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
  .site-nav::-webkit-scrollbar { width: 6px; }
  .site-nav::-webkit-scrollbar-track { background: transparent; margin: .4rem 0; }
  .site-nav::-webkit-scrollbar-thumb {
    background-image: linear-gradient(var(--gold), var(--gold-dark));
    border-radius: 100px;
  }
  .site-nav::-webkit-scrollbar-thumb:active { background-image: linear-gradient(var(--gold-dark), var(--gold-dark)); }
  .nav-item, .nav-item--has-children { width: 100%; flex-direction: column; align-items: stretch; position: static; }
  .site-nav .nav-link { width: 100%; padding: .85rem 0; border-bottom: 1px solid var(--line-soft); }
  .nav-caret { display: none; }

  /* Parent row: label link + a chevron toggle button, on one line. */
  .nav-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line-soft); }
  .nav-row .nav-link { flex: 1 1 auto; border-bottom: 0; }
  .nav-subtoggle {
    display: flex; align-items: center; justify-content: center; align-self: stretch;
    flex: 0 0 58px; width: 58px; background: none; border: 0; cursor: pointer; color: var(--charcoal);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .nav-subtoggle__chev {
    width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease);
  }
  .nav-item--has-children.is-open .nav-subtoggle { color: var(--gold-dark); }
  .nav-item--has-children.is-open .nav-subtoggle__chev { transform: translateY(2px) rotate(225deg); }

  .nav-item--has-children::after { display: none; }

  /* Children collapsed by default; JS sets max-height to the exact content
     height so the accordion animates open/closed both ways. */
  .nav-dropdown, .nav-dropdown--mega {
    position: static; visibility: visible; transform: none; box-shadow: none; border: 0;
    margin-top: 0; padding: 0 0 0 .9rem; min-width: 0; display: block;  /* no vertical padding so max-height:0 fully collapses */
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .34s var(--ease), opacity .3s var(--ease);
  }
  .nav-item--has-children.is-open > .nav-dropdown { opacity: 1; }
  .site-nav .nav-dropdown a { padding: .55rem 0; border-bottom: 1px solid var(--line-soft); white-space: normal; }

  /* Stagger each top-level item in as the panel opens */
  .site-nav > .nav-item, .site-nav > .nav-link {
    opacity: 0; transform: translateX(-14px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .nav-toggle:checked ~ .site-nav > .nav-item,
  .nav-toggle:checked ~ .site-nav > .nav-link { opacity: 1; transform: translateX(0); }
  .nav-toggle:checked ~ .site-nav > :nth-child(1) { transition-delay: .07s; }
  .nav-toggle:checked ~ .site-nav > :nth-child(2) { transition-delay: .12s; }
  .nav-toggle:checked ~ .site-nav > :nth-child(3) { transition-delay: .17s; }
  .nav-toggle:checked ~ .site-nav > :nth-child(4) { transition-delay: .22s; }
  .nav-toggle:checked ~ .site-nav > :nth-child(5) { transition-delay: .27s; }
  .nav-toggle:checked ~ .site-nav > :nth-child(6) { transition-delay: .32s; }
  .nav-toggle:checked ~ .site-nav > :nth-child(7) { transition-delay: .37s; }
}

/* Honor reduced-motion: toggle the menu instantly, no slide/stagger. */
@media (prefers-reduced-motion: reduce) {
  .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after,
  .site-nav, .site-nav > .nav-item, .site-nav > .nav-link,
  .nav-dropdown, .nav-dropdown--mega, .nav-subtoggle__chev { transition: none !important; }
  .nav-toggle:checked ~ .site-nav > .nav-item,
  .nav-toggle:checked ~ .site-nav > .nav-link { transform: none; }
}

/* ---------- Hero (with fading slider + rolodex rotator) ---------- */
.hero {
  position: relative; min-height: 80vh; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--white); overflow: hidden; background: #1b1b1b;
}
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease-in-out;
}
.hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__slide.is-active { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14,14,14,.30), rgba(14,14,14,.44)); }
/* Cinematic banner band with hairlines, spanning full width */
.hero__banner {
  position: relative; z-index: 2; width: 100%;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  background: rgba(14,14,14,.22);
  padding: 3.25rem 1.5rem;
}
.hero__content { max-width: 900px; margin: 0 auto; text-align: center; }
.hero__rotator {
  display: inline-flex; font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 2.3rem); letter-spacing: .3em; text-transform: uppercase;
  margin-bottom: .35rem;
}
.hero__title {
  color: var(--white); font-size: clamp(3.2rem, 8.5vw, 6.8rem); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; line-height: 1; margin: 0;
}
.hero__rule { width: min(440px, 70%); height: 2px; background: var(--gold); border: 0; margin: 1.25rem auto 1.4rem; }
.hero__sub { color: rgba(255,255,255,.92); text-transform: uppercase; letter-spacing: .2em; font-size: .82rem; margin: 0 0 1.9rem; }
.hero__sub span { color: var(--gold); margin: 0 .5rem; }
.hero__btn { background: rgba(14,14,14,.72); border: 1px solid var(--gold); color: #fff; padding: 1.05rem 2.4rem; }
.hero__btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn__icon { width: 18px; height: 18px; fill: var(--gold); transition: fill .25s var(--ease); }
.hero__btn:hover .btn__icon { fill: var(--ink); }

/* Rolodex word rotator: each LETTER flips on a horizontal axis, staggered,
   matching the live site's split-flap effect. */
.rotator { display: inline-flex; perspective: 900px; vertical-align: top; }
.rotator__live { display: inline-flex; }
.rotator__live, .rotator__letter { color: var(--gold); }
.rotator__letter {
  display: inline-block; transform-origin: center center; backface-visibility: hidden;
  transition: transform .48s var(--ease), opacity .48s var(--ease);
}
.rotator__letter.pre { transform: rotateX(90deg); opacity: 0; }   /* flipping in */
.rotator__letter.out { transform: rotateX(-90deg); opacity: 0; }  /* flipping out */
/* Hidden source words for no-JS / SEO fallback */
.rotator__word[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero__slide, .testimonial__item { transition: opacity .2s linear; }
  .rotator__letter { transition: opacity .2s linear; transform: none !important; }
}

/* ---------- CTA trio (3 dark buttons) ---------- */
.cta-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.cta-row a {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 1.6rem 1rem; background: var(--ink); color: var(--white);
  font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
  border-right: 1px solid rgba(255,255,255,.12); transition: background .25s var(--ease);
}
.cta-row a:last-child { border-right: 0; }
.cta-row a:hover { background: var(--gold-dark); color: var(--white); }
@media (max-width: 700px) { .cta-row { grid-template-columns: 1fr; } .cta-row a { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); } }

/* ---------- Sections ---------- */
.section { padding: 5.5rem 0; }
/* Both classes on ONE element (blog index/detail): .section's shorthand
   above would zero out .wrap's side padding, leaving content flush to the
   viewport edge on mobile — restore both paddings. */
.wrap.section { padding: 5.5rem 1.5rem; }
.section--tight { padding: 4rem 0; }
.section--cream { background: var(--cream); }
.section--ivory { background: linear-gradient(180deg, #fafbfc 0%, #f1f3f6 100%); }
.section--ink { background: var(--ink); color: #e7eaef; }
.section--ink h2 { color: var(--white); }

/* Instagram feed embed — keep the grid centered and readable on wide screens. */
.ig-feed__embed { max-width: 1080px; }
.ig-feed__embed iframe { display: block; }

/* Split (agent intro) */
.split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3.5rem; align-items: center; }
.split__media img { width: 100%; height: auto; display: block; }
/* Portrait: show the full headshot (no crop). The PNG is a cutout, so let it
   blend into the section background — no shadow/frame. */
.split__media--portrait img { max-width: 460px; margin: 0 auto; }

/* Agent section: the portrait stands flush on the section's bottom edge so the
   feet aren't visually "chopped". */
.section--agent { padding-bottom: 0; }
.section--agent .split { align-items: end; }
.section--agent .split__media { align-self: end; }
.section--agent .split__media--portrait img { display: block; }
.section--agent .split__text { padding-bottom: 4.5rem; }
.signature { font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; color: var(--gold-dark); margin-top: 1rem; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: 2rem; }
  /* Stack text first, portrait last so it still rests on the bottom edge. */
  .section--agent .split__text { order: 1; padding-bottom: 0; }
  .section--agent .split__media { order: 2; }
}

/* Feature trio (Sellers / Buyers / Search) */
.feature-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.feature-card { position: relative; overflow: hidden; aspect-ratio: 4/5; display: block; color: var(--white); }
.feature-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.feature-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,14,.05) 40%, rgba(14,14,14,.8)); }
.feature-card:hover img { transform: scale(1.06); }
.feature-card__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.5rem; text-align: center; }
.feature-card__label h3 { color: var(--white); margin: 0 0 .25rem; font-size: 1.5rem; }
.feature-card__label span { font-size: .72rem; text-transform: uppercase; letter-spacing: .2em; color: var(--gold); }
@media (max-width: 820px) { .feature-trio { grid-template-columns: 1fr; } }

/* Communities grid (name always visible; description + CTA reveal on hover) */
.community-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.community-card { position: relative; overflow: hidden; aspect-ratio: 3/2; display: block; color: var(--white); }
.community-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.community-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,14,0) 42%, rgba(14,14,14,.8)); transition: background .35s var(--ease); }
.community-card:hover img { transform: scale(1.07); }
.community-card:hover::after { background: linear-gradient(180deg, rgba(14,14,14,.35), rgba(14,14,14,.85)); }
.community-card__overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem; }
.community-card__name { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; letter-spacing: .02em; color: var(--white); text-shadow: 0 1px 8px rgba(0,0,0,.55); transition: color .3s var(--ease); }
.community-card:hover .community-card__name { color: var(--gold); }
.community-card__desc { margin: .45rem 0 0; font-size: .85rem; line-height: 1.5; color: rgba(255,255,255,.92); max-height: 0; opacity: 0; overflow: hidden; transform: translateY(6px); transition: max-height .4s var(--ease), opacity .35s var(--ease), transform .35s var(--ease); }
.community-card__cta { margin-top: .6rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .18em; color: var(--gold); opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease) .05s, transform .35s var(--ease) .05s; }
.community-card:hover .community-card__desc { max-height: 140px; opacity: 1; transform: none; }
.community-card:hover .community-card__cta { opacity: 1; transform: none; }

/* Testimonials (rotating; items stacked and cross-faded) */
.testimonial { max-width: 760px; margin: 0 auto; text-align: center; display: grid; }
.testimonial__item { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .8s var(--ease); }
.testimonial__item.is-active { opacity: 1; visibility: visible; }
.testimonial__quote { font-family: var(--font-serif); font-size: clamp(1.4rem, 3vw, 2rem); font-style: italic; line-height: 1.4; color: var(--ink); margin: 0; }
.testimonial__by { margin-top: 1.25rem; text-transform: uppercase; letter-spacing: .2em; font-size: .75rem; color: var(--gold-dark); font-weight: 700; }
.stars { color: var(--gold); letter-spacing: .2em; margin-bottom: 1rem; }

/* CTA band */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.section--ink.cta-band h2 { color: var(--white); }

/* Card grid (blog) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
.card { display: block; color: inherit; background: var(--white); border: 1px solid var(--line); overflow: hidden; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.card:hover { box-shadow: 0 18px 40px rgba(0,0,0,.10); transform: translateY(-3px); color: inherit; }
.card__img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.card__body { padding: 1.4rem 1.5rem 1.75rem; min-width: 0; overflow-wrap: anywhere; }
.card__body h3 { font-size: 1.35rem; margin: 0 0 .5rem; overflow-wrap: anywhere; }
/* Excerpt: always clean, clamped to 3 lines so nothing escapes the card. */
.card__excerpt {
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}

/* ---------- Blog index: search + category filter + pagination ---------- */
.blog-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; margin: 1.75rem 0 .5rem;
}
.blog-search { display: flex; align-items: center; gap: .5rem; position: relative; }
.blog-search__icon { position: absolute; left: .85rem; color: var(--muted); pointer-events: none; }
.blog-search__input {
  width: min(340px, 70vw); padding: .65rem 1rem .65rem 2.6rem; font-size: .92rem;
  border: 1px solid var(--line); background: var(--white); color: var(--ink);
  transition: border-color .2s var(--ease);
}
.blog-search__input:focus { outline: none; border-color: var(--gold); }
.blog-search__btn {
  padding: .65rem 1.1rem; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--white); background: var(--ink); border: 1px solid var(--ink); cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.blog-search__btn:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
/* Phones: 70vw of input + the button outgrows the container — let the form
   span the row and the input flex into whatever the button leaves. */
@media (max-width: 640px) {
  .blog-search { width: 100%; }
  .blog-search__input { flex: 1; width: auto; min-width: 0; }
}
.blog-cats { display: flex; flex-wrap: wrap; gap: .4rem; }
.blog-cat {
  padding: .42rem .9rem; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--charcoal); background: transparent;
  border: 1px solid rgba(201,169,97,.35);
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.blog-cat:hover { color: var(--gold-dark); border-color: var(--gold); }
.blog-cat.is-active { color: var(--white); background: var(--ink); border-color: var(--ink); }
.blog-cat.is-active:hover { color: var(--white); }
.blog-results { margin: 0 0 1.5rem; }
.blog-empty { margin-top: 2rem; }
.pagination {
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.pagination__link {
  font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gold-dark);
}
.pagination__link:hover { color: var(--ink); }
.pagination__link.is-disabled { color: var(--muted); cursor: default; }
.pagination__info { font-size: .78rem; letter-spacing: .08em; color: var(--muted); }

/* ---------- Scroll reveals (reveal.js) ---------- */
/* Hidden state is applied by JS only, so no-JS visitors see everything and
   reduced-motion users (checked in JS) never animate. */
.will-reveal { opacity: 0; transform: translateY(16px); }
.will-reveal.is-revealed {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
/* Interior page heroes settle in softly on load (CSS-only, one-shot). */
@media (prefers-reduced-motion: no-preference) {
  .page-hero__inner { animation: hero-settle .7s var(--ease) both; }
  @keyframes hero-settle { from { opacity: 0; transform: translateY(12px); } }
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  position: relative; min-height: 42vh; display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--white); background: linear-gradient(180deg, rgba(14,14,14,.5), rgba(14,14,14,.65)), #1b1b1b;
  background-size: cover; background-position: center;
}
.page-hero__inner { position: relative; z-index: 2; padding: 4rem 1.5rem; }
.page-hero h1 { color: var(--white); font-size: clamp(2rem, 5vw, 3.4rem); text-transform: uppercase; letter-spacing: .05em; }
.page-hero .eyebrow { color: var(--gold); }

/* ---------- Article (blog detail) ---------- */
.article { max-width: 760px; margin: 0 auto; padding: 4rem 1.5rem; }
.article__meta { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1.5rem; }
.article__hero-img { width: 100%; margin: 1.5rem 0 2rem; }
.article__body { font-size: 1.08rem; }
.article__body h2 { margin-top: 2rem; }
.article__body img { margin: 1.5rem 0; }
.article__body blockquote { border-left: 3px solid var(--gold); margin: 1.5rem 0; padding-left: 1.25rem; font-style: italic; color: #444; }

/* ---------- Pinterest save button (content photography only) ----------
   Desktop: hidden until the photo is hovered/focused, matching the old
   site. Touch has no hover to discover it with, and several of these images
   already have their own primary tap action (open the lightbox, switch the
   gallery photo), so a "tap to reveal" step would compete with that -
   instead the button just stays quietly visible at rest on touch devices. */
.pin-wrap { position: relative; display: block; }
.pin-save {
  position: absolute; right: .7rem; bottom: .7rem; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gold); color: var(--ink); box-shadow: 0 2px 10px rgba(0,0,0,.3);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.pin-save svg { width: 16px; height: 16px; }
.pin-save:hover, .pin-save:focus-visible { background: var(--ink); color: var(--white); }
.pin-wrap:hover .pin-save, .pin-wrap:focus-within .pin-save,
.property__hero:hover .pin-save--chrome, .property__hero:focus-within .pin-save--chrome {
  opacity: 1; transform: none; pointer-events: auto;
}
/* The hero's zoom-expand button already owns the bottom-right corner (see
   .property__zoom) - park the pin button bottom-left instead of stacking on it. */
.pin-save--chrome { left: 1rem; right: auto; bottom: 1rem; }
/* Lightbox chrome (close/prev/next) is always visible, not hover-revealed - match that. */
.pin-save--lightbox { right: 1.25rem; bottom: 1.25rem; opacity: 1; transform: none; pointer-events: auto; }
@media (hover: none) {
  .pin-save, .pin-save--chrome { opacity: .85; transform: none; pointer-events: auto; }
  .pin-save:active { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pin-save { transition: none; }
}

/* ---------- Responsive video embeds (blog + pages) ---------- */
.embed-responsive {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  margin: 2rem 0; background: #000; border-radius: 8px; overflow: hidden;
}
.embed-responsive iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.embed-responsive video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
/* Fallback for browsers without aspect-ratio: a 16:9 padding box. */
@supports not (aspect-ratio: 16 / 9) {
  .embed-responsive { height: 0; padding-bottom: 56.25%; }
}

/* ---------- Interior pages ---------- */
.page-hero__intro { color: rgba(255,255,255,.9); max-width: 620px; margin: 1rem auto 0; font-size: 1.02rem; }
.prose { max-width: 760px; margin: 0 auto; }
.prose p { font-size: 1.06rem; }

/* Modern service pages */
.service-intro { background: #fff; }
.service-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
}
.service-intro__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 690px;
}
.service-intro__copy .section-title { font-size: clamp(2rem, 4vw, 3.2rem); }
.service-intro__copy p { font-size: 1.08rem; color: #4a4a4a; }
.contact-quick--left { justify-content: flex-start; margin-top: 2rem; }
.service-panel {
  position: relative;
  display: grid;
  align-content: stretch;
  gap: 0;
  background: #101010;
  color: #ddd7ca;
  border: 1px solid rgba(201,169,97,.36);
  box-shadow: 0 26px 70px rgba(0,0,0,.13);
}
.service-panel--dark { background: linear-gradient(145deg, #111 0%, #242424 100%); }
.service-panel__item {
  padding: 1.55rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.service-panel__item:last-child { border-bottom: 0; }
.service-panel__item span {
  display: block;
  margin-bottom: .55rem;
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 1.45rem;
  line-height: 1;
}
.service-panel__item strong {
  display: block;
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.2;
  margin-bottom: .45rem;
}
.service-panel__item p { margin: 0; color: #c7c0b2; font-size: .95rem; line-height: 1.55; }
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.25rem;
}
.section-heading .section-title { max-width: 620px; margin-bottom: 0; }
.modern-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.modern-step {
  display: grid;
  grid-template-rows: 54px auto 1fr;
  align-content: start;
  min-height: 290px;
  padding: 1.6rem;
  background: #fff;
}
.modern-step__num {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  border: 1px solid var(--gold);
  color: var(--gold-dark);
  font-family: var(--font-serif);
  font-weight: 700;
}
.modern-step h3 { align-self: start; font-size: 1.25rem; margin: 1.4rem 0 .45rem; }
.modern-step p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.58; }
.modern-process {
  list-style: none;
  counter-reset: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
}
.modern-process li {
  min-height: 210px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 1.35rem;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.modern-process li:hover {
  transform: translateY(-3px);
  border-color: rgba(201,169,97,.55);
  box-shadow: 0 18px 42px rgba(0,0,0,.08);
}
.modern-process span {
  display: block;
  margin-bottom: 1.25rem;
  color: var(--gold-dark);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1;
}
.modern-process h3 { font-size: 1.12rem; margin: 0 0 .45rem; }
.modern-process p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.callout--modern {
  margin-top: 2rem;
  border-left: 0;
  border-top: 3px solid var(--gold);
  box-shadow: 0 18px 45px rgba(0,0,0,.06);
}
.feature-strip {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.feature-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.feature-strip__grid div {
  min-height: 210px;
  padding: 1.35rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.feature-strip__grid strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.25;
  margin-bottom: .65rem;
}
.feature-strip__grid p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.58; }
.cta-band__text { max-width: 560px; margin: 0 auto 2rem; }
.buyer-cta { background: #fff; }
.buyer-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 1rem;
  align-items: center;
  padding: 2rem;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, #fff 0%, #fafbfc 100%);
}
.buyer-cta__inner .section-title { margin-bottom: .35rem; }
.buyer-cta__inner p { margin-bottom: 0; max-width: 560px; }
@media (max-width: 980px) {
  .service-intro__grid,
  .feature-strip { grid-template-columns: 1fr; }
  .modern-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modern-step { min-height: 230px; }
  .modern-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-strip__grid { grid-template-columns: 1fr 1fr; }
  .buyer-cta__inner { grid-template-columns: 1fr; justify-items: start; }
}
@media (max-width: 640px) {
  .service-panel__item,
  .modern-step,
  .modern-process li,
  .feature-strip__grid div { padding: 1.2rem; }
  .modern-steps,
  .modern-process,
  .feature-strip__grid { grid-template-columns: 1fr; }
  .modern-step { min-height: 0; }
  .section-heading { display: block; }
  .buyer-cta__inner { padding: 1.35rem; }
  .contact-quick--left .btn,
  .buyer-cta__inner .btn { width: 100%; justify-content: center; }
}

/* Process steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.75rem; }
.step { background: #fff; border: 1px solid var(--line); padding: 1.75rem; }
.step__num { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; color: var(--gold); display: block; margin-bottom: .5rem; }
.step h3 { font-size: 1.25rem; margin: 0 0 .4rem; }
.step p { margin: 0; color: var(--muted); font-size: .95rem; }

/* Numbered process list (e.g. home buying process) */
.process { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.75rem; }
.process li { counter-increment: step; position: relative; padding-left: 3.4rem; }
.process li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: -.15rem; font-family: var(--font-serif); font-size: 1.35rem; font-weight: 700; color: var(--gold); }
.process h3 { font-size: 1.1rem; margin: 0 0 .3rem; }
.process p { margin: 0; color: var(--muted); font-size: .92rem; }
@media (max-width: 760px) { .process { grid-template-columns: 1fr; } }
.callout { margin-top: 2.75rem; background: #fff; border-left: 3px solid var(--gold); padding: 1.25rem 1.5rem; font-size: .98rem; }

/* Mission / brand promise */
.mission-quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.3; color: var(--ink); margin: 0 auto; max-width: 720px; }
.mission-promise { font-size: 1.1rem; max-width: 660px; margin: .5rem auto 0; color: var(--body); }

/* Resource link cards */
.linkcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; margin-top: 2.5rem; }
.linkcard { display: block; border: 1px solid var(--line); background: #fff; padding: 1.6rem; color: inherit; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.linkcard:hover { box-shadow: 0 14px 32px rgba(0,0,0,.09); transform: translateY(-2px); color: inherit; text-decoration: none; }
.linkcard span { color: var(--gold-dark); font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; }
.linkcard h3 { font-size: 1.15rem; margin: .35rem 0 0; }

/* Stat blocks */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; text-align: center; }
.stat-block__num { font-family: var(--font-serif); font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 700; color: var(--color-primary); line-height: 1; }
.stat-block__label { color: var(--muted); font-size: .85rem; margin-top: .5rem; text-transform: uppercase; letter-spacing: .08em; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: 2.25rem; } }
.contact-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.contact-list li { padding: .85rem 0; border-bottom: 1px solid var(--line); display: flex; gap: 1rem; align-items: baseline; }
.contact-list__label { width: 80px; flex: none; text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--gold-dark); font-weight: 700; }
.contact-quick { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

/* Forms (public) */
.contact-form .field { margin-bottom: 1rem; }
.contact-form label { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .4rem; color: var(--charcoal); }
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; padding: .8rem .9rem; border: 1px solid var(--line); background: #fff; font: inherit; color: var(--body); border-radius: 2px; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,169,97,.15); }
.contact-form .field--error input, .contact-form .field--error select { border-color: #c0392b; }
.field__error { color: #b91c1c; font-size: .8rem; margin: .35rem 0 0; }
.contact-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 540px) { .contact-form .field-row { grid-template-columns: 1fr; } }
.contact-form .errorlist { margin: .35rem 0 0; padding-left: 1.1rem; color: #9b1c1c; font-size: .82rem; }
.contact-form .field--error input { border-color: #d19b9b; }

/* Home value / Cloud CMA lead page */
.value-page { background: linear-gradient(180deg, #fff 0%, #f1f3f6 100%); }
.value-page__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(360px, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.value-copy {
  position: sticky;
  top: 110px;
  padding-top: .5rem;
}
.value-copy .section-title { font-size: clamp(2rem, 4.4vw, 3.25rem); }
.value-copy p { color: #484848; font-size: 1.08rem; max-width: 640px; }
.value-benefits {
  display: grid;
  gap: 1px;
  margin-top: 2.25rem;
  border: 1px solid var(--line);
  background: var(--line);
}
.value-benefits div {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: .15rem 1rem;
  padding: 1.1rem;
  background: #fff;
}
.value-benefits span {
  grid-row: span 2;
  color: var(--gold-dark);
  font-family: var(--font-serif);
  font-weight: 700;
}
.value-benefits strong {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.12rem;
  line-height: 1.2;
}
.value-benefits p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.value-form-card {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 28px 70px rgba(0,0,0,.12);
}
.value-form-card__head {
  padding: 1.5rem 1.6rem;
  background: var(--ink);
  color: #d9d2c6;
  border-bottom: 2px solid var(--gold);
}
.value-form-card__head h3 { color: #fff; margin: 0; font-size: 1.55rem; }
.value-form-card__head .eyebrow { margin-bottom: .55rem; }
.value-form { padding: 1.6rem; }
.value-form .field-row--address { grid-template-columns: 1fr .42fr .62fr; }
.field--check label {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: .92rem;
  line-height: 1.45;
  font-weight: 400;
  color: #494949;
}
.field--check input { width: auto; margin-top: .2rem; }
.value-form button { width: 100%; justify-content: center; margin-top: .25rem; }
.value-form__note { margin: .9rem 0 0; color: var(--muted); font-size: .86rem; text-align: center; }
@media (max-width: 900px) {
  .value-page__grid { grid-template-columns: 1fr; }
  .value-copy { position: static; }
}
@media (max-width: 620px) {
  .value-form-card__head,
  .value-form { padding: 1.25rem; }
  .value-form .field-row--address { grid-template-columns: 1fr; }
  .value-benefits div { grid-template-columns: 1fr; }
}
.form-note { background: var(--cream); border-left: 3px solid var(--gold); padding: .85rem 1.1rem; font-size: .9rem; margin-bottom: 1.25rem; color: #4a4f57; }
.form-note--success { background: #e7f6ec; border-left-color: #16a34a; color: #166534; }

/* IDX placeholder (Phase 5) */
.idx-placeholder { border: 1px dashed var(--gold); background: rgba(201,169,97,.06); padding: 3rem 1.5rem; text-align: center; }
.idx-placeholder p { max-width: 480px; margin: .5rem auto 1.25rem; color: var(--muted); }

/* Recently Sold & Leased widget (My Listings) */
.sold-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; margin-top: 2.5rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid rgba(201,169,97,.25);
}
.sold-toolbar__count {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--muted);
}
.sold-sort { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.sold-sort__label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--muted); margin-right: .55rem;
}
.sold-sort__opt {
  padding: .42rem .85rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--charcoal); background: transparent;
  border: 1px solid rgba(201,169,97,.35);
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.sold-sort__opt:hover { color: var(--gold-dark); border-color: var(--gold); }
.sold-sort__opt.is-active {
  color: var(--white); background: var(--ink); border-color: var(--ink);
}
.sold-sort__opt.is-active:hover { color: var(--white); }
@media (max-width: 560px) {
  .sold-toolbar { justify-content: center; }
  .sold-sort { justify-content: center; }
}
.sold-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}
.sold-toolbar + .sold-grid { margin-top: 1.75rem; }
.sold-card { background: var(--white); border: 1px solid rgba(201,169,97,.25); display: flex; flex-direction: column; }
.sold-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #e7eaef; }
.sold-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.sold-card:hover .sold-card__media img { transform: scale(1.04); }
.sold-card__noimg { width: 100%; height: 100%; background: linear-gradient(135deg, #e7eaef, #e2dac8); }
.sold-card__badge {
  position: absolute; top: .8rem; left: .8rem;
  padding: .28rem .7rem; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--white);
  background: var(--ink);
}
.sold-card__badge--leased { background: var(--gold-dark); }
.sold-card__badge--for_sale { background: var(--gold, #b89a47); color: var(--ink); }
.sold-card__badge--for_lease { background: var(--gold-dark); }
.sold-card__body { padding: 1.4rem 1.5rem 1.6rem; }
.sold-card__address { font-size: 1.12rem; margin: 0 0 .5rem; }
.sold-card__meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: baseline; margin-bottom: .6rem; }
.sold-card__price { font-family: var(--font-serif); font-size: 1.15rem; color: var(--gold-dark); }
.sold-card__specs { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.sold-card__desc { font-size: .92rem; color: #4a4f57; margin: 0 0 .75rem; line-height: 1.6; }
.sold-card__more { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gold-dark); }
.sold-card:hover .sold-card__more { color: var(--ink); }

/* Sold property detail page */
.breadcrumb { font-size: .82rem; color: var(--muted); margin-bottom: 1.75rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--gold-dark); }
.breadcrumb span { margin: 0 .4rem; color: var(--muted); }
.property { display: grid; grid-template-columns: 1.25fr 1fr; gap: 3rem; align-items: start; }
.property__hero { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: #e7eaef; }
.property__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.property__hero--empty { background: linear-gradient(135deg, #2b3548, #1c2230); display: flex; align-items: center; justify-content: center; margin: 0; }
.property__noimg-label { color: rgba(255,255,255,.75); font-size: .85rem; text-transform: uppercase; letter-spacing: .18em; }
.property__hero .sold-card__badge { top: 1rem; left: 1rem; }
.property__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-top: .5rem; }
.property__thumb { padding: 0; border: 2px solid transparent; background: none; cursor: pointer; aspect-ratio: 3 / 2; overflow: hidden; }
.property__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.property__thumb.is-active { border-color: var(--gold); }
.property__address { font-size: 2rem; margin: .35rem 0 .9rem; }
.property__facts { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.property__status { position: static; }
.property__price { font-family: var(--font-serif); font-size: 1.6rem; color: var(--gold-dark); }
.property__specs { font-size: .9rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 1.5rem; }
.property__desc { color: #4a4233; line-height: 1.8; }
.property__cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2rem; }
@media (max-width: 820px) {
  .property { grid-template-columns: 1fr; gap: 2rem; }
  .property__address { font-size: 1.6rem; }
}
.property__hero-btn { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; position: relative; }
.property__zoom {
  position: absolute; bottom: .8rem; right: .8rem; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,14,14,.6); color: #fff; font-size: 1.2rem; border-radius: 50%;
  opacity: 0; transition: opacity .25s var(--ease);
}
.property__hero-btn:hover .property__zoom,
.property__hero-btn:focus-visible .property__zoom { opacity: 1; }

/* Lightbox */
body.lightbox-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(10,10,10,.93); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox__stage { margin: 0; display: flex; flex-direction: column; align-items: center; }
.lightbox__img { max-width: 90vw; max-height: 84vh; object-fit: contain; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.lightbox__counter { color: #e7eaef; margin-top: .9rem; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; }
.lightbox__close {
  position: absolute; top: 1rem; right: 1.25rem; width: 46px; height: 46px;
  background: none; border: 0; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
}
.lightbox__close:hover { color: var(--gold); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 56px; height: 56px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; border-radius: 50%;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.lightbox__nav:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.lightbox__nav--prev { left: 1.5rem; }
.lightbox__nav--next { right: 1.5rem; }
@media (max-width: 640px) {
  .lightbox__nav { width: 44px; height: 44px; font-size: 1.5rem; }
  .lightbox__nav--prev { left: .5rem; }
  .lightbox__nav--next { right: .5rem; }
}

/* Legal prose */
.legal-prose { max-width: 760px; margin: 0 auto; }
.legal-prose h2 { font-size: 1.8rem; margin-top: 0; }
.legal-prose h3 { font-size: 1.2rem; margin-top: 2rem; }

/* ---------- FAQ accordion (About page) ---------- */
.faq-list { max-width: 760px; margin: 2.5rem auto 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item__q {
  list-style: none; cursor: pointer; padding: 1.2rem 2.2rem 1.2rem 0; position: relative;
  font-family: var(--font-serif); font-size: 1.15rem; color: var(--ink); font-weight: 700;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: ""; position: absolute; right: .3rem; top: 1.55rem; width: 9px; height: 9px;
  border-right: 2px solid var(--gold-dark); border-bottom: 2px solid var(--gold-dark);
  transform: rotate(45deg); transition: transform .3s var(--ease);
}
.faq-item[open] .faq-item__q::after { transform: rotate(-135deg); }
.faq-item__a { padding: 0 2.2rem 1.4rem 0; color: #4a4f57; line-height: 1.7; }
.faq-item__a p { margin: 0 0 .8rem; }
.faq-item[open] .faq-item__a { animation: footer-reveal .3s var(--ease); }

/* Honeypot bot-trap link: off-screen + non-focusable so humans never reach it. */
.bot-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer — editorial, contact-as-design ---------- */
.site-footer { background: var(--ink); color: #b9bcc2; padding: clamp(3rem, 5vw, 4.25rem) 0 1.5rem; position: relative; overflow: hidden; }
/* faint oversized brass hairline motif echoing the logo mark */
.site-footer::before { content: ""; position: absolute; top: -14%; right: -6%; width: 460px; height: 460px; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(184,154,71,.10) 0 1px, transparent 1px 22px);
  -webkit-mask: linear-gradient(135deg, #000, transparent 70%); mask: linear-gradient(135deg, #000, transparent 70%); }

/* Brand column + three equal link columns. The old footer was tall because a
   single stacked nav ran 10 links deep next to a display-size email address;
   the links all survive here, laid out across instead of down. */
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); position: relative; z-index: 1;
  padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid rgba(255,255,255,.12); }

/* Explicit margins rather than a uniform flex gap: the slogan belongs to the
   logo as a lockup, and the address/socials are a separate block. An even gap
   made all three read as one undifferentiated list. */
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.footer-brand__logo { width: 168px; height: auto; opacity: .9; }
/* Set to the brand guide's SUBHEAD spec: all caps at .3em tracking (the guide
   allows subheads up to 15 words; this is 10). The face is the interim sans,
   not Sweet Sans Pro, pending the webfont licence — when that lands, only
   font-family changes here. Uppercasing is done in CSS, not in the stored
   string, so the Studio value and any screen reader keep normal sentence case.
   Larger and white against the small gold column heads, so the two tiers of
   caps read as a hierarchy rather than competing. */
.footer-brand__line {
  position: relative; margin: 1.15rem 0 0; padding-top: .9rem;
  font-family: var(--font-sans); font-size: .74rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .3em; line-height: 1.85;
  color: #e4e7ea; text-wrap: balance;
  /* Sized in rem, not ch: the ch unit measures the "0" glyph and ignores
     letter-spacing, so at .3em tracking a 24ch cap only fits ~16 characters and
     stranded a single word on line one. Wide enough here to hold two lines,
     which is what keeps the brand column from setting the footer's height. */
  max-width: 21rem;
}
.footer-brand__line::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 2px; background: var(--gold); }
.footer-addr { display: inline; font-style: normal; color: inherit; font-size: inherit; line-height: inherit; margin: 0; }

.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.footer-col__head { font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .35rem; }
.footer-col a { color: #cfd3da; font-size: .84rem; letter-spacing: .06em; transition: color .2s var(--ease); }
.footer-col a:hover { color: var(--gold); }
.footer-col__mail { word-break: break-word; }
.footer-col__cta { display: inline-flex; align-items: center; gap: .5rem; margin-top: .5rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: #fff; border-bottom: 1px solid var(--gold); padding-bottom: .3rem; }
.footer-col__cta span { transition: transform .25s var(--ease); }
.footer-col__cta:hover span { transform: translateX(5px); }

.footer-socials { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.35rem; }
.footer-socials a { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: #cfd3da; transition: border-color .2s var(--ease), color .2s var(--ease); }
.footer-socials a:hover { border-color: var(--gold); color: var(--gold); }
.footer-socials svg { width: 15px; height: 15px; fill: currentColor; }

.footer-base { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.2rem;
  position: relative; z-index: 1; padding-top: 1.4rem; font-size: .74rem; letter-spacing: .04em; color: #83878f; }
/* Padding + negative margin grows the touch target to WCAG's 24px minimum
   (the bare text was 18px tall) without shifting the visual layout. */
.footer-base a { color: #a7abb3; display: inline-block; padding: .3rem .2rem; margin: -.3rem -.2rem; }
.footer-base a:hover { color: var(--gold); }

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; row-gap: 2.25rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .site-footer { padding: 2.75rem 0 1.25rem; text-align: center; }
  .site-footer::before { display: none; }
  .footer-top { grid-template-columns: 1fr; row-gap: 1.9rem; }
  .footer-brand, .footer-col { align-items: center; }
  /* Centred column: the brass rule has to centre with the text it sits under. */
  .footer-brand__line { max-width: 20rem; margin-top: 1.4rem; }
  .footer-brand__line::before { left: 50%; transform: translateX(-50%); }
  .footer-socials { justify-content: center; }
  .footer-base { flex-direction: column; text-align: center; }
}

/* ---------- Sticky mobile quick-contact bar ---------- */
.mobile-cta { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 58px; } /* room so the bar never covers the footer */
  /* Keep the open menu clear of the fixed quick-contact bar (~58px): shorten it
     and pad the bottom so the last items scroll fully into view above the bar. */
  .site-nav { max-height: calc(100vh - 180px); max-height: calc(100dvh - 180px); padding-bottom: 24px; }
  .mobile-cta {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--ink); box-shadow: 0 -6px 20px rgba(0,0,0,.28);
  }
  .mobile-cta__btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12rem;
    padding: .55rem .25rem .65rem; color: #fff; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; border-right: 1px solid rgba(255,255,255,.12);
  }
  .mobile-cta__btn:last-child { border-right: 0; }
  .mobile-cta__btn:hover, .mobile-cta__btn:active { color: var(--gold); text-decoration: none; }
  .mobile-cta__btn svg { width: 20px; height: 20px; fill: currentColor; }
  .mobile-cta__btn--gold { background: var(--gold); color: var(--ink); }
  .mobile-cta__btn--gold:hover { color: var(--ink); opacity: .92; }
}


/* ==========================================================================
   Inspired Interiors — bespoke homepage/layout (differentiated architecture)
   ========================================================================== */

/* ---- Header: one clean row, no utility ticker ---- */
/* The logo is sized by height, so its width follows the artwork's ratio. The
   horizontal lockup is ~3.75:1, so 80px tall reads as 300px wide — roughly a
   fifth of a desktop header, which is the presence the client asked for. */
.site-header__inner { min-height: 104px; gap: 1.75rem; justify-content: flex-start; }
.brand { margin-right: auto; }
.brand__logo { height: 80px; }
.site-header.is-scrolled .brand__logo { height: 58px; }
.site-header.is-scrolled .site-header__inner { min-height: 74px; }
@media (max-width: 940px) {
  .site-header__inner { min-height: 84px; }
  /* Shorter than the desktop rule because width, not height, is the constraint
     on a phone: at 60px this lockup spans 62% of a 360px screen and crowds the
     menu button. 46px keeps it clear while still reading twice the size of the
     stacked mark it replaced. */
  .brand__logo, .site-header.is-scrolled .brand__logo { height: 46px; }
}
.site-header__actions { display: flex; align-items: center; gap: 1.25rem; }
.header-socials { display: flex; gap: .55rem; }
.header-socials a { color: var(--charcoal); opacity: .62; transition: opacity .2s var(--ease), color .2s var(--ease); }
.header-socials a:hover { opacity: 1; color: var(--gold-dark); }
.header-socials svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.header-cta {
  display: inline-flex; align-items: center; font-family: var(--font-sans); font-size: .68rem;
  font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  border: 1px solid var(--ink); padding: .72rem 1.4rem; transition: background .2s var(--ease), color .2s var(--ease);
}
.header-cta:hover { background: var(--ink); color: #fff; }
.nav-link--cta-mobile { display: none; }
@media (max-width: 940px) {
  .site-header__actions { display: none; }
  .nav-link--cta-mobile { display: block; margin-top: .5rem; color: var(--gold-dark); font-weight: 700; }
}

/* ---- Hero: immersive full-bleed photo with localized editorial copy ---- */
.hero--editorial { position: relative; min-height: 88vh; min-height: 88svh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: #111; }
.hero--editorial::after { content: ""; position: absolute; inset: 0; z-index: 1;
  /* Flat overlay, not a vignette. The copy has no panel behind it, so this is
     the only thing keeping the type legible, and an even wash reads as a
     deliberate treatment where a centred radial pool read as a spotlight.
     Measured against every hero slide (the brightest is the binding one):
     .56 is the lowest that clears WCAG AA, and only with the small text set in
     white. Held at .58 for headroom, because hero slides are client-editable in
     Studio and a brighter upload would otherwise push the eyebrow under. If you
     lower this, re-measure the type against the plate underneath. */
  background: rgba(10,10,10,.58); }
.hero--editorial .hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero--editorial .hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease); }
.hero--editorial .hero__slide.is-active { opacity: 1; }
.hero--editorial .hero__slide img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.04) contrast(1.02); }
.hero__inner { position: relative; z-index: 3; text-align: center; color: #fff; padding: 0 1.5rem; max-width: var(--maxw); width: 100%; margin: 0 auto; }
/* No panel behind the copy: the type sits directly on the photograph, centred.
   min-height is gone with it, since the block no longer has to fill a box. */
.hero__copy { position: relative; display: flex; flex-direction: column; align-items: center; max-width: min(760px, 100%); margin: 0 auto; padding: 0; }
/* White, not the brand gold. At this size WCAG wants 4.5:1, and gold on these
   bright interiors only reaches that under an overlay dark enough to kill the
   photograph. The gold stays on the headline rotator, which is large enough to
   only need 3:1 and clears it. */
.hero__eyebrow { display: inline-block; font-size: .74rem; letter-spacing: .34em; text-transform: uppercase; color: #fff; margin-bottom: 1.2rem; text-shadow: 0 1px 14px rgba(0,0,0,.6); }
.hero__headline { color: #fff; font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.7rem, 5.6vw, 5rem); line-height: 1.02; letter-spacing: .01em; margin: 0 0 1.25rem; text-shadow: 0 2px 28px rgba(0,0,0,.38); text-wrap: balance; }
.hero__headline-static { display: block; }
.hero__headline-rotator { display: block; min-height: 1.18em; color: #f4da96; font-size: .9em; white-space: nowrap; overflow: visible; padding-bottom: .08em; }
.hero__headline-live { display: inline-block; min-height: 1.12em; line-height: 1.12; transition: opacity .82s var(--ease), transform .82s var(--ease); will-change: opacity, transform; }
.hero__headline-live.is-leaving { opacity: 0; transform: translateX(.42em); }
.hero__headline-live.is-entering { opacity: 0; transform: translateX(-.42em); }
.hero__lede { max-width: 34rem; color: #fff; font-size: 1.06rem; line-height: 1.65; margin: 0 auto 2rem; text-shadow: 0 1px 16px rgba(0,0,0,.46); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.hero--editorial .btn--gold { box-shadow: 0 14px 32px rgba(0,0,0,.22); }
.btn--hollow { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.72); }
.btn--hollow:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ---- Credentials bar ---- */
.credbar { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.credbar__row { display: flex; flex-wrap: wrap; justify-content: center; }
.cred { flex: 1 1 0; min-width: 150px; text-align: center; padding: 2.4rem 1rem; position: relative; }
.cred + .cred::before { content: ""; position: absolute; left: 0; top: 26%; bottom: 26%; width: 1px; background: var(--line); }
.cred__num { display: block; font-family: var(--font-serif); font-weight: 500; font-size: clamp(2rem, 3.2vw, 2.9rem); color: var(--ink); line-height: 1; }
.cred__label { display: block; margin-top: .6rem; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* ---- Featured work rows (image + client voice) ---- */
.featured__head { max-width: 640px; }
.featured__intro { color: var(--muted); margin-top: .6rem; }
.featured__list { max-width: var(--maxw); margin: 3.5rem auto 0; padding: 0 1.5rem; display: flex; flex-direction: column; gap: 5.5rem; }
.feature-row { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.feature-row--reverse .feature-row__media { order: 2; }
.feature-row__media { display: block; overflow: hidden; aspect-ratio: 4/3; background: var(--cream); }
.feature-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.feature-row__media:hover img { transform: scale(1.04); }
.feature-row__place { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dark); }
.feature-row__title { font-size: clamp(1.7rem, 2.6vw, 2.4rem); margin: .5rem 0 1.1rem; }
.feature-row__quote { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; line-height: 1.5; color: var(--body); margin: 0 0 .8rem; border: 0; padding: 0; }
.feature-row__cite { display: block; font-size: .8rem; letter-spacing: .06em; color: var(--muted); font-style: normal; margin-bottom: 1.4rem; }
/* Shown in place of a pull quote when the project has no client quote. */
.feature-row__desc { color: var(--body); line-height: 1.75; margin: 0 0 1.4rem; }
.linkarrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.linkarrow span { transition: transform .25s var(--ease); }
.linkarrow:hover { color: var(--gold-dark); }
.linkarrow:hover span { transform: translateX(5px); }

/* ---- Press strip ---- */
.press .eyebrow { display: block; margin-bottom: 1.8rem; }
.press__logos { width: 100%; max-width: 860px; margin: 0 auto; opacity: .82; mix-blend-mode: multiply; }

/* ---- Services band ---- */
.split--wide { grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.services-list { list-style: none; margin: 2rem 0; padding: 0; }
.services-list li { display: flex; gap: 1.2rem; padding: 1.15rem 0; border-top: 1px solid var(--line); }
.services-list li:last-child { border-bottom: 1px solid var(--line); }
.services-list span { font-family: var(--font-serif); font-size: 1.1rem; color: var(--gold-dark); flex: none; padding-top: .15rem; }
.services-list strong { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 1.35rem; color: var(--ink); }
.services-list p { margin: .25rem 0 0; font-size: .92rem; }
.split__media--tall { aspect-ratio: 4/5; overflow: hidden; }
.split__media--tall img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Designer intro ---- */
.split--designer { grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

/* ---- Service-area tiles (editorial, no dark overlay) ---- */
.area-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-top: 2.5rem; }
.area-tile { display: block; }
.area-tile__img { display: block; overflow: hidden; aspect-ratio: 3/4; background: var(--cream); }
.area-tile__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(.98); transition: filter .5s var(--ease), transform .8s var(--ease); }
.area-tile:hover .area-tile__img img { filter: grayscale(0); transform: scale(1.05); }
.area-tile__name { display: block; margin-top: .7rem; font-family: var(--font-serif); font-size: 1.15rem; color: var(--ink); text-align: center; }
.area-tile--all { display: flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; aspect-ratio: 3/4; }
.area-tile--all .area-tile__name { color: #fff; margin: 0; padding: 0 .5rem; }

/* ---- Journal ---- */
.journal__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .feature-row, .feature-row--reverse { grid-template-columns: 1fr; gap: 1.4rem; }
  .feature-row--reverse .feature-row__media { order: 0; }
  .split--wide, .split--designer { grid-template-columns: 1fr; }
  .split--designer .split__media--portrait { max-width: 380px; }
  .area-strip { grid-template-columns: repeat(3, 1fr); }
  .cred { flex-basis: 33%; }
}
@media (max-width: 520px) {
  .area-strip { grid-template-columns: repeat(2, 1fr); }
  .hero--editorial { min-height: 82vh; }
  /* No mobile-specific scrim: the flat overlay above already applies evenly at
     every width, and a second gradient here would only reintroduce a vignette. */
  .hero__inner { padding: 0 1rem; }
  .hero__copy { max-width: 100%; padding: 0; }
  .hero__eyebrow { font-size: .66rem; letter-spacing: .24em; margin-bottom: .95rem; }
  .hero__headline { font-size: clamp(2.35rem, 12vw, 3.7rem); margin-bottom: 1rem; }
  .hero__headline-rotator { font-size: .78em; white-space: normal; }
  .hero__lede { font-size: .98rem; line-height: 1.55; margin-bottom: 1.35rem; }
  .hero__actions { flex-direction: column; align-items: center; gap: .65rem; }
  .hero__actions .btn { width: min(100%, 19rem); justify-content: center; padding-inline: 1rem; }
  .journal__head { flex-direction: column; align-items: flex-start; }
}

/* ==== press ticker, team, services, video (Studio-managed content) ==== */

/* cta-mobile: hide on desktop (higher specificity than .site-nav .nav-link) */
.site-nav .nav-link--cta-mobile { display: none; }
@media (max-width: 940px) { .site-nav .nav-link--cta-mobile { display: block; margin-top: .5rem; color: var(--gold-dark); font-weight: 700; } }

/* Press ticker — continuous marquee */
.press-ticker { margin-top: 1.8rem; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.press-ticker__track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: pressScroll 42s linear infinite; }
.press-ticker:hover .press-ticker__track { animation-play-state: paused; }
.press-ticker__item { display: inline-flex; align-items: center; justify-content: center; height: 60px; padding: 0 2.4rem; flex: none; }
.press-ticker__item img { max-height: 38px; max-width: 155px; width: auto; height: auto; object-fit: contain; opacity: .55; filter: grayscale(1); transition: opacity .3s var(--ease), filter .3s var(--ease); }
.press-ticker__item:hover img { opacity: 1; filter: grayscale(0); }
.press-ticker__name { font-family: var(--font-serif); font-size: 1.5rem; color: #5c626b; letter-spacing: .02em; white-space: nowrap; transition: color .3s var(--ease); }
a.press-ticker__item:hover .press-ticker__name { color: var(--ink); }
@keyframes pressScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .press-ticker__track { animation: none; } }

/* Team grid */
/* 5 across so the 14 members land exactly as the client's rows: 5 / 5 / 4. */
.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem 1.4rem; margin-top: 2.8rem; }
@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card { text-align: left; outline: none; }
.team-card__photo { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--cream); margin-bottom: 1.1rem; }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .5s var(--ease), transform .8s var(--ease); }
.team-card.is-open .team-card__photo img,
.team-card:focus-visible .team-card__photo img { filter: grayscale(0); transform: scale(1.03); }
.team-card__noimg { display: block; width: 100%; height: 100%; background: var(--sand); }
.team-card__name { font-family: var(--font-serif); font-size: 1.5rem; margin: 0 0 .1rem; }
.team-card__title { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dark); margin: 0; }
/* Bios reveal over the portrait (hover, or tap/keyboard focus) so every
   card stays the same height no matter how long the text runs. */
.team-card--has-bio { cursor: pointer; }
.team-card__hint {
  position: absolute; right: .7rem; bottom: .7rem; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  color: var(--white); background: rgba(14,14,14,.5);
  border: 1px solid rgba(255,255,255,.35);
  opacity: .9; transition: opacity .3s var(--ease);
}
.team-card__hint svg { transition: transform .35s var(--ease); }
.team-card__reveal {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
  padding: 1rem .95rem 1.1rem; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, rgba(14,14,14,.55) 0%, rgba(14,14,14,.88) 55%, rgba(14,14,14,.94) 100%);
  opacity: 0; pointer-events: none; transition: opacity .35s var(--ease);
  scrollbar-width: thin; scrollbar-color: var(--gold) rgba(255,255,255,.12);
}
.team-card__reveal::-webkit-scrollbar { width: 5px; }
.team-card__reveal::-webkit-scrollbar-track { background: rgba(255,255,255,.12); }
.team-card__reveal::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }
/* margin-top:auto bottom-aligns short bios yet keeps long ones scrollable
   (align-items:flex-end would clip the top of overflowing text). */
.team-card__bio { font-size: .8rem; color: rgba(255,255,255,.92); line-height: 1.55; margin: auto 0 0; }
/* Open states: the JS-toggled .is-open (tap on touch, click anywhere) and
   keyboard focus. Hover only on true pointer devices — on iOS the tap-hover
   is "sticky" and left the overlay stuck open with no way to dismiss it. */
.team-card.is-open .team-card__reveal,
.team-card:focus-visible .team-card__reveal { opacity: 1; pointer-events: auto; }
.team-card:focus-visible .team-card__hint { opacity: 0; }
/* When opened by tap/click the chip stays and the + rotates into an ×,
   giving touch users an explicit close affordance. */
.team-card.is-open .team-card__hint { opacity: .9; }
.team-card.is-open .team-card__hint svg { transform: rotate(45deg); }
@media (hover: hover) {
  .team-card:hover .team-card__photo img { filter: grayscale(0); transform: scale(1.03); }
  .team-card:hover .team-card__reveal { opacity: 1; pointer-events: auto; }
  .team-card:hover:not(.is-open) .team-card__hint { opacity: 0; }
}
.team-card--has-bio:focus-visible .team-card__photo { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .team-card__photo img, .team-card__reveal, .team-card__hint, .team-card__hint svg { transition: none; }
}
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .team-grid { grid-template-columns: 1fr; } .team-card { max-width: 340px; margin: 0 auto; } }

/* ===== Services page (editorial) =================================== */

/* Index: three ways to work with us */
.svc-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 3.2rem; }
.svc-index__item { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.7rem 1.8rem 1.5rem;
  background: #fff; border: 1px solid rgba(21,21,21,.1); text-decoration: none; color: inherit;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.svc-index__item::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.svc-index__item:hover { transform: translateY(-4px); border-color: rgba(184,154,71,.55); box-shadow: 0 20px 44px -26px rgba(21,21,21,.4); }
.svc-index__item:hover::before { transform: scaleX(1); }
.svc-index__no { font-family: var(--font-serif); font-size: 1rem; color: var(--gold-dark); }
.svc-index__title { font-family: var(--font-serif); font-size: clamp(1.25rem, 1.9vw, 1.55rem); color: var(--ink); line-height: 1.2; }
.svc-index__tag { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.svc-index__cue { margin-top: auto; padding-top: .9rem; color: var(--gold-dark); transition: transform .3s var(--ease); }
.svc-index__item:hover .svc-index__cue { transform: translateY(4px); }

/* Alternating editorial features */
.svc-feat { padding: clamp(3.4rem, 7vw, 6rem) 0; scroll-margin-top: 96px; }
.svc-feat:nth-child(even) { background: var(--cream); }
.svc-feat__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.2rem, 5.5vw, 5rem); align-items: center; }
.svc-feat--flip .svc-feat__media { order: 2; }
.svc-feat__media { position: relative; }
.svc-feat__media::before { content: ""; position: absolute; inset: 1.4rem -1.4rem -1.4rem 1.4rem;
  border: 1px solid rgba(184,154,71,.45); z-index: 0; }
.svc-feat--flip .svc-feat__media::before { inset: 1.4rem 1.4rem -1.4rem -1.4rem; }
.svc-feat__media img, .svc-feat__placeholder { position: relative; z-index: 1; display: block; width: 100%;
  aspect-ratio: 4/5; object-fit: cover; background: var(--sand); box-shadow: 0 30px 70px -34px rgba(21,21,21,.5); }
.svc-feat__body { position: relative; }
.svc-feat__ghost { position: absolute; top: -3.2rem; right: 0; font-family: var(--font-serif);
  font-size: clamp(5rem, 10vw, 8.5rem); line-height: 1; color: rgba(184,154,71,.14); pointer-events: none; }
/* The watermark digit is pure decoration (aria-hidden): render it as generated
   content so it isn't exposed as page text at all. */
.svc-feat__ghost::before { content: attr(data-ghost); }
.svc-feat__title { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin: .5rem 0 1rem; }
.svc-feat__desc p { color: var(--body); line-height: 1.75; }
.svc-feat__list { list-style: none; margin: 1.4rem 0 1.8rem; padding: 1.5rem 0 .3rem; border-top: 1px solid rgba(21,21,21,.12); }
.svc-feat__list li { position: relative; padding: 0 0 .85rem 1.6rem; color: var(--body); font-size: .97rem; line-height: 1.55; }
.svc-feat__list li::before { content: ""; position: absolute; left: 2px; top: .48em; width: 7px; height: 7px;
  border: 1px solid var(--gold); transform: rotate(45deg); }

/* Scroll reveal (JS adds .will-reveal, then .is-revealed) */
/* Slide-up reveal. Deliberately transform-only (no opacity fade): a fade would
   momentarily render text near-invisible on the same-color background, which
   trips automated contrast checks for content that is in fact perceivable. */
.will-reveal { transform: translateY(26px); transition: transform .7s var(--ease); }
.will-reveal.is-revealed { transform: none; }
@media (prefers-reduced-motion: reduce) { .will-reveal { transform: none; } }

@media (max-width: 900px) {
  .svc-index { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .svc-feat__grid { grid-template-columns: 1fr; }
  .svc-feat--flip .svc-feat__media { order: 0; }
  .svc-feat__media::before, .svc-feat--flip .svc-feat__media::before { inset: 1rem -0.8rem -1rem 0.8rem; }
  .svc-feat__ghost { top: -2.2rem; }
}

/* Video band */
.video-frame { position: relative; width: 100%; max-width: 900px; margin: 2rem auto 0; aspect-ratio: 16/9; background: #000; box-shadow: 0 26px 60px rgba(0,0,0,.18); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Video facade (click to play) */
.video-facade { cursor: pointer; }
.video-facade__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-facade::after { content: ""; position: absolute; inset: 0; background: rgba(10,10,12,.32); transition: background .3s var(--ease); }
.video-facade:hover::after { background: rgba(10,10,12,.18); }
.video-facade__play { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .3s var(--ease), background .3s var(--ease); }
.video-facade__play::before { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%,-50%); border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--ink); }
.video-facade:hover .video-facade__play { transform: translate(-50%,-50%) scale(1.08); background: #fff; }
.video-facade.is-playing::after, .video-facade.is-playing .video-facade__play, .video-facade.is-playing .video-facade__poster { display: none; }

/* ==== Process page (trust-building) ==== */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); max-width: 960px; margin: 3.4rem auto 0; }
.pillar { text-align: center; padding: 0 .5rem; }
.pillar__mark { display: inline-block; width: 34px; height: 34px; margin-bottom: 1.15rem;
  border: 1px solid var(--gold);
  background: repeating-linear-gradient(45deg, var(--gold) 0 1.4px, transparent 1.4px 6px); }
.pillar h3 { font-size: 1.45rem; margin: 0 0 .6rem; }
.pillar p { font-size: .95rem; line-height: 1.65; margin: 0; }

/* Vertical timeline */
.steps .section-title { max-width: 18ch; margin-inline: auto; }
.timeline { max-width: 720px; margin: 3.2rem auto 0; }
.timeline__list { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline__list::before { content: ""; position: absolute; left: 32px; top: 34px; bottom: 34px; width: 1px; background: rgba(184,154,71,.32); }
.tl { display: grid; grid-template-columns: 64px 1fr; gap: 1.9rem; padding-bottom: 2.9rem; }
.tl:last-child { padding-bottom: 0; }
.tl__marker { position: relative; z-index: 1; }
.tl__num { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid var(--gold); background: var(--cream); font-family: var(--font-serif); font-size: 1.45rem; color: var(--gold-dark); }
.tl__title { font-size: clamp(1.4rem, 2.4vw, 1.95rem); margin: .7rem 0 .55rem; }
.tl__body p { color: var(--body); margin: 0; line-height: 1.7; }

/* Big client quote */
.quote-feature .eyebrow { display: block; margin-bottom: 1.2rem; }
.big-quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.55rem, 3.1vw, 2.35rem); line-height: 1.45;
  color: var(--ink); max-width: 840px; margin: 0 auto 1.1rem; border: 0; padding: 0; }
.big-quote__cite { display: block; font-style: normal; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 720px) {
  .pillars { grid-template-columns: 1fr; gap: 2.2rem; max-width: 420px; }
  .tl { grid-template-columns: 52px 1fr; gap: 1.3rem; }
  .timeline__list::before { left: 26px; }
  .tl__num { width: 52px; height: 52px; font-size: 1.25rem; }
}

/* ===== Press / Awards / Philanthropy ============================== */

/* Press: editorial card grid */
.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 3rem; }
.press-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(21,21,21,.09);
  text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
a.press-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(21,21,21,.4); border-color: rgba(184,154,71,.5); }
.press-card__media { height: 128px; display: flex; align-items: center; justify-content: center; padding: 1.6rem;
  background: var(--cream); border-bottom: 1px solid rgba(21,21,21,.06); }
.press-card__media img { max-height: 56px; max-width: 78%; object-fit: contain; filter: grayscale(1); opacity: .72; }
a.press-card:hover .press-card__media img { filter: none; opacity: 1; }
.press-card__wordmark { font-family: var(--font-serif); font-size: 1.5rem; color: var(--ink); text-align: center; }
.press-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.press-card__pub { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dark); }
.press-card__title { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.35; margin: 0; color: var(--ink); }
.press-card__date { font-size: .8rem; color: var(--muted); }
.press-card__cue { margin-top: auto; padding-top: .6rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dark); }

/* Awards: numbered honor roll */
.awards-list { max-width: 820px; margin: 3rem auto 0; }
.award-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem;
  padding: 1.5rem 0; border-bottom: 1px solid rgba(21,21,21,.1); }
.award-row:first-child { border-top: 1px solid rgba(21,21,21,.1); }
.award-row__mark { width: 10px; height: 10px; border: 1px solid var(--gold); transform: rotate(45deg); }
.award-row__title { font-family: var(--font-serif); font-size: clamp(1.2rem, 2vw, 1.5rem); margin: 0 0 .25rem; color: var(--ink); }
.award-row__org { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.award-row__years { font-size: .95rem; color: var(--gold-dark); white-space: nowrap; text-align: right; }

/* Philanthropy: feature cards */
.phil-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; margin-top: 3rem; }
.phil-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(21,21,21,.09); overflow: hidden; }
.phil-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.phil-card__media img { width: 100%; height: 100%; object-fit: cover; }
.phil-card__body { padding: 1.6rem 1.7rem 1.9rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.phil-card__title { font-family: var(--font-serif); font-size: 1.5rem; margin: 0; color: var(--ink); }
.phil-card__desc { color: var(--body); line-height: 1.7; margin: 0; font-size: .95rem; }
.phil-card__link { margin-top: auto; padding-top: .4rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dark); text-decoration: none; }
.phil-card__link:hover { text-decoration: underline; }
.phil-card__title a { color: inherit; text-decoration: none; }
.phil-card__title a:hover { color: var(--gold-dark); }
.phil-card__media a { display: block; height: 100%; }
.phil-card__media img { transition: transform .5s var(--ease); }
.phil-card__media a:hover img { transform: scale(1.03); }

/* ---------- Philanthropy story (detail page) ---------- */
.phil-detail__hero { margin: 2.6rem auto 0; max-width: 900px; }
.phil-detail__hero img { width: 100%; height: auto; display: block; }
.phil-detail__body { max-width: 720px; margin: 2.4rem auto 0; }
/* Masonry-style columns rather than a fixed grid: these galleries mix event
   photography with design deliverables (wide renderings, floor plans, spec
   sheets) whose aspect ratios vary wildly. A forced tile would either crop a
   floor plan (losing the content worth showing) or letterbox a panorama into
   a band of empty space, so each shot keeps its own proportions and the
   columns pack naturally. */
.phil-detail__gallery { columns: 2; column-gap: 1.2rem; max-width: 900px; margin: 2.6rem auto 0; }
.phil-detail__shot { margin: 0 0 1.2rem; break-inside: avoid; }
.phil-detail__shot img { width: 100%; height: auto; display: block; }
@media (max-width: 600px) {
  .phil-detail__gallery { columns: 1; }
  .phil-detail__shot { margin-bottom: .9rem; }
}

@media (max-width: 900px) {
  .press-grid, .phil-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .press-grid, .phil-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .award-row { grid-template-columns: auto 1fr; }
  .award-row__body { min-width: 0; }
  .award-row__years { grid-column: 2; text-align: left; padding-top: .2rem; white-space: normal; }
}

/* ===== Service areas (hub + detail) ================================ */

/* Hub: grouped editorial tiles */
.areagrp { margin-top: 4rem; }
.areagrp__head { display: flex; align-items: baseline; gap: 1.4rem; padding-bottom: 1.4rem; margin-bottom: 2rem;
  border-bottom: 1px solid rgba(21,21,21,.12); }
.areagrp__count { font-family: var(--font-serif); font-size: 2.4rem; line-height: 1; color: var(--gold-dark); }
.areagrp__title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin: 0 0 .25rem; }
.areagrp__blurb { margin: 0; color: var(--muted); font-size: .95rem; }
.areagrp__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }

.area-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff;
  border: 1px solid rgba(21,21,21,.09); overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.area-card:hover { transform: translateY(-5px); border-color: rgba(184,154,71,.5);
  box-shadow: 0 22px 48px -26px rgba(21,21,21,.45); }
.area-card__media { display: block; aspect-ratio: 16/10; overflow: hidden; }
.area-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.area-card:hover .area-card__media img { transform: scale(1.05); }
.area-card__body { display: flex; flex-direction: column; gap: .45rem; padding: 1.4rem 1.5rem 1.6rem; flex: 1; }
.area-card__name { font-family: var(--font-serif); font-size: 1.45rem; color: var(--ink); }
.area-card__desc { font-size: .9rem; color: var(--muted); line-height: 1.6; }
.area-card__cue { margin-top: auto; padding-top: .7rem; font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-dark); }

/* Detail: sticky editorial intro */
.area-intro { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2.2rem, 5vw, 5rem); align-items: start; }
.area-intro__aside { position: sticky; top: 120px; }
.area-intro__name { font-size: clamp(2.1rem, 4vw, 3.2rem); margin: .4rem 0 1.1rem; }
.area-intro__rule { display: block; width: 64px; height: 2px; background: var(--gold); margin-bottom: 1rem; }
.area-intro__note { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.area-intro__prose p { color: var(--body); line-height: 1.8; }
.area-intro__prose .linkarrow { margin-top: .6rem; display: inline-block; }

/* Detail: localized services */
.area-svcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.6rem; }
.area-svc { display: flex; flex-direction: column; gap: .4rem; padding: 1.7rem 1.8rem 1.5rem; background: #fff;
  border: 1px solid rgba(21,21,21,.1); text-decoration: none; color: inherit;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.area-svc:hover { transform: translateY(-4px); border-color: rgba(184,154,71,.55);
  box-shadow: 0 20px 44px -26px rgba(21,21,21,.4); }
.area-svc__no { font-family: var(--font-serif); font-size: 1rem; color: var(--gold-dark); }
.area-svc__title { font-family: var(--font-serif); font-size: 1.35rem; color: var(--ink); }
.area-svc__tag { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.area-svc__cue { margin-top: auto; padding-top: .8rem; font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-dark); }

/* Detail: market snapshot */
.area-market__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 2.6rem; }
.mkt-card { text-align: center; padding: 2rem 1rem 1.8rem; border: 1px solid rgba(21,21,21,.1); background: #fff; }
.mkt-card__value { display: block; font-family: var(--font-serif); font-size: clamp(1.7rem, 2.6vw, 2.3rem); color: var(--ink); }
.mkt-card__label { display: block; margin-top: .45rem; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }
.mkt-card__sub { display: block; margin-top: .5rem; font-size: .8rem; color: var(--muted); }
.mkt-card__sub--up { color: #2e7d4f; }
.mkt-card__sub--down { color: #a04545; }
.area-market__attrib { margin-top: 1.6rem; text-align: center; font-size: .78rem; color: var(--muted); }

/* Detail: nearby areas reuse .area-card */
.area-nearby { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2.6rem; }

@media (max-width: 900px) {
  .areagrp__grid, .area-nearby, .area-svcs { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .area-svcs, .area-nearby { margin-top: 2.2rem; }
  .area-intro { grid-template-columns: 1fr; }
  .area-intro__aside { position: static; }
  .area-market__cards { grid-template-columns: repeat(2, 1fr); }
}

/* Portfolio: in-progress badge + detail note */
.sold-card__media { position: relative; }
.proj-badge { position: absolute; z-index: 2; top: .9rem; left: .9rem; padding: .35rem .7rem;
  background: rgba(21,21,21,.82); color: var(--gold); font-size: .64rem; letter-spacing: .18em;
  text-transform: uppercase; backdrop-filter: blur(3px); }
.property__wip-note { margin: -0.4rem 0 1.2rem; padding: .7rem 1rem; border-left: 2px solid var(--gold);
  background: var(--cream); color: var(--body); font-size: .92rem; }

/* Videos page */
.vidgrp { margin-top: 3.6rem; }
.vidgrp__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: 1.1rem; margin-bottom: 1.7rem; border-bottom: 1px solid rgba(21,21,21,.12); }
.vidgrp__title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin: 0; }
.vidgrp__count { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.vidgrp__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.vid-card { position: relative; }
.vid-card__number { display: block; margin-bottom: .45rem; color: var(--gold-dark); font-size: .7rem; font-weight: 700; letter-spacing: .16em; }
.vid-card__frame { position: relative; aspect-ratio: 16/9; background: #000; overflow: hidden; cursor: pointer; }
.vid-card__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-card__frame .video-facade__poster { transition: transform .6s var(--ease); }
.vid-card__frame:hover .video-facade__poster { transform: scale(1.04); }
.video-facade__play--sm { width: 56px; height: 56px; }
.video-facade__play--sm::before { border-width: 9px 0 9px 15px; }
.vid-card__title { font-family: var(--font-serif); font-weight: 500; font-size: 1.08rem; line-height: 1.35; margin: .8rem 0 0; color: var(--ink); }
.vid-card__title a { color: inherit; text-decoration: none; }
.vid-card__title a:hover { color: var(--gold-dark); }
.video-detail__frame { position: relative; width: min(100%, 960px); aspect-ratio: 16/9; margin: 2.25rem auto 0; overflow: hidden; background: #000; }
.video-detail__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-detail__transcript { margin-top: 3rem; }
@media (max-width: 900px) { .vidgrp__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .vidgrp__grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }

/* Portfolio: filter chips + search */
.pf-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  flex-wrap: wrap; margin-bottom: 1.4rem; }
.pf-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.pf-chip { padding: .5rem 1.05rem; border: 1px solid rgba(21,21,21,.18); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--body); text-decoration: none;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease); }
.pf-chip:hover { border-color: var(--gold); color: var(--ink); }
.pf-chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }
.pf-search { display: flex; align-items: center; border-bottom: 1px solid rgba(21,21,21,.3);
  min-width: 220px; transition: border-color .25s var(--ease); }
.pf-search:focus-within { border-color: var(--gold-dark); }
.pf-search__input { flex: 1; border: 0; background: transparent; padding: .55rem .2rem;
  font: inherit; font-size: .92rem; color: var(--ink); outline: none; }
.pf-search__input::placeholder { color: var(--muted); }
.pf-search__btn { border: 0; background: transparent; padding: .4rem .3rem; cursor: pointer;
  color: var(--muted); transition: color .25s var(--ease); }
.pf-search__btn:hover { color: var(--gold-dark); }
.pf-empty { padding: 3rem 0 1rem; }
@media (max-width: 640px) {
  .pf-bar { flex-direction: column; align-items: stretch; }
  .pf-search { min-width: 0; }
}