@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,500;1,600;1,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ============================================================
   SUMMA ACADEMY × UFG — sales deck stylesheet
   Palette: deep teal / golden / orange / charcoal / warm cream
   ============================================================ */

:root {
  /* Summa palette (extracted from official seal) */
  --summa-teal: #2a5e55;
  --summa-teal-deep: #163c36;
  --summa-teal-ink: #0d2925;
  --summa-gold: #e8b547;
  --summa-gold-soft: #f1c970;
  --summa-orange: #dd6e2c;
  --summa-orange-soft: #ea8a51;
  --cream: #faf4e6;
  --cream-deep: #f3ead3;
  --paper: #fffcf5;

  /* Neutrals */
  --ink: #1f1d1a;
  --ink-soft: #3a352f;
  --charcoal: #2a2a2a;
  --muted: #6b655c;
  --muted-2: #8a8377;
  --white: #ffffff;

  /* UFG brand colors are available for reference, but the cover lockup uses Summa teal. */
  --ufg-blue: #07476f;
  --ufg-cyan: #71c5d7;

  /* Rules and overlays */
  --rule: rgba(31, 29, 26, 0.14);
  --rule-soft: rgba(31, 29, 26, 0.07);
  --rule-warm: rgba(42, 94, 85, 0.18);
  --rule-dark: rgba(250, 244, 230, 0.18);
  --rule-dark-soft: rgba(250, 244, 230, 0.09);

  /* Shadows */
  --shadow-soft: 0 18px 50px rgba(22, 60, 54, 0.08), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  --shadow-lift: 0 28px 70px rgba(22, 60, 54, 0.18);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 6px 22px rgba(22, 60, 54, 0.06);

  /* Radii — softer than the leadways system */
  --radius-slide: 14px;
  --radius-card: 12px;
  --radius-pill: 999px;

  /* Type scale */
  --fs-micro: 11px;
  --fs-small: 13px;
  --fs-body: clamp(14.5px, 0.25vw + 13.5px, 15.5px);
  --fs-body-lg: clamp(15.5px, 0.3vw + 14px, 16.5px);
  --fs-lede: clamp(17px, 0.5vw + 14px, 19.5px);
  --fs-sub: 16px;
  --fs-h3: clamp(19px, 0.4vw + 16px, 23px);
  --fs-h2: clamp(28px, 1.45vw + 18px, 42px);
  --fs-h1: clamp(36px, 2vw + 20px, 54px);
  --fs-display: clamp(40px, 2.25vw + 22px, 60px);
  --fs-chapter: clamp(72px, 4vw + 40px, 132px);

  /* Spacing */
  --space-slide-y: clamp(36px, 3vw + 14px, 60px);
  --space-slide-x: clamp(36px, 3.5vw + 14px, 68px);

  /* Type families */
  --display: "Montserrat", "Inter", -apple-system, "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

* {
  box-sizing: border-box;
}

img,
svg {
  max-width: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  background-image:
    radial-gradient(ellipse at 14% -12%, rgba(232, 181, 71, 0.18), transparent 42%),
    radial-gradient(ellipse at 96% 4%, rgba(42, 94, 85, 0.10), transparent 38%),
    radial-gradient(ellipse at 70% 110%, rgba(221, 110, 44, 0.07), transparent 50%),
    linear-gradient(180deg, #fbf6e8, #f4ecd5 60%, #ecdfba);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-feature-settings: "ss01", "cv11";
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

/* ============ NAVIGATION ============ */

.deck-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px clamp(18px, 3vw, 36px);
  border-bottom: 1px solid var(--rule);
  background: rgba(251, 247, 234, 0.92);
  backdrop-filter: saturate(120%) blur(18px);
  -webkit-backdrop-filter: saturate(120%) blur(18px);
}

.nav-left,
.nav-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 100%;
  min-width: 0;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-right: 14px;
  border-right: 1px solid var(--rule);
  color: var(--summa-teal);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-brand::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--summa-gold);
  border-radius: 50%;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.counter {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
}

.nav-title {
  max-width: 38vw;
  overflow: hidden;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.deck-button {
  border: 1px solid var(--summa-teal);
  border-radius: 999px;
  background: var(--summa-teal);
  color: var(--cream);
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 9px 16px;
  text-transform: uppercase;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.deck-button.secondary {
  border-color: var(--rule);
  background: transparent;
  color: var(--summa-teal);
}

.deck-button:hover,
.deck-button:focus-visible {
  background: var(--summa-teal-deep);
  border-color: var(--summa-teal-deep);
  color: var(--paper);
  outline: none;
}

.deck-button.secondary:hover,
.deck-button.secondary:focus-visible {
  background: var(--summa-teal);
  border-color: var(--summa-teal);
  color: var(--paper);
}

.deck-progress {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: rgba(31, 29, 26, 0.07);
}

.deck-progress span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--summa-teal), var(--summa-gold));
  transition: width 240ms ease;
}

/* ============ DECK LAYOUT ============ */

.deck {
  display: grid;
  gap: 28px;
  width: min(1280px, calc(100vw - 32px));
  margin: 32px auto 72px;
}

.slide {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: min(720px, calc((100vw - 32px) * 0.56));
  padding: var(--space-slide-y) var(--space-slide-x);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-slide);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  scroll-margin-top: 92px;
  isolation: isolate;
}

.slide > *,
.cover-grid > *,
.split-grid > *,
.grid-2 > *,
.grid-3 > *,
.grid-4 > * {
  min-width: 0;
}

/* Slide grounds */
.slide.cream {
  background:
    radial-gradient(ellipse at 90% 0%, rgba(232, 181, 71, 0.16), transparent 52%),
    linear-gradient(180deg, var(--paper), var(--cream));
}

.slide.warm {
  background:
    radial-gradient(ellipse at 10% 0%, rgba(221, 110, 44, 0.10), transparent 48%),
    linear-gradient(180deg, var(--paper) 0%, var(--cream-deep) 100%);
}

.slide.teal {
  color: var(--cream);
  border-color: rgba(250, 244, 230, 0.06);
  background:
    radial-gradient(ellipse at 86% -8%, rgba(232, 181, 71, 0.18), transparent 56%),
    radial-gradient(ellipse at 0% 110%, rgba(221, 110, 44, 0.10), transparent 48%),
    linear-gradient(180deg, var(--summa-teal) 0%, var(--summa-teal-deep) 100%);
}

.slide.dark {
  color: var(--cream);
  border-color: rgba(250, 244, 230, 0.06);
  background:
    radial-gradient(ellipse at 78% -10%, rgba(232, 181, 71, 0.16), transparent 56%),
    radial-gradient(ellipse at 0% 116%, rgba(221, 110, 44, 0.10), transparent 50%),
    linear-gradient(180deg, var(--summa-teal-deep) 0%, var(--summa-teal-ink) 100%);
}

.slide.gold {
  background:
    radial-gradient(ellipse at 90% 0%, rgba(232, 181, 71, 0.22), transparent 50%),
    linear-gradient(180deg, var(--paper), var(--cream-deep));
}

/* ============ BACKGROUND BRAND MARKS ============
   System rules:
     1. Chapter number lives bottom-RIGHT by default.
     2. Summa watermark = primary client-facing texture; lives
        bottom-LEFT by default, diagonally opposite the chapter.
     3. UFG watermark = supporting only. When present, it sits
        opposite Summa (never the same corner as Summa or the
        chapter). On dense slides UFG is suppressed entirely so
        Summa carries the slide alone.
     4. Density tax: opacity steps down on card-heavy slides so
        copy and metrics stay legible.
     5. Mobile collapses every mark to a single side and shrinks.
   ============================================================ */

.slide.brand-bg > * {
  position: relative;
  z-index: 2;
}

/* Reassert position:absolute on the chapter mark so it isn't
   pulled back to position:relative by `.slide.brand-bg > *`,
   which has higher specificity than the base `.chapter-mark`
   rule. Without this, the numeral lays out in flow at full
   grid-cell width and visually clashes with the watermark. */
.slide.brand-bg .chapter-mark {
  position: absolute;
  z-index: 1;
}

/* ---- Summa primary watermark — bottom-LEFT default ---- */
.slide.brand-bg.mark-summa-logo::after {
  content: "";
  position: absolute;
  left: clamp(-280px, -14vw, -160px);
  bottom: clamp(-280px, -14vw, -180px);
  width: clamp(540px, 42vw, 760px);
  height: clamp(540px, 42vw, 760px);
  background-image: url("assets/summa-logo.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.075;
  filter: saturate(0.92) contrast(1.02);
  transform: rotate(-9deg);
  pointer-events: none;
  z-index: 0;
}

/* On dark/teal grounds Summa lifts via screen blend so it reads
   as a luminous client mark, but it stays in the bottom-LEFT
   corner — same role, different palette. */
.slide.dark.brand-bg.mark-summa-logo::after,
.slide.teal.brand-bg.mark-summa-logo::after {
  opacity: 0.095;
  filter: brightness(1.3) saturate(0.85);
  mix-blend-mode: screen;
  transform: rotate(-8deg);
}

/* ---- UFG supporting watermark (dark variant) ---- */
.slide.brand-bg.mark-ufg::before {
  content: "";
  position: absolute;
  right: clamp(-180px, -10vw, -90px);
  bottom: clamp(-200px, -11vw, -110px);
  width: clamp(380px, 28vw, 520px);
  height: clamp(440px, 32vw, 600px);
  background-image: url("assets/ufg-mark.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  opacity: 0.05;
  filter: brightness(0) invert(1);
  transform: rotate(-6deg);
  pointer-events: none;
  z-index: 0;
}

/* ---- UFG supporting watermark (light variant for cream slides) ---- */
.slide.brand-bg.mark-ufg-light::before {
  content: "";
  position: absolute;
  right: clamp(-160px, -9vw, -80px);
  bottom: clamp(-180px, -10vw, -100px);
  width: clamp(340px, 25vw, 460px);
  height: clamp(380px, 28vw, 520px);
  background-image: url("assets/ufg-mark.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  opacity: 0.038;
  filter: brightness(0) saturate(100%) invert(28%) sepia(30%) saturate(1090%) hue-rotate(135deg);
  transform: rotate(-5deg);
  pointer-events: none;
  z-index: 0;
}

/* =================================================================
   Slide-specific tuning. Each override exists for a layout reason
   noted inline.
   ================================================================= */

/* Slide 02 — Amy's letter sits in the right column; the portrait
   anchors the left. A bottom-LEFT Summa mark bleeds off-canvas
   below the portrait without crowding the signature card. */
#slide-02.brand-bg.mark-summa-logo::after {
  opacity: 0.065;
}

/* Slide 03 — the slide is *about* Summa, so Summa swaps to the
   prominent bottom-RIGHT and the chapter number moves to the
   left so they don't tangle. */
#slide-03 .chapter-mark {
  left: clamp(20px, 3vw, 56px);
  right: auto;
}
#slide-03.brand-bg.mark-summa-logo::after {
  left: auto;
  right: clamp(-260px, -13vw, -140px);
  bottom: clamp(-260px, -13vw, -160px);
  width: clamp(520px, 40vw, 720px);
  height: clamp(520px, 40vw, 720px);
  opacity: 0.07;
  transform: rotate(8deg);
}

/* Slide 04 — teal, dense (header + 3 cells + 4 metrics). Two
   marks would crowd this layout, so UFG is suppressed and Summa
   anchors the bottom-LEFT only. */
#slide-04.brand-bg.mark-ufg::before {
  display: none;
}
#slide-04.brand-bg.mark-summa-logo::after {
  left: clamp(-300px, -15vw, -180px);
  bottom: clamp(-320px, -16vw, -210px);
  width: clamp(560px, 42vw, 760px);
  height: clamp(560px, 42vw, 760px);
  opacity: 0.085;
}

/* Slide 05 — cream, four commit-cards span the full width. Summa
   stays in the corner but opacity drops so the cards read clean. */
#slide-05.brand-bg.mark-summa-logo::after {
  opacity: 0.055;
}

/* Slide 06 — dark, five protect-cells in one row. UFG is again
   suppressed so the row of numbered cells doesn't sit on top of
   two competing marks. Summa carries the slide alone. */
#slide-06.brand-bg.mark-ufg::before {
  display: none;
}
#slide-06.brand-bg.mark-summa-logo::after {
  left: clamp(-320px, -16vw, -190px);
  bottom: clamp(-320px, -16vw, -200px);
  width: clamp(560px, 42vw, 760px);
  height: clamp(560px, 42vw, 760px);
  opacity: 0.085;
  transform: rotate(-7deg);
}

/* Slide 07 — service grid on cream. UFG-light owns the right,
   so the chapter number flips to the left. */
#slide-07 .chapter-mark {
  left: clamp(20px, 3vw, 56px);
  right: auto;
}

/* Slide 08 — gold, proof rows + credentials. Default Summa
   left-bottom is fine but soften so the credential pills read. */
#slide-08.brand-bg.mark-summa-logo::after {
  opacity: 0.07;
}

/* Slide 09 — warm, walkthrough with its own UFG glyph embedded
   inside the deliver aside. Pull the slide-level Summa back so
   the embedded UFG card doesn't fight a second background. */
#slide-09.brand-bg.mark-summa-logo::after {
  opacity: 0.06;
}

/* Slide 10 — timeline cards on cream. Same flip as slide 07:
   UFG-light owns the right, chapter slides to the left. */
#slide-10 .chapter-mark {
  left: clamp(20px, 3vw, 56px);
  right: auto;
}

/* Slide 11 — three tier cards. The featured card needs visual
   primacy, so the watermark steps back. */
#slide-11.brand-bg.mark-summa-logo::after {
  opacity: 0.055;
}

/* Slide 12 — close, dark. UFG anchors the bottom-RIGHT corner
   well below the contact-block; opacity is dialed down so the
   contact cards stay foreground. */
#slide-12.brand-bg.mark-ufg::before {
  right: clamp(-180px, -9vw, -100px);
  bottom: clamp(-200px, -11vw, -130px);
  width: clamp(420px, 30vw, 560px);
  height: clamp(480px, 34vw, 640px);
  opacity: 0.04;
  transform: rotate(-7deg);
}
#slide-12.brand-bg.mark-summa-logo::after {
  opacity: 0.085;
  filter: brightness(1.3) saturate(0.85);
  mix-blend-mode: screen;
}

/* ============ HEADER LOCKUPS ============ */

/* Cover: Prepared for / Prepared by lockup */
.cover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule-warm);
  margin-bottom: clamp(20px, 2vw, 36px);
}

.cover-head .label,
.cover-head .sender-label {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.recipient-lockup {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: min(60%, 660px);
}

.recipient-brand-card {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  width: fit-content;
  max-width: 100%;
  padding: 12px 20px 13px 14px;
  border: 1px solid rgba(232, 181, 71, 0.34);
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 12% 12%, rgba(232, 181, 71, 0.13), transparent 58%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 249, 231, 0.54));
  box-shadow:
    0 18px 45px rgba(22, 60, 54, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  backdrop-filter: blur(10px);
}

.recipient-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.recipient-logo {
  width: 64px;
  height: 86px;
  flex: 0 0 auto;
  object-fit: contain;
  display: block;
  margin: 0;
  filter: drop-shadow(0 7px 14px rgba(22, 60, 54, 0.10));
}

.recipient-name {
  font-family: var(--display);
  font-size: clamp(21px, 1vw + 13px, 30px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--summa-teal-deep);
  line-height: 1.1;
}

.recipient-meta {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.sender-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  max-width: 38%;
}

.ufg-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 1px solid rgba(232, 181, 71, 0.22);
  border-radius: 11px;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(232, 181, 71, 0.16), transparent 58%),
    linear-gradient(180deg, var(--summa-teal), var(--summa-teal-deep));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 16px 34px rgba(22, 60, 54, 0.18);
}

.sender-logo {
  height: 28px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.sender-tagline {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  max-width: 240px;
}

/* Inner-slide header */
.slide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(20px, 2.5vw, 40px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule-warm);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--summa-teal);
}

.kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--summa-gold);
  display: inline-block;
}

.slide.dark .kicker,
.slide.teal .kicker {
  color: var(--summa-gold-soft);
}

.slide.dark .kicker::before,
.slide.teal .kicker::before {
  background: var(--summa-gold);
}

.prepared-for {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

.prepared-for strong {
  color: var(--ink-soft);
  font-weight: 600;
}

.slide.dark .prepared-for,
.slide.teal .prepared-for {
  color: rgba(250, 244, 230, 0.55);
}

.slide.dark .prepared-for strong,
.slide.teal .prepared-for strong {
  color: var(--cream);
}

/* ============ TYPE ============ */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.028em;
  margin: 0 0 18px;
  color: var(--summa-teal-deep);
  line-height: 1.04;
  text-wrap: balance;
}

.slide.dark h1, .slide.dark h2, .slide.dark h3,
.slide.teal h1, .slide.teal h2, .slide.teal h3 {
  color: var(--cream);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 {
  font-size: var(--fs-h3);
  margin-bottom: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h2 em {
  font-family: var(--display);
  font-style: italic;
  color: var(--summa-orange);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.slide.dark h2 em,
.slide.teal h2 em {
  color: var(--summa-gold);
}

p {
  margin: 0 0 14px;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-soft);
}

.slide.dark p,
.slide.teal p {
  color: rgba(250, 244, 230, 0.86);
}

.lede {
  font-family: var(--sans);
  font-size: var(--fs-lede);
  line-height: 1.55;
  font-weight: 400;
  color: var(--ink-soft);
  max-width: 64ch;
  margin-bottom: 28px;
  text-wrap: pretty;
}

.lede.tight {
  margin-bottom: 22px;
}

.slide.dark .lede,
.slide.teal .lede {
  color: rgba(250, 244, 230, 0.88);
}

.chapter-mark {
  position: absolute;
  /* width:max-content keeps the span tight to the numeral so
     the chapter number anchors to the right edge cleanly,
     instead of stretching to grid-cell width and left-aligning
     the text into the bottom-left watermark area. */
  width: max-content;
  right: clamp(20px, 3vw, 56px);
  bottom: clamp(8px, 2vw, 28px);
  font-family: var(--display);
  font-size: var(--fs-chapter);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.055em;
  color: rgba(42, 94, 85, 0.07);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.slide.dark .chapter-mark,
.slide.teal .chapter-mark {
  color: rgba(250, 244, 230, 0.06);
}

/* ============ COVER SLIDE ============ */

.cover-slide {
  background:
    radial-gradient(ellipse at 88% 6%, rgba(232, 181, 71, 0.20), transparent 52%),
    radial-gradient(ellipse at 4% 96%, rgba(221, 110, 44, 0.12), transparent 50%),
    linear-gradient(180deg, var(--paper), var(--cream));
}

.cover-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(28px, 3vw, 56px);
  align-items: center;
}

.client-cover-title {
  font-family: var(--display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--summa-teal-deep);
  margin-bottom: 22px;
}

.client-cover-title em {
  font-family: var(--display);
  font-style: italic;
  color: var(--summa-orange);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.cover-signature {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-warm);
}

.signature-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.signature-block .label {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.signature-block .value {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--summa-teal-deep);
  line-height: 1.2;
}

.signature-block .sub {
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Cover seal card */
.summa-seal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 28px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(232, 181, 71, 0.20), transparent 60%),
    linear-gradient(180deg, #fffaee 0%, #f7eed3 100%);
  border: 1px solid rgba(232, 181, 71, 0.4);
  box-shadow: var(--shadow-card);
  text-align: center;
  min-height: 360px;
}

.summa-seal-card .seal-img {
  width: 220px;
  height: auto;
  display: block;
  margin: 0 auto 20px;
}

.summa-seal-card .seal-promise {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  font-style: italic;
  color: var(--summa-teal-deep);
  line-height: 1.4;
  max-width: 32ch;
  margin: 0 auto 14px;
}

.summa-seal-card .seal-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--summa-orange);
}

.summa-seal-card .seal-tag::before,
.summa-seal-card .seal-tag::after {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--summa-orange);
}

/* ============ NOTE FROM AMY (slide 2) ============ */

.amy-note {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(28px, 3vw, 56px);
  align-items: center;
}

.amy-portrait {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--cream-deep);
  box-shadow: var(--shadow-card);
}

.amy-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.amy-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(22, 60, 54, 0.30));
  pointer-events: none;
}

.amy-caption {
  position: absolute;
  left: 20px;
  bottom: 18px;
  color: var(--cream);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 2;
}

.amy-letter h2 {
  max-width: 14ch;
  margin-bottom: 20px;
  line-height: 1.02;
}

.amy-letter .greeting {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--summa-teal);
  margin-bottom: 12px;
}

.amy-letter p {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  margin-bottom: 15px;
  color: var(--ink-soft);
  max-width: 56ch;
}

.amy-signature {
  width: min(100%, 640px);
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid var(--rule-warm);
  border-left: 4px solid rgba(242, 128, 30, 0.72);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 248, 228, 0.36)),
    radial-gradient(ellipse at 0% 0%, rgba(242, 128, 30, 0.08), transparent 62%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 22px;
  align-items: center;
  box-shadow: 0 16px 34px rgba(22, 60, 54, 0.05);
}

.amy-signature .signed {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--summa-teal);
  line-height: 1.1;
  padding-right: 22px;
  border-right: 1px solid rgba(22, 60, 54, 0.16);
}

.amy-signature .signed-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.amy-signature .signed-name {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--summa-teal-deep);
  line-height: 1.15;
}

.amy-signature .signed-title,
.amy-signature .signed-org {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--muted);
}

.amy-signature .signed-org {
  color: var(--summa-teal);
}

/* ============ GRIDS ============ */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.split-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 3vw, 48px);
  align-items: start;
}

/* ============ CARDS / CELLS ============ */

.cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 22px;
  background: rgba(255, 252, 245, 0.72);
  border: 1px solid var(--rule-warm);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.slide.dark .cell,
.slide.teal .cell {
  background: rgba(250, 244, 230, 0.06);
  border-color: var(--rule-dark-soft);
  color: var(--cream);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.cell-index {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--summa-teal);
  margin-bottom: 6px;
}

.slide.dark .cell-index,
.slide.teal .cell-index {
  color: var(--summa-gold-soft);
}

.cell-index .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--summa-gold);
}

.slide.dark .cell-index .dot,
.slide.teal .cell-index .dot {
  background: var(--summa-gold);
}

.cell h3 {
  margin-bottom: 8px;
}

.cell p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

.slide.dark .cell p,
.slide.teal .cell p {
  color: rgba(250, 244, 230, 0.84);
}

.cell.accent-block {
  background: linear-gradient(180deg, rgba(232, 181, 71, 0.18), rgba(221, 110, 44, 0.10));
  border-color: rgba(221, 110, 44, 0.35);
}

.slide.dark .cell.accent-block,
.slide.teal .cell.accent-block {
  background: linear-gradient(180deg, rgba(232, 181, 71, 0.22), rgba(232, 181, 71, 0.08));
  border-color: rgba(232, 181, 71, 0.35);
}

/* Numbered protection cells (slide 6 / care model) */
.protect-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 12px;
}

.protect-cell {
  position: relative;
  padding: 24px 18px 22px;
  background: rgba(255, 252, 245, 0.55);
  border: 1px solid var(--rule-warm);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.slide.dark .protect-cell,
.slide.teal .protect-cell {
  background: rgba(250, 244, 230, 0.06);
  border-color: var(--rule-dark-soft);
}

.protect-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--summa-teal);
  color: var(--cream);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 800;
  font-style: normal;
}

.slide.dark .protect-num,
.slide.teal .protect-num {
  background: var(--summa-gold);
  color: var(--summa-teal-deep);
}

.protect-cell h3 {
  font-size: 16px;
  margin: 4px 0 4px;
  line-height: 1.25;
}

.protect-cell p {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}

/* ============ COMMITMENTS (slide 5) ============ */

.commit-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 12px;
}

.commit-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 22px;
  background: rgba(255, 252, 245, 0.7);
  border: 1px solid var(--rule-warm);
  border-radius: 14px;
  text-align: left;
}

.slide.dark .commit-card,
.slide.teal .commit-card {
  background: rgba(250, 244, 230, 0.06);
  border-color: var(--rule-dark-soft);
}

.commit-word {
  font-family: var(--display);
  font-size: clamp(28px, 1.4vw + 18px, 38px);
  font-weight: 800;
  font-style: normal;
  letter-spacing: -0.045em;
  color: var(--summa-orange);
  line-height: 1;
}

.slide.teal .commit-word,
.slide.dark .commit-word {
  color: var(--summa-gold);
}

.commit-card p {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  color: var(--ink-soft);
}

.slide.teal .commit-card p,
.slide.dark .commit-card p {
  color: rgba(250, 244, 230, 0.86);
}

/* ============ MISSION ECHO (slide 3) ============ */

.echo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3vw, 48px);
  align-items: stretch;
}

.echo-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.echo-col .echo-label {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.echo-col.summa .echo-label {
  color: var(--summa-orange);
}

.echo-col.ufg .echo-label {
  color: var(--summa-teal);
}

.echo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.echo-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  background: rgba(255, 252, 245, 0.6);
  border: 1px solid var(--rule-warm);
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.echo-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
}

.echo-col.summa .echo-list li::before {
  background: var(--summa-orange);
}

.echo-col.ufg .echo-list li::before {
  background: var(--summa-teal);
}

/* ============ MOMENT METRICS (slide 4) ============ */

.metric-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--rule-warm);
}

.slide.dark .metric-row,
.slide.teal .metric-row {
  border-top-color: var(--rule-dark-soft);
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.metric strong {
  font-family: var(--display);
  font-size: clamp(28px, 1.6vw + 16px, 40px);
  font-weight: 800;
  font-style: normal;
  letter-spacing: -0.05em;
  color: var(--summa-teal-deep);
  line-height: 1;
}

.slide.dark .metric strong,
.slide.teal .metric strong {
  color: var(--summa-gold);
}

.metric span {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}

.slide.dark .metric span,
.slide.teal .metric span {
  color: rgba(250, 244, 230, 0.6);
}

/* ============ SERVICE CAPABILITIES (slide 7) ============ */

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 12px;
}

.service-cell {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 18px;
  background: rgba(255, 252, 245, 0.65);
  border: 1px solid var(--rule-warm);
  border-radius: 12px;
}

.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--summa-teal);
  color: var(--summa-gold);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
  font-style: normal;
  flex-shrink: 0;
}

.service-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.service-body h3 {
  font-size: 15.5px;
  margin: 0;
  line-height: 1.25;
  font-weight: 600;
}

.service-body p {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
  color: var(--ink-soft);
}

/* ============ PROOF / WHY UFG (slide 8) ============ */

.proof-set {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 14px;
}

.proof-row {
  display: grid;
  grid-template-columns: 64px 280px 1fr;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-warm);
}

.slide.dark .proof-row,
.slide.teal .proof-row {
  border-bottom-color: var(--rule-dark-soft);
}

.proof-row:last-child {
  border-bottom: 0;
}

.proof-index {
  font-family: var(--display);
  font-size: 38px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.06em;
  color: var(--summa-orange);
  line-height: 1;
}

.slide.dark .proof-index,
.slide.teal .proof-index {
  color: var(--summa-gold);
}

.proof-row h3 {
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
}

.proof-tag {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.slide.dark .proof-tag,
.slide.teal .proof-tag {
  color: rgba(250, 244, 230, 0.55);
}

.proof-row p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.slide.dark .proof-row p,
.slide.teal .proof-row p {
  color: rgba(250, 244, 230, 0.85);
}

/* ============ TIMELINE (slide 10) ============ */

.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 12px;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--summa-gold), var(--summa-orange) 60%, transparent);
  z-index: 0;
}

.timeline-step {
  position: relative;
  padding: 32px 16px 18px;
  background: rgba(255, 252, 245, 0.7);
  border: 1px solid var(--rule-warm);
  border-radius: 12px;
  z-index: 1;
}

.slide.dark .timeline-step,
.slide.teal .timeline-step {
  background: rgba(250, 244, 230, 0.06);
  border-color: var(--rule-dark-soft);
}

.timeline-step::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 22px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--summa-gold);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--summa-orange);
}

.slide.dark .timeline-step::before,
.slide.teal .timeline-step::before {
  border-color: var(--summa-teal-deep);
}

.timeline-step strong {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--summa-orange);
  margin-bottom: 6px;
}

.slide.dark .timeline-step strong,
.slide.teal .timeline-step strong {
  color: var(--summa-gold);
}

.timeline-step h3 {
  font-size: 16px;
  margin: 0 0 6px;
  line-height: 1.25;
  font-weight: 600;
}

.timeline-step p {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}

/* ============ WALKTHROUGH (slide 9) ============ */

.walk-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 3vw, 48px);
  align-items: stretch;
}

.walk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.walk-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
}

.walk-list .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(232, 181, 71, 0.18);
  border: 1px solid rgba(232, 181, 71, 0.5);
  color: var(--summa-teal-deep);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.walk-list h3 {
  font-size: 16px;
  margin: 4px 0 4px;
  line-height: 1.2;
  font-weight: 600;
}

.walk-list p {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

.walk-deliver {
  padding: 28px 26px;
  background: linear-gradient(180deg, var(--summa-teal-deep), var(--summa-teal-ink));
  color: var(--cream);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.walk-deliver::before {
  content: "";
  position: absolute;
  inset: -40px -40px auto auto;
  width: 280px;
  height: 280px;
  background-image: url("assets/ufg-mark.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.07;
  filter: brightness(0) invert(1);
  transform: rotate(-10deg);
  pointer-events: none;
}

.walk-deliver > * {
  position: relative;
  z-index: 2;
}

.walk-deliver .deliver-kicker {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--summa-gold);
}

.walk-deliver h3 {
  color: var(--cream);
  font-size: 22px;
  margin: 0;
}

.walk-deliver p {
  color: #fff;
}

.walk-deliver ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.walk-deliver li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(250, 244, 230, 0.92);
}

.walk-deliver li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--summa-gold);
  margin-top: 8px;
}

/* ============ TIERS (slide 11) ============ */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 12px;
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border-radius: 14px;
  background: rgba(255, 252, 245, 0.85);
  border: 1px solid var(--rule-warm);
  box-shadow: var(--shadow-card);
}

.tier.featured {
  background: linear-gradient(180deg, #fffaee 0%, #f7eed3 100%);
  border-color: rgba(232, 181, 71, 0.55);
  box-shadow: 0 24px 48px rgba(221, 110, 44, 0.12), var(--shadow-card);
}

.tier-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--summa-teal);
  margin-bottom: 8px;
}

.tier-label .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--summa-teal);
}

.tier.featured .tier-label {
  color: var(--summa-orange);
}

.tier.featured .tier-label .dot {
  background: var(--summa-orange);
}

.tier h3 {
  font-size: 22px;
  margin: 0 0 8px;
  line-height: 1.15;
  font-weight: 600;
  color: var(--summa-teal-deep);
}

.tier .tier-blurb {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 18px;
  min-height: 44px;
}

.tier ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tier li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.tier li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--summa-gold);
  margin-top: 6px;
}

.tier.featured li::before {
  background: var(--summa-orange);
}

.tier-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed rgba(42, 94, 85, 0.3);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============ CTA / CLOSE (slide 12) ============ */

.cta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 22px;
}

.time-option {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 26px 24px;
  background: rgba(250, 244, 230, 0.06);
  border: 1px solid rgba(232, 181, 71, 0.4);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.time-option:hover,
.time-option:focus-visible {
  background: rgba(232, 181, 71, 0.14);
  border-color: var(--summa-gold);
  transform: translateY(-2px);
  outline: none;
}

.time-option .label {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--summa-gold);
}

.time-option strong {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.time-option .note {
  font-size: 13.5px;
  color: rgba(250, 244, 230, 0.7);
  letter-spacing: 0.02em;
}

.reply-line {
  margin-top: 18px;
  padding: 14px 18px;
  background: rgba(250, 244, 230, 0.05);
  border-left: 3px solid var(--summa-gold);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(250, 244, 230, 0.85);
}

.reply-line a {
  color: var(--summa-gold-soft);
  text-decoration: underline;
  text-decoration-color: rgba(232, 181, 71, 0.35);
  text-underline-offset: 3px;
}

.reply-line a:hover {
  color: var(--summa-gold);
}

.contact-block {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.contact-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  background: rgba(250, 244, 230, 0.06);
  border: 1px solid var(--rule-dark-soft);
  border-radius: 14px;
}

.headshot {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--summa-teal-deep);
  border: 2px solid rgba(232, 181, 71, 0.4);
}

.headshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.amy-photo { object-position: center 18%; }
.letty-photo { object-position: center 22%; }

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.contact-details .role {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--summa-gold);
  margin-bottom: 2px;
}

.contact-details .name {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--cream);
  line-height: 1.1;
}

.contact-details .title {
  font-size: 13px;
  color: rgba(250, 244, 230, 0.65);
  margin-bottom: 4px;
}

.contact-details a {
  font-size: 13.5px;
  color: var(--summa-gold-soft);
  text-decoration: none;
  letter-spacing: 0.01em;
  margin-top: 1px;
}

.contact-details a:hover {
  color: var(--summa-gold);
  text-decoration: underline;
}

.contact-details .caption {
  margin-top: 6px;
  font-size: 12px;
  font-style: italic;
  color: rgba(250, 244, 230, 0.55);
}

/* ============ MISC ============ */

.credentials-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.credential {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--rule-warm);
  border-radius: 999px;
  background: rgba(255, 252, 245, 0.7);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--summa-teal-deep);
}

.slide.dark .credential,
.slide.teal .credential {
  background: rgba(250, 244, 230, 0.08);
  border-color: rgba(232, 181, 71, 0.35);
  color: var(--summa-gold-soft);
}

.source-note {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-warm);
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  max-width: 70ch;
}

.slide.dark .source-note,
.slide.teal .source-note {
  border-top-color: var(--rule-dark-soft);
  color: rgba(250, 244, 230, 0.6);
}

/* ============ RESPONSIVE ============ */

@media (max-width: 1024px) {
  .grid-4,
  .commit-row,
  .protect-grid,
  .timeline,
  .metric-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .timeline::before {
    display: none;
  }

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

  .cover-grid,
  .amy-note,
  .echo-grid,
  .walk-grid,
  .split-grid {
    grid-template-columns: 1fr;
  }

  .recipient-lockup,
  .sender-lockup {
    max-width: 100%;
  }

  .proof-row {
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "i title"
      ". body";
    gap: 14px;
  }

  .proof-index { grid-area: i; }
  .proof-row > div { grid-area: title; }
  .proof-row p { grid-area: body; }
}

@media (max-width: 720px) {
  body {
    min-width: 0;
  }

  .deck-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    overflow: hidden;
  }

  .nav-left,
  .nav-actions {
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav-left::-webkit-scrollbar,
  .nav-actions::-webkit-scrollbar {
    display: none;
  }

  .nav-brand,
  .pill,
  .counter,
  .nav-title,
  .deck-button {
    flex: 0 0 auto;
  }

  .deck-button {
    padding: 8px 13px;
  }

  .nav-title {
    max-width: 100%;
  }

  .deck {
    width: min(1280px, calc(100vw - 24px));
    gap: 20px;
    margin-top: 24px;
  }

  .slide {
    min-height: auto;
    padding: clamp(28px, 5vw, 40px) clamp(20px, 4vw, 28px);
  }

  .cover-head,
  .slide-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .sender-lockup {
    align-items: flex-start;
  }

  .sender-tagline {
    text-align: left;
  }

  .prepared-for {
    text-align: left;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .cover-grid,
  .commit-row,
  .protect-grid,
  .timeline,
  .metric-row,
  .service-grid,
  .tier-grid,
  .cta-grid,
  .contact-block,
  .cover-signature {
    grid-template-columns: 1fr;
  }

  .proof-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "i"
      "title"
      "body";
    gap: 8px;
  }

  .recipient-brand-card {
    width: 100%;
    padding: 12px 16px;
    gap: 14px;
  }

  .recipient-logo {
    width: 58px;
    height: 78px;
  }
  .ufg-chip {
    max-width: 100%;
    padding: 12px 18px;
  }
  .sender-logo { max-width: 220px; }
  .summa-seal-card .seal-img { width: 170px; }

  .cover-grid,
  .cover-grid > div,
  .recipient-lockup,
  .sender-lockup {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .client-cover-title {
    max-width: 100%;
    font-size: clamp(25px, 6.5vw, 29px);
    line-height: 1.12;
    letter-spacing: -0.035em;
    text-wrap: normal;
    overflow-wrap: break-word;
  }

  .recipient-meta,
  .sender-tagline,
  .signature-block .value,
  .signature-block .sub {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  h2 {
    font-size: clamp(28px, 7.8vw, 36px);
  }

  .lede,
  .amy-letter p,
  .reply-line,
  .source-note {
    max-width: 100%;
  }

  .amy-signature {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  .amy-signature .signed {
    padding-right: 0;
    border-right: 0;
  }

  .amy-signature .signed-block {
    text-align: left;
  }

  .proof-row,
  .proof-row > div,
  .proof-row p,
  .tier,
  .service-cell,
  .contact-card {
    min-width: 0;
  }

  .proof-row h3,
  .proof-row p,
  .tier h3,
  .tier li,
  .service-body p {
    overflow-wrap: break-word;
  }

  /* Mobile: every mark snaps to its desktop side but shrinks
     and dims so it never crowds a stacked card layout. */
  .slide.brand-bg.mark-summa-logo::after {
    left: -180px;
    right: auto;
    bottom: -180px;
    width: 360px;
    height: 360px;
    opacity: 0.05;
    transform: rotate(-9deg);
  }

  .slide.brand-bg.mark-ufg::before {
    right: -150px;
    left: auto;
    bottom: -170px;
    width: 300px;
    height: 340px;
    opacity: 0.04;
  }

  .slide.brand-bg.mark-ufg-light::before {
    right: -140px;
    left: auto;
    bottom: -160px;
    width: 280px;
    height: 320px;
    opacity: 0.03;
  }

  /* Slide 03 keeps the desktop flip on mobile too — Summa stays
     on the right, chapter on the left. */
  #slide-03.brand-bg.mark-summa-logo::after {
    left: auto;
    right: -180px;
    bottom: -180px;
    width: 360px;
    height: 360px;
    opacity: 0.045;
    transform: rotate(7deg);
  }

  /* Slide 04, 05, 06 — collapse to a single faint Summa mark on
     the left so stacked cards don't fight a watermark. */
  #slide-04.brand-bg.mark-summa-logo::after,
  #slide-05.brand-bg.mark-summa-logo::after,
  #slide-06.brand-bg.mark-summa-logo::after,
  #slide-11.brand-bg.mark-summa-logo::after {
    left: -180px;
    right: auto;
    bottom: -180px;
    width: 340px;
    height: 340px;
    opacity: 0.04;
    transform: rotate(-7deg);
  }

  /* Slide 12 — Summa stays bottom-left, UFG stays bottom-right
     but both shrink so they don't fight with the contact-block
     when it stacks. */
  #slide-12.brand-bg.mark-summa-logo::after {
    width: 320px;
    height: 320px;
    opacity: 0.05;
  }
  #slide-12.brand-bg.mark-ufg::before {
    right: -140px;
    bottom: -160px;
    width: 280px;
    height: 320px;
    opacity: 0.035;
  }

  .chapter-mark {
    font-size: clamp(56px, 14vw, 90px);
  }

  .contact-card {
    grid-template-columns: 80px 1fr;
  }

  .headshot {
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 430px) {
  .slide {
    padding: 26px 20px;
  }

  .client-cover-title {
    font-size: clamp(24px, 6.2vw, 27px);
  }

  .recipient-logo {
    width: 52px;
    height: 70px;
  }

  .sender-logo {
    width: min(100%, 210px);
  }

  .ufg-chip {
    width: min(100%, 250px);
  }

  .summa-seal-card {
    min-height: 300px;
    padding: 28px 20px;
  }

  .contact-card {
    grid-template-columns: 72px 1fr;
    gap: 14px;
  }

  .headshot {
    width: 72px;
    height: 72px;
  }
}

/* ============ PRINT ============ */

@media print {
  body {
    background: white;
  }

  .deck-nav {
    display: none;
  }

  .deck {
    width: auto;
    margin: 0;
    gap: 0;
  }

  .slide {
    box-shadow: none;
    border: 0;
    border-radius: 0;
    page-break-after: always;
    min-height: 100vh;
  }

  .slide:last-child {
    page-break-after: auto;
  }

  .time-option {
    background: white;
    color: var(--ink);
    border-color: var(--rule);
  }

  .time-option .label {
    color: var(--summa-orange);
  }

  .time-option strong {
    color: var(--summa-teal-deep);
  }

  .reply-line {
    color: var(--ink-soft);
    background: var(--cream);
  }

  .reply-line a {
    color: var(--summa-teal-deep);
  }
}