/*
 * Kazánmentő — főoldal-specifikus stíluslap
 *
 * Forrás: a jóváhagyott Codex-prototípus (KAZANMENTO_CODEX_HOME_V1/assets/css/style.css)
 * főoldali szekciói, változatlan értékekkel. Eltávolítva csak a prototípusban
 * is display:none-nal elrejtett CSS-helykitöltő rajzok (készülék-, radiátor-,
 * cső-, skyline- és Parlament-formák) halott kódja.
 */

/* Hero */
.hero { position: relative; min-height: 690px; overflow: hidden; color: #fff; background: radial-gradient(circle at 72% 10%, #213a4f 0, transparent 27%), linear-gradient(112deg, #081725 0 53%, #102a41 53% 76%, #071421 76%); }
.hero::after { content: ""; position: absolute; z-index: 0; inset: auto -7% -90px 40%; height: 180px; background: var(--yellow); transform: skewY(-8deg); opacity: .92; }
.hero-noise { position: absolute; inset: -8%; opacity: .18; background-image: linear-gradient(90deg, transparent 49%, rgba(255,255,255,.04) 50%), linear-gradient(0deg, transparent 49%, rgba(255,255,255,.025) 50%); background-size: 56px 56px; mask-image: linear-gradient(90deg, #000, transparent 70%); transform: translate3d(var(--pointer-x-back, 0px), var(--pointer-y-back, 0px), 0); transition: transform .15s linear; }
.hero-inner { position: relative; z-index: 2; min-height: 690px; display: grid; grid-template-columns: 54% 46%; }
.hero-copy { position: relative; z-index: 3; align-self: center; padding: 70px 30px 125px 16px; }
.hero h1 { max-width: 800px; margin: 0 0 14px; font-size: clamp(2.55rem, 3.9vw, 4.45rem); line-height: 1; letter-spacing: -.045em; }
.hero h1 span { color: var(--yellow); white-space: nowrap; }
.hero-lead { margin: 0 0 8px; font-size: clamp(1.05rem, 1.35vw, 1.35rem); }
.hero-text { max-width: 720px; margin: 0; color: rgba(255,255,255,.78); font-size: clamp(.92rem, 1.05vw, 1.08rem); }
.hero-buttons { display: flex; gap: 12px; margin-top: 28px; }
.hero-buttons .button { min-height: 56px; }
.hero-buttons small { display: block; margin-top: 3px; font-size: .66rem; opacity: .75; }
.hero-points { display: flex; gap: clamp(16px, 2.5vw, 38px); margin-top: 30px; }
.hero-points span { max-width: 150px; display: flex; align-items: center; gap: 10px; font-size: .79rem; font-weight: 800; line-height: 1.25; }
.hero-points b { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--yellow); }
.hero-visual { position: relative; min-width: 0; }
.hero-visual::before { content: ""; position: absolute; inset: -3% -24vw -3% 26%; background: linear-gradient(90deg, rgba(9,25,38,.58), rgba(9,25,38,.05) 48%), url("../img/hero-hatter-kazanhaz-1122.webp") center / cover no-repeat; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); transform: translate3d(var(--pointer-x-back, 0px), var(--pointer-y-back, 0px), 0) scale(1.04); will-change: transform; }
.hero-yellow-slice { position: absolute; top: -5%; bottom: -5%; left: 8%; width: 14%; background: linear-gradient(180deg, rgba(255,211,0,.92), rgba(255,183,0,.58)); transform: translate3d(var(--pointer-x-back, 0px), calc(var(--parallax-y) + var(--pointer-y-back, 0px)), 0) skewX(-12deg); will-change: transform; }
.hero-machine { position: absolute; top: -5%; left: 10%; width: 38%; height: 68%; background: linear-gradient(100deg, #e4e8e8, #85939a); opacity: .72; clip-path: polygon(12% 0, 100% 0, 90% 100%, 0 100%); transform: translate3d(var(--pointer-x-mid, 0px), calc(var(--parallax-y) + var(--pointer-y-mid, 0px)), 0); will-change: transform; }
.hero-machine span { position: absolute; top: 18%; left: 20%; width: 60%; height: 55%; border-radius: 12px; background: linear-gradient(90deg, #f7f7f5, #bcc5c7); box-shadow: inset -12px 0 20px rgba(0,0,0,.12); }
.hero-machine i { position: absolute; left: 36%; top: 0; width: 18%; height: 20%; background: #b6c0c4; }
.hero-david { position: absolute; z-index: 3; bottom: -9%; left: 10%; width: min(710px, 86%); max-width: none; height: auto; transform: translate3d(var(--pointer-x-front, 0px), calc(var(--parallax-y) + var(--pointer-y-front, 0px)), 0); filter: drop-shadow(0 24px 32px rgba(0,0,0,.3)); will-change: transform; }
.hero-badge { position: absolute; z-index: 5; top: 50px; right: -12px; display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 8px; color: var(--ink); background: var(--yellow); font-size: .78rem; font-weight: 900; line-height: 1.15; text-transform: uppercase; transform: rotate(-6deg); box-shadow: 0 12px 30px rgba(0,0,0,.25); animation: badge-float 4.2s ease-in-out infinite; }
.hero-badge svg { width: 28px; height: 28px; }
.hero-note { position: absolute; z-index: 5; top: 174px; right: -6px; color: rgba(255,255,255,.8); font-size: 1rem; text-align: right; }
.hero-note small { display: block; margin-top: 7px; font-size: .7rem; }
@keyframes badge-float { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-8px) rotate(-4deg); } }

/* Trust strip */
.trust { position: relative; z-index: 10; min-height: 138px; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: -72px; padding: 22px 28px; border: 1px solid #fff; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.trust article { display: flex; align-items: center; gap: 16px; padding: 8px 24px; }
.trust article + article { border-left: 1px solid var(--line); }
.round-icon { flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--yellow); }
.round-icon svg { width: 25px; height: 25px; }
.trust h2 { margin: 0 0 3px; font-size: 1rem; line-height: 1.2; }
.trust p { margin: 0; color: var(--muted); font-size: .83rem; line-height: 1.35; }

/* Services */
.services { position: relative; z-index: 2; padding: 88px 0 104px; }
.section-heading, .process-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 32px; }
.section-heading h2, .process-heading h2 { margin: 0; font-size: clamp(2.35rem, 4vw, 4rem); line-height: 1; letter-spacing: -.045em; }
.services-note { margin-right: 4%; color: #225073; font-size: 1.2rem; text-align: right; }
.service-grid { display: grid; grid-template-columns: 1.05fr 1.05fr 1fr; gap: 26px; }
.service-card { --tilt-x: 0deg; --tilt-y: 0deg; position: relative; min-height: 548px; overflow: hidden; border-radius: 17px; background: #dde5ea; box-shadow: 0 16px 30px rgba(13,37,55,.1); transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift, 0px)); transform-style: preserve-3d; transition: transform .25s ease, box-shadow .25s ease; will-change: transform; }
.service-card:hover { --lift: -7px; box-shadow: 0 24px 50px rgba(13,37,55,.2); }
.service-visual { position: absolute; inset: 0 0 43%; overflow: hidden; background: linear-gradient(145deg, #e9eef0, #8798a2); transform: translate3d(0, var(--parallax-y), 0) scale(1.04); transition: filter .35s ease; will-change: transform; }
.service-visual::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(130deg, transparent 45%, rgba(255,255,255,.5)); pointer-events: none; }
.section-photo { display: block; position: absolute; z-index: 1; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; pointer-events: none; transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.03); filter: saturate(.94) contrast(1.04); will-change: transform; }
.service-boiler .section-photo { object-position: 38% center; }
.service-water .section-photo { object-position: 56% center; }
.service-heating .section-photo { object-position: 26% center; }
.repair-image .section-photo { object-position: 58% center; }
.area-photo { inset: 2% 4% 2% 9%; width: 87%; height: 96%; object-fit: contain; object-position: center; filter: drop-shadow(0 16px 28px rgba(0,0,0,.26)); }
.service-boiler .service-visual { background: linear-gradient(120deg, #29475a, #d8e0e2); }
.service-water .service-visual { background: linear-gradient(150deg, #f0f2f1 10%, #b8c2c6 55%, #71818c); }
.service-heating .service-visual { background: linear-gradient(150deg, #aeb9bd, #edf0ef); }
.service-body { position: absolute; z-index: 3; inset: 38% 0 0; display: flex; flex-direction: column; padding: 50px 34px 26px; clip-path: polygon(0 9%, 52% 0, 100% 9%, 100% 100%, 0 100%); }
.dark-card { color: #fff; background: linear-gradient(155deg, #0b2940, #071b2b); }
.light-card { color: var(--ink); background: linear-gradient(155deg, rgba(255,255,255,.97), #e7edf0); }
.service-water .service-body { clip-path: polygon(0 6%, 100% 14%, 100% 100%, 0 100%); }
.service-heating .service-body { clip-path: polygon(0 11%, 46% 0, 100% 7%, 100% 100%, 0 100%); }
.service-body h3 { margin: 0 0 16px; font-size: clamp(1.45rem, 2vw, 2rem); line-height: 1.08; }
.service-body ul { margin: 0; padding: 0; list-style: none; }
.service-body li { position: relative; margin: 6px 0; padding-left: 18px; font-size: .9rem; }
.service-body li::before { content: "›"; position: absolute; left: 0; color: var(--yellow); font-weight: 900; }
.service-boiler .service-body { padding-top: 46px; padding-bottom: 18px; }
.service-boiler .service-body li { margin-block: 3px; line-height: 1.4; }
.circle-link { flex: 0 0 48px; align-self: flex-start; width: 48px; min-width: 48px; height: 48px; min-height: 48px; aspect-ratio: 1; display: grid; place-items: center; margin-top: auto; border-radius: 50%; color: var(--ink); background: var(--yellow); transition: transform .2s ease; }
.circle-link:hover { transform: translateX(5px); }
.service-card:hover .service-visual { filter: saturate(1.08) contrast(1.03); }
/* A kártyák szolgáltatáslistája a kanonikus route-okra mutat (a prototípus kinézetével). */
.service-body li a { color: inherit; text-decoration: none; transition: color .2s ease; }
.service-body li a:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dark-card li a:hover { color: var(--yellow); }

/* Repair first */
.repair-first { position: relative; min-height: 380px; overflow: hidden; color: #fff; background: linear-gradient(120deg, #071521, #0b2942); clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%); margin: -42px 0 -34px; }
.repair-first::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 0 69%, rgba(255,255,255,.04) 69%); pointer-events: none; }
.repair-image { position: absolute; inset: 0 auto 0 0; width: 29%; overflow: hidden; background: linear-gradient(90deg, #263d49, #092035); transform: translate3d(0, var(--parallax-y), 0) scale(1.04); will-change: transform; }
.repair-image::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, transparent, rgba(7,20,33,.86)); pointer-events: none; }
.repair-inner { position: relative; z-index: 2; min-height: 380px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: center; gap: 55px; padding: 70px 0 62px 28%; }
.repair-copy h2 { margin: 0 0 16px; font-size: clamp(2rem, 3.1vw, 3.4rem); line-height: 1; letter-spacing: -.035em; }
.repair-copy h2 mark { color: var(--yellow); background: none; }
.repair-copy h2 span { font-size: .65em; }
.repair-copy p { max-width: 760px; margin: 8px 0; color: rgba(255,255,255,.74); font-size: .94rem; }
.repair-values { margin: 0; padding: 0; list-style: none; }
.repair-values li { display: flex; align-items: center; gap: 14px; margin: 14px 0; font-size: .82rem; font-weight: 850; text-transform: uppercase; }
.repair-values span { flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--yellow); }

/* About */
.about { position: relative; z-index: 2; padding: 92px 0 74px; }
.about-inner { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(390px, 1.2fr) minmax(250px, .7fr); align-items: center; gap: clamp(28px, 4vw, 65px); }
.about-portrait { position: relative; align-self: stretch; min-height: 530px; }
.portrait-frame { position: absolute; inset: 0; overflow: hidden; border-radius: 18px; background: linear-gradient(150deg, #dbe3e7, #8da0ac); }
.portrait-frame::before { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, transparent 50%, rgba(255,199,0,.25)); }
.portrait-frame img { position: absolute; bottom: -20%; left: -7%; width: 114%; max-width: none; height: auto; transform: translate3d(0, var(--parallax-y), 0) scale(1.02); will-change: transform; }
.portrait-label { position: absolute; z-index: 2; right: -20px; bottom: 24px; display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 10px; background: var(--yellow); box-shadow: var(--shadow); font-size: .72rem; font-weight: 900; letter-spacing: .05em; line-height: 1.45; text-transform: uppercase; }
.portrait-label img { width: 44px; height: 44px; }
.about-copy h2 { margin: 0; color: #0a3555; font-size: clamp(2.2rem, 3.4vw, 3.4rem); line-height: 1; letter-spacing: -.035em; }
.about-copy h3 { margin: 8px 0 20px; font-size: 1.15rem; }
.about-copy > p:not(.eyebrow):not(.signature) { margin: 10px 0; color: #425563; font-size: .93rem; }
.signature { margin: 24px 0 0; color: #123e5f; font-family: "Segoe Print", "Bradley Hand", cursive; font-size: 1.8rem; font-weight: 700; font-style: italic; transform: rotate(-3deg); transform-origin: left; }
.about-copy small { display: block; margin-top: 5px; color: #5a6d79; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.about-list { margin: 0; padding: 0; list-style: none; }
.about-list li { display: flex; align-items: center; gap: 14px; margin: 18px 0; font-size: .9rem; font-weight: 800; line-height: 1.3; }
.about-list svg { flex: 0 0 38px; width: 38px; height: 38px; color: #0b3b5e; }

/* Process */
.process { padding: 60px 0 72px; background: linear-gradient(180deg, #eaf0f3, #f7fafb); }
.process-heading { align-items: center; }
.process-heading > p { color: #426078; font-weight: 650; }
.process-list { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.process-list::before { content: ""; position: absolute; top: 20px; left: 20px; right: 8%; height: 2px; background: linear-gradient(90deg, var(--yellow) 0 var(--process-progress, 0%), #cfd9df var(--process-progress, 0%) 100%); }
.process-list li { position: relative; min-width: 0; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: 50px auto; column-gap: 14px; padding: 0 27px 0 0; }
.process-list li:not(:last-child)::after { content: "→"; position: absolute; top: 11px; right: 7px; color: var(--yellow); font-size: 1.8rem; font-weight: 300; }
.process-list .step { position: relative; z-index: 2; grid-row: 1; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 7px rgba(247,250,251,.94); font-size: 1.08rem; font-weight: 900; }
.process-list > li > svg { grid-column: 2; grid-row: 1; align-self: center; width: 31px; height: 31px; color: #173a55; }
.process-list div { grid-column: 1 / -1; }
.process-list h3 { margin: 8px 0 5px; font-size: 1.02rem; }
.process-list p { margin: 0; color: #5b6e7b; font-size: .78rem; line-height: 1.4; }

/* Brands */
.brands { color: #fff; background: linear-gradient(112deg, #0c304d, #071725); }
.brands-inner { min-height: 230px; display: grid; grid-template-columns: minmax(280px, .9fr) minmax(570px, 1.6fr); align-items: center; gap: 55px; padding-block: 40px; }
.brands h2 { margin: 0 0 8px; font-size: clamp(1.7rem, 2.5vw, 2.6rem); }
.brands p { margin: 0; color: rgba(255,255,255,.7); font-size: .9rem; }
.brands ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.brands li { min-height: 58px; display: grid; place-items: center; padding: 8px; border-radius: 8px; color: #17334a; background: #fff; font-size: .82rem; font-weight: 900; text-align: center; box-shadow: inset 0 0 0 1px #d8e1e5; }
.brands li:nth-child(3n + 1) { color: #e84235; }
.brands li:nth-child(3n + 2) { color: #167b63; }
.brands li { transition: transform .22s ease, box-shadow .22s ease; }
.brands li:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(0,0,0,.18); }

/* Area */
.area { overflow: hidden; }
.area-inner { min-height: 400px; display: grid; grid-template-columns: 48% 52%; }
.area-copy { align-self: center; padding: 55px 50px 55px 8px; }
.area-copy h2 { max-width: 650px; margin: 0 0 14px; font-size: clamp(2rem, 3.1vw, 3.2rem); line-height: 1.05; letter-spacing: -.035em; }
.area-copy p:not(.eyebrow) { max-width: 620px; margin: 0 0 23px; color: #526572; }
.area-visual { position: relative; min-height: 400px; overflow: hidden; background: radial-gradient(circle at 52% 46%, #1a466d 0, #0b2a47 48%, #071421 100%); clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
.area-visual::before { content: ""; position: absolute; z-index: 2; inset: 0; background: radial-gradient(circle at 72% 20%, rgba(255,255,255,.35), transparent 21%), linear-gradient(120deg, transparent 60%, rgba(255,199,0,.2)); }

/* Scroll reveal — szolgáltatási kártyák */
.js .service-card.reveal { transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(24px); }
.js .service-card.reveal.is-visible { transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift, 0px)); }
.js .service-card.reveal:nth-child(2) { transition-delay: .11s; }
.js .service-card.reveal:nth-child(3) { transition-delay: .22s; }

/* Széles kijelző: a prototípus padding-left: 28%-a a szekció (kijelző)
   szélességéhez számolódott, a tartalom viszont 1400 px-nél megállt — ezért
   1440 px fölött üres sáv nyílt a kép és a szöveg között, a szövegoszlop pedig
   beszűkült. Itt a szöveg mindig közvetlenül a kép (29%) után indul, a jobb
   szél marad a tartalomsávhoz igazítva. 1440 px-ig a megjelenés változatlan. */
@media (min-width: 1441px) {
  .repair-inner { width: auto; margin-left: calc(29% + clamp(40px, 3vw, 80px)); margin-right: max(24px, calc((100% - 1400px) / 2)); padding-left: 0; }
}

@media (max-width: 1280px) {
  .hero, .hero-inner { min-height: 650px; }
  .hero-copy { padding-left: 0; }
  .hero-david { bottom: -6%; left: 7%; width: 90%; }
  .hero-badge { right: 0; }
  .trust article { padding-inline: 14px; }
  .service-body { padding-inline: 27px; }
}

@media (max-width: 1100px) {
  .hero, .hero-inner { min-height: 630px; }
  .hero-inner { grid-template-columns: 57% 43%; }
  .hero-copy { padding-bottom: 125px; }
  .hero h1 { font-size: clamp(2.6rem, 5.4vw, 3.8rem); }
  .hero-note { display: none; }
  .hero-david { left: 2%; width: 95%; }
  .hero-badge { top: 28px; right: 0; }
  .trust { padding-inline: 16px; }
  .trust article { align-items: flex-start; }
  .service-grid { gap: 18px; }
  .service-card { min-height: 525px; }
  .repair-inner { grid-template-columns: 1fr 270px; gap: 30px; padding-left: 24%; }
  .about-inner { grid-template-columns: .8fr 1.2fr; }
  .about-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); }
  .about-portrait { min-height: 500px; }
  .process-list { grid-template-columns: repeat(3, 1fr); gap: 34px 0; }
  .process-list::before { display: none; }
  .process-list li:nth-child(3)::after { display: none; }
  .brands-inner { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 820px) {
  .hero { min-height: 930px; background: radial-gradient(circle at 70% 60%, #233e52, transparent 34%), linear-gradient(155deg, #081725 0 60%, #102b43 60%); }
  .hero-inner { min-height: 930px; display: block; }
  .hero-copy { width: 100%; padding: 54px 0 0; }
  .hero h1 { max-width: 710px; font-size: clamp(2.7rem, 8vw, 4rem); }
  .hero-text { max-width: 650px; }
  .hero-points { display: none; }
  .hero-visual { position: absolute; inset: 450px -50px 0 25%; }
  .hero-visual::before { inset: 0 -50vw 0 10%; }
  .hero-machine { left: 0; }
  .hero-david { left: 5%; bottom: -9%; width: 68%; }
  .hero-badge { right: 11%; top: 52px; }
  .trust { grid-template-columns: 1fr; margin-top: -54px; padding-block: 16px; }
  .trust article { padding: 14px; }
  .trust article + article { border-left: 0; border-top: 1px solid var(--line); }
  .services { padding-top: 70px; }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .service-card:last-child { grid-column: 1 / -1; min-height: 465px; }
  .service-heating .service-visual { inset: 0 0 0 44%; }
  .service-heating .service-body { inset: 0 46% 0 0; clip-path: polygon(0 0, 89% 0, 100% 100%, 0 100%); padding-top: 48px; }
  .repair-first { clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%); }
  .repair-image { width: 31%; }
  .repair-inner { grid-template-columns: 1fr; padding: 65px 0 70px 25%; }
  .repair-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .repair-values li { align-items: flex-start; flex-direction: column; font-size: .72rem; }
  .about-inner { grid-template-columns: 1fr 1.2fr; gap: 35px; }
  .about-portrait { min-height: 450px; }
  .portrait-label { right: -10px; bottom: 12px; padding: 11px; }
  .about-list { grid-template-columns: 1fr 1fr; }
  .process-list { grid-template-columns: 1fr 1fr; }
  .process-list li:nth-child(3)::after { display: block; }
  .process-list li:nth-child(2)::after, .process-list li:nth-child(4)::after { display: none; }
  .brands ul { grid-template-columns: repeat(3, 1fr); }
  .area-inner { grid-template-columns: 1fr; }
  .area-copy { padding: 55px 0 35px; }
  .area-visual { min-height: 330px; clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); }
}

@media (max-width: 560px) {
  .hero { min-height: 920px; }
  .hero-inner { min-height: 920px; }
  .hero-copy { padding-top: 40px; }
  .hero h1 { font-size: clamp(2.18rem, 11vw, 3rem); line-height: 1.01; }
  .hero h1 br { display: none; }
  .hero-lead { font-size: 1rem; }
  .hero-text { font-size: .88rem; }
  .hero-buttons { gap: 8px; }
  .hero-buttons .button { flex: 1; padding-inline: 12px; font-size: .84rem; }
  .hero-buttons small { display: none; }
  .hero-visual { inset: 470px -50px 0 3%; }
  .hero-david { left: 10%; bottom: -7%; width: 84%; }
  .hero-machine { left: 5%; width: 42%; }
  .hero-yellow-slice { left: 9%; }
  .hero-badge { top: 40px; right: 10%; padding: 10px 12px; font-size: .64rem; }
  .hero-badge svg { width: 22px; height: 22px; }
  .trust { margin-top: -34px; }
  .round-icon { flex-basis: 46px; width: 46px; height: 46px; }
  .services { padding: 64px 0 80px; }
  .section-heading { align-items: flex-start; }
  .section-heading h2, .process-heading h2 { font-size: 2.4rem; }
  .services-note { display: none; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card, .service-card:last-child { grid-column: auto; min-height: 510px; }
  .service-heating .service-visual { inset: 0 0 43%; }
  .service-heating .service-body { inset: 38% 0 0; clip-path: polygon(0 11%, 46% 0, 100% 7%, 100% 100%, 0 100%); }
  .service-body { padding-top: 47px; }
  .repair-first { margin-top: -30px; }
  .repair-image { width: 100%; opacity: .18; }
  .repair-image::after { background: rgba(7,20,33,.55); }
  .repair-inner { padding: 65px 0 70px; }
  .repair-copy h2 { font-size: 2.15rem; }
  .repair-values { grid-template-columns: 1fr; }
  .repair-values li { align-items: center; flex-direction: row; font-size: .76rem; }
  .about { padding-top: 80px; }
  .about-inner { grid-template-columns: 1fr; }
  .about-portrait { min-height: 440px; }
  .portrait-frame img { bottom: -17%; left: 0; width: 100%; }
  .portrait-label { right: 8px; }
  .about-list { grid-template-columns: 1fr; gap: 0; }
  .about-list li { margin: 10px 0; }
  .process-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .process-heading > p { margin: 0; }
  .process-list { grid-template-columns: 1fr; gap: 26px; }
  .process-list li { grid-template-columns: 44px 48px 1fr; grid-template-rows: auto; align-items: center; padding: 0; }
  .process-list li::after { display: none !important; }
  .process-list .step { grid-column: 1; grid-row: 1; }
  .process-list > li > svg { grid-column: 2; grid-row: 1; }
  .process-list div { grid-column: 3; grid-row: 1; }
  .process-list h3 { margin-top: 0; }
  .brands-inner { min-height: auto; }
  .brands ul { grid-template-columns: 1fr 1fr; }
  .area-copy h2 { font-size: 2.2rem; }
}

@media (max-width: 380px) {
  .hero { min-height: 920px; }
  .hero-inner { min-height: 920px; }
  .hero h1 { font-size: 2.08rem; }
  .hero-buttons .button { font-size: .78rem; }
  .hero-visual { top: 486px; }
  .trust article { gap: 11px; padding-inline: 8px; }
  .trust h2 { font-size: .93rem; }
  .trust p { font-size: .78rem; }
  .section-heading h2, .process-heading h2 { font-size: 2.18rem; }
  .service-body { padding-inline: 24px; }
  .about-portrait { min-height: 410px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-david, .hero-machine, .service-card { transform: none !important; }
  .hero-yellow-slice { transform: skewX(-12deg) !important; }
  .service-visual, .repair-image, .portrait-frame img { transform: scale(1.02) !important; }
  .section-photo { transform: scale(1.03) !important; }
}