/* Three-section concept. Extends the supplied Dragon Side hero. */ :root{--surface:#141416;--soft:#9a9a9f;--red:#db3207} html{scroll-behavior:smooth;scroll-padding-top:100px}body{height:auto}button,input{font:inherit}button{cursor:pointer}button,a,input{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:5px}[hidden]{display:none!important}.container{width:min(1280px,calc(100% - 96px));margin-inline:auto}.section{padding:100px 0}.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:700;line-height:1.5}.hero{min-height:760px;height:min(900px,100svh)}.header{padding:18px max(48px,calc((100vw - 1660px)/2));gap:24px}.nav{gap:28px}.nav a{font-size:15px;color:#c9c9cc}.logo img{height:44px}.phone{font-size:16px}.btn--header{font-size:15px}.hero__body{padding:60px max(48px,calc((100vw - 1280px)/2));z-index:2}.hero__copy h1{font-size:clamp(52px,4.6vw,80px);line-height:1.04;margin-bottom:24px}.hero__copy p{max-width:580px;font-size:19px;line-height:1.55;margin-bottom:30px}.hero__eyebrow{display:flex;align-items:center;gap:12px;color:#d3d3d7;margin-bottom:24px}.hero__eyebrow span{height:4px;width:4px;background:var(--red);border-radius:50%}.compare{display:none}.hero__veil{background:linear-gradient(90deg,#050505b8,transparent 64%),linear-gradient(0deg,#0a0a0c 0%,transparent 18%)}.hero__cta{margin-bottom:14px}.hero__note{font-size:14px;color:#b6b6bc;margin-bottom:42px}.btn{font-size:16px;min-height:50px;border-width:1px;border-radius:8px}.btn--primary{box-shadow:0 5px 25px #db32070a}.trust__text b{font-size:17px}.trust__text span{font-size:13px;color:#c3c3c9}.trust__item{padding:0 23px;gap:10px}.trust__icon{width:28px;height:28px}.section-top{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #2c2c30;padding-top:22px;margin-bottom:40px}.section-top .eyebrow{color:#b5b5bb}.section-top__aside{color:#77777f;font-size:14px}.packages{background:#0a0a0c;padding-top:56px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:48px}h2{font-size:clamp(38px,4vw,58px);line-height:1.06;font-weight:500;letter-spacing:-.025em}.section-heading>p{color:#a7a7af;font-size:18px;line-height:1.6;padding-bottom:3px}.package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.package{background:#151517;border:1px solid #2b2b30;border-radius:12px;padding:26px 26px 24px;display:flex;flex-direction:column;position:relative;overflow:hidden}.package--featured{border-color:var(--brand-accent);background:linear-gradient(160deg,#221719 0%,#181719 38%,#151517 100%)}.package__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.package__index{color:#77777d;font-size:14px}.package__tag{font-size:11px;letter-spacing:.1em;color:#b0b0b5}.package--featured .package__tag{color:var(--brand-accent)}.package h3{font-size:38px;line-height:1;letter-spacing:-.03em;font-weight:500}.package__intro{color:#a0a0a8;font-size:16px;margin-top:10px}.coverage{position:relative;height:246px;margin:15px -12px 20px;overflow:hidden;border-bottom:1px solid #ffffff10}.coverage__image{position:absolute;width:180px;height:270px;left:calc(50% - 104px);top:-8px;transform:rotate(38deg)}.coverage__image img,.coverage__image svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.coverage__image svg{mix-blend-mode:screen}.coverage__image svg path{fill:var(--brand-accent);fill-opacity:.58;stroke:var(--brand-accent);stroke-width:4;stroke-linejoin:round}.coverage__label{position:absolute;right:4px;top:26px;color:#c6c6cc;font-size:12px;line-height:1.45;text-align:right;max-width:110px}.coverage__label:after{content:'';display:block;height:1px;width:45px;background:var(--brand-accent);margin:8px 0 0 auto}.coverage__legend{position:absolute;bottom:12px;left:8px;color:#85858e;font-size:12px;display:flex;gap:7px;align-items:center}.coverage__legend i{height:5px;width:5px;background:var(--brand-accent)}.package__price{font-size:38px;font-weight:500;letter-spacing:-.025em}.package__price span:first-child{color:#a8a8b1;font-size:20px;font-weight:400;letter-spacing:0}.package__price span:last-child{font-size:28px}.package__price-note{color:#85858e;font-size:12px;margin-top:6px}.package__features{list-style:none;display:flex;flex-direction:column;gap:12px;min-height:148px;margin-top:25px;padding-top:23px;border-top:1px solid #ffffff10}.package__features li{font-size:15px;line-height:1.35;position:relative;padding-left:18px;color:#dddde2}.package__features li:before{content:'+';position:absolute;left:0;color:#777781}.package--featured .package__features li:before{color:var(--brand-accent)}.package__use{font-size:13px;color:#91919b;line-height:1.5;margin:22px 0 18px}.package__button{width:100%;margin-top:auto;min-height:52px;border-color:#494950}.package--featured .package__button{border-color:var(--red)}.packages-bottom{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:25px}.packages-bottom p{font-size:13px;color:#96969e;line-height:1.7}.packages-bottom p span{font-size:12px;color:#75757e}.text-button{color:#f0f0f4;border:0;background:none;font-size:15px;padding:5px 0;text-align:left}.text-button:hover{color:var(--brand-accent)}.text-button span{margin-left:16px;color:var(--brand-accent);font-size:22px}.calculator{background:#0d0d0f;padding-top:0;padding-bottom:85px}.calculator .section-top{margin-bottom:38px}.calculator-panel{display:grid;grid-template-columns:1fr 1fr;min-height:650px;overflow:hidden;border:1px solid #303035;border-radius:14px}.calculator-story{position:relative;padding:46px;background:linear-gradient(180deg,#151517 0%,#151517e8 37%,#12121445 72%,#101012 100%),url('assets/hero-desktop.webp') 78% bottom/auto 78% no-repeat;min-height:650px;display:flex;flex-direction:column}.calculator-story>.eyebrow{color:#9999a2;font-size:11px;margin-bottom:32px}.calculator-story h2{font-size:60px}.calculator-story>p{color:#b4b4bd;font-size:17px;line-height:1.55;margin-top:22px}.calculator-story__bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:auto;padding-top:30px;font-size:11px;color:#c1c1c6}.calculator-story__bottom span:first-child{font-weight:700;letter-spacing:.14em}.calculator-form{background:#18181b;padding:44px 46px;min-width:0}.steps{display:flex;align-items:center;gap:16px;margin-bottom:38px}.step{display:flex;align-items:center;gap:9px;color:#80808b;font-size:14px}.step b{display:grid;place-items:center;width:27px;height:27px;border:1px solid #494951;border-radius:50%;font-size:12px;font-weight:400}.step.is-active{color:#fff}.step.is-active b{background:var(--red);border-color:var(--red)}.steps__line{height:1px;background:#393940;width:44px}.calculator-form h3{font-size:28px;font-weight:500;line-height:1.2;letter-spacing:-.02em}.form-subtitle{font-size:15px;color:#9d9da8;margin-top:10px;margin-bottom:28px;line-height:1.5;overflow-wrap:anywhere}.field{display:flex;flex-direction:column;gap:10px;font-size:14px;color:#d4d4db;margin-bottom:24px}.field input{background:#101013;border:1px solid #404047;border-radius:7px;min-height:54px;width:100%;padding:15px 16px;color:#fff;font-size:16px}.field input::placeholder{color:#6f6f7b}.field input:focus{border-color:#e54b54}.package-picker,.contact-picker{border:0;min-width:0}.package-picker legend,.contact-picker legend{font-size:14px;color:#d4d4db;margin-bottom:12px}.package-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.package-options label,.contact-options label{position:relative;cursor:pointer}.package-options input,.contact-options input{position:absolute;opacity:0;width:100%;height:100%;inset:0;cursor:pointer}.package-options span,.contact-options span{display:flex;align-items:center;justify-content:center;min-height:45px;border:1px solid #404047;border-radius:7px;font-size:14px;color:#adadb8;transition:background .2s,border .2s}.package-options input:checked+span,.contact-options input:checked+span{border-color:var(--brand-accent);color:#fff;background:#3a1e22}.package-options input:focus-visible+span,.contact-options input:focus-visible+span{outline:2px solid #fff;outline-offset:3px}.option-wide{grid-column:1/-1}.selection-summary{display:flex;justify-content:space-between;gap:20px;font-size:13px;color:#9696a1;margin:24px 0}.selection-summary strong{color:#dedee5;font-weight:400;text-align:right}.form-next{width:100%;min-height:54px}.form-footnote{font-size:12px;line-height:1.5;color:#888894;text-align:center;margin-top:13px}.contact-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:25px}.prototype-note{font-size:13px;line-height:1.55;color:#a1a1ad;margin:22px 0;padding-left:12px;border-left:2px solid #5d5d68}.form-back{display:block;text-align:center;width:100%;margin-top:18px;color:#b5b5c0;font-size:14px}.form-result .result-mark{display:grid;place-items:center;width:54px;height:54px;background:#3c2025;border:1px solid #fd3a44;color:var(--brand-accent);border-radius:50%;margin-bottom:28px;font-size:26px}.form-result>p{margin-top:20px;color:#b6b6c1;line-height:1.6;overflow-wrap:anywhere}.form-result .btn{width:100%}.prototype-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:30px;padding-bottom:35px;border-top:1px solid #27272d}.prototype-footer img{width:130px}.prototype-footer p{font-size:13px;color:#757580}.prototype-footer>a:last-child{font-size:15px;color:#a7a7af} @media(min-width:981px) and (max-width:1250px){.header{padding-inline:32px}.header .phone{display:none}.hero__body{padding-inline:48px}.hero__copy h1{font-size:56px}.hero__copy p{max-width:520px}.trust__item{padding-inline:16px}.package{padding-inline:20px}.package__features li{font-size:14px}.calculator-form,.calculator-story{padding:32px}.calculator-story h2{font-size:52px}} @media(max-width:980px){.container{width:calc(100% - 40px)}.section{padding:64px 0}.header{padding:16px 20px;background:#101013e8;grid-template-columns:1fr auto}.header .logo img{height:38px}.header .nav{display:none;position:absolute;top:70px;left:0;right:0;background:#17171b;padding:24px;flex-direction:column;gap:24px;border-bottom:1px solid #3a3a42}.header .nav.is-open{display:flex}.hero{height:auto;min-height:0;background:#0a0a0c;padding-bottom:32px}.hero__media{height:760px;max-height:none}.hero__photo{object-position:center 44%}.hero__veil{background:linear-gradient(180deg,#09090cb3 0%,transparent 52%,#0a0a0c 98%)}.hero__body{padding:0 20px}.hero__fold{height:auto;max-height:none;min-height:0;padding-bottom:0}.hero__eyebrow{font-size:10px;margin-top:27px;margin-bottom:15px;letter-spacing:.12em}.hero__copy h1{font-size:clamp(34px,6.5vw,56px);line-height:1.05;margin-top:0;margin-bottom:17px}.hero__copy p{font-size:16px;line-height:1.5;max-width:530px;margin-bottom:0}.hero__visual{min-height:310px;flex:auto}.hero__cta{gap:10px}.hero__note{font-size:12px;text-align:center;margin:2px 0 10px}.hero__cta .btn{font-size:16px;border-radius:8px}.trust{gap:12px;margin-top:22px}.trust__text b{font-size:14px}.trust__text span{font-size:12px}.trust__item{padding:14px!important;background:#161619;border:1px solid #242429!important;border-radius:8px}.trust__icon{height:24px;width:24px}.trust__item--pay{display:flex}.section-top{padding-top:18px;margin-bottom:30px}.section-top__aside{display:none}.section-heading{display:block;margin-bottom:28px}.section-heading h2{font-size:42px}.section-heading>p{font-size:16px;line-height:1.5;margin-top:20px}.section-heading>p br{display:none}.package-grid{gap:14px}.package{padding:20px 16px}.package__top{margin-bottom:20px}.package__tag{font-size:9px;letter-spacing:.04em}.package h3{font-size:30px}.package__intro{font-size:14px;min-height:36px}.coverage{height:220px;margin-inline:-12px}.coverage__image{width:150px;height:225px;left:calc(50% - 84px);top:5px}.coverage__label{display:none}.package__price{font-size:31px}.package__features{min-height:190px}.package__features li{font-size:14px}.package__button{font-size:14px;padding-inline:8px}.packages-bottom{flex-direction:column;gap:14px}.calculator{padding-top:0}.calculator-panel{grid-template-columns:1fr}.calculator-story{min-height:360px;padding:32px;background:linear-gradient(90deg,#151517f5,#151517b5 50%,#15151710),url('assets/hero-desktop.webp') 75% center/auto 130% no-repeat}.calculator-story h2{font-size:44px}.calculator-story h2 br:last-child{display:none}.calculator-story>.eyebrow{margin-bottom:20px}.calculator-story>p{font-size:16px;margin-top:18px}.calculator-story__bottom{display:none}.calculator-form{padding:32px}.prototype-footer{padding-bottom:110px;flex-wrap:wrap}.prototype-footer p{order:3;width:100%;font-size:12px}.mobile-bar__cta{border-radius:8px}.mobile-bar__call{border-radius:8px}.mobile-bar{background:#101013f5}.mobile-bar.is-hidden-for-form{visibility:hidden;opacity:0;pointer-events:none;transform:translateY(110%)} } @media(max-width:650px){.package-grid{grid-template-columns:1fr;gap:20px}.package{padding:24px}.package__tag{font-size:11px;letter-spacing:.1em}.package h3{font-size:36px}.package__intro{font-size:16px;min-height:0}.coverage{height:230px;margin-top:8px;margin-bottom:16px}.coverage__image{width:178px;height:267px;left:calc(50% - 103px);top:-17px}.coverage__label{display:block;right:10px;font-size:12px}.package__price{font-size:36px}.package__features{min-height:0;margin-top:20px;padding-top:20px;gap:12px}.package__features li{font-size:15px}.package__use{margin-top:18px}.package__button{font-size:16px}.calculator-story{min-height:345px;padding:27px}.calculator-story h2{font-size:42px}.calculator-form{padding:28px 23px}.calculator-form h3{font-size:25px}.steps{gap:12px;margin-bottom:30px}.steps__line{width:32px}.step{font-size:13px}.selection-summary{font-size:12px;gap:12px}.hero__visual{min-height:295px}.hero__media{height:765px}.hero__copy h1{font-size:clamp(30px,8.3vw,43px)}.hero__copy h1 br{display:none}.hero__copy p{max-width:420px}.section-heading h2{font-size:38px}.packages{padding-top:35px}.prototype-footer>a:last-child{font-size:13px}.prototype-footer img{width:116px}.package__price-note{font-size:13px}} .calculator-story{min-width:0}.calculator-story h2{overflow-wrap:normal} .calculator-story{background-image:linear-gradient(180deg,#151517 0%,#151517eb 35%,#15151744 72%,#101012 100%),url('assets/compare-after.jpg');background-position:center,center bottom;background-size:cover,auto 70%} @media(min-width:981px){.hero{min-height:700px;height:clamp(700px,52vw,900px)}} @media(max-width:980px){.calculator-panel{grid-template-columns:minmax(0,1fr)}.calculator-story h2 br:last-child{display:initial}.calculator-story h2{font-size:clamp(32px,9vw,44px)}} @media(max-width:980px){.hero__media{display:none}.hero__visual{height:360px;min-height:360px;margin:15px -20px 0;width:calc(100% + 40px);background:linear-gradient(180deg,#0a0a0c 0%,transparent 18%,transparent 82%,#0a0a0c 100%),url('assets/hero-desktop.webp') 76% center/cover no-repeat}.hero__copy p{text-shadow:none}.hero__note{margin-top:6px}.calculator-story{background-image:linear-gradient(90deg,#151517fa,#151517ab),url('assets/compare-after.jpg');background-size:cover}} @media(max-width:650px){.hero__visual{height:320px;min-height:320px;background-image:linear-gradient(180deg,#0a0a0c 0%,transparent 14%,transparent 85%,#0a0a0c 100%),url('assets/hero-mobile.webp');background-position:center,center 68%;background-size:cover,100% auto}.hero__copy h1{font-size:34px;line-height:1.08;max-width:410px}.hero__copy p{font-size:16px}} /* Remaining sections from the brief */ .package__top{display:none}.package__intro{font-size:16px;color:#b8b7bf}.package__price-note{font-size:13px} .benefits,.installation,.trust-section,.contacts{background:#15141b} .surface,.films,.projects,.reviews{background:#19181f} .workflow,.faq{background:#15141b} .benefits-list{border-top:1px solid #45434c;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} .benefits-list article{padding:24px 24px 16px 0;border-bottom:1px solid #45434c}.benefits-list article+article{padding-left:24px;border-left:1px solid #45434c}.benefits-list article>span,.workflow-list>li>span,.installation-grid article>span{display:block;color:#aaa8b2;font-size:14px;margin-bottom:38px}.benefits-list h3,.installation-grid h3,.films-panel h3{font-size:20px;font-weight:500;line-height:1.25}.benefits-list p,.installation-grid p,.films-panel p{font-size:15px;line-height:1.6;color:#b3b1ba;margin-top:11px;max-width:290px}.section-note{font-size:13px;color:#a09ea8;line-height:1.55;margin-top:20px} .surface-view{border-radius:10px;overflow:hidden;background:#08080a}.surface-view__image{height:clamp(300px,48vw,640px);position:relative;overflow:hidden}.surface-view__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.surface-before{filter:brightness(.68)}.surface-after{clip-path:inset(0 0 0 50%)}.surface-view__line{position:absolute;top:0;bottom:0;left:50%;width:1px;background:#fff;box-shadow:0 0 0 1px #050507}.surface-view__line:after{content:'↔';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;background:#15141b;border:1px solid #fff;border-radius:50%;color:#fff}.surface-view__label{position:absolute;top:20px;font-size:14px;padding:9px 12px;background:#15141bba;border-radius:4px}.surface-view__label--before{left:20px}.surface-view__label--after{right:20px}.surface-view__control{display:flex;align-items:center;gap:20px;padding:17px 20px;color:#a9a7b1;font-size:13px}.surface-view__control input{flex:1;accent-color:var(--brand-accent);cursor:ew-resize;min-width:40px}.installation-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #45434c}.installation-grid article{padding:24px 20px 28px 0}.installation-grid article+article{padding-left:22px;border-left:1px solid #45434c}.installation-grid article>span{margin-bottom:30px}.installation-note{display:flex;align-items:baseline;gap:36px;border-top:1px solid #45434c;padding-top:22px;margin-top:14px}.installation-note>span{font-size:14px;white-space:nowrap}.installation-note p{font-size:15px;color:#b3b1ba}.films-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #45434c;border-bottom:1px solid #45434c}.films-panel>div{padding:25px 24px 28px 0}.films-panel>div+div{padding-left:24px;border-left:1px solid #45434c}.workflow-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #45434c}.workflow-list li{display:flex;gap:24px;padding:27px 24px 29px 0;border-bottom:1px solid #45434c;min-height:155px}.workflow-list li:nth-child(3n+2),.workflow-list li:nth-child(3n+3){padding-left:24px;border-left:1px solid #45434c}.workflow-list li>span{margin:2px 0 0;color:#f4f2f7}.workflow-list h3{font-size:19px;font-weight:500}.workflow-list p{font-size:15px;line-height:1.55;color:#aaa8b2;margin-top:9px;max-width:300px}.projects-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.project-card{min-height:300px;padding:27px;display:flex;flex-direction:column;justify-content:flex-end;background:#15141b;border:1px solid #302e37;border-radius:9px;transition:border-color .2s,background-color .2s}.project-card:hover{border-color:#6a6870;background-color:#1d1b23}.project-card__type{font-size:13px;color:#b3b1ba;margin-bottom:auto}.project-card h3{font-size:36px;font-weight:500}.project-card p{font-size:15px;color:#b8b6c0;line-height:1.5;margin-top:8px}.project-card__link{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff26;padding-top:16px;margin-top:25px;font-size:14px}.project-card__link span{color:#fff}.trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #45434c;border-bottom:1px solid #45434c}.trust-grid article{padding:23px 20px 25px 0;min-height:180px}.trust-grid article+article{padding-left:22px;border-left:1px solid #45434c}.trust-grid h3{font-size:18px;font-weight:500}.trust-grid p{font-size:15px;line-height:1.55;color:#b3b1ba;margin-top:13px}.trust-grid strong{font-size:27px;color:#fff;font-weight:500}.trust-grid a{display:inline-block;margin-top:15px;border-bottom:1px solid #88858f;padding-bottom:3px;font-size:14px}.reviews-layout{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}.reviews-layout>div>h2{margin-top:20px}.rating{font-size:24px}.rating span{font-size:16px;letter-spacing:.02em;margin-left:7px}.reviews-layout>div>p:not(.section-note){font-size:16px;color:#b4b2bb;line-height:1.6;margin:17px 0 24px}.reviews-layout .btn{width:max-content}.reviews blockquote{border-left:1px solid var(--brand-accent);padding:10px 0 10px 28px}.reviews blockquote>p{font-size:23px;line-height:1.4;max-width:500px}.reviews blockquote footer{font-size:14px;color:#aba9b3;margin-top:24px}.reviews blockquote>a{display:inline-block;font-size:14px;margin-top:18px;border-bottom:1px solid #77757e;padding-bottom:3px}.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:10%}.faq-layout>div:first-child>p{font-size:16px;line-height:1.55;color:#aaa8b2;margin-top:20px}.faq-layout>div:first-child>a{display:inline-block;margin-top:18px;font-size:17px}.faq-list details{border-top:1px solid #45434c;padding:17px 0}.faq-list details:last-child{border-bottom:1px solid #45434c}.faq-list summary{list-style:none;position:relative;cursor:pointer;padding-right:38px;font-size:17px;line-height:1.4}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'+';position:absolute;right:4px;top:-2px;font-size:24px;color:#d2d0d8}.faq-list details[open] summary:after{content:'−'}.faq-list details p{color:#aaa8b2;font-size:15px;line-height:1.6;margin:12px 38px 2px 0}.final-cta{background:#1d1b23;border-block:1px solid #34323a}.final-cta__inner{display:flex;align-items:center;justify-content:space-between;gap:36px}.final-cta__inner>div{max-width:740px}.final-cta__inner p{font-size:16px;line-height:1.55;color:#b4b2bb;margin-top:17px}.final-cta__inner .btn{min-width:220px}.contacts-layout{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:stretch}.contacts-layout>div>p{font-size:16px;line-height:1.65;color:#b4b2bb;margin-top:23px}.contacts-phone{display:inline-block;font-size:22px;margin-top:21px}.contacts-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.contacts-actions .btn{font-size:14px;padding-inline:15px}.map-panel{min-height:350px;display:flex;flex-direction:column;justify-content:flex-end;padding:30px;background:linear-gradient(180deg,#15141b00 20%,#15141bd9 100%),repeating-linear-gradient(0deg,#ffffff0a 0 1px,transparent 1px 60px),repeating-linear-gradient(90deg,#ffffff0a 0 1px,transparent 1px 60px),#211f27;border:1px solid #ffffff1b;border-radius:9px}.map-panel span{font-size:12px;color:#aaa8b2}.map-panel strong{font-size:26px;font-weight:500;margin-top:7px}.map-panel i{font-size:14px;font-style:normal;margin-top:14px} .prototype-footer{width:100%;padding-inline:clamp(24px,5.2vw,100px);flex-wrap:wrap}.footer-policy{width:100%;font-size:12px;color:#96949e} @media(max-width:980px){.benefits-list,.installation-grid,.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.benefits-list article:nth-child(3),.installation-grid article:nth-child(3),.trust-grid article:nth-child(3){padding-left:0;border-left:0}.benefits-list article:nth-child(4),.installation-grid article:nth-child(4),.trust-grid article:nth-child(4){padding-left:22px;border-left:1px solid #45434c}.benefits-list article>span{margin-bottom:22px}.workflow-list{grid-template-columns:repeat(2,minmax(0,1fr))}.workflow-list li:nth-child(3n+3){padding-left:0;border-left:0}.workflow-list li:nth-child(2n){padding-left:22px;border-left:1px solid #45434c}.calculator{padding-top:64px}.reviews-layout,.faq-layout,.contacts-layout{gap:38px}.project-card{min-height:250px}.map-panel{min-height:300px}} @media(max-width:650px){.benefits,.surface,.installation,.films,.workflow,.projects,.trust-section,.reviews,.faq,.contacts,.final-cta{padding-block:62px}.section-heading h2{font-size:36px}.section-heading>p{font-size:15px}.benefits-list{grid-template-columns:1fr 1fr}.benefits-list article{padding:18px 13px 18px 0}.benefits-list article+article{padding-left:13px}.benefits-list article:nth-child(3){padding-left:0;border-left:0}.benefits-list article:nth-child(4){padding-left:13px}.benefits-list h3,.installation-grid h3{font-size:17px}.benefits-list p,.installation-grid p,.films-panel p{font-size:14px}.surface-view__image{height:340px}.surface-view__label{top:12px;left:12px}.surface-view__label--after{left:auto;right:12px}.surface-view__control{gap:10px;font-size:12px;padding:13px}.installation-grid{grid-template-columns:1fr 1fr}.installation-grid article{padding:18px 12px 20px 0}.installation-grid article+article{padding-left:12px}.installation-grid article:nth-child(3){padding-left:0;border-left:0}.installation-grid article:nth-child(4){padding-left:12px}.installation-grid article>span{margin-bottom:20px}.installation-note{display:block}.installation-note p{margin-top:9px;font-size:14px}.films-panel{grid-template-columns:1fr}.films-panel>div{padding:18px 0}.films-panel>div+div{padding-left:0;border-left:0;border-top:1px solid #45434c}.films-panel h3{font-size:18px}.workflow-list{grid-template-columns:1fr}.workflow-list li{padding:19px 0;min-height:0}.workflow-list li:nth-child(n){padding-left:0;border-left:0}.workflow-list li>span{min-width:26px}.workflow-list h3{font-size:17px}.workflow-list p{font-size:14px}.projects-grid{grid-template-columns:1fr}.project-card{min-height:230px;padding:22px}.project-card h3{font-size:30px}.trust-grid{grid-template-columns:1fr 1fr}.trust-grid article{padding:18px 12px 18px 0;min-height:145px}.trust-grid article+article{padding-left:12px}.trust-grid article:nth-child(3){padding-left:0;border-left:0}.trust-grid article:nth-child(4){padding-left:12px}.trust-grid h3{font-size:16px}.trust-grid p{font-size:14px}.reviews-layout,.faq-layout,.contacts-layout{grid-template-columns:1fr;gap:35px}.rating{font-size:22px}.reviews blockquote{padding-left:18px}.reviews blockquote>p{font-size:20px}.reviews-layout .btn{width:100%}.faq-layout>div:first-child>p{font-size:15px}.faq-list summary{font-size:16px}.faq-list details p{font-size:14px}.final-cta__inner{display:block}.final-cta__inner h2{font-size:34px}.final-cta__inner p{font-size:15px}.final-cta__inner .btn{width:100%;margin-top:25px}.contacts-layout>div>p{font-size:15px}.contacts-phone{font-size:20px}.map-panel{min-height:260px;padding:22px}.prototype-footer{padding-bottom:100px;gap:16px}.footer-policy{font-size:12px}} /* Art-direction corrections: full-width sections, restrained type, supplied background. */ body,.packages,.calculator{background:#15141b} .hero{background:#15141b} .hero__veil{background:linear-gradient(0deg,#15141b 0%,rgba(21,20,27,.94) 5%,rgba(21,20,27,.58) 11%,rgba(21,20,27,0) 25%),linear-gradient(90deg,rgba(5,5,5,.72),transparent 64%)} .container{width:100%;padding-inline:clamp(24px,5.2vw,100px)} .packages{padding-top:20px} .calculator{padding-top:96px} .section-heading{margin-bottom:56px} .package__tag{letter-spacing:.02em} .package h3,.package__price,h2{letter-spacing:-.02em} .calculator-story__bottom span:first-child{letter-spacing:.02em} .eyebrow,.hero__eyebrow{display:none} @media(min-width:1101px){ .header{padding:18px var(--side)} .hero__body{padding:8px 130px} } @media(max-width:980px){ .container{width:100%;padding-inline:20px} .packages{padding-top:14px}.calculator{padding-top:64px} } @media(max-width:980px){.hero__visual{background-image:linear-gradient(180deg,#15141b 0%,transparent 18%,transparent 76%,#15141b 100%),url('assets/hero-desktop.webp')}} @media(max-width:650px){.hero__visual{background-image:linear-gradient(180deg,#15141b 0%,transparent 14%,transparent 80%,#15141b 100%),url('assets/hero-mobile.webp')}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}} .package__top{display:none}.map-panel{width:100%;min-height:350px;border:1px solid #ffffff1b;border-radius:9px;background:#201e26} .hero{padding-top:80px}.header{position:fixed;inset:0 0 auto;z-index:40;background:#15141be0} @media(max-width:980px){.hero{padding-top:70px}.header{position:fixed;inset:0 0 auto;background:#15141bf0}} .coverage{height:260px;margin:18px -16px 18px;border-bottom:1px solid #ffffff16;background:#101014;position:relative} .coverage__image{position:absolute;inset:0;width:100%;height:100%;left:0;top:0;right:0;transform:none;background-image:url('assets/package-front.webp');background-repeat:no-repeat;background-size:300% auto} .coverage--mini .coverage__image{background-position:0% 0%}.coverage--front .coverage__image{background-position:50% 0%}.coverage--full .coverage__image{background-position:100% 0%} .coverage__image img,.coverage__image svg,.coverage__label,.coverage__legend{display:none!important} @media(max-width:980px){.coverage{height:220px}} @media(max-width:650px){.coverage{height:255px;margin-inline:-16px}} .coverage{height:auto;aspect-ratio:1/1} .package,.project-card{border:2px solid var(--brand-accent);border-radius:6px} .package--featured{border:2px solid var(--brand-accent);border-right-color:var(--brand-accent)} .package{background:#17161c} .package--featured{background:#1b191f} .project-card{border-radius:6px;background:#1b1a20;position:relative} .project-card:after{content:"";position:absolute;top:12px;right:-2px;bottom:12px;width:2px;background:var(--brand-accent)} .project-card:hover{border-color:#ff542b;background-color:#211f27} .package--featured{border-color:var(--brand-accent)} @media(min-width:1101px){.hero__body{padding-inline:var(--side)}} @media(max-width:980px){.hero__body{padding-inline:20px}} .coverage{height:clamp(150px,16vw,210px);aspect-ratio:auto;margin-block:10px 16px;border-bottom:0;overflow:visible} .coverage__image{background-size:300% auto;background-position-y:center} @media(max-width:980px){.coverage{height:170px}} @media(max-width:650px){.coverage{height:190px;margin-block:8px 14px}} .coverage{display:grid;place-items:center;height:clamp(150px,16vw,210px);background:transparent;overflow:hidden} .coverage__image{position:relative;inset:auto;width:100%;height:100%;display:grid;place-items:center;background:none} .coverage__image img{display:block!important;position:static!important;width:100%;height:100%;object-fit:contain} .coverage--mini .coverage__image img{transform:none} /* Soften the red coverage tint while preserving neutral bodywork and image alpha. */ .coverage .coverage__image img{filter:url(#coverage-tint)} .coverage{overflow:visible;height:clamp(180px,17vw,230px);margin-bottom:20px} .coverage__image{overflow:visible} .coverage__image img{object-fit:contain;object-position:center} .coverage__image{width:100%;height:100%;inset:0;margin:0} .coverage__image img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;transform:none!important} @media(max-width:650px){.coverage{height:auto;aspect-ratio:2.15/1;min-height:0}.coverage__image{height:100%}.coverage__image img{height:100%;max-height:100%;object-fit:contain}} @media(max-width:980px){.coverage{height:170px}} @media(max-width:650px){.coverage{height:190px}} /* Brand accents drawn from the live Dragon Side site */ :root{--surface:#2b2933;--red:#db3207;--brand-accent:var(--red)} body,.packages,.calculator,.benefits,.installation,.workflow,.trust-section,.faq,.contacts{background:#2b2933} .surface,.films,.projects,.reviews{background:#27252f} .final-cta{background:#24222c;border-color:#db320755} .hero{background:#2b2933} .hero__veil{background:linear-gradient(0deg,#2b2933 0%,rgba(43,41,51,.95) 5%,rgba(43,41,51,.58) 11%,transparent 25%),linear-gradient(90deg,rgba(5,5,5,.72),transparent 64%)} .header{background:#2b2933e8} .package,.project-card{background:#26242d;border-color:var(--brand-accent);border-radius:5px} .package--featured{background:#292630;border:2px solid var(--brand-accent)} .package__intro,.package__price-note,.package__use{color:#c0bdc9} .package__features{border-color:#db320755} .package__features li:before{color:var(--brand-accent)} .project-card:after{top:12px;bottom:12px} .section-heading h2,.reviews-layout h2,.faq-layout h2,.contacts-layout h2,.final-cta h2{font-weight:700;text-transform:uppercase;letter-spacing:0} .section-heading h2:after{content:"";display:block;width:62px;height:2px;margin-top:15px;background:var(--brand-accent)} .benefits{position:relative;isolation:isolate;overflow:hidden} .benefits:before{content:"DRAGON SIDE";position:absolute;z-index:-1;top:30%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:clamp(100px,18vw,280px);font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1px #ffffff14;pointer-events:none} .benefits:after{content:"";position:absolute;z-index:-1;inset:0 0 0 auto;width:min(28vw,360px);background:url("assets/brand-hex.svg") center right/contain no-repeat;opacity:.32;mask-image:linear-gradient(90deg,transparent 0%,#000 35%)} .benefits>.container{position:relative;z-index:1} .benefits-list{border-color:#db320766;position:relative;z-index:1} .benefits-list article{padding-top:22px} .benefits-list article>span{width:68px;height:72px;display:grid;place-items:center;margin:0 auto 30px;background:#db320733;color:#fff;border:1px solid var(--brand-accent);clip-path:polygon(18% 0,82% 0,100% 34%,88% 82%,50% 100%,12% 82%,0 34%);font-size:17px} .benefits-list h3,.benefits-list p{text-align:center;margin-inline:auto} .benefits-list h3{font-weight:700;text-transform:uppercase;font-size:17px;letter-spacing:0} .benefits-list article+article,.benefits-list article:nth-child(4){border-left:0;padding-left:0} .benefits .section-heading h2:after{display:none} .benefits-list,.benefits-list article,.benefits-list article+article{border:0} .benefits:after{content:none;background:none} .installation-grid,.workflow-list,.trust-grid{border-color:#db320766} .installation-grid article+article,.workflow-list li:nth-child(3n+2),.workflow-list li:nth-child(3n+3),.trust-grid article+article{border-color:#db320755} .films-panel{border-color:#db320766} .films-panel>div+div{border-color:#db320755} .faq-list details,.faq-list details:last-child{border-color:#db320766} .reviews blockquote{border-left-color:var(--brand-accent)} .section-top{border-color:#db320766} .btn--outline,.package__button{border-color:var(--brand-accent);color:#fff} .btn--primary,.package--featured .package__button{background:var(--brand-accent);border-color:var(--brand-accent)} @media(max-width:980px){.hero__veil{background:linear-gradient(180deg,#2b2933aa 0%,transparent 52%,#2b2933 98%)}.hero__visual{background-image:linear-gradient(180deg,#2b2933 0%,transparent 18%,transparent 76%,#2b2933 100%),url("assets/hero-desktop.webp")}.benefits:after{width:220px;opacity:.22}.benefits-list article>span{margin-bottom:22px}} @media(max-width:650px){.hero__visual{background-image:linear-gradient(180deg,#2b2933 0%,transparent 14%,transparent 80%,#2b2933 100%),url("assets/hero-mobile.webp")}.benefits:before{font-size:90px;top:18%}.benefits:after{width:150px;opacity:.16}.section-heading h2:after{margin-top:11px}} /* PPF finish comparisons and narrow edge accents, using the brand red accents. */ .surface-tabs{display:flex;gap:8px;margin:0 0 18px;border-bottom:1px solid #db320755;overflow-x:auto} .surface-tab{flex:0 0 auto;padding:13px 20px 14px;border:1px solid transparent;border-bottom:2px solid transparent;background:transparent;color:#c7c3d0;font-size:15px} .surface-tab:hover{color:#fff} .surface-tab.is-active{color:#fff;border-color:#db320766;border-bottom-color:var(--brand-accent);background:#db320712} .surface-panel[hidden]{display:none} .surface-panel.is-active{animation:surface-in .22s ease-out} .surface-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start} .surface-panel{min-width:0;padding:13px;border:1px solid var(--brand-accent);border-radius:5px;background:#26242d} .surface-panel h3{font-size:18px;margin:0 0 11px;font-weight:600} .surface-panel .surface-view{border-radius:3px} .surface-panel .surface-view__image{height:clamp(260px,29vw,420px)} .surface-panel .surface-view__label{font-size:11px;top:10px;padding:6px 8px} .surface-panel .surface-view__label--before{left:10px}.surface-panel .surface-view__label--after{right:10px} .surface-panel .surface-view__control{gap:8px;padding:9px 4px 2px;font-size:11px} .surface-panel .surface-caption{font-size:16px;min-height:0;line-height:1.6;color:#d3cfdc} @media(max-width:650px){.surface-panel .surface-caption{font-size:15px}} .surface-caption{margin-top:16px;color:#c0bdc9;font-size:15px;line-height:1.55} .surface-view--color .surface-view__image img{object-position:center 63%} .surface-caption a{color:#fff;text-decoration:underline;text-decoration-color:var(--brand-accent);text-underline-offset:4px} .surface-view--matte .surface-before,.surface-view--matte .surface-after--matte, .surface-view--color .surface-before--color,.surface-view--color .surface-after--color{filter:none} .surface-view--matte .surface-view__image:after,.surface-view--color .surface-view__image:after{content:none} .surface{position:relative;isolation:isolate;overflow:hidden} .surface:after,.installation:after,.workflow:after,.projects:after,.trust-section:after,.reviews:after,.faq:after,.contacts:after{content:"";position:absolute;z-index:-1;right:0;top:8%;bottom:8%;width:min(16vw,220px);background:url("assets/brand-hex.svg") center right/contain no-repeat;opacity:.13;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 55%)} .projects:before,.surface:before{content:"";position:absolute;z-index:0;left:0;top:8%;bottom:0;width:min(35vw,480px);background:url("assets/edge-car-modx.webp") left center/contain no-repeat;opacity:.48;pointer-events:none;mask-image:linear-gradient(90deg,#000 62%,transparent)} .surface>.container{padding-left:clamp(100px,13vw,230px)} .surface>.container,.installation>.container,.workflow>.container,.projects>.container,.trust-section>.container,.reviews>.container,.faq>.container,.contacts>.container{position:relative;z-index:1} .surface-tabs,.surface-panels{position:relative;z-index:1} @keyframes surface-in{from{opacity:.65;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} @media(max-width:980px){.surface:after,.installation:after,.workflow:after,.projects:after,.trust-section:after,.reviews:after,.faq:after,.contacts:after{width:150px;opacity:.09}.projects:before,.surface:before{width:230px;opacity:.2}.surface>.container{padding-left:clamp(70px,11vw,120px)}.surface-panel{padding:10px}.surface-panel .surface-view__image{height:210px}} @media(max-width:650px){.surface-panels{grid-template-columns:1fr;gap:14px}.surface>.container{padding-left:20px}.surface-panel{padding:12px}.surface-panel .surface-view__image{height:clamp(240px,72vw,340px)}.surface-view--matte .surface-view__image:after,.surface-view--color .surface-view__image:after{font-size:10px;bottom:12px}.surface:after,.installation:after,.workflow:after,.projects:after,.trust-section:after,.reviews:after,.faq:after,.contacts:after{width:90px;opacity:.06}.projects:before,.surface:before{width:175px;opacity:.12}} @media(prefers-reduced-motion:reduce){.surface-panel.is-active{animation:none}} /* Match the exact charcoal background supplied by the user. */ body,.hero,.packages,.calculator,.benefits,.surface,.installation,.films,.workflow,.projects,.trust-section,.reviews,.faq,.contacts,.final-cta{background-color:#15141b} .header{background-color:#15141be8} @media(max-width:980px){ .header,.header .nav{background:#15141b} .header .nav{top:100%} } .package,.package--featured,.project-card,.surface-panel{background-color:#15141b} .package.package--featured{background:linear-gradient(155deg,#60251c 0%,#481c17 48%,#321411 100%);border-color:var(--brand-accent);box-shadow:0 8px 28px #0003} .package--featured .package__intro,.package--featured .package__price-note,.package--featured .package__use,.package--featured .package__price span:first-child{color:#f2ded8} .package--featured .package__features{border-color:#ff967366} .package--featured .package__features li{color:#fff2ee} .package--featured .package__features li:before{color:#ff9673} .final-cta{background:#15141b;border-color:#db320755} .package__button.btn--outline:hover{border-color:var(--brand-accent);background:transparent;color:#fff;box-shadow:none} .coverage{display:flex!important;align-items:center;justify-content:center;height:clamp(170px,18vw,250px)!important;min-height:0!important;aspect-ratio:auto!important;overflow:visible;margin-block:10px 18px} .coverage__image{position:static!important;inset:auto!important;display:flex!important;align-items:center;justify-content:center;width:100%!important;height:100%!important;margin:0;overflow:visible} .coverage__image img{position:static!important;display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center bottom;transform:none!important} @media(max-width:650px){.coverage{height:clamp(160px,48vw,210px)!important;margin-block:10px 18px}.coverage__image{height:100%!important}} /* Dragon Side map and footer */ .map-block{height:467px;position:relative;isolation:isolate;background:#15141b} .map-block__iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .map-block__route{position:absolute;z-index:3;left:50%;top:-33px;bottom:auto;transform:translateX(-50%);width:min(1200px,calc(100% - 40px));text-align:center;white-space:nowrap} .map-block__route:before{content:"";position:absolute;left:0;right:0;top:31px;height:11px;border-radius:10px;background:var(--brand-accent)} .map-block__route a{position:relative;display:inline-block;padding:20px 50px;background:var(--brand-accent);box-shadow:0 5px 0 #64000e;border-radius:5px;color:#fff;font-size:18px;text-decoration:none;transition:background-color .25s} .map-block__route a:hover{background:#64000e} .brand-footer{position:relative;z-index:2;background:#15141b;color:#fff;padding:0} .brand-footer__inner{width:min(1280px,calc(100% - 48px));padding-top:4px} .brand-footer__top{position:relative;display:grid;grid-template-columns:minmax(220px,1fr) minmax(300px,1.15fr) minmax(220px,1fr);gap:20px;align-items:start;padding-top:0} .brand-footer__top:before,.brand-footer__top:after{content:"";position:absolute;top:-5px;width:calc(50% - 120px);height:11px;border-radius:10px;background:var(--brand-accent)} .brand-footer__top:before{left:0}.brand-footer__top:after{right:0} .brand-footer__col{font-size:14px;line-height:1.7;padding-top:28px} .brand-footer__col p+p{margin-top:22px} .brand-footer__col span{color:var(--brand-accent)} .brand-footer__col a{color:inherit;text-decoration:none} .brand-footer__center{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center;padding-top:0} .brand-footer__seal{position:relative;width:208px;height:208px;flex:none;margin-top:-90px;margin-bottom:22px;border-radius:50%;background:#15141b;display:grid;place-items:center;text-decoration:none;overflow:hidden} .brand-footer__seal-ring{display:block;width:100%;height:100%;object-fit:contain} .brand-footer__socials{display:flex;justify-content:space-between;gap:0;width:223px} .brand-footer__socials a{width:50px;height:50px;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;text-decoration:none;position:relative} .brand-footer__socials a:before{content:"";position:absolute;inset:0;background:url("assets/brand-social-ring.png") center/cover no-repeat;animation:brand-ring-turn 3s linear infinite} .brand-footer__socials svg{position:relative;z-index:1;width:30px;height:30px;fill:#fff;transition:fill .25s} .brand-footer__socials a:hover svg{fill:var(--brand-accent)} @keyframes brand-ring-turn{to{transform:rotate(360deg)}} .brand-footer__phone{margin-top:16px;color:#fff;text-decoration:none;font-size:18px} .brand-footer__about{padding-left:8px} .brand-footer__nav{display:flex;justify-content:center;gap:22px;margin:23px 0 25px} .brand-footer__nav a{color:#fff;font-size:14px;text-transform:uppercase;text-decoration:none} .brand-footer__nav a:first-child,.brand-footer__nav a:hover{color:var(--brand-accent)} .brand-footer__legal{display:flex;flex-direction:column;align-items:center;gap:10px;padding-bottom:18px;text-align:center} .brand-footer__legal strong{font-size:16px;text-transform:uppercase} .brand-footer__legal a{color:var(--brand-accent);font-size:14px;text-decoration:none} .brand-footer__legal a:hover{color:var(--brand-accent)} .brand-footer__bottom{min-height:72px;padding:14px 24px;background:var(--brand-accent);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px 16px;text-align:center;font-size:14px;text-transform:uppercase;position:relative} .brand-footer__bottom-links{display:flex;justify-content:center;gap:18px;text-transform:none;font-size:13px} .brand-footer__bottom-links a{color:#fff;text-decoration:underline;text-underline-offset:2px} .brand-footer__bottom small{grid-column:2;font-size:12px;text-transform:none} .brand-footer__bottom-phone{grid-column:3;grid-row:1/3;justify-self:end;color:#fff;text-decoration:none;font-size:18px} .calculator-heading{margin-bottom:42px;align-items:flex-end} .calculator-heading h2{max-width:760px} .calculator-heading>p{max-width:430px} @media(max-width:980px){.calculator-heading{display:block;margin-bottom:30px}.calculator-heading h2{font-size:clamp(32px,6vw,48px)}.calculator-heading>p{margin-top:14px}} .contacts.contacts_service{position:relative;display:flex;align-items:center;min-height:882px;padding:0;background-color:#15141b;background-image:url("assets/contacts-service-clean-modx.webp");background-size:1151px auto;background-position:right top;background-repeat:no-repeat;overflow:hidden} .contacts.contacts_service>.container{display:flex;align-items:center;min-height:inherit} .contacts__figure{position:absolute;pointer-events:none}.contacts__figure_1{left:-177px;top:203px}.contacts__figure_2{right:-161px;top:122px}.contacts__figure img{display:block;width:100%;height:auto}.contacts__figure_1 img,.contacts__figure_2 img{width:220px} .contacts__block{width:min(465px,100%);text-align:left;margin-left:clamp(0px,4vw,56px);margin-right:auto;padding-top:0}.contacts__logo{margin-bottom:18px}.contacts__logo img{display:inline-block;width:178px;height:auto;object-fit:contain} .contacts__title{font-weight:700;color:#ff4200;font-size:32px;line-height:1.15;letter-spacing:0;text-transform:none;margin-bottom:14px}.contacts__subtitle{max-width:360px;margin-left:0;line-height:1.45;font-size:15px;font-weight:400;margin-bottom:22px} .contacts__group{padding:1px;position:relative;margin-bottom:17px;overflow:hidden;background:#fff;border-radius:5px}.contacts__group:before{content:"";position:absolute;inset:0;background:linear-gradient(-90deg,var(--brand-accent) 0%,#fff 100%)} .contacts__group input{display:block;background-color:#000;position:relative;z-index:2;width:100%;height:63px;font:inherit;font-size:16px;padding:20px;color:#fff;border:0;border-radius:5px;outline:none}.contacts__group input::placeholder{color:#aaa}.contacts__bottom{display:block;padding-top:8px}.contacts__order .btn{width:100%;font-size:18px;color:#fff;box-shadow:0 5px 0 #64000e;background-color:var(--brand-accent);padding:20px 28px;border:0;border-radius:5px;transition:.4s;display:block;position:relative;cursor:pointer}.contacts__order .btn:hover{background-color:#64000e}.contacts__help{font-size:13px;line-height:1.45;color:#d0ced4;text-align:center;margin:15px 0 0}.contacts__help a{color:#fff;text-decoration:underline;text-underline-offset:3px}.contacts__help a:hover{color:var(--brand-accent)} #contact-request input[name="hex"]{position:absolute;width:2px!important;height:3px!important;margin:0 0 -3px!important;opacity:.01;padding:0;pointer-events:none} @media(max-width:1400px){.contacts__figure{display:none}} @media(max-width:1200px){.contacts.contacts_service{min-height:765px;background-size:1000px;background-position:right top}} @media(max-width:992px){.contacts.contacts_service{min-height:640px;background-size:700px}} @media(max-width:768px){.contacts.contacts_service{min-height:600px;background-size:600px}} @media(max-width:576px){.contacts.contacts_service{display:block;min-height:0;padding:0 0 70px;background-size:330px;background-position:top center}.contacts.contacts_service>.container{display:block;min-height:0}.contacts__block{text-align:center;margin-inline:0;padding-top:205px}.contacts__title{font-size:32px}.contacts__subtitle{font-size:15px;margin-inline:auto}.contacts__help{text-align:center}.contacts__bottom{padding-top:8px}.contacts__order,.contacts__order .btn{width:100%}.contacts__order .btn{padding:20px 15px}}@media(max-width:980px){.map-block{height:400px}.brand-footer__inner{width:calc(100% - 40px)}.brand-footer__top{grid-template-columns:minmax(170px,1fr) minmax(230px,1.15fr) minmax(170px,1fr);gap:14px}.brand-footer__col{font-size:13px}.brand-footer__seal{width:170px;height:170px}.brand-footer__socials{width:205px}.brand-footer__socials a{width:46px;height:46px}} @media(max-width:650px){.map-block{height:330px}.map-block__route{top:-30px;width:calc(100% - 32px)}.map-block__route a{padding:16px 22px;font-size:16px}.map-block__route:before{top:26px;height:9px;left:0;right:0}.brand-footer__inner{width:calc(100% - 40px);padding-top:0}.brand-footer__top{grid-template-columns:1fr;gap:0;padding-top:0}.brand-footer__top:before,.brand-footer__top:after{top:-3px;width:calc(50% - 100px)}.brand-footer__center{grid-row:1;margin-bottom:4px}.brand-footer__seal{width:145px;height:145px;margin-top:-60px;margin-bottom:14px}.brand-footer__contact{grid-row:2;padding-top:22px}.brand-footer__about{grid-row:3;padding:22px 0 0}.brand-footer__nav{gap:14px;flex-wrap:wrap;margin:23px 0 22px}.brand-footer__nav a{font-size:12px}.brand-footer__legal{gap:9px;padding-bottom:18px}.brand-footer__legal a{font-size:12px}.brand-footer__bottom{font-size:11px;min-height:66px;grid-template-columns:1fr;gap:8px}.brand-footer__bottom-links,.brand-footer__bottom small,.brand-footer__bottom-phone{grid-column:1;grid-row:auto;justify-self:center;font-size:12px}} /* Reviews copied from the Dragon Side service page */ .reviews-source{position:relative;overflow:hidden;background:#15141b!important;color:#fff;padding:100px 0 90px} .reviews-source__head{font-size:30px;font-weight:700;text-transform:uppercase;text-align:center;line-height:1.2;padding-bottom:61px;margin:0 auto 20px;position:relative;letter-spacing:0} .reviews-source__head:after{content:"";position:absolute;left:0;right:0;bottom:0;margin:auto;width:178px;height:38px;background:url("assets/brand-head.png") center/contain no-repeat} .reviews-source__subhead{text-align:center;font-size:16px;line-height:1.6;padding:0 20px;max-width:900px;margin:0 auto} .review-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px;touch-action:pan-y} .review-cards:focus-visible{outline:2px solid #fff;outline-offset:5px} .review-card{position:relative;display:flex;flex-direction:column;min-width:0;min-height:330px;padding:6px;border:2px solid #4a446d;border-radius:5px;background:#15141b;text-align:left} .review-card:before,.review-card:after{content:'';position:absolute;width:2px;height:60px;background:#ff3400} .review-card:before{left:-2px;top:30px}.review-card:after{right:-2px;bottom:30px} .review-card__content{display:flex;flex:1;flex-direction:column;min-width:0;padding:26px;background:#fff;border-radius:5px;color:#2f2d39} .review-card__corner{position:absolute;width:10px;height:10px;background:#ff3400;z-index:1;pointer-events:none} .review-card__corner--1{left:4px;top:4px}.review-card__corner--2{left:4px;bottom:4px} .review-card__corner--3{right:4px;top:4px}.review-card__corner--4{right:4px;bottom:4px} .review-card__header{display:flex;align-items:center;gap:12px} .review-card__avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#f0d4e3;color:#8a4165;font-size:20px} .review-card__author{min-width:0} .review-card__author h3{font-size:17px;line-height:1.3;font-weight:600;overflow-wrap:anywhere} .review-card__author time{display:block;color:#77747f;font-size:12px;margin-top:5px} .review-card__stars{color:#e5ac00;font-size:18px;letter-spacing:3px;margin:22px 0 14px} .review-card__text{margin:0;color:#2f2d39;font-size:17px;line-height:1.6;overflow-wrap:anywhere;white-space:pre-line} .review-card__footer{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:22px} .review-card__note{font-size:12px;color:#77747f} .review-card__source{align-self:flex-end;font-size:14px;color:#2f2d39;text-decoration:none;width:fit-content} .review-card__source:hover,.review-all:hover{color:#db3207} .review-summary{text-align:center;font-size:14px;color:#aaa8b2;margin-top:28px} .review-pagination{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:20px} .review-pagination__pages{display:flex;align-items:center;gap:8px} .review-pagination button{flex-shrink:0;width:44px;height:44px;padding:0;border:1px solid #aaa2d4;border-radius:50%;background:#27252f;color:#fff;font-size:15px} .review-pagination button[aria-current="page"],.review-pagination button:hover:not(:disabled){background:#db3207;border-color:#db3207} .review-pagination button:disabled{opacity:.3;cursor:default} .review-pagination__gap{width:20px;text-align:center;color:#aaa8b2} .review-all{display:block;width:fit-content;margin:32px auto 0;padding:8px 0;font-size:15px;line-height:1.5;color:#c0bdc9;text-align:center} @media(max-width:980px){.review-card__content{padding:20px}.review-card__text{font-size:15px}.review-card__header{gap:9px}.review-card__avatar{width:36px;height:36px}.review-card__author h3{font-size:15px}} @media(max-width:650px){ .reviews-source__head{font-size:26px;padding-bottom:44px}.reviews-source__head:after{height:28px} .reviews-source__subhead{font-size:14px;padding-inline:0}.reviews-source__subhead br{display:none} .review-cards{grid-template-columns:1fr;gap:0;margin-top:26px} .review-card{min-height:330px}.review-card__content{padding:24px 16px}.review-card__text{font-size:17px} .review-pagination{gap:12px}.review-pagination__pages{gap:6px} .review-pagination__gap{width:12px} } @media(max-width:360px){.review-pagination{gap:8px}.review-pagination button{width:40px;height:40px}} /* FAQ readability */ .faq-list details[data-expanded="false"] summary:after{content:'+'} .faq-list details{padding-block:19px} .faq-list summary{font-size:19px;line-height:1.45} .faq-list details p{font-size:16px;line-height:1.65} @media(max-width:650px){.faq-list details{padding-block:17px}.faq-list summary{font-size:17px}.faq-list details p{font-size:15px}} /* Keep the cartoon car as the projects section decoration only. */ .surface:before{content:none} .hero:before{content:none!important} /* Calculator: two-step request with the car artwork on the right. */ .calculator-panel{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:620px;border:0;border-radius:0;background:#15141b} .calculator-form{grid-column:1;grid-row:1;position:relative;z-index:2;background:transparent;padding:clamp(28px,4vw,58px)} .calculator-story{grid-column:2;grid-row:1;position:relative;min-height:100%;padding:0;overflow:hidden;background-image:linear-gradient(90deg,#15141b 0%,#15141b66 22%,transparent 62%),url("assets/contacts-service-clean-modx.webp");background-size:cover,auto 100%;background-position:center,right center;background-repeat:no-repeat} .calculator-story__caption{position:absolute;right:24px;bottom:22px;padding:10px 14px;border:1px solid #db320766;border-radius:4px;background:#15141bba;color:#efedf4;font-size:14px;line-height:1.4} .calculator-heading{display:block;margin-bottom:42px} .calculator-heading h2{max-width:820px;font-size:clamp(32px,3.15vw,44px)} .calculator-heading>p{max-width:700px;margin-top:16px} .calculator-form h3{font-size:clamp(26px,2.2vw,32px)} .calculator-form .step{font-size:15px} .calculator-form .form-subtitle{font-size:16px} .calculator-form .field{font-size:15px} .calculator-form .field input{font-size:17px;min-height:58px} .calculator-form .package-picker legend,.calculator-form .contact-picker legend{font-size:15px} .calculator-form .package-options span,.calculator-form .contact-options span{font-size:15px;min-height:49px} .calculator-form .form-next{font-size:18px;min-height:60px} .package-options span{color:#d0ced8} .form-footnote{font-size:13px;line-height:1.5;color:#aaa8b2;margin-top:14px} .calculator-form .package-picker{margin:0 0 18px;padding:0} .calculator-form .package-options{row-gap:9px} @media(max-width:980px){.calculator-panel{grid-template-columns:1fr;min-height:0}.calculator-story{grid-column:1;grid-row:1;min-height:260px;background-image:linear-gradient(180deg,transparent 55%,#15141b 100%),url("assets/contacts-service-clean-modx.webp");background-size:cover,auto 410px;background-position:center,bottom center}.calculator-story__caption{right:16px;bottom:14px;font-size:12px}.calculator-form{grid-column:1;grid-row:2;padding:32px}} @media(max-width:650px){.calculator-story{min-height:210px;background-size:cover,auto 330px}.calculator-form{padding:28px 22px}.calculator-heading h2{font-size:36px}} /* Match the original Dragon Side advantages layout, keeping this landing's copy. */ .benefits{padding-bottom:108px} .benefits .section-heading{display:block;text-align:center;margin:0 auto 0;position:relative;z-index:1} .benefits .section-heading h2{font-size:clamp(32px,2.6vw,40px);line-height:1.18;text-transform:uppercase;letter-spacing:0;margin:0 auto 15px} .benefits .section-heading>p{font-size:20px;line-height:1.5;margin:0 auto;max-width:760px;padding:0} .benefits-list.advantages__block{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:0;margin:0 -22px;padding-top:56px;position:relative;z-index:1} .benefits-list .advantages__col{width:auto;padding:0 22px;margin:0 0 50px;border:0;min-width:0} .benefits-list .advantages__item{text-align:center} .benefits-list .advantages__ico{position:relative;width:145px;height:143px;display:grid;place-items:center;padding:0;margin:0 auto 34px;isolation:isolate;clip-path:polygon(18% 0,82% 0,100% 32%,89% 82%,50% 100%,11% 82%,0 32%);background:#b8addc} .benefits-list .advantages__ico:before{content:"";position:absolute;z-index:-1;inset:2px;background:#75699b;clip-path:polygon(18% 0,82% 0,100% 32%,89% 82%,50% 100%,11% 82%,0 32%)} .benefits-list .advantages__ico:after{content:"";position:absolute;z-index:2;left:calc(50% - 8px);bottom:-1px;width:16px;height:13px;background:var(--brand-accent);clip-path:polygon(50% 0,100% 100%,0 100%)} .benefits-list .advantages__ico svg{position:relative;z-index:1;width:62px;height:62px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .benefits-list .advantages__item h3{font-size:22px;font-weight:700;line-height:1.2;text-transform:uppercase;letter-spacing:0;text-align:center;margin:0 auto 7px;max-width:320px} .benefits-list .advantages__item p{font-size:18px;line-height:1.5;color:#f0edf5;text-align:center;margin:0 auto;max-width:330px} .benefits:before{top:26%;font-size:clamp(100px,18vw,280px)} .benefits:after{content:"";display:block;position:absolute;z-index:0;right:0;top:8%;bottom:8%;width:min(18vw,250px);background:url("assets/brand-hex.svg") center right/contain no-repeat;opacity:.15;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 50%)} @media(max-width:980px){.benefits-list.advantages__block{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:42px;margin-inline:-12px}.benefits-list .advantages__col{padding-inline:12px;margin-bottom:38px}.benefits-list .advantages__ico{width:132px;height:130px;margin-bottom:24px}.benefits-list .advantages__item h3{font-size:20px}.benefits-list .advantages__item p{font-size:17px}.benefits:after{width:150px;opacity:.1}} @media(max-width:650px){.benefits .section-heading h2{font-size:28px}.benefits .section-heading>p{font-size:18px}.benefits-list.advantages__block{padding-top:30px}.benefits-list .advantages__col{padding-inline:8px;margin-bottom:28px}.benefits-list .advantages__ico{width:112px;height:110px;margin-bottom:18px}.benefits-list .advantages__ico svg{width:48px;height:48px}.benefits-list .advantages__item h3{font-size:18px}.benefits-list .advantages__item p{font-size:16px;line-height:1.5}.benefits:after{width:90px;opacity:.08}} /* Requested layout adjustments. */ .calculator-form{padding:0;width:88%;justify-self:start} @media(max-width:980px){.calculator-form{width:100%}} .section-heading h2:after{display:none!important} .packages{padding-top:50px} .projects{position:relative;isolation:isolate;overflow:hidden} .btn--primary:hover{border-color:var(--red-dark)} /* Original Dragon Side advantage artwork. */ .benefits-list .advantages__ico{clip-path:none;background:none;padding-bottom:14px} .benefits-list .advantages__ico:before{content:"";position:absolute;inset:0;z-index:0;width:100%;height:100%;background:url("https://dragonside.ru/assets/template/img/ico_outer.svg") center/contain no-repeat;clip-path:none} .benefits-list .advantages__ico:after{content:none} .benefits-list .advantages__ico img{position:relative;z-index:1;width:62px;height:62px;object-fit:contain} .benefits-list .advantages__item h3{position:relative;padding-bottom:24px;margin-bottom:5px} .benefits-list .advantages__item h3:after{content:url("https://dragonside.ru/assets/template/img/ico_b.svg");position:absolute;left:0;right:0;bottom:0;margin:auto} @media(max-width:650px){.benefits-list .advantages__ico img{width:48px;height:48px}} /* Generated raster pictograms fill the original Dragon Side badge. */ .benefits-list .advantages__ico img{width:105px;height:105px} /* Give the three finish comparisons the same full-width container as other sections. */ .surface>.container{padding-inline:clamp(24px,5.2vw,100px)} /* Swipe between finish cards on phones; reserve the middle strip for comparison. */ .surface-navigation{display:none} .surface-range{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;height:44px;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y} .surface-view__image:focus-within .surface-view__line:after{outline:2px solid var(--brand-accent);outline-offset:3px} @media(max-width:650px){ .surface-panels{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain} .surface-panels::-webkit-scrollbar{display:none} .surface-panels>.surface-panel{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always} .surface-navigation{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:18px} .surface-arrow{width:44px;height:44px;border:1px solid #db320766;border-radius:50%;background:#15141b;color:#fff;font-size:22px} .surface-arrow:disabled{opacity:.3;cursor:default} .surface-dots{display:flex;gap:2px} .surface-dots button{display:grid;place-items:center;width:32px;height:44px;padding:0;border:0;background:transparent} .surface-dots button:after{content:'';width:7px;height:7px;border-radius:50%;background:#db320766} .surface-dots button[aria-current="true"]:after{background:var(--brand-accent);width:9px;height:9px} } /* Installation details are intended to be read across a full-screen layout. */ .installation-grid article{padding-top:32px;padding-bottom:36px} .installation-grid h3{font-size:clamp(23px,1.7vw,30px);line-height:1.2;font-weight:600} .installation-grid p{font-size:clamp(18px,1.15vw,21px);line-height:1.5;max-width:36ch;margin-top:18px} .installation-note>span,.installation-note p{font-size:18px;line-height:1.5} @media(max-width:980px){.installation-grid h3{font-size:24px}.installation-grid p{font-size:18px}} @media(max-width:650px){.benefits-list .advantages__ico img{width:82px;height:82px}.installation-grid h3{font-size:21px}.installation-grid p{font-size:16px}.installation-note>span,.installation-note p{font-size:16px}} /* Keep the bitmap artwork fully within the original badge on every breakpoint. */ .benefits-list .advantages__ico img{width:118px;height:118px;max-width:82%;max-height:82%;object-fit:contain} @media(max-width:650px){.benefits-list .advantages__ico img{width:90px;height:90px}} /* Original site proportions and illuminated edge figures for the PPF benefits. */ .benefits>.container{width:min(1250px,100%);padding-inline:15px;margin-inline:auto} .benefits-list.advantages__block{margin-inline:-30px;padding-top:77px} .benefits-list .advantages__col{padding-inline:30px} .benefits__figure{position:absolute;z-index:0;top:65px;width:483px;pointer-events:none;opacity:.85} .benefits__figure img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 16px #ffffffaa) drop-shadow(0 0 34px #ffffff55)} .benefits__figure--left{left:-195px} .benefits__figure--right{right:-187px;top:70px;transform:rotate(180deg)} @media(max-width:1500px){.benefits__figure{width:360px}.benefits__figure--left{left:-215px}.benefits__figure--right{right:-210px}} @media(max-width:980px){.benefits>.container{padding-inline:20px}.benefits-list.advantages__block{margin-inline:-12px;padding-top:42px}.benefits-list .advantages__col{padding-inline:12px}.benefits__figure{display:none}} /* Photo sequence for the four installation details. */ .installation-grid__image{display:block;width:100%;aspect-ratio:1.36;object-fit:cover;margin-top:18px;border:1px solid #db320766;border-radius:8px} .installation-grid article p{margin-top:18px} @media(max-width:650px){.installation-grid__image{aspect-ratio:1.3;margin-top:14px}} /* Equal card insets and a shared photo height keep all four images aligned. */ .installation-grid article,.installation-grid article+article{padding-inline:20px} .installation-grid__image{height:clamp(210px,17vw,300px);aspect-ratio:auto} @media(max-width:650px){.installation-grid article,.installation-grid article+article{padding-inline:10px}.installation-grid__image{height:clamp(115px,32vw,190px);aspect-ratio:auto}} /* Two-line DRAGON / SIDE watermark from the original advantages composition. */ .benefits:before{content:"DRAGON\A SIDE";left:0;top:22%;width:100%;transform:none;white-space:pre;text-align:center;line-height:.78;letter-spacing:-.045em;font-size:clamp(130px,22vw,330px)} @media(max-width:650px){.benefits:before{top:21%;font-size:clamp(90px,22vw,150px)}} /* The car detail bridges the two sections as in the supplied reference. */ .packages{padding-bottom:24px;position:relative;z-index:1} .package-transition{height:clamp(230px,20vw,320px);margin-top:-24px;background-image:linear-gradient(180deg,#15141b 0%,#15141b00 22%,#15141b00 55%,#15141b 100%),url("assets/package-transition-v2-modx.webp");background-position:center,center 50%;background-size:cover;background-repeat:no-repeat} .calculator{position:relative;z-index:1;margin-top:-72px;padding-top:24px;background:transparent} /* Bring the calculator artwork slightly closer, keeping its right edge anchored. */ .calculator-story{background-size:cover,auto 111%} @media(max-width:980px){.packages{padding-bottom:20px}.package-transition{height:clamp(180px,24vw,240px);margin-top:-20px}.calculator{margin-top:-45px;padding-top:20px}.calculator-story{background-size:cover,auto 450px}} @media(max-width:650px){.package-transition{height:160px;background-position:center,58% center}.calculator{margin-top:-24px;padding-top:18px}.calculator-story{background-size:cover,auto 355px}} /* The sharper frame begins within the packages section while its fade keeps the labels readable. */ .package-transition{position:relative;z-index:2;height:calc(clamp(230px,20vw,320px) + 72px);margin-top:-96px;background-image:linear-gradient(180deg,#15141b 0%,#15141b00 19%,#15141b00 56%,#15141b 100%),url("assets/package-transition-v3-modx.webp")} @media(max-width:980px){.package-transition{height:calc(clamp(180px,24vw,240px) + 45px);margin-top:-65px}} @media(max-width:650px){.package-transition{height:190px;margin-top:-50px}} .packages{z-index:auto} .packages>.container{position:relative;z-index:3} .calculator{z-index:3} /* Keep the existing photo, give it more vertical room, and end it before calculator copy. */ .package-transition{height:clamp(330px,31vw,430px);margin-top:clamp(-230px,-16vw,-150px);background-size:cover,100% auto;background-position:center,center 50%} .calculator{margin-top:0;padding-top:34px;background:#15141b} @media(max-width:980px){.package-transition{height:clamp(250px,35vw,340px);margin-top:clamp(-170px,-18vw,-100px)}.calculator{margin-top:0;padding-top:30px}} @media(max-width:650px){.package-transition{height:220px;margin-top:-86px;background-size:cover,auto 100%;background-position:center,55% center}.calculator{padding-top:26px}} .packages-bottom p{color:#eeeaf3;text-shadow:0 1px 4px #15141b,0 0 11px #15141b,0 0 18px #15141b} .project-card--ram,.project-card--bmw{position:relative;isolation:isolate;overflow:hidden;background-color:#15141b} .project-card--ram:before,.project-card--bmw:before{content:none} .project-card--ram>*,.project-card--bmw>*{position:relative;z-index:1} .projects:before{content:none!important;background:none!important} .projects-grid .project-card{min-height:0;padding:0;justify-content:flex-start;background:#15141b} .project-card__media{position:relative;flex:none;width:100%;background:#0e0e11} .project-card__media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center} .project-card .project-card__type{position:absolute;top:16px;left:16px;max-width:calc(100% - 32px);margin:0;padding:8px 10px;border-radius:4px;background:#15141be6;color:#fff;line-height:1.4} .project-card__content{flex:1;display:flex;flex-direction:column;margin:0;padding:24px 28px 26px;background:#15141b;border-top:1px solid #ffffff16} .project-card__content h3{color:#fff} .project-card .project-card__content p{color:#e5e3e9;line-height:1.55} .project-card__content .project-card__link{color:#fff;border-color:#ffffff40;margin-top:auto;padding-top:18px} .project-card__content p{margin-bottom:24px} @media(max-width:650px){.project-card__content{padding:22px}.project-card .project-card__type{font-size:11px;top:12px;left:12px}} /* Project cards remain in one row as the portfolio grows. */ .projects-grid{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain} .projects-grid::-webkit-scrollbar{display:none} .projects-grid .project-card{flex:0 0 calc((100% - 18px)/2);min-width:0;scroll-snap-align:start;scroll-snap-stop:always} .projects-grid:focus-visible,.projects-grid .project-card:focus-visible{outline:2px solid #fff;outline-offset:-5px} .projects-navigation{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:20px} .projects-arrow{width:44px;height:44px;border:1px solid var(--brand-accent);border-radius:50%;background:#15141b;color:#fff;font-size:22px} .projects-arrow:hover:not(:disabled){background:var(--brand-accent)} .projects-arrow:disabled{opacity:.3;cursor:default} .projects-counter{min-width:72px;text-align:center;color:#c0bdc9;font-size:14px;font-variant-numeric:tabular-nums} @media(max-width:650px){.projects-grid{gap:14px}.projects-grid .project-card{flex-basis:100%}} @media(min-width:981px){.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;scroll-snap-type:none}} @media(min-width:1101px){.projects-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.projects-grid .project-card h3{font-size:30px}} /* Quieter image between packages and calculator. */ .packages-bottom{justify-content:flex-end} .package-transition{background-image:linear-gradient(#15141b99,#15141b99),linear-gradient(180deg,#15141be8 0%,#15141b22 24%,#15141b22 58%,#15141bf2 100%),url("assets/package-transition-v3-modx.webp");background-size:cover,cover,100% auto;opacity:.86} @media(max-width:650px){.package-transition{background-size:cover,cover,auto 100%}} @media(max-width:650px){.installation-grid{grid-template-columns:1fr;gap:0}.installation-grid article,.installation-grid article+article,.installation-grid article:nth-child(n){padding-inline:0;border-left:0;border-bottom:1px solid #db320755}.installation-grid article:last-child{border-bottom:0}.installation-grid__image{height:clamp(190px,58vw,280px)}} /* The form shows one compact progress label at a time. */ .steps{margin-bottom:28px} .steps .step{font-size:15px;font-weight:600;color:#d6d2df} .steps .step:not(.is-active){display:none} /* Six photographic workflow cards, following the supplied reference. */ .workflow{position:relative;isolation:isolate;overflow:hidden;background-color:#15141b;background-image:none} .workflow:before{content:"DRAGON\A SIDE";position:absolute;z-index:-1;top:0;left:50%;transform:translateX(-50%);white-space:pre;text-align:center;font-size:clamp(130px,20vw,280px);font-weight:700;line-height:.72;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px #ffffff14;pointer-events:none} .workflow:after{content:none} .films-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:34px;border-top:1px solid #db320777;border-bottom:1px solid #db320777} .films-grid article{display:flex;flex-direction:column;min-width:0;padding:30px 30px 30px 0} .films-grid article+article{padding-left:30px;border-left:1px solid #db320777} .films-grid article>span{color:#f34b1a;font-size:19px;margin-bottom:13px} .films-grid h3{font-size:clamp(22px,1.7vw,30px);font-weight:600;line-height:1.2;color:#f5f3f8} .films-grid p{font-size:clamp(17px,1.2vw,21px);line-height:1.5;color:#cbc8d2;margin:15px 0 24px;min-height:clamp(102px,7vw,125px);max-width:480px} .films-grid img{display:block;width:100%;height:clamp(230px,18vw,310px);object-fit:cover;border:1px solid #db320755;border-radius:9px} .films>.container>.section-note{display:flex;align-items:center;gap:16px;border-top:0;padding-top:16px;margin-top:0;font-size:16px;color:#cbc8d2} .films>.container>.section-note:before{content:"i";display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:#f34b1a;color:#fff;font-size:22px;font-weight:700;font-style:normal} @media(max-width:980px){.films-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.films-grid article:nth-child(3){grid-column:1/-1}.films-grid article:nth-child(3) img{height:clamp(260px,34vw,360px)}} @media(max-width:650px){.films-grid{grid-template-columns:1fr;margin-top:24px}.films-grid article,.films-grid article+article{padding:22px 0;border-left:0;border-bottom:1px solid #db320755}.films-grid article:last-child{border-bottom:0}.films-grid article:nth-child(3){grid-column:auto}.films-grid p{min-height:0;font-size:16px;margin:10px 0 16px}.films-grid img,.films-grid article:nth-child(3) img{height:clamp(220px,66vw,310px)}.films>.container>.section-note{align-items:flex-start;font-size:14px;line-height:1.5}} .workflow>.container{position:relative;z-index:1} .workflow .section-heading h2:after{content:none!important;display:none!important} .workflow .section-heading>p{max-width:340px;border-left:1px solid var(--brand-accent);padding-left:26px;color:#c9c4d5;font-size:20px;line-height:1.35} .workflow-list{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 36px;list-style:none;margin:0;padding:0;border:0;background:none} .workflow-list:before{content:none} .workflow-route{position:absolute;z-index:0;left:-2.2%;top:0;width:104.4%;height:100%;overflow:visible;pointer-events:none} .workflow-route path{fill:none;stroke:#f34b1a;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round} .workflow-list li,.workflow-list li:nth-child(n){position:relative;z-index:1;display:block;min-width:0;height:225px;min-height:225px;padding:22px 22px 20px 26px;border:1px solid var(--brand-accent);background:#1b1a23;overflow:hidden;clip-path:none} .workflow-list li>img{position:absolute;inset:0 0 0 auto;width:58%;height:100%;object-fit:cover;object-position:center;border-radius:0;opacity:.95} .workflow-list li:before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#1b1a23 0%,#1b1a23 49%,#1b1a23dd 58%,transparent 88%);pointer-events:none} .workflow-list li>span,.workflow-list li>div{position:relative;z-index:2;display:block;width:63%} .workflow-list li>span{margin:0 0 28px;color:#f34b1a;font-size:clamp(31px,3vw,43px);font-weight:700;line-height:1} .workflow-list li>span:after{content:"";display:block;width:22px;height:3px;margin-top:13px;background:#f34b1a} .workflow-list h3{font-size:19px;font-weight:700;line-height:1.2;color:#fff} .workflow-list p{font-size:15px;line-height:1.38;color:#c8c4d1;margin-top:10px;max-width:none} .workflow-list li:nth-of-type(1):after,.workflow-list li:nth-of-type(2):after,.workflow-list li:nth-of-type(4):after,.workflow-list li:nth-of-type(5):after{content:"›";position:absolute;z-index:3;right:-29px;top:50%;transform:translateY(-50%);color:#f34b1a;font-size:44px;line-height:1} .workflow>.container>.section-note{display:flex;align-items:center;gap:16px;margin-top:42px;padding-top:22px;border-top:1px solid #db320766;color:#c7c3d0;font-size:15px} .workflow>.container>.section-note:before{content:"!";display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#f34b1a;color:#fff;font-size:20px;font-weight:700} @media(max-width:980px){.workflow-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.workflow-route{display:none}.workflow-list li:nth-child(n):after{content:none}.workflow .section-heading>p{font-size:17px}} @media(max-width:650px){.workflow-list{grid-template-columns:1fr;gap:16px}.workflow-route{display:none}.workflow-list li,.workflow-list li:nth-child(n){height:auto;min-height:205px;padding:20px}.workflow-list li>span,.workflow-list li>div{width:64%}.workflow-list li>img{width:58%}.workflow-list h3{font-size:18px}.workflow-list p{font-size:14px}.workflow .section-heading>p{border-left:0;padding-left:0}.workflow:before{font-size:90px}} /* Compact mobile rhythm and keep the hero photo visible behind the copy. */ @media(max-width:650px){ .benefits,.surface,.installation,.films,.workflow,.projects,.trust-section,.reviews,.faq,.contacts,.final-cta{padding-block:44px} .calculator{padding-top:0;padding-bottom:44px} .calculator-heading h2{font-size:30px} .hero__media{display:none} .hero__visual{display:block;flex:none;height:clamp(230px,74vw,300px);min-height:0;margin:12px -20px 0;width:calc(100% + 40px);border:0;outline:0;box-shadow:none;background-color:#15141b;background-image:linear-gradient(180deg,#15141b 0%,transparent 22%,transparent 100%),url("assets/hero-mobile.webp");background-position:center,center 56%;background-size:cover,100% auto;background-repeat:no-repeat;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%)} } /* Four protection levels and the adjacent material / extra configuration. */ .package-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch} .package-grid .package{padding:24px 20px;overflow:visible} .package-grid .package h3{font-size:clamp(25px,2.1vw,34px);white-space:nowrap} .package__badge{align-self:flex-start;display:flex;align-items:center;min-height:25px;margin-bottom:18px;padding:4px 8px;border:1px solid #ffffff20;border-radius:4px;color:#c0bdc9;font-size:10px;line-height:1.3} .package__heading{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0} .package__heading .package__badge{align-self:center;align-items:center;justify-content:flex-end;margin:0;flex:0 1 auto;min-width:0;min-height:0;max-width:52%;font-family:inherit;font-weight:400;font-size:10px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;text-align:right;padding:0;border:0;border-radius:0;background:none;color:#aaa5b4} .package-grid .package__heading h3{font-size:clamp(22px,1.7vw,30px)} @media(min-width:1101px) and (max-width:1250px){.package__heading{gap:6px}.package-grid .package .package__heading h3{font-size:20px}} @media(max-width:650px){.package-grid .package .package__heading h3{font-size:clamp(22px,6vw,30px)}} .package--featured .package__badge{background:none;color:#f2ded8} .package-grid .package__intro{font-size:15px;min-height:22px} .package-grid .coverage{height:clamp(145px,13vw,190px)!important;margin-inline:-12px} .package-grid .package__price{font-size:34px} .package-grid .package__price-note{font-size:12px;line-height:1.5;min-height:0} .package-grid .package__features{min-height:0;gap:10px;margin-top:16px;padding-top:16px} .package-grid .package__features li{font-size:14px;line-height:1.45} .package-grid .package__use{font-size:13px;min-height:0;line-height:1.5;margin:18px 0} .package-grid .package__button{font-size:14px;padding-inline:8px;min-height:50px} .package.package--premium{background:linear-gradient(145deg,#24242a,#0c0c10);border-color:#75757e;box-shadow:inset 0 1px 0 #ffffff10} .package--premium .package__badge{color:#c9c5d1} .package.is-selected .package__badge:before{content:none} .package-customizer{margin-top:28px;padding:30px;border:1px solid #db320766;border-radius:8px;background:#19171d} .package-customizer fieldset{border:0;padding:0;margin:0;min-width:0} .package-customizer legend{font-size:24px;line-height:1.3;font-weight:600;margin-bottom:10px} .package-customizer__note{color:#b9b5c2;font-size:14px;line-height:1.5} .protection-extras__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px} .protection-extras__grid label{display:flex;align-items:center;gap:10px;min-height:58px;padding:14px;border:1px solid #ffffff24;border-radius:6px;cursor:pointer;color:#e9e6ed;font-size:14px} .protection-extras__grid input{flex:none;width:18px;height:18px;accent-color:#db3207} .protection-extras__grid label:has(input:checked){border-color:#db3207;background:#db32070c} .protection-extras__grid .is-included{cursor:default;border-color:#ffffff24;background:#ffffff05;color:#aaa8b2} .protection-extras__grid small{margin-left:auto;font-size:10px;white-space:nowrap;color:#c0bdc9} .package-customizer .film-picker{margin-top:30px;padding-top:0;border:0} .film-picker__options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:10px 0 14px} .film-picker__options label{position:relative;cursor:pointer;min-width:0} .film-picker__options input{position:absolute;width:100%;height:100%;inset:0;opacity:0;cursor:pointer} .film-picker__options span{display:flex;justify-content:center;align-items:center;min-height:56px;padding:12px 8px;border:1px solid #ffffff30;border-radius:6px;color:#d4cfde;font-size:16px} .film-picker__options input:checked+span{border-color:#db3207;background:#db32071a;color:#fff} .film-picker__options input:focus-visible+span{outline:2px solid #fff;outline-offset:3px} .configuration-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px;padding-top:24px;border-top:1px solid #ffffff1a} #configuration-summary{color:#d1cadc;font-size:14px;line-height:1.6;overflow-wrap:anywhere} .configuration-bottom .btn{flex:none;font-size:14px} .estimate-configuration{padding:16px 0 22px;border-top:1px solid #ffffff20} .estimate-configuration p{font-size:14px;line-height:1.5;color:#d1cadc;margin-bottom:10px;overflow-wrap:anywhere} .estimate-configuration a{font-size:13px;color:#fff;text-decoration:underline;text-decoration-color:#db3207;text-underline-offset:4px} #package-options{scroll-margin-top:95px} @media(max-width:1100px){.package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.package-grid .coverage{height:210px!important}.package-grid .package h3{font-size:32px}.configuration-bottom{align-items:flex-start;flex-direction:column}.configuration-bottom .btn{align-self:flex-end}.protection-extras__grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:650px){.package-grid{grid-template-columns:1fr}.package-grid .package{padding:24px}.package-grid .package__intro{font-size:16px}.package-grid .package__features{min-height:0}.package-grid .package__use{min-height:0}.package-grid .package__button{font-size:16px}.package-customizer{padding:22px 18px}.package-customizer legend{font-size:23px}.protection-extras__grid{grid-template-columns:1fr;gap:10px}.film-picker__options{gap:6px}.film-picker__options span{font-size:12px;min-height:52px}.configuration-bottom .btn{width:100%;font-size:13px;padding-inline:10px}.package-grid .coverage{height:clamp(160px,48vw,210px)!important}} /* Film selection carousel. */ .films-grid{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;border:0} .films-grid::-webkit-scrollbar{display:none} .films-grid article,.films-grid article+article{flex:0 0 calc((100% - 24px)/2);padding:24px;border:1px solid #db320766;border-radius:8px;scroll-snap-align:start;scroll-snap-stop:always} .films-grid img,.films-grid article:nth-child(3) img{height:clamp(230px,24vw,340px);margin-top:auto} .films-grid:focus-visible{outline:2px solid #fff;outline-offset:4px} @media(min-width:981px){.films-grid{overflow:visible;scroll-snap-type:none}.films-grid article,.films-grid article+article{flex-basis:calc((100% - 48px)/3)}.films-grid img,.films-grid article:nth-child(3) img{height:clamp(230px,18vw,310px)}} @media(max-width:650px){.films-grid{gap:14px}.films-grid article,.films-grid article+article,.films-grid article:last-child{flex-basis:100%;padding:20px;border:1px solid #db320766}.films-grid img,.films-grid article:nth-child(3) img{height:clamp(220px,66vw,310px)}} /* Consistent upper-right controls above each carousel. */ .other-services{background:#15141b} .services-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px} .services-heading h2{font-size:clamp(30px,3vw,44px);font-weight:700;text-transform:uppercase;line-height:1.12;min-width:0} .services-heading .services-navigation{flex:none;width:auto;margin:0} @media(max-width:650px){.services-heading{gap:14px;margin-bottom:20px}.services-heading h2{font-size:clamp(23px,6.2vw,30px)}.services-heading .projects-arrow{width:38px;height:38px}.services-heading .services-navigation{gap:8px}} .services-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain} .services-track::-webkit-scrollbar{display:none} .service-card{display:flex;flex-direction:column;flex:0 0 calc((100% - 40px)/3);min-width:0;overflow:hidden;border:2px solid var(--line);border-radius:5px;background:#15141b;scroll-snap-align:start;scroll-snap-stop:always} .service-card>img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover} .service-card__body{display:flex;flex:1;flex-direction:column;padding:24px 28px 26px;background:#15141b;border-top:1px solid #ffffff16} .service-card h3{font-size:24px;font-weight:600;line-height:1.2;color:#fff} .service-card p{font-size:15px;line-height:1.6;color:#c0bdc9;margin:16px 0 24px} .service-card__body>span{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid #ffffff26;font-size:14px;color:#fff} .service-card:hover{border-color:#8e879b;background:#15141b} .services-track:focus-visible,.service-card:focus-visible{outline:2px solid #fff;outline-offset:-4px} .services-all{display:block;width:fit-content;margin:26px auto 0;padding:8px 0;color:#c0bdc9;font-size:14px} .services-all:hover{color:#ff7954} @media(max-width:1100px){.service-card{flex-basis:calc((100% - 20px)/2)}} @media(max-width:650px){.other-services{padding-block:44px}.services-track{gap:14px}.service-card{flex-basis:100%}.service-card__body{padding:22px}.service-card h3{font-size:23px}} .projects-counter,.surface-dots,.review-summary,.review-pagination{display:none!important} .projects-navigation,.surface-navigation{justify-content:flex-end;gap:12px;margin:0 0 18px} .projects-counter{order:-1;min-width:0;margin-right:12px} .surface-dots{order:-1;margin-right:auto} .films-grid{margin-top:0} .review-arrows{display:flex;justify-content:flex-end;gap:12px;margin:32px 0 18px} .review-arrows button{flex:none;width:44px;height:44px;border:1px solid #aaa2d4;border-radius:50%;background:#27252f;color:#fff;font-size:20px} .review-arrows button:hover:not(:disabled){border-color:#db3207;color:#ff7954} .review-arrows button:disabled{opacity:.3;cursor:default} .reviews-toolbar{display:grid;grid-template-columns:112px minmax(0,1fr) 112px;align-items:center;gap:16px;margin:32px 0 18px} .reviews-toolbar .reviews-source__subhead{grid-column:2;margin:0;padding:0;max-width:none} .reviews-toolbar .review-arrows{grid-column:3;margin:0} @media(max-width:650px){.reviews-toolbar{grid-template-columns:minmax(0,1fr) 84px;gap:14px;margin-top:26px}.reviews-toolbar .reviews-source__subhead{grid-column:1;font-size:13px;line-height:1.5}.reviews-toolbar .review-arrows{grid-column:2;gap:8px}.reviews-toolbar .review-arrows button{width:38px;height:38px}} .review-cards{margin-top:0} /* Keep brand red for primary actions and active configuration choices. */ :root{--line:#3f3c46;--line-strong:#625e6c} .package-grid .package:not(.package--featured),.project-card,.surface-panel,.service-card,.package-customizer, .installation-grid__image,.calculator-story__caption,.films-grid img,.films-grid article,.films-grid article+article,.films-grid article:last-child, .workflow-list li,.workflow-list li:nth-child(n){border-color:var(--line)} .package-grid .package--premium{border-color:var(--line-strong)} .package__features,.section-top,.installation-grid,.installation-grid article+article,.installation-grid article:nth-child(n), .installation-note,.films-panel,.films-panel>div+div,.trust-grid,.trust-grid article+article,.faq-list details,.faq-list details:last-child, .workflow .section-heading>p,.workflow>.container>.section-note,.final-cta,.benefits-list{border-color:var(--line)} .package-grid .package:not(.package--featured) .package__features li:before{color:#9e99a9} .btn--outline,.package__button.btn--outline{border-color:var(--line-strong)} .btn--outline:hover,.package__button.btn--outline:hover{border-color:#b2acbd} .project-card:hover,.service-card:hover{border-color:#8e879b} .project-card:after{background:var(--line)} .projects-arrow,.surface-arrow,.review-arrows button{border-color:var(--line-strong)} .projects-arrow:hover:not(:disabled),.surface-arrow:hover:not(:disabled),.review-arrows button:hover:not(:disabled){border-color:#aaa2b8;background:#302c37;color:#fff} .surface-view--matte .surface-view__image:after,.surface-view--color .surface-view__image:after{border-color:var(--line-strong)} .section-heading h2:after,.benefits-list .advantages__ico:after{background:var(--line-strong)} .films-grid article>span{color:#aaa4b6} .review-card:before,.review-card:after,.review-card__corner{background:#aaa2d4} .brand-footer__top:before,.brand-footer__top:after,.map-block__route:before{background:var(--line)} .brand-footer__bottom{background:#1c1922;border-top:1px solid var(--line)} .contacts__group:before{background:linear-gradient(-90deg,#625e6c 0%,#c5bfce 100%)} /* One Dragon Side treatment for every filled red CTA. */ .calculator-story{background-image:linear-gradient(90deg,#15141b 0%,#15141b66 22%,transparent 62%),var(--ppf-calculator-photo,url("assets/contacts-service-clean-modx.webp"))} @media(max-width:980px){.calculator-story{background-image:linear-gradient(180deg,transparent 55%,#15141b 100%),var(--ppf-calculator-photo,url("assets/contacts-service-clean-modx.webp"))}.hero__visual{background-image:linear-gradient(180deg,#15141b 0%,transparent 22%,transparent 100%),var(--ppf-hero-photo,url("assets/hero-desktop.webp"))}} @media(max-width:650px){.hero__visual{background-image:linear-gradient(180deg,#15141b 0%,transparent 22%,transparent 100%),var(--ppf-hero-photo,url("assets/hero-mobile.webp"))}} .hero__annotations{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;pointer-events:none} @media(max-width:980px){.hero__annotations{display:none}} :is(.btn--primary,.package--featured .package__button,.contacts__order .btn,.map-block__route a){background:var(--brand-accent);border:1px solid var(--brand-accent);border-radius:6px;color:#fff;box-shadow:0 5px 0 #64000e;transition:background-color .2s,border-color .2s,box-shadow .2s,transform .2s} :is(.btn--primary,.package--featured .package__button,.contacts__order .btn,.map-block__route a):hover{background:#a82608;border-color:#a82608;box-shadow:0 5px 0 #4b000a;transform:translateY(1px)} :is(.btn--primary,.package--featured .package__button,.contacts__order .btn,.map-block__route a):active{box-shadow:0 2px 0 #4b000a;transform:translateY(3px)}