:root { --bg-primary: #ffffff; --bg-secondary: #f3f6f9; --bg-deep: #0c1524; --bg-deep-2: #132038; --surface: #ffffff; --surface-elevated: #ffffff; --surface-muted: #e9eef4; --text-primary: #0c1524; --text-secondary: #4b5768; --text-inverse: #ffffff; --text-inverse-dim: #b6c2d2; --text-on-accent: #ffffff; --accent: #0a6c8f; --accent-hover: #07536e; --accent-soft: #e4f1f6; --accent-ring: rgba(10, 108, 143, 0.35); --taxi-yellow: #ffda3e; --taxi-yellow-hover: #f4c624; --success: #117f42; --success-hover: #0b6334; --success-soft: #e6f5ec; --warning: #8a5a00; --warning-soft: #fff6e2; --border: #dbe2ec; --border-strong: #b9c4d4; --border-inverse: rgba(255, 255, 255, 0.16); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(12, 21, 36, 0.06), 0 1px 3px rgba(12, 21, 36, 0.04); --shadow-md: 0 4px 12px rgba(12, 21, 36, 0.08), 0 12px 28px rgba(12, 21, 36, 0.06); --shadow-lg: 0 18px 44px rgba(12, 21, 36, 0.16); --container: 1200px; --container-narrow: 820px; --gutter: 1.25rem; --section-y: clamp(2.75rem, 6vw, 5rem); --header-h: 68px; --sticky-cta-h: 69px; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem); --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.06rem); --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem); --step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); --step-3: clamp(1.65rem, 1.35rem + 1.4vw, 2.4rem); --step-4: clamp(2rem, 1.5rem + 2.4vw, 3.4rem); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 180ms; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); } body { font-family: var(--font); font-size: var(--step-0); line-height: 1.65; color: var(--text-primary); background: var(--bg-primary); padding-bottom: calc(var(--sticky-cta-h) + env(safe-area-inset-bottom, 0px)); } @media (min-width: 861px) { body { padding-bottom: 0; } } img, svg, video { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } ul, ol { padding: 0; list-style: none; } a { color: var(--accent); text-underline-offset: 3px; } table { border-collapse: collapse; width: 100%; } h1, h2, h3, h4 { line-height: 1.18; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-1); } h4 { font-size: var(--step-0); } p { text-wrap: pretty; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--text-on-accent); padding: 0.75rem 1.1rem; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; } .skip-link:focus { left: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--section-y); } .section--alt { background: var(--bg-secondary); } .section--deep { background: var(--bg-deep); color: var(--text-inverse); } .section--deep h2, .section--deep h3 { color: var(--text-inverse); } .section--deep .lede, .section--deep p { color: var(--text-inverse-dim); } .stack > * + * { margin-top: 1rem; } .lede { font-size: var(--step-1); color: var(--text-secondary); max-width: 62ch; } .section-head { max-width: 68ch; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .section-head .eyebrow { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; } .section--deep .section-head .eyebrow { color: #7fd0e8; } .grid { display: grid; gap: 1rem; } @media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.7rem 1.25rem; border: 1px solid transparent; border-radius: var(--radius-pill); font-weight: 650; font-size: var(--step-0); text-decoration: none; cursor: pointer; text-align: center; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease); } .btn:active { transform: translateY(1px); } .btn svg { width: 1.15em; height: 1.15em; flex: none; } .btn--call { background: var(--accent); color: var(--text-on-accent); } .btn--call:hover { background: var(--accent-hover); } .btn--wa { background: var(--success); color: #fff; } .btn--wa:hover { background: var(--success-hover); } .btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border-strong); } .btn--ghost:hover { background: var(--bg-secondary); border-color: var(--text-secondary); } .section--deep .btn--ghost { color: var(--text-inverse); border-color: var(--border-inverse); } .section--deep .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); } .btn--lg { min-height: 54px; padding-inline: 1.6rem; font-size: var(--step-1); } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; } .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border); } @supports not (backdrop-filter: blur(2px)) { .site-header { background: var(--bg-primary); } } .header-bar { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); } .brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--text-primary); } .brand__mark { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: linear-gradient(140deg, var(--accent) 0%, var(--bg-deep) 100%); color: #fff; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.02em; } .brand__name { font-weight: 750; font-size: 1.02rem; letter-spacing: -0.01em; line-height: 1.2; } .brand__tag { display: block; font-size: 0.72rem; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.02em; } .nav-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.4rem 0.9rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-weight: 600; cursor: pointer; } .nav-toggle__bars { width: 18px; height: 2px; background: currentColor; position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; } .nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; } .site-nav { display: none; } @media (min-width: 861px) { .nav-toggle { display: none; } .site-nav { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; padding-right: 0.5rem; } .site-nav > li { position: relative; } .site-nav a:not(.btn) { display: flex; align-items: center; min-height: 44px; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); color: var(--text-primary); text-decoration: none; font-weight: 600; font-size: 0.95rem; } .site-nav a:not(.btn):hover { background: var(--bg-secondary); } .site-nav a[aria-current="page"] { color: var(--accent); } .header-actions { display: flex; gap: 0.5rem; } } .header-actions { display: none; } .has-menu { position: relative; } .menu-panel { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 480px; padding: 1rem; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: none; z-index: 60; } .has-menu:hover .menu-panel, .has-menu:focus-within .menu-panel { display: block; } .menu-panel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem 0.75rem; } .menu-panel__title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin: 0.75rem 0 0.35rem; } .menu-panel a { display: block; padding: 0.35rem 0.5rem; border-radius: var(--radius-sm); color: var(--text-primary); text-decoration: none; font-size: 0.92rem; } .menu-panel a:hover { background: var(--accent-soft); color: var(--accent-hover); } .menu-panel__all { display: block; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); font-weight: 650; } @media (max-width: 860px) { .site-nav[data-open="true"] { display: block; position: absolute; left: 0; right: 0; top: var(--header-h); background: var(--surface-elevated); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 0.75rem var(--gutter) 1.25rem; max-height: calc(100dvh - var(--header-h)); overflow-y: auto; } .site-nav a:not(.btn) { display: block; padding: 0.8rem 0.5rem; border-bottom: 1px solid var(--border); color: var(--text-primary); text-decoration: none; font-weight: 600; min-height: 48px; } .site-nav a[aria-current="page"] { color: var(--accent); } .menu-panel { position: static; transform: none; min-width: 0; box-shadow: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 0.5rem 0; } .has-menu:hover .menu-panel, .has-menu:focus-within .menu-panel { display: none; } .has-menu[data-open="true"] .menu-panel { display: block; } .menu-panel__grid { grid-template-columns: repeat(2, 1fr); } } .hero { background: radial-gradient(1100px 480px at 78% -10%, rgba(10, 108, 143, 0.32), transparent 62%), linear-gradient(165deg, var(--bg-deep) 0%, var(--bg-deep-2) 100%); color: var(--text-inverse); padding-block: clamp(2.5rem, 7vw, 5rem); position: relative; overflow: hidden; } .hero::after { content: ""; position: absolute; inset: auto 0 -40% 0; height: 70%; background: radial-gradient(60% 100% at 50% 100%, rgba(10, 108, 143, 0.18), transparent 70%); pointer-events: none; } .hero__inner { position: relative; z-index: 1; display: grid; gap: 2rem; } @media (min-width: 960px) { .hero__inner { grid-template-columns: 1.05fr 0.95fr; align-items: start; gap: 3rem; } } .hero h1 { color: var(--text-inverse); margin-bottom: 0.75rem; } .hero__lede { font-size: var(--step-1); color: var(--text-inverse-dim); max-width: 54ch; margin-bottom: 1.5rem; } .hero__area { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; padding: 0.35rem 0.85rem; background: rgba(255, 255, 255, 0.1); border: 1px solid var(--border-inverse); border-radius: var(--radius-pill); font-size: var(--step--1); color: var(--text-inverse); } .hero__dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex: none; } .hero__quick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; } .hero__quick a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--step--1); padding: 0.35rem 1rem; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border-inverse); color: var(--text-inverse); text-decoration: none; } .hero__quick a:hover { background: rgba(255, 255, 255, 0.16); } .routebox { background: var(--surface-elevated); color: var(--text-primary); border-radius: var(--radius-lg); padding: clamp(1.1rem, 2.5vw, 1.75rem); box-shadow: var(--shadow-lg); border: 1px solid var(--border); } .routebox__title { font-size: var(--step-1); margin-bottom: 0.25rem; } .routebox__hint { font-size: var(--step--1); color: var(--text-secondary); margin-bottom: 1.1rem; } .field { display: block; margin-bottom: 0.85rem; } .field__label { display: block; font-size: var(--step--1); font-weight: 650; color: var(--text-secondary); margin-bottom: 0.3rem; } .field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 0.65rem 0.85rem; background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } .field input::placeholder { color: #6b7788; } .field input:focus-visible, .field select:focus-visible { border-color: var(--accent); } .field-row { display: grid; gap: 0.85rem; } @media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } } .routebox__note { margin-top: 0.9rem; padding: 0.7rem 0.85rem; background: var(--accent-soft); border-radius: var(--radius-sm); font-size: var(--step--1); color: var(--accent-hover); } .routebox__warn { margin-top: 0.9rem; padding: 0.7rem 0.85rem; background: var(--warning-soft); border-left: 3px solid var(--warning); border-radius: var(--radius-sm); font-size: var(--step--1); color: var(--warning); } .routebox__warn code { background: rgba(138, 90, 0, 0.12); padding: 0.1rem 0.3rem; border-radius: 3px; } .trust { display: grid; gap: 0.75rem; } @media (min-width: 640px) { .trust { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .trust { grid-template-columns: repeat(4, 1fr); } } .trust__item { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); } .trust__icon { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); } .trust__t { font-weight: 650; font-size: var(--step--1); } .trust__d { font-size: var(--step--1); color: var(--text-secondary); } .card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.15rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } a.card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); } .card__t { font-weight: 700; font-size: var(--step-1); } .card__d { font-size: var(--step--1); color: var(--text-secondary); } .card__meta { margin-top: auto; padding-top: 0.5rem; font-size: var(--step--1); color: var(--accent); font-weight: 600; } a.card__meta { display: inline-flex; align-items: center; min-height: 44px; } .card--dark { background: rgba(255, 255, 255, 0.06); border-color: var(--border-inverse); color: var(--text-inverse); } .card--dark .card__d { color: var(--text-inverse-dim); } a.card--dark:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.1); } .card--dark .card__meta { color: #7fd0e8; } .card__badge { align-self: flex-start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); } .filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; align-items: center; } .filter__label { font-size: var(--step--1); font-weight: 650; color: var(--text-secondary); } .filter__input { min-height: 44px; padding: 0.5rem 0.85rem; min-width: 220px; flex: 1 1 220px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); } .filter__group { display: flex; flex-wrap: wrap; gap: 0.35rem; } .filter__chip { min-height: 44px; padding: 0.35rem 0.9rem; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-primary); font-weight: 600; font-size: var(--step--1); cursor: pointer; } .filter__chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } .district-group + .district-group { margin-top: 2rem; } .district-group__head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; padding-bottom: 0.6rem; margin-bottom: 1rem; border-bottom: 2px solid var(--border); } .district-group__head h2 { font-size: var(--step-2); } .district-grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); } .district-grid a { display: flex; flex-direction: column; gap: 0.1rem; min-height: 44px; padding: 0.6rem 0.75rem; text-decoration: none; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .district-grid a:hover { border-color: var(--accent); background: var(--accent-soft); } .district-grid small { color: var(--text-secondary); font-size: 0.74rem; } .district-grid a[data-hidden="true"] { display: none; } .district-grid__empty { display: none; } .district-grid__empty[data-shown="true"] { display: block; color: var(--text-secondary); } .facts { display: grid; gap: 0.1rem; } @media (min-width: 700px) { .facts { grid-template-columns: max-content 1fr; gap: 0.6rem 1.5rem; } } .facts dt { font-weight: 650; color: var(--text-secondary); font-size: var(--step--1); } .facts dd { margin: 0; } .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0.35rem 0.9rem; border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--text-primary); font-size: var(--step--1); text-decoration: none; } a.chip:hover { background: var(--accent-soft); color: var(--accent-hover); } .faq-list { display: grid; gap: 0.6rem; } .faq-list details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); } .section--deep .faq-list details { background: rgba(255, 255, 255, 0.06); border-color: var(--border-inverse); } .faq-list summary { cursor: pointer; padding: 0.95rem 1.1rem; font-weight: 650; min-height: 48px; display: flex; align-items: center; gap: 0.75rem; list-style: none; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; line-height: 1; color: var(--accent); flex: none; } .faq-list details[open] summary::after { content: "\2212"; } .faq-list details[open] summary { border-bottom: 1px solid var(--border); } .faq-list .faq-list__a { padding: 0.9rem 1.1rem 1.1rem; color: var(--text-secondary); } .section--deep .faq-list .faq-list__a { color: var(--text-inverse-dim); } .steps { counter-reset: step; display: grid; gap: 1rem; } @media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); } } .step { padding: 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); } .step__n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--text-on-accent); font-weight: 700; font-size: 0.9rem; margin-bottom: 0.6rem; } .step__t { font-weight: 650; margin-bottom: 0.2rem; } .step__d { font-size: var(--step--1); color: var(--text-secondary); } .cta-panel { background: linear-gradient(150deg, var(--accent) 0%, var(--bg-deep) 92%); color: var(--text-inverse); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.75rem); } .cta-panel h2 { color: var(--text-inverse); } .cta-panel p { color: var(--text-inverse-dim); max-width: 56ch; } .cta-panel .btn--ghost { color: var(--text-inverse); border-color: rgba(255, 255, 255, 0.45); } .cta-panel .btn--ghost:hover { background: rgba(255, 255, 255, 0.14); } .breadcrumb { padding-block: 1rem 0; font-size: var(--step--1); } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .breadcrumb li { display: flex; gap: 0.4rem; align-items: center; color: var(--text-secondary); } .breadcrumb li + li::before { content: "/"; color: var(--border-strong); } .breadcrumb a { color: var(--text-secondary); text-decoration: none; } .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.15rem; } .breadcrumb a:hover { color: var(--accent); text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--text-primary); font-weight: 600; } .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); } table { min-width: 34rem; font-size: var(--step--1); } thead th { text-align: left; padding: 0.75rem 1rem; background: var(--bg-secondary); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); border-bottom: 1px solid var(--border); } tbody td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); } tbody tr:last-child td { border-bottom: 0; } tbody td:last-child, thead th:last-child { text-align: right; font-weight: 650; } .notice { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.9rem 1rem; border-radius: var(--radius-md); background: var(--warning-soft); border-left: 4px solid var(--warning); color: #5c3d00; font-size: var(--step--1); } .notice strong { color: #4a3000; } .notice code { background: rgba(92, 61, 0, 0.1); padding: 0.1rem 0.35rem; border-radius: 3px; } .prose > * + * { margin-top: 1rem; } .prose h2 { margin-top: 2.25rem; } .prose h3 { margin-top: 1.75rem; } .prose ul { padding-left: 1.15rem; list-style: disc; } .prose ol { padding-left: 1.25rem; list-style: decimal; } .prose li + li { margin-top: 0.4rem; } .prose__placeholder { padding: 0.75rem 0.9rem; background: var(--warning-soft); border-left: 3px solid var(--warning); border-radius: var(--radius-sm); font-size: var(--step--1); color: #5c3d00; font-weight: 600; } .site-footer { background: var(--bg-deep); color: var(--text-inverse-dim); padding-block: clamp(2rem, 5vw, 3.5rem) 1.5rem; margin-top: auto; } .footer-grid { display: grid; gap: 1.75rem; } @media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } } @media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } } .site-footer h2 { font-size: var(--step-0); color: var(--text-inverse); margin-bottom: 0.6rem; } .site-footer a { color: var(--text-inverse-dim); text-decoration: none; } .site-footer a:hover { color: var(--text-inverse); text-decoration: underline; } .site-footer ul { display: grid; gap: 0.35rem; } .site-footer nav a { display: inline-block; min-height: 44px; padding-block: 10px; } .footer-brand__name { color: var(--text-inverse); font-weight: 750; font-size: 1.05rem; } .footer-brand__area { font-size: var(--step--1); margin-top: 0.35rem; } .footer-contact { display: grid; gap: 0.5rem; margin-top: 1rem; } .footer-contact a { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; min-height: 44px; } .footer-contact svg { width: 1.1em; height: 1.1em; } .footer-bottom { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border-inverse); display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; font-size: var(--step--1); } .sticky-cta { display: none; } @media (max-width: 860px) { .sticky-cta { position: fixed; inset: auto 0 0 0; z-index: 55; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.5rem var(--gutter) calc(0.5rem + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, 0.96); backdrop-filter: saturate(160%) blur(10px); border-top: 1px solid var(--border); } @supports not (backdrop-filter: blur(2px)) { .sticky-cta { background: var(--bg-primary); } } .sticky-cta .btn { min-height: 52px; padding-inline: 0.5rem; } } .lookup__row { display: grid; gap: 0.85rem; align-items: end; } @media (min-width: 720px) { .lookup__row { grid-template-columns: 1fr 1fr auto; } } .lookup__go { min-height: 48px; } .lookup__result { margin-top: 1.25rem; padding: 1.15rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); } .lookup__route { font-weight: 700; font-size: var(--step-1); } .lookup__hint { margin-top: 0.5rem; font-size: var(--step--1); color: var(--text-secondary); } .lookup__ask { margin-top: 0.85rem; } .price-answer { margin-top: 0.5rem; font-size: var(--step-2); font-weight: 750; color: var(--accent); } .price-answer--ask { color: var(--text-primary); } .price-answer--same { color: var(--text-secondary); } .price-ask { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.4rem 1.1rem; border-radius: var(--radius-pill); background: var(--success); color: #fff; font-weight: 650; text-decoration: none; white-space: nowrap; } .price-ask:hover { background: var(--success-hover); } .rowlist { margin-top: 2rem; } .rowlist__meta { font-size: var(--step--1); color: var(--text-secondary); margin-bottom: 0.75rem; } .rowlist__items { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .rowlist__items li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.95rem; background: var(--surface); min-height: 48px; } .rowlist__dest { font-weight: 600; } .rowlist__price { font-variant-numeric: tabular-nums; font-weight: 650; } .matrix-scroll { overflow: auto; max-height: 70vh; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); } .matrix-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: -1px; } .matrix { min-width: 64rem; font-size: 0.82rem; border-collapse: separate; border-spacing: 0; } .matrix caption { padding: 0.85rem 1rem; text-align: left; font-weight: 650; color: var(--text-primary); } .matrix th, .matrix td { padding: 0.5rem 0.6rem; white-space: nowrap; border-bottom: 1px solid var(--border); } .matrix thead th { position: sticky; top: 0; z-index: 3; background: var(--bg-secondary); color: var(--text-secondary); font-size: 0.72rem; letter-spacing: 0.03em; text-transform: uppercase; text-align: left; border-bottom: 1px solid var(--border-strong); } .matrix tbody th { position: sticky; left: 0; z-index: 2; background: var(--bg-secondary); color: var(--text-primary); font-size: 0.78rem; text-align: left; border-right: 1px solid var(--border-strong); } .matrix thead th.matrix__corner { left: 0; z-index: 4; } .matrix__cell { text-align: right; font-variant-numeric: tabular-nums; content-visibility: auto; contain-intrinsic-size: auto 2.2em; } .matrix__cell--exact { color: var(--text-primary); font-weight: 650; } .matrix__cell--derived { color: var(--accent); font-weight: 650; } .matrix__cell--derived abbr { text-decoration: none; cursor: help; } .matrix__cell--ask { text-align: center; } .matrix__cell--ask a { display: flex; align-items: center; justify-content: center; min-height: 24px; min-width: 44px; padding: 0.15rem 0.35rem; color: var(--success); font-weight: 650; text-decoration: none; } .matrix__cell--ask a:hover { text-decoration: underline; } .matrix__cell--same { color: var(--text-secondary); text-align: center; } .matrix__note { margin-top: 0.75rem; font-size: var(--step--1); color: var(--text-secondary); } .matrix__stats { font-size: var(--step--1); color: var(--text-secondary); margin-bottom: 0.75rem; } .card__price { font-size: var(--step-1); font-weight: 750; color: var(--accent); font-variant-numeric: tabular-nums; } .card__meta a { display: inline-flex; align-items: center; min-height: 44px; } .card__price--ask { color: var(--text-primary); } @media (max-width: 640px) { .matrix-scroll { max-height: 60vh; } .matrix { min-width: 56rem; } .matrix caption { font-size: var(--step--1); } } .notfound { padding-block: clamp(3rem, 8vw, 6rem); text-align: center; } .notfound h1 { margin-bottom: 0.75rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media print { .site-header, .sticky-cta, .routebox, .btn { display: none !important; } body { padding-bottom: 0; color: #000; background: #fff; } .section { padding-block: 1rem; } } .u-pt-0 { padding-top: 0; } .u-mt-0 { margin-top: 0; } .u-mt-025 { margin-top: .25rem; } .u-mt-035 { margin-top: .35rem; } .u-mt-05 { margin-top: .5rem; } .u-mt-075 { margin-top: .75rem; } .u-mt-1 { margin-top: 1rem; } .u-mt-125 { margin-top: 1.25rem; } .u-mt-15 { margin-top: 1.5rem; } .u-mt-175 { margin-top: 1.75rem; } .u-mt-2 { margin-top: 2rem; } .u-gap-05 { gap: .5rem; } .u-gap-06 { gap: .6rem; } .u-gap-075 { gap: .75rem; } .u-center { justify-content: center; } .u-small { font-size: var(--step--1); } .u-muted { color: var(--text-secondary); } :root{--bg-secondary:#f4fbfe;--bg-deep:#eaf8fd;--bg-deep-2:#e6f5fb;--text-primary:#092f50;--text-secondary:#49617a;--text-inverse:#092f50;--text-inverse-dim:#49617a;--accent:#00728d;--accent-hover:#00617d;--accent-soft:#eaf8fd;--border:#dbeaf0;--taxi-yellow:#ffd43b;--taxi-yellow-hover:#f4c725;--whatsapp:#129447;--header-h:80px;--sticky-cta-h:72px;--section-y:clamp(1.75rem,3vw,2.75rem)} body{background:#fff;color:var(--text-primary)} h1,h2,h3{font-weight:800;letter-spacing:-.035em} .eyebrow{color:var(--accent);font-size:.78rem;font-weight:750;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.65rem} .btn{border-radius:12px;min-height:46px;font-weight:750} .btn--call,.lookup__go{background:var(--taxi-yellow);color:#092b4c;border-color:transparent} .btn--call:hover,.lookup__go:hover{background:var(--taxi-yellow-hover);color:#092b4c} .btn--ghost{background:#fff;color:var(--accent);border-color:#addbe9} .site-header{background:#fff;border-bottom:1px solid var(--border);box-shadow:none;position:relative;z-index:20} .header-bar{min-height:80px;gap:1rem} .brand__logo{width:130px;height:70px;object-fit:contain} .site-nav a{color:var(--text-primary);font-size:.86rem} .nav-toggle{color:var(--text-primary);background:#eff8fc;border-color:var(--border)} .menu-panel{background:#fff;color:var(--text-primary)} .breadcrumb{padding-block:1rem;font-size:.8rem;color:var(--text-secondary)} .hero{position:relative;background:#dff3fc;padding:0;color:var(--text-primary);overflow:visible} .hero::after{display:none} .hero__background{position:absolute;inset:0;width:100%;height:620px;object-fit:cover;object-position:center 60%} .hero::before{content:"";position:absolute;inset:0 0 auto;height:620px;background:linear-gradient(90deg,#f5fbffd9 0%,#f5fbff70 32%,transparent 58%);z-index:1} .hero__inner{display:grid;grid-template-columns:1fr;gap:20px;padding-top:38px;padding-bottom:0} .hero__copy{max-width:590px;min-height:340px} .hero h1{font-size:clamp(3rem,6.3vw,5.6rem);line-height:1;color:var(--text-primary);margin-block:12px 20px} .hero h1 span{display:block;color:var(--accent)}.hero h1 b,.visual-hero h1 b{color:var(--text-primary);font-weight:inherit} .hero__lede{color:var(--text-primary);max-width:43ch;font-size:1.1rem;line-height:1.65;margin-bottom:24px} .hero__area{color:var(--accent);background:#fff;border:1px solid var(--border);border-radius:999px;width:fit-content;font-size:.75rem} .hero__quick a{background:#fff;color:var(--text-primary);border:1px solid var(--border);min-height:44px;display:inline-flex;align-items:center} .hero__quick a:hover{background:var(--accent-soft)} .hero__secondary{display:flex;gap:12px;margin-top:14px} .hero__secondary a{min-height:44px;display:inline-flex;align-items:center;font-weight:700} .hero__trust{border-radius:18px;background:rgba(255,255,255,.95);padding:18px 24px;box-shadow:var(--shadow-sm)} .trust{grid-template-columns:repeat(4,minmax(0,1fr));margin:0} .trust__item{background:transparent;padding:0;border:0} .trust__icon{background:var(--accent-soft);color:var(--accent)} .hero__fare{margin-bottom:-32px;padding:26px 32px;background:white;border:1px solid var(--border);box-shadow:0 12px 35px #163b5614;max-width:none} .hero+.section{padding-top:72px} .fare-links{display:flex;gap:12px;margin:12px 0 20px;flex-wrap:wrap} .fare-links a{padding:9px 16px;background:var(--accent-soft);border-radius:10px;display:flex;align-items:center;gap:8px;font-size:.85rem;text-decoration:none;min-height:44px} .fare-links svg{width:20px;height:20px} .routebox__title{font-size:1.5rem;font-weight:800} .lookup__row{gap:16px;align-items:end} .lookup select{min-height:58px;border-radius:12px;background:#fff} .lookup__go{min-height:58px} .section--deep{background:#fff;color:var(--text-primary)} .section--deep h2,.section--deep h3{color:var(--text-primary)} .section--deep .lede,.section--deep p{color:var(--text-secondary)} .section--deep .section-head .eyebrow{color:var(--accent)} .section-head{max-width:760px} .card,.light-panel{border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:0 5px 20px #16456509;min-width:0} .card--dark{background:#fff;border-color:var(--border);color:var(--text-primary)} .card--dark .card__d{color:var(--text-secondary)} .card--dark .card__meta{color:var(--accent)} .card--image{overflow:hidden;padding:0;gap:0;text-decoration:none} .card--image>picture,.card--image>.coastal-photo{width:100%;margin:0} .card--image img{width:100%;height:180px;object-fit:cover} .card--image>.card__t,.card--image>.card__d,.card--image>.card__meta,.card--image>.card__badge{margin:12px 18px 0} .card--image>.card__meta{margin-bottom:18px} .card__badge{background:var(--accent-soft);color:var(--accent);width:fit-content} .coastal-photo{min-width:0;position:relative;margin:0} .coastal-photo picture,.coastal-photo img{width:100%} .coastal-photo img{aspect-ratio:16/9;object-fit:cover;border-radius:18px} .coastal-photo figcaption{font-size:.65rem;color:var(--text-secondary);line-height:1.4;padding:6px 3px} .coastal-photo figcaption a{color:var(--text-secondary);text-decoration:underline} .card--image .coastal-photo img{border-radius:0} .page-intro{background:linear-gradient(115deg,#effaff,#e0f3fb);padding-block:45px} .page-intro__grid{display:grid;gap:36px;align-items:center;grid-template-columns:1.05fr 1fr} .page-intro__copy h1{font-size:clamp(2.2rem,4vw,3.9rem);max-width:19ch;margin-bottom:20px} .page-intro__copy .lede{font-size:1.05rem;line-height:1.7} .contact-actions{margin-top:24px} .page-intro__image{border-radius:20px;width:100%;height:350px;object-fit:cover} .page-intro--compact{position:relative;background:#eaf8fd;min-height:300px;overflow:hidden}.page-intro--compact>.coastal-photo{position:absolute;inset:0}.page-intro--compact>.coastal-photo img{height:100%;border-radius:0}.page-intro--compact>.container{position:relative;z-index:1}.page-intro--compact::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f4fbffd9,#f4fbff66 40%,transparent 68%)} .page-intro--compact h1{font-size:clamp(2.3rem,4vw,3.8rem);max-width:18ch;margin-bottom:16px} .price-search-section,.route-summary-section{padding-top:28px} .price-search-card,.route-summary{padding:28px;box-shadow:var(--shadow-md)} .price-search-card .lede{font-size:1rem;margin-block:12px 22px} .route-endpoints{margin-block:16px}.route-endpoints .card{padding:20px} .info-grid .card{padding:24px} .benefit-icon{display:flex;width:46px;height:46px;border-radius:50%;background:var(--accent-soft);color:var(--accent);padding:11px;margin-bottom:12px} .benefit-icon svg{width:24px;height:24px} .popular-prices{display:grid;gap:12px} .popular-price{display:grid;grid-template-columns:105px 1fr auto auto;align-items:center;gap:22px;padding:12px;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm)} .popular-price .coastal-photo img{height:72px;width:105px;border-radius:10px} .popular-price .coastal-photo figcaption{font-size:.58rem;max-width:105px} .popular-price h3{font-size:1.15rem;margin-bottom:5px} .popular-price p{font-size:.85rem;color:var(--text-secondary)} .popular-price .card__price{font-size:1.45rem;text-align:right;white-space:nowrap} .popular-price .price-status{font-size:.7rem;display:block;color:var(--text-secondary)} .home-benefits>.container{display:block} .home-benefits .section-head{grid-column:1/-1;margin:0} .benefits-photo{width:100%;height:100%;max-height:420px;object-fit:cover;border-radius:20px} .home-benefits .btn-row{grid-column:1/-1} .home-local-details{border:1px solid var(--border);border-radius:16px;padding-block:15px} .home-local-details>summary{min-height:44px;cursor:pointer;font-weight:700} .home-recruitment{background:#eaf8fd;position:relative;overflow:hidden} .recruitment-photo{position:absolute;right:0;top:0;width:45%;height:100%;object-fit:cover;opacity:.85;mask-image:linear-gradient(to right,transparent,black 30%)} .home-recruitment>.container{position:relative} .home-recruitment .section-head{max-width:52%} .recruitment-points{display:flex;flex-wrap:wrap;gap:20px;margin-top:24px;font-size:.85rem;max-width:55%} .recruitment-points li{display:flex;gap:8px;align-items:center} .recruitment-points svg{width:20px;height:20px;color:var(--accent)} .application-panel{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding:32px} .driver-form{display:grid;gap:14px} .driver-form input,.driver-form select,.driver-form textarea{width:100%;min-height:48px;border:1px solid var(--border-strong);border-radius:10px;padding:12px;background:#fff} .driver-form textarea{resize:vertical} .driver-form label{font-size:.85rem;font-weight:650} .driver-form .field-row{gap:14px} .driver-form .field-row>*{min-width:0} .cta-panel{position:relative;overflow:hidden;background:#e7f8ff;color:var(--text-primary);border:1px solid var(--border);padding:40px} .cta-panel>.coastal-photo{position:absolute;inset:0;pointer-events:none}.cta-panel>.coastal-photo picture{height:100%}.cta-panel>.coastal-photo img{height:100%;border-radius:0;object-fit:cover}.cta-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#073751d9,#07375199 60%,#07375138)}.cta-panel__copy{position:relative;z-index:1} .cta-panel h2,.cta-panel p{color:#fff} .site-footer{background:#fff;color:var(--text-secondary);border-top:1px solid var(--border)} .site-footer h2,.site-footer a,.site-footer a:hover{color:var(--text-primary)} .footer-logo{width:170px;height:auto} .footer-brand__name{font-weight:750;margin-block:15px 8px;color:var(--text-primary)} .footer-brand__area,.footer-bottom{font-size:.8rem} .footer-contact a{display:flex;align-items:center;gap:8px;min-height:44px} .footer-contact svg{width:18px;height:18px} .footer-bottom{border-color:var(--border)} .photo-credits{font-size:.75rem;margin-top:20px}.photo-credits>summary{min-height:44px;cursor:pointer}.photo-credits a{display:inline;min-height:0} .header-mobile-call{display:none} @media(min-width:1101px){.header-actions{display:flex}.site-nav a:not(.btn){font-size:.82rem;padding-inline:.5rem}} .local-facts-panel{background:var(--bg-secondary);padding:24px;border-radius:16px} .featured-places .card{padding:0;overflow:hidden} .featured-places .card h3,.featured-places .card p{margin:12px 18px} .district-overview{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center} .section--alt .chip{background:#fff} .matrix thead th{background:#eaf6fb;color:var(--text-primary)} .matrix tbody th{background:#f5fbff;color:var(--text-primary)} .matrix__cell--ask a{color:var(--accent)} .sticky-cta{display:none} @media(min-width:900px){.hero__fare .lookup__row{grid-template-columns:1fr 1fr 230px}} @media(max-width:1100px){.header-actions{display:none}.header-bar{gap:14px}.site-nav a{font-size:.78rem}} @media(max-width:899px){ .page-intro__grid,.district-overview{grid-template-columns:1fr}.page-intro__image{height:300px} .trust{grid-template-columns:repeat(2,minmax(0,1fr))}.trust__item{padding:8px} .home-benefits>.container{grid-template-columns:1fr}.benefits-photo{max-height:300px} .popular-price{gap:14px;grid-template-columns:90px 1fr auto}.popular-price .coastal-photo img{width:90px}.popular-price>.btn{grid-column:2/-1} .application-panel{grid-template-columns:1fr} } @media(max-width:860px){ :root{--header-h:72px} body{padding-bottom:calc(var(--sticky-cta-h) + env(safe-area-inset-bottom,0px) + var(--keyboard-inset,0px) + 16px)} html{scroll-padding-bottom:calc(var(--sticky-cta-h) + env(safe-area-inset-bottom,0px) + var(--keyboard-inset,0px) + 24px)} input,select,textarea,button{scroll-margin-bottom:calc(var(--sticky-cta-h) + var(--keyboard-inset,0px) + 28px)} .header-bar{min-height:72px}.brand__logo{width:108px;height:58px}.header-mobile-call{display:inline-flex;margin-left:auto} .site-nav[data-open="true"]{background:#fff;max-height:calc(100dvh - 170px);overflow:auto;border-color:var(--border)} .sticky-cta{display:grid;position:fixed;z-index:40;bottom:0;left:0;right:0;grid-template-columns:1fr 1.3fr 1fr 1fr;gap:5px;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));background:#fffffff5;border-top:1px solid var(--border);box-shadow:0 -4px 20px #163b5610} .sticky-cta .btn{flex-direction:column;gap:2px;font-size:.69rem;line-height:1.2;min-height:55px;padding:6px 3px;border-radius:10px;white-space:nowrap} .sticky-cta .btn svg{width:20px;height:20px} } @media(max-width:639px){ :root{--gutter:1.1rem} .hero__inner{padding-top:30px;gap:18px}.hero__copy{min-height:0;max-width:100%} .hero__background,.hero::before{height:610px}.hero__background{object-position:center}.hero::before{background:linear-gradient(180deg,#edf9ff99 0%,#edf9ff52 46%,transparent 78%)} .hero h1{font-size:clamp(2.85rem,12.2vw,3.3rem);margin-block:12px 16px}.hero__lede{font-size:1rem;margin-bottom:18px;max-width:36ch} .hero__copy{position:relative;isolation:isolate}.hero__copy::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:64px -10px auto;height:250px;border-radius:14px;background:radial-gradient(ellipse at 20% 45%,#f4fbff85,#f4fbff42 62%,transparent 88%)} .hero__copy .btn-row{display:grid;grid-template-columns:1fr 1.2fr;gap:8px}.hero__copy .btn{font-size:.85rem;padding:10px 8px;min-height:52px} .hero__quick{gap:6px}.hero__quick a{font-size:.7rem;padding:5px 9px} .hero__secondary{font-size:.85rem}.hero__trust{padding:8px}.trust__d{font-size:.7rem}.trust__t{font-size:.74rem}.trust__icon{width:32px;height:32px;padding:7px}.trust__item{gap:8px} .hero__fare{padding:20px;margin-bottom:-30px}.fare-links{gap:6px}.fare-links a{font-size:.7rem;padding:7px 8px}.fare-links svg{width:16px} .hero+.section{padding-top:75px}.routebox__title{font-size:1.3rem} .lookup__row{grid-template-columns:1fr}.lookup select{min-height:50px}.lookup__go{width:100%;min-height:50px} .page-intro{padding-block:28px}.page-intro__grid{gap:24px}.page-intro__copy h1{font-size:2.25rem}.page-intro__copy .lede{font-size:.97rem}.page-intro__image{height:225px} .page-intro--compact{min-height:300px}.page-intro--compact>.coastal-photo img{object-position:65% center} .price-search-card,.route-summary{padding:20px}.price-search-card h2{font-size:1.55rem} .grid--4{grid-template-columns:1fr 1fr;gap:12px}.card--image img{height:120px}.card--image>.card__t{font-size:1rem}.card--image>.card__d{font-size:.76rem}.card--image>.card__t,.card--image>.card__d,.card--image>.card__meta{margin-inline:12px}.card--image>.card__meta{font-size:.72rem} .info-grid{grid-template-columns:1fr 1fr}.info-grid .card{padding:16px}.info-grid h3{font-size:1rem} .popular-price{grid-template-columns:72px 1fr;gap:12px;padding:10px}.popular-price .coastal-photo img{width:72px;height:62px}.popular-price h3{font-size:1rem}.popular-price .card__price{grid-column:2;text-align:left;font-size:1.25rem}.popular-price>.btn{grid-column:1/-1} .home-recruitment .section-head{max-width:100%}.recruitment-photo{display:none}.recruitment-points{max-width:100%;display:grid;gap:10px} .application-panel{padding:22px}.driver-form .field-row{grid-template-columns:1fr}.cta-panel{padding:26px} .featured-places .grid{grid-template-columns:1fr}.featured-places .coastal-photo img{max-height:200px} } @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} .btn--wa{background:#0b823c;color:#fff;border-color:transparent}.btn--wa:hover{background:#087b39;color:#fff} .hero__copy .eyebrow{color:#805b00;letter-spacing:.19em}.hero__area{margin-bottom:12px} .visual-hero{position:relative;overflow:hidden;background:#e4f6fe;padding-block:36px} .visual-hero .page-intro__grid{display:grid;grid-template-columns:1fr 1.12fr;gap:32px;align-items:center} .visual-hero .page-intro__copy{max-width:560px} .visual-hero .page-intro__copy h1{font-size:clamp(2.6rem,4.6vw,4.5rem);line-height:1.03;max-width:21ch} .visual-hero h1 span{display:block;color:var(--accent)} .visual-hero--route h1 .route-transfer{display:block;font-size:.48em;line-height:1.2;letter-spacing:0;margin-top:8px} .visual-hero .page-intro__grid>.coastal-photo{position:relative;min-width:0} .visual-hero .page-intro__grid>.coastal-photo img{height:390px;object-fit:cover;object-position:center;border-radius:24px} .visual-hero .page-intro__grid::after{display:none} .visual-hero--driver{background:#ddf3ff} .visual-hero--driver .page-intro__grid>.coastal-photo img{height:420px;object-position:30% center} .district-fare-section,.price-search-section,.route-summary-section{position:relative;margin-top:-24px;padding-top:0;z-index:3} .district-fare-section .price-search-card h2{font-size:1.35rem;margin-bottom:20px} .district-overview{grid-template-columns:1fr 1fr}.district-overview>.coastal-photo{grid-column:1/-1}.district-overview>.coastal-photo img{max-height:290px}.district-overview .lede,.district-overview p{font-size:.95rem} .featured-places .card p{font-size:.8rem}.featured-places .card h3{font-size:1.05rem}.featured-places .coastal-photo img{border-radius:0;height:160px} .popular-price .coastal-photo img{object-fit:cover}.popular-price .card__price{color:var(--accent)} .home-recruitment .recruitment-photo{left:0;right:auto;opacity:1;mask-image:linear-gradient(to left,transparent,black 25%)} .home-recruitment>.container{padding-left:48%}.home-recruitment .section-head,.recruitment-points{max-width:100%} .home-recruitment h2{font-size:clamp(1.8rem,3vw,2.8rem)} .chip{border-radius:14px;min-height:44px;background:#fff;box-shadow:0 4px 16px #16456508;color:var(--text-primary)} .faq-list details{background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm)} .hero__fare .lookup__go,.price-search-card .lookup__go{width:100%} .page-intro--compact h1 span{display:block;color:var(--accent)}.page-intro--compact .lede{max-width:48ch;font-size:1.05rem;color:var(--text-primary)} .matrix-details,.local-context-details{border:1px solid var(--border);border-radius:16px;background:#fff;margin-block:20px}.matrix-details>summary,.local-context-details>summary{min-height:48px;padding:14px;cursor:pointer;font-weight:700}.matrix-details .container,.local-context-details .container{width:100%;padding-inline:16px} .home-benefits{background:linear-gradient(180deg,#fff,#f4fbfe)}.home-benefits .benefits-grid{grid-column:auto} .home-region-grid .card__d{margin-top:5px}.home-region-grid .card__meta{margin-top:8px;margin-bottom:12px} .section-head{margin-bottom:24px}.home-local-details{margin-bottom:24px} .coastal-strip>.container,.journey-details>.container{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center} .coastal-strip{background:linear-gradient(110deg,#e4f6fe,#fff)}.coastal-strip .coastal-photo img{height:270px} .journey-details>.container{grid-template-columns:1.25fr 1fr}.journey-details .coastal-photo img{height:310px}.journey-details .card{padding:16px}.journey-details h3{font-size:.98rem} .driver-benefits>.container{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px}.driver-benefits .info-grid{grid-template-columns:1fr 1fr}.driver-terms{grid-column:1/-1;font-size:.9rem;max-width:95ch} .driver-benefits .section-head{margin:0}.application-panel .coastal-photo img{margin-top:18px} .final-cta{padding:0;background:#e4f6fe}.final-cta .cta-panel{border:0;border-radius:0;padding:38px 0}.final-cta .cta-panel::after{background:linear-gradient(90deg,#073751e6,#07375199 45%,transparent 78%)}.cta-panel__copy{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:32px}.cta-panel__copy p{grid-column:1;max-width:52ch}.cta-panel__copy .btn-row{grid-column:2;grid-row:1/3;margin-top:0} .site-footer{padding-block:30px 16px}.footer-grid{gap:24px}.footer-logo{width:135px}.footer-brand__name{margin-block:8px 4px}.footer-brand__area{max-width:32ch}.footer-bottom{margin-top:22px;padding-top:16px}.photo-credits{margin-top:4px} @media(min-width:900px){.hero__fare .lookup__row,.price-search-card .lookup__row{grid-template-columns:1fr 1fr}.hero__fare .lookup__go,.price-search-card .lookup__go{grid-column:1/-1}.home-faq>.container{max-width:1200px;display:grid;grid-template-columns:1fr 1.4fr;gap:28px;align-items:start}.home-faq .section-head{margin:0}.home-faq .faq-list{grid-column:2}.home-faq .btn-row{align-items:start}.site-footer nav a{min-height:36px;padding-block:5px}} @media(max-width:899px){.visual-hero .page-intro__grid,.district-overview,.coastal-strip>.container,.journey-details>.container,.driver-benefits>.container{grid-template-columns:1fr}.visual-hero .page-intro__copy{max-width:100%}.visual-hero .page-intro__grid>.coastal-photo img{height:280px}.driver-terms{grid-column:auto}.coastal-strip>.container{gap:20px}.journey-details>.container{gap:24px}} @media(max-width:639px){ .home-region-grid{grid-template-columns:1fr 1fr;gap:12px}.home-region-grid .card__d{font-size:.75rem} .visual-hero{padding:26px 0 44px}.visual-hero .page-intro__grid{gap:20px}.visual-hero .page-intro__copy h1{font-size:2.5rem;margin-bottom:14px}.visual-hero .page-intro__copy .lede{line-height:1.55}.visual-hero .page-intro__grid>.coastal-photo img{height:240px;border-radius:18px}.visual-hero--driver .page-intro__grid>.coastal-photo img{height:265px} .visual-hero .contact-actions{margin-top:18px;gap:8px}.visual-hero .contact-actions .btn{font-size:.84rem;padding-inline:10px}.visual-hero .hero__secondary{margin-top:8px} .home-recruitment>.container{padding-left:var(--gutter)}.home-recruitment{padding-top:245px}.home-recruitment .recruitment-photo{display:block;width:100%;height:225px;mask-image:none;object-position:center 40%} .district-overview>.coastal-photo img{max-height:220px}.page-intro--compact{min-height:285px}.page-intro--compact::after{background:linear-gradient(90deg,#f4fbffb8,#f4fbff40 65%,transparent)}.page-intro--compact .lede{font-size:.95rem;max-width:34ch}.page-intro--compact h1{font-size:2.45rem} .popular-price .coastal-photo img{width:72px}.popular-price h3{margin-bottom:2px}.popular-price .btn{font-size:.8rem;min-height:44px}.price-search-card .lookup__hint{margin-bottom:14px}.price-search-card h2{margin-bottom:8px} .benefits-grid{grid-template-columns:1fr 1fr;gap:12px}.benefits-grid .card{padding:16px}.benefits-grid .card__t{font-size:1rem}.home-benefits .btn-row{margin-top:16px} .coastal-strip .coastal-photo img{height:205px}.journey-details .coastal-photo img{height:225px}.journey-details .grid--3{grid-template-columns:1fr}.journey-details .card{display:grid;grid-template-columns:46px 1fr;column-gap:12px}.journey-details .card__d{grid-column:2}.journey-details .benefit-icon{grid-row:1/3;margin:0} .cta-panel__copy{display:block}.cta-panel__copy h2{font-size:1.8rem}.cta-panel__copy p{font-size:.9rem}.cta-panel__copy .btn-row{margin-top:18px;gap:8px}.cta-panel__copy .btn{font-size:.82rem;padding-inline:10px} .footer-grid{grid-template-columns:1fr 1fr;gap:20px}.footer-grid>div{grid-column:1/-1}.footer-grid>nav:last-child{grid-column:1/-1}.footer-grid>nav:last-child ul{grid-template-columns:1fr 1fr;gap:4px 16px}.footer-grid nav a{font-size:.86rem;min-height:44px;padding-block:8px}.footer-brand__area{max-width:48ch}.footer-contact{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}.footer-bottom{gap:8px} }