* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; }
body { margin: 0; color: #e5eee6; background: #0d1c20; font: 15px/1.6 system-ui, -apple-system, sans-serif; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid #b6efcf; outline-offset: 5px; }
::selection { background: #b6efcf; color: #0d1c20; }
.home-header, main, footer { max-width: 1320px; margin: auto; }
.home-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 48px; border-bottom: 1px solid #aec8be1a; }
.wordmark { font: 700 23px Georgia, serif; letter-spacing: -.5px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 24px; padding: 16px 24px; background: #b6efcf; color: #122d29; border: 1px solid #b6efcf; border-radius: 10px; font-weight: 600; font-size: 14px; transition: background .2s; }
.button:hover { background: #d1f8e0; }
.hero { padding: 64px 48px 56px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 40px; }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 2px; color: #a6c1b5; margin: 0 0 22px; }
.hero h1 { font: normal clamp(52px, 6vw, 80px)/1.04 Georgia, serif; letter-spacing: -3px; margin: 0 0 24px; }
.hero h1 em, h2 em { font-weight: normal; color: #b6efcf; }
.intro { font-size: 14px; color: #b0c2bb; line-height: 1.8; margin: 0 0 26px; }
.entry-note { font-size: 11px; color: #8ca49c; margin: 14px 0 0; }
.hero-portrait { margin: 0; min-width: 0; }
.hero-portrait img { display: block; width: 100%; height: auto; border-radius: 20px; border: 1px solid #aec8be26; }
.hero-portrait figcaption { margin-top: 16px; color: #94b1a4; font-size: 9px; letter-spacing: 2px; text-align: center; }
.journey-strip { border-block: 1px solid #aec8be1a; margin: 0 48px; display: flex; justify-content: space-between; align-items: center; padding: 23px 0; color: #b8c9c0; }
.journey-strip p { font-size: 12px; margin: 0; display: flex; align-items: center; gap: 12px; }
.journey-strip p span { color: #b6efcf; font-size: 10px; border: 1px solid #aec8be30; border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; }
.journey-strip > i { font-style: normal; color: #729185; }
.discover { padding: 80px 48px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 32px; }
.section-heading .eyebrow { margin-bottom: 16px; }
h2 { font: normal clamp(32px, 4vw, 50px)/1.12 Georgia, serif; letter-spacing: -1.5px; margin: 0; }
.section-heading > p { max-width: 340px; color: #a1b7ac; font-size: 13px; margin: 0 0 5px; line-height: 1.8; }
.feature-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.feature-card { grid-column: span 4; min-width: 0; border: 1px solid #aec8be26; border-radius: 20px; background: #13262a; overflow: hidden; transition: border-color .2s; }
.feature-card:hover { border-color: #b6efcf66; }
.feature-card > a { display: flex; flex-direction: column; height: 100%; }
.feature-card:focus-within { outline: 2px solid #b6efcf; outline-offset: 4px; }
.feature-card > a:focus-visible { outline: none; }
.feature-flight { grid-column: span 7; }
.feature-voice { grid-column: span 5; }
.feature-art { position: relative; height: 230px; isolation: isolate; overflow: hidden; background: #263e3d; }
.feature-flight .feature-art, .feature-voice .feature-art { height: 300px; }
.art-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s ease; }
.feature-art::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #06151a08 40%, #06151ab3); }
.feature-copy { padding: 25px; display: flex; flex-direction: column; flex: 1; }
.feature-kicker { font-size: 9px; font-weight: 600; letter-spacing: 1.8px; color: #96b3a4; }
.feature-copy h3 { font: normal 27px/1.18 Georgia, serif; letter-spacing: -.5px; margin: 12px 0; }
.feature-copy p { font-size: 13px; color: #afc2b8; line-height: 1.75; margin: 0 0 22px; }
.feature-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 15px; border-top: 1px solid #aec8be22; color: #c8efd8; font-size: 12px; font-weight: 600; min-height: 44px; }
.feature-link > span { font-size: 18px; font-weight: 400; }
.art-tag, .flight-marker, .speech, .voice-wave, .place-pin, .day-preview { background: #10262ded; color: #ecf6ed; border: 1px solid #daffe033; box-shadow: 0 8px 24px #00101426; }
.art-tag { position: absolute; top: 18px; left: 18px; padding: 7px 11px; border-radius: 6px; font-size: 8px; letter-spacing: 1.7px; }
.flight-path { position: absolute; width: 100%; height: 100%; inset: 0; }
.flight-art .art-image { object-position: 50% 20%; }
.flight-marker { position: absolute; bottom: 22px; left: 22px; display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 8px; border-radius: 12px; font-size: 11px; }
.flight-marker img { display: block; }
.flight-marker > span { padding-left: 12px; color: #b6efcf; }
.voice-art .art-image { filter: brightness(.68); }
.voice-preview { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 30px; gap: 14px; }
.speech { font-size: 13px; padding: 12px 16px; border-radius: 14px; }
.speech-you { align-self: flex-end; background: #d7edce; color: #18372d; border-bottom-right-radius: 4px; }
.speech-crow { align-self: flex-start; display: flex; align-items: center; gap: 9px; border-bottom-left-radius: 4px; }
.voice-wave { align-self: center; display: flex; align-items: center; gap: 3px; padding: 10px 14px; border-radius: 30px; margin-top: 6px; }
.voice-wave i { width: 2px; height: 8px; border-radius: 3px; background: #b6efcf; }
.voice-wave i:nth-child(3n) { height: 20px; }
.voice-wave i:nth-child(3n + 1) { height: 13px; }
.voice-wave > span { margin-left: 8px; font-size: 10px; }
.art-caption { position: absolute; bottom: 17px; left: 12px; right: 12px; text-align: center; color: #fff; font-size: 10px; text-shadow: 0 1px 5px #001015; }
.panorama-orbit { position: absolute; left: 12%; right: 12%; top: 33%; height: 38%; border: 1px solid #fff9; border-radius: 50%; transform: rotate(-12deg); box-shadow: 0 0 0 1px #15302d22; }
.panorama-label { position: absolute; top: 36%; width: 100%; display: flex; gap: 24px; align-items: center; justify-content: center; color: white; text-shadow: 0 2px 12px #071f29; }
.panorama-label b { font: italic 48px Georgia, serif; }
.portrait-art .art-image { object-position: 70% 50%; }
.portrait-reference { position: absolute; top: 25px; left: 24px; width: 95px; padding: 5px 5px 7px; background: #f3f0df; box-shadow: 0 6px 20px #0005; transform: rotate(-8deg); text-align: center; border-radius: 3px; }
.portrait-reference img { width: 100%; height: 108px; object-fit: cover; display: block; }
.portrait-reference > span { color: #234136; font: 11px/2 Georgia, serif; }
.portrait-plus { position: absolute; top: 82px; left: 44%; font: 30px Georgia, serif; color: #fff; text-shadow: 0 1px 8px #001414; }
.portrait-destination { position: absolute; top: 86px; right: 21px; font-size: 13px; font-weight: 600; letter-spacing: 3px; color: #fff; text-shadow: 0 1px 8px #001414; }
.portrait-destination small { font-size: 9px; font-weight: 400; letter-spacing: 0; }
.place-pin { position: absolute; padding: 8px 11px; border-radius: 12px 12px 12px 2px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.place-pin > span { font-size: 11px; }
.pin-coffee { top: 47px; left: 18px; }
.pin-wander { top: 115px; right: 18px; }
.feature-plan { grid-column: 1 / -1; }
.feature-plan > a { display: grid; grid-template-columns: 1fr 1fr; }
.feature-plan .feature-art { height: 100%; min-height: 310px; }
.feature-plan .feature-copy { padding: 34px 40px; }
.feature-plan h3 { font-size: 34px; }
.plan-art .art-image { filter: brightness(.78); }
.day-preview { position: absolute; left: 12%; right: 12%; top: 50%; transform: translateY(-50%) rotate(-3deg); padding: 22px; border-radius: 14px; }
.day-title { display: block; font-size: 9px; letter-spacing: 1.8px; color: #b6efcf; margin-bottom: 12px; }
.day-preview > div { display: flex; align-items: center; gap: 16px; padding: 9px 0; border-top: 1px solid #aec8be26; }
.day-preview > div > span { font-size: 10px; color: #b6efcf; font-variant-numeric: tabular-nums; }
.day-preview b { font-size: 12px; font-weight: 500; }
.closing { margin: 0 48px 64px; padding: 40px; background: #d9e6cf; color: #18342b; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-radius: 20px; }
.closing h2 { font-size: 36px; max-width: 530px; }
.closing .eyebrow { color: #456553; margin-bottom: 12px; }
.closing p:not(.eyebrow) { font-size: 13px; color: #42604f; margin-bottom: 0; max-width: 460px; }
.closing-actions { display: flex; flex-direction: column; gap: 14px; min-width: 180px; text-align: center; }
.closing .button { background: #183b30; border-color: #183b30; color: #e3f2df; }
.closing .button:hover { background: #295343; }
.quiet-link { font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
footer { padding: 26px 48px 34px; border-top: 1px solid #aec8be1a; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
footer > a:last-child { font-size: 12px; color: #a8beb2; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .feature-card:hover .art-image { transform: scale(1.035); }
}
@media (max-width: 1000px) {
  .hero { gap: 28px; }
  .feature-card { grid-column: span 6; }
  .feature-art, .feature-flight .feature-art, .feature-voice .feature-art { height: 250px; }
  .feature-plan > a { display: flex; }
  .feature-plan .feature-art { height: 250px; min-height: 250px; }
  .feature-plan .feature-copy { padding: 25px; }
  .feature-plan h3 { font-size: 27px; }
  .feature-plan h3 br { display: none; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
  .section-heading > p { max-width: none; }
  .day-preview { left: 7%; right: 7%; padding: 16px; }
  .voice-preview { padding: 20px; }
  .speech { font-size: 12px; padding: 10px 12px; }
}
@media (max-width: 700px) {
  .home-header { padding: 18px 24px; }
  .hero { grid-template-columns: 1fr; padding: 42px 24px 32px; gap: 28px; }
  .hero h1 { font-size: clamp(48px, 9.7vw, 65px); letter-spacing: -2px; max-width: 500px; }
  .intro { font-size: 13px; }
  .hero-portrait { width: 100%; }
  .hero-portrait figcaption { font-size: 8px; letter-spacing: 1.2px; }
  .journey-strip { margin: 0 24px; padding: 18px 0; gap: 8px; }
  .journey-strip p { font-size: 10px; flex-direction: column; gap: 6px; align-items: flex-start; }
  .journey-strip p span { width: 24px; height: 24px; font-size: 8px; }
  .discover { padding: 48px 24px; }
  .section-heading { margin-bottom: 24px; }
  h2 { font-size: 35px; letter-spacing: -1px; }
  .feature-grid { gap: 16px; }
  .closing { margin: 0 24px 40px; padding: 28px; flex-direction: column; align-items: stretch; gap: 24px; }
  .closing h2 { font-size: 32px; }
  .closing-actions { align-items: flex-start; }
  footer { padding: 24px; }
}
@media (max-width: 600px) {
  .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-card { grid-column: auto; }
  .feature-art, .feature-flight .feature-art, .feature-voice .feature-art, .feature-plan .feature-art { height: auto; min-height: 0; aspect-ratio: 3 / 2; }
  .feature-copy, .feature-plan .feature-copy { padding: 22px; }
  .feature-copy h3, .feature-plan h3 { font-size: 28px; }
  .feature-copy p { margin-bottom: 18px; }
  .section-heading > p br { display: none; }
  .day-preview { padding: 16px; }
  .day-title { font-size: 8px; margin-bottom: 8px; }
  .day-preview > div { padding: 7px 0; gap: 12px; }
  .day-preview b { font-size: 11px; }
  .portrait-reference { top: 18px; width: 88px; }
  .portrait-reference img { height: 90px; }
  .portrait-destination { top: 72px; }
  .portrait-plus { top: 65px; }
  .art-caption { font-size: 9px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .feature-card, .art-image { transition: none; }
}
@media (forced-colors: active) {
  .feature-card, .closing { border: 1px solid CanvasText; }
}