/* ============================================================
   Enclave Private Wealth — site.css
   One stylesheet. Tokens first, then base, then components.
   Palette: paper ground, ink type, bronze earned sparingly.
   Night (obsidian) survives as meaning: the colophon and Reserve.
   ============================================================ */

/* ── Typeface: Newsreader (variable; roman + italic) ───────── */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/newsreader-roman-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --paper: #F7F5F0;
  --paper-raised: #FDFCFA;
  --ink: #16181D;
  --ink-soft: #51544E;
  --hairline: rgba(22, 24, 29, 0.14);

  --bronze: #8A6D3B;        /* graphic: rules, marks */
  --bronze-ink: #6F562C;    /* text accent — AA on paper */

  --night: #0E0F11;
  --night-raised: #16171A;
  --night-text: #E9E6DE;
  --night-soft: rgba(233, 230, 222, 0.74);
  --night-hairline: rgba(233, 230, 222, 0.16);
  --bronze-bright: #C2A468; /* accent on night */

  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;

  --step-display: clamp(2.7rem, 1.2rem + 5.4vw, 4.6rem);
  --step-1: clamp(2.1rem, 1.2rem + 3vw, 3.1rem);   /* page h1 */
  --step-2: clamp(1.55rem, 1.2rem + 1.4vw, 2.05rem); /* h2 */
  --step-3: 1.3rem;                                 /* h3 */
  --step-body: 1.1rem;                              /* 17.6px */
  --step-small: 0.9375rem;                          /* 15px */
  --step-label: 0.75rem;                            /* 12px caps */

  --space-section: clamp(5rem, 3rem + 6vw, 8.5rem);
  --space-section-s: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);

  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { margin: 0; padding: 0; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--step-body);
  line-height: 1.62;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.night { background: var(--night); color: var(--night-text); }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
[hidden] { display: none !important; } /* the attribute must beat component display rules */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

::selection { background: var(--bronze); color: var(--paper); }

/* Focus is a design element, not an afterthought */
:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  background: var(--ink); color: var(--paper);
  font-size: var(--step-small);
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* ── Layout ─────────────────────────────────────────────────── */
.container {
  max-width: 70rem;
  margin: 0 auto;
  padding: 0 1.375rem;
}
@media (min-width: 768px) { .container { padding: 0 2.5rem; } }

.measure { max-width: 42rem; }
.measure-wide { max-width: 52rem; }

.section { padding: var(--space-section) 0; }
.section-s { padding: var(--space-section-s) 0; }
.rule-top { border-top: 1px solid var(--hairline); }
.night .rule-top, .night.rule-top { border-top-color: var(--night-hairline); }

/* ── Typography ─────────────────────────────────────────────── */
.display {
  font-size: var(--step-display);
  font-weight: 380;
  line-height: 1.06;
  letter-spacing: -0.012em;
}
.t1 { font-size: var(--step-1); font-weight: 400; line-height: 1.12; letter-spacing: -0.008em; }
.t2 { font-size: var(--step-2); font-weight: 420; line-height: 1.2; letter-spacing: -0.004em; }
.t3 { font-size: var(--step-3); font-weight: 460; line-height: 1.3; }

.lede {
  font-size: clamp(1.17rem, 1.05rem + 0.5vw, 1.32rem);
  line-height: 1.6;
  color: var(--ink-soft);
}
.night .lede { color: var(--night-soft); }

.small { font-size: var(--step-small); }
.soft { color: var(--ink-soft); }
.nowrap { white-space: nowrap; }
/* On phones the hero label stacks as two clean lines: the separator
   goes away and the second phrase takes its own line */
@media (max-width: 700px) {
  .label-sep { display: none; }
  .label .nowrap { display: block; }
  .hero .label { line-height: 1.85; }
}
.night .soft { color: var(--night-soft); }

.label {
  font-size: var(--step-label);
  font-weight: 540;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze-ink);
  font-variant-numeric: lining-nums;
}
.night .label { color: var(--bronze-bright); }
.label-ink { color: var(--ink-soft); }

.italic { font-style: italic; }

p + p { margin-top: 1.1em; }

.prose p { color: var(--ink); }
.prose .soft-block p { color: var(--ink-soft); }

/* ── Links & buttons ────────────────────────────────────────── */
.link {
  color: var(--bronze-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(111, 86, 44, 0.35);
  transition: border-color 0.2s ease, color 0.2s ease;
  padding-bottom: 1px;
}
.link:hover { border-bottom-color: var(--bronze-ink); }
.night .link { color: var(--bronze-bright); border-bottom-color: rgba(194, 164, 104, 0.4); }
.night .link:hover { border-bottom-color: var(--bronze-bright); }

.btn {
  display: inline-block;
  font-family: var(--serif);
  font-size: var(--step-label);
  font-weight: 540;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  padding: 0.95rem 2.4rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.night .btn { color: var(--night-text); border-color: var(--night-text); }
.night .btn:hover { background: var(--night-text); color: var(--night); }

/* ── Nav ────────────────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 245, 240, 0.93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.site-nav .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.25rem;
}
.site-nav .wordmark { display: flex; align-items: center; text-decoration: none; }
.site-nav .wordmark img { height: 1.25rem; width: auto; }

.nav-links { display: none; align-items: center; gap: 1.5rem; }
@media (min-width: 990px) { .nav-links { display: flex; } }

.nav-link {
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s ease;
  padding: 0.35rem 0;
}
.nav-link:hover { color: var(--ink); }
.nav-link[aria-current="page"] {
  color: var(--ink);
  border-bottom: 1px solid var(--bronze);
}
.nav-cta {
  position: relative;
  color: var(--bronze-ink);
  margin-left: 1.5rem;
}
/* Divider sits outside the box so the current-page underline hugs the words. */
.nav-cta::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--hairline);
}
.nav-cta:hover { color: var(--bronze-ink); }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 2.75rem; height: 2.75rem;
  padding: 0.6rem;
  background: none;
  border: none;
  cursor: pointer;
}
@media (min-width: 990px) { .nav-toggle { display: none; } }
.nav-toggle span {
  display: block;
  height: 1px;
  background: var(--ink);
  transition: transform 0.25s var(--ease-settle), opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.nav-mobile {
  display: none;
  border-top: 1px solid var(--hairline);
  background: var(--paper);
}
.nav-mobile.open { display: block; }
.nav-mobile .inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.75rem 0 1.5rem;
}
.nav-mobile .nav-link {
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(22, 24, 29, 0.06);
  font-size: 0.8125rem;
}
.nav-mobile .nav-cta { margin-left: 0; }
.nav-mobile .nav-cta::before { display: none; }

/* ── Hero ───────────────────────────────────────────────────── */
.hero { padding: clamp(4.5rem, 3rem + 6vw, 9rem) 0 clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.hero .label { display: block; margin-bottom: 1.75rem; }
.hero .display, .hero .t1 { max-width: 24ch; }
.hero .lede { margin-top: 2rem; }
.hero-note {
  margin-top: 2.75rem;
  display: inline-block;
}

/* ── Grids ──────────────────────────────────────────────────── */
.cols-3 { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 700px) { .cols-3 { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.cols-2 { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 800px) { .cols-2 { grid-template-columns: repeat(2, 1fr); gap: 4rem; } }
.split { display: grid; grid-template-columns: 1fr; gap: 2.25rem; }
@media (min-width: 900px) { .split { grid-template-columns: 5fr 7fr; gap: 5rem; } }

.commitment { border-top: 1px solid var(--ink); padding-top: 1.5rem; }
.commitment .label { display: block; margin-bottom: 0.9rem; }
.commitment p { color: var(--ink-soft); font-size: var(--step-body); }

/* ── Mandate list ───────────────────────────────────────────── */
.mandates { display: grid; grid-template-columns: 1fr; column-gap: 4rem; }
@media (min-width: 800px) { .mandates { grid-template-columns: 1fr 1fr; } }
.mandate {
  display: block;
  padding: 1.4rem 0 1.45rem;
  border-top: 1px solid var(--hairline);
  text-decoration: none;
  position: relative;
}
.mandate .name {
  font-size: var(--step-3);
  font-weight: 440;
  line-height: 1.25;
  transition: color 0.2s ease;
  padding-right: 2rem;
}
.mandate .desc {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--step-small);
  color: var(--ink-soft);
  padding-right: 2rem;
}
.mandate .arrow {
  position: absolute;
  right: 0.25rem;
  top: 1.55rem;
  color: var(--bronze-ink);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s var(--ease-settle);
  font-style: normal;
}
.mandate:hover .name { color: var(--bronze-ink); }
.mandate:hover .arrow { opacity: 1; transform: none; }
.mandate:focus-visible .arrow { opacity: 1; transform: none; }

/* ── Quote / letter excerpt ─────────────────────────────────── */
.passage blockquote {
  font-size: clamp(1.35rem, 1.02rem + 1.5vw, 1.9rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.48;
  max-width: 52rem;
}
.passage .mark {
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--bronze);
  margin-bottom: 2.25rem;
}
.passage figcaption { margin-top: 2rem; }

/* ── The three tiers (Our Approach) — bars draw in on scroll ── */
.tiers { display: flex; flex-direction: column; }
.tier { padding: clamp(1.1rem, 2.4vh, 2.1rem) 0; }
.tier:first-child { padding-top: 0; }
.tier-bar {
  height: 7px;
  width: var(--w);
  background: var(--bronze);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  margin-bottom: 1.05rem;
}
.tier-name { display: block; margin-bottom: 0.45rem; }
.tier-tagline { margin-bottom: 0.35rem; }
.hero-flush { padding-bottom: clamp(1.75rem, 1.2rem + 1.4vw, 2.75rem); }
.section-tiers { padding: 0 0 clamp(2.75rem, 1.75rem + 2vw, 4rem); }
@media (prefers-reduced-motion: no-preference) {
  html.js .tiers .tier-bar { width: 0; }
  html.js .tiers .tier-name,
  html.js .tiers .tier-tagline,
  html.js .tiers .tier-services { opacity: 0; transform: translateY(6px); }
  html.js .tiers.in .tier-bar {
    width: var(--w);
    transition: width 0.85s var(--ease-settle);
    transition-delay: var(--d);
  }
  html.js .tiers.in .tier-name,
  html.js .tiers.in .tier-tagline,
  html.js .tiers.in .tier-services {
    opacity: 1; transform: none;
    transition: opacity 0.5s ease, transform 0.5s var(--ease-settle);
  }
  html.js .tiers.in .tier-name { transition-delay: calc(var(--d) + 0.35s); }
  html.js .tiers.in .tier-tagline { transition-delay: calc(var(--d) + 0.45s); }
  html.js .tiers.in .tier-services { transition-delay: calc(var(--d) + 0.55s); }
}

/* ── Item w/ rule (distinctive lists, FAQ) ──────────────────── */
.entry { border-top: 1px solid var(--hairline); padding-top: 1.4rem; }
.entry h3 { margin-bottom: 0.65rem; }
.entry p { color: var(--ink-soft); font-size: var(--step-body); }

.faq { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 800px) { .faq { grid-template-columns: 1fr 1fr; gap: 3rem 4rem; } }

/* ── Team ───────────────────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: 1fr; gap: 3.5rem 2.5rem; }
@media (min-width: 640px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.bio .portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #D6CFC2;
  margin-bottom: 1.4rem;
}
.bio .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.bio h2 { font-size: var(--step-3); font-weight: 460; }
.bio .role { display: block; margin-top: 0.4rem; }
.bio .credentials { display: block; margin-top: 0.35rem; font-style: italic; color: var(--ink-soft); font-size: var(--step-small); }
.bio p { margin-top: 0.9rem; color: var(--ink-soft); font-size: var(--step-small); line-height: 1.65; }

/* ── Post hero with portrait (news articles) ────────────────── */
.post-hero figure { margin: 2.75rem 0 0; display: flex; align-items: flex-end; gap: 1.5rem; }
.post-hero figure img { display: block; width: 11rem; height: auto; background: #D6CFC2; }
.post-hero figcaption { padding-bottom: 0.35rem; }
@media (min-width: 760px) {
  .post-hero figure img { width: 13rem; }
}

/* ── Letter page ────────────────────────────────────────────── */
.letter-body { font-size: 1.15rem; line-height: 1.75; }
.letter-body h2 {
  font-size: var(--step-3);
  font-weight: 500;
  margin: 2.6em 0 0.9em;
}
.letter-body p + p { margin-top: 1.25em; }
.letter-sign { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--hairline); }

/* ── Forms ──────────────────────────────────────────────────── */
.field { margin-bottom: 1.9rem; }
.field label { display: block; margin-bottom: 0.55rem; }
.field input, .field textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: var(--step-body);
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  padding: 0.85rem 1rem;
  border-radius: 0;
  transition: border-color 0.2s ease;
}
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--bronze);
  outline-offset: 0;
  border-color: transparent;
}
.field textarea { resize: vertical; min-height: 8.5rem; }
.field ::placeholder { color: rgba(81, 84, 78, 0.55); opacity: 1; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 0 1.5rem; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-error { color: #8C3A2E; margin-bottom: 1.5rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Portal cards (client access) ───────────────────────────── */
.portal {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  background: var(--paper-raised);
  padding: 2.25rem;
  text-decoration: none;
  transition: border-color 0.25s ease;
}
.portal:hover { border-color: var(--bronze); }
.portal h2 { font-size: var(--step-3); font-weight: 460; margin-bottom: 0.7rem; }
.portal p { color: var(--ink-soft); font-size: var(--step-small); margin-bottom: 1.75rem; }
.portal .go { margin-top: auto; }
.portal .go .arrow { display: inline-block; transition: transform 0.25s var(--ease-settle); font-style: normal; }
.portal:hover .go .arrow { transform: translateX(5px); }

/* ── Night sections (Reserve passage, colophon) ─────────────── */
.night-section {
  background: var(--night);
  color: var(--night-text);
}
.night-section ::selection { background: var(--bronze-bright); color: var(--night); }

/* Reserve lockup */
.reserve-lockup { display: inline-flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; text-decoration: none; }
.reserve-lockup img { height: 1.4rem; width: auto; }
.reserve-lockup .rule { display: flex; align-items: center; gap: 0.9rem; width: 13rem; }
.reserve-lockup .rule .line { flex: 1; height: 1px; background: var(--bronze-bright); opacity: 0.6; }
.reserve-lockup .word {
  font-size: 0.7rem;
  font-weight: 460;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--bronze-bright);
  padding-left: 0.5em;
}

/* ── Footer colophon ────────────────────────────────────────── */
.colophon {
  background: var(--night);
  color: var(--night-soft);
  padding: 4.5rem 0 3rem;
  font-size: var(--step-small);
}
.colophon ::selection { background: var(--bronze-bright); color: var(--night); }
.colophon .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.75rem;
  padding-bottom: 3rem;
}
@media (min-width: 800px) { .colophon .grid { grid-template-columns: 2fr 1fr 1fr 2fr; gap: 2rem; } }
.colophon .wordmark { display: inline-block; }
.colophon .wordmark img { height: 3rem; width: auto; }
.colophon h2 {
  font-size: var(--step-label);
  font-weight: 540;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze-bright);
  margin-bottom: 1.1rem;
}
.colophon ul { list-style: none; margin: 0; padding: 0; }
.colophon li { margin-bottom: 0.55rem; }
.colophon a { color: var(--night-soft); text-decoration: none; transition: color 0.2s ease; }
.colophon a:hover { color: var(--night-text); }
.colophon address { font-style: normal; line-height: 1.7; }
.colophon .registration { line-height: 1.7; }
.colophon .bottom {
  border-top: 1px solid var(--night-hairline);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  font-size: 0.875rem;
}
.colophon .bottom a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(233,230,222,0.35); }
.colophon .bottom a:hover { text-decoration-color: var(--night-text); }

/* ── Surface: paper grain ───────────────────────────────────
   Felt, not seen. A fine tiled noise that makes the ground read
   as stock rather than hex value. Removed for print.           */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.045 0"/></filter><rect width="240" height="240" filter="url(%23n)"/></svg>');
}

/* ── The contour ────────────────────────────────────────────
   Concentric engraved lines around a quiet centre, one opening.
   Drawn once on first view; fully drawn without JS or with
   reduced motion.                                              */
.contour { display: block; width: 100%; height: auto; }
.contour-field {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .contour path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 4s var(--ease-settle);
    transition-delay: calc(var(--ring) * 700ms);
  }
  html.js .contour.in path { stroke-dashoffset: 0; }
}
/* Soft entry in every mode: where the stroke draw is skipped
   (reduced motion) the mark would otherwise pop in fully formed.
   A brief fade, not motion, so it is kept outside the media query. */
html.js .contour { animation: contour-fade 1.2s ease both; }
@keyframes contour-fade { from { opacity: 0; } }

.hero-home { position: relative; overflow: hidden; }
.hero-home .container { position: relative; z-index: 1; }
/* The complete mark, fully on-canvas, so the same enclosures and the
   same gates read identically wherever it appears. On phones it would
   sit behind the hero text as noise, so it is not shown at all. */
.hero-home .contour-field {
  top: 50%;
  right: clamp(1rem, 4vw, 5rem);
  transform: translateY(-50%);
  width: min(34rem, 78vw);
  color: var(--ink);
  opacity: 0.16;
}
.hero-home .contour path { stroke-width: 1.25; }
@media (max-width: 700px) {
  .hero-home .contour-field { display: none; }
}

.night-contour { position: relative; overflow: hidden; }
.night-contour > .container { position: relative; z-index: 1; }
.night-contour .contour-field {
  top: 50%;
  right: -9rem;
  transform: translateY(-50%);
  width: 32rem;
  color: var(--bronze-bright);
  opacity: 0.16;
}
.lost-contour .contour-field {
  top: 1.5rem;
  right: -4rem;
  transform: none;
  width: 36rem;
  color: var(--ink);
  opacity: 0.15;
}

/* ── Watermark — the mark printed into the paper ────────────── */
.emboss { position: absolute; pointer-events: none; display: none; }
@media (min-width: 900px) { .emboss { display: block; } }

/* ── Interlude — one photographic band per page, at most ─────
   The house grade lives here, not in the files: any image dropped
   in inherits the muted warm treatment (see PHOTOGRAPHY.md §3).   */
.interlude { margin: 0; }
.interlude .frame {
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
@media (max-width: 700px) { .interlude .frame { aspect-ratio: 16 / 10; } }
.interlude img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.62) sepia(0.08) contrast(0.97) brightness(0.99);
}
.interlude figcaption {
  padding-top: 0.85rem;
  text-align: right;
}
.night .interlude img, .night-section .interlude img {
  filter: saturate(0.55) contrast(0.98) brightness(0.88);
}

/* ── Folio numbers on the mandates ──────────────────────────── */
.mandates-numbered .mandate {
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: 0.5rem;
}
.mandate .folio {
  grid-row: 1 / span 2;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--bronze-ink);
  opacity: 0.75;
  font-variant-numeric: oldstyle-nums;
}
.mandates-numbered .mandate .name, .mandates-numbered .mandate .desc { grid-column: 2; }

/* ── Drop cap (the letter) ──────────────────────────────────── */
.dropcap::first-letter {
  float: left;
  font-size: 3.55em;
  line-height: 0.82;
  padding: 0.05em 0.12em 0 0;
  font-weight: 420;
}

/* ── The mirror — co-investment, shown structurally ─────────── */
.mirror { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; margin-top: 2.5rem; }
.mirror .label { display: block; margin-bottom: 0.5rem; }
.mirror ul { list-style: none; margin: 0; padding: 0; }
.mirror li {
  border-top: 1px solid var(--hairline);
  padding: 0.7rem 0;
  font-size: var(--step-small);
  color: var(--ink-soft);
}
.mirror .col:first-child { border-right: 1px solid var(--hairline); padding-right: 2.5rem; }
@media (max-width: 560px) {
  .mirror { grid-template-columns: 1fr; gap: 2rem 0; }
  .mirror .col:first-child { border-right: none; padding-right: 0; }
}

/* ── Signature (the letter) ─────────────────────────────────
   The scan ships untouched; multiply removes its white ground on
   paper, grayscale settles the ink into the site's palette.      */
.signature {
  width: min(15rem, 60%);
  height: auto;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.05);
  margin: 0.5rem 0 0.75rem -0.5rem;
}

/* ── Motion: one gesture, opt-in, reduced-motion-safe ───────── */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-rise] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s var(--ease-settle), transform 0.6s var(--ease-settle);
  }
  html.js [data-rise].in { opacity: 1; transform: none; }
  html.js [data-rise].in.d2 { transition-delay: 90ms; }
  html.js [data-rise].in.d3 { transition-delay: 180ms; }
}

/* ── Partner page (/partners/accountants) ───────────────────
   Components for the accounting-firm partnership page. The page
   is under compliance review and deliberately unlinked; access
   gate lives in functions/partners/_middleware.js.              */
.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.75rem; }

.plist { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.plist li {
  border-top: 1px solid var(--hairline);
  padding: 0.9rem 0;
  color: var(--ink-soft);
}
.plist li:last-child { border-bottom: 1px solid var(--hairline); }
.plist strong { color: var(--ink); font-weight: 500; }

/* The commitment — the strategic centre of the page. Ink rules,
   not hairlines: this section carries more weight by design.    */
.ask-item { border-top: 1px solid var(--ink); padding: 1.5rem 0 1.6rem; }
.ask-item:last-child { border-bottom: 1px solid var(--ink); }
.ask-item h4 { font-size: var(--step-3); font-weight: 500; line-height: 1.3; margin-bottom: 0.5rem; }
.ask-item p { color: var(--ink-soft); }
@media (min-width: 800px) {
  .ask-item { display: grid; grid-template-columns: 5fr 7fr; gap: 3rem; }
  .ask-item h4 { margin-bottom: 0; }
}

/* Stat blocks — the economics */
.stats { display: grid; grid-template-columns: 1fr; gap: 2.25rem; margin: 3rem 0; }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.stat { border-top: 1px solid var(--ink); padding-top: 1.25rem; }
.stat .figure {
  display: block;
  font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.2rem);
  font-weight: 380;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.stat p { margin-top: 0.6rem; color: var(--ink-soft); font-size: var(--step-small); }

/* Illustration table */
.illus { margin: 3rem 0 0; max-width: 42rem; }
.illus figcaption { display: block; margin-bottom: 1rem; }
.illus table { width: 100%; border-collapse: collapse; }
.illus th, .illus td { border-top: 1px solid var(--hairline); padding: 0.8rem 0; }
.illus tr:last-child th, .illus tr:last-child td { border-bottom: 1px solid var(--hairline); }
.illus th { text-align: left; font-weight: 400; color: var(--ink-soft); padding-right: 1.5rem; }
.illus td { text-align: right; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }

/* Fee block — visually distinct: raised paper, bronze edge */
.distinct {
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--bronze);
  background: var(--paper-raised);
  padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
}

/* Numbered items (governance) — the folio treatment, unlinked */
.numbered {
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: 0.5rem;
  border-top: 1px solid var(--hairline);
  padding: 1.4rem 0 1.5rem;
}
.numbered .folio {
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--bronze-ink);
  opacity: 0.75;
  font-variant-numeric: lining-nums;
}
.numbered h3 { margin-bottom: 0.5rem; }

/* Step sequence (the process) */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; max-width: 42rem; }
.steps li {
  counter-increment: step;
  position: relative;
  border-top: 1px solid var(--hairline);
  padding: 1.05rem 0 1.15rem 3.5rem;
  color: var(--ink-soft);
}
.steps li:last-child { border-bottom: 1px solid var(--hairline); }
.steps li::before {
  content: "0" counter(step);
  position: absolute;
  left: 0;
  top: 1.05rem;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--bronze-ink);
  opacity: 0.75;
  font-variant-numeric: lining-nums;
}
.steps strong { color: var(--ink); font-weight: 500; }

/* FAQ accordion — semantic <details>, content always in the DOM */
.faq-acc details { border-top: 1px solid var(--hairline); }
.faq-acc details:last-child { border-bottom: 1px solid var(--hairline); }
.faq-acc summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 1.15rem 2.75rem 1.15rem 0;
  font-size: 1.2rem;
  font-weight: 460;
  line-height: 1.35;
  transition: color 0.2s ease;
}
.faq-acc summary::-webkit-details-marker { display: none; }
.faq-acc summary:hover { color: var(--bronze-ink); }
.faq-acc summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--bronze-ink);
  transition: transform 0.25s var(--ease-settle);
}
.faq-acc details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-acc .answer { padding: 0.15rem 0 1.5rem; max-width: 42rem; }
.faq-acc .answer p { color: var(--ink-soft); }

.close-contact { font-style: normal; line-height: 1.8; color: var(--ink-soft); }
.close-contact a { color: var(--bronze-ink); text-decoration: none; }

/* ── Utilities ──────────────────────────────────────────────── */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mb-4 { margin-bottom: 4rem; }
.center { text-align: center; }

/* ── Print — pages should print like firm stationery ────────── */
@media print {
  @page { margin: 2.2cm; }
  .site-nav, .nav-toggle, .skip-link, .colophon, .contour-field, .emboss { display: none !important; }
  .tiers .tier-bar { width: var(--w) !important; }
  .tiers .tier-name, .tiers .tier-tagline, .tiers .tier-services { opacity: 1 !important; transform: none !important; }
  body { background: #fff; color: #000; font-size: 11.5pt; }
  body::after { display: none; }
  main::before {
    content: "Enclave Private Wealth \2014  enclave.ca";
    display: block;
    font-size: 8.5pt;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #000;
    border-bottom: 1pt solid #000;
    padding-bottom: 9pt;
    margin-bottom: 28pt;
  }
  .hero { padding: 0 0 1.5rem; }
  .section, .section-s { padding: 1.6rem 0; }
  .night-section, .night-section * { background: #fff !important; color: #000 !important; }
  a { color: #000; text-decoration: none; }
  [data-rise] { opacity: 1 !important; transform: none !important; }

  /* Partner page: prints as a circulating document. CTAs are
     suppressed; the accordion prints expanded (the page script
     opens <details> on beforeprint; ::details-content covers browsers
     that support it without JS). */
  .print-hide { display: none !important; }
  .faq-acc details::details-content { content-visibility: visible; }
  .faq-acc summary::after { display: none; }
  .entry, .ask-item, .stat, .numbered, .steps li, .faq-acc details, .illus, .distinct { break-inside: avoid; }
  h2, .label { break-after: avoid; }
  .section, .section-s { break-inside: auto; }
}