/* 1. Reset */
* { box-sizing: border-box; }
html { scroll-padding-top: 115px; }
body { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button, input, select, textarea { border-radius: 0; }
figure, blockquote { margin: 0; }
button { color: inherit; }

/* 2. Tokens — measured sources and adaptations in docs/DESIGN_SYSTEM.md */
:root {
  --color-brand: #045eff;
  --color-brand-hover: #075ed1;
  --color-heading: #0b1a33;
  --color-service: #06273b;
  --color-text: #333;
  --color-muted: #666;
  --color-background: #fff;
  --color-surface: #f3f5f7;
  --color-border: #ededed;
  --color-field-border: #d7d7d7;
  --color-footer: #222;
  --color-rating: #f5a623;
  --color-error: #d40014;
  --color-blue-light: rgba(4,94,255,.06);
  --space-1: 5px; --space-2: 10px; --space-3: 15px; --space-4: 20px;
  --space-5: 25px; --space-6: 30px; --space-8: 40px; --space-12: 60px;
  --radius-control: 6px; --radius-card: 8px; --radius-image: 12px;
  --container: 1540px;
  --hover-shadow: 0 5px 30px rgba(34,34,34,.1);
}

/* 3. Base typography */
body { background: var(--color-background); color: var(--color-text); font: 400 15px/1.5 Roboto, Helvetica, Arial, sans-serif; }
h1,h2,h3,h4 { margin: 0 0 var(--space-3); color: var(--color-heading); font-weight: 700; overflow-wrap: break-word; text-wrap: balance; }
h1 { font-size: 38px; line-height: 1.11; }
h2 { font-size: 28px; line-height: 1.22; }
h3 { font-size: 20px; line-height: 1.3; }
h4 { font-size: 16px; line-height: 1.4; font-weight: 500; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-brand); text-decoration: none; }
a:hover { color: var(--color-brand-hover); text-decoration: underline; }
strong,b { font-weight: 700; }
.lead { font-size: 18px; line-height: 1.55; }
.small { font-size: 13px; line-height: 1.5; }
.muted, .optional { color: var(--color-muted); }
.eyebrow { color: var(--color-muted); font-size: 13px; font-weight: 500; margin-bottom: var(--space-2); }
.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; }
:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 3px; }
.skip-link { position: fixed; top: 8px; left: 15px; z-index: 100; padding: 12px 20px; color: #fff; background: var(--color-brand); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

/* 4. Layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-3); }
.section { padding-top: var(--space-12); }
main { padding-bottom: var(--space-12); }
.grid { display: grid; gap: var(--space-4); }
.grid--four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.grid--three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.grid > *, .showcase > *, .showroom-grid > *, .about-grid > *, .project-document-grid > *, .price-grid > *, .estimate-panel > *, .final-cta > * { min-width: 0; }
.section-heading { margin-bottom: var(--space-5); }
.section-heading h2 { position: relative; padding-bottom: var(--space-3); margin-bottom: var(--space-2); }
.section-heading h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 60px; height: 3px; background: var(--color-brand); }
.section-heading p { color: var(--color-muted); max-width: 820px; margin: 0; }
.button-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.section-note { margin: var(--space-4) 0 0; color: var(--color-muted); font-size: 14px; max-width: 1000px; }

/* 5. Shared components */
.icon { display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; vertical-align: middle; object-fit: contain; }
.icon--left { transform: rotate(180deg); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2); min-height: 44px; padding: 11px 20px; border: 1px solid var(--color-brand); border-radius: var(--radius-control); background: var(--color-brand); color: #fff; font-size: 15px; font-weight: 500; line-height: 1.4; text-align: center; text-decoration: none; transition: background .16s, border-color .16s; }
.button:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); color: #fff; text-decoration: none; }
.button:active { filter: brightness(.93); }
.button:disabled { opacity: .5; cursor: default; }
.button > .icon { filter: brightness(0) invert(1); }
.button--secondary { color: var(--color-text); background: #fff; border-color: var(--color-field-border); }
.button--secondary:hover { background: var(--color-surface); border-color: var(--color-brand); color: var(--color-brand); }
.button--secondary > .icon { filter: none; }
.button--white { color: var(--color-brand); border-color: #fff; background: #fff; }
.button--white:hover { color: var(--color-brand-hover); border-color: #fff; background: var(--color-surface); }
.button--white-outline { border-color: rgba(255,255,255,.8); color: #fff; background: transparent; }
.button--white-outline:hover { background: #fff; color: var(--color-heading); border-color: #fff; }
.text-link { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--color-brand); font-weight: 500; font-size: 15px; line-height: 1.4; text-align: left; }
.text-link:hover { text-decoration: underline; color: var(--color-brand-hover); }
.text-link .icon { width: 16px; height: 16px; flex-basis: 16px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: var(--radius-control); color: var(--color-text); background: var(--color-surface); text-decoration: none; }
.icon-button:hover { background: #e9ecef; text-decoration: none; }
.check-list { list-style: none; margin: var(--space-4) 0; padding: 0; }
.check-list li { position: relative; padding-left: 24px; margin-bottom: 10px; }
.check-list li::before { content: ''; position: absolute; top: 6px; left: 2px; width: 7px; height: 12px; border: solid var(--color-brand); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.card-body { padding: var(--space-4); display: flex; flex-direction: column; flex: 1; align-items: flex-start; }
.card-body .text-link:last-child { margin-top: auto; padding-top: var(--space-2); }
.service-card, .work-card, .project-card { border: 1px solid var(--color-border); border-radius: var(--radius-card); background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.service-image { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.service-card { position: relative; cursor: pointer; }
.service-card .text-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.service-card h3 { font-size: 20px; }
.service-card p { color: var(--color-muted); font-size: 14px; }
.service-card .text-link { min-height: 44px; }

/* Header and navigation */
.site-header { position: sticky; top: -36px; z-index: 30; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.05); }
.topbar { background: var(--color-surface); min-height: 36px; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 36px; gap: var(--space-4); }
.topbar nav { display: flex; align-items: center; gap: var(--space-6); }
.topbar a { color: var(--color-text); font-size: 14px; }
.topbar-inner > span { color: var(--color-muted); font-size: 13px; }
.header-messengers { display: flex; gap: 20px; }
.header-main { display: grid; grid-template-columns: 265px 145px minmax(150px,1fr) auto auto; gap: var(--space-4); align-items: center; min-height: 88px; }
.brand img { width: 265px; height: auto; }
.catalog-toggle { padding-inline: 18px; min-height: 48px; font-size: 17px; }
.header-search { display: flex; width: 100%; min-width: 0; border: 1px solid var(--color-field-border); border-radius: var(--radius-control); height: 48px; transition: border-color .16s; }
.header-search:focus-within { border-color: var(--color-brand); }
.header-search input:focus, .header-search button:focus { outline: none; box-shadow: none; }
.header-search input { min-width: 0; width: 100%; padding: 0 15px; border: 0; background: transparent; color: var(--color-text); border-radius: var(--radius-control); }
.header-search button { border: 0; border-radius: var(--radius-control); background: #fff; width: 48px; flex: 0 0 48px; }
.phone-dropdown { position: relative; }
.header-phone { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px; border: 0; border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); white-space: nowrap; font-weight: 700; }
.header-phone:hover { color: var(--color-brand); text-decoration: none; }
.header-phone-link { display: flex; align-items: center; gap: 8px; color: inherit; }
.header-phone-link:hover { text-decoration: none; }
.phone-toggle { display: grid; place-items: center; width: 20px; height: 24px; padding: 0; border: 0; background: none; color: inherit; }
.phone-toggle .icon { width: 16px; height: 16px; }
.phone-toggle-mobile,.phone-item--mobile { display: none; }
.phone-menu { position: absolute; top: 100%; left: 0; width: 240px; max-width: calc(100vw - 30px); padding: 20px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.12); border-radius: 0 0 6px 6px; z-index: 32; max-height: calc(100dvh - 130px); overflow: auto; font-size: 14px; }
.phone-item { margin-bottom: 16px; }
.phone-item strong,.phone-primary { display: flex; gap: 8px; align-items: center; color: var(--color-text); font-weight: 700; margin-bottom: 4px; }
.phone-item .icon { width: 16px; height: 16px; flex-basis: 16px; }
.phone-item p { margin: 0; color: var(--color-muted); font-size: 13px; }
.phone-item > a:not(.phone-primary) { text-decoration: underline; }
.phone-socials { display: flex; gap: 10px; margin-bottom: 18px; }
.phone-socials a { display: grid; place-items: center; width: 40px; height: 40px; background: var(--color-surface); border-radius: 50%; }
.social-icon { width: 24px; height: 24px; object-fit: contain; }
.phone-menu > .button { width: 100%; }
.shop-actions { display: flex; gap: 10px; }
.catalog-menu { position: absolute; top: 100%; left: 0; width: 100%; height: calc(100dvh - 124px); overflow: auto; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.catalog-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); min-height: 100%; padding-top: 15px; padding-bottom: 20px; }
.catalog-menu-heading { display: none; }
.catalog-sidebar { padding-right: 15px; border-right: 1px solid var(--color-border); }
.catalog-category { display: flex; align-items: center; gap: 15px; width: 100%; min-height: 41px; padding: 10px; border: 0; border-radius: 6px; background: #fff; font-size: 16px; line-height: 1.4; text-align: left; color: var(--color-text); }
.catalog-category > img { width: 25px; height: 25px; flex: 0 0 25px; object-fit: contain; }
.catalog-category > .icon { margin-left: auto; width: 12px; height: 12px; flex: 0 0 12px; }
.catalog-category[aria-expanded=true],.catalog-category:hover { background: #f0f1f3; text-decoration: none; color: var(--color-text); }
.catalog-service--first { margin-top: 8px; padding-top: 15px; border-top: 4px solid var(--color-brand); border-radius: 0; }
.catalog-panels { padding: 5px 30px 25px; }
.catalog-panel h2 { font-size: 24px; margin-bottom: 20px; }
.catalog-panel h2 a { color: var(--color-text); }
.catalog-columns { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px 30px; align-items: start; }
.catalog-group a { display: block; color: var(--color-text); margin-bottom: 7px; font-size: 15px; }
.catalog-group-title { font-weight: 700; padding-bottom: 4px; }
.catalog-group .catalog-child--extra { display: none; }
.catalog-group.is-expanded .catalog-child--extra { display: block; }
.catalog-more { padding: 0; border: 0; background: none; color: var(--color-brand); text-decoration: underline; font-size: 15px; }
.catalog-toggle[aria-expanded=true] > .icon { content: url('../assets/icons/close.svg'); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; color: var(--color-muted); padding-block: 20px; font-size: 13px; }
.breadcrumb a { color: var(--color-muted); }
.service-nav { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px solid var(--color-border); }
.service-nav a { color: var(--color-text); padding: 5px 0; }

/* Gallery */
.gallery { min-width: 0; }
.gallery-stage { position: relative; border-radius: var(--radius-image); overflow: hidden; background: var(--color-surface); }
.gallery-enlarge { position: relative; overflow: hidden; border: 0; padding: 0; width: 100%; display: block; background: none; text-align: left; }
.gallery-main { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.gallery-transition-image { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.gallery-arrow,.carousel-controls > .icon-button { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; background: #fff; color: var(--color-heading); box-shadow: 0 3px 12px rgba(0,0,0,.12); position: absolute; top: 50%; transform: translateY(-50%); }
.gallery-arrow:hover,.carousel-controls > .icon-button:hover { background: var(--color-surface); }
.gallery-arrow { z-index: 2; }
.gallery-arrow .icon,.carousel-controls > .icon-button .icon { width: 16px; height: 16px; flex-basis: 16px; }
.gallery-arrow--prev { left: 12px; }
.gallery-arrow--next { right: 12px; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.gallery-thumbs button { padding: 0; background: #fff; border: 2px solid transparent; border-radius: var(--radius-image); overflow: hidden; }
.gallery-thumbs button[aria-pressed=true] { border-color: var(--color-brand); }
.gallery-thumbs img { aspect-ratio: 16/9; width: 100%; object-fit: cover; border-radius: inherit; }
.gallery-caption { color: var(--color-muted); margin: 8px 0 0; font-size: 13px; }
.image-action { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,.94); padding: 7px 10px; border-radius: var(--radius-control); font-size: 12px; color: var(--color-text); }
.image-action .icon { width: 15px; height: 15px; flex-basis: 15px; }

/* 6. Page sections — homepage */
.home-intro { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 40px; align-items: end; padding-block: 35px 25px; }
.home-intro > div { min-width: 0; }
.home-intro h1 { text-wrap: wrap; }
.home-intro .lead { margin-bottom: 0; font-size: 16px; }
.home-intro > .button { margin-bottom: 5px; white-space: nowrap; }
.showcase { display: grid; grid-template-columns: minmax(0,3fr) minmax(280px,1fr); gap: 20px; }
.feature-carousel { --feature-inset: 52px; position: relative; margin-inline: 4px; border: 1px solid var(--color-border); border-radius: 20px; background: var(--color-surface); }
.feature-slides { position: relative; overflow: hidden; border-radius: inherit; }
.feature-slides,.feature-slide { height: 100%; }
.feature-slide { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 430px; background: var(--color-surface); color: var(--color-text); }
.feature-slide--entering { position: absolute; inset: 0; width: 100%; height: 100%; }
.feature-content { position: relative; z-index: 1; padding: 40px var(--feature-inset) 64px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.feature-content h2 { color: var(--color-heading); font-size: 34px; line-height: 1.18; }
.feature-content .eyebrow { align-self: flex-start; padding: 6px 10px; margin-bottom: 14px; border-radius: 6px; background: var(--color-brand); color: #fff; font-size: 13px; font-weight: 500; line-height: 1.45; text-transform: uppercase; letter-spacing: .5px; }
.feature-content .button { margin-top: 10px; }
.feature-image { position: absolute; left: 42%; top: 0; width: 58%; height: 100%; object-fit: cover; object-position: center 30%; -webkit-mask-image: linear-gradient(to right,transparent,#000 30%); mask-image: linear-gradient(to right,transparent,#000 30%); }
.carousel-controls { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.carousel-controls > .icon-button { pointer-events: auto; }
.carousel-controls > .icon-button:first-child { left: -19px; }
.carousel-controls > .icon-button:last-child { right: -19px; }
.carousel-dots { position: absolute; bottom: 16px; left: calc(var(--feature-inset) - 12px); display: flex; pointer-events: auto; }
.carousel-dots button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.carousel-dots span { display: block; width: 8px; height: 8px; border-radius: 50%; background: #c5ceda; }
.carousel-dots [aria-pressed=true] span { background: var(--color-brand); }
.consultation { position: relative; padding: 20px 15px 0; border: 1px solid var(--color-border); border-radius: 20px; background: linear-gradient(145deg,#0b3d91,#1a73e8); box-shadow: 0 8px 20px rgba(0,0,0,.25); color: #fff; overflow: hidden; text-align: center; display: flex; flex-direction: column; align-items: center; }
.consultation h2 { color: #fff; font-size: 18px; line-height: 1.5; text-transform: uppercase; margin-bottom: 10px; }
.consultation p { color: #e6f0ff; font-size: 15px; line-height: 1.5; max-width: 290px; margin-bottom: 15px; }
.engineer-portrait { width: 100%; max-width: 300px; position: relative; margin-top: auto; }
.consultation .engineer { display: block; width: 100%; height: auto; }
.consultation .engineer-button { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); width: 85%; min-height: 54px; padding: 14px 12px; background: #fff; color: #0b3d91; border: 2px solid #fff; border-radius: 50px; box-shadow: 0 8px 30px rgba(0,0,0,.35); font-weight: 700; font-size: 15px; line-height: 1.2; white-space: normal; transition: background .3s,color .3s,box-shadow .3s,transform .3s; }
.engineer-button > .icon { filter: none; width: 22px; height: 22px; flex-basis: 22px; }
.consultation .engineer-button:hover { color: #fff; background: #ff6b35; border-color: #ff6b35; transform: translateX(-50%) scale(1.05); box-shadow: 0 12px 40px rgba(255,107,53,.5); }
.equipment-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.equipment-card { display: grid; grid-template-columns: 90px 1fr; gap: 15px; align-items: center; padding: 20px 15px; border: 1px solid var(--color-border); border-radius: var(--radius-card); color: var(--color-text); transition: box-shadow .16s; }
.equipment-card:last-child { grid-column: span 2; }
.equipment-card img { width: 90px; height: 100px; object-fit: contain; }
.equipment-card h3 { font-size: 17px; margin-bottom: 8px; }
.equipment-card p { font-size: 13px; line-height: 1.4; color: var(--color-muted); margin-bottom: 10px; }
.equipment-card .text-link { font-size: 13px; }
.equipment-card:hover { text-decoration: none; box-shadow: var(--hover-shadow); color: var(--color-text); }
.brands-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.brands-heading h2 { font-size: 20px; margin: 0; }
.brands-marquee { overflow: hidden; margin-top: 12px; }
.brands-track { display: flex; width: max-content; animation: brands-flow 38s linear infinite; }
.brands-group { display: flex; flex: 0 0 auto; align-items: center; }
.brands-group a { display: flex; justify-content: center; align-items: center; width: 170px; padding: 10px 20px; }
.brands-group img { width: 130px; height: 90px; object-fit: contain; }
.brands-marquee:hover .brands-track,.brands-marquee:focus-within .brands-track { animation-play-state: paused; }
@keyframes brands-flow { to { transform: translateX(-50%); } }
.showroom-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px; align-items: stretch; }
.showroom-grid .gallery-main { aspect-ratio: 16/9; }
.showroom-grid .gallery-thumbs img { height: 60px; aspect-ratio: auto; }
.showroom-grid .image-action { display: none; }
.showroom-info { padding: 25px 30px; border: 1px solid var(--color-border); border-radius: var(--radius-image); display: flex; flex-direction: column; align-items: flex-start; }
.showroom-info h3 { color: var(--color-heading); }
.showroom-info h3 span { color: var(--color-brand); }
.showroom-info .check-list { width: 100%; margin-top: 5px; }
.showroom-info .check-list li { border-bottom: 1px solid var(--color-border); padding-bottom: 10px; }
.showroom-address { display: flex; align-items: flex-start; gap: 10px; margin-top: auto; }
.showroom-address .icon { margin-top: 3px; }
.showroom-address p { color: var(--color-muted); font-size: 13px; margin: 5px 0 12px; }
.hours { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; background: var(--color-surface); border-radius: var(--radius-control); font-size: 14px; }
.showroom-info .button-row { margin-top: 5px; }
.btn-showroom { padding: 12px 28px; min-height: 41px; border: 0; border-radius: 50px; font-size: 14px; font-weight: 700; line-height: 1.2; box-shadow: 0 6px 18px rgba(4,94,255,.2); transition: background .2s,transform .2s,box-shadow .2s; }
.btn-showroom .icon { width: 15px; height: 15px; flex-basis: 15px; }
.btn-showroom:hover { background: #003fd6; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(4,94,255,.3); }
.page-home .showroom-grid { grid-template-columns: 7fr 5fr; gap: 30px; align-items: stretch; }
.page-home .showroom-grid .gallery-main { aspect-ratio: auto; height: 380px; }
.page-home .showroom-grid .gallery-caption { display: none; }
.page-home .showroom-info { padding: 22px 24px; border-color: #eef3f9; box-shadow: 0 6px 18px rgba(0,0,0,.04); font-size: 14px; line-height: 1.5; }
.page-home .showroom-info h3 { font-size: 22px; line-height: 1.2; margin-bottom: 10px; }
.page-home .showroom-info > p { margin-bottom: 12px; }
.page-home .showroom-info .check-list { margin: 0 0 12px; font-size: 13px; }
.page-home .showroom-info .check-list li { padding-block: 6px; margin-bottom: 0; line-height: 1.4; }
.page-home .showroom-info .check-list li::before { top: 8px; }
.page-home .showroom-info .check-list li:last-child { border-bottom: 0; }
.page-home .showroom-info .hours { padding: 10px 14px; background: #f5f9ff; font-size: 13px; }
.page-home .showroom-info .button-row { gap: 16px; }
.page-home .showroom-info .text-link { font-size: 13px; }
.payment { margin-top: 25px; }
.payment img { width: 100%; border-radius: var(--radius-card); }
@media (max-width:600px) { .payment img { aspect-ratio: 501/104; object-fit: contain; } }
.reviews-heading { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-bottom: 25px; }
.reviews-heading .section-heading { margin-bottom: 0; }
.ratings { display: flex; gap: 12px; flex-shrink: 0; }
.rating { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; color: var(--color-text); transition: background .2s,box-shadow .2s; }
.rating:hover { text-decoration: none; background: #f7f9fc; color: var(--color-text); box-shadow: 0 4px 14px rgba(11,26,51,.06); }
.rating b { font-size: 14px; font-weight: 500; white-space: nowrap; }
.rating > strong { font-size: 24px; line-height: 1; color: var(--color-heading); margin-left: 6px; }
.rating > .icon { color: var(--color-brand); width: 16px; height: 16px; flex-basis: 16px; }
.platform-logo { width: 24px; height: 24px; flex: 0 0 24px; }
.rating-stars { color: var(--color-rating); white-space: nowrap; letter-spacing: 2px; font-size: 17px; line-height: 1; }
.review-card { border: 1px solid #e5eaf1; border-radius: 12px; padding: 24px; display: flex; flex-direction: column; background: #fff; box-shadow: 0 3px 14px rgba(11,26,51,.025); }
.review-person { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.review-author { min-width: 0; flex: 1; }
.review-author .review-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.review-avatar { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; font-size: 20px; color: #fff; }
.review-avatar--0 { background: #16a6a1; }.review-avatar--1 { background: #5964ee; }.review-avatar--2 { background: #59b960; }
.review-head { min-width: 0; }
.review-head h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.review-source { display: flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; margin-left: auto; border-radius: 10px; background: #f2f4f6; transition: background .2s; }
.review-source:hover { background: #e8edf3; }
.review-source .platform-logo { width: 20px; height: 20px; flex-basis: 20px; }
.review-topic { font-size: 14px; font-weight: 500; color: var(--color-heading); }
.review-author .rating-stars { margin: 0; font-size: 19px; letter-spacing: 1px; }
.review-card blockquote { line-height: 1.65; margin: 0 0 12px; font-size: 14px; }
.review-publication { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.review-date { margin: 0; color: var(--color-muted); font-size: 12px; line-height: 1.4; text-align: right; }
.review-publication .review-source { margin-left: 0; }
.review-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.review-badges > span { padding: 6px 10px; border-radius: 6px; background: #edf5ff; color: #045eff; font-size: 13px; line-height: 1.45; }
.work-image { position: relative; display: block; border: 0; background: var(--color-surface); padding: 0; width: 100%; }
.work-image > img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: center 25%; }
.work-object-badge { position: absolute; top: 14px; left: 14px; max-width: calc(100% - 28px); padding: 7px 11px; border-radius: 7px; background: rgba(255,255,255,.94); color: var(--color-heading); font-size: 13px; font-weight: 500; line-height: 1.4; pointer-events: none; }
.work-cursor { display: grid; place-items: center; position: absolute; z-index: 2; left: var(--cursor-x,50%); top: var(--cursor-y,50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.96); color: var(--color-brand); box-shadow: 0 4px 18px rgba(0,0,0,.15); pointer-events: none; opacity: 0; transform: translate(-50%,-50%) scale(.8); transition: opacity .15s,transform .15s; }
.work-cursor .icon { width: 24px; height: 24px; }
@media (hover:hover) and (pointer:fine) { .work-image.is-pointing { cursor: none; }.work-image.is-pointing .work-cursor { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.work-card dl { margin: 0 0 20px; }
.work-card dt { color: var(--color-brand); font-size: 13px; text-transform: uppercase; font-weight: 700; letter-spacing: .5px; }
.work-card dd { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 0; font-size: 14px; }
.work-card dd::before { content: '—'; flex: 0 0 auto; color: var(--color-brand); font-weight: 500; }
.article-card { position: relative; transition: box-shadow .2s,border-color .2s,background .2s; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-card); display: flex; flex-direction: column; align-items: flex-start; }
.article-icon { width: 55px; height: 55px; object-fit: contain; margin-bottom: 20px; }
.article-card h3 { font-size: 18px; }
.article-card p { font-size: 14px; color: var(--color-muted); }
.article-card .text-link { margin-top: auto; min-height: 44px; }
.article-card .text-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.article-card:focus-within { border-color: var(--color-brand); box-shadow: var(--hover-shadow); }

/* Ventilation */
.page-ventilation h1,.page-ventilation h2,.page-ventilation h3,.page-ventilation h4 { text-wrap: wrap; }
.page-ventilation .section-heading p { max-width: none; }
.hero-vent { position: relative; overflow: hidden; border-radius: var(--radius-image); color: #fff; background: var(--color-service); }
.hero-vent-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-vent::after { content: ''; position: absolute; inset: 0; background: rgba(6,39,59,.53); }
.hero-vent-content { position: relative; z-index: 2; padding: 45px; width: 64%; }
.hero-vent-art { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 42%; pointer-events: none; }
.hero-vent-art::before { content: ''; position: absolute; top: 18%; right: 4%; width: 90%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(4,94,255,.16); }
.hero-vent-cutout { position: absolute; bottom: 0; width: 100%; height: 94%; object-fit: contain; object-position: center bottom; }
.hero-vent h1 { color: #fff; }
.hero-vent .eyebrow { color: #fff; }
.hero-vent-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.hero-vent-badges > span { padding: 7px 11px; border-radius: 6px; background: var(--color-brand); color: #fff; font-size: 13px; font-weight: 500; line-height: 1.4; }
.hero-vent .lead { max-width: none; }
.hero-vent .check-list { margin: 20px 0 25px; }
.hero-vent .check-list li::before { border-color: #fff; }
.hero-vent .hero-note { max-width: none; margin: 20px 0 0; }
.object-card { padding: 0; border: 1px solid var(--color-border); background: #fff; border-radius: var(--radius-card); overflow: hidden; text-align: left; transition: box-shadow .16s; }
.object-card > img { width: 100%; aspect-ratio: 16/8; object-fit: cover; }
.object-card > span { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 20px; font-size: 18px; font-weight: 500; }
.object-card:hover { box-shadow: var(--hover-shadow); color: var(--color-brand); }
.project-document-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 30px; align-items: start; }
.project-subtitle { font-size: 20px; line-height: 1.3; margin-bottom: 12px; }
.project-scope > p,.project-ownership p { color: var(--color-muted); font-size: 14px; line-height: 1.65; }
.deliverables { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; padding: 0; margin: 24px 0 0; }
.deliverables li { display: flex; flex-direction: column; gap: 0; padding: 20px; border: 1px solid var(--color-border); border-radius: 12px; background: #fff; }
.deliverable-number { display: grid; place-items: center; align-self: flex-start; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 9px; background: #edf5ff; color: var(--color-brand); font-size: 14px; font-weight: 700; }
.deliverables h3 { font-size: 16px; line-height: 1.35; margin-bottom: 8px; }
.deliverables p { font-size: 13px; line-height: 1.6; color: var(--color-muted); margin: 0; }
.project-ownership { margin-top: 26px; }
.project-ownership p { margin: 0; }
.document-panel { padding: 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; }
.document-panel figure { margin: 0 0 24px; }
.document-image { display: block; background: #fff; border: 1px solid var(--color-field-border); border-radius: 8px; padding: 10px; width: 100%; cursor: zoom-in; }
.document-image img { width: 100%; aspect-ratio: 740/460; object-fit: contain; }
.document-panel figcaption { font-size: 13px; margin-top: 12px; color: var(--color-muted); line-height: 1.8; }
.document-panel figcaption strong { color: var(--color-text); }
.document-panel h3 { font-size: 18px; }
.download-panel { padding-top: 20px; border-top: 1px solid var(--color-field-border); }
.download-panel p { font-size: 14px; color: var(--color-muted); }
.document-download { width: 100%; padding-inline: 12px; font-size: 14px; }
.steps-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.steps-grid > .stage-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--color-border); border-radius: 12px; background: #fff; }
.stage-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.stage-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #edf5ff; color: var(--color-brand); }
.stage-icon .icon { width: 24px; height: 24px; }
.stage-number { font-size: 13px; font-weight: 700; color: #8c99ab; }
.stage-card h3 { font-size: 18px; line-height: 1.35; }
.stage-card p { font-size: 14px; line-height: 1.6; color: var(--color-muted); margin: 0; }
.steps-grid > .stage-card--final { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.stage-card--final h3,.stage-card--final p,.stage-card--final .stage-number { color: #fff; }
.stage-card--final .stage-icon { background: rgba(255,255,255,.16); color: #fff; }
.pricing-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.pricing-card { display: flex; flex-direction: column; align-items: flex-start; padding: 30px; border: 1px solid #e1e7ef; border-radius: 14px; background: #fff; }
.pricing-card--project { border-color: var(--color-brand); background: #f6f9ff; }
.pricing-stage { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--color-muted); font-size: 13px; }
.pricing-stage > span { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #edf5ff; color: var(--color-brand); font-weight: 700; }
.pricing-card h3 { font-size: 22px; line-height: 1.3; margin-bottom: 18px; }
.pricing-amount { margin: 0 0 8px; font-size: 48px; line-height: 1.1; letter-spacing: -1px; font-weight: 700; color: var(--color-heading); }
.pricing-card--project .pricing-amount { color: var(--color-brand); }
.pricing-caption { margin: 0; color: var(--color-muted); font-size: 14px; }
.pricing-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; width: 100%; padding-block: 22px; margin: 24px 0 20px; border-block: 1px solid #e1e7ef; }
.pricing-facts span,.pricing-facts strong,.pricing-facts small { display: block; }
.pricing-facts span { font-size: 12px; color: var(--color-muted); margin-bottom: 7px; }
.pricing-facts strong { font-size: 19px; line-height: 1.35; color: var(--color-heading); }
.pricing-facts small { font-size: 12px; color: var(--color-muted); margin-top: 5px; }
.pricing-card .check-list { font-size: 14px; margin: 0 0 24px; }
.pricing-card .check-list li { min-height: 24px; display: flex; align-items: center; margin-bottom: 8px; }
.pricing-card .check-list li::before { top: 50%; transform: translateY(-50%) rotate(45deg); }
.pricing-card > .button { width: 100%; margin-top: auto; }
.pricing-note { display: flex; align-items: flex-start; gap: 14px; margin-top: 20px; padding: 22px 24px; background: #f0f6ff; border: 1px solid #dce8fa; border-radius: 10px; }
.pricing-note > .icon { width: 24px; height: 24px; flex: 0 0 24px; margin-top: 1px; color: var(--color-brand); }
.pricing-note h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.4; }
.pricing-note p { font-size: 15px; line-height: 1.6; color: #4a5a70; margin: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; }
.filter { border: 1px solid var(--color-field-border); padding: 10px 16px; min-height: 44px; border-radius: var(--radius-control); background: #fff; color: var(--color-text); }
.filter:hover { border-color: var(--color-brand); color: var(--color-brand); }
.filter[aria-pressed=true] { color: #fff; background: var(--color-brand); border-color: var(--color-brand); }
.project-card { border-radius: 12px; }
.project-card .project-gallery { padding: 0; }
.project-gallery .gallery-stage { border-radius: 0; }
.project-gallery .gallery-main { aspect-ratio: 16/10; }
.project-gallery .gallery-thumbs { gap: 6px; margin: 10px 12px 0; }
.project-gallery .gallery-caption { display: none; }
.photo-badges { position: absolute; z-index: 3; top: 14px; left: 14px; right: 14px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.photo-badges > span { padding: 7px 11px; border-radius: 7px; background: rgba(255,255,255,.94); color: var(--color-heading); font-size: 13px; font-weight: 500; line-height: 1.4; }
.project-gallery .image-action { display: none; }
.project-card .card-body { padding-top: 15px; }
.project-card h3 { margin-bottom: 8px; }
.project-card .check-list { margin: 0 0 20px; font-size: 14px; }
.project-card .check-list li { display: flex; align-items: center; min-height: 24px; margin-bottom: 8px; }
.project-card .check-list li::before { top: 50%; transform: translateY(-50%) rotate(45deg); }
.project-card h4 { margin: 5px 0 12px; }
.project-price { border-top: 1px solid var(--color-border); width: 100%; padding-top: 15px; margin-top: auto; margin-bottom: 20px; }
.project-price span { display: block; color: var(--color-muted); }
.project-price strong { display: block; font-size: 26px; color: var(--color-heading); margin-top: 5px; }
.project-card .button { width: 100%; }
.collection-footer { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 25px; }
.collection-count { color: var(--color-muted); font-size: 13px; margin: 0; }
.estimate-panel { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); align-items: start; gap: 40px; padding: 40px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; }
.estimate-copy h2 { max-width: none; }
.estimate-phone { font-size: 24px; font-weight: 700; margin: 0 0 6px; }
.estimate-copy > .small { margin-top: 20px; }
.estimate-bottom { display: grid; grid-template-columns: minmax(0,1fr) 210px; align-items: start; gap: 24px; margin-top: 22px; }
.estimate-contacts { min-width: 0; flex: 1; }
.estimate-contacts > .small { margin: 18px 0 0; font-size: 12px; line-height: 1.65; }
.estimate-art { width: 100%; height: 185px; margin: 0; object-fit: contain; object-position: center top; }
.estimate-form { background: #fff; padding: 25px; border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.company-name { color: var(--color-brand); }
.about-image { border-radius: var(--radius-image); height: 360px; object-fit: cover; object-position: center; width: 100%; }
.final-cta { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; padding: 40px; border: 1px solid #dce7f6; border-radius: var(--radius-image); background-color: #f3f7fc; background-image: linear-gradient(100deg,rgba(255,255,255,.94),rgba(255,255,255,.7)),url('../assets/images/ventilation-final-background.jpg'); background-size: cover; background-position: center; }
.final-cta h2 { max-width: none; }
.final-cta > div > .small { margin-top: 20px; margin-bottom: 0; }
.final-contacts { border-left: 1px solid var(--color-field-border); padding-left: 40px; }
.final-contacts h3 { font-size: 18px; }
.final-contact-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 20px; }
.final-contact-link { display: flex; align-items: center; gap: 9px; min-height: 32px; width: fit-content; max-width: 100%; font-size: 15px; }
.final-contact-link--wide { grid-column: 1/-1; }
.final-contact-link .icon,.final-contact-link .social-icon { width: 22px; height: 22px; flex: 0 0 22px; }
.final-contact-link > span { overflow-wrap: anywhere; }
.social-links { display: flex; gap: 15px; flex-wrap: wrap; }
.social-links a { overflow-wrap: anywhere; }
.final-contacts .social-links { margin-bottom: 20px; }

/* Forms, dialogs, footer */
.form-field { display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: 500; margin-bottom: 15px; }
.form-field input, .form-field select, .form-field textarea { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 11px 12px; border: 1px solid var(--color-field-border); border-radius: var(--radius-control); background: #fff; color: var(--color-text); font-size: 15px; font-weight: 400; }
.form-field textarea { resize: vertical; min-height: 85px; }
.form-field [aria-invalid=true] { border-color: var(--color-error); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-field .optional { font-size: 12px; font-weight: 400; }
.field-error { font-size: 12px; font-weight: 400; color: var(--color-error); }
.field-error:empty { display: none; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.6; margin: 10px 0 15px; cursor: pointer; }
.consent input { width: 20px; height: 20px; flex: 0 0 20px; margin: 0; accent-color: var(--color-brand); }
.consent a { text-decoration: underline; }
.form-hint { font-size: 12px; color: var(--color-muted); margin: 10px 0 0; }
.form-error { color: var(--color-error); font-size: 13px; }
.form-error:empty { display: none; }
.mail-result { margin-top: 25px; padding-top: 25px; border-top: 1px solid var(--color-field-border); }
.mail-result h3 { font-size: 20px; }
.mail-preview { font-family: inherit; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; padding: 15px; background: var(--color-surface); border-radius: var(--radius-control); margin: 15px 0; }
.mail-result .text-link { margin: 15px 0 0; min-height: 44px; }
.mail-result > .small { margin-top: 12px; }
.request-dialog { width: 620px; max-width: calc(100% - 30px); max-height: 90vh; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 35px; color: var(--color-text); }
.request-dialog::backdrop, .lightbox::backdrop { background: rgba(0,0,0,.7); }
.request-dialog h2 { font-size: 26px; padding-right: 30px; }
.request-dialog > p { color: var(--color-muted); font-size: 14px; }
.dialog-close { position: absolute; top: 10px; right: 10px; z-index: 2; }
.direct-contact { padding-top: 20px; border-top: 1px solid var(--color-border); margin: 25px 0 0; }
.lightbox { max-width: calc(100% - 20px); width: 1200px; height: min(900px,92vh); max-height: 92vh; border: 0; border-radius: 8px; padding: 55px 60px 30px; background: #fff; }
.lightbox[open] { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; gap: 10px; }
.lightbox figure { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.lightbox figure > img { min-height: 0; max-height: calc(100% - 50px); width: 100%; object-fit: contain; }
.lightbox figcaption { font-size: 14px; text-align: center; flex-shrink: 0; }
.lightbox-prev,.lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 8px; }.lightbox-next { right: 8px; }
#lightbox-count { text-align: center; margin: 0; color: var(--color-muted); }
body.dialog-open { overflow: hidden; }
.site-footer { background: var(--color-footer); color: #b7b7b7; padding-top: 40px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.1fr 1fr 1.4fr; gap: 30px; padding-bottom: 40px; }
.footer-brand > a { max-width: 240px; background: #fff; padding: 10px; border-radius: 6px; }
.footer-brand img { width: 100%; height: auto; }
.site-footer h2 { color: #fff; font-size: 13px; line-height: 1.5; text-transform: uppercase; margin-bottom: 20px; }
.footer-grid > div > a { display: block; margin-bottom: 10px; }
.site-footer a { color: #c8c8c8; }
.site-footer a:hover { color: #fff; }
.footer-grid p { font-size: 13px; margin: 15px 0; }
.footer-contacts > .footer-phone { color: #fff; font-size: 17px; font-weight: 500; }
.footer-contacts > .footer-contact { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; }
.footer-contact .icon { width: 18px; height: 18px; flex-basis: 18px; filter: brightness(0) invert(.8); margin-top: 2px; }
.footer-socials { display: flex; gap: 18px; margin-top: 18px; }
.footer-socials a { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.footer-socials .social-icon { width: 24px; height: 24px; }
.noscript { padding: 20px; border: 1px solid var(--color-border); background: var(--color-surface); }

/* 7. Interaction states */
.service-card { transition: box-shadow .2s; }
.service-card:focus-within { box-shadow: var(--hover-shadow); }
@media (hover:hover) { .service-card:hover, .article-card:hover { box-shadow: var(--hover-shadow); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition: none; } .brands-track { animation: none; } }

/* 8. Responsive rules */
@media (max-width:1199px) {
 .estimate-bottom { grid-template-columns: minmax(0,1fr) 180px; gap: 20px; }
 .hero-vent-content { width: 65%; padding: 35px; }.hero-vent h1 { font-size: 34px; }
 .deliverables li { padding: 16px; }.pricing-card { padding: 26px; }.estimate-phone { font-size: 22px; }
 .header-main { grid-template-columns: 220px 48px minmax(120px,1fr) auto auto; gap: 15px; }
 .brand img { width: 220px; }
 .catalog-toggle { padding: 10px; }.catalog-toggle > span { display: none; }
 .header-phone { font-size: 14px; }.shop-actions { gap: 5px; }
 .consultation .engineer-button { font-size: 15px; padding-inline: 12px; }
 .catalog-layout { grid-template-columns: 250px minmax(0,1fr); }.catalog-panels { padding-inline: 25px; }.catalog-columns { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px; }
 .reviews-heading { align-items: flex-start; }.rating { padding: 12px; gap: 8px; }.rating b { font-size: 13px; }
 .footer-grid { grid-template-columns: 1fr 1fr 1fr; }.footer-brand { grid-column: 1/-1; }.footer-contacts { grid-column: span 2; }
 .topbar nav { gap: 20px; }.topbar-inner > span { display: none; }
 .feature-carousel { --feature-inset: 48px; }.feature-content { padding: 30px var(--feature-inset) 64px; }.showcase { grid-template-columns: minmax(0,2.3fr) minmax(280px,1fr); }
 .feature-content h2 { font-size: 30px; }
 .equipment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.equipment-card:last-child { grid-column: span 2; }
 .showroom-info { padding: 25px; }.rating { gap: 15px; }.rating-stars { font-size: 16px; }
 .price-spec { gap: 25px; }.estimate-panel { gap: 30px; }
}
@media (max-width:991px) {
 .phone-menu { right: 0; left: auto; }
 .header-main { grid-template-columns: 210px 48px minmax(100px,1fr) auto; }.shop-actions { display: none; }
 .catalog-layout { grid-template-columns: 230px minmax(0,1fr); }.catalog-columns { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }.catalog-panels { padding-inline: 20px; }
 .consultation { display: grid; grid-template-columns: 1fr 240px; padding: 20px 25px 0; text-align: left; column-gap: 20px; }
 .consultation h2 { align-self: end; }.consultation p { align-self: start; max-width: none; }.engineer-portrait { grid-column: 2; grid-row: 1/3; width: 240px; }
 .consultation .engineer-button { font-size: 15px; }
 .page-home .showroom-grid { grid-template-columns: 1fr 1fr; gap: 20px; }.page-home .showroom-info { padding: 20px; }.page-home .showroom-grid .gallery-main { height: 360px; }
 .reviews-heading { flex-direction: column; gap: 20px; }.ratings { align-self: stretch; }.rating { flex: 1; }.rating > .icon { margin-left: auto; }
 .home-intro { grid-template-columns: 1fr; gap: 20px; }.home-intro > .button { justify-self: start; }
 .showcase { grid-template-columns: 1fr; }.consultation { min-height: 215px; padding: 25px; align-items: flex-start; text-align: left; }
 .grid--four,.grid--three { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .showroom-grid { grid-template-columns: 1fr 1fr; gap: 20px; }.showroom-info { padding: 20px; }
 .showroom-grid .gallery-main { aspect-ratio: 1/1; }.showroom-info .button-row { gap: 10px; }
 .project-document-grid { grid-template-columns: 1fr; gap: 25px; }.steps-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
 .document-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }.document-panel figure { margin: 0; }.download-panel { padding: 0; border: 0; }
 .hero-vent-content { width: 100%; padding: 35px 35px 15px; }.hero-vent-art { position: relative; top: auto; right: auto; bottom: auto; width: 100%; height: 310px; }.hero-vent-art::before { width: 320px; top: 5%; right: calc(50% - 160px); }.hero-vent-cutout { height: 100%; }.service-nav { gap: 20px; }
 .estimate-panel { grid-template-columns: 1fr; }.estimate-bottom { grid-template-columns: minmax(0,1fr) 220px; }.estimate-art { width: 100%; max-width: 220px; height: 190px; margin: 0; justify-self: end; }
 .price-card { padding: 25px; }.price-card--featured { padding-top: 23px; }
 .price-spec { flex-direction: column; gap: 15px; }
 .estimate-panel,.final-cta { padding: 30px; gap: 30px; }.estimate-form { padding: 20px; }
 .about-grid { gap: 25px; }.about-grid .lead { font-size: 16px; }
 .final-contacts { padding-left: 25px; }
 .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width:767px) {
 .estimate-bottom { grid-template-columns: 1fr; gap: 20px; }.estimate-art { width: 230px; height: 180px; justify-self: start; }
 .deliverables { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.deliverables li { gap: 0; }
 .document-panel { display: block; padding: 20px; }.document-panel figure { margin-bottom: 24px; }
 .download-panel { padding-top: 20px; border-top: 1px solid var(--color-field-border); }
 .pricing-grid { grid-template-columns: 1fr; gap: 18px; }.pricing-card { padding: 24px; }.pricing-amount { font-size: 42px; }.pricing-card h3 { font-size: 20px; }.pricing-facts { gap: 18px; }
 .hero-vent-art { height: 270px; }.hero-vent-art::before { width: 280px; right: calc(50% - 140px); }
 .project-card .project-gallery { padding: 0; }
 html { scroll-padding-top: 135px; }
 h1 { font-size: 28px; line-height: 1.2; }h2 { font-size: 22px; line-height: 1.28; }h3 { font-size: 18px; }
 .lead { font-size: 16px; }.section { padding-top: 40px; }main { padding-bottom: 40px; }
 .topbar { display: none; }.site-header { top: 0; }.header-main { grid-template-columns: 44px minmax(0,1fr) 44px; gap: 10px; padding-block: 10px; }
 .catalog-toggle { grid-column: 1; grid-row: 1; min-height: 44px; background: #fff; border-color: var(--color-border); }
 .catalog-toggle .icon { filter: none; }.brand { grid-column: 2; grid-row: 1; justify-self: center; width: min(245px,100%); }.brand img { width: 100%; }
 .phone-dropdown { grid-column: 3; grid-row: 1; justify-self: end; }.header-phone { padding: 0; }.header-phone-link,.phone-toggle-desktop { display: none; }.phone-toggle { width: 44px; height: 44px; }.phone-toggle-mobile,.phone-item--mobile { display: block; }.phone-toggle-mobile .icon { width: 20px; height: 20px; }
 .phone-menu { right: 0; }
 .catalog-menu { height: calc(100dvh - 118px); }.catalog-layout { display: block; padding-top: 0; }.catalog-menu-heading { display: flex; align-items: center; justify-content: space-between; padding-block: 10px; border-bottom: 1px solid var(--color-border); }
 .catalog-sidebar { border: 0; padding: 10px 0; }.catalog-category { font-size: 15px; min-height: 45px; }.catalog-category > .icon { transform: rotate(90deg); }.catalog-category[aria-expanded=true] > .icon { transform: rotate(-90deg); }
 .catalog-panels { display: none; }.catalog-sidebar > .catalog-panel { padding: 18px 12px 24px; background: #f8fafc; }.catalog-panel h2 { font-size: 19px; }.catalog-columns { grid-template-columns: 1fr 1fr; gap: 20px 15px; }.catalog-group a { font-size: 13px; }
 .header-search { grid-column: 1/-1; grid-row: 2; height: 44px; }.header-search input { font-size: 16px; }
 .home-intro { padding-block: 25px; gap: 15px; }.desktop-break { display: none; }.home-intro .lead { font-size: 15px; }
 .showcase { gap: 20px; }.feature-slide { grid-template-columns: 1fr 1fr; min-height: 290px; }
 .feature-content { padding: 25px var(--feature-inset) 64px; }.feature-content h2 { font-size: 28px; }.feature-content p { font-size: 14px; }.feature-content .eyebrow { font-size: 12px; }
 .feature-content .button { font-size: 14px; padding: 10px 12px; }
 .grid--three { grid-template-columns: 1fr; }.grid--four { gap: 15px; }.service-card h3 { font-size: 18px; }.card-body { padding: 18px; }
 .equipment-card { grid-template-columns: 75px 1fr; padding: 15px; gap: 12px; }.equipment-card img { width: 75px; height: 90px; }
 .equipment-card h3 { font-size: 16px; }.equipment-card p { font-size: 12px; }
 .brands-heading { align-items: baseline; }.brands-heading h2 { font-size: 18px; }.brands-heading .text-link { font-size: 13px; }
 .showroom-grid { grid-template-columns: 1fr; gap: 20px; }.showroom-grid .gallery-main { aspect-ratio: 4/3; }.showroom-info { padding: 20px; }
 .showroom-grid .gallery-thumbs img { height: 45px; }
 .page-home .showroom-grid { grid-template-columns: 1fr; }.page-home .showroom-grid .gallery-main { height: 280px; }.page-home .showroom-info { padding: 20px; }
 .payment { margin-top: 20px; }.ratings { gap: 10px; }.rating { padding: 12px; gap: 8px; flex-wrap: nowrap; }.rating > strong { font-size: 23px; }.rating > .icon { display: block; }.rating b { font-size: 13px; }
 .review-card { padding: 20px; }.review-card blockquote { line-height: 1.6; }
 .work-card h3 { font-size: 20px; }.article-card { padding: 18px; }.article-card h3 { font-size: 17px; }
 .hero-vent-content { padding: 25px 20px; }.hero-vent h1 { font-size: 28px; }.hero-vent .eyebrow { font-size: 11px; line-height: 1.6; }.hero-vent::after { background: rgba(6,39,59,.66); }.hero-vent .check-list { font-size: 14px; }.hero-vent .button-row { gap: 10px; }.hero-vent .button { width: 100%; }.hero-note { font-size: 12px; }
 .service-nav { justify-content: flex-start; gap: 5px 20px; padding: 15px 0; font-size: 13px; }
 .object-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }.object-card > img { aspect-ratio: 4/3; }.object-card > span { font-size: 15px; padding: 12px; gap: 10px; }.object-card .icon { width: 14px; height: 14px; flex-basis: 14px; }
 .project-document-grid { grid-template-columns: 1fr; gap: 25px; }.document-panel { padding: 20px; }.deliverables { margin-top: 20px; }.deliverables li { gap: 0; }.deliverables h3 { font-size: 17px; }
 .steps-grid { gap: 25px 20px; }.steps-grid h3 { font-size: 17px; }.step-number { font-size: 18px; }
 .price-grid { grid-template-columns: 1fr; gap: 20px; }.price-card { padding: 20px; }.price-card--featured { padding-top: 18px; }.price-card h3 { font-size: 20px; }.price-spec { flex-direction: row; gap: 25px; margin: 10px 0 20px; }.price-spec dd { font-size: 16px; }.price-spec .price-value { font-size: 26px; }
 .filters { gap: 8px; margin-bottom: 20px; }.filter { font-size: 13px; padding: 10px 13px; }
 .project-card .check-list { font-size: 14px; }
 .estimate-panel,.final-cta { grid-template-columns: 1fr; padding: 20px; gap: 25px; }.estimate-form { padding: 18px; }.estimate-phone { font-size: 22px; }
 .about-grid { grid-template-columns: 1fr; gap: 20px; }.about-image { height: 280px; }
 .final-contacts { padding-left: 0; padding-top: 25px; border-left: 0; border-top: 1px solid var(--color-field-border); }
 .footer-grid { gap: 25px; }.footer-grid > div { min-width: 0; }.site-footer h2 { margin-bottom: 15px; font-size: 12px; }.site-footer { font-size: 13px; }.site-footer a { overflow-wrap: anywhere; }.footer-contacts { grid-column: auto; }
 .request-dialog { padding: 30px 20px 20px; max-height: 92vh; }.request-dialog h2 { font-size: 22px; }.form-field input,.form-field select,.form-field textarea { font-size: 16px; }.form-row { gap: 10px; }.form-field { font-size: 13px; }.request-dialog .button { max-width: 100%; }
 .lightbox { padding: 55px 15px 25px; height: 85vh; }.lightbox-prev,.lightbox-next { top: auto; bottom: 10px; transform: none; }.lightbox-prev { left: 10px; }.lightbox-next { right: 10px; }.lightbox figure > img { max-height: calc(100% - 60px); }
}
@media (max-width:479px) {
 .deliverables { grid-template-columns: 1fr; }.deliverables li { padding: 20px; }.deliverables h3 { font-size: 17px; }.deliverables p { font-size: 14px; }
 .project-subtitle { font-size: 18px; }.pricing-card { padding: 20px; }.pricing-amount { font-size: 38px; }.pricing-facts strong { font-size: 17px; }.pricing-note { padding: 16px; gap: 10px; }
 .steps-grid > .stage-card { padding: 22px; }.photo-badges { top: 12px; left: 12px; right: 12px; }.photo-badges > span { padding: 6px 9px; font-size: 12px; }
 .feature-carousel { --feature-inset: 20px; }.feature-slides,.feature-slide { height: auto; }.feature-slide { grid-template-columns: 1fr; min-height: 0; }.feature-content { padding: 22px var(--feature-inset) 26px; min-height: 330px; }.feature-content h2 { font-size: 28px; }.feature-image { position: static; width: 100%; height: 200px; object-position: center 30%; -webkit-mask-image: linear-gradient(to bottom,transparent,#000 30%); mask-image: linear-gradient(to bottom,transparent,#000 30%); }.feature-content .button { margin-top: 5px; }.feature-content .eyebrow { margin-bottom: 6px; }
 .consultation { display: flex; padding: 20px 15px 0; text-align: center; gap: 0; }.consultation h2 { align-self: center; max-width: 260px; }.consultation p { align-self: center; max-width: 280px; }.engineer-portrait { width: 100%; max-width: 280px; }
 .consultation .engineer-button { font-size: 15px; padding-inline: 12px; }
 .ratings { flex-direction: column; gap: 8px; }.rating { padding: 12px 15px; }.rating > strong { margin-left: auto; }.rating > .icon { margin-left: 5px; }
 .review-person { gap: 10px; }.review-avatar { flex-basis: 40px; width: 40px; height: 40px; font-size: 18px; }
 .grid--four { grid-template-columns: 1fr; gap: 20px; }.service-card { display: grid; grid-template-columns: 110px 1fr; }.service-image { height: 100%; aspect-ratio: auto; object-fit: cover; }.service-card .card-body { padding: 15px; }.service-card h3 { font-size: 17px; }.service-card p { font-size: 13px; }.service-card .text-link { font-size: 13px; }
 .equipment-grid { grid-template-columns: 1fr; gap: 15px; }.equipment-card:last-child { grid-column: auto; }.equipment-card { grid-template-columns: 85px 1fr; }.equipment-card img { width: 85px; }.equipment-card p { font-size: 13px; }
 .article-card { display: grid; grid-template-columns: 50px 1fr; gap: 0 15px; }.article-icon { grid-row: 1/4; width: 50px; height: 50px; }.article-card h3,.article-card p,.article-card .text-link { grid-column: 2; }
 .object-card > span { flex-direction: column; align-items: flex-start; font-size: 14px; min-height: 78px; gap: 8px; }.object-card .icon { align-self: flex-end; }
 .steps-grid { grid-template-columns: 1fr; gap: 20px; }.steps-grid li { display: grid; grid-template-columns: 30px 1fr; gap: 0 15px; }.step-number { grid-row: 1/3; margin: 0; }.steps-grid p { grid-column: 2; }
 .footer-grid { grid-template-columns: 1fr; gap: 25px; }.footer-grid > div { border-bottom: 1px solid #3b3b3b; padding-bottom: 10px; }.footer-grid > div:last-child { border: 0; padding: 0; }
 .form-row { grid-template-columns: 1fr; gap: 0; }.form-field { margin-bottom: 12px; }.request-dialog { padding-inline: 15px; }
}
/* Keep the HTML hidden attribute authoritative for all interactive components. */
[hidden] { display: none; }