:root {
    --sea: #126779;
    --sea-dark: #17586b;
    --teal: #15979b;
    --mint: #dff5f1;
    --mist: #eff8fa;
    --paper: #ffffff;
    --ink: #285565;
    --muted: #597b84;
    --line: #ccdee4;
    --orange: #e87d4e;
    --light-orange: #fff1e8;
    --radius: 17px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; line-height: 1.68; }
a { color: var(--sea); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--orange); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; border-radius: 3px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.18; letter-spacing: -.035em; font-weight: 750; color: var(--sea-dark); }
h1 { font-size: 40px; max-width: 800px; margin-bottom: 22px; overflow-wrap: anywhere; }
h2 { font-size: 28px; margin-bottom: 19px; overflow-wrap: anywhere; }
h3 { font-size: 21px; margin-bottom: 10px; }
p { font-size: 16px; line-height: 1.75; margin-bottom: 16px; }
small { font-size: 13px; }
.wrap { width: min(1250px, calc(100% - 72px)); margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.site-header { position: relative; z-index: 12; background: #fff; border-bottom: 1px solid var(--line); }
.header-inner { min-height: 89px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.header-mark { display: flex; align-items: center; gap: 12px; color: var(--sea-dark); text-decoration: none; font-size: 19px; font-weight: 800; letter-spacing: -.045em; line-height: 1.2; white-space: nowrap; }
.header-mark em { display: block; font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.mark-symbol { width: 43px; height: 43px; border: 4px solid var(--sea); border-radius: 12px; display: inline-block; position: relative; flex: none; }
.mark-symbol::before { content: ''; position: absolute; width: 22px; height: 22px; border: 4px solid var(--teal); border-radius: 50%; left: 6px; top: 11px; }
.mark-symbol::after { content: ''; position: absolute; width: 4px; height: 4px; background: var(--orange); border-radius: 50%; left: 7px; top: 4px; }
.desktop-nav { display: flex; gap: clamp(10px, 1.4vw, 22px); align-items: center; }
.desktop-nav a { color: var(--ink); font-size: 14px; font-weight: 650; white-space: nowrap; text-decoration: none; padding: 9px 0; border-bottom: 2px solid transparent; }
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color: var(--sea); border-bottom-color: var(--orange); }
.mobile-nav { display: none; }
.hero { background: linear-gradient(117deg, #eef9f8 0%, #f8fcfd 54%, #f1f9f8 100%); overflow: hidden; }
.hero-grid { min-height: 555px; display: grid; grid-template-columns: minmax(0, 1.68fr) minmax(320px, 1fr); align-items: center; column-gap: 45px; padding: 55px 0; }
.hero-copy { max-width: 720px; }
.eyebrow, .kicker { color: var(--sea); font-size: 12px; font-weight: 800; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; }
.eyebrow-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }
.kicker { margin-bottom: 16px; }
.hero-lead { font-size: 18px; line-height: 1.66; color: var(--ink); font-weight: 520; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 27px 0 19px; }
.button { border-radius: 8px; display: inline-flex; text-decoration: none; align-items: center; justify-content: center; padding: 12px 18px; line-height: 1.3; font-weight: 750; font-size: 14px; min-height: 46px; }
.button.primary { background: var(--sea); color: white; }
.button.primary:hover { background: var(--teal); color: white; }
.button.secondary { background: white; border: 1px solid #bed7d9; color: var(--sea); }
.button.secondary:hover { background: var(--mint); }
.micro-source { color: var(--muted); font-size: 12px; line-height: 1.55; }
.hero-visual { position: relative; height: 415px; min-width: 0; }
.machine-scene { position: relative; height: 100%; width: 100%; border-radius: 46% 43% 32% 43%; background: radial-gradient(circle at 27% 19%, #fcffff 0%, #e0f4f0 50%, #cce9e8 100%); }
.scene-lines { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.scene-lines span { position: absolute; border: 1px solid rgba(20,148,154,.18); border-radius: 50%; transform: rotate(-24deg); }
.scene-lines span:nth-child(1) { width: 460px; height: 280px; right: -100px; top: 63px; }
.scene-lines span:nth-child(2) { width: 420px; height: 220px; right: -100px; top: 92px; }
.scene-lines span:nth-child(3) { width: 350px; height: 160px; right: -60px; top: 125px; }
.machine-shadow { position: absolute; height: 15px; width: 255px; border-radius: 50%; background: rgba(27,100,116,.16); bottom: 27px; left: 50%; transform: translateX(-50%); filter: blur(9px); }
.machine { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-49%) rotate(-4deg); width: 252px; height: 294px; border: 5px solid #cee3e5; border-bottom-width: 8px; background: #fff; border-radius: 19px 19px 14px 14px; box-shadow: 15px 18px 0 rgba(32,116,130,.11), -8px 12px 35px rgba(16,104,116,.10); }
.machine-controls { height: 57px; display: flex; align-items: center; gap: 18px; padding: 0 15px; border-bottom: 2px solid #e1edf0; }
.dial { display: block; width: 30px; height: 30px; border: 5px solid #d0ecec; outline: 1px solid #4aabb0; border-radius: 50%; position: relative; }
.dial::before { content: ''; position: absolute; top: -8px; left: 10px; width: 3px; height: 9px; background: var(--sea); transform: rotate(25deg); }
.screen { display: block; height: 18px; width: 72px; background: #e0f1ee; border: 1px solid #bad9d9; border-radius: 4px; }
.tiny-led { display: block; width: 6px; height: 6px; background: var(--orange); border-radius: 50%; margin-left: auto; }
.machine-port { position: absolute; width: 187px; height: 187px; left: 50%; top: 67px; transform: translateX(-50%); border-radius: 50%; background: #b8d8da; border: 8px solid #e1f1f2; box-shadow: 0 0 0 2px #91b9c0, inset 0 3px 12px rgba(32,92,106,.25); display: grid; place-items: center; }
.machine-drum { position: relative; height: 143px; width: 143px; background: linear-gradient(145deg,#8dbbc5,#e9f9fa); border-radius: 50%; overflow: hidden; border: 3px solid #76acb5; }
.water-shape { position: absolute; width: 180px; height: 100px; bottom: -20px; left: -10px; background: var(--teal); border-radius: 50% 50% 28% 40%; transform: rotate(-12deg); opacity: .68; }
.reflection { position: absolute; width: 66px; height: 30px; border-top: 8px solid rgba(255,255,255,.75); border-radius: 50%; left: 14px; top: 17px; transform: rotate(-25deg); }
.machine-feet i { position: absolute; bottom: -13px; display: block; width: 25px; height: 10px; background: #568b97; border-radius: 0 0 5px 5px; }
.machine-feet i:first-child { left: 20px; }
.machine-feet i:last-child { right: 20px; }
.scene-bubble { position: absolute; display: block; background: #fff; border: 2px solid #8accca; border-radius: 50%; }
.scene-bubble.one { height: 18px; width: 18px; top: 60px; left: 37px; }
.scene-bubble.two { height: 11px; width: 11px; bottom: 88px; right: 30px; }
.scene-bubble.three { height: 25px; width: 25px; right: 38px; top: 57px; }
.scene-sticker { position: absolute; right: 9px; bottom: 44px; width: 91px; height: 61px; padding: 7px 9px; background: white; border-radius: 12px; border: 1px solid #d5e8ea; box-shadow: 0 7px 16px rgba(24,105,115,.12); color: var(--muted); font-size: 11px; line-height: 1.5; }
.scene-sticker strong { display: block; font-size: 19px; color: var(--sea); line-height: 1.2; }
.section { padding: 73px 0; }
.wave-section { background: white; }
.soft-section { background: var(--mist); }
.section-head { max-width: 760px; margin-bottom: 35px; }
.section-head > p:last-child { margin-bottom: 0; }
.topic-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.topic-item { padding: 29px 25px 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.topic-item:first-child { padding-left: 0; }
.topic-item:last-child { border-right: 0; }
.topic-index { font-size: 12px; letter-spacing: .1em; font-weight: 750; color: var(--orange); display: block; margin-bottom: 25px; }
.topic-item h3 { font-size: 20px; }
.topic-item p { font-size: 15px; line-height: 1.62; color: var(--muted); margin-bottom: 24px; }
.topic-item a { display: inline-block; margin-top: auto; font-size: 14px; font-weight: 750; }
.split-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(265px, 1fr); gap: clamp(28px,4vw,60px); align-items: start; }
.main-column { min-width: 0; }
.prose p { max-width: 800px; }
.aside-box { min-width: 0; background: #eef8f7; border: 1px solid #cbebe8; border-radius: 16px; padding: 26px; }
.aside-eyebrow { text-transform: uppercase; font-size: 11px; font-weight: 800; letter-spacing: .13em; margin-bottom: 12px; color: var(--teal); }
.aside-box h3 { font-size: 20px; }
.aside-box p { font-size: 15px; line-height: 1.65; }
.aside-links { display: grid; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #badedb; }
.aside-links a { display: block; text-decoration: none; font-size: 14px; font-weight: 760; border-bottom: 1px solid #c7e4e1; padding: 6px 0; }
.aside-links a:last-child { border-bottom: 0; }
.comparison-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 23px 0; }
.comparison-strip div { min-width: 0; border-top: 3px solid var(--teal); padding: 15px 12px; background: #f2f9f8; }
.comparison-strip strong { display: block; color: var(--sea); font-size: 17px; letter-spacing: -.04em; overflow-wrap: anywhere; }
.comparison-strip span { display: block; color: var(--muted); font-size: 13px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 50px; align-items: center; }
.mechanism-visual { position: relative; min-height: 305px; border-radius: 22px; background: linear-gradient(125deg,#dbf4f0,#f7fdfb); overflow: hidden; border: 1px solid #c8e9e6; }
.tube { position: absolute; border: 15px solid #91cbce; border-radius: 25px; opacity: .87; }
.tube.horizontal { height: 90px; width: 240px; left: 23%; top: 29%; border-top-color: #2ea8a6; border-bottom-color: #6dbabe; }
.tube.vertical { height: 180px; width: 100px; right: 18%; top: 22%; border-left-color: #5fb8bf; border-right-color: #c4e6e7; }
.motor-shape { position: absolute; left: 17%; top: 31%; border: 13px solid var(--sea); width: 138px; height: 138px; border-radius: 50%; background: #edf9f7; box-shadow: 0 0 0 11px rgba(46,168,166,.12); }
.motor-shape span { position: absolute; width: 64px; height: 64px; left: 24px; top: 24px; border: 12px solid var(--teal); border-radius: 50%; }
.node { width: 22px; height: 22px; border-radius: 50%; background: var(--orange); position: absolute; box-shadow: 0 0 0 7px rgba(232,125,78,.17); }
.node.first { top: 22%; left: 30%; }.node.second { right: 19%; bottom: 35%; }
.visual-copy { position: absolute; right: 22px; bottom: 18px; background: white; border-radius: 10px; padding: 10px 14px; box-shadow: 0 4px 16px rgba(27,111,114,.1); }
.visual-copy strong, .visual-copy span { display: block; font-size: 12px; line-height: 1.35; }
.visual-copy strong { color: var(--sea); letter-spacing: .07em; }.visual-copy span { color: var(--muted); }
.under-link { display: inline-block; font-size: 14px; font-weight: 750; margin-top: 3px; }
.place-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin: 24px 0; }
.place-grid a { background: #f1f8f9; padding: 12px 14px; border-radius: 7px; font-size: 14px; font-weight: 720; text-decoration: none; border: 1px solid #dcebed; }
.place-grid a:hover { background: #e3f6f2; }
.source-section { padding: 45px 0 56px; background: #f4faf9; border-top: 1px solid var(--line); }
.source-section h2 { font-size: 28px; margin-bottom: 20px; }
.source-note { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }.source-note h3 { grid-column: 1/-1; font-size: 16px; margin: 0; }.source-note p, .source-line { color: var(--muted); font-size: 13px; line-height: 1.55; }
.source-note p { padding: 14px 0 0; border-top: 1px solid var(--line); }
.source-line { margin: 0 0 9px; }
.inner-hero { padding: 72px 0 68px; background: linear-gradient(125deg,#eaf7f5,#f7fcfd); border-bottom: 1px solid var(--line); }
.inner-hero .wrap > h1 { max-width: 880px; }
.inner-hero .hero-lead { max-width: 805px; margin-bottom: 0; }
.narrow-hero { background: #eaf7f7; }
.inner-hero-grid { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(260px,1fr); align-items: center; gap: 50px; }
.metric-board { background: white; padding: 22px 27px; border: 1px solid #d0e5e4; border-radius: 16px; box-shadow: 10px 12px 0 rgba(22,139,146,.08); }
.metric-board > span { color: var(--sea); font-size: 11px; font-weight: 800; letter-spacing: .09em; }
.metric-board strong { font-size: 53px; display: block; line-height: 1.25; color: var(--sea); }
.metric-board small { font-size: 17px; }
.metric-board p { font-size: 14px; color: var(--muted); margin-bottom: 0; }
.metric-rule { height: 1px; background: var(--line); margin: 13px 0; }
.formula { background: #eaf6f5; border-left: 5px solid var(--teal); padding: 18px 22px; margin: 24px 0; }
.formula span { display: block; color: var(--muted); font-size: 12px; font-weight: 750; margin-bottom: 6px; }
.formula strong { font-size: 19px; color: var(--sea-dark); overflow-wrap: anywhere; }
.stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; margin: 25px 0 20px; }
.stat { border-top: 3px solid var(--teal); padding: 17px 13px 0 0; }
.stat strong { display: block; color: var(--sea); font-size: 41px; line-height: 1.15; letter-spacing: -.05em; }
.stat span { display: block; font-size: 15px; color: var(--ink); margin-top: 9px; line-height: 1.55; }
.two-notes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-bottom: 20px; }
.two-notes article { padding: 22px 24px; background: var(--mist); border: 1px solid var(--line); border-radius: 10px; }
.two-notes h3 { font-size: 18px; }
.two-notes p { margin-bottom: 0; }
.rule-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 28px 0; }
.rule-grid div { padding: 17px; border-left: 3px solid var(--teal); background: var(--mist); }
.rule-grid strong, .rule-grid span { display: block; font-size: 14px; }
.rule-grid span { color: var(--muted); }
.check-strip { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0; }
.check-strip span { background: var(--mint); border: 1px solid #b4deda; color: var(--sea); border-radius: 7px; padding: 7px 12px; font-size: 12px; font-weight: 780; }
.compare-table-wrap { width: 100%; overflow-x: auto; margin: 22px 0; }
.compare-table { border-collapse: collapse; text-align: left; min-width: 450px; width: 100%; font-size: 14px; }
.compare-table th { background: var(--sea); color: white; padding: 12px 14px; }
.compare-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.compare-table tr:nth-child(even) td { background: var(--mist); }
.region-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 16px; margin: 27px 0; }
.region-list.region-columns { grid-template-columns: repeat(3,minmax(0,1fr)); }
.region-row { padding: 14px 15px; background: white; color: var(--sea); border: 1px solid var(--line); border-radius: 9px; text-decoration: none; font-weight: 740; min-width: 0; }
.region-row:hover { border-color: var(--teal); background: #e8f8f6; }
.region-row span, .region-row small { display: block; }
.region-row small { color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.45; margin-top: 4px; }
.site-footer { background: #eaf5f4; border-top: 1px solid var(--line); padding: 36px 0; }
.footer-inner { display: flex; gap: 22px; justify-content: space-between; align-items: center; }
.footer-title { color: var(--sea); font-size: 17px; font-weight: 800; margin: 0; }.site-footer p { font-size: 13px; margin: 4px 0; color: var(--muted); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: flex-end; }
.site-footer a { font-size: 13px; text-decoration: none; font-weight: 720; }
@media(max-width:1100px) {
    .wrap { width: min(1250px,calc(100% - 46px)); }
    .header-mark { font-size: 18px; }
    .desktop-nav { gap: 12px; }
    .desktop-nav a { font-size: 13px; }
    .hero-grid { grid-template-columns: minmax(0,1.5fr) minmax(270px,1fr); gap: 24px; }
    .topic-item { padding-left: 17px; padding-right: 17px; }
    .topic-item:first-child { padding-left: 0; }
    .topic-item h3 { font-size: 18px; }
    .detail-grid { gap: 26px; }
    .region-list.region-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:1000px) {
    .desktop-nav { display: none; }
    .mobile-nav { position: relative; display: block; align-self: center; }
    .mobile-nav summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; background: #eef8f7; color: var(--sea); border: 1px solid #c3e0de; padding: 9px 12px; border-radius: 7px; font-weight: 720; font-size: 14px; }
    .mobile-nav summary::-webkit-details-marker { display: none; }
    .burger { width: 17px; height: 13px; border-top: 2px solid var(--sea); border-bottom: 2px solid var(--sea); position: relative; }
    .burger::after { content: ''; width: 17px; height: 2px; background: var(--sea); position: absolute; left: 0; top: 5px; }
    .mobile-nav[open] nav { position: absolute; right: 0; top: calc(100% + 8px); display: grid; width: min(290px,calc(100vw - 46px)); gap: 2px; background: white; box-shadow: 0 8px 25px rgba(30,102,116,.15); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
    .mobile-nav nav a { padding: 9px 12px; text-decoration: none; font-size: 14px; font-weight: 750; }
    .mobile-nav nav a[aria-current="page"] { background: var(--mint); border-radius: 5px; }
    .hero-grid { grid-template-columns: minmax(0,1.3fr) minmax(250px,.9fr); min-height: auto; }
    .hero-visual { height: 345px; }
    .machine-scene { transform: scale(.86); transform-origin: center; }
    .section { padding: 54px 0; }
    .topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .topic-item:nth-child(2) { border-right: 0; }
    .topic-item:nth-child(1),.topic-item:nth-child(2) { border-bottom: 1px solid var(--line); }
    .topic-item:nth-child(3) { padding-left: 0; }
    .topic-item:nth-child(3),.topic-item:nth-child(4) { padding-top: 25px; }
    .split-layout { grid-template-columns: minmax(0,1.6fr) minmax(225px,1fr); gap: 22px; }
    .aside-box { padding: 20px; }
    .place-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .inner-hero-grid { gap: 20px; grid-template-columns: minmax(0,1.4fr) minmax(220px,1fr); }
    .region-list { grid-template-columns: 1fr; }
    .region-list.region-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px) {
    .wrap { width: calc(100% - 36px); }
    .header-inner { min-height: 74px; }
    .hero-grid, .inner-hero-grid, .detail-grid, .split-layout { grid-template-columns: 1fr; }
    .hero-grid { gap: 22px; padding: 39px 0 28px; }
    .hero-visual { width: min(100%,430px); height: 355px; margin: 0 auto; }
    .hero-copy h1 { max-width: 520px; }
    .inner-hero { padding: 44px 0; }
    .hero-lead { font-size: 17px; }
    .topic-grid { grid-template-columns: 1fr; }
    .topic-item, .topic-item:first-child, .topic-item:nth-child(3) { padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--line); }
    .topic-item:last-child { border-bottom: 0; }
    .topic-index { margin-bottom: 9px; }
    .topic-item p { margin-bottom: 10px; }
    .aside-box { margin-top: 4px; }
    .mechanism-visual { min-height: 265px; }
    .comparison-strip, .stat-grid, .rule-grid { grid-template-columns: 1fr; }
    .comparison-strip { gap: 8px; }
    .comparison-strip div { padding: 10px 15px; }
    .stat-grid { gap: 12px; }
    .stat { padding: 9px 0; }
    .two-notes { grid-template-columns: 1fr; }
    .source-note { grid-template-columns: 1fr; gap: 6px; }
    .source-note h3 { grid-column: auto; }
    .source-note p { padding-top: 10px; }
    .region-list, .region-list.region-columns { grid-template-columns: 1fr; }
    .footer-inner { flex-direction: column; align-items: flex-start; }
    .site-footer nav { justify-content: flex-start; }
}
@media(max-width:380px) {
    .wrap { width: calc(100% - 28px); }
    .hero-actions { display: grid; }
    .button { width: 100%; }
    .machine-scene { transform: scale(.8); transform-origin: center top; }
    .hero-visual { height: 315px; }
    .place-grid { grid-template-columns: 1fr; }
    .header-mark { font-size: 17px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }

.county-hero { overflow: hidden; }
.county-intro { display: grid; grid-template-columns: minmax(0,1.75fr) minmax(280px,1fr); gap: 36px; align-items: center; }
.county-intro h1 { max-width: 760px; }
.county-intro .hero-lead { max-width: 740px; }
.county-intro .hero-actions { margin-bottom: 0; }
.device-diagram { height: 306px; min-width: 0; border-radius: 42% 35% 38% 42%; background: #dbf3f0; position: relative; overflow: hidden; }
.diagram-grid { position: absolute; inset: 0; background: repeating-linear-gradient(0deg,transparent 0 30px,rgba(22,135,141,.07) 31px 32px),repeating-linear-gradient(90deg,transparent 0 30px,rgba(22,135,141,.07) 31px 32px); }
.diagram-appliance { position: absolute; width: 158px; height: 184px; top: 50px; left: calc(50% - 70px); background: #fff; border: 6px solid #b5d8dc; border-radius: 16px; box-shadow: 11px 12px 0 rgba(39,130,138,.10); }
.diagram-centre { position: absolute; width: 111px; height: 111px; left: 17px; top: 47px; border: 9px solid #b3dce0; background: #8cc6ce; border-radius: 50%; }
.diagram-centre span { position: absolute; inset: 16px; border: 6px solid #fff; border-radius: 50%; opacity:.5; }
.diagram-knobs { display: flex; justify-content: space-between; padding: 13px 20px; }
.diagram-knobs i { width: 15px; height: 15px; border-radius: 50%; background: #c4e3e5; border: 3px solid #7aadb4; }
.diagram-channel { position: absolute; left: 12%; top: 55%; width: 60px; height: 8px; border-radius: 99px; background: #70c2bb; }
.diagram-unit { position: absolute; width: 27px; height: 27px; border: 7px solid #31909b; background: #eaf9f5; border-radius: 50%; top: calc(55% - 10px); left: 11%; }
.diagram-caption { position: absolute; right: 44px; bottom: 28px; background: #fff; border: 1px solid #cbe2e2; padding: 9px 13px; border-radius: 9px; }
.diagram-caption strong,.diagram-caption span { display: block; font-size: 12px; line-height: 1.4; }
.diagram-caption strong { color: var(--sea); letter-spacing: .06em; }
.diagram-caption span { color: var(--muted); }
.diagram-lodowka .diagram-centre,.diagram-plyta .diagram-centre,.diagram-piekarnik .diagram-centre { border-radius: 12px; }
.diagram-lodowka .diagram-appliance { border-radius: 7px; }
.diagram-lodowka .diagram-centre { width: 117px; height: 128px; top: 38px; left: 14px; background: #eaf7f8; border-color: #acd3d9; }
.diagram-lodowka .diagram-centre span { width: 88px; height: 3px; top: 56px; left: 5px; background: #75b0bb; border: none; border-radius: 0; }
.diagram-plyta .diagram-appliance { height: 145px; top: 82px; }
.diagram-plyta .diagram-centre { width: 116px; height: 92px; top: 15px; background: #eaf7f8; border: 2px solid #70acb9; }
.diagram-plyta .diagram-centre span { border-color: #33929c; inset: 18px 31px; opacity: .9; }
.diagram-piekarnik .diagram-centre { border-color: #b2d8df; background: #d9eff0; }
.diagram-piekarnik .diagram-centre span { border-radius: 5px; border-color: #e39a68; }
.diagram-suszarka .diagram-centre { background: #c8ebed; }
.service-grid { display: grid; gap: 8px; margin: 17px 0 4px; }
.service-grid a { display: block; padding: 9px 11px; border: 1px solid #c6dfe2; border-radius: 7px; background: white; text-decoration: none; font-weight: 740; font-size: 13px; overflow-wrap: anywhere; }
.county-next { background: #f8fcfc; border-top: 1px solid var(--line); padding: 42px 0; }
.county-next .place-grid { width: 100%; }
.shop-links { display: flex; flex-wrap: wrap; gap: 13px; }
.shop-links a { flex: 1 1 23%; min-width: 210px; background: var(--mist); border: 1px solid var(--line); border-radius: 8px; padding: 13px 14px; text-decoration: none; font-weight: 720; }
.shop-links a[aria-current="page"] { background: var(--mint); border-color: var(--teal); }
.shop-links a:hover { background: #def5ef; }
@media(max-width:950px) { .county-intro { grid-template-columns: minmax(0,1.6fr) minmax(230px,1fr); gap: 20px; } .device-diagram { height: 275px; }  }
@media(max-width:650px) { .county-intro { grid-template-columns: 1fr; } .device-diagram { width: min(100%,390px); justify-self: center; height: 268px; }  .county-next .place-grid { grid-template-columns: 1fr; } }
@media(max-width:380px) {  }

.related-shopping { border-top: 1px solid var(--line); padding: 28px 0; background: #f5faf9; }
.related-shopping .wrap { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; justify-content: space-between; }
.related-shopping p { max-width: 950px; margin: 0; }