:root {
  --story-ink: #28241f;
  --story-copy: #645c53;
  --story-muted: #786e63;
  --story-coral: #b94b38;
  --story-coral-dark: #963c2e;
  --story-paper: #fffaf5;
  --story-cream: #f8f0e5;
  --story-warm: #f1dfca;
  --story-line: #dfceb9;
  --story-deep: #30372f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  background: var(--story-paper);
  color: var(--story-ink);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body > main { overflow: hidden; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.story-shell { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.story-eyebrow {
  margin: 0 0 10px;
  color: var(--story-coral-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .105em;
  line-height: 1.35;
  text-transform: uppercase;
}
.story-section-title {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(34px, 4.1vw, 54px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.08;
}
.story-label {
  display: inline-flex;
  align-items: center;
  margin: 0 0 14px;
  color: var(--story-coral-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.story-hero { background: var(--story-cream); border-bottom: 1px solid rgba(90, 67, 44, .12); }
.story-hero-inner { display: grid; grid-template-columns: minmax(0, 47%) minmax(0, 53%); min-height: 650px; }
.story-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 54px 54px 54px max(32px, calc((100vw - 1120px) / 2));
  background: linear-gradient(115deg, #fffaf5, #f6e9da);
}
.story-hero h1 {
  max-width: 620px;
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(46px, 5.25vw, 68px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: .98;
}
.story-hero h1 span { display: block; color: var(--story-coral-dark); }
.story-hero-intro { max-width: 520px; margin: 20px 0 0; color: var(--story-copy); font-size: 19px; line-height: 1.5; }
.story-hero-photo { position: relative; min-height: 100%; overflow: hidden; background: #d5b995; }
.story-hero-photo::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(246, 233, 218, .5), transparent 29%), linear-gradient(0deg, rgba(41, 34, 27, .2), transparent 44%);
  content: "";
}
.story-hero-photo img { width: 100%; height: 100%; min-height: 650px; object-fit: cover; object-position: center 50%; }

.story-form-group { width: min(100%, 480px); margin-top: 24px; }
.story-optin { padding: 20px; border: 1px solid rgba(179, 140, 98, .3); border-radius: 14px; background: rgba(255, 253, 250, .95); box-shadow: 0 16px 34px rgba(59, 39, 22, .1); }
.story-optin .lead { margin: 0 0 13px; color: var(--story-ink); font-size: 16px; font-weight: 700; text-align: center; }
.story-optin form { display: grid; gap: 10px; }
.story-optin label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.story-optin input[type="email"] { width: 100%; min-height: 54px; padding: 0 15px; border: 1px solid #d9c7b2; border-radius: 9px; background: #fff; color: var(--story-ink); font: inherit; font-size: 17px; }
.story-optin button { min-height: 54px; border: 0; border-radius: 9px; background: var(--story-coral); color: #fff; cursor: pointer; font: 700 17px/1 "DM Sans", sans-serif; }
.story-optin button:hover { background: var(--story-coral-dark); }
.story-optin button:focus-visible, .story-optin input:focus-visible, .story-card a:focus-visible, .story-excerpt a:focus-visible { outline: 3px solid #332d25; outline-offset: 3px; }
.story-optin button:disabled { cursor: wait; opacity: .7; }
.story-status { min-height: 1.3em; margin: 10px 0 0; color: var(--story-coral-dark); font-size: 14px; text-align: center; }
.story-form-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin: 12px 0 0; color: var(--story-muted); font-size: 12px; line-height: 1.4; text-align: center; }
.story-form-trust span:not(:last-child)::after { display: inline-block; width: 3px; height: 3px; margin-left: 12px; border-radius: 50%; background: #a38d72; content: ""; vertical-align: middle; }
.story-success h2 { margin: 0 0 8px; font-family: "DM Sans", system-ui, sans-serif; font-size: 29px; font-weight: 600; line-height: 1.1; }
.story-success p { margin: 0 0 7px; color: var(--story-copy); font-size: 16px; }

.story-excerpt { padding: 78px 0; background: #fffaf4; }
.story-excerpt-inner { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(38px, 8vw, 108px); align-items: start; }
.story-excerpt-copy { max-width: 600px; padding: 27px 30px; border-left: 3px solid #c8735b; background: #f9efe3; }
.story-excerpt-copy p { margin: 0 0 9px; font-family: "DM Sans", system-ui, sans-serif; font-size: clamp(20px, 2vw, 25px); line-height: 1.36; }
.story-excerpt-copy a, .story-card a { min-height: 44px; display: inline-flex; align-items: center; margin-top: 12px; color: var(--story-coral-dark); font-weight: 800; text-underline-offset: 5px; }

.story-library { padding: 76px 0 84px; background: var(--story-cream); }
.story-library-heading { max-width: 690px; margin-bottom: 30px; }
.story-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.story-card { overflow: hidden; border: 1px solid var(--story-line); border-radius: 11px; background: #fffdf9; box-shadow: 0 16px 32px rgba(58, 42, 26, .08); }
.story-card-media { height: 275px; overflow: hidden; background: #dfc4a5; }
.story-card-media img { width: 100%; height: 100%; object-fit: cover; }
.story-card:first-child .story-card-media img { object-position: center; }
.story-card-body { padding: 25px 26px 27px; }
.story-card h3 { margin: 0; color: var(--story-ink); font-family: "DM Sans", system-ui, sans-serif; font-size: 32px; font-weight: 600; line-height: 1.08; }
.story-card p { margin: 14px 0 0; color: var(--story-copy); font-size: 18px; line-height: 1.55; }

.story-signup-section { padding: 74px 0; background: linear-gradient(105deg, #f2d7c5, #f8eadc); }
.story-signup-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr); gap: 54px; align-items: center; }
.story-signup-copy p:not(.story-eyebrow) { max-width: 470px; margin: 16px 0 0; color: var(--story-copy); font-size: 19px; }
.story-signup-section .story-form-group, .story-final .story-form-group { margin-top: 0; }

.story-trust { padding: 46px 0; border-top: 1px solid var(--story-line); border-bottom: 1px solid var(--story-line); background: #fffdf9; }
.story-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.story-trust-item { padding: 0 28px; border-right: 1px solid var(--story-line); }
.story-trust-item:first-child { padding-left: 0; }
.story-trust-item:last-child { padding-right: 0; border-right: 0; }
.story-trust-item h2 { margin: 0 0 6px; font-size: 18px; line-height: 1.2; }
.story-trust-item p { margin: 0; color: var(--story-copy); font-size: 15px; line-height: 1.5; }

.story-final { padding: 78px 0; background: var(--story-deep); color: #fbf5ec; }
.story-final-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: 56px; align-items: center; }
.story-final .story-eyebrow { color: #e6ba85; }
.story-final .story-section-title { max-width: 660px; }
.story-final .story-optin { background: #fffaf4; color: var(--story-ink); }
.story-footer { padding: 24px; background: #252b25; color: #eae0d2; font-size: 14px; text-align: center; }
.story-footer p { margin: 0; }
.story-footer a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #eae0d2; text-underline-offset: 4px; }

@media (min-width: 821px) {
  .story-hero-copy {
    justify-content: flex-start;
    padding-top: 46px;
  }
}

@media (max-width: 820px) {
  .story-hero-inner { grid-template-columns: 1fr 1fr; min-height: 620px; }
  .story-hero-copy { padding: 42px 32px; }
  .story-hero h1 { font-size: clamp(44px, 6vw, 57px); }
  .story-signup-inner, .story-final-inner { grid-template-columns: 1fr; gap: 30px; }
  .story-trust-item { padding: 0 16px; }
}

@media (max-width: 640px) {
  body { font-size: 18px; }
  .story-shell { width: min(100% - 32px, 600px); }
  .story-hero-inner { display: flex; min-height: 0; flex-direction: column; }
  .story-hero-copy { order: 1; padding: 26px 20px 29px; }
  .story-hero h1 { font-size: clamp(39px, 10.5vw, 48px); line-height: 1; }
  .story-hero-intro { margin-top: 14px; font-size: 17px; line-height: 1.45; }
  .story-form-group { width: 100%; margin-top: 18px; }
  .story-optin { padding: 16px; }
  .story-optin .lead { margin-bottom: 10px; font-size: 15px; }
  .story-optin input[type="email"], .story-optin button { min-height: 52px; }
  .story-hero-photo { order: 2; height: 300px; min-height: 0; }
  .story-hero-photo img { min-height: 0; object-position: center 14%; }
  .story-hero-photo::after { background: linear-gradient(180deg, rgba(246, 233, 218, 0), rgba(246, 233, 218, .62) 86%, #f8f0e5); }
  .story-excerpt { padding: 52px 0; }
  .story-excerpt-inner { grid-template-columns: 1fr; gap: 24px; }
  .story-excerpt-copy { padding: 22px 20px; }
  .story-library { padding: 54px 0; }
  .story-cards { grid-template-columns: 1fr; gap: 18px; }
  .story-card-media { height: 235px; }
  .story-card-body { padding: 22px; }
  .story-card h3 { font-size: 30px; }
  .story-signup-section { padding: 52px 0; }
  .story-signup-inner, .story-final-inner { gap: 24px; }
  .story-trust { padding: 30px 0; }
  .story-trust-grid { grid-template-columns: 1fr; }
  .story-trust-item, .story-trust-item:first-child, .story-trust-item:last-child { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--story-line); }
  .story-trust-item:last-child { border-bottom: 0; }
  .story-final { padding: 56px 0; }
  .story-form-trust { gap: 4px 8px; font-size: 13px; }
  .story-form-trust span:not(:last-child)::after { margin-left: 8px; }
}

@media (max-width: 380px) { .story-hero h1 { font-size: 37px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

.story-proof { padding: 66px 0; background: var(--story-cream); border-top: 1px solid var(--story-line); overflow: hidden; }
.story-proof-head { text-align: center; max-width: 660px; margin: 0 auto 34px; padding-inline: 24px; }
.story-proof-lede { margin: 14px 0 0; color: var(--story-copy); font-size: 18px; line-height: 1.55; }
.story-proof-viewport { overflow-x: auto; overflow-y: hidden; padding-bottom: 18px; scroll-padding-inline: max(24px, calc((100vw - 1180px) / 2)); scroll-snap-type: x proximity; scrollbar-color: var(--story-warm) transparent; scrollbar-width: thin; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.story-proof-viewport:focus-visible { outline: 3px solid var(--story-coral-dark); outline-offset: -3px; }
.story-proof-track { width: max-content; padding-inline: max(24px, calc((100vw - 1180px) / 2)); }
.story-proof-set { display: flex; gap: 20px; }
.story-proof-card { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; width: clamp(280px, 26vw, 340px); min-height: 148px; margin: 0; padding: 23px 26px; background: #fffdf9; border: 1px solid var(--story-line); border-radius: 12px; box-shadow: 0 12px 28px -20px rgba(60,40,28,.55); scroll-snap-align: start; }
.story-proof-card::before { content: "\201C"; display: block; font-family: Georgia, "Times New Roman", serif; font-size: 40px; line-height: .4; color: var(--story-warm); margin: 2px 0 8px; }
.story-proof-card blockquote { margin: 0; color: var(--story-ink); font-size: 18px; line-height: 1.5; }
@media (max-width: 620px) { .story-proof { padding: 48px 0; } .story-proof-card { width: min(80vw, 300px); } }