/* Homepage editorial sections. The hero keeps the established visual identity. */
.journey { background:#f7f5ed; color:#193d35; padding:132px 0 118px; }
.journey__intro h2, .essentials h2, .farewell h2 { font-size:clamp(40px,5.5vw,76px); line-height:1.2; letter-spacing:-.045em; margin:0 0 22px; font-weight:650; }
.journey__intro h2 em, .essentials h2 em { font-style:normal; color:#8aa998; }
.journey__intro > p { font-size:16px; line-height:2; color:#637b6d; margin:0; }
.journey__list { margin-top:115px; }
.journey__row { display:grid; grid-template-columns: 2fr 1fr; gap:36px; align-items:start; padding:35px 0 44px; border-top:1px solid #cbd5c9; min-height:178px; }
.journey__row:last-child { border-bottom:1px solid #cbd5c9; }
.journey__row h3 { font-size:clamp(23px,2.5vw,32px); letter-spacing:-.04em; margin:0 0 14px; }
.journey__row p { max-width:400px; margin:0; color:#6b8074; font-size:15px; line-height:1.9; }
.journey__aside { align-self:center; justify-self:end; color:#8aa598; font-size:12px; letter-spacing:.08em; }
.soundwave { display:flex; align-items:center; gap:5px; height:45px; margin-bottom:10px; }
.soundwave i { width:3px; height:14px; border-radius:4px; background:#ea815e; }
.soundwave i:nth-child(2), .soundwave i:nth-child(6) { height:25px; }.soundwave i:nth-child(3), .soundwave i:nth-child(5) { height:35px; }.soundwave i:nth-child(4) { height:45px; }
.journey__question { font-family:Georgia,serif; color:#dd805f; font-size:22px; letter-spacing:0; }.journey__question span { display:block; margin-top:12px; font-family:system-ui,sans-serif; font-size:11px; color:#8aa598; }
.journey__route { display:flex; align-items:center; gap:8px; }.journey__route i { display:block; width:27px; border-top:1px dashed #df987b; }
.essentials { background:#e1eae0; color:#193d35; padding:115px 0; }.essentials__inner { display:grid; grid-template-columns:1fr 1fr; gap:12%; }.essentials h2 { font-size:clamp(36px,4vw,58px); margin:42px 0 0; }.essentials h2 em { color:#779988; }.essentials__notes p { display:grid; grid-template-columns:90px 1fr; gap:20px; margin:0; padding:22px 0; border-bottom:1px solid #bdcfc0; font-size:14px; line-height:1.8; }.essentials__notes p:first-child { border-top:1px solid #bdcfc0; }.essentials__notes strong { color:#315749; }.essentials__notes span { color:#627d6e; }
.farewell { background:#173e34; color:#f7f5ed; overflow:hidden; }.farewell__inner { position:relative; padding-top:110px; padding-bottom:120px; }.farewell h2 { margin:0 0 20px; }.farewell p { color:#b5c9bc; font-size:15px; }.farewell__link { display:inline-flex; gap:55px; align-items:center; margin-top:25px; padding:15px 0; border-bottom:1px solid #9db8aa; color:#fff; font-size:14px; text-decoration:none; }.farewell__link span { font-size:22px; }.farewell__bird { position:absolute; right:6%; top:50%; transform:translateY(-50%) rotate(-15deg); font-size:clamp(160px,25vw,340px); line-height:1; color:#80aa91; opacity:.35; }
@media (max-width:700px) { .journey { padding:80px 0; }.journey__list { margin-top:70px; }.journey__row { grid-template-columns:1fr; gap:18px; padding:27px 0 33px; }.journey__aside { justify-self:start; margin-top:3px; }.soundwave { height:30px; }.soundwave i:nth-child(4) { height:30px; }.essentials { padding:80px 0; }.essentials__inner { grid-template-columns:1fr; gap:48px; }.essentials h2 { margin-top:28px; }.essentials__notes p { grid-template-columns:78px 1fr; gap:12px; }.farewell__inner { padding-top:80px; padding-bottom:90px; }.farewell__bird { right:-8%; top:35%; opacity:.17; }.farewell h2,.farewell p,.farewell__link { position:relative; z-index:1; } }

/* The speech bubble and map pin share the phone screen's coordinate system. */
.phone__note { top: 26%; left: calc(38% + 20px); }
.bubble {
  top: calc(9px + (100% - 18px) * .26 + 5.5px);
  left: calc(9px + (100% - 18px) * .38 + 5.5px);
  width: min(208px, 38vw);
  transform: translate(calc(-100% - 8px), calc(-100% + 27px));
}
@media (max-width: 720px) {
  .bubble { top: calc(9px + (100% - 18px) * .26 + 5.5px); padding: 12px 14px; }
}

/* Keep the companion beside the phone in narrow and landscape layouts. */
@media (max-width: 1000px) {
  .hero__art { padding-bottom: 24px; }
  .hero__pigeon { left: 0; bottom: 24px; }
}

/* Separate the animated pigeon from the dark controls behind it. */
.hero__pigeon .pigeon-stage {
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35));
}

/* Light treatment for the phone's companion controls. */
.phone__island { background: rgba(248, 252, 247, .72); border-color: rgba(16, 74, 69, .1); box-shadow: 0 -6px 24px rgba(7, 31, 41, .16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.phone__islandcopy b { color: #155b53; }
.phone__islandcopy span { color: #58756f; }
.phone__ask { color: #fff; border-color: #176e62; background: #176e62; }
.phone__stop { color: #28695e; border-color: rgba(40, 105, 94, .25); background: #eef6f2; }