:root {
  --ink: #0d2b36;
  --muted: #5d737b;
  --sea: #007f91;
  --sea-dark: #056678;
  --foam: #eef6f7;
  --paper: #ffffff;
  --sand: #f6f3ec;
  --line: #d7e4e7;
  --warning: #fff3c9;
  --warning-ink: #6c5300;
  --green: #218a69;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  background: linear-gradient(180deg, #f8fbfb 0%, var(--foam) 48%, #e8f2f4 100%);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid rgba(0, 127, 145, .28); outline-offset: 3px; }

.site-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.topbar { height: 82px; display: flex; align-items: center; justify-content: space-between; }
.brand { min-height: 44px; display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 750; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--sea); color: white; font-size: 25px; line-height: 1; }
.working-title { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }

.hero { position: relative; padding: 70px 0 42px; }
.hero::before { content: ""; position: absolute; z-index: -1; right: 0; top: 0; width: 470px; max-width: 100%; height: 470px; border-radius: 50%; background: radial-gradient(circle, rgba(0,127,145,.12), rgba(0,127,145,0) 68%); }
.hero-copy { max-width: 760px; }
.eyebrow, .section-heading p, .schedule-heading p { margin: 0 0 10px; color: var(--sea-dark); font-size: 13px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(50px, 7.5vw, 94px); line-height: .95; letter-spacing: -.065em; font-weight: 760; }
.hero-intro { max-width: 560px; margin: 26px 0 0; color: var(--muted); font-size: clamp(17px, 2vw, 21px); line-height: 1.55; }

.route-card { width: min(760px, 100%); margin-top: 38px; padding: 12px; display: grid; grid-template-columns: 1fr 52px 1fr; align-items: end; gap: 10px; border: 1px solid rgba(13,43,54,.08); border-radius: 20px; background: rgba(255,255,255,.88); box-shadow: 0 18px 50px rgba(20,65,78,.10); backdrop-filter: blur(18px); }
.route-field { display: grid; gap: 6px; padding: 8px 12px; }
.route-field label { color: var(--muted); font-size: 12px; font-weight: 650; }
.route-field select { width: 100%; min-height: 44px; border: 0; background: transparent; color: var(--ink); font-size: 20px; font-weight: 720; cursor: pointer; }
.swap-button { width: 46px; height: 46px; min-width: 44px; min-height: 44px; border: 0; border-radius: 50%; background: var(--ink); color: white; font-size: 22px; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.swap-button:hover { transform: rotate(180deg); background: var(--sea); }
.demo-warning { width: min(760px, 100%); margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: var(--warning); color: var(--warning-ink); font-size: 13px; line-height: 1.45; }

.departure-layout { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(320px, .84fr); gap: 20px; padding: 36px 0 22px; }
.next-card, .following-card { border-radius: 28px; }
.next-card { padding: clamp(26px, 4vw, 48px); background: var(--ink); color: white; box-shadow: 0 24px 70px rgba(13,43,54,.20); }
.next-card-topline { display: flex; justify-content: space-between; color: #b7c9cf; font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.next-time-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 30px; }
.next-time-row > time { font-size: clamp(70px, 11vw, 132px); line-height: .82; font-weight: 730; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.countdown { min-width: 100px; padding-bottom: 4px; text-align: right; color: #7fe0e8; }
.countdown strong { display: block; font-size: clamp(34px, 5vw, 56px); line-height: .9; font-weight: 720; }
.countdown span { display: block; margin-top: 6px; font-size: 13px; }
.arrival { margin: 20px 0 30px; color: #b7c9cf; }
.arrival strong { color: white; }
.route-line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; font-weight: 700; }
.route-line i { display: block; height: 1px; background: repeating-linear-gradient(90deg, #77929b 0 10px, transparent 10px 16px); }
.next-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 38px; }
.next-actions button { min-height: 48px; padding: 0 18px; border: 1px solid white; border-radius: 13px; background: white; color: var(--ink); font-weight: 720; cursor: pointer; }
.next-actions .secondary-action { background: transparent; color: white; border-color: #52707a; }

.following-card { padding: clamp(24px, 3vw, 38px); background: var(--paper); border: 1px solid rgba(13,43,54,.07); box-shadow: 0 18px 50px rgba(20,65,78,.08); }
.section-heading, .schedule-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.section-heading p, .schedule-heading p { margin-bottom: 5px; }
.section-heading h2, .schedule-heading h2 { margin: 0; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -.035em; }
.section-heading > span, .schedule-heading > span { color: var(--muted); font-size: 12px; text-align: right; }
.following-list { list-style: none; margin: 28px 0 0; padding: 0; }
.following-list li { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); }
.following-list li div { display: flex; align-items: baseline; gap: 14px; }
.following-list time { font-size: 30px; font-weight: 740; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.following-list span { color: var(--muted); font-size: 13px; }
.following-list strong { padding: 7px 10px; border-radius: 999px; background: var(--foam); color: var(--sea-dark); font-size: 13px; white-space: nowrap; }

.schedule-section { margin: 20px 0; padding: clamp(26px, 4vw, 48px); border-radius: 28px; background: var(--paper); box-shadow: 0 18px 50px rgba(20,65,78,.08); }
.schedule-grid { display: grid; grid-template-columns: repeat(8, minmax(64px, 1fr)); gap: 9px; margin-top: 28px; }
.schedule-grid time { padding: 12px 6px; border: 1px solid var(--line); border-radius: 11px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.schedule-grid time.past { color: #9aa9ae; background: #f5f7f7; }
.schedule-grid time.cancelled { color: #a53b32; text-decoration: line-through; opacity: .72; }
.schedule-grid time.active { border-color: var(--sea); background: var(--sea); color: white; box-shadow: 0 7px 18px rgba(0,127,145,.22); }

.trust-strip { margin: 20px 0 40px; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.68); }
.trust-strip > div { display: flex; align-items: flex-start; gap: 12px; }
.trust-strip p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.trust-strip strong { color: var(--ink); }
.status-dot { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: #d3981f; box-shadow: 0 0 0 5px rgba(211,152,31,.12); }
.trust-strip[data-state="fresh"] .status-dot { background: var(--green); box-shadow: 0 0 0 5px rgba(33,138,105,.12); }
.trust-strip[data-state="stale"] .status-dot { background: #b54c3d; box-shadow: 0 0 0 5px rgba(181,76,61,.12); }
.trust-strip a { min-height: 44px; display: inline-flex; align-items: center; color: var(--sea-dark); font-weight: 700; text-decoration: none; white-space: nowrap; }
.disclosure { margin: 20px 0 40px; padding: clamp(26px, 4vw, 44px); border: 1px solid var(--line); border-radius: 24px; background: var(--sand); }
.disclosure h2 { max-width: 720px; margin: 0; font-size: clamp(26px, 3.5vw, 42px); line-height: 1.05; letter-spacing: -.04em; }
.disclosure-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 32px; }
.disclosure-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.disclosure-grid strong { color: var(--ink); }
.disclosure-grid a { color: var(--sea-dark); font-weight: 700; }
footer { min-height: 90px; display: flex; justify-content: space-between; gap: 20px; padding: 28px 0; border-top: 1px solid rgba(13,43,54,.12); color: var(--muted); font-size: 12px; }
footer p { margin: 0; }

@media (max-width: 850px) {
  .hero { padding-top: 42px; }
  .departure-layout { grid-template-columns: 1fr; }
  .disclosure-grid { grid-template-columns: 1fr; }
  .schedule-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 560px) {
  .site-shell { width: min(100% - 24px, 1180px); }
  .topbar { height: 68px; }
  .hero { padding: 36px 0 24px; }
  h1 { font-size: clamp(46px, 15vw, 68px); }
  .hero-intro { margin-top: 18px; }
  .route-card { grid-template-columns: 1fr 44px; gap: 6px; border-radius: 17px; }
  .route-field:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .swap-button { grid-column: 2; grid-row: 1; width: 44px; height: 44px; }
  .next-card, .following-card, .schedule-section { border-radius: 20px; }
  .next-card-topline { gap: 12px; }
  .next-time-row { align-items: fl׎6Ó[h‘é춻§q«^vW‡EF–ÖRçFW‡D6öçFVçBÒæW‡CòæFW'GW&RÇÂ"ÒÓ¢ÒÒ#°¢VÆVÖVçG2æ6÷VçFF÷vâçFW‡D6öçFVçBÒæW‡BòÖF‚æÖ‚ƒÂÖF‚æ6V–†æW‡Bæ֖çWFTödF’Òæ÷ræ֖çWFW2’’¢"ÒÒ#°¢VÆVÖVçG2æ'&—fÂçFW‡D6öçFVçBÒæW‡Bò'&—fÄf÷"†æW‡BÂ&÷WFR’¢"ÒÓ¢ÒÒ#°¢VÆVÖVçG2ç&÷WFTg&öÒçFW‡D6öçFVçBÒ&÷WFRæg&öÒææÖS°¢VÆVÖVçG2ç&÷WFUFòçFW‡D6öçFVçBÒ&÷WFRçFòææÖS°¢VÆVÖVçG2æF”Æ&VÂçFW‡D6öçFVçBÒæWr–çFÂäFFUF–ÖTf÷&ÖB‚'G"ÕE""²F–ÖU¦öæS¢$WW&÷Rô—7Fæ'VÂ"ÂvVV¶F“¢&Æöær"ÂF“¢&çVÖW&–2"ÂÖöçFƒ¢&Æöær"Ғæf÷&ÖB†æWrFFR‚’“°¢VÆVÖVçG2æföÆÆ÷v–ærç&WÆ6T6†–ÆG&Vâ‚ââææW‡DFFæ—FV×2ç6Ɩ6Rƒ’æÖ‚†—FVҒÓâ°¢6öç7BƒÒFö7VÖVçBæ7&VFTVÆVÖVçB‚&ƒ"“°¢6öç7B–æfòÒFö7VÖVçBæ7&VFTVÆVÖVçB‚&F—b"“°¢6öç7BF–ÖRÒFö7VÖVçBæ7&VFTVÆVÖVçB‚'F–ÖR"“²F–ÖRçFW‡D6öçFVçBÒ—FVÒæFW'GW&S°¢6öç7BF—4†VBÒÖF‚æfÆö÷"†—FVÒæ֖çWFTödF’òCC“°¢6öç7B'&—fÂÒFö7VÖVçBæ7&VFTVÆVÖVçB‚'7â"“²'&—fÂçFW‡D6öçFVçBÒG¶'&—fÄf÷"†—FVÒÂ&÷WFR—Òf,KYòG¶F—4†VBÓÓÒò"+r–,Kâ"¢F—4†VBâò+rG¶F—4†VGÒ|;Æâ6öç&¢"'Ö°¢6öç7B&VÖ–æ–ærÒFö7VÖVçBæ7&VFTVÆVÖVçB‚'7G&öær"“²&VÖ–æ–ærçFW‡D6öçFVçBÒG´ÖF‚æÖ‚ƒÂÖF‚æ6V–†—FVÒæ֖çWFTödF’Òæ÷ræ֖çWFW2’—ÒF¶°¢–æfòæVæB‡F–ÖRÂ'&—f“²ƒæVæB†–æfòÂ&VÖ–æ–ær“²&WGW&âƓ°¢Ғ“°¢VÆVÖVçG2ç66†VGVÆU&÷WFRçFW‡D6öçFVçBÒG·&÷WFRæg&öÒææÖWÒ(i"G·&÷WFRçFòææÖWÒ+rG¶æW‡DFFçFöF’æF“òæÆ&VÂÇÂ%&öw&Ò'Ö°¢VÆVÖVçG2ç66†VGVÆTw&–Bç&WÆ6T6†–ÆG&Vâ‚ââææW‡DFFçFöF’æ—FV×2æÖ‚†—FVҒÓâ°¢6öç7BF–ÖRÒFö7VÖVçBæ7&VFTVÆVÖVçB‚'F–ÖR"“²F–ÖRçFW‡D6öçFVçBÒ—FVÒæFW'GW&S°¢6öç7BfÇVRÒF–ÖUFô֖çWFW2†—FVÒæFW'GW&R“°¢–b‡fÇVRÂæ÷ræ֖çWFW2’F–ÖRæ6Æ74Ɨ7BæFB‚'7B"“°¢–b†—FVÒæ6æ6VÆÆVB’²F–ÖRæ6Æ74Ɨ7BæFB‚&6æ6VÆÆVB"“²F–ÖRçF—FÆRÒ—FVÒææ÷FRÇÂ,KFÂ#²Т–b†æW‡Bbb—FVÒæFW'GW&RÓÓÒæW‡BæFW'GW&RbbæW‡Bæ֖çWFTödF’ÂCC’F–ÖRæ6Æ74Ɨ7BæFB‚&7F—fR"“°¢&WGW&âF–ÖS°¢Ғ“°¢&VæFW$FF7FGW2‚“°§Ð ¦VÆVÖVçG2æ÷&–v–âæFDWfVçDƗ7FVæW"‚&6†ævR"‚’Óâ°¢6öç7Bf—'7BÒ&÷WFW2æf–æB‚‡&÷WFR’Óâ&÷WFRæg&öÒææÖRÓÓÒVÆVÖVçG2æ÷&–v–âçfÇVR’ÇÂ&÷WFW5³Ó°¢6†ö÷6U&÷WFR‡&÷WFT–B†f—'7B’“°§Ò“°¦VÆVÖVçG2æFW7F–æF–öâæFDWfVçDƗ7FVæW"‚&6†ævR"‚’Óâ6†ö÷6U&÷WFR†G¶vWE&÷WFR‚’æg&öÒææÖW×ÂG¶VÆVÖVçG2æFW7F–æF–öâçfÇVWÖ’“°¦VÆVÖVçG2ç7væFDWfVçDƗ7FVæW"‚&6Ɩ6²"‚’Óâ°¢6öç7B&÷WFRÒvWE&÷WFR‚“°¢6öç7B&WfW'6RÒ&÷WFW2æf–æB‚†—FVҒÓâ—FVÒæg&öÒææÖRÓÓÒ&÷WFRçFòææÖRbb—FVÒçFòææÖRÓÓÒ&÷WFRæg&öÒææÖR“°¢–b‡&WfW'6R’6†ö÷6U&÷WFR‡&÷WFT–B‡&WfW'6R’“°§Ò“°¦VÆVÖVçG2çFövvÆRæFDWfVçDƗ7FVæW"‚&6Ɩ6²"‚’Óâ°¢6öç7B÷Væ–ærÒVÆVÖVçG2ç66†VGVÆR憖FFVã°¢VÆVÖVçG2ç66†VGVÆR憖FFVâÒ÷Væ–æs°¢VÆVÖVçG2çFövvÆRçFW‡D6öçFVçBÒ÷Væ–ærò%6FÆW&’¶B"¢%L;ÆÒ6FÆW"#°¢VÆVÖVçG2çFövvÆRç6WDGG&–'WFR‚&&–ÖW‡æFVB"Â7G&–ær†÷Væ–ær’“°¢–b†÷Væ–ær’VÆVÖVçG2ç66†VGVÆRç67&öÆĖçFõf–Wr‡²&V†f–÷#¢'6Öö÷F‚"Â&Æö6³¢'7F'B"ғ°§Ò“°¦VÆVÖVçG2ç6fRæFDWfVçDƗ7FVæW"‚&6Ɩ6²"‚’Óâ°¢Æö6Å7F÷&vRç6WD—FV҂&—¦Ö—"×fW"×&÷WFR"Â&÷WFT¶W’“°¢VÆVÖVçG2ç6fRçFW‡D6öçFVçBÒ%&÷F¶–FVF–ÆF’)É2#°¢6WEF–ÖV÷WB‚‚’Óâ²VÆVÖVçG2ç6fRçFW‡D6öçFVçBÒ%&÷FÜK¶–FWB#²ÒÂ##“°§Ò“° ¦7–æ2gVæ7F–öâ–æ—F–Ɨ¦R‚’°¢G'’°¢6öç7B&W7öç6RÒv—BfWF6‚‚"öFF÷F–ÖWF&ÆRæ§6öâ"²66†S¢&æòÖ66†R"ғ°¢–b‚&W7öç6Ræö²’F‡&÷ræWrW'&÷"†fW&’F÷7–<Kœ;ƶÆVæVÖVF“¢G·&W7öç6Rç7FGW7Ö“°¢6öç7BÆöFVBÒv—B&W7öç6Ræ§6öₓ°¢–b‚'&’æ—4'&’†ÆöFVBç&÷WFW2’ÇÂÆöFVBç&÷WFW2æÆVæwF‚’F‡&÷ræWrW'&÷"‚%fW&’F÷7–<KæF&÷F–ö²"“°¢FF6WBÒÆöFVC°¢&÷WFW2ÒÆöFVBç&÷WFW3°¢Ò6F6‚†W'&÷"’°¢6öç6öÆRçv&â†W'&÷"“°¢VÆVÖVçG2ç7FGW46÷’çFW‡D6öçFVçBÒ%fW&’F÷7–<Kœ;ƶÆVæVÖVF“²<KìK&ÌK;g&æV²&öw&Ò|;g7FW&–Æ—–÷"â#°¢Т–b‚&÷WFW2ç6öÖR‚‡&÷WFR’Óâ&÷WFT–B‡&÷WFR’ÓÓÒ&÷WFT¶W’’’&÷WFT¶W’Ò&÷WFT–B‡&÷WFW5³ғ°¢&VæFW"‚“°¢6WD–çFW'f‡&VæFW"ÂU󓰧Р¦–æ—F–Ɨ¦R‚“°