:root { --navy:#102d38; --ink:#173640; --muted:#6a7d81; --line:#dce7e8; --surface:#f4f8f8; --teal:#1bb4a3; --orange:#ec8d54; --white:#fff; --shadow:0 18px 50px rgba(16,45,56,.08); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:"DM Sans", sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
button, input { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid rgba(27,180,163,.65); outline-offset:3px; }
.site-header { max-width:1240px; margin:auto; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; gap:12px; align-items:center; }
.brand strong, .brand small { display:block; line-height:1.1; }
.brand strong { font-size:.78rem; letter-spacing:.12em; }
.brand small { color:var(--muted); font-size:.72rem; margin-top:4px; }
.brand-mark { width:28px; height:25px; display:flex; gap:3px; align-items:end; }
.brand-mark i { display:block; width:7px; background:var(--teal); border-radius:2px 2px 0 0; transform:skew(-17deg); }
.brand-mark i:nth-child(1){height:14px}.brand-mark i:nth-child(2){height:21px;background:var(--navy)}.brand-mark i:nth-child(3){height:17px}
.header-nav { display:flex; align-items:center; gap:22px; }
.header-link { color:var(--navy); font-weight:600; font-size:.88rem; }
.header-link[aria-current="page"] { color:var(--teal); }
.header-link span { color:var(--teal); margin-left:4px; }
.page-shell { max-width:1240px; margin:auto; padding:40px 24px 72px; }
.hero { width:100%; padding:42px 0 48px; display:grid; grid-template-columns:minmax(0,1.85fr) minmax(280px,1fr); gap:48px; align-items:end; }
.hero-main { min-width:0; }
.eyebrow { color:var(--teal); font-size:.76rem; letter-spacing:.14em; font-weight:700; text-transform:uppercase; }
h1,h2,h3 { font-family:"Space Grotesk", sans-serif; letter-spacing:-.045em; margin:0; color:var(--navy); }
h1 { font-size:clamp(2.8rem, 7vw, 5.8rem); line-height:.98; margin:16px 0 21px; }
.hero p { margin:0; }
.hero-value { color:var(--navy); font-size:clamp(1.25rem,2vw,1.55rem); line-height:1.35; font-weight:600; }
.hero-qr { color:var(--teal); font-size:1.08rem; line-height:1.45; font-weight:600; margin-top:8px!important; }
.search-wrap { background:var(--surface); padding:24px; border-radius:22px; margin-bottom:32px; }
.search-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr); gap:16px; align-items:end; }
.search-label { display:block; color:var(--navy); font-weight:700; margin-bottom:11px; }
.search-box { display:flex; background:#fff; border:1px solid var(--line); border-radius:13px; align-items:center; padding:0 16px; }
.search-box svg { width:20px; color:var(--teal); flex:none; }
.search-box input { border:0; outline:0; background:transparent; width:100%; padding:16px 12px; color:var(--ink); }
.search-box input::placeholder { color:#8ca0a4; }
.filter-field select { width:100%; min-height:53px; border:1px solid var(--line); border-radius:13px; background:#fff; color:var(--ink); padding:0 42px 0 16px; appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--teal) 50%),linear-gradient(135deg,var(--teal) 50%,transparent 50%); background-position:calc(100% - 20px) 23px,calc(100% - 14px) 23px; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.result-meta { color:var(--muted); font-size:.82rem; margin:0 0 15px; }
.cards { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.bridge-card { border:1px solid var(--line); border-radius:18px; padding:24px; min-height:235px; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; overflow:hidden; }
.bridge-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.card-media { display:block; height:148px; margin:-24px -24px 21px; background:var(--surface); overflow:hidden; cursor:pointer; }
.card-media img { display:block; width:100%; height:100%; object-fit:cover; }
.card-media .photo-placeholder { height:100%; min-height:0; border-radius:0; padding:18px; }
.card-top { display:flex; justify-content:space-between; align-items:start; gap:12px; }
.card-number { font-family:"Space Grotesk"; font-size:1.65rem; font-weight:700; color:var(--navy); }
.card-badges { display:flex; flex:0 1 auto; max-width:62%; flex-direction:column; align-items:flex-end; gap:5px; }
.card-badge { width:auto; max-width:100%; min-height:29px; border-radius:30px; padding:6px 10px; display:inline-flex; align-items:center; justify-content:center; font-size:.7rem; line-height:1.15; font-weight:700; text-align:center; }
.card-infrastructure { color:#fff; background:var(--navy); }
.card-type { color:var(--teal); background:#e8f8f5; }
.card-location { margin:20px 0 4px; font-size:1.02rem; font-weight:600; }
.card-under { color:var(--muted); font-size:.88rem; }
.text-link { margin-top:auto; padding-top:22px; color:var(--navy); font-weight:700; font-size:.9rem; }
.text-link span { color:var(--teal); margin-left:6px; }
.detail-page { max-width:940px; margin:auto; }
.back-link { color:var(--muted); font-size:.88rem; font-weight:600; display:inline-flex; gap:8px; margin:22px 0 32px; }
.detail-intro { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:30px; }
.detail-intro h1 { font-size:clamp(3rem, 7vw, 5.3rem); margin:13px 0 12px; }
.route { font-size:1.1rem; color:var(--muted); }.route strong { display:block; color:var(--navy); font-size:1.28rem; }
.photo-gallery { min-width:0; display:grid; gap:10px; }
.photo-gallery-multiple { grid-template-columns:repeat(2,minmax(0,1fr)); }
.photo-frame { min-width:0; min-height:0; aspect-ratio:16 / 10; margin:0; border-radius:22px; overflow:hidden; background:var(--surface); }
.photo-frame img { display:block; width:100%; height:100%; object-fit:cover; }
.photo-frame .photo-placeholder { height:100%; min-height:0; border-radius:0; }
.photo-placeholder { min-height:300px; border-radius:22px; background:linear-gradient(140deg,#d8eeee,#9fc5c3); position:relative; overflow:hidden; display:flex; align-items:end; padding:24px; color:var(--navy); }
.photo-placeholder:before { content:""; position:absolute; inset:35% -10% -30%; background:#668f91; transform:skewY(-9deg); opacity:.5; }.photo-placeholder:after { content:""; position:absolute; width:140%; height:18px; left:-20%; bottom:29%; background:var(--navy); box-shadow:0 42px 0 #d8eeee; transform:rotate(-9deg); }
.placeholder-label { position:relative; z-index:1; background:rgba(255,255,255,.8); padding:8px 11px; border-radius:7px; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.data-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); margin-top:30px; }
.data-item { padding:22px 18px 22px 0; border-bottom:1px solid var(--line); }.data-item dt { font-size:.7rem; color:var(--muted); letter-spacing:.1em; font-weight:700; text-transform:uppercase; }.data-item dd { margin:7px 0 0; font-weight:600; }
.map-section { margin-top:32px; padding:26px; border-radius:20px; background:var(--surface); }.map-section h2 { font-size:1.35rem; margin-bottom:16px; }.leaflet-map { width:100%; height:320px; border-radius:12px; overflow:hidden; background:#d6e7e4; }.map-link { display:inline-flex; margin-top:16px; background:var(--navy); color:#fff; border-radius:10px; padding:13px 17px; font-weight:700; font-size:.88rem; }.map-unavailable { min-height:120px; margin:0; border-radius:12px; background:#e8f0ef; display:grid; place-items:center; padding:24px; color:var(--muted); text-align:center; }
.map-preview { min-height:128px; border-radius:12px; background-color:#d6e7e4; background-image:linear-gradient(22deg,transparent 46%,rgba(255,255,255,.9) 47%,rgba(255,255,255,.9) 50%,transparent 51%),linear-gradient(78deg,transparent 48%,rgba(255,255,255,.72) 49%,rgba(255,255,255,.72) 52%,transparent 53%); display:grid; place-items:center; }.pin { width:18px; height:18px; background:var(--orange); border:4px solid white; border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:0 3px 8px #688; }
.report-box { border:1px solid #f3d7c2; background:#fffaf6; border-radius:20px; padding:25px; margin-top:22px; }.report-box h2 { font-size:1.35rem; }.report-box p { color:var(--muted); margin:9px 0 20px; max-width:620px; }.actions { display:flex; flex-wrap:wrap; gap:10px; }.button { display:inline-flex; justify-content:center; align-items:center; min-height:46px; padding:0 17px; border-radius:10px; background:var(--orange); color:#fff; font-weight:700; font-size:.87rem; }.button.secondary { background:#fff; border:1px solid #e5c1a7; color:var(--navy); }
.detail-nav { display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); margin-top:38px; padding-top:24px; }.detail-nav a { color:var(--navy); font-weight:700; font-size:.88rem; }.detail-nav a:last-child { text-align:right; }.detail-nav small { display:block; color:var(--muted); font-weight:500; margin-bottom:3px; }
.empty-state { padding:50px 0; text-align:center; color:var(--muted); }.empty-state h2 { margin-bottom:8px; }.error-state { max-width:620px; padding:100px 0; }.error-state h1 { font-size:clamp(3rem,8vw,5rem); }.error-state p { color:var(--muted); margin-bottom:24px; }
.site-footer { max-width:1240px; margin:auto; padding:20px 24px 35px; display:flex; justify-content:space-between; color:#8da0a3; font-size:.76rem; border-top:1px solid var(--line); }
.plaque-page { min-height:calc(100vh - 90px); background:var(--surface); display:grid; place-items:center; padding:34px 18px; }.plaque { width:min(100%, 390px); background:#fff; border-radius:16px; padding:29px; box-shadow:0 20px 60px rgba(16,45,56,.14); text-align:center; border-top:7px solid var(--teal); }.plaque .brand { justify-content:center; margin-bottom:30px; text-align:left; }.plaque h1 { font-size:3.3rem; margin:0 0 8px; }.plaque p { color:var(--muted); margin:0 0 25px; }.qr-frame { width:214px; height:214px; margin:0 auto 25px; padding:8px; border:1px solid var(--line); display:grid; place-items:center; }.qr-frame img,.qr-frame canvas { max-width:100%; max-height:100%; }.plaque-caption { color:var(--navy); font-weight:700; font-size:.83rem; }.plaque-note { margin-top:26px!important; font-size:.75rem; }.plaque-back { display:inline-block; margin-top:15px; color:var(--teal); font-weight:700; font-size:.85rem; }
.qr-demo-main { max-width:1240px; margin:auto; padding:52px 24px 78px; }.qr-demo-hero { max-width:720px; margin-bottom:35px; }.qr-demo-hero h1 { font-size:clamp(2.8rem,6vw,5rem); line-height:.98; margin:15px 0 18px; }.qr-demo-hero p { margin:0; color:var(--muted); font-size:1.08rem; }.qr-demo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.qr-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:23px; box-shadow:var(--shadow); text-align:center; min-width:0; }.qr-card-brand { display:flex; align-items:center; gap:10px; text-align:left; margin-bottom:25px; }.qr-card-brand strong,.qr-card-brand small { display:block; line-height:1.1; }.qr-card-brand strong { font-size:.7rem; letter-spacing:.11em; }.qr-card-brand small { color:var(--muted); font-size:.68rem; margin-top:4px; }.qr-card-number { color:var(--navy); font:700 2rem/1 "Space Grotesk",sans-serif; letter-spacing:-.04em; }.qr-card-location { margin:12px 0 19px; min-height:44px; }.qr-card-location strong,.qr-card-location span { display:block; }.qr-card-location strong { color:var(--navy); font-size:.96rem; }.qr-card-location span { color:var(--muted); font-size:.8rem; margin-top:3px; }.qr-card-code { width:220px; height:220px; max-width:100%; margin:0 auto 17px; padding:8px; border:1px solid var(--line); border-radius:10px; display:grid; place-items:center; }.qr-card-code canvas { display:block; width:100%!important; height:100%!important; image-rendering:pixelated; }.qr-card-caption { color:var(--navy); font-size:.82rem; font-weight:700; }.qr-card-target { text-align:left; margin-top:19px; padding-top:14px; border-top:1px solid var(--line); }.qr-card-target small { display:block; color:var(--muted); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; margin-bottom:6px; }.qr-card-target code { display:block; color:var(--ink); font:500 .67rem/1.45 "DM Sans",sans-serif; overflow-wrap:anywhere; }.qr-download { display:inline-block; margin-top:15px; color:var(--teal); font-size:.78rem; font-weight:700; }.qr-demo-error { color:var(--muted); grid-column:1/-1; text-align:center; }
@media (max-width:700px) { .site-header{padding:18px 18px}.header-nav{gap:12px}.header-link{font-size:.78rem}.page-shell{padding:18px 18px 56px}.hero{padding:44px 0 34px;grid-template-columns:1fr;gap:24px}.hero-value{font-size:1.2rem}.hero-qr{font-size:1rem}.search-wrap{padding:18px;margin-bottom:26px}.search-grid{grid-template-columns:1fr;gap:18px}.cards{grid-template-columns:1fr}.bridge-card{min-height:210px}.card-media{height:142px}.detail-intro{display:block}.detail-intro h1{margin-top:12px}.photo-gallery{margin-top:28px}.photo-frame{aspect-ratio:16 / 10}.photo-placeholder{min-height:230px}.data-grid{grid-template-columns:repeat(2,1fr)}.data-item{padding:18px 12px 18px 0}.map-section,.report-box{padding:20px}.leaflet-map{height:300px}.site-footer{margin:0 18px;padding-left:0;padding-right:0;display:block}.site-footer span{display:block;margin-top:5px} }
@media (max-width:480px) { .site-header{align-items:flex-start;gap:12px}.header-nav{flex-direction:column;align-items:flex-end;gap:4px}.header-link{white-space:nowrap} }
@media (max-width:1000px) { .qr-demo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .qr-demo-main{padding:36px 18px 58px}.qr-demo-hero{margin-bottom:28px}.qr-demo-hero p{font-size:1rem}.qr-demo-grid{grid-template-columns:1fr;gap:16px}.qr-card{padding:20px}.qr-card-code{width:210px;height:210px} }
@media (min-width:1000px) { .cards{grid-template-columns:repeat(3,1fr)} }

.qr-card-code img { display:block; width:100%; height:100%; image-rendering:pixelated; }