:root {
  --ink: #303030;
  --accent: #ef3f36;
  --line: #d9d9d9;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.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; }

.hero { position: relative; isolation: isolate; width: 100%; min-height: 640px; display: grid; place-items: center; padding: 90px 24px; overflow: hidden; background: #1d2327; color: #fff; text-align: center; }
.hero-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 47%; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.38); }
.hero-content { width: min(100%, 1040px); }
.hero h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.16; font-weight: 700; text-shadow: 0 2px 12px #0005; }
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 28px 90px; margin: 44px 0 38px; }
.hero-button { display: inline-flex; align-items: center; justify-content: center; min-height: 62px; padding: 16px 24px; border: 1px solid #ffffff80; border-radius: 9px; font-size: 1.4rem; line-height: 1.25; transition: background-color .2s, box-shadow .2s, border-color .2s, transform .2s; }
.hero-button-primary { background: #080808; box-shadow: 0 0 10px #ffffff38; }
.hero-button-secondary { background: #161b2080; backdrop-filter: blur(8px); }
.hero-button:focus-visible { outline: 3px solid white; outline-offset: 5px; box-shadow: 0 0 26px #ffffff80; }
@media (hover: hover) {
  .hero-button:hover { background: #ffffff2e; border-color: white; box-shadow: 0 0 14px #ffffff80, 0 0 32px #ffffff40; transform: translateY(-2px); }
  .hero-button-primary:hover { background: #303030; }
}
.hero-button:active { transform: translateY(1px); background: #ffffff40; }
.hero-phone { display: inline-block; font-size: clamp(1.5rem, 2.7vw, 2.15rem); line-height: 1.3; }
.phone-line { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.hero .phone-line { align-items: center; }
.phone-line a { white-space: nowrap; }
.contact-name { display: block; font-size: 1rem; line-height: 1.4; font-weight: 600; letter-spacing: .035em; }
.hero .contact-name { color: #e0e8ee; }
.contact-layout .contact-name { color: #536570; }
.photo-credit { position: absolute; bottom: 12px; right: 20px; left: 20px; text-align: right; font-size: 12px; line-height: 1.5; color: #f3f6f8; }
.photo-credit a { text-decoration: underline; text-underline-offset: 2px; }
.hero-location { display: flex; width: fit-content; max-width: 100%; margin: 12px auto 0; gap: 10px; align-items: center; justify-content: center; font-size: clamp(1rem, 2vw, 1.5rem); line-height: 1.4; }
.hero-location svg { flex-shrink: 0; }
.hero-phone:hover, .hero-location:hover { text-decoration: underline; }
.hero-phone:focus-visible, .hero-location:focus-visible { outline: 2px solid white; outline-offset: 5px; }
@media (max-width: 760px) {
  .hero { min-height: 560px; padding: 64px 20px; }
  .hero h1 { font-size: clamp(1.9rem, 6vw, 2.7rem); }
  .hero-actions { flex-direction: column; align-items: center; gap: 16px; margin: 34px 0 30px; }
  .hero-button { width: min(100%, 320px); min-height: 56px; font-size: 1.125rem; }
}

.section { width: 100%; }
.container { width: min(1310px, calc(100% - 64px)); margin: 0 auto; }
.services { text-align: center; padding: 86px 0 70px; border-bottom: 2px solid var(--line); }
.services h2 { margin: 0; font-size: clamp(28px, 3.45vw, 50px); line-height: 1.12; }
.lead { margin: 14px 0 0; font-size: clamp(22px, 2.9vw, 42px); line-height: 1.08; }
.services-label { margin: 38px 0 0; font-size: clamp(22px, 2.7vw, 39px); }
.service-list { display: grid; grid-template-columns: 1fr 44px 1.5fr 44px 1fr; align-items: center; gap: 16px; margin: 80px 0 0; color: #080808; font-size: clamp(24px, 2.85vw, 41px); text-transform: uppercase; font-style: italic; }
.service-list b { font-style: normal; }
.price-note { margin: 82px 0 0; color: #070707; font-size: clamp(21px, 2.75vw, 40px); line-height: 1.08; }

.gallery { padding: 10px 0 18px; }
.before-after-grid { width: min(1000px, calc(100% - 44px)); margin: 0 auto; }
.before-after-grid figure { display: grid; grid-template-columns: 1fr 200px 1fr; margin: 0 0 10px; background: #fff; }
.before-after-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.before-after-grid figcaption { display: grid; place-items: center; color: #080808; font-size: clamp(24px, 2.8vw, 40px); }

.why { border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); padding: 18px 0 78px; text-align: center; }
.why h2 { margin: 0 0 66px; color: #050505; font-size: clamp(30px, 3.25vw, 47px); }
.advantages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.advantages article { display: flex; flex-direction: column; align-items: center; }
.advantages h3 { margin: 19px 0 8px; color: #050505; font-size: clamp(20px, 2.1vw, 30px); }
.advantages p { margin: 0; color: #191919; font-size: clamp(17px, 1.6vw, 23px); line-height: 1.1; }
.experience-mark, .quality-mark, .honesty-mark { width: 126px; height: 126px; color: var(--accent); }
.experience-mark { display: grid; place-items: center; border: 8px dashed var(--accent); border-radius: 50%; font-size: 44px; font-weight: 800; }
.quality-mark { display: grid; place-items: center; border: 9px solid var(--accent); border-radius: 34% 49% 35% 48%; transform: rotate(8deg); }
.quality-mark span { display: grid; place-items: center; width: 75px; height: 75px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 50px; font-weight: 700; transform: rotate(-8deg); }
.honesty-mark { display: grid; place-items: center; font-size: 82px; filter: grayscale(1) sepia(1) saturate(9) hue-rotate(326deg); }

.contacts { padding: 102px 0 112px; }
.contact-layout { display: grid; grid-template-columns: minmax(400px, 752px) minmax(330px, 1fr); align-items: center; gap: 75px; width: min(1340px, calc(100% - 100px)); margin: 0 auto; }
.contact-layout iframe { width: 100%; height: 564px; border: 1px solid #222; }
.contact-layout address { display: flex; flex-direction: column; gap: 30px; color: #050505; font-size: clamp(27px, 3vw, 43px); line-height: 1.18; font-style: normal; }
.contact-layout address a:hover { text-decoration: underline; }
.contact-layout address p { margin: 0; }

footer { min-height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #000; color: #2b2b2b; text-align: center; }
.brand { color: #8611ff; font-size: 31px; font-weight: 800; letter-spacing: -.04em; text-shadow: 0 0 12px #6b00e8; }
.brand span { color: #e210fb; }
footer small { margin-top: 2px; font-size: 9px; line-height: 1.35; }

@media (max-width: 760px) {
  .container { width: min(100% - 32px, 620px); }
  .services { padding: 46px 0 42px; }
  .services h2 { font-size: 30px; }
  .lead { font-size: 21px; }
  .lead br, .price-note br { display: none; }
  .services-label { margin-top: 30px; font-size: 22px; }
  .service-list { grid-template-columns: 1fr; gap: 15px; margin-top: 37px; font-size: 25px; }
  .service-list b { display: none; }
  .price-note { margin-top: 45px; font-size: 19px; line-height: 1.25; }
  .gallery { padding-top: 18px; }
  .before-after-grid { width: calc(100% - 24px); }
  .before-after-grid figure { grid-template-columns: 1fr 52px 1fr; margin-bottom: 7px; }
  .before-after-grid figcaption { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 17px; }
  .why { padding: 25px 0 46px; }
  .why h2 { margin-bottom: 42px; font-size: 32px; }
  .advantages { grid-template-columns: 1fr; gap: 48px; }
  .advantages p { font-size: 17px; }
  .contacts { padding: 46px 0 58px; }
  .contact-layout { grid-template-columns: 1fr; gap: 34px; width: calc(100% - 32px); }
  .contact-layout iframe { height: 360px; }
  .contact-layout address { gap: 20px; font-size: 27px; }
  footer { min-height: 130px; }
}

/* Compact proportions, keeping the reference's three-column composition. */
.container { max-width: 1080px; }
.services { padding: 58px 0 48px; border-bottom: 0; }
.services h2 { font-size: clamp(26px, 2.8vw, 36px); }
.lead { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.2; }
.services-label { margin-top: 26px; font-size: 26px; }
.service-list { margin-top: 46px; font-size: clamp(22px, 2.4vw, 30px); }
.price-note { margin-top: 48px; font-size: clamp(18px, 2vw, 26px); line-height: 1.25; }
.before-after-grid { max-width: 800px; padding-top: 16px; border-top: 2px solid var(--line); }
.before-after-grid figure { grid-template-columns: 1fr 140px 1fr; }
.before-after-grid figcaption { font-size: 28px; }
.why { max-width: 1080px; width: calc(100% - 48px); margin: 0 auto; padding: 20px 0 70px; }
.why .container { width: 100%; }
.why h2 { font-size: 36px; margin-bottom: 58px; }
.advantages { gap: 28px; }
.advantage-icon { width: 165px; height: 165px; object-fit: contain; }
.advantages h3 { margin: 12px 0 18px; font-size: 28px; }
.advantages p { font-size: 21px; line-height: 1.2; }
.contacts { padding: 64px 0 70px; }
.contact-layout { max-width: 1080px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 50px; }
.contact-layout iframe { height: 400px; }
.contact-layout address { font-size: clamp(24px, 2.4vw, 30px); gap: 24px; }
@media (max-width: 760px) {
  .services { padding: 36px 0; }
  .services-label { font-size: 21px; }
  .service-list { margin-top: 28px; }
  .price-note { margin-top: 32px; }
  .before-after-grid figure { grid-template-columns: 1fr 44px 1fr; }
  .before-after-grid figcaption { font-size: 16px; }
  .why { padding: 22px 0 36px; width: calc(100% - 32px); }
  .why h2 { font-size: 28px; margin-bottom: 30px; }
  .advantages { grid-template-columns: 1fr; gap: 32px; }
  .advantage-icon { width: 125px; height: 125px; }
  .advantages h3 { font-size: 23px; margin-bottom: 10px; }
  .advantages p { font-size: 17px; }
  .contacts { padding: 36px 0 44px; }
  .contact-layout { grid-template-columns: 1fr; gap: 26px; }
  .contact-layout iframe { height: 300px; }
  .contact-layout address { font-size: 24px; gap: 18px; }
}
.service-ticker { overflow: hidden; margin-top: 46px; width: 100%; }
.ticker-track { display: flex; width: max-content; animation: services-scroll 24s linear infinite; }
.ticker-group { display: flex; flex-shrink: 0; align-items: center; gap: clamp(24px, 5vw, 76px); padding-right: clamp(24px, 5vw, 76px); color: #080808; font-size: clamp(22px, 2.4vw, 30px); font-style: italic; text-transform: uppercase; white-space: nowrap; }
.ticker-group b { font-style: normal; }
.service-ticker:hover .ticker-track, .service-ticker:focus-within .ticker-track, .service-ticker.is-paused .ticker-track { animation-play-state: paused; }
.ticker-toggle { display: block; margin: 12px auto 0; padding: 6px 10px; border: 0; border-radius: 4px; background: transparent; color: #555; font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; }
.ticker-toggle:focus-visible, .service-ticker:focus-visible { outline: 2px solid #476b84; outline-offset: 3px; }
@keyframes services-scroll { to { transform: translateX(-50%); } }
@media (max-width: 760px) { .service-ticker { margin-top: 28px; } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; width: 100%; }
  .ticker-group { white-space: normal; flex-wrap: wrap; justify-content: center; width: 100%; gap: 12px 20px; padding: 0; }
  .ticker-group + .ticker-group, .ticker-group b:last-child, .ticker-toggle { display: none; }
}
/* Small translucent geometric glass fragments, confined to wide outer gutters. */
.services, .gallery, .contacts { position: relative; }
.glass-accent { display: none; }
@media (min-width: 1320px) {
  .glass-accent { position: absolute; display: block; width: 64px; height: 72px; top: 34%; opacity: .85; filter: drop-shadow(0 2px 2px #415b7029); transition: opacity .25s; }
  .accent-left { left: max(16px, calc((100% - 1240px) / 4)); }
  .accent-right { right: max(16px, calc((100% - 1240px) / 4)); top: 70%; }
  .glass-accent i { position: absolute; display: block; background: linear-gradient(120deg, #6b8a9e, #c0d3df 58%, #476b84); transition: transform .75s cubic-bezier(.2,.7,.2,1), opacity .65s ease; }
  .glass-accent::after { content: ''; position: absolute; width: 38px; height: 38px; top: 19px; left: 13px; border-radius: 50%; background: radial-gradient(ellipse, #fff 5%, #c9e6f47a 34%, transparent 72%); opacity: 0; transform: scale(.3); transition: opacity .65s .15s, transform .75s; pointer-events: none; }
  .glass-accent i:nth-child(1) { width: 27px; height: 47px; top: 0; left: 12px; clip-path: polygon(15% 0, 100% 76%, 0 100%); transform: rotate(-18deg); }
  .glass-accent i:nth-child(2) { width: 29px; height: 25px; top: 35px; left: 31px; clip-path: polygon(100% 0, 74% 100%, 0 25%); transform: rotate(12deg); }
  .glass-accent i:nth-child(3) { width: 18px; height: 23px; top: 47px; left: 9px; clip-path: polygon(0 0, 100% 28%, 33% 100%); transform: rotate(-12deg); }
  .gallery .accent-left { top: 22%; }
  .gallery .accent-right { top: 76%; }
  .contacts .accent-left { top: 68%; }
}
@media (min-width: 1320px) and (hover: hover) {
  .glass-accent:hover { opacity: 1; }
  .glass-accent:hover i { opacity: 0; }
  .glass-accent:hover i:nth-child(1) { transform: translate(6px,15px) rotate(0deg) scale(.08); }
  .glass-accent:hover i:nth-child(2) { transform: translate(-13px,-9px) rotate(0deg) scale(.08); }
  .glass-accent:hover i:nth-child(3) { transform: translate(14px,-20px) rotate(0deg) scale(.08); }
  .glass-accent:hover::after { opacity: .65; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-button, .glass-accent, .glass-accent i, .glass-accent::after { transition: none; }
  .hero-button, .glass-accent:hover i:nth-child(n) { transform: none; }
}