@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700;800&family=Roboto:wght@400;500;600;700;800&display=swap');

:root { color-scheme: dark; --navy:#031c37; --blue:#064d83; --yellow:#ffc400; --white:#f7f9fc; --site-header-height:126px; font-family:Roboto,'Arial',sans-serif; scroll-padding-top:var(--site-header-height); }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--navy); }
body { margin:0; min-height:100vh; color:var(--white); }
twin-lain-hero { display:block; min-height:100vh; padding-top:var(--site-header-height); overflow:visible; }
.site-header { position:fixed; inset:0 0 auto; height:126px; padding:0 clamp(24px,3vw,54px); display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,2vw,34px); background:linear-gradient(100deg,#041a34,#031e3b 54%,#02172d); z-index:1000; box-shadow:0 8px 28px #00152c55; }
.site-header::after { content:""; position:absolute; z-index:2; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,transparent 0%,#ffc40080 8%,#ffd94c 22%,#fff0a8 50%,#ffd94c 78%,#ffc40080 92%,transparent 100%); box-shadow:0 2px 12px #ffc40070; pointer-events:none; }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; flex:0 0 auto; }
.brand-mark { width:112px; height:82px; fill:none; stroke:var(--yellow); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.brand-mark path:nth-child(n+3) { stroke:#fff; stroke-width:2.4; }
.brand-type { display:flex; flex-direction:column; font-family:'Roboto Condensed',Arial,sans-serif; font-size:clamp(23px,2.15vw,37px); line-height:.92; font-weight:800; letter-spacing:.02em; white-space:nowrap; }
.brand-type b { color:#fff; }.brand-type strong { color:var(--yellow); letter-spacing:.1em; margin-top:6px; }
.main-nav { display:flex; height:100%; align-items:center; justify-content:center; gap:clamp(9px,1.05vw,18px); flex:1; }
.nav-link { position:relative; min-width:58px; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#f6f8fc; text-align:center; text-decoration:none; font-family:'Roboto Condensed',Arial,sans-serif; font-weight:700; font-size:clamp(13px,1.18vw,18px); line-height:1.06; }
.nav-link svg { width:35px; height:35px; stroke-width:1.8; transition:color .18s ease; }
.nav-link::after { content:""; position:absolute; bottom:17px; width:0; height:5px; border-radius:8px; background:var(--yellow); transition:width .18s ease; }
.nav-link.is-clicked svg,.nav-link:hover svg,.nav-link:focus-visible svg { color:var(--yellow); }
.nav-link.is-clicked::after,.nav-link:hover::after,.nav-link:focus-visible::after { width:58px; }
.language-switch { display:flex; align-items:center; gap:7px; margin-left:auto; padding-left:clamp(8px,1.2vw,18px); color:#8ea4bd; font-family:'Roboto Condensed',Arial,sans-serif; font-size:14px; font-weight:800; }
.language-option { padding:7px 5px; border:0; background:transparent; color:#d5dfeb; font:inherit; cursor:pointer; transition:color .18s ease,text-shadow .18s ease; }
.language-option:hover,.language-option:focus-visible,.language-option.active { color:var(--yellow); text-shadow:0 0 10px #ffc40055; }
.language-option:focus-visible { outline:1px solid var(--yellow); outline-offset:2px; border-radius:3px; }
.header-contact { display:flex; align-items:center; gap:clamp(15px,1.7vw,28px); border-left:1px solid #d4e0ee80; padding-left:clamp(16px,2vw,32px); flex:0 0 auto; }
.header-contact .header-recovery { flex:0 0 auto; width:clamp(155px,10vw,185px); }
.header-contact .mobile-recovery { display:none; }
.main-nav .nav-recovery { display:none; }
.messengers { display:flex; gap:12px; }.messenger { width:54px; height:54px; display:grid; place-items:center; border-radius:50%; color:#fff; transition:transform .2s ease,filter .2s ease,box-shadow .2s ease; }.messenger:hover { transform:scale(1.09); filter:brightness(1.08); box-shadow:0 8px 20px #0005; }.messenger:focus-visible,.recovery-btn:focus-visible { outline:3px solid #ffc400; outline-offset:4px; }.messenger svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }.viber { background:#7950c8; }.telegram { background:#0aace3; }
.phone-block { display:flex; flex-direction:column; gap:5px; text-decoration:none; color:#fff; white-space:nowrap; cursor:pointer; }.phone-block b { font-size:clamp(17px,1.56vw,26px); font-weight:800; transition:color .18s ease; }.phone-block:hover b,.phone-block:focus-visible b { color:var(--yellow); }.phone-block:focus-visible { outline:2px solid var(--yellow); outline-offset:5px; border-radius:3px; }.phone-number { display:flex; align-items:center; justify-content:flex-end; gap:8px; }.phone-number > span { font-size:inherit; text-align:left; }.header-phone-icon { flex:0 0 auto; width:21px; height:21px; color:var(--yellow); fill:var(--yellow); stroke:var(--yellow); stroke-width:1.5; transform-origin:50% 50%; animation:phoneRing 1.7s ease-in-out infinite; }
.phone-block > span { font-size:clamp(13px,1.12vw,18px); text-align:right; }
.phone-block > .work-hours { display:flex; flex-direction:column; gap:2px; color:#dce7f3; font-size:clamp(11px,.92vw,14px); line-height:1.08; text-align:right; }
.work-hours strong { color:var(--yellow); font-size:1.08em; font-weight:800; letter-spacing:.015em; }
@keyframes phoneRing { 0%,100% { transform:rotate(0); } 8%,24%,40% { transform:rotate(-12deg); } 16%,32%,48% { transform:rotate(12deg); } 60% { transform:rotate(0) scale(1.04); } }
.nav-toggle { display:none; }
.hero { min-height:calc(100svh - 126px); height:max(730px,calc(100svh - 126px)); max-height:1000px; position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at 65% 58%,#0b4d7f 0,#073359 39%,#031d39 72%); }
.hero-photo { position:absolute; z-index:-3; right:3.5%; bottom:0; height:100%; width:min(52%,700px); background-image:url('../assets/plumber-reference-crop.webp'); background-position:center top; background-size:auto 116%; background-repeat:no-repeat; filter:saturate(1.05) contrast(1.03); }
.hero-shade { position:absolute; z-index:-2; inset:0; background:linear-gradient(90deg,#031c37 0%,#032342f5 35%,#032342c9 48%,transparent 69%),linear-gradient(0deg,#03203dd9 0%,transparent 22%); }
.hero-content { width:min(68%,1050px); padding:clamp(46px,4vw,70px) 0 78px clamp(30px,4vw,68px); position:relative; z-index:1; }
.eyebrow { display:inline-flex; align-items:center; margin:0 0 14px; padding:9px 24px 10px; border-radius:40px; color:#03203c; background:var(--yellow); font-family:'Roboto Condensed',Arial,sans-serif; font-size:clamp(21px,2vw,34px); line-height:1; font-weight:800; box-shadow:0 4px 0 #dc9f00; }
h1 { margin:0 0 clamp(34px,5vh,58px); color:#fff; font-family:'Roboto Condensed',Arial,sans-serif; font-size:clamp(66px,8vw,124px); line-height:.98; font-weight:800; font-style:italic; letter-spacing:-.035em; text-shadow:0 4px 14px #00142c66; white-space:nowrap; }
h1 em { color:var(--yellow); font-style:inherit; }
.benefits { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; max-width:970px; }
.benefit { min-height:164px; padding:0 14px; display:flex; align-items:center; flex-direction:column; justify-content:flex-start; text-align:center; border-right:2px solid var(--yellow); font-family:'Roboto Condensed',Arial,sans-serif; }
.benefit:first-child { padding-left:0; }.benefit:last-child { border:0; }
.benefit svg { width:66px; height:66px; margin-bottom:9px; stroke:var(--yellow); stroke-width:2.3; }
.benefit h2,.benefit p { margin:0; font-size:clamp(16px,1.48vw,23px); line-height:1.12; font-weight:800; }.benefit h2 { color:#fff; }.benefit:first-child h2 { color:var(--yellow); }.benefit p { margin-top:4px; color:#f7f9fc; font-weight:700; }.benefit:nth-child(2) p,.benefit:nth-child(4) p { color:var(--yellow); }
.hero-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:clamp(18px,3vw,45px); margin-top:clamp(25px,4vh,54px); }
.action-stack { display:flex; flex-direction:column; align-items:flex-start; gap:16px; width:100%; }
.power-note { display:flex; align-items:center; gap:10px; width:100%; margin:0; padding:9px 12px; border:1px solid #ffc400a6; border-radius:10px; background:transparent; color:#f4f7fb; font-family:'Roboto Condensed',Arial,sans-serif; font-size:clamp(15px,1.2vw,18px); line-height:1.25; font-weight:600; animation:powerPulse 1.8s ease-in-out infinite; }
.power-note svg { flex:0 0 28px; width:28px; height:28px; fill:var(--yellow); color:var(--yellow); filter:drop-shadow(0 0 4px #ffc40070); animation:boltFlash 1.2s ease-in-out infinite; }
@keyframes powerPulse { 0%,100% { opacity:.72; } 50% { opacity:1; } }
@keyframes boltFlash { 0%,100% { transform:scale(1); opacity:.78; } 44% { transform:scale(1.12); opacity:1; } 50% { transform:scale(.94); opacity:.58; } 60% { transform:scale(1.1); opacity:1; } }
.recovery-row { display:flex; align-items:center; width:100%; }
.recovery-btn { display:block; width:100%; aspect-ratio:1178 / 271; padding:0; border:0; border-radius:0; overflow:hidden; background:transparent; box-shadow:none; cursor:pointer; transition:transform .2s ease,filter .2s ease; }.recovery-btn:hover { transform:scale(1.045); filter:brightness(1.04); }
.recovery-btn img { display:block; width:100%; height:100%; object-fit:contain; }
.cta { position:relative; min-height:94px; min-width:440px; padding:13px 60px; display:flex; align-items:center; justify-content:center; gap:18px; border:2px solid #ffda33; border-radius:55px; background:linear-gradient(180deg,#ffd52a,#ffbc00); color:#06213e; text-decoration:none; font-family:'Roboto Condensed',Arial,sans-serif; font-size:clamp(24px,2.2vw,35px); font-style:italic; font-weight:800; box-shadow:0 7px 0 #c88e00,0 15px 25px #00162d75; transition:transform .18s ease,filter .18s ease; }
.cta:hover { transform:translateY(-2px); filter:brightness(1.05); }.cta svg { flex:0 0 auto; width:44px; height:44px; fill:currentColor; stroke-width:1.2; }.cta .cta-arrow { position:absolute; right:24px; width:30px; height:30px; fill:none; stroke-width:2.5; }
.location { width:100%; aspect-ratio:1178 / 271; padding:0 16px; display:flex; align-items:center; justify-content:center; gap:12px; border:2px solid #ffda33; border-radius:55px; background:linear-gradient(180deg,#064d83,#04345d); color:#fff; font-family:'Roboto Condensed',Arial,sans-serif; font-size:clamp(19px,2vw,32px); font-weight:800; white-space:nowrap; text-shadow:0 2px 8px #001; text-decoration:none; box-shadow:0 7px 0 #02172d,0 15px 25px #00162d75; transition:transform .18s ease,filter .18s ease; }.location:hover { transform:translateY(-2px); filter:brightness(1.12); }.location svg { flex:0 0 auto; width:clamp(28px,2.8vw,42px); height:clamp(28px,2.8vw,42px); fill:var(--yellow); stroke:var(--yellow); stroke-width:1.4; transform-origin:50% 50%; animation:phoneRing 1.7s ease-in-out infinite; }
.comfort-note { position:absolute; right:3.5%; bottom:36px; z-index:1; margin:0; color:#fff; text-align:center; font-family:'Roboto Condensed',Arial,sans-serif; font-size:clamp(19px,1.65vw,27px); line-height:1.12; font-weight:700; font-style:italic; text-shadow:0 2px 9px #001; transform:rotate(-5deg); }
.comfort-note::after { content:""; display:block; height:5px; width:75%; margin:10px auto 0; border-radius:50%; background:var(--yellow); transform:rotate(-4deg); }
.water { position:absolute; z-index:-1; bottom:-40px; width:270px; height:170px; opacity:.9; pointer-events:none; background:radial-gradient(ellipse at 20% 92%,transparent 39%,#39bbff 40%,#b8ebff 41%,transparent 43%),radial-gradient(ellipse at 55% 105%,transparent 51%,#138ce5 52%,#b4edff 53%,transparent 55%),radial-gradient(circle at 36% 44%,#d9f9ff 0 2px,transparent 3px),radial-gradient(circle at 49% 28%,#a7eaff 0 4px,transparent 5px),radial-gradient(circle at 68% 41%,#e4fbff 0 2px,transparent 3px); }
.water-left { left:-48px; transform:rotate(18deg); }.water-right { right:-55px; transform:scaleX(-1) rotate(12deg); }
@media (max-width:1200px) {
  :root { --site-header-height:110px; }
  .site-header { height:110px; padding-inline:22px; gap:16px; }.brand-mark { width:86px; }.brand { gap:7px; }.brand-type { font-size:24px; }.main-nav { gap:12px; }.nav-link { font-size:13px; }.nav-link svg { width:29px;height:29px; }.messenger { width:43px;height:43px; }.messenger svg { width:25px;height:25px; }.header-contact { padding-left:14px;gap:12px; }.phone-block b { font-size:17px; }.phone-block span { font-size:13px; }.hero { min-height:calc(100svh - 110px);height:max(700px,calc(100svh - 110px)); }.hero-content { width:72%; }.benefit { padding-inline:9px; }.benefit h2,.benefit p { font-size:17px; }.cta { min-width:350px;min-height:78px; }.hero-actions { gap:28px; }
}
@media (max-width:900px) {
  :root { --site-header-height:88px; }
  .site-header { height:88px; padding:0 20px; }.brand-mark { width:70px;height:58px; }.brand-type { font-size:23px; }.header-contact { margin-left:auto;border:0;padding:0; }.messengers { display:none; }.phone-block b { font-size:16px; }.phone-block span { font-size:12px; }.nav-toggle { display:flex; width:42px;height:42px; flex-direction:column;justify-content:center;align-items:center;gap:5px; border:1px solid #ffffff5c;border-radius:8px;background:#092a49;color:white;cursor:pointer;order:3; }.nav-toggle span { width:20px;height:2px;background:currentColor; }.main-nav { display:none; position:absolute;top:88px;left:0;right:0;height:auto;padding:14px 18px 20px;flex-wrap:wrap;justify-content:center;background:#031c37f5;border-top:1px solid #ffffff20; }.main-nav.is-open { display:flex; }.nav-link { min-width:86px;height:auto;padding:8px; }.language-switch { width:100%; justify-content:center; margin:5px 0 0; padding:0; }.nav-link.is-clicked::after,.nav-link:hover::after,.nav-link:focus-visible::after { bottom:0;width:40px;height:3px; }.hero { min-height:900px;height:auto;max-height:none; }.hero-photo { right:-3%;top:0;bottom:auto;height:535px;width:65%;background-position:center top;opacity:.92; }.hero-shade { background:linear-gradient(90deg,#031c37 0%,#03213be8 40%,#03213b85 69%,#03213b38 100%),linear-gradient(0deg,#031c37 24%,transparent 72%); }.hero-content { width:100%;padding:44px 26px 135px; }.eyebrow { font-size:23px; }.hero h1 { font-size:clamp(58px,10vw,90px); }.benefits { max-width:660px; }.benefit { min-height:150px; }.benefit svg { width:54px;height:54px; }.hero-actions { margin-top:22px; }.comfort-note { right:22px;bottom:22px;max-width:220px;font-size:18px; }
}
@media (max-width:600px) {
  .site-header { height:76px;padding-inline:14px;gap:10px; }.brand-mark { width:54px;height:47px; }.brand-type { font-size:18px; }.brand-type strong { margin-top:4px; }.header-contact { gap:8px; }.phone-block b { font-size:13px; }.phone-block span { font-size:10px; }.nav-toggle { width:36px;height:36px; }.main-nav { top:76px; }.nav-link { min-width:68px;font-size:12px; }.nav-link svg { width:26px;height:26px; }.hero { min-height:970px; }.hero-photo { top:0;right:-20%;width:90%;height:430px;opacity:.72;background-position:center top; }.hero-shade { background:linear-gradient(90deg,#031c37f2 0%,#03213bd9 48%,#03213b65 100%),linear-gradient(0deg,#031c37 39%,#031c3799 66%,transparent 100%); }.hero-content { padding:38px 18px 140px; }.eyebrow { margin-bottom:12px;padding:8px 17px;font-size:19px; }.hero h1 { white-space:normal;font-size:clamp(52px,12vw,70px);margin-bottom:31px; }.benefits { grid-template-columns:repeat(2,minmax(0,1fr));max-width:430px;row-gap:20px; }.benefit { min-height:130px;padding:0 8px;border-right:1px solid var(--yellow); }.benefit:nth-child(2) { border-right:0; }.benefit:nth-child(3) { border-right:1px solid var(--yellow); }.benefit svg { width:46px;height:46px;margin-bottom:6px; }.benefit h2,.benefit p { font-size:15px; }.hero-actions { grid-template-columns:minmax(0,1fr);margin-top:24px;gap:16px; }.cta { min-width:0;width:100%;min-height:0;height:auto;aspect-ratio:1178 / 271;padding:0 18px;font-size:23px;gap:10px; }.cta svg { width:34px;height:34px; }.cta .cta-arrow { width:23px;height:23px; }.location { font-size:23px; }.location svg { width:38px;height:38px; }.comfort-note { bottom:18px;right:15px;font-size:16px;max-width:205px; }.water { transform:scale(.72);transform-origin:bottom left; }.water-right { transform:scaleX(-1) scale(.72);transform-origin:bottom right; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important;transition:none!important; } }
.action-stack .cta { width:100%; min-width:0; min-height:0; height:auto; aspect-ratio:1178 / 271; padding:0 18px; gap:10px; white-space:nowrap; }
@media (max-width:600px) {
  .header-contact .header-recovery { display:none; }
  .main-nav .nav-recovery { display:block; flex:0 0 190px; width:190px; }
  .power-note { flex-wrap:wrap; gap:6px; font-size:15px; }
  .power-note span { flex:0 0 100%; }
}
@media (prefers-reduced-motion:reduce) { .power-note,.power-note svg,.header-phone-icon,.location svg { animation:none; } }
.benefits { align-items:stretch; }
.benefit { display:grid; grid-template-rows:72px 52px 48px; min-height:172px; align-content:start; justify-items:center; }
.benefit svg { align-self:center; margin:0; }
.benefit h2,.benefit p { width:100%; display:flex; align-items:center; justify-content:center; text-align:center; }
.benefit p { margin-top:0; }
@media (max-width:1200px) { .benefit { grid-template-rows:60px 44px 42px; min-height:146px; } }
@media (max-width:600px) { .benefit { grid-template-rows:52px 40px 38px; min-height:130px; } .benefit svg { margin:0; } }

/* Performance: avoid continuous decorative repainting during scrolling. */
.header-phone-icon,.power-note,.power-note svg,.location svg { animation:none !important; }
@media (hover:none) { .messenger:hover,.recovery-btn:hover,.location:hover { transform:none; filter:none; } }