:root {
  color-scheme: light;
  --ink: #173b32;
  --cream: #f6f2e8;
  --gold: #f4c362;
  --muted: #abc1b4;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.site-wrap {
  width: min(100% - 72px, 1500px);
  min-height: 100svh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.site-header, .site-footer { display: flex; align-items: center; justify-content: space-between; }
.site-header { min-height: 112px; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { display: block; width: 43px; height: 43px; }
.brand-mark svg { display: block; width: 100%; height: 100%; }
.brand-name { font-size: 29px; font-weight: 800; letter-spacing: -.07em; line-height: 1; }
.brand-dot { color: #e5a838; }
.header-note { font-size: 11px; font-weight: 800; letter-spacing: .19em; }
.main-card {
  flex: 1;
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: min(710px, calc(100svh - 180px));
  overflow: hidden;
  border-radius: 24px;
  background: var(--ink);
  box-shadow: 0 24px 70px rgba(23, 59, 50, .11);
}
.message {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(54px, 6vw, 110px);
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(circle at -22% 100%, #2d5a47 0, transparent 47%), var(--ink);
  color: #fffaf0;
}
.message::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 460px;
  height: 460px;
  right: -340px;
  bottom: -315px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 75px rgba(255,255,255,.025), 0 0 0 150px rgba(255,255,255,.02);
}
.message-inner { width: 100%; max-width: 620px; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 44px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
}
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px rgba(244,195,98,.16); }
h1 { margin: 0; font-size: clamp(45px, 4.6vw, 78px); line-height: 1.08; letter-spacing: -.065em; font-weight: 750; }
h1 em { color: var(--gold); font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.055em; }
.rule { display: flex; align-items: center; height: 1px; width: min(100%, 480px); margin: 48px 0 37px; background: rgba(255,255,255,.19); }
.rule span { height: 3px; width: 58px; background: var(--gold); }
.lead { max-width: 540px; margin: 0 0 13px; font-size: clamp(19px, 2vw, 24px); font-weight: 700; line-height: 1.42; }
.supporting { max-width: 510px; margin: 0; color: #bbd0c4; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.8; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 35px; }
.actions a { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 52px; font-size: 14px; font-weight: 800; text-decoration: none; transition: transform .2s ease, background-color .2s ease; }
.actions a:hover { transform: translateY(-2px); }
.actions a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.primary-action { padding: 0 22px; border-radius: 6px; color: var(--ink); background: var(--gold); }
.primary-action:hover { background: #ffda89; }
.secondary-action { color: #fffaf0; text-decoration: underline !important; text-underline-offset: 5px; }
.return-note { display: flex; align-items: center; gap: 14px; margin-top: 39px; color: #e7f1e9; font-size: 14px; line-height: 1.5; }
.return-icon { flex: 0 0 40px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(244,195,98,.45); border-radius: 50%; color: var(--gold); }
.return-icon svg { width: 19px; height: 19px; }
.message-number { position: absolute; right: 34px; bottom: 28px; font-size: 10px; letter-spacing: .18em; color: rgba(255,255,255,.4); }
.visual {
  position: relative;
  min-width: 0;
  min-height: 580px;
  overflow: hidden;
  isolation: isolate;
  background: #efbe60;
  background-image: radial-gradient(circle at 65% 40%, #ffdc8a 0%, transparent 55%), linear-gradient(145deg, #f7cf77 0%, #e7ab43 100%);
}
.visual::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image: radial-gradient(#5c502b 0.7px, transparent 0.7px);
  background-size: 7px 7px;
}
.visual-top, .visual-bottom { position: absolute; z-index: 5; left: clamp(28px, 3vw, 48px); right: clamp(28px, 3vw, 48px); display: flex; justify-content: space-between; align-items: center; color: var(--ink); font-size: 11px; letter-spacing: .17em; font-weight: 800; }
.visual-top { top: 37px; }
.visual-bottom { bottom: 36px; }
.asterisk { font-size: 27px; line-height: 1; }
.arrow { font-size: 19px; vertical-align: -1px; margin-left: 5px; }
.orbit { position: absolute; left: 50%; top: 51%; border: 1px solid rgba(23,59,50,.17); border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-one { width: min(72%, 530px); aspect-ratio: 1; }
.orbit-two { width: min(107%, 760px); aspect-ratio: 1; }
.hero-illustration { position: absolute; z-index: 3; width: min(94%, 650px); left: 50%; top: 52%; transform: translate(-50%, -50%); filter: drop-shadow(18px 25px 1px rgba(100, 75, 28, .08)); }
.hero-illustration svg { display: block; width: 100%; }
.flight-path { opacity: .8; }
.hex { position: absolute; z-index: 2; width: 68px; aspect-ratio: .87; background: rgba(255,249,231,.39); clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.hex-1 { top: 17%; left: 6%; width: 88px; }
.hex-2 { top: 24.4%; left: 20%; width: 68px; }
.hex-3 { top: 16%; right: 10%; width: 56px; }
.hex-4 { bottom: 16%; right: 11%; width: 96px; }
.hex-5 { bottom: 8.5%; right: 28%; width: 68px; }
.hex-6 { bottom: 24%; left: -3%; width: 53px; }
.site-footer { min-height: 68px; gap: 20px; font-size: 12px; color: #557165; }

@media (max-width: 1100px) {
  .main-card { grid-template-columns: 53% 47%; }
  .message { padding: 55px 42px; }
  h1 { font-size: clamp(42px, 5vw, 60px); }
}
@media (max-width: 800px) {
  .site-wrap { width: min(100% - 36px, 620px); }
  .site-header { min-height: 86px; }
  .header-note { display: none; }
  .main-card { display: flex; flex-direction: column; min-height: 0; }
  .message { min-height: 610px; padding: 70px clamp(30px, 7vw, 60px) 65px; }
  .message-number { bottom: 20px; right: 25px; }
  .visual { min-height: 480px; }
  .hero-illustration { width: min(76%, 470px); }
  .site-footer { min-height: 75px; }
}
@media (max-width: 500px) {
  .site-wrap { width: min(100% - 24px, 440px); }
  .site-header { min-height: 72px; }
  .brand-mark { width: 37px; height: 37px; }
  .brand-name { font-size: 25px; }
  .main-card { border-radius: 17px; }
  .message { min-height: 650px; padding: 53px 27px 60px; }
  .eyebrow { margin-bottom: 36px; font-size: 10px; }
  h1 { font-size: clamp(39px, 10.4vw, 51px); }
  .rule { margin: 39px 0 31px; }
  .return-note { margin-top: 35px; font-size: 13px; }
  .visual { min-height: 365px; }
  .visual-top, .visual-bottom { left: 23px; right: 23px; font-size: 9px; }
  .visual-top { top: 25px; }
  .visual-bottom { bottom: 24px; }
  .hero-illustration { width: min(89%, 400px); }
  .site-footer { align-items: flex-start; padding-top: 22px; font-size: 11px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-illustration { animation: hover 5s ease-in-out infinite; }
  @keyframes hover { 0%,100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -52%); } }
}