@font-face { font-family: 'Circular'; src: url('/fonts/CircularStd-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/fonts/Manrope-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/fonts/Manrope-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Romie'; src: url('/fonts/RomieTrial-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Crimson'; src: url('/fonts/CrimsonText-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Crimson'; src: url('/fonts/CrimsonText-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root { --peach: #fba277; --cream: #f8eee4; --green: #e1f1c6; --blue: #d4ebf8; --coral: #c97859; --ink: #4f4a49; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; min-height: 100%; background: var(--cream); }
img { display: block; }
.desktop-deck { padding: clamp(24px, 3vw, 56px) 0; }
.keynote-frame { position: relative; width: min(88vw, 1680px); margin: 0 auto clamp(18px, 2vw, 36px); aspect-ratio: 16 / 9; overflow: hidden; }
.keynote-frame:last-child { margin-bottom: 0; }
.keynote-frame > img { width: 100%; height: 100%; object-fit: cover; }
.home-menu { display: flex; align-items: center; gap: clamp(22px, 2.2vw, 44px); font: 700 clamp(14px, 1.2vw, 21px)/1 'Manrope', sans-serif; }
.home-menu a { color: #2f2d2c; text-decoration: none; padding: 8px 0 6px; border-bottom: 1px solid transparent; transition: border-color 180ms ease; }
.home-menu a:hover, .home-menu a:focus-visible { border-color: currentColor; outline: none; }
.desktop-menu { position: absolute; z-index: 2; top: 4.2%; right: 4.2%; }
.desktop-email { position: absolute; left: 57%; top: 51%; width: 29%; height: 15%; }
.mobile-deck { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 800px) {
  .desktop-deck { display: none; }
  .mobile-deck { display: block; width: 100%; margin: 0; color: var(--coral); }
  .mobile-poster { background: var(--cream); }
  .mobile-poster img { display: block; width: 100%; height: auto; }
  .mobile-story { background: var(--cream); padding: 56px 24px 0; }
  .mobile-story h2, .mobile-why h2, .mobile-founder h2 { margin: 0; font: 400 clamp(46px, 13vw, 62px)/.92 'Romie', serif; letter-spacing: -.025em; }
  .mobile-story-copy, .mobile-why-copy, .mobile-founder-copy { font: 400 16px/1.42 'Crimson', serif; }
  .mobile-story-copy { margin: 26px 0 45px; }
  .mobile-story-copy p, .mobile-why-copy p, .mobile-founder-copy p { margin: 0 0 1.05em; }
  .mobile-art { width: calc(100% + 48px); max-width: none; margin-left: -24px; }
  .mobile-why { position: relative; overflow: hidden; background: var(--green); padding: 62px 24px 52px; }
  .mobile-why-copy { margin: 42px 0 35px; }
  .mobile-uteros { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(8, 1fr); column-gap: 0; row-gap: 16px; }
  .mobile-uteros img { width: 100%; aspect-ratio: 1; object-fit: contain; grid-column: span 2; }
  .mobile-uteros img:nth-child(5) { grid-column: 2 / span 2; }
  .mobile-7u { display: block; width: 112px; margin: clamp(150px, 25vw, 220px) auto 20px; }
  .mobile-founder { background: var(--blue); }
  .mobile-founder-copy { padding: 58px 24px 44px; }
  .mobile-founder h2 { margin-bottom: 42px; }
  .mobile-founder h2 { font-size: clamp(39px, 10.5vw, 50px); }
  .mobile-founder h2 span { display: block; white-space: nowrap; }
  .mobile-label { font-family: 'Manrope', sans-serif; font-size: 12px; letter-spacing: .18em; }
  .mobile-founder > img { width: 100%; height: auto; filter: none; }
  .mobile-contact { position: relative; background: var(--cream); padding-bottom: 48px; }
  .mobile-contact img { width: 100%; height: auto; }
  .mobile-contact a { display: block; width: fit-content; margin: 25px auto 0; color: #111; font: 500 15px/1.2 'Manrope', sans-serif; letter-spacing: .08em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }