/* =========================================================
   SA HEDGE FUND — PRESERVE
   Page-specific styles only.

   Global header, navigation, footer, containers, typography
   tokens and shared components are handled by the theme.

   All Preserve-specific styling is scoped to .preserve-root.
   ========================================================= */


/* =========================================================
   PRESERVE TOKENS
   ========================================================= */

.preserve-root {
  --preserve-navy: #0B1F33;
  --preserve-navy-deep: #071523;
  --preserve-navy-raise: #112A44;

  --preserve-gold: #C9A24D;
  --preserve-gold-dim: rgba(201, 162, 77, 0.28);
  --preserve-gold-dark: #9A7A34;

  --preserve-cream: #F3EFE7;
  --preserve-neutral: #F3F1ED;

  --preserve-on-navy: #F3EFE7;
  --preserve-on-navy-mute: #9FAFC2;

  --preserve-on-cream: #0B1F33;
  --preserve-on-cream-mute: #5A6579;

  /* Use the site's global layout system for the page container. */
  --preserve-max: var(--layout-container);
  --preserve-gutter: var(--gutter);
  --preserve-read: 720px;
}


/* =========================================================
   PAGE BASE
   ========================================================= */

.preserve-root,
.preserve-root * {
  box-sizing: border-box;
}

.preserve-root {
  background: var(--preserve-cream);
  color: var(--preserve-on-cream);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.preserve-root h1,
.preserve-root h2,
.preserve-root h3,
.preserve-root h4,
.preserve-root .serif {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  margin: 0;
}

.preserve-root p {
  margin: 0;
}

.preserve-root a {
  color: inherit;
  text-decoration: none;
}

.preserve-root ::selection {
  background: var(--preserve-gold);
  color: var(--preserve-navy-deep);
}


/* =========================================================
   PAGE CONTAINER
   ========================================================= */

.preserve-root .preserve-wrap {
  width: min(
    var(--preserve-max),
    calc(100% - (var(--preserve-gutter) * 2))
  );

  max-width: var(--preserve-max);

  margin-inline: auto;

  padding: 0;
}


/* =========================================================
   PAGE TYPOGRAPHY
   ========================================================= */

.preserve-root .preserve-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: var(--preserve-gold-dark);
  margin-bottom: 20px;
}

.preserve-root .preserve-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--preserve-gold-dark);
}

.preserve-root .preserve-eyebrow-light {
  color: var(--preserve-gold);
}

.preserve-root .preserve-eyebrow-light::before {
  background: var(--preserve-gold);
}

.preserve-root .preserve-section-head {
  max-width: 640px;
}

.preserve-root .preserve-section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}


/* =========================================================
   PAGE BUTTONS
   ========================================================= */

.preserve-root .preserve-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  min-height: 48px;
  padding: 0 26px;

  font-size: 0.86rem;
  letter-spacing: 0.02em;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;

  border: 1px solid transparent;
  cursor: pointer;

  font-family: 'Inter', sans-serif;
}

.preserve-root .preserve-btn-primary {
  background: var(--preserve-gold);
  color: var(--preserve-navy-deep);
  font-weight: 500;
}

.preserve-root .preserve-btn-primary:hover {
  background: #DCB769;
}

.preserve-root .preserve-btn-line {
  border-bottom: 1px solid rgba(11, 31, 51, 0.25);
  padding: 0 0 4px;
  color: var(--preserve-on-cream);
}

.preserve-root .preserve-btn-line:hover {
  border-color: var(--preserve-gold-dark);
  color: var(--preserve-gold-dark);
}

.preserve-root .preserve-btn-line-light {
  border-color: rgba(243, 239, 231, 0.35);
  color: var(--preserve-on-navy);
}

.preserve-root .preserve-btn-line-light:hover {
  color: var(--preserve-gold);
  border-color: var(--preserve-gold);
}

.preserve-root .preserve-btn:hover .preserve-arrow {
  transform: translateX(3px);
}

.preserve-root .preserve-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

/* =========================================================
   HERO CTA — reusable global button component
   Prevent page-level anchor inheritance from overriding
   the primary consultation button.
   ========================================================= */

.preserve-root .preserve-hero-actions a:first-child {
  color: var(--preserve-navy-deep) !important;
}

.preserve-root .preserve-hero-actions a:first-child:hover {
  color: var(--preserve-navy-deep) !important;
}

/* =========================================================
   REVEAL ANIMATION
   Uses existing Core/reveal.js.
   ========================================================= */

.preserve-root .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.preserve-root .reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {

  .preserve-root .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .preserve-root .preserve-arrow {
    transition: none;
  }
}


/* =========================================================
   01 — HERO
   ========================================================= */

.preserve-root .preserve-hero {
  background: var(--preserve-navy);
  color: var(--preserve-on-navy);

  padding:
    clamp(56px, 8vw, 88px)
    0
    clamp(64px, 9vw, 96px);
}

.preserve-root .preserve-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;

  gap: clamp(40px, 6vw, 72px);

  align-items: center;
}

.preserve-root .preserve-hero h1 {
  font-family: 'Playfair Display', serif;

  font-size: clamp(2.3rem, 5vw, 3.4rem);
  line-height: 1.14;
  letter-spacing: -0.01em;

  margin-bottom: 22px;
}

.preserve-root .preserve-hero-sub {
  font-size: 1.1rem;
  line-height: 1.75;

  color: var(--preserve-on-navy-mute);

  max-width: 50ch;

  margin-bottom: 36px;
}

.preserve-root .preserve-hero-actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.preserve-root .preserve-hero-media {
  border: 1px solid rgba(201, 162, 77, 0.25);

  background:
    linear-gradient(
      155deg,
      var(--preserve-navy-raise) 0%,
      var(--preserve-navy-deep) 70%
    );

  padding:
    clamp(32px, 4vw, 44px)
    clamp(28px, 3.5vw, 36px);

  display: flex;
  flex-direction: column;
  align-items: center;
}

.preserve-root .preserve-hero-shield {
  width: 72px;
  height: 72px;

  color: var(--preserve-gold);

  margin-bottom: 8px;
}

.preserve-root .preserve-hero-media .preserve-eyebrow {
  margin-bottom: 8px;
}

.preserve-root .preserve-hero-statement {
  text-align: center;

  font-size: 1.15rem;
  line-height: 1.4;

  margin-bottom: clamp(24px, 3vw, 32px);
}

.preserve-root .preserve-hero-rule {
  width: 100%;
  height: 1px;

  background: rgba(201, 162, 77, 0.22);

  margin-bottom: clamp(20px, 2.6vw, 26px);
}

.preserve-root .preserve-hero-disciplines {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 16px;
}

.preserve-root .preserve-hero-discipline {
  display: flex;
  align-items: center;

  gap: 14px;
}

.preserve-root .preserve-hero-discipline-icon {
  width: 38px;
  height: 38px;

  border-radius: 50%;
  border: 1px solid var(--preserve-gold-dim);

  color: var(--preserve-gold);

  display: flex;
  align-items: center;
  justify-content: center;

  flex: none;
}

.preserve-root .preserve-hero-discipline-icon svg {
  width: 17px;
  height: 17px;
}

.preserve-root .preserve-hero-discipline-label {
  font-size: 0.92rem;
  color: var(--preserve-on-navy);
}


/* =========================================================
   02 — THE PRESERVATION PROBLEM
   ========================================================= */

.preserve-root .preserve-problem {
  padding: clamp(64px, 9vw, 96px) 0;
}

.preserve-root .preserve-problem-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;

  gap: clamp(40px, 6vw, 72px);

  align-items: start;
}

.preserve-root .preserve-problem h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);

  margin-bottom: 22px;

  max-width: 19ch;
}

.preserve-root .preserve-problem p {
  font-size: 1.02rem;
  line-height: 1.8;

  color: var(--preserve-on-cream);

  max-width: 58ch;
}

.preserve-root .preserve-problem p + p {
  margin-top: 16px;
}

.preserve-root .preserve-problem-card {
  background: #fff;

  border: 1px solid rgba(11, 31, 51, 0.1);

  padding: clamp(30px, 3.5vw, 40px);
}

.preserve-root .preserve-problem-quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;

  font-size: 1.2rem;
  line-height: 1.5;

  color: var(--preserve-on-cream);

  margin-bottom: 24px;
}

.preserve-root .preserve-tag-list {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;
}

.preserve-root .preserve-tag-chip {
  font-size: 0.78rem;

  color: var(--preserve-on-cream-mute);

  border: 1px solid rgba(11, 31, 51, 0.14);

  padding: 8px 13px;
}


/* =========================================================
   03 — OUR PERSPECTIVE
   ========================================================= */

.preserve-root .preserve-perspective {
  background: var(--preserve-navy);
  color: var(--preserve-on-navy);

  padding: clamp(72px, 10vw, 120px) 0;

  text-align: center;
}

.preserve-root .preserve-perspective .preserve-wrap {
  max-width: var(--preserve-read);
}

.preserve-root .preserve-perspective .preserve-eyebrow {
  justify-content: center;
}

.preserve-root .preserve-perspective h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);

  margin-bottom: clamp(28px, 4vw, 40px);
}

.preserve-root .preserve-perspective-lead {
  font-family: 'Playfair Display', serif;
  font-style: italic;

  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  line-height: 1.55;

  color: var(--preserve-on-navy);

  margin-bottom: 24px;
}

.preserve-root .preserve-perspective-body {
  font-size: 1.02rem;
  line-height: 1.8;

  color: var(--preserve-on-navy-mute);

  max-width: 64ch;

  margin: 0 auto 28px;
}

.preserve-root .preserve-perspective-contrast {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 14px;

  flex-wrap: wrap;

  font-size: 0.92rem;

  padding-top: 8px;

  border-top: 1px solid rgba(201, 162, 77, 0.18);
}

.preserve-root .preserve-perspective-not {
  color: var(--preserve-on-navy-mute);

  text-decoration: line-through;
  text-decoration-color: rgba(159, 175, 194, 0.4);
}

.preserve-root .preserve-perspective-but {
  color: var(--preserve-gold);
}


/* =========================================================
   04 — PRESERVE FRAMEWORK
   Signature continuity wheel.
   ========================================================= */

.preserve-root .preserve-framework {
  padding: clamp(72px, 10vw, 116px) 0;
}

.preserve-root .preserve-framework .preserve-section-head {
  max-width: 640px;

  margin:
    0 auto
    clamp(48px, 6vw, 68px);

  text-align: center;
}

.preserve-root .preserve-framework .preserve-section-head .preserve-eyebrow {
  justify-content: center;
}

.preserve-root .preserve-framework-wheel {
  position: relative;

  width: 100%;
  max-width: 620px;

  aspect-ratio: 1 / 1;

  margin: 0 auto;
}

.preserve-root .preserve-framework-svg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
}

.preserve-root .preserve-framework-hub {
  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  width: 132px;
  height: 132px;

  border-radius: 50%;

  background: var(--preserve-navy);
  color: var(--preserve-on-navy);

  border: 1px solid var(--preserve-gold-dim);

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  z-index: 2;

  padding: 10px;
}

.preserve-root .preserve-framework-hub-mark {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
}

.preserve-root .preserve-framework-hub-sub {
  font-size: 0.68rem;

  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--preserve-gold);

  margin-top: 6px;
}

.preserve-root .preserve-framework-nodes {
  position: absolute;
  inset: 0;
}

.preserve-root .preserve-framework-node {
  position: absolute;

  transform: translate(-50%, -50%);

  width: 172px;

  background: #fff;

  border: 1px solid rgba(11, 31, 51, 0.1);

  padding: 16px 16px 18px;

  text-align: center;

  z-index: 2;
}

.preserve-root .preserve-framework-node:nth-child(1) {
  left: 50%;
  top: 8%;
}

.preserve-root .preserve-framework-node:nth-child(2) {
  left: 85%;
  top: 29%;
}

.preserve-root .preserve-framework-node:nth-child(3) {
  left: 85%;
  top: 71%;
}

.preserve-root .preserve-framework-node:nth-child(4) {
  left: 50%;
  top: 92%;
}

.preserve-root .preserve-framework-node:nth-child(5) {
  left: 15%;
  top: 71%;
}

.preserve-root .preserve-framework-node:nth-child(6) {
  left: 15%;
  top: 29%;
}

.preserve-root .preserve-framework-node-no {
  font-family: 'Playfair Display', serif;

  font-size: 0.76rem;

  color: var(--preserve-gold-dark);

  display: block;

  margin-bottom: 8px;
}

.preserve-root .preserve-framework-node-icon {
  width: 34px;
  height: 34px;

  border-radius: 50%;

  border: 1px solid var(--preserve-gold-dim);

  color: var(--preserve-gold-dark);

  display: flex;

  align-items: center;
  justify-content: center;

  margin: 0 auto 10px;
}

.preserve-root .preserve-framework-node-icon svg {
  width: 15px;
  height: 15px;
}

.preserve-root .preserve-framework-node h3 {
  font-size: 0.94rem;
  margin-bottom: 6px;
}

.preserve-root .preserve-framework-node p {
  font-size: 0.78rem;
  line-height: 1.5;

  color: var(--preserve-on-cream-mute);
}

.preserve-root .preserve-framework-caption {
  text-align: center;

  font-size: 0.8rem;

  color: var(--preserve-on-cream-mute);

  margin-top: clamp(28px, 4vw, 40px);

  max-width: 52ch;

  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   05 — ASSET ALLOCATION
   ========================================================= */

.preserve-root .preserve-allocation {
  background: var(--preserve-neutral);

  padding: clamp(72px, 10vw, 108px) 0;
}

.preserve-root .preserve-allocation-grid {
  display: grid;

  grid-template-columns: 1fr 1.1fr;

  gap: clamp(40px, 6vw, 72px);

  align-items: start;
}

.preserve-root .preserve-allocation-media {
  aspect-ratio: 1 / 1;

  background: #fff;

  border: 1px solid rgba(11, 31, 51, 0.1);

  display: flex;

  align-items: center;
  justify-content: center;
}

.preserve-root .preserve-allocation-media svg {
  width: 34%;
  height: auto;

  color: var(--preserve-gold-dark);

  opacity: 0.85;
}

.preserve-root .preserve-allocation h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);

  margin-bottom: 20px;

  max-width: 20ch;
}

.preserve-root .preserve-allocation-lead {
  font-family: 'Playfair Display', serif;
  font-style: italic;

  font-size: 1.12rem;
  line-height: 1.5;

  color: var(--preserve-on-cream);

  margin-bottom: 20px;
}

.preserve-root .preserve-allocation-body {
  font-size: 1rem;
  line-height: 1.8;

  color: var(--preserve-on-cream-mute);

  max-width: 58ch;

  margin-bottom: 14px;
}

.preserve-root .preserve-allocation-considerations {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 6px;
}

.preserve-root .preserve-allocation-considerations span {
  font-size: 0.78rem;

  color: var(--preserve-on-cream-mute);

  border: 1px solid rgba(11, 31, 51, 0.14);

  background: #fff;

  padding: 8px 13px;
}


/* =========================================================
   06 — PORTFOLIO REVIEW
   ========================================================= */

.preserve-root .preserve-review {
  padding: clamp(72px, 10vw, 108px) 0;
}

.preserve-root .preserve-review-grid {
  display: grid;

  grid-template-columns: 1.05fr 1fr;

  gap: clamp(40px, 6vw, 72px);

  align-items: start;
}

.preserve-root .preserve-review h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);

  margin-bottom: 20px;

  max-width: 20ch;
}

.preserve-root .preserve-review-lead {
  font-family: 'Playfair Display', serif;
  font-style: italic;

  font-size: 1.12rem;
  line-height: 1.5;

  color: var(--preserve-on-cream);

  margin-bottom: 16px;
}

.preserve-root .preserve-review-body {
  font-size: 1rem;
  line-height: 1.8;

  color: var(--preserve-on-cream-mute);

  max-width: 56ch;
}

.preserve-root .preserve-review-list {
  background: var(--preserve-neutral);

  border: 1px solid rgba(11, 31, 51, 0.1);

  padding: clamp(26px, 3vw, 32px);
}

.preserve-root .preserve-review-list-title {
  font-size: 0.76rem;

  letter-spacing: 0.1em;
  text-transform: uppercase;

  color: var(--preserve-gold-dark);

  margin-bottom: 16px;
}

.preserve-root .preserve-review-list ul {
  list-style: none;

  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;

  gap: 12px;
}

.preserve-root .preserve-review-list li {
  font-size: 0.92rem;
  line-height: 1.55;

  color: var(--preserve-on-cream);

  padding-left: 20px;

  position: relative;
}

.preserve-root .preserve-review-list li::before {
  content: '';

  position: absolute;

  left: 0;
  top: 0.5em;

  width: 8px;
  height: 1px;

  background: var(--preserve-gold-dark);
}


/* =========================================================
   07 — RISK MANAGEMENT
   ========================================================= */

.preserve-root .preserve-risk {
  background: var(--preserve-neutral);

  padding: clamp(72px, 10vw, 108px) 0;
}

.preserve-root .preserve-risk .preserve-section-head {
  margin:
    0 auto
    clamp(20px, 3vw, 28px);

  text-align: center;

  max-width: 640px;
}

.preserve-root .preserve-risk .preserve-eyebrow {
  justify-content: center;
}

.preserve-root .preserve-risk-intro {
  text-align: center;

  font-size: 1.02rem;
  line-height: 1.75;

  color: var(--preserve-on-cream-mute);

  max-width: 60ch;

  margin:
    0 auto
    clamp(44px, 5vw, 56px);
}

.preserve-root .preserve-risk-list {
  max-width: 840px;

  margin: 0 auto;

  border-top: 1px solid rgba(11, 31, 51, 0.14);
}

.preserve-root .preserve-risk-row {
  display: grid;

  grid-template-columns: 220px 1fr;

  gap: 24px;

  padding: 22px 4px;

  border-bottom: 1px solid rgba(11, 31, 51, 0.12);

  align-items: baseline;
}

.preserve-root .preserve-risk-term {
  font-family: 'Playfair Display', serif;

  font-size: 1rem;

  color: var(--preserve-on-cream);
}

.preserve-root .preserve-risk-desc {
  font-size: 0.92rem;
  line-height: 1.65;

  color: var(--preserve-on-cream-mute);
}


/* =========================================================
   08 — CAPITAL PROTECTION
   ========================================================= */

.preserve-root .preserve-protection {
  background: var(--preserve-navy);

  color: var(--preserve-on-navy);

  padding: clamp(72px, 10vw, 112px) 0;

  text-align: center;
}

.preserve-root .preserve-protection .preserve-wrap {
  max-width: 760px;
}

.preserve-root .preserve-protection .preserve-eyebrow {
  justify-content: center;
}

.preserve-root .preserve-protection-statement {
  font-family: 'Playfair Display', serif;

  font-size: clamp(1.5rem, 3vw, 2.05rem);

  line-height: 1.4;

  margin-bottom: 24px;
}

.preserve-root .preserve-protection-body {
  font-size: 1rem;
  line-height: 1.8;

  color: var(--preserve-on-navy-mute);

  max-width: 58ch;

  margin: 0 auto;
}


/* =========================================================
   09 — PRESERVE SERVICES
   ========================================================= */

.preserve-root .preserve-services {
  padding: clamp(72px, 10vw, 108px) 0;
}

.preserve-root .preserve-services .preserve-section-head {
  margin:
    0 0
    clamp(40px, 5vw, 56px);
}

.preserve-root .preserve-service-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1px;

  background: rgba(11, 31, 51, 0.1);

  border: 1px solid rgba(11, 31, 51, 0.1);
}

.preserve-root .preserve-service-card {
  background: #fff;

  padding: clamp(28px, 3.5vw, 34px);

  display: flex;
  flex-direction: column;

  transition: background-color 0.25s ease;
}

.preserve-root .preserve-service-card:hover {
  background: #FBFAF8;
}

.preserve-root .preserve-service-card h3 {
  font-size: 1.1rem;
  line-height: 1.4;

  margin-bottom: 12px;
}

.preserve-root .preserve-service-card p {
  font-size: 0.92rem;
  line-height: 1.65;

  color: var(--preserve-on-cream-mute);

  flex: 1;

  margin-bottom: 18px;
}

.preserve-root .preserve-service-card .preserve-btn-line {
  width: fit-content;
}


/* =========================================================
   10 — CONTINUITY / GENERATIONAL WEALTH
   ========================================================= */

.preserve-root .preserve-continuity {
  background: var(--preserve-neutral);

  padding: clamp(72px, 10vw, 108px) 0;
}

.preserve-root .preserve-continuity .preserve-section-head {
  margin:
    0 auto
    clamp(20px, 3vw, 28px);

  text-align: center;

  max-width: 640px;
}

.preserve-root .preserve-continuity .preserve-eyebrow {
  justify-content: center;
}

.preserve-root .preserve-continuity-intro {
  text-align: center;

  font-size: 1.02rem;
  line-height: 1.75;

  color: var(--preserve-on-cream-mute);

  max-width: 60ch;

  margin:
    0 auto
    clamp(44px, 5vw, 56px);
}

.preserve-root .preserve-continuity-chain {
  display: flex;

  align-items: stretch;

  gap: clamp(8px, 1.4vw, 16px);

  max-width: 1000px;

  margin: 0 auto;
}

.preserve-root .preserve-continuity-stage {
  flex: 1;

  background: #fff;

  border: 1px solid rgba(11, 31, 51, 0.1);

  padding:
    clamp(20px, 2.4vw, 26px)
    clamp(16px, 2vw, 20px);

  text-align: center;
}

.preserve-root .preserve-continuity-stage h3 {
  font-size: 0.96rem;

  margin-bottom: 8px;
}

.preserve-root .preserve-continuity-stage p {
  font-size: 0.8rem;
  line-height: 1.5;

  color: var(--preserve-on-cream-mute);
}

.preserve-root .preserve-continuity-arrow {
  flex: 0 0 auto;

  display: flex;

  align-items: center;

  color: var(--preserve-gold-dark);

  font-size: 1rem;
}


/* =========================================================
   11 — DECISION PRINCIPLES
   ========================================================= */

.preserve-root .preserve-principles {
  padding: clamp(72px, 10vw, 108px) 0;
}

.preserve-root .preserve-principles .preserve-section-head {
  margin:
    0 0
    clamp(40px, 5vw, 56px);
}

.preserve-root .preserve-principles-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: clamp(20px, 3vw, 28px);
}

.preserve-root .preserve-principle-card {
  border: 1px solid rgba(11, 31, 51, 0.12);

  padding:
    clamp(26px, 3vw, 30px)
    clamp(22px, 2.6vw, 26px);

  background: var(--preserve-neutral);
}

.preserve-root .preserve-principle-icon {
  width: 44px;
  height: 44px;

  border-radius: 50%;

  background: var(--preserve-navy);

  color: var(--preserve-gold);

  display: flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 20px;
}

.preserve-root .preserve-principle-icon svg {
  width: 20px;
  height: 20px;
}

.preserve-root .preserve-principle-card h3 {
  font-size: 1.02rem;

  margin-bottom: 8px;
}

.preserve-root .preserve-principle-card p {
  font-size: 0.88rem;
  line-height: 1.6;

  color: var(--preserve-on-cream-mute);
}


/* =========================================================
   12 — RELATED RESEARCH
   ========================================================= */

.preserve-root .preserve-research {
  background: var(--preserve-neutral);

  padding: clamp(72px, 10vw, 108px) 0;
}

.preserve-root .preserve-research .preserve-section-head {
  margin:
    0 0
    clamp(40px, 5vw, 56px);

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  flex-wrap: wrap;
}

.preserve-root .preserve-research-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1px;

  background: rgba(11, 31, 51, 0.1);

  border: 1px solid rgba(11, 31, 51, 0.1);
}

.preserve-root .preserve-research-card {
  background: #fff;

  padding: clamp(24px, 3vw, 28px);

  display: flex;
  flex-direction: column;

  transition: background-color 0.25s ease;
}

.preserve-root .preserve-research-card:hover {
  background: #FBFAF8;
}

.preserve-root .preserve-research-card .preserve-tag {
  font-size: 0.7rem;

  letter-spacing: 0.1em;
  text-transform: uppercase;

  color: var(--preserve-gold-dark);

  margin-bottom: 12px;
}

.preserve-root .preserve-research-card h3 {
  font-size: 1rem;
  line-height: 1.4;

  margin-bottom: 10px;
}

.preserve-root .preserve-research-card p {
  font-size: 0.86rem;
  line-height: 1.6;

  color: var(--preserve-on-cream-mute);

  flex: 1;

  margin-bottom: 14px;
}

.preserve-root .preserve-research-card .preserve-read {
  font-size: 0.78rem;
  font-weight: 500;

  display: inline-flex;

  gap: 6px;

  align-items: center;

  color: var(--preserve-navy);

  border-bottom: 1px solid rgba(11, 31, 51, 0.25);

  padding-bottom: 2px;

  width: fit-content;
}

.preserve-root .preserve-research-card .preserve-read:hover {
  color: var(--preserve-gold-dark);
  border-color: var(--preserve-gold);
}

.preserve-root .preserve-research-card .preserve-read:hover .preserve-arrow {
  transform: translateX(3px);
}


/* =========================================================
   13 — FAQ
   ========================================================= */

.preserve-root .preserve-faq {
  padding: clamp(72px, 10vw, 108px) 0;
}

.preserve-root .preserve-faq .preserve-wrap {
  max-width: var(--preserve-read);
}

.preserve-root .preserve-faq .preserve-section-head {
  margin-bottom: clamp(36px, 5vw, 48px);
}

.preserve-root .preserve-faq-list {
  border-top: 1px solid rgba(11, 31, 51, 0.12);
}

.preserve-root .preserve-faq-item {
  border-bottom: 1px solid rgba(11, 31, 51, 0.12);
}

.preserve-root .preserve-faq-item summary {
  list-style: none;

  cursor: pointer;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 22px 2px;

  font-size: 1rem;
  font-weight: 500;

  color: var(--preserve-on-cream);
}

.preserve-root .preserve-faq-item summary::-webkit-details-marker {
  display: none;
}

.preserve-root .preserve-faq-chevron {
  transition: transform 0.25s ease;

  color: var(--preserve-gold-dark);

  flex: none;
}

.preserve-root .preserve-faq-item[open] .preserve-faq-chevron {
  transform: rotate(180deg);
}

.preserve-root .preserve-faq-item p {
  font-size: 0.96rem;
  line-height: 1.75;

  color: var(--preserve-on-cream-mute);

  max-width: 66ch;

  padding: 0 2px 22px;
}


/* =========================================================
   14 — CONSULTATION CTA
   ========================================================= */

.preserve-root .preserve-cta {
  background: var(--preserve-navy);

  color: var(--preserve-on-navy);

  padding: clamp(72px, 10vw, 120px) 0;

  text-align: center;
}

.preserve-root .preserve-cta .preserve-wrap {
  max-width: 640px;
}

.preserve-root .preserve-cta-rule {
  width: 44px;
  height: 2px;

  background: var(--preserve-gold);

  margin: 0 auto 32px;
}

.preserve-root .preserve-cta h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);

  margin-bottom: 18px;

  line-height: 1.3;
}

.preserve-root .preserve-cta p {
  font-size: 1.02rem;
  line-height: 1.75;

  color: var(--preserve-on-navy-mute);

  margin-bottom: 36px;
}

.preserve-root .preserve-cta-actions {
  display: flex;

  gap: 22px;

  justify-content: center;

  flex-wrap: wrap;
}


/* =========================================================
   15 — RELATED ADVISORY PILLARS
   ========================================================= */

.preserve-root .preserve-related {
  padding:
    clamp(56px, 7vw, 80px)
    0
    clamp(72px, 9vw, 104px);
}

.preserve-root .preserve-related-head {
  text-align: center;

  margin-bottom: clamp(32px, 4vw, 44px);
}

.preserve-root .preserve-related-head .preserve-eyebrow {
  justify-content: center;
}

.preserve-root .preserve-related-head h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}

.preserve-root .preserve-related-row {
  display: flex;

  border-top: 1px solid rgba(11, 31, 51, 0.12);
  border-bottom: 1px solid rgba(11, 31, 51, 0.12);
}

.preserve-root .preserve-related-link {
  flex: 1;

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 24px clamp(16px, 2vw, 24px);

  border-left: 1px solid rgba(11, 31, 51, 0.12);

  transition: background-color 0.25s ease;
}

.preserve-root .preserve-related-link:first-child {
  border-left: none;
}

.preserve-root .preserve-related-link:hover {
  background: var(--preserve-neutral);
}

.preserve-root .preserve-related-icon {
  width: 38px;
  height: 38px;

  border-radius: 50%;

  border: 1px solid var(--preserve-gold-dim);

  color: var(--preserve-gold-dark);

  display: flex;

  align-items: center;
  justify-content: center;

  flex: none;
}

.preserve-root .preserve-related-icon svg {
  width: 17px;
  height: 17px;
}

.preserve-root .preserve-related-link-text h3 {
  font-size: 0.98rem;

  margin-bottom: 4px;
}

.preserve-root .preserve-related-link-text p {
  font-size: 0.8rem;

  color: var(--preserve-on-cream-mute);
}


/* =========================================================
   RESPONSIVE — TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 980px) {

  .preserve-root .preserve-hero-grid,
  .preserve-root .preserve-problem-grid,
  .preserve-root .preserve-allocation-grid,
  .preserve-root .preserve-review-grid {
    grid-template-columns: 1fr;
  }

  .preserve-root .preserve-research-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .preserve-root .preserve-principles-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .preserve-root .preserve-service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .preserve-root .preserve-risk-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .preserve-root .preserve-related-row {
    flex-wrap: wrap;
  }

  .preserve-root .preserve-related-link {
    flex: 1 1 50%;

    border-left: none;

    border-top: 1px solid rgba(11, 31, 51, 0.12);
  }

  .preserve-root .preserve-related-link:nth-child(-n + 2) {
    border-top: none;
  }
}


/* =========================================================
   RESPONSIVE — FRAMEWORK
   ========================================================= */

@media (max-width: 820px) {

  .preserve-root .preserve-framework-wheel {
    position: static;

    max-width: none;

    aspect-ratio: auto;
  }

  .preserve-root .preserve-framework-svg {
    display: none;
  }

  .preserve-root .preserve-framework-hub {
    position: static;

    transform: none;

    margin: 0 auto 32px;
  }

  .preserve-root .preserve-framework-nodes {
    position: static;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 16px;
  }

  .preserve-root .preserve-framework-node {
    position: static;

    transform: none;

    width: auto;
  }

  .preserve-root .preserve-continuity-chain {
    flex-direction: column;
  }

  .preserve-root .preserve-continuity-arrow {
    justify-content: center;

    transform: rotate(90deg);
  }
}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .preserve-root .preserve-research-grid,
  .preserve-root .preserve-principles-grid,
  .preserve-root .preserve-service-grid,
  .preserve-root .preserve-framework-nodes {
    grid-template-columns: 1fr;
  }

  .preserve-root .preserve-hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .preserve-root .preserve-cta-actions {
    flex-direction: column;
  }

  .preserve-root .preserve-related-link {
    flex: 1 1 100%;

    border-top: 1px solid rgba(11, 31, 51, 0.12) !important;
  }

}