:root {
  --bg: #2c190b;
  --bg-soft: #3a2a1e;
  --cream: #f6ecd6;
  --paper: #f1e6cf;
  --tan: #cc9163;
  --rust: #7e3f1f;
  --ink: #2c190b;
  --muted-blue: #c9d9d7;
  --green: #4a6a5a;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Work Sans", Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--cream); font-family: var(--sans); line-height: 1.5; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
p, h1, h2, h3 { margin: 0; }
ul { margin: 0; }

.site { min-height: 100vh; overflow: hidden; background: var(--bg); }
.container, .medium, .narrow { width: min(100% - 48px, 1280px); margin-inline: auto; }
.medium { max-width: 1152px; }
.narrow { max-width: 1024px; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 32px; }
.logo { height: 64px; width: auto; object-fit: contain; }
.logo-top { height: 48px; }
.top-cta { display: inline-block; padding: 9px 20px; background: var(--green); color: var(--cream); font-size: 12px; letter-spacing: .3em; clip-path: polygon(6% 0,100% 0,94% 100%,0 100%); white-space: nowrap; }

.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 112px; }
h1, .section-title, .big-title, .date-section h2, .after-section h2, .closing h2 { font-family: var(--serif); font-weight: 400; line-height: 1.08; }
h1 { color: var(--cream); font-size: 48px; max-width: 620px; }
.hero-subtitle { margin-top: 24px; color: rgba(246,236,214,.95); font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.28; max-width: 640px; }
.hero-tags { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tag { display: inline-block; padding: 8px 16px; font-family: var(--serif); font-size: 16px; line-height: 1.25; }
.tag-filled { color: var(--cream); background: var(--green); border: 1px solid var(--tan); }
.tag-filled span { opacity: .6; }
.tag-outline { color: var(--tan); border: 1px solid var(--tan); font-style: italic; }
.short-line { margin-top: 32px; height: 1px; width: 96px; background: var(--tan); }
.hero-intro { border-left: 1px solid rgba(246,236,214,.15); padding-left: 48px; }
.hero-intro p { color: rgba(246,236,214,.85); font-size: 16px; line-height: 1.7; }

.split-button { display: inline-flex; align-items: stretch; transform: skewX(-15deg); border: 2px solid var(--green); transition: transform .2s ease; white-space: nowrap; }
.split-button:hover { transform: skewX(-15deg) scale(1.05); }
.split-button > span, .split-button > strong { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; color: var(--cream); font-family: var(--serif); font-size: 20px; line-height: 1.1; font-weight: 400; }
.split-button > span { font-style: italic; transform: skewX(15deg); }
.split-button > strong { background: var(--green); }
.split-button > strong em { transform: skewX(15deg); font-weight: 400; }
.button-wrap { margin-top: 32px; display: flex; justify-content: center; }
.button-wrap.left { justify-content: flex-start; }

.executives { margin-top: 128px; }
.section-title { text-align: center; color: var(--cream); font-size: 40px; }
.section-title em, .section-title .accent { color: var(--tan); font-style: italic; }
.muted-title { color: var(--muted-blue); font-size: 30px; font-style: italic; }
.muted-title span { color: rgba(246,236,214,.9); font-style: normal; }
.executive-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.executive-card { background-color: #dde3f0; background-image: url('./images/blue-paper-texture.png'); background-size: cover; background-position: center; box-shadow: 0 10px 30px rgba(0,0,0,.45); color: var(--ink); }
.portrait { padding: 12px; }
.portrait img { width: 100%; height: auto; object-fit: contain; }
.executive-text { padding: 8px 24px 32px; color: var(--ink); font-size: 13px; line-height: 1.6; }
.executive-text ul { padding-left: 20px; margin-top: 12px; }

.intro-section { margin-top: 144px; }
.intro-box { border-left: 3px solid var(--tan); padding-left: 24px; color: rgba(246,236,214,.85); font-size: 18px; line-height: 1.7; }
.intro-box p + p { margin-top: 16px; }

.benefits { margin-top: 112px; }
.eyebrow { text-align: center; color: rgba(246,236,214,.7); font-size: 11px; letter-spacing: .4em; margin-bottom: 8px; }
.big-title { text-align: center; color: var(--tan); font-size: 60px; font-style: italic; overflow-wrap: anywhere; }
.benefit-stage { position: relative; margin-top: 48px; }
.magnifier { position: absolute; width: 448px; left: calc(50% - 50vw); top: -60px; z-index: 2; pointer-events: none; }
.benefit-grid { display: grid; gap: 20px; align-items: stretch; position: relative; z-index: 3; }
.benefit-grid-top { grid-template-columns: repeat(4, 1fr); }
.benefit-grid-bottom { grid-template-columns: repeat(8, 1fr); margin-top: 20px; }
.benefit-grid-bottom .benefit-card { grid-column: span 2; }
.benefit-grid-bottom .benefit-card:first-child { grid-column-start: 2; }
.benefit-card { min-height: 200px; padding: 24px 32px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--ink); background: var(--paper); clip-path: polygon(10% 0,100% 0,90% 100%,0 100%); box-shadow: 0 6px 18px rgba(0,0,0,.35); font-size: 17px; line-height: 1.35; }

.mentor-board { margin-top: 128px; }
.center-text { max-width: 768px; margin: 40px auto 0; text-align: center; color: rgba(246,236,214,.85); font-size: 16px; line-height: 1.7; }
.mentor-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mentor-card { padding: 32px; background: rgba(255,255,255,.03); border-top: 3px solid var(--tan); color: rgba(246,236,214,.9); font-size: 15px; line-height: 1.65; }
.mentor-card h3 { font-family: var(--serif); font-size: 30px; color: var(--tan); font-style: italic; font-weight: 400; }
.mentor-focus { margin: 8px 0 20px; color: rgba(246,236,214,.7); font-size: 12px; letter-spacing: .25em; }
.board-note { margin-top: 48px; }

.date-section { margin-top: 128px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: center; text-align: left; }
.date-left { text-align: right; }
.date-left p, .date-right p { color: rgba(246,236,214,.85); font-size: 16px; letter-spacing: .3em; }
.date-left p { color: var(--cream); }
.date-left h2 { margin-top: 12px; color: var(--tan); font-size: 72px; font-style: italic; }
.microphone { height: 330px; width: auto; max-width: none; }
.date-right h2 { color: var(--tan); font-size: 60px; font-style: italic; }
.date-right p { margin-top: 12px; }
.info-pill { margin-top: 32px; display: inline-flex; align-items: stretch; transform: skewX(-15deg); border: 2px solid var(--tan); text-align: left; }
.info-pill > div { padding: 12px 24px; transform: skewX(15deg); color: var(--cream); }
.info-pill > div:nth-child(2) { background: var(--tan); color: var(--ink); transform: none; }
.info-pill > div:nth-child(2) small, .info-pill > div:nth-child(2) strong { transform: skewX(15deg); display: block; }
.info-pill small { display: block; font-size: 12px; letter-spacing: .25em; }
.info-pill strong { display: block; margin-top: 4px; font-family: var(--serif); font-size: 24px; font-style: italic; line-height: 1.1; }

.limited-section { margin-top: 48px; padding: 0 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.limited-section p { color: var(--tan); font-family: var(--serif); font-size: 18px; font-style: italic; }

.after-section { margin-top: 128px; background: var(--cream); color: var(--ink); }
.after-inner { padding: 80px 0; }
.after-section h2 { text-align: center; font-size: 48px; }
.after-section h2 em { font-style: italic; }
.after-grid { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.ready-wrap { display: flex; justify-content: flex-end; }
.ready-wrap img { width: min(100%, 384px); }
.after-copy { border-left: 3px solid var(--tan); padding-left: 32px; font-size: 15px; line-height: 1.7; }
.after-copy p + p { margin-top: 16px; }
.analysis-note { padding-bottom: 48px; text-align: center; }
.analysis-note span { display: inline-block; padding: 12px 48px; border: 2px solid var(--tan); color: #000; font-size: 11px; letter-spacing: .3em; clip-path: polygon(3% 0,100% 0,97% 100%,0 100%); }

.for-whom { padding: 112px 0; }
.whom-grid { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.whom-grid article { background: rgba(255,255,255,.03); border-left: 3px solid var(--tan); padding: 32px; color: rgba(246,236,214,.9); font-size: 15px; line-height: 1.7; }
.whom-grid strong { display: block; margin-bottom: 16px; color: var(--tan); font-family: var(--serif); font-size: 48px; font-style: italic; font-weight: 400; line-height: 1; }

.closing { position: relative; padding-top: 40px; padding-bottom: 112px; }
.closing h2 { text-align: center; color: var(--cream); font-size: 48px; font-style: italic; }
.closing h2 span { color: var(--tan); }
.hand { position: absolute; right: calc(50% - 50vw); bottom: 80px; width: 336px; opacity: .9; pointer-events: none; z-index: 2; }
.closing-grid { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.closing-copy { max-width: 448px; color: rgba(246,236,214,.85); font-size: 14px; line-height: 1.7; }
.closing-copy p + p { margin-top: 12px; }
.footer { padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; }

@media (max-width: 900px) {
  .container, .medium, .narrow { width: min(100% - 48px, 760px); }
  .top-cta { display: none; }
  .hero { grid-template-columns: 1fr; gap: 48px; margin-top: 80px; }
  h1 { font-size: 40px; }
  .hero-subtitle { font-size: 22px; }
  .hero-intro { border-left: 0; padding-left: 0; }
  .executive-grid, .mentor-grid, .after-grid, .whom-grid, .closing-grid { grid-template-columns: 1fr; }
  .executives, .intro-section { margin-top: 112px; }
  .benefit-grid-top, .benefit-grid-bottom { grid-template-columns: repeat(2, 1fr); }
  .benefit-grid-bottom .benefit-card, .benefit-grid-bottom .benefit-card:first-child { grid-column: auto; }
  .magnifier, .hand { display: none; }
  .date-section { grid-template-columns: 1fr; text-align: center; }
  .date-left { text-align: center; }
  .microphone { height: 264px; margin: 0 auto; }
  .ready-wrap { justify-content: center; }
  .after-copy { padding-left: 24px; }
  .button-wrap.left { justify-content: center; }
}

@media (max-width: 640px) {
  .container, .medium, .narrow { width: min(100% - 32px, 560px); }
  .topbar { padding: 18px 24px; }
  .logo-top { height: 42px; }
  .hero { margin-top: 56px; }
  h1 { font-size: 32px; }
  .hero-subtitle { font-size: 20px; }
  .tag { font-size: 14px; }
  .section-title { font-size: 28px; }
  .muted-title { font-size: 25px; }
  .big-title { font-size: 40px; }
  .intro-box { font-size: 16px; }
  .benefit-grid-top, .benefit-grid-bottom { grid-template-columns: 1fr; }
  .benefit-card { min-height: 162px; font-size: 15px; padding: 16px 32px; }
  .split-button > span, .split-button > strong { padding: 10px 16px; font-size: 14px; }
  .date-left h2 { font-size: 52px; }
  .date-right h2 { font-size: 40px; }
  .info-pill { max-width: 100%; }
  .info-pill > div { padding: 12px 14px; }
  .info-pill small { font-size: 10px; letter-spacing: .18em; }
  .info-pill strong { font-size: 20px; }
  .after-section h2, .closing h2 { font-size: 30px; }
  .after-inner { padding: 64px 0; }
  .analysis-note span { margin-inline: 16px; padding: 12px 20px; font-size: 10px; line-height: 1.5; letter-spacing: .18em; }
  .for-whom { padding: 80px 0; }
}