:root{--cream:#f2efe6;--paper:#fffdf7;--ink:#171816;--coral:#ff6548;--blue:#263f94;--yellow:#ffd166;--line:#d5d1c6}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Onest,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin-top:0}
.detail-head{position:absolute;z-index:50;top:0;left:0;right:0;height:88px;padding:0 clamp(20px,4vw,60px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:var(--paper)}
.detail-logo{display:block;width:160px;aspect-ratio:992/304;overflow:hidden;border-radius:16px;box-shadow:0 12px 30px #0003}
.detail-logo img{display:block;width:100%;height:100%;object-fit:cover}
.back{font:700 11px 'Martian Mono',monospace;text-transform:uppercase}
.back:before{content:'←';margin-right:10px}
.back:hover,.back:focus-visible{text-decoration:underline;text-underline-offset:5px}
.hero{min-height:580px;height:min(690px,78svh);position:relative;display:flex;align-items:end;background:var(--ink) center/cover no-repeat;color:var(--paper)}
.hero:before{content:'';position:absolute;inset:0;background:#0007}
.hero-content{position:relative;z-index:1;width:100%;padding:160px clamp(20px,5vw,82px) 76px}
.eyebrow{margin:0 0 20px;font:700 11px 'Martian Mono',monospace;text-transform:uppercase}
.hero h1{max-width:1200px;margin:0 0 28px;font:800 clamp(60px,8vw,124px)/.93 Onest,Arial,sans-serif}
.hero p:not(.eyebrow){max-width:700px;margin:0;font-size:20px;line-height:1.5}
.hero .hero-jump{display:inline-flex;align-items:center;gap:16px;margin-top:34px;padding-bottom:9px;border-bottom:2px solid var(--paper);font-weight:700}
.hero-jump:hover,.hero-jump:focus-visible{color:var(--yellow);border-color:var(--yellow)}
.page-wrap{max-width:1580px;margin:auto;padding:0 clamp(20px,5vw,82px)}
.intro{padding:90px 0 82px;background:var(--cream)}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:start}
.intro h2,.section-head h2,.contact h2,.hub-title{font:800 clamp(43px,5.3vw,79px)/.98 Onest,Arial,sans-serif}
.intro h2{max-width:660px;margin:0}
.intro-copy{max-width:670px;font-size:19px;line-height:1.6}
.intro-copy p{margin-bottom:20px}
.intro-copy p:last-child{margin-bottom:0}
.routes{padding:90px 0 105px;background:var(--paper)}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:end;margin-bottom:56px}
.section-head .eyebrow{grid-column:1/-1;margin-bottom:-8px;color:var(--coral)}
.section-head h2{margin:0;max-width:800px}
.section-head>p:not(.eyebrow){max-width:600px;margin:0;color:#4c504b;font-size:18px;line-height:1.55}
.route-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.route{min-width:0;min-height:330px;padding:32px;border-radius:8px;background:var(--cream);display:flex;flex-direction:column}
.route:nth-child(2){background:#dce4fa}
.route:nth-child(3){background:#ffe1d7}
.route:nth-child(4){background:#e4ebdf}
.route-top{display:flex;justify-content:space-between;gap:18px;align-items:start}
.route h3{margin:0;font:800 clamp(29px,3vw,42px)/1.05 Onest,Arial,sans-serif}
.route-type{white-space:nowrap;font:700 10px 'Martian Mono',monospace;text-transform:uppercase}
.route address{margin:28px 0 16px;font-style:normal;font-weight:700;font-size:17px;line-height:1.45}
.route p{max-width:570px;margin:0 0 22px;color:#3e423e;font-size:16px;line-height:1.55}
.route-links{margin-top:auto;display:flex;gap:16px 25px;flex-wrap:wrap}
.route-links a,.text-link{display:inline-flex;gap:8px;align-items:center;border-bottom:1px solid currentColor;padding-bottom:4px;font-weight:700;font-size:15px}
.route-links a:hover,.route-links a:focus-visible,.text-link:hover,.text-link:focus-visible{color:var(--blue)}
.route-note{max-width:870px;margin:30px 0 0;color:#575b55;font-size:15px;line-height:1.6}
.steps{padding:100px 0;background:var(--blue);color:var(--paper)}
.steps .section-head{align-items:start}
.steps .section-head .eyebrow{color:var(--yellow)}
.steps .section-head>p:not(.eyebrow){color:#e1e7fa}
.step-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.step{padding-top:20px;border-top:1px solid #ffffff8a}
.step-number{display:block;margin-bottom:28px;color:var(--coral);font:800 39px Onest}
.step h3{max-width:360px;margin-bottom:14px;font-size:27px;line-height:1.1}
.step p{max-width:430px;margin:0;color:#e1e7fa;font-size:16px;line-height:1.55}
.practical{padding:92px 0;background:var(--cream)}
.practical-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px}
.practical article{border-top:2px solid var(--ink);padding-top:22px}
.practical h2{max-width:650px;margin:0 0 20px;font:800 clamp(35px,3.7vw,56px)/1.03 Onest}
.practical p{max-width:600px;color:#4a4e48;font-size:17px;line-height:1.6}
.practical .text-link{margin-top:5px}
.contact{padding:100px 0 105px;background:var(--coral)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:end}
.contact h2{max-width:700px;margin:0 0 23px}
.contact p:not(.eyebrow){max-width:580px;margin:0;font-size:18px;line-height:1.55}
.contact-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.contact-actions a{display:flex;align-items:center;min-height:86px;padding:20px;border-radius:8px;font-size:20px;font-weight:800;transition:transform .2s}
.contact-actions a:hover,.contact-actions a:focus-visible{transform:translateY(-3px)}
.contact-actions .telegram{grid-column:1/-1;background:#289bd1;color:#fff}
.contact-actions .whatsapp{background:#d9f6d8}
.contact-actions .phone{background:var(--paper);font-size:18px}
.other-city{padding:26px clamp(20px,5vw,82px);background:var(--ink);color:var(--paper)}
.other-city a{font-weight:700;text-decoration:underline;text-underline-offset:4px}
.photo-credit{padding:12px clamp(20px,5vw,82px);background:var(--ink);color:#bec0ba;font-size:11px;line-height:1.5}
.photo-credit a{text-decoration:underline;text-underline-offset:2px}
.hub-main{padding:155px 0 100px;min-height:100svh}
.hub-title{max-width:1050px;margin:0 0 25px}
.hub-lede{max-width:710px;color:#555a53;font-size:20px;line-height:1.5}
.hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:70px}
.hub-city{min-height:430px;position:relative;overflow:hidden;display:flex;align-items:end;padding:34px;border-radius:8px;color:#fff;background:#333 center/cover no-repeat}
.hub-city-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hub-city:before{content:'';position:absolute;inset:0;z-index:1;background:#0007}
.hub-city span{position:relative;z-index:2;font:800 clamp(34px,4vw,60px)/1 Onest}
.hub-city:hover span,.hub-city:focus-visible span{text-decoration:underline;text-underline-offset:6px}
.hub-photo-credits{margin:30px 0 80px;color:#686b66;font:400 13px/1.6 Onest}
.hub-photo-credits summary{cursor:pointer;width:max-content}
.hub-photo-credits ul{columns:2;column-gap:35px;padding-left:18px}
.hub-photo-credits li{break-inside:avoid;margin:6px 0}
.hub-photo-credits a{color:inherit}
.hub-bottom{max-width:880px;margin:48px 0 0;color:#555a53;font-size:17px;line-height:1.6}
@media(max-width:800px){.detail-head{height:70px;padding:0 12px;grid-template-columns:1fr auto}.detail-logo{width:108px;border-radius:11px}.back{display:none}.hero{height:auto;min-height:540px}.hero-content{padding:150px 24px 55px}.hero h1{font-size:clamp(55px,12vw,83px)}.hero p:not(.eyebrow){font-size:17px}.intro,.routes,.steps,.practical,.contact{padding:70px 0}.intro-grid,.section-head,.contact-grid,.practical-grid{grid-template-columns:1fr;gap:25px}.section-head{margin-bottom:38px}.section-head .eyebrow{margin-bottom:0}.intro-copy{font-size:17px}.route-list{grid-template-columns:1fr}.route{min-height:0;padding:25px}.route h3{font-size:32px}.route-links{margin-top:12px}.step-grid{grid-template-columns:1fr;gap:30px}.step-number{margin-bottom:13px;font-size:32px}.step h3{font-size:25px}.contact-actions{margin-top:10px}.hub-main{padding-top:115px}.hub-grid{grid-template-columns:1fr;margin-top:45px}.hub-city{min-height:300px}}
@media(max-width:420px){.hero h1{font-size:54px}.route-top{display:block}.route-type{display:block;margin-top:10px}.contact-actions a{min-height:70px;padding:14px;font-size:16px}.contact-actions .phone{font-size:13px}.hub-city{min-height:250px}.hub-title{font-size:42px}}
@media(max-width:800px){.hub-photo-credits ul{columns:1}}
@media(max-width:360px){.hero h1{font-size:40px}.hub-title{font-size:37px}}
@media(max-width:420px){.hero h1.long-city{font-size:36px}}
@media(max-width:420px){.section-head h2{font-size:clamp(32px,10vw,42px)}}
@media(max-width:360px){.hero h1.long-city{font-size:31px}}
@media(max-width:360px){.intro h2{font-size:38px}.intro-grid,.section-head,.contact-grid,.practical-grid{grid-template-columns:minmax(0,1fr)}}
/* Dense cover grid for the full city catalog. */
.hub-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:48px}
.hub-city{min-height:220px;padding:20px}
.hub-city span{font-size:clamp(20px,2vw,30px);line-height:1.08;overflow-wrap:break-word}
@media(max-width:1200px){.hub-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:36px}.hub-city{min-height:180px;padding:15px}.hub-city span{font-size:20px}}
@media(max-width:420px){.hub-city{min-height:150px;padding:12px}.hub-city span{font-size:16px}}