/* Website-specific layout on top of ../colors_and_type.css */

html, body { scroll-behavior: smooth; }
body { background: var(--ivory-50); color: var(--fg); }

/* Layout */
.container { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-pad); }
section { padding-block: var(--space-10); }

/* Reveal — target state controlled by IntersectionObserver via `.is-in`.
   Progressive: only hidden once JS marks the body as ready, so if scripts
   fail (or a static renderer skips them) the content is still visible. */
.reveal { opacity: 1; transform: none; transition: opacity var(--dur-xslow) var(--ease-standard), transform var(--dur-xslow) var(--ease-standard); }
body.js-ready .reveal { opacity: 0; transform: translateY(28px); }
body.js-ready .reveal.is-in { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: 120ms; }
.reveal.delay-2 { transition-delay: 240ms; }
.reveal.delay-3 { transition-delay: 360ms; }
.reveal.delay-4 { transition-delay: 480ms; }

/* Signature brass rule */
.brass-rule { display: block; width: 40px; height: 1px; background: var(--brass-700); margin-block: var(--space-5); }
.brass-rule.center { margin-inline: auto; }
.on-navy .brass-rule { background: var(--brass-500); }

/* Section eyebrow with brass hairline */
.section-eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass-700); display: inline-flex; align-items: center; gap: 12px; }
.section-eyebrow::before { content: ""; display: inline-block; width: 32px; height: 1px; background: var(--brass-700); }
.on-navy .section-eyebrow { color: var(--brass-500); }
.on-navy .section-eyebrow::before { background: var(--brass-500); }

/* ================ HEADER ================ */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(24px, 5vw, 64px); transition: background var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard), color var(--dur-med) var(--ease-standard); border-bottom: 1px solid transparent; color: var(--ivory-50); }
.site-header.scrolled { background: rgba(251, 248, 242, 0.94); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom-color: var(--ivory-300); color: var(--navy-800); }
/* Crest-lockup: engraved monogram · vertical brass hairline · wordmark stack.
   The crest ships as a black-line JPEG, so two treatments are stacked:
     · .crest-on-navy uses mix-blend-mode: screen to knock white → transparent
       against the navy hero; letters and ornament read as ivory on navy.
     · .crest-on-ivory is the authentic black-line rendering; used once the
       header background transitions to ivory glass on scroll. */
.site-header .brand.crest-lockup { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; }
.site-header .brand .crest { height: 46px; width: auto; display: block; transition: opacity var(--dur-med) var(--ease-standard); }
.site-header .brand .crest-on-navy  { mix-blend-mode: screen; opacity: 0.95; }
.site-header .brand .crest-on-ivory { position: absolute; opacity: 0; pointer-events: none; }
.site-header.scrolled .brand .crest-on-navy  { opacity: 0; position: absolute; pointer-events: none; }
.site-header.scrolled .brand .crest-on-ivory { position: static; opacity: 1; mix-blend-mode: normal; }

.site-header .brand .lockup { display: inline-flex; flex-direction: column; gap: 5px; border-left: 1px solid var(--brass-500); padding-left: 16px; transition: border-color var(--dur-med) var(--ease-standard); }
.site-header.scrolled .brand .lockup { border-left-color: var(--brass-700); }
/* No padding-left compensation: the wm sits flush with the vertical brass rule.
   Trailing letter-space is a virtue here — it visually breathes into the nav. */
.site-header .brand .wm { font-family: var(--font-display); font-weight: 500; font-size: 15px; letter-spacing: 0.32em; line-height: 1; color: currentColor; }
.site-header .brand .sub { font-family: var(--font-sans); font-weight: 500; font-size: 9px; letter-spacing: 0.32em; color: var(--brass-500); line-height: 1; transition: color var(--dur-med) var(--ease-standard); }
.site-header.scrolled .brand .sub { color: var(--brass-700); }
.site-header nav { display: flex; gap: 34px; }
.site-header nav a { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: currentColor; opacity: 0.78; padding-bottom: 4px; border-bottom: 1px solid transparent; transition: opacity var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard); }
.site-header nav a:hover { opacity: 1; border-bottom-color: var(--brass-500); }
.site-header.scrolled nav a:hover { border-bottom-color: var(--brass-700); }

/* ================ BUTTON ================ */
.btn { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; padding: 16px 30px; border-radius: 2px; cursor: pointer; transition: background var(--dur-med) var(--ease-standard), color var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard); border: 1px solid transparent; display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.btn .arr { font-family: var(--font-serif); font-size: 17px; font-weight: 400; transition: transform var(--dur-med) var(--ease-standard); }
.btn:hover .arr { transform: translateX(4px); }
.btn.primary { background: var(--brass-700); color: var(--ivory-50); border-color: var(--brass-700); }
.btn.primary:hover { background: var(--brass-800); border-color: var(--brass-800); }
.btn.ghost-light { color: var(--ivory-50); border-color: rgba(251,248,242,0.4); background: transparent; }
.btn.ghost-light:hover { border-color: var(--brass-500); color: var(--brass-500); }
.btn.ghost-dark { color: var(--navy-800); border-color: var(--navy-800); background: transparent; }
.btn.ghost-dark:hover { background: var(--navy-800); color: var(--ivory-50); }

/* ================ HERO ================ */
/* Hero section — establishes a stable stacking context and paint container
   so the manor's mix-blend-mode compositing (which activates when the fade
   animation starts) can't cause a subpixel reflow of the type above it.
   `isolation: isolate` creates the stacking context; `contain: layout paint`
   walls off internal layout changes from bubbling to the type's rendering. */
.hero { position: relative; min-height: 100vh; background: var(--navy-800); color: var(--on-navy-fg); display: flex; align-items: center; overflow: hidden; isolation: isolate; contain: layout paint; }
.hero .texture { position: absolute; inset: -10% 0 -15% 0; background:
  radial-gradient(1200px 800px at 78% 30%, rgba(194,162,92,0.10), transparent 60%),
  radial-gradient(900px 700px at 15% 85%, rgba(194,162,92,0.06), transparent 55%),
  repeating-linear-gradient(115deg, transparent 0 22px, rgba(194,162,92,0.035) 22px 23px),
  linear-gradient(180deg, #0e1b2c 0%, #08111d 100%);
  will-change: transform; }
/* Noise/warmth layer — no mix-blend-mode. Any blend mode in the hero forces
   the type layer above to re-composite through it. The gradient washes below
   are subtle enough at 6-8% opacity that ordinary alpha compositing gives
   the same warm-corner read. */
.hero .noise { position: absolute; inset: 0; opacity: 0.75; pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(194,162,92,0.055) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(194,162,92,0.045) 0, transparent 40%);
}

/* ================ HERO — MANOR GHOST LAYER ================
   A hôtel particulier fades into the navy field on the right half of the hero.
   Two layers:
     · .manor         — the photo itself, desaturated + navy-multiply tinted,
                        soft-masked so it never competes with the left-flush
                        headline block.
     · .manor-tint    — a navy wash that unifies the photo with the navy field
                        and forces the "ghost blueprint" read.
   Both sit above .texture (z:0) and below .content (z:2).
*/
/* ---- Manor ghost layer + single continuous materialisation ----
   Pure opacity fade. No transform, no mix-blend-mode, no mask animation.
   These were forcing the type layer above to re-composite every frame,
   which the eye read as a shimmer/jump on the letter-spaced serif headline.
   A pure opacity animation is paint-isolated: the manor layer fades on its
   own, the type layer is never touched. */
@keyframes manor-materialise {
  0%   { opacity: 0;    }
  100% { opacity: 0.55; }
}
@keyframes manor-tint-lift {
  0%   { opacity: 1.15; }   /* slightly denser fog at first paint */
  100% { opacity: 1;    }
}

/* Hero type — appears AFTER the manor has fully settled.
   Manor animation ends at 300ms delay + 3400ms duration = 3700ms.
   Type begins at 3800ms with a 200ms stagger between elements.
   Each element runs a simple 900ms opacity fade — no transforms, no
   blending, so the type is paint-isolated and cannot shimmer. */
@keyframes hero-type-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.hero .hero-type {
  opacity: 0;
  animation: hero-type-in 900ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.hero .hero-type.t1 { animation-delay: 3800ms; }
.hero .hero-type.t2 { animation-delay: 4000ms; }
.hero .hero-type.t3 { animation-delay: 4200ms; }
.hero .hero-type.t4 { animation-delay: 4400ms; }
.hero .hero-type.t5 { animation-delay: 4600ms; }

@media (prefers-reduced-motion: reduce) {
  .hero .hero-type { animation: none; opacity: 1; }
}

.hero .manor {
  position: absolute;
  inset: -6% -4% -10% -4%;    /* centred, gently bleeds beyond the frame */
  background: url("/static/img/hero-manor.jpg") center center / cover no-repeat;
  /* Pre-tint to sit in the navy palette WITHOUT mix-blend-mode.
     mix-blend-mode was forcing the type layer above to re-composite against
     a changing backdrop every animation frame — which the eye reads as a
     shimmer/jump even though the DOM measurements stay pinned to the pixel.
     Same visual result, but paint-isolated: type layer is never touched. */
  filter: grayscale(1) brightness(0.32) contrast(1.05) sepia(0.15) hue-rotate(180deg);
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 46%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.80) 40%, rgba(0,0,0,0.40) 70%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 78% at 50% 46%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.80) 40%, rgba(0,0,0,0.40) 70%, transparent 100%);
  will-change: opacity;   /* only opacity animates — no mask/transform hints */
  pointer-events: none;
  z-index: 0;
  /* Single continuous fade, 3.4s, eased. */
  animation: manor-materialise 3400ms cubic-bezier(0.4, 0, 0.2, 1) 300ms both;
}

/* Cool navy wash — lightens slightly as the manor arrives, so the reveal
   feels like the fog literally lifting. */
.hero .manor-tint {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(180deg, rgba(14,27,44,0.65) 0%, rgba(14,27,44,0.10) 30%, rgba(14,27,44,0.10) 60%, rgba(8,17,29,0.92) 100%),
    radial-gradient(ellipse 90% 60% at 50% 50%, rgba(14,27,44,0.25) 0%, rgba(14,27,44,0.55) 80%, rgba(14,27,44,0.75) 100%);
  animation: manor-tint-lift 3400ms cubic-bezier(0.4, 0, 0.2, 1) 300ms both;
}

@media (prefers-reduced-motion: reduce) {
  .hero .manor,
  .hero .manor-tint { animation: none; }
}
/* Hero content sits above the animating manor layers. Two guards against a
   subpixel horizontal "jump" when the manor's mix-blend-mode toggles:
     1. Promote to its own compositor layer via `transform: translateZ(0)` +
        `will-change: transform` so the browser doesn't re-composite during
        the manor's paint changes.
     2. Force grayscale antialiasing consistently (`-webkit-font-smoothing`
        + `text-rendering: geometricPrecision`) so glyphs render at
        integer positions and don't flip between subpixel/greyscale modes
        when the layer's compositing changes. */
.hero .content {
  position: relative;
  z-index: 2;
  padding-top: 120px;
  padding-bottom: 80px;
  max-width: 1080px;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
.hero .content .section-eyebrow { color: var(--brass-500); transform: translateZ(0); -webkit-font-smoothing: antialiased; }
.hero .content .section-eyebrow::before { background: var(--brass-500); }
/* Hero h1 — design tightening preserved (-0.02em), plus its own compositor
   layer so any subpixel rounding happens exactly once at first paint, not
   again when the manor's mix-blend-mode layer activates during the fade. */
.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 8vw, 128px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ivory-50);
  margin: 24px 0 34px;
  transform: translateZ(0);
  will-change: transform;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  contain: layout;
}
.hero h1 .it { font-style: italic; color: var(--brass-500); }
.hero p.sub {
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.5;
  color: var(--on-navy-fg-muted);
  max-width: 620px;
  margin: 0 0 44px;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.hero .ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; transform: translateZ(0); }
.hero .meta { position: absolute; bottom: 32px; left: clamp(24px, 5vw, 64px); right: clamp(24px, 5vw, 64px); display: flex; justify-content: space-between; align-items: end; color: var(--on-navy-fg-subtle); font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; z-index: 2; }
.hero .meta .rule { width: 1px; height: 60px; background: rgba(194,162,92,0.4); display: block; margin: 0 auto 16px; }
.hero .meta .col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hero .meta .col.first { align-items: flex-start; } .hero .meta .col.last { align-items: flex-end; }

/* ================ THE OFFICE ================ */
.office { background: var(--ivory-50); }
.office .grid { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: clamp(48px, 8vw, 120px); align-items: start; }
.office h2 { font-size: clamp(38px, 4.6vw, 68px); font-weight: 400; line-height: 1.06; letter-spacing: -0.012em; margin: 20px 0 0; text-wrap: balance; }
.office .lead { font-family: var(--font-serif); font-weight: 300; font-size: 26px; line-height: 1.4; color: var(--fg-strong); margin: 0 0 32px; }
.office .body { font-size: 16px; color: var(--fg); max-width: 60ch; }
.office .pillars { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--brass-700); }
.office .pillar h4 { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--fg-strong); margin: 8px 0 12px; letter-spacing: -0.005em; }
.office .pillar .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--brass-700); }
.office .pillar p { font-size: 14px; color: var(--fg-muted); line-height: 1.6; margin: 0; }

/* ================ HOLDINGS ================ */
.holdings { background: var(--ivory-100); position: relative; }
.holdings .head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 56px; gap: 40px; flex-wrap: wrap; }
.holdings h2 { font-size: clamp(38px, 4.6vw, 68px); font-weight: 400; letter-spacing: -0.012em; line-height: 1.06; margin: 20px 0 0; max-width: 14ch; }
.holdings .head p { font-family: var(--font-serif); font-weight: 300; font-size: 20px; color: var(--fg-muted); max-width: 40ch; margin: 0; }
.holdings .grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--brass-700); border-bottom: 1px solid var(--brass-700); }
.sector-card { position: relative; padding: 40px 30px 100px; border-right: 1px solid var(--ivory-300); cursor: pointer; overflow: hidden; transition: background var(--dur-slow) var(--ease-standard); }
.sector-card:last-child { border-right: none; }
.sector-card::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--navy-800); transition: height var(--dur-slow) var(--ease-standard); z-index: 0; }
.sector-card > * { position: relative; z-index: 1; }
.sector-card:hover::before { height: 100%; }
.sector-card:hover .num, .sector-card:hover .st, .sector-card:hover .sd, .sector-card:hover .sa { color: var(--ivory-50); transition: color var(--dur-slow) var(--ease-standard); }
.sector-card:hover .sa { color: var(--brass-500); }
.sector-card .num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--brass-700); }
.sector-card .st { font-family: var(--font-display); font-weight: 400; font-size: 30px; color: var(--fg-strong); margin: 28px 0 14px; letter-spacing: -0.005em; line-height: 1.1; transition: color var(--dur-slow) var(--ease-standard); }
.sector-card .sd { font-size: 14px; color: var(--fg-muted); line-height: 1.6; margin: 0 0 20px; transition: color var(--dur-slow) var(--ease-standard); }
.sector-card .sa { position: absolute; bottom: 24px; left: 30px; font-family: var(--font-serif); font-size: 22px; color: var(--brass-700); transition: color var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); }
.sector-card:hover .sa { transform: translateX(6px); }

/* ================ ADVISORY ================ */
.advisory { background: var(--navy-800); color: var(--on-navy-fg); }
.advisory.on-navy h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 4.6vw, 68px); color: var(--ivory-50); letter-spacing: -0.012em; margin: 20px 0 0; }
.advisory .head { max-width: 640px; margin-bottom: 72px; }
.advisory .head p { font-family: var(--font-serif); font-weight: 300; font-size: 22px; line-height: 1.44; color: var(--on-navy-fg-muted); margin: 24px 0 0; }
.advisory .rows { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border-top: 1px solid rgba(194,162,92,.3); }
.advisory .row-item { padding: 40px 32px 40px 0; border-bottom: 1px solid rgba(194,162,92,.15); position: relative; }
.advisory .row-item:not(:last-child) { border-right: 1px solid rgba(194,162,92,.15); padding-right: 32px; }
.advisory .row-item:not(:last-child) { padding-left: 0; } .advisory .row-item + .row-item { padding-left: 32px; }
.advisory .row-item .num { font-family: var(--font-mono); font-size: 11px; color: var(--brass-500); letter-spacing: 0.16em; }
.advisory .row-item h4 { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--ivory-50); margin: 18px 0 12px; letter-spacing: -0.005em; line-height: 1.15; }
.advisory .row-item p { font-size: 14px; color: var(--on-navy-fg-muted); line-height: 1.65; margin: 0; }

/* ================ INSIGHTS ================ */
.insights { background: var(--ivory-50); }
.insights .head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 40px; gap: 40px; }
.insights h2 { font-size: clamp(38px, 4.6vw, 68px); font-weight: 400; letter-spacing: -0.012em; margin: 20px 0 0; }
.insights .list a.item { display: grid; grid-template-columns: 90px 1fr auto auto; align-items: baseline; gap: 32px; padding: 26px 8px; border-bottom: 1px solid var(--ivory-300); color: var(--fg-strong); text-decoration: none; transition: padding var(--dur-slow) var(--ease-standard), color var(--dur-slow) var(--ease-standard), background var(--dur-slow) var(--ease-standard); position: relative; }
.insights .list a.item:first-child { border-top: 1px solid var(--brass-700); }
.insights .list a.item:last-child { border-bottom: 1px solid var(--brass-700); }
.insights .list a.item:hover { padding-left: 20px; background: var(--ivory-100); color: var(--brass-800); }
.insights .list a.item .date { font-family: var(--font-mono); font-size: 11px; color: var(--brass-700); letter-spacing: 0.08em; }
.insights .list a.item .t { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: -0.005em; line-height: 1.15; }
.insights .list a.item .cat { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-muted); }
.insights .list a.item .arr { font-family: var(--font-serif); font-size: 22px; color: var(--brass-700); transition: transform var(--dur-slow) var(--ease-standard); }
.insights .list a.item:hover .arr { transform: translateX(6px); }

/* ================ CONTACT ================ */
.contact { background: var(--ivory-100); }
.contact .grid { display: grid; grid-template-columns: minmax(300px, 1fr) 1.4fr; gap: clamp(48px, 8vw, 120px); align-items: start; }
.contact h2 { font-size: clamp(38px, 4.6vw, 64px); font-weight: 400; letter-spacing: -0.012em; line-height: 1.06; margin: 20px 0 20px; }
.contact .intro p { font-family: var(--font-serif); font-weight: 300; font-size: 20px; line-height: 1.45; color: var(--fg-strong); margin: 0 0 20px; }
.contact .addr { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); line-height: 1.9; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--brass-700); }
.contact form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
.contact form .full { grid-column: 1 / -1; }
.contact form label { display: block; font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 10px; }
.contact form input, .contact form textarea, .contact form select { width: 100%; box-sizing: border-box; background: transparent; border: none; border-bottom: 1px solid var(--navy-200); padding: 8px 0 10px; font-family: var(--font-serif); font-weight: 300; font-size: 20px; color: var(--fg-strong); outline: none; transition: border-color var(--dur-med) var(--ease-standard); }
.contact form input::placeholder, .contact form textarea::placeholder { color: var(--fg-faint); }
.contact form input:focus, .contact form textarea:focus, .contact form select:focus { border-bottom-color: var(--brass-700); }
.contact form textarea { min-height: 72px; resize: vertical; font-family: var(--font-sans); font-size: 16px; line-height: 1.6; }
.contact form .submit { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.contact form .discretion { font-size: 11px; color: var(--fg-muted); letter-spacing: 0.06em; max-width: 40ch; }

/* ================ FOOTER ================ */
.site-footer { background: var(--navy-900); color: var(--on-navy-fg); padding: 80px 0 32px; }
/* Stationery seal — centered engraved monogram + wordmark stack.
   Sits above the columns, framed by a brass hairline below. */
.site-footer .seal { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 44px; border-bottom: 1px solid rgba(194,162,92,.28); margin-bottom: 44px; }
.site-footer .seal .crest {
  width: 132px; height: auto; display: block;
  /* Knock out the JPEG's white background so it sits on navy as engraved lines. */
  mix-blend-mode: screen;
  opacity: 0.94;
  margin-bottom: 22px;
}
/* Seal wm is centered in the flex column by `text-align: center` on the parent.
   Compensation for trailing letter-space is applied to the block as a whole via
   negative right margin — this keeps optical center = geometric center without
   pushing the text to the right of its neighbours (crest, rules, sub). */
.site-footer .seal .wm { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: 0.4em; line-height: 1; color: var(--ivory-50); margin-right: -0.4em; }
.site-footer .seal .rules { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.site-footer .seal .rules .line { display: inline-block; width: 40px; height: 1px; background: var(--brass-500); }
.site-footer .seal .rules .dot  { display: inline-block; width: 4px; height: 4px; background: var(--brass-500); transform: rotate(45deg); }
.site-footer .seal .sub { font-family: var(--font-serif); font-variant: small-caps; font-size: 14px; letter-spacing: 0.28em; line-height: 1; color: var(--brass-500); margin-top: 14px; }

/* Columns — three equal columns, centered contents under the seal. */
.site-footer .top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(194,162,92,.18); }
.site-footer .col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.site-footer .col h5 { font-family: var(--font-serif); font-variant: small-caps; font-size: 13px; letter-spacing: 0.24em; color: var(--brass-500); margin: 0 0 16px; font-weight: 400; line-height: 1; }
.site-footer .col a { display: block; font-family: var(--font-serif); font-weight: 300; font-size: 15px; color: var(--on-navy-fg-muted); padding: 5px 0; letter-spacing: 0.02em; text-decoration: none; transition: color var(--dur-med) var(--ease-standard); }
.site-footer .col a:hover { color: var(--ivory-50); }
/* Access line — "By invitation or by appointment only · email" */
.site-footer .access { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 32px 0 28px; font-family: var(--font-serif); font-variant: small-caps; font-size: 15px; letter-spacing: 0.2em; color: var(--on-navy-fg-muted); text-align: center; flex-wrap: wrap; }
.site-footer .access > span:first-child, .site-footer .access a { white-space: nowrap; }
.site-footer .access .sep { width: 4px; height: 4px; background: var(--brass-500); transform: rotate(45deg); display: inline-block; }
.site-footer .access a { font-variant: normal; font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.08em; color: var(--ivory-50); text-decoration: none; border-bottom: 1px solid var(--brass-500); padding-bottom: 2px; transition: color var(--dur-med) var(--ease-standard); }
.site-footer .access a:hover { color: var(--brass-500); }

/* Compact legal disclaimer — quiet, centred, narrow measure */
.site-footer .legal { max-width: 760px; margin: 0 auto; padding: 0 0 28px; font-family: var(--font-sans); font-size: 12px; line-height: 1.7; color: var(--on-navy-fg-subtle); text-align: center; text-wrap: pretty; border-bottom: 1px solid rgba(194,162,92,.18); }

.site-footer .bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 24px; font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-navy-fg-subtle); }
.site-footer .bottom .marks { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ================ LEGAL PAGES (disclaimer · privacy · cookies) ================ */
.legal-head { background: var(--navy-800); color: var(--on-navy-fg); padding: 28px 0 88px; }
.legal-head .bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 72px; }
.legal-head .brand { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ivory-50); }
.legal-head .brand img { height: 46px; mix-blend-mode: screen; }
.legal-head .brand .lockup { display: flex; flex-direction: column; gap: 5px; border-left: 1px solid var(--brass-500); padding-left: 16px; }
.legal-head .brand .wm { font-family: var(--font-display); font-weight: 500; font-size: 15px; letter-spacing: 0.32em; line-height: 1; }
.legal-head .brand .sub { font-family: var(--font-sans); font-weight: 500; font-size: 9px; letter-spacing: 0.32em; color: var(--brass-500); line-height: 1; }
.legal-head .back { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-navy-fg-muted); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 4px; transition: color var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard); }
.legal-head .back:hover { color: var(--ivory-50); border-bottom-color: var(--brass-500); }
.legal-head .section-eyebrow { color: var(--brass-500); }
.legal-head .section-eyebrow::before { background: var(--brass-500); }
.legal-head h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5vw, 72px); line-height: 1.04; letter-spacing: -0.012em; color: var(--ivory-50); margin: 22px 0 0; }
.legal-head .updated { margin: 18px 0 0; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-navy-fg-subtle); }
.legal-nav { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(194,162,92,.25); }
.legal-nav a { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-navy-fg-muted); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard); }
.legal-nav a:hover { color: var(--ivory-50); border-bottom-color: var(--brass-500); }
.legal-nav a[aria-current="page"] { color: var(--ivory-50); border-bottom-color: var(--brass-500); }

/* Policy document body */
.policy { background: var(--ivory-50); padding-block: var(--space-9) var(--space-10); }
.policy .grid { display: grid; grid-template-columns: minmax(220px, 1fr) 2.4fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.policy .toc { position: sticky; top: 110px; list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--brass-700); }
.policy .toc a { display: grid; grid-template-columns: 30px 1fr; padding: 7px 0; font-size: 13px; color: var(--fg-muted); text-decoration: none; border: none; transition: color var(--dur-med) var(--ease-standard); }
.policy .toc a:hover { color: var(--brass-800); }
.policy .toc .n { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--brass-700); padding-top: 3px; }
.policy article section { padding: 0 0 36px; margin-bottom: 36px; border-bottom: 1px solid var(--ivory-300); scroll-margin-top: 110px; }
.policy article section:last-of-type { border-bottom: none; }
.policy article h2 { display: flex; align-items: baseline; gap: 18px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 400; letter-spacing: -0.008em; line-height: 1.15; margin: 0 0 18px; }
.policy article h2 .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--brass-700); }
.policy article p { font-size: 15px; line-height: 1.72; color: var(--fg); margin: 0 0 14px; max-width: 68ch; }
.policy article a { color: var(--fg-strong); border-bottom: 1px solid var(--brass-700); }
.policy .copy { margin: 24px 0 0; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-subtle); }
/* Bracketed items in the client's document are drafting notes still to be
   completed by the Office. They are shown, clearly marked, rather than hidden. */
.policy .todo { display: block; background: var(--brass-200); border-left: 2px solid var(--brass-700); padding: 12px 16px; font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.5; color: var(--brass-900); max-width: 68ch; margin: 0 0 14px; }
.policy .todo::before { content: "To complete — "; font-family: var(--font-sans); font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-800); }
/* Cookie register table — rule-framed, no fills, brass header rule */
.policy-table-wrap { overflow-x: auto; margin: 6px 0 20px; }
.policy-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.55; }
.policy-table th { text-align: left; font-family: var(--font-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-700); padding: 0 16px 12px 0; border-bottom: 1px solid var(--brass-700); vertical-align: bottom; }
.policy-table td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--ivory-300); color: var(--fg-muted); vertical-align: top; }
.policy-table td:first-child { color: var(--fg-strong); font-weight: 500; }
@media (max-width: 700px) {
  .policy-table thead { display: none; }
  .policy-table, .policy-table tbody, .policy-table tr, .policy-table td { display: block; width: 100%; }
  .policy-table tr { padding: 12px 0; border-bottom: 1px solid var(--ivory-300); }
  .policy-table td { border: none; padding: 4px 0; }
  .policy-table td::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-700); }
}
.policy mark { background: var(--brass-200); color: var(--brass-900); padding: 1px 4px; font-style: italic; }
@media (max-width: 900px) {
  .policy .grid { grid-template-columns: 1fr; }
  .policy .toc { position: static; }
}

/* ================ ENTRY GATE (disclaimer acceptance) ================ */
/* While the gate is up the page can't scroll, and every hero animation is
   paused at frame zero — so the manor and headline play only after Accept. */
body.gated { overflow: hidden; }
body.gated .hero, body.gated .hero * { animation-play-state: paused !important; }

@keyframes gate-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gate-sheet-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.entry-gate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background:
    repeating-linear-gradient(115deg, transparent 0 22px, rgba(194,162,92,0.035) 22px 23px),
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  animation: gate-in 700ms var(--ease-standard) both;
  transition: opacity 900ms var(--ease-standard);
}
.entry-gate.leaving { opacity: 0; pointer-events: none; }

.gate-sheet {
  box-sizing: border-box;
  width: 100%; max-width: 780px; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px);
  display: flex; flex-direction: column;
  background: var(--ivory-50);
  box-shadow: inset 0 0 0 1px var(--brass-700), var(--shadow-lg);
  padding: clamp(28px, 4vw, 52px) clamp(24px, 5vw, 64px);
  animation: gate-sheet-in 900ms var(--ease-standard) 200ms both;
}
.gate-brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 28px; }
.gate-brand img { width: 64px; height: auto; mix-blend-mode: multiply; margin-bottom: 14px; }
.gate-brand .wm { font-family: var(--font-display); font-weight: 500; font-size: 16px; letter-spacing: 0.36em; margin-right: -0.36em; color: var(--navy-800); line-height: 1; }
.gate-brand .sub { font-family: var(--font-sans); font-weight: 500; font-size: 9px; letter-spacing: 0.32em; margin-right: -0.32em; color: var(--brass-700); margin-top: 8px; }

.gate-sheet h2 { font-size: clamp(26px, 2.8vw, 36px); font-weight: 400; letter-spacing: -0.01em; line-height: 1.12; margin: 16px 0 10px; }
.gate-intro { font-family: var(--font-serif); font-weight: 300; font-size: 19px; line-height: 1.45; color: var(--fg-strong); margin: 0 0 20px; }

.gate-scroll {
  flex: 1 1 auto; min-height: 120px; overflow-y: auto;
  border-top: 1px solid var(--brass-700); border-bottom: 1px solid var(--brass-700);
  padding: 4px 16px 4px 0;
  outline: none;
}
.gate-scroll ol { list-style: none; margin: 0; padding: 0; }
.gate-scroll li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--ivory-300); }
.gate-scroll .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--brass-700); padding-top: 3px; }
.gate-scroll li p { margin: 0; font-size: 14px; line-height: 1.68; color: var(--fg-muted); }
.gate-copy { margin: 16px 0 12px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-subtle); }

.gate-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 24px; }
.gate-declined { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 24px; }
.gate-declined p { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--brass-800); }

@media (max-width: 600px) {
  .gate-actions { flex-direction: column-reverse; align-items: stretch; }
  .gate-actions .btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .entry-gate, .gate-sheet { animation: none; }
  .entry-gate { transition: none; }
}

/* ================ PRIVACY & COOKIE POLICIES (landing page) ================ */
.policies { background: var(--ivory-50); padding-block: 0 var(--space-10); }
.policies .grid { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: clamp(48px, 8vw, 120px); align-items: start; padding-top: var(--space-8); border-top: 1px solid var(--ivory-300); }
.policies h2 { font-size: clamp(30px, 3.2vw, 44px); font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; margin: 20px 0 0; }
.policies .acc { border-top: 1px solid var(--brass-700); border-bottom: 1px solid var(--brass-700); }
.acc-item + .acc-item { border-top: 1px solid var(--ivory-300); }

.acc-head { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center; padding: 26px 8px 26px 0; transition: padding var(--dur-slow) var(--ease-standard), background var(--dur-slow) var(--ease-standard); }
.acc-head:hover { padding-left: 14px; background: var(--ivory-100); }
.acc-head:focus-visible { outline: 1px solid var(--brass-700); outline-offset: 2px; }
.acc-head .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--brass-700); }
.acc-title { display: flex; flex-direction: column; gap: 6px; }
.acc-title .t { font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); font-weight: 400; color: var(--fg-strong); letter-spacing: -0.005em; line-height: 1.15; transition: color var(--dur-slow) var(--ease-standard); }
.acc-head:hover .acc-title .t { color: var(--brass-800); }
.acc-title .s { font-family: var(--font-serif); font-weight: 300; font-size: 17px; line-height: 1.4; color: var(--fg-muted); }
.acc-toggle { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; }
.acc-toggle .plus { position: relative; width: 14px; height: 14px; }
.acc-toggle .plus::before, .acc-toggle .plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--brass-700); transition: transform var(--dur-slow) var(--ease-standard); }
.acc-toggle .plus::after { transform: rotate(90deg); }
.acc-item.is-open .acc-toggle .plus::after { transform: rotate(0deg); }

/* Slow, eased open/close — height animates via grid rows (no measuring) */
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-xslow) var(--ease-in-out); }
.acc-item.is-open .acc-body { grid-template-rows: 1fr; }
.acc-body > .inner { overflow: hidden; }
.acc-content { padding: 8px 0 36px 64px; opacity: 0; transition: opacity var(--dur-slow) var(--ease-standard); }
.acc-item.is-open .acc-content { opacity: 1; transition-delay: 200ms; }
.acc-content section { padding: 24px 0; border-top: 1px solid var(--ivory-300); }
.acc-content h3 { display: flex; align-items: baseline; gap: 14px; font-family: var(--font-display); font-size: 21px; font-weight: 400; letter-spacing: -0.005em; color: var(--fg-strong); margin: 0 0 12px; }
.acc-content h3 .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--brass-700); }
.acc-content p { font-size: 14px; line-height: 1.7; color: var(--fg-muted); margin: 0 0 12px; max-width: 68ch; }
.acc-content p a { color: var(--fg-strong); border-bottom: 1px solid var(--brass-700); }
.acc-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--ivory-300); }
.acc-foot .copy { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-subtle); }
.acc-foot a { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-strong); border-bottom: 1px solid var(--brass-700); padding-bottom: 3px; }
.acc-foot a:hover { color: var(--brass-800); }
@media (max-width: 900px) {
  .policies .grid { grid-template-columns: 1fr; gap: 32px; }
  .acc-head { grid-template-columns: 36px 1fr; }
  .acc-toggle { grid-column: 2; }
  .acc-content { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .acc-body, .acc-content { transition: none; }
}

/* ================ DISCLAIMER SECTION ================ */
.disclaimer { background: var(--ivory-50); border-top: 1px solid var(--brass-700); padding-block: var(--space-9); }
/* On the landing page the policies follow directly — share one ivory block */
.disclaimer:has(+ .policies) { padding-bottom: var(--space-8); }
.disclaimer .grid { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: clamp(48px, 8vw, 120px); align-items: start; }
.disclaimer h2 { font-size: clamp(30px, 3.2vw, 44px); font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; margin: 20px 0 0; }
.disclaimer .clauses { list-style: none; margin: 0; padding: 0; }
.disclaimer .clauses li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--ivory-300); }
.disclaimer .clauses li:first-child { padding-top: 0; }
.disclaimer .clauses .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--brass-700); padding-top: 4px; }
.disclaimer .clauses p { font-size: 14px; line-height: 1.7; color: var(--fg-muted); margin: 0; }
.disclaimer .copy { margin: 40px 0 0; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-subtle); text-align: right; }
@media (max-width: 900px) {
  .disclaimer .grid { grid-template-columns: 1fr; }
  .disclaimer .copy { text-align: left; }
  .site-footer .bottom { justify-content: center; text-align: center; }
}
.site-footer .bottom a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color var(--dur-med) var(--ease-standard); }
.site-footer .bottom a:hover { border-bottom-color: var(--brass-500); }

/* Small screen */
@media (max-width: 900px) {
  .site-header nav { display: none; }
  .office .grid, .contact .grid { grid-template-columns: 1fr; }
  .holdings .grid { grid-template-columns: 1fr 1fr; }
  .holdings .grid .sector-card:nth-child(2) { border-right: none; }
  .holdings .grid .sector-card:nth-child(1), .holdings .grid .sector-card:nth-child(2) { border-bottom: 1px solid var(--ivory-300); }
  .advisory .rows { grid-template-columns: 1fr; }
  .advisory .row-item, .advisory .row-item + .row-item { padding-left: 0; padding-right: 0; border-right: none; }
  .office .pillars { grid-template-columns: 1fr; }
  .insights .list a.item { grid-template-columns: 80px 1fr auto; } .insights .list a.item .cat { display: none; }
  .contact form { grid-template-columns: 1fr; }
  .site-footer .top { grid-template-columns: 1fr; gap: 24px; }
  .site-footer .col { padding: 12px 0; border-bottom: 1px solid rgba(194,162,92,.14); }
  .site-footer .col:last-child { border-bottom: none; }
}