/* Cable Guy Com — stylesheet Colors, typography and spacing. Poppins is loaded from Google Fonts in each page . */ :root { --orange: #ff5b0a; --navy: #080b2d; --teal: #24758e; --pale: #f6f6fb; --muted: #77798a; --border: #e5e5ec; --max: 1320px } * { box-sizing: border-box } html { scroll-behavior: smooth; scroll-padding-top: 25px } body { margin: 0; color: var(--navy); font-family: Poppins, 'Arial', sans-serif; font-size: 16px; line-height: 1.65; background: #fff } a { color: inherit; text-decoration: none } button, input, select, textarea { font: inherit } button, a, input, summary, select, textarea { -webkit-tap-highlight-color: transparent } button { cursor: pointer } button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #ec9622; outline-offset: 5px } img { display: block; max-width: 100%; object-fit: cover } h1, h2, h3, h4, p { margin-top: 0 } h1, h2, h3 { line-height: 1.2; letter-spacing: -.035em } h1 { font-size: clamp(36px, 4vw, 58px); font-weight: 700 } h2 { font-size: clamp(28px, 2.7vw, 40px); font-weight: 700; margin-bottom: 24px } h3 { font-size: 23px; font-weight: 600; margin-bottom: 14px } p { margin-bottom: 19px } small { font-size: 13px } section { position: relative } .container { width: min(var(--max), calc(100% - 80px)); margin: auto } .narrow { width: min(1040px, calc(100% - 80px)); margin: auto } .section { padding: 88px 0 } .pale { background: var(--pale) } .center { text-align: center } .muted { color: var(--muted) } .eyebrow { display: inline-block; color: #e83647; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 22px } .eyebrow:before, .eyebrow:after { content: ''; display: inline-block; width: 32px; height: 1px; background: currentColor; vertical-align: middle; margin: 0 7px } .pill { display: inline-block; padding: 9px 18px; background: #fff0ef; border-radius: 30px; font-size: 11px; font-weight: 600; text-transform: uppercase; margin-bottom: 16px } .button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--orange); border: 0; border-radius: 30px; color: white; font-size: 14px; font-weight: 600; padding: 13px 24px; line-height: 1.4; transition: background .2s, transform .2s } .button:hover { background: #e84a00; transform: translateY(-2px) } .button.navy { background: var(--navy) } .button.small { font-size: 13px; padding: 10px 20px } .icon { width: 27px; height: 27px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0 } .round-icon { height: 51px; width: 51px; border-radius: 50%; background: var(--orange); color: white; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0 } .text-orange { color: var(--orange) } .site-header { width: min(1440px, calc(100% - 80px)); margin: 32px auto 0; min-height: 82px; display: flex; align-items: center; background: white; position: relative; z-index: 10; border-radius: 26px 18px 0 0; box-shadow: 0 -5px 24px #080b2d09; overflow: visible } .brand { padding: 12px 42px; flex-shrink: 0 } .brand img { width: 184px; height: 54px; object-fit: contain } .desktop-nav { display: flex; align-items: center; gap: 29px; flex: 1; padding-right: 30px; font-size: 14px; font-weight: 600 } .desktop-nav>a, .nav-group>a { position: relative; white-space: nowrap } .desktop-nav .active { color: var(--orange) } .desktop-nav .active:after { content: ''; position: absolute; left: 0; bottom: -9px; width: 5px; height: 5px; border-radius: 50%; background: var(--orange) } .nav-group { position: relative; padding: 22px 0 } .dropdown { position: absolute; top: 100%; left: -22px; width: 275px; background: white; padding: 12px; border-radius: 10px; box-shadow: 0 8px 30px #080b2d20; display: none } .dropdown a { display: block; padding: 11px; font-size: 13px; border-radius: 5px } .dropdown a:hover { color: var(--orange); background: var(--pale) } .nav-group:hover .dropdown, .nav-group:focus-within .dropdown { display: block } .header-contact { display: flex; align-items: center; gap: 14px; align-self: stretch; background: var(--orange); color: white; padding: 15px 32px 15px 55px; border-radius: 85px 18px 0 0 } .header-contact .round-icon { background: white; color: var(--orange); width: 42px; height: 42px } .header-contact .icon { width: 21px } .header-contact small { display: block; font-size: 10px } .header-contact strong { display: block; font-size: 14px } .icon-button { background: none; color: inherit; border: 0; display: flex; align-items: center; justify-content: center; padding: 8px } .language { font-size: 11px; display: flex; gap: 6px; align-items: center } .language .icon { width: 17px } .mobile-toggle { display: none } .home-hero { width: min(1536px, calc(100% - 40px)); margin: auto; min-height: 690px; overflow: hidden; display: flex; align-items: center; background: #080b1f } .hero-background { position: absolute; inset: 0; background-image: linear-gradient(90deg, #050512ec 0%, #07091cbf 28%, #08091e12 74%), url('/assets/technician.webp'); background-size: cover; background-position: center 40% } .home-hero:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 78%, #0b152960 78%); pointer-events: none } .hero-content { position: relative; z-index: 1; padding: 70px 0; width: 100%; color: white } .hero-content .container { padding-left: 140px } .hero-content h1 { max-width: 560px; font-size: clamp(38px, 4.1vw, 62px); margin-bottom: 38px; line-height: 1.08 } .hero-content .eyebrow { color: var(--orange); font-size: 12px; letter-spacing: .2px; margin-bottom: 13px } .hero-content .eyebrow:before { width: 6px; height: 6px; border-radius: 50%; margin-left: 0; background: #ffe43c } .hero-content .eyebrow:after { display: none } .hero-actions { display: flex; align-items: center; gap: 32px } .hero-call { display: flex; gap: 14px; align-items: center; line-height: 1.5 } .hero-call .icon { width: 40px; height: 40px } .hero-call small { display: block } .hero-call strong { font-size: 15px } .hero-caption { position: absolute; right: 38px; bottom: 24px; color: #ffffffb3; font-size: 11px; letter-spacing: 1px } .hero-dots { position: absolute; bottom: 24px; left: 50%; width: 7px; height: 7px; border: 1px solid white; border-radius: 100% } .inner-hero { width: min(1440px, calc(100% - 80px)); height: 440px; margin: auto; border-radius: 0 0 65px 65px; background: linear-gradient(#060b27a8, #060b27ba), url('/assets/network-banner.webp') center/cover; display: flex; align-items: center; justify-content: center; text-align: center; color: white } .inner-hero h1 { margin-bottom: 20px } .breadcrumbs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 12px; background: var(--orange); padding: 10px 20px; border-radius: 28px; font-size: 13px; font-weight: 500 } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: center } .about-illustration { width: 100%; max-height: 590px; object-fit: contain } .about-copy p { font-size: 15px } .about-copy h2 { font-size: 34px } .about-benefits { display: grid; grid-template-columns: 1.2fr 1fr; gap: 25px; margin: 35px 0 } .mini-benefit { display: flex; gap: 15px; margin-bottom: 22px } .mini-benefit .icon { color: var(--orange); margin-top: 4px } .mini-benefit h4 { font-size: 14px; line-height: 1.4; margin: 0 0 5px } .mini-benefit p { font-size: 12px; margin: 0; color: #696a78 } .checks { padding: 0; list-style: none; margin: 14px 0 22px } .checks li { position: relative; padding-left: 20px; font-size: 13px; margin: 6px 0 } .checks li:before { content: '✓'; position: absolute; left: 0; top: 4px; background: var(--orange); color: white; font-size: 8px; line-height: 12px; width: 12px; height: 12px; border-radius: 50%; text-align: center } .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 16px } .service-card { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; transition: transform .25s, box-shadow .25s } .service-card:hover { transform: translateY(-5px); box-shadow: 0 15px 32px #080b2d0c } .service-card>a>img { width: 100%; aspect-ratio: 1.1; object-fit: cover } .service-card .card-content { padding: 16px 16px 28px } .service-card h3 { font-size: 27px; color: #343638; margin-bottom: 9px } .service-card p { font-size: 14px; color: var(--muted); line-height: 1.55; margin-bottom: 16px } .service-card .checks { margin: 12px 0 20px } .service-card .checks li { font-size: 12px; color: #555 } .service-card h4 { font-size: 13px; margin: 15px 0 0 } .readmore { text-align: center; font-size: 12px; margin: 45px 0 0; font-weight: 600; color: #738ca7 } .readmore a { color: var(--orange); text-decoration: underline } .trust { background: var(--teal); color: white; text-align: center } .trust h2 { margin: 0 0 10px } .trust>.container>p { font-size: 14px } .trust .pill { background: var(--orange); color: white } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin: 36px 0 25px } .trust-card { border: 1px solid #ffffff2a; border-radius: 7px; box-shadow: 3px 4px 5px #d9e5f324; padding: 30px 18px 24px } .trust-card>.icon { color: var(--orange); width: 37px; height: 37px; margin-bottom: 14px } .trust-card h3 { font-size: 19px; letter-spacing: -.02em; margin-bottom: 10px } .trust-card p { font-size: 13px; line-height: 1.5; margin: 0 } .trust-note { font-size: 13px !important; font-weight: 500 } .trust-checks { display: grid; grid-template-columns: 1fr 1fr; text-align: left; gap: 15px 35px; padding: 22px; background: #65788d90; margin: 22px 0 0; border-radius: 4px } .trust-checks span { font-size: 13px; display: flex; align-items: center; gap: 10px } .trust-checks b { background: var(--orange); border-radius: 100%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0 } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; padding: 62px 0 } .stat { display: flex; align-items: center; justify-content: center; gap: 15px } .stat strong { font-size: 38px; line-height: 1.1; display: block; font-weight: 800 } .stat small { font-size: 10px; display: block; font-weight: 700; text-transform: uppercase } .pricing-promo { background: linear-gradient(#101333b3, #0b0b37e6), url('/assets/surveillance-intro.webp') center/cover; padding: 90px 0; color: white } .pricing-promo .container { display: grid; grid-template-columns: 1fr 1.2fr; gap: 70px; align-items: center } .pricing-promo h2 { font-size: 39px } .pricing-promo p { font-size: 15px } .promo-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 25px } .promo-package { background: var(--orange); border-radius: 40px; overflow: hidden; text-align: center; max-width: 260px } .promo-package>h4 { font-size: 14px; padding: 17px 18px; margin: 0; line-height: 1.4 } .promo-package .package-body { background: white; color: var(--navy); border-radius: 26px 26px 0 0; padding: 22px 22px 12px } .package-body>strong { font-size: 54px; line-height: 1; display: block } .package-body>strong sup { font-size: 13px; vertical-align: super } .package-body>h4 { font-size: 12px; margin: 5px 0 27px; line-height: 1.3 } .package-body .checks { text-align: left } .package-body small { font-size: 11px } .package-price { background: var(--navy); padding: 12px; font-size: 36px; font-weight: 700 } .package-price small { font-size: 15px } .promo-package>.button { width: 100%; font-size: 12px; padding: 17px } .process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; margin-top: 25px } .process-card { background: var(--orange); border-radius: 5px; color: white; text-align: center; padding: 25px 15px; box-shadow: 3px 5px 7px #080b2d22 } .process-card h3 { font-size: 17px; margin: 12px 0 10px } .process-card p { font-size: 12px; line-height: 1.5; margin: 0 } .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; max-width: 970px; margin: 45px auto 0 } .team-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 38px } .team-card h3 { font-size: 21px; margin: 20px 0 2px } .team-card p { color: var(--orange); font-size: 13px; margin: 0 } .showcase { border-radius: 65px; overflow: hidden; margin: 45px auto 0; max-width: 920px; min-height: 410px; display: flex; align-items: end; justify-content: center; padding: 55px 25px; background: linear-gradient(#080b2d10, #080b2dba), url('/assets/low-intro.webp') center/cover; color: white; text-align: center } .showcase h3 { font-size: 26px } .showcase p { font-size: 14px; margin: 0 } .testimonial { display: grid; grid-template-columns: 150px 1fr; gap: 65px; padding: 65px 60px; background: #fafafa; align-items: start } .testimonial .brand-mark { width: 88px; height: 88px; object-fit: cover; object-position: left } .quote { border-left: 2px solid var(--orange); padding-left: 30px } .quote blockquote { font-size: 24px; font-weight: 600; font-style: italic; line-height: 1.5; margin: 0 0 24px; letter-spacing: -.03em } .quote cite { font-style: normal; color: var(--orange); font-size: 14px; font-weight: 600 } .quote small { display: block; color: var(--muted) } .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; max-width: 980px; margin: 52px auto 0 } .faq-photo { width: 100%; aspect-ratio: 1.04; object-fit: cover; border-radius: 30px } .faq details { background: #f7f6f5; margin-bottom: 10px } .faq summary { position: relative; font-size: 14px; font-weight: 600; list-style: none; padding: 18px 43px 18px 18px; cursor: pointer; line-height: 1.5 } .faq summary::-webkit-details-marker { display: none } .faq summary:after { content: '+'; position: absolute; right: 14px; top: 20px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 100%; background: var(--navy); color: white; font-size: 14px; line-height: 1 } .faq details[open] { background: white } .faq details[open] summary:after { content: '−'; background: var(--orange) } .faq details p { font-size: 14px; margin: 0; padding: 0 18px 22px; line-height: 1.7 } .cta { background: var(--teal); color: white; text-align: center; padding: 75px 25px } .cta h2 { font-size: 34px } .cta p { font-size: 14px; max-width: 1080px; margin: 0 auto 28px } .cta-actions { display: flex; justify-content: center; gap: 16px } .cta .button { font-size: 12px; text-transform: uppercase } .cta hr { border: 0; border-top: 1px solid #ffffff55; max-width: 650px; margin: 29px auto 20px } .cta .availability { font-size: 12px } .cta .trustline { display: flex; gap: 22px; justify-content: center; font-size: 11px; margin-top: 14px; flex-wrap: wrap } .contact-block img { width: 100%; border-radius: 0 0 45px 45px } .contact-rows { margin: 26px 0 32px; display: grid; gap: 20px } .contact-row { display: flex; align-items: center; gap: 15px; font-size: 14px; line-height: 1.5 } .contact-row .icon { color: var(--orange); width: 31px; height: 31px } .contact-row small { color: var(--muted); display: block; font-size: 12px } .contact-row strong { font-size: 14px } .promo-form-section { padding-top: 95px; background: linear-gradient(#030511df, #030511d9), url('/assets/promo.webp') top center/cover; color: white } .promo-form-section h2 { max-width: 780px; margin: 24px auto 32px } .form-card { position: relative; background: white; border-radius: 30px; box-shadow: 0 5px 35px #080b2d10; color: var(--navy); display: grid; grid-template-columns: .85fr 1.15fr; gap: 35px; padding: 32px; width: min(950px, calc(100% - 80px)); margin: 60px auto 0; text-align: left; transform: translateY(70px) } .form-card>img { width: 100%; height: 100%; object-fit: cover; border-radius: 30px } .form-card h3 { font-size: 25px; margin: 3px 0 20px } .form-card small { color: var(--orange); font-size: 11px } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px } .form-grid .full { grid-column: 1/-1 } .form-grid label { font-size: 13px; font-weight: 500; display: block } .form-grid input, .form-grid select, .form-grid textarea { width: 100%; border: 1px solid transparent; border-radius: 22px; background: #f0f8fb; padding: 12px 15px; font-size: 13px; color: var(--navy); outline: none } .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--orange) } .form-grid textarea { resize: vertical; min-height: 95px } .form-grid select { border-radius: 6px; border-color: #d9d9df } .form-grid .button { border-radius: 12px; width: 100% } .form-note { grid-column: 1/-1; font-size: 11px; color: #666; margin: 0 } .after-form { height: 125px; background: white } .footer { background: linear-gradient(#06081dec, #06081def), url('/assets/surveillance-intro.webp') center/cover; color: white; padding: 58px 0 24px } .footer-grid { display: grid; grid-template-columns: 1.12fr 1fr 1fr 1.05fr; gap: 45px } .footer-brand { display: flex; align-items: center; gap: 4px; font-weight: 800; font-size: 29px; letter-spacing: 2px; color: var(--orange); line-height: 1 } .footer-brand img { width: 60px; height: 60px; object-fit: cover; object-position: left } .footer-brand small { font-size: 14px; display: block; letter-spacing: 0; color: white; font-weight: 500; margin-top: 5px } .footer p { font-size: 12px; line-height: 1.8; margin: 25px 0 } .footer h3 { font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: uppercase; border-bottom: 1px solid #ff5b0a60; padding-bottom: 8px; margin: 0 0 15px } .footer ul { list-style: none; padding: 0; margin: 0 } .footer li { font-size: 12px; margin: 15px 0 } .footer li a:hover { color: var(--orange) } .footer li a:before { content: '›'; color: var(--orange); margin-right: 10px } .footer .plain a:before { display: none } .footer .learn { font-size: 13px; color: var(--orange); font-weight: 600 } .footer-bottom { margin-top: 32px; padding-top: 25px; border-top: 1px solid var(--orange); display: flex; justify-content: space-between; font-size: 11px } .detail-intro { display: grid; grid-template-columns: 1.55fr 1fr; gap: 30px; align-items: start; padding: 65px 0 } .detail-intro .intro-img { width: 100%; aspect-ratio: 3; object-fit: cover; border-radius: 10px; margin-bottom: 28px } .detail-intro h2 { font-size: 25px; letter-spacing: -.02em } .detail-intro p { font-size: 14px; color: #474b57 } .related { padding: 12px; border: 1px solid var(--border); border-radius: 7px } .related h3 { font-size: 19px; margin: 0 0 27px } .related h3:after { content: ''; display: block; width: 35px; height: 2px; background: var(--orange); margin-top: 16px } .related a { display: flex; align-items: center; justify-content: space-between; background: #f7f6f5; padding: 12px 14px; border-radius: 4px; margin-top: 7px; font-size: 12px; color: #787b84 } .related a:hover { background: var(--orange); color: white } .related .icon { width: 19px; height: 19px; color: var(--navy) } .phone-card { display: block; text-align: center; background: linear-gradient(#121731da, #111431e3), url('/assets/network-banner.webp') center/cover; border-radius: 6px; color: white; padding: 25px 12px 20px; margin-top: 35px } .phone-card>.icon { color: var(--orange); height: 45px; width: 45px; margin: 0 auto 15px } .phone-card strong { display: block; font-size: 29px; margin-bottom: 18px } .phone-card small { font-size: 12px } .detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 15px; margin-top: 26px } .detail-card { border: 1px solid var(--border); padding: 24px 18px 26px; text-align: center; border-radius: 5px; transition: box-shadow .2s, background .2s } .detail-card:hover { background: white; box-shadow: 0 4px 8px #080b2d22; border-bottom-color: var(--orange) } .detail-card>.icon { color: var(--orange); height: 35px; width: 35px; margin-bottom: 13px } .detail-card h3 { font-size: 23px; color: #373839 } .detail-card p { font-size: 14px; color: var(--muted); line-height: 1.6 } .detail-grid.four .detail-card:last-child { grid-column: 2 } .detail-service-intro { max-width: 1100px; margin: 0 auto; font-size: 14px } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 1000px; margin: 45px auto 0 } .price-card { border-radius: 30px; box-shadow: 0 0 35px #080b2d12; background: white; overflow: hidden; display: flex; flex-direction: column; padding-top: 28px; text-align: center } .price-card .sub { font-size: 10px; letter-spacing: 2px; color: #555 } .price-card h3 { font-size: 18px; margin: 8px 16px 16px; min-height: 44px } .price-card .price { background: #eee; border-radius: 0 40px 40px 0; width: 90%; font-size: 38px; font-weight: 700; line-height: 1.6; margin-bottom: 20px } .price-card .price small { font-size: 15px } .price-card>img { margin: 0 28px 20px; border-radius: 45px; width: calc(100% - 56px); aspect-ratio: 2.5 } .price-icons { display: flex; gap: 10px; justify-content: center; color: var(--orange); margin-bottom: 12px } .price-icons span { padding: 7px; background: #faf7f3; border-radius: 50%; display: flex } .price-icons .icon { width: 20px; height: 20px } .price-card .checks { text-align: left; padding: 0 22px; flex: 1 } .price-card .checks li { font-size: 12px } .price-card .tax { text-align: left; padding: 16px 22px; font-size: 11px; border-top: 1px solid #eee } .price-card .tax span { color: var(--orange) } .price-card .button { align-self: flex-start; border-radius: 0 30px 30px 25px; margin-bottom: 0; font-size: 12px } .pricing-intro { padding: 36px 0 0; text-align: center } .pricing-intro h2 { font-size: 25px; color: var(--orange) } .pricing-intro p { font-size: 14px; max-width: 920px; margin: auto } .about-intro { padding: 85px 0 50px } .about-intro img { width: 100% } .about-intro p, .experience p { font-size: 14px } .experience { background: #fafafa; padding: 50px } .experience .split { gap: 35px } .experience h3 { color: var(--orange) } .core-circles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-top: 40px } .core-circles img { width: 100%; aspect-ratio: 1; border-radius: 50% } .core-circles h3 { font-size: 17px; text-align: center; margin-top: 18px } .mission { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; margin-top: 50px; padding-top: 35px; border-top: 1px solid #ffffff50 } .mission article { border-top: 2px solid #cce5ee; border-bottom: 2px solid #cce5ee; border-radius: 8px; padding: 28px 18px } .mission h3 { color: var(--orange); font-size: 27px } .mission p { font-size: 14px } .contact-banner { padding: 55px 30px; background: #f3f3f3; text-align: center } .contact-banner h2 { font-size: 31px } .contact-banner p { max-width: 930px; margin: 0 auto; font-size: 14px } .contact-overlap { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; align-items: start; padding: 0 40px } .contact-overlap>img { width: 100%; height: 490px; object-fit: cover; border-radius: 25px } .contact-info { background: white; border-radius: 25px; padding: 40px 30px; margin-left: -70px; margin-top: 0; position: relative } .contact-info h2 { font-size: 24px } .contact-info .contact-rows { gap: 30px } .contact-form { background: #f8f7f5; padding: 35px; border-radius: 25px; max-width: 1000px; margin: 80px auto 0 } .contact-form h2 { font-size: 26px; text-align: center } .contact-form input, .contact-form textarea { background: white } .contact-form label { margin-bottom: 5px } .map { margin-top: 70px; width: 100%; height: 330px; border: 0; border-radius: 25px 25px 0 0; display: block } .news-empty { padding: 65px; text-align: center; color: var(--muted) } dialog { border: 0; border-radius: 20px; padding: 32px; width: min(570px, 90vw); box-shadow: 0 20px 80px #0004 } dialog::backdrop { background: #080b2dbb } dialog .close { float: right; background: none; border: 0; font-size: 25px; color: var(--navy) } dialog h2 { font-size: 28px } dialog input { width: 100%; padding: 14px; border: 1px solid #ddd; border-radius: 7px; margin: 15px 0 } #search-results a { display: block; padding: 12px; border-bottom: 1px solid #eee; font-size: 14px } #search-results a:hover { color: var(--orange) } .back-top { position: fixed; right: 22px; bottom: 22px; width: 42px; height: 42px; border-radius: 50%; background: var(--orange); color: white; display: grid; place-items: center; z-index: 9; box-shadow: 0 4px 15px #080b2d20 } .footer-links-note { font-size: 12px; color: #c9cbda } @media(min-width:1700px) { .home-hero { min-height: 740px } } @media(max-width:1250px) { .brand { padding: 12px 24px } .brand img { width: 145px } .desktop-nav { gap: 20px; font-size: 12px } .header-contact { padding-left: 38px; padding-right: 20px } .language { display: none } .hero-content .container { padding-left: 70px } .home-hero { min-height: 600px } .service-card h3 { font-size: 24px } .container { width: calc(100% - 60px) } .footer-grid { gap: 30px } .header-contact .round-icon { display: none } } @media(max-width:1000px) { .site-header { width: calc(100% - 40px); margin-top: 20px; justify-content: space-between; min-height: 75px } .desktop-nav { gap: 14px } .header-contact { padding: 16px 20px } .header-contact .icon-button { display: none } .split { gap: 35px } .hero-content .container { padding-left: 35px } .service-grid { gap: 20px 12px } .service-card h3 { font-size: 21px } .service-card .card-content { padding: 14px } .trust-grid { gap: 12px } .trust-card { padding: 25px 12px } .trust-card h3 { font-size: 17px } .stat strong { font-size: 30px } .stat { gap: 10px } .stat .round-icon { width: 40px; height: 40px } .pricing-promo .container { gap: 35px } .process { grid-template-columns: repeat(3, 1fr) } .team-grid { gap: 25px } .inner-hero { width: calc(100% - 40px); height: 350px } .narrow { width: calc(100% - 70px) } .detail-intro { gap: 25px; grid-template-columns: 1.3fr 1fr } .detail-card h3 { font-size: 20px } .footer-grid { gap: 25px } .footer-brand { font-size: 23px } .footer-brand img { width: 48px; height: 48px } .pricing-grid { gap: 17px } } @media(max-width:800px) { .section { padding: 65px 0 } .site-header { overflow: visible } .brand { padding: 10px 20px } .brand img { width: 155px } .mobile-toggle { display: flex; margin-right: 12px; color: var(--navy) } .desktop-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; padding: 20px; box-shadow: 0 15px 25px #080b2d20; flex-direction: column; align-items: stretch; font-size: 15px; gap: 0 } .desktop-nav.open { display: flex } .desktop-nav>a, .nav-group>a { display: block; padding: 10px } .nav-group { padding: 0 } .dropdown { display: block; position: static; box-shadow: none; padding: 0 0 0 15px; width: auto } .dropdown a { font-size: 12px; padding: 7px 12px } .desktop-nav .active:after { display: none } .header-contact { margin-left: auto; border-radius: 50px 0 0 0; align-self: stretch; display: flex; align-items: center } .header-contact strong { font-size: 12px } .hero-content .container { padding-left: 20px } .hero-content h1 { max-width: 450px } .home-hero { min-height: 580px; width: calc(100% - 24px) } .hero-background { background-position: 60% center; background-image: linear-gradient(90deg, #050512eb, #07091c99 60%, #08091e22), url('/assets/technician.webp') } .split { grid-template-columns: 1fr } .about-illustration { max-height: 460px } .service-grid, .detail-grid { grid-template-columns: repeat(2, 1fr) } .trust-grid { grid-template-columns: repeat(2, 1fr) } .stats { grid-template-columns: repeat(2, 1fr); gap: 35px } .stat { justify-content: flex-start } .pricing-promo .container { grid-template-columns: 1fr } .promo-prices { justify-content: center; max-width: 650px; margin: auto; width: 100% } .promo-package { max-width: none } .team-grid { gap: 20px } .team-card img { border-radius: 25px } .team-card h3 { font-size: 18px } .testimonial { padding: 35px; gap: 25px; grid-template-columns: 65px 1fr } .testimonial .brand-mark { width: 60px; height: 60px } .quote blockquote { font-size: 20px } .faq-grid { gap: 30px; grid-template-columns: 1fr 1fr } .faq-photo { aspect-ratio: .9 } .form-card { gap: 20px; padding: 25px; width: calc(100% - 55px) } .form-card>img { border-radius: 20px } .form-grid { grid-template-columns: 1fr } .form-grid .full { grid-column: auto } .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px } .detail-intro { grid-template-columns: 1fr } .detail-intro aside { display: grid; grid-template-columns: 1.2fr 1fr; gap: 25px; align-items: center } .phone-card { margin-top: 0 } .detail-grid.four .detail-card:last-child { grid-column: auto } .pricing-grid { grid-template-columns: repeat(2, 1fr) } .contact-overlap { padding: 0 } .core-circles { gap: 15px } .core-circles h3 { font-size: 14px } .experience { padding: 30px } .mission { gap: 20px } .contact-overlap>img { height: 430px } .contact-info { padding: 25px; margin-left: -40px } .contact-form { margin-top: 50px } } @media(max-width:540px) { body { font-size: 15px } .container, .narrow { width: calc(100% - 36px) } .site-header { width: calc(100% - 24px); margin-top: 12px; min-height: 68px } .brand { padding: 8px 13px } .brand img { width: 120px; height: 43px } .header-contact { padding: 10px 15px 10px 25px; gap: 0 } .header-contact small { font-size: 8px } .header-contact strong { font-size: 10px } .mobile-toggle { margin-right: 3px; padding: 6px } .home-hero { min-height: 540px } .hero-content .container { padding-left: 7px } .hero-content h1 { font-size: 39px; max-width: 340px } .hero-content .eyebrow { font-size: 9px } .hero-actions { gap: 18px } .hero-call .icon { width: 26px; height: 26px } .hero-call { gap: 8px } .hero-call small { font-size: 10px } .hero-call strong { font-size: 11px } .hero-actions .button { font-size: 12px; padding: 13px 19px } .hero-caption { font-size: 9px; right: 20px } .section { padding: 55px 0 } .about-copy h2, h2 { font-size: 29px } .about-benefits { gap: 20px } .service-grid, .detail-grid { grid-template-columns: 1fr } .service-card>a>img { aspect-ratio: 1.4 } .service-card .card-content { padding: 20px } .service-card h3 { font-size: 26px } .service-card p { font-size: 14px } .trust-grid { gap: 10px } .trust-card { padding: 25px 12px } .trust-card h3 { font-size: 16px } .trust-card p { font-size: 11px } .trust-checks { grid-template-columns: 1fr; padding: 18px } .stats { padding: 45px 0; gap: 27px 13px } .stat strong { font-size: 27px } .stat small { font-size: 8px } .stat .round-icon { width: 37px; height: 37px } .stat .icon { width: 22px } .pricing-promo { padding: 55px 0 } .promo-prices { gap: 13px } .promo-package>h4 { font-size: 11px; padding: 16px 8px } .promo-package .package-body { padding: 21px 12px 15px } .package-body>strong { font-size: 43px } .package-body .checks li { font-size: 11px } .package-body small { font-size: 9px } .package-price { font-size: 31px } .process { grid-template-columns: 1fr 1fr; gap: 12px } .process-card:last-child { grid-column: 1/-1 } .process-card { padding: 24px 14px } .team-grid { grid-template-columns: 1fr; max-width: 290px } .team-card img { aspect-ratio: 1.1 } .showcase { min-height: 300px; border-radius: 35px; padding: 35px 20px } .showcase h3 { font-size: 22px } .testimonial { grid-template-columns: 1fr; padding: 26px; gap: 25px } .testimonial .brand-mark { width: 52px; height: 52px } .quote { padding-left: 18px } .quote blockquote { font-size: 19px } .faq-grid { grid-template-columns: 1fr; margin-top: 30px } .faq-photo { max-height: 320px; aspect-ratio: 1.25 } .cta { padding: 55px 20px } .cta h2 { font-size: 29px } .cta p { font-size: 13px } .cta-actions { gap: 10px; flex-wrap: wrap } .cta .button { font-size: 10px; padding: 12px 16px } .cta .trustline { gap: 12px; font-size: 10px } .form-card { width: calc(100% - 30px); grid-template-columns: 1fr; margin-top: 30px; padding: 25px } .form-card>img { height: 230px } .promo-form-section { padding-top: 55px } .promo-form-section h2 { font-size: 29px; padding: 0 20px } .footer-grid { gap: 30px 20px } .footer-grid>div:first-child { grid-column: 1/-1 } .footer-grid>div:last-child { grid-column: 1/-1 } .footer h3 { font-size: 14px } .footer li { font-size: 11px } .footer-bottom { gap: 20px; font-size: 9px } .inner-hero { width: calc(100% - 24px); height: 280px; border-radius: 0 0 35px 35px; padding: 20px } .inner-hero h1 { font-size: 31px } .breadcrumbs { font-size: 10px; gap: 8px; padding: 9px 15px } .detail-intro { padding: 40px 0 } .detail-intro h2 { font-size: 23px } .detail-intro .intro-img { aspect-ratio: 2.4 } .detail-intro aside { grid-template-columns: 1fr; gap: 20px } .phone-card { padding: 24px } .detail-card { padding: 30px 24px } .detail-card h3 { font-size: 24px } .pricing-grid { grid-template-columns: 1fr; max-width: 340px } .price-card h3 { font-size: 21px } .price-card .checks li { font-size: 14px } .price-card .price { font-size: 45px } .price-card>img { aspect-ratio: 2.1 } .about-intro { padding: 55px 0 35px } .experience { padding: 25px } .core-circles { grid-template-columns: 1fr 1fr; gap: 25px } .mission { grid-template-columns: 1fr } .contact-banner { padding: 38px 20px } .contact-banner h2 { font-size: 26px } .contact-overlap { grid-template-columns: 1fr } .contact-overlap>img { height: 320px } .contact-info { margin: -40px 15px 0; padding: 28px 20px } .contact-form { padding: 24px 18px; margin-top: 35px } .contact-form h2 { font-size: 22px } .map { height: 280px; margin-top: 40px } .news-empty { padding: 30px } .back-top { right: 12px; bottom: 12px; width: 35px; height: 35px } } @media(prefers-reduced-motion:reduce) { * { scroll-behavior: auto !important; transition: none !important } } .footer-text-button { background: none; border: 0; padding: 0; color: inherit; font-size: 12px; cursor: pointer; text-align: left } .footer-text-button:before { content: '›'; color: var(--orange); margin-right: 10px } .footer-text-button:hover { color: var(--orange) } .footer .learn>.icon { width: 15px; height: 15px; display: inline; vertical-align: middle } .footer-brand img { object-fit: contain } .trust .container { max-width: 1100px } /* Reference reconstruction refinements — 23 September 2026 */ :root { --max: 1580px; --orange: #ff5b0a; --teal: #24758e; --pale: #f6f6fb } body[data-page="home"] .site-header { margin-bottom: 0 } .site-header { width: 94%; max-width: 1800px; margin-top: 40px; min-height: 88px } .brand { padding-left: 45px; padding-right: 60px } .brand img { width: 200px; height: 60px } .desktop-nav { gap: 34px; font-size: 14px } .header-contact { min-width: 35%; justify-content: center; gap: 17px; padding-left: 60px; border-top-left-radius: 115px } .header-contact .icon-button { margin-left: 32px } .header-contact strong { font-size: 17px } .header-contact small { font-size: 11px } .language { font-size: 12px } .home-hero { width: 100%; max-width: 1920px; min-height: clamp(560px, 46vw, 850px) } .hero-pattern { position: absolute; inset: 0; background: url('/assets/hero-pattern.webp') left center/auto 100% repeat-x } .hero-background { background-image: linear-gradient(90deg, #050512ee 0%, #07091c7a 25%, #08091e00 65%), url('/assets/technician.webp'); background-size: auto 100%; background-repeat: no-repeat; background-position: right center } .home-hero:after { background: linear-gradient(90deg, transparent 76%, #10222a38 76%) } .hero-content .container { padding-left: 130px; max-width: 1530px } .hero-content h1 { font-size: clamp(40px, 3.8vw, 66px); max-width: 610px } .hero-arrow { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 1px solid #ffffff8a; border-radius: 50%; background: transparent; color: white; font-size: 24px; line-height: 1 } .hero-arrow:hover { background: var(--orange); border-color: var(--orange) } .hero-arrow.previous { left: 4.2% } .hero-arrow.next { right: 4.2% } .hero-pagination { position: absolute; z-index: 2; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; gap: 9px } .hero-pagination button { border: 1px solid white; border-radius: 50%; width: 7px; height: 7px; padding: 0; background: transparent } .hero-pagination button.current { background: white } .inner-hero { width: 94%; max-width: 1800px; height: clamp(350px, 34vw, 650px); border-radius: 0 0 70px 70px; background-position: center 65% } .inner-hero h1 { font-size: clamp(34px, 3.6vw, 62px) } .narrow { width: min(1290px, calc(100% - 100px)) } .container { width: min(var(--max), calc(100% - 90px)) } .section { padding: 90px 0 } body[data-page="home"] main>.section>.container { max-width: 1680px } body[data-page="home"] main>.pale>.container, body[data-page="services"] main>.pale>.container { width: 98%; max-width: 1880px } .service-grid { gap: 35px 20px } .service-card>a>img { aspect-ratio: 1.06 } .service-card .card-content { padding: 14px 18px 30px } .service-card h3 { font-size: clamp(25px, 2vw, 38px) } .service-card p { font-size: clamp(14px, 1vw, 17px) } .service-card .checks li { font-size: clamp(12px, .9vw, 15px) } .service-card h4 { font-size: 15px } .about-copy p { font-size: 16px } .about-copy h2 { font-size: clamp(29px, 2.5vw, 42px) } .about-illustration { max-height: 780px } .about-benefits { gap: 28px } .mini-benefit h4 { font-size: 16px } .mini-benefit p { font-size: 14px } .mini-benefit { margin-bottom: 34px } .trust>.container { max-width: 1535px } .trust .trust-grid { gap: 18px } .trust-card h3 { font-size: 20px } .stats { max-width: 1210px; padding: 75px 0 } .stat strong { font-size: 43px } .stat small { font-size: 11px } .pricing-promo .container { max-width: 1280px; grid-template-columns: 1fr 1.25fr } .promo-package { max-width: none } .pricing-promo { background-image: linear-gradient(#171634b3, #090b33c7), url('/assets/surveillance-intro.webp') } .pricing-promo h2 { font-size: clamp(32px, 3.1vw, 52px) } .process-intro { font-size: 14px; font-weight: 600 } .process { max-width: 1700px; margin: 30px auto 0 } .process-card { padding: 29px 17px } .process-card h3 { font-size: 20px } .process-card p { font-size: 13px } .process-card>.icon { width: 40px; height: 40px } .team-grid { max-width: 1260px; gap: 40px } .team-card .portrait { position: relative } .team-card img { aspect-ratio: 1.05; border-radius: 45px } .team-accent { position: absolute; bottom: 17px; left: 50%; transform: translateX(-50%); width: 70px; height: 32px; background: var(--orange); border-radius: 25px } .team-card h3 { font-weight: 700; margin-top: 20px } .team-card p { color: #ff946c } .team-grid:before { content: ''; position: absolute; inset: 0; background: url('/assets/team-pattern.webp') left bottom/auto 65% no-repeat; pointer-events: none; opacity: .2; z-index: 0 } .team-card { position: relative; z-index: 1 } .showcase { position: relative; width: 88%; max-width: 1100px; min-height: 480px; border-radius: 65px; background-image: linear-gradient(#080b2d20, #080b2d8c), url('/assets/low-intro.webp'); overflow: visible; margin-top: 65px; padding: 65px 45px 70px } .showcase:before { content: ''; position: absolute; top: -22px; left: 30px; right: 40px; height: 30px; background: var(--navy); border-radius: 45px 45px 0 0; z-index: -1 } .showcase-side { position: absolute; width: 11%; height: 76%; border-radius: 60px; background-size: cover; background-position: center; top: 12%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600 } .showcase-side span { writing-mode: vertical-rl } .showcase-side.left { left: -3%; background-image: linear-gradient(#060b29a3, #060b29af), url('/assets/showcase-left.webp') } .showcase-side.right { right: -3%; top: -3%; background-image: linear-gradient(#060b29a3, #060b29af), url('/assets/showcase-right.webp') } .showcase h3 { font-size: 22px } .showcase p { font-size: 13px } .showcase-open { height: 88px; width: 88px; display: inline-flex; align-items: center; justify-content: center; background: #df002a; border: 0; border-radius: 50%; color: white; margin-bottom: 30px } .showcase-open .icon { width: 30px; height: 30px } .showcase-open:hover { background: var(--orange) } .testimonial { max-width: 1290px; padding: 60px 70px; grid-template-columns: 170px 1fr; position: relative } .quote blockquote { font-size: clamp(21px, 1.75vw, 30px); font-weight: 700 } .testimonial-caption { grid-column: 1/-1; display: flex; gap: 12px; font-size: 11px; color: #8591a9 } .faq-grid { max-width: 1180px; gap: 60px } .faq-collage { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; align-self: center } .faq-collage img { width: 100%; height: 100%; aspect-ratio: 1.2 } .faq-collage img:first-child { grid-column: 1/-1; aspect-ratio: 3.2 } .faq summary { font-size: 14px } .faq details p { font-size: 14px } .faq-photo { border-radius: 30px } .cta h2 { font-size: clamp(29px, 2.5vw, 42px) } .cta { padding: 82px 30px } .promo-form-section { background: #020310 } .promo-form-section.pricing-photo { background: linear-gradient(#152025a3, #152025a3), url('/assets/promo.webp') center 38%/cover } .promo-form-section h2 { max-width: 960px; font-size: clamp(30px, 3vw, 49px) } .form-card { max-width: 1220px; width: 67%; gap: 50px; padding: 40px; border-radius: 32px; grid-template-columns: .8fr 1.2fr } .form-card>img { object-fit: cover; border-radius: 35px } .form-card h3 { font-size: 30px } .form-grid { gap: 12px } .form-grid input, .form-grid select, .form-grid textarea { font-size: 14px } .form-grid textarea { min-height: 105px } .form-note { font-size: 11px; color: #666; line-height: 1.5 } .footer { background: linear-gradient(#06081ddd, #06081dea), url('/assets/footer-texture.webp') center/cover } .footer-grid { gap: 55px } .footer-brand { font-size: 37px } .footer-brand img { height: 78px; width: 78px } .footer h3 { font-size: 18px } .footer p, .footer li, .footer-text-button { font-size: 13px } .footer-bottom { font-size: 12px } .detail-intro { grid-template-columns: 1.52fr 1fr; gap: 30px; width: 91%; max-width: 1740px } .detail-intro .intro-img { aspect-ratio: 3.1 } .detail-intro h2 { font-size: 27px } .detail-intro p { font-size: 16px } .related h3 { font-size: 21px } .related a { font-size: 14px } .phone-card strong { font-size: 34px } .phone-card small { font-size: 14px } .detail-grid { max-width: 1500px; margin: 30px auto 0; gap: 34px 20px } .detail-card { padding: 28px 22px } .detail-card p { font-size: 15px } .detail-card h3 { font-size: 24px } body[data-page="home-theater-installation"] .detail-card h3, body[data-page="video-camera-surveillance"] .detail-card h3 { font-size: clamp(25px, 2vw, 38px) } .detail-service-intro { max-width: 1500px; font-size: 15px } .detail-card .checks { text-align: left } .pricing-grid { max-width: 1220px; gap: 30px } .price-card { border-radius: 34px } .price-card h3 { font-size: 20px } .price-card .price { font-size: 43px } .price-card .checks li { font-size: 13px } .price-card .tax { font-size: 12px } .pricing-intro h2 { font-size: 27px } .about-intro { padding: 95px 0 65px } .about-intro .split { gap: 35px; grid-template-columns: 1fr 1fr } .about-intro img { align-self: start; margin-top: 62px } .about-intro p, .experience p { font-size: 16px } .experience h2 { color: #ff9d76; font-size: 32px } .experience { padding: 60px 70px } .core-circles { gap: 40px } .core-circles h3 { font-size: 20px } .core-circles a { position: relative } .mission { gap: 40px } .mission p { font-size: 15px } body[data-page="about"] main>.narrow>.trust>.container { width: 84% } body[data-page="about"] main>.narrow>.trust .trust-card { padding: 25px 12px } body[data-page="about"] main>.pale { max-width: 1290px; margin: auto; background: #fafafa } body[data-page="about"] main>.pale>.narrow { width: 100% } body[data-page="about"] .pricing-grid { gap: 30px } body[data-page="about"] .stats { width: 94% } .contact-banner p { font-size: 16px } .contact-overlap { max-width: 1220px; margin: auto; grid-template-columns: 1.1fr .85fr; padding: 0 40px } .contact-overlap>img { height: 650px } .contact-info { padding: 50px 45px; margin-left: -85px } .contact-info h2 { font-size: 28px } .contact-info .contact-row strong { font-size: 16px } .contact-form { max-width: 1240px; margin-top: 95px; padding: 40px } .contact-form h2 { font-size: 30px } .contact-form .form-grid label { font-size: 15px } .contact-form .form-grid input { font-size: 15px } .map { height: 420px } .news-empty { font-size: 14px; min-height: 100px } #gallery-dialog { width: min(1000px, 94vw) } #gallery-image { width: 100%; max-height: 65vh; object-fit: contain; background: var(--pale); border-radius: 10px } .gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 20px } #gallery-count { font-size: 14px } @media(max-width:1400px) { .site-header { min-height: 78px; margin-top: 30px } .brand { padding: 10px 30px } .brand img { width: 170px } .desktop-nav { gap: 24px; font-size: 13px } .header-contact { min-width: 32%; padding-left: 40px; padding-right: 22px; gap: 12px } .header-contact .icon-button { margin-left: 12px } .header-contact strong { font-size: 14px } .header-contact small { font-size: 10px } .header-contact .language { font-size: 11px } .hero-content .container { padding-left: 115px } .section { padding: 75px 0 } .service-card h3 { font-size: 25px } .detail-intro p { font-size: 15px } .form-card { width: 75% } .contact-overlap>img { height: 520px } .footer-grid { gap: 30px } .footer-brand { font-size: 29px } .footer-brand img { width: 62px; height: 62px } .about-intro p, .experience p { font-size: 14px } .experience { padding: 50px } .trust-card h3 { font-size: 18px } .stats { padding: 60px 0 } .stat strong { font-size: 36px } .stat small { font-size: 10px } .price-card h3 { font-size: 18px } .hero-arrow { width: 45px; height: 45px } } @media(max-width:1100px) { .desktop-nav { gap: 16px; font-size: 12px } .brand { padding: 10px 22px } .brand img { width: 145px } .header-contact { min-width: 29%; padding-left: 30px } .header-contact .language { display: none } .hero-content .container { padding-left: 80px } .container { width: calc(100% - 60px) } .narrow { width: calc(100% - 70px) } .section { padding: 65px 0 } .service-card h3 { font-size: 23px } .mini-benefit h4 { font-size: 14px } .mini-benefit p { font-size: 12px } .detail-card p { font-size: 14px } .form-card { width: 83%; gap: 30px; padding: 30px } .footer-brand { font-size: 25px } .footer-brand img { width: 52px; height: 52px } .phone-card strong { font-size: 28px } .phone-card small { font-size: 12px } .contact-info { padding: 35px 25px } .contact-info h2 { font-size: 25px } .about-intro .split { gap: 30px } .stats { gap: 20px } .testimonial { padding: 45px; gap: 35px; grid-template-columns: 110px 1fr } .quote blockquote { font-size: 23px } .showcase { min-height: 390px } } @media(max-width:800px) { .site-header { width: 94%; margin-top: 20px } .header-contact { min-width: 0; padding: 15px 28px; flex: 0; white-space: nowrap } .header-contact .icon-button { display: none } .brand { padding: 12px 20px } .brand img { width: 160px; height: 48px } .desktop-nav { font-size: 15px; gap: 0 } .home-hero { min-height: 590px } .hero-content .container { padding-left: 45px } .hero-content h1 { font-size: 43px; max-width: 480px } .hero-arrow { width: 34px; height: 34px; font-size: 20px } .hero-arrow.previous { left: 2% } .hero-arrow.next { right: 2% } .hero-background { background-size: auto 100%; background-position: 60% center } .container, .narrow { width: calc(100% - 50px) } .inner-hero { height: 350px; border-radius: 0 0 45px 45px } .service-grid { gap: 25px 16px } body[data-page="home"] main>.pale>.container, body[data-page="services"] main>.pale>.container { width: calc(100% - 36px) } .about-benefits { gap: 20px } .about-illustration { max-height: 530px } .service-card h3 { font-size: 25px } .trust-grid { gap: 15px } .stats { max-width: 600px; gap: 35px } .pricing-promo .container { grid-template-columns: 1fr } .team-grid { gap: 25px } .team-card img { border-radius: 28px } .team-accent { width: 55px; height: 25px; bottom: 14px } .team-card h3 { font-size: 18px } .showcase { width: 88%; min-height: 340px; padding: 40px } .showcase h3 { font-size: 20px } .showcase-side { font-size: 10px } .showcase-open { height: 67px; width: 67px } .faq-grid { gap: 30px; grid-template-columns: 1fr 1fr } .form-card { width: 88%; padding: 25px; gap: 25px } .form-card h3 { font-size: 25px } .detail-intro { grid-template-columns: 1fr } .detail-intro h2 { font-size: 25px } .detail-intro p { font-size: 15px } .detail-card h3 { font-size: 23px } .detail-grid { gap: 22px 15px } .detail-intro aside { grid-template-columns: 1.2fr 1fr } .related a { font-size: 12px } .contact-overlap { padding: 0 } .contact-overlap>img { height: 440px } .contact-info { margin-left: -50px; padding: 30px 22px } .contact-info h2 { font-size: 23px } .contact-info .contact-row strong { font-size: 13px } .contact-form { margin-top: 65px } .contact-form h2 { font-size: 25px } .core-circles { gap: 20px } .core-circles h3 { font-size: 16px } .experience { padding: 35px } .experience h2 { font-size: 28px } .about-intro .split { grid-template-columns: 1fr } .about-intro img { margin-top: 0; max-height: 430px; object-fit: cover } .about-intro { padding-top: 65px } .about-intro p, .experience p { font-size: 15px } .mission { gap: 20px } body[data-page="about"] main>.narrow>.trust>.container { width: 88% } body[data-page="about"] .pricing-grid { gap: 20px } .testimonial { grid-template-columns: 70px 1fr } .quote blockquote { font-size: 21px } } @media(max-width:540px) { .site-header { width: 94%; min-height: 66px; margin-top: 15px } .brand { padding: 8px 10px } .brand img { width: 112px; height: 42px } .header-contact { padding: 12px 13px 12px 22px; border-top-left-radius: 45px } .header-contact strong { font-size: 10px } .header-contact small { font-size: 8px } .mobile-toggle { padding: 5px; margin-right: 4px } .home-hero { min-height: 530px } .hero-content .container { padding: 15px 15px 0; width: calc(100% - 36px) } .hero-content h1 { font-size: 37px; max-width: 310px } .hero-content .eyebrow { font-size: 9px } .hero-arrow { top: auto; bottom: 22px; transform: none; width: 30px; height: 30px } .hero-arrow.previous { left: 27px } .hero-arrow.next { right: 27px } .hero-background { opacity: .72; background-position: 52% center } .hero-pagination { bottom: 33px } .home-hero:after { display: none } .hero-content { padding: 70px 0 } .container, .narrow { width: calc(100% - 36px) } .section { padding: 50px 0 } .inner-hero { height: 285px; width: 94%; border-radius: 0 0 34px 34px } .inner-hero h1 { font-size: 30px } .service-card .card-content { padding: 20px } .service-card>a>img { aspect-ratio: 1.25 } .service-card h3 { font-size: 26px } .service-card p { font-size: 14px } .service-card .checks li { font-size: 12px } .service-card h4 { font-size: 13px } .about-copy p { font-size: 15px } .mini-benefit h4 { font-size: 13px } .mini-benefit p { font-size: 12px } .trust>.container { width: calc(100% - 36px) } .trust-card h3 { font-size: 16px } .trust .trust-grid { gap: 10px } .stat strong { font-size: 28px } .stat small { font-size: 8px } .stats { gap: 25px 15px; padding: 43px 0 } .process-card h3 { font-size: 17px } .process-card p { font-size: 12px } .process-card { padding: 25px 14px } .team-grid { max-width: 290px } .team-card h3 { font-size: 21px } .team-card img { border-radius: 35px } .team-accent { width: 65px; height: 28px } .showcase { min-height: 310px; margin-top: 38px; padding: 35px 27px; width: 90%; border-radius: 34px } .showcase:before { border-radius: 25px 25px 0 0; top: -14px; left: 18px; right: 18px } .showcase-side { font-size: 9px } .showcase h3 { font-size: 18px } .showcase p { font-size: 10px } .showcase-open { width: 58px; height: 58px; margin-bottom: 20px } .testimonial { grid-template-columns: 1fr; padding: 25px; gap: 24px } .quote blockquote { font-size: 20px } .testimonial-caption { font-size: 10px } .faq-grid { grid-template-columns: 1fr } .faq-collage { width: 100%; max-height: 350px } .faq-photo { aspect-ratio: 1.2; max-height: 340px } .faq details p { font-size: 14px } .cta { padding: 55px 20px } .cta h2 { font-size: 28px } .form-card { width: calc(100% - 30px); padding: 24px; gap: 25px; grid-template-columns: 1fr } .form-card>img { height: 230px; object-fit: cover } .promo-form-section h2 { font-size: 29px } .footer-grid { gap: 30px 20px } .footer-brand { font-size: 29px } .footer-brand img { width: 60px; height: 60px } .footer h3 { font-size: 14px } .footer p, .footer li, .footer-text-button { font-size: 12px } .footer-bottom { font-size: 9px } .detail-intro { width: calc(100% - 36px); padding: 40px 0 } .detail-intro .intro-img { aspect-ratio: 2.4 } .detail-intro h2 { font-size: 23px } .detail-intro p { font-size: 14px } .detail-intro aside { grid-template-columns: 1fr } .related a { font-size: 13px } .detail-card { padding: 28px 22px } .detail-card h3 { font-size: 24px } .detail-service-intro { font-size: 14px } .pricing-grid { max-width: 350px; gap: 28px } .price-card h3 { font-size: 21px } .price-card .checks li { font-size: 14px } .price-card .tax { font-size: 12px } .pricing-intro h2 { font-size: 25px } .experience { padding: 26px } .core-circles { gap: 25px } .core-circles h3 { font-size: 15px } .mission { grid-template-columns: 1fr } body[data-page="about"] .pricing-grid { width: 94% } body[data-page="about"] .stats { width: 94% } .contact-banner p { font-size: 14px } .contact-overlap { grid-template-columns: 1fr } .contact-overlap>img { height: 340px } .contact-info { margin: -40px 15px 0; padding: 28px 23px } .contact-info .contact-row strong { font-size: 14px } .contact-form { padding: 28px 18px; margin-top: 45px } .contact-form h2 { font-size: 23px } .contact-form .form-grid label { font-size: 13px } .map { height: 280px } .gallery-controls { gap: 10px } .gallery-controls .button { padding: 10px 13px; font-size: 11px } #gallery-dialog { padding: 23px } }