/* ============================================================================ THEME 10 — "Ironside" Industrial dispatch-desk / broadsheet-masthead design: deep navy + a hot signal-red accent on a warm cream canvas, condensed uppercase Archivo Narrow headlines over Manrope body, hard offset shadows, numbered service rows. Fonts are loaded NON-blocking from the theme's (no @import here) and scroll-reveals run via a tiny inline IntersectionObserver in main.js. The accent is fully tokenized (--accent + --accent-rgb + computed shades) and the sample's --red/--red-dark are aliased onto it, so the brand-color picker repaints the whole theme with zero stray red hex. See buildBrandColorCssTheme10. ============================================================================ */ :root { /* ---- accent (tokenized — overwritten by the brand-color block) ---- */ --accent: #ee2439; --accent-rgb: 238, 36, 57; --accent-dark: #c91529; /* darker — hovers / on-light text */ --accent-bright: #ff4357; /* lighter — hero ticks / glows */ --accent-soft: #ff7e8e; /* soft accent (eyebrow on navy) */ --accent-tint: #fbe0e3; /* very pale accent (soft backgrounds) */ --navy: #0b1e3a; --navy-2: #10294c; --blue: #0c6096; --blue-light: #dceef5; --red: var(--accent); --red-dark: var(--accent-dark); --cream: #f4f3ed; --paper: #ffffff; --ink: #172238; --muted: #667184; --line: #dce1e5; --green: #1a8a60; --yellow: #ffc857; --heading: "Archivo Narrow", sans-serif; --body: "Manrope", sans-serif; --shadow: 0 18px 60px rgba(9, 30, 57, 0.14); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; } body.menu-open { overflow: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } button, summary { cursor: pointer; } h1, h2, h3, h4, p { margin-top: 0; } h1, h2, h3, h4 { color: var(--navy); font-family: var(--heading); font-weight: 700; line-height: 0.98; letter-spacing: -0.025em; text-transform: uppercase; } h1 { /* Capped so real (longer) generated headlines stay a bold masthead without overflowing the hero. The concept's original 8.8rem assumed a 3-word title. */ font-size: clamp(2.9rem, 5.6vw, 5rem); } h2 { margin-bottom: 24px; font-size: clamp(2.1rem, 3.9vw, 3.7rem); } h3 { margin-bottom: 12px; font-size: 1.75rem; } p { margin-bottom: 18px; } small { font-size: 0.8125rem; } .skip-link { position: fixed; z-index: 999; top: 12px; left: 12px; padding: 10px 15px; background: var(--paper); color: var(--navy); font-weight: 800; transform: translateY(-150%); } .skip-link:focus { transform: translateY(0); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; } .section { position: relative; padding: 116px 0; } .section-tight { padding: 78px 0; } .eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; color: var(--red); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.15em; line-height: 1.3; text-transform: uppercase; } .eyebrow::before { width: 7px; height: 7px; background: var(--red); content: ""; transform: rotate(45deg); } .eyebrow-light { color: var(--accent-soft); } .eyebrow-light::before { background: var(--accent-soft); } .lede { max-width: 720px; color: var(--muted); font-size: 1.08rem; } .section-head { display: grid; grid-template-columns: 1.25fr 0.75fr; align-items: end; gap: 70px; margin-bottom: 52px; } .section-head h2, .section-head p { margin-bottom: 0; } .section-head > p { color: var(--muted); } .section-head.light h2 { color: var(--paper); } .section-head.light > p { color: #c0ccda; } .button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 12px; padding: 0 22px; border: 2px solid transparent; background: var(--red); box-shadow: 5px 5px 0 rgba(11, 30, 58, 0.22); color: var(--paper); font-family: var(--heading); font-size: 0.96rem; font-weight: 700; letter-spacing: 0.035em; line-height: 1; text-transform: uppercase; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; } .button:hover { background: var(--red-dark); box-shadow: 2px 2px 0 rgba(11, 30, 58, 0.28); transform: translate(3px, 3px); } .button:focus-visible, .nav-toggle:focus-visible, .faq-list summary:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; } .button-outline { border-color: rgba(255, 255, 255, 0.6); background: transparent; box-shadow: none; } .button-outline:hover { border-color: var(--paper); background: var(--paper); color: var(--navy); transform: none; } .button-navy { background: var(--navy); } .button-small { min-height: 42px; padding-inline: 17px; font-size: 0.83rem; } .text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .text-link::after { width: 27px; height: 2px; background: var(--red); content: ""; transition: width 180ms ease; } .text-link:hover::after { width: 43px; } /* Header */ .site-header { position: relative; z-index: 100; background: var(--paper); } .utility-bar { min-height: 35px; background: var(--navy); color: #d3dfeb; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .utility-inner { display: flex; min-height: 35px; align-items: center; justify-content: space-between; gap: 25px; } .utility-inner p { margin: 0; } .utility-inner div { display: flex; gap: 30px; } .live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #55d18a; box-shadow: 0 0 0 4px rgba(85, 209, 138, 0.14); } .main-nav { display: grid; min-height: 82px; grid-template-columns: auto 1fr auto; align-items: center; gap: 34px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); font-family: var(--heading); font-size: 1.55rem; font-weight: 700; letter-spacing: -0.025em; line-height: 0.78; text-transform: uppercase; } .brand-mark { position: relative; display: grid; width: 43px; height: 43px; place-items: center; overflow: hidden; background: var(--blue); color: var(--paper); font-size: 1.4rem; } .brand-mark::after { position: absolute; right: -9px; bottom: -12px; width: 27px; height: 50px; background: var(--red); content: ""; transform: rotate(31deg); } .brand-mark b { position: relative; z-index: 2; } .brand small { display: block; margin-top: 8px; color: var(--muted); font-family: var(--body); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.16em; } .nav-links { display: flex; align-items: center; justify-content: center; gap: 28px; } .nav-links a { position: relative; padding: 31px 0 28px; color: #3b4659; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .nav-links a::after { position: absolute; right: 50%; bottom: 18px; left: 50%; height: 3px; background: var(--red); content: ""; transition: right 180ms ease, left 180ms ease; } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { right: 0; left: 0; } .nav-actions { display: flex; align-items: center; gap: 16px; } .nav-phone { display: flex; flex-direction: column; color: var(--navy); font-family: var(--heading); font-size: 1.08rem; font-weight: 700; line-height: 1.05; text-align: right; } .nav-phone small { margin-bottom: 5px; color: var(--muted); font-family: var(--body); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; } .nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: var(--navy); padding: 12px; } .nav-toggle span { display: block; height: 2px; margin-block: 5px; background: var(--paper); } /* Homepage hero */ .hero { position: relative; min-height: 640px; overflow: hidden; background: var(--navy); color: var(--paper); } .hero::before { position: absolute; inset: 0 46% 0 0; opacity: 0.16; background-image: linear-gradient(rgba(255, 255, 255, 0.24) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.24) 1px, transparent 1px); background-size: 48px 48px; content: ""; } .hero-grid { position: relative; z-index: 3; display: grid; min-height: 640px; grid-template-columns: 1.02fr 0.98fr; align-items: center; gap: 62px; padding-top: 46px; padding-bottom: 84px; } .hero-copy { position: relative; z-index: 2; } .hero-copy h1 { max-width: 720px; margin: 0 0 22px; color: var(--paper); line-height: 0.92; } .hero-copy h1 span { color: var(--accent-bright); } .hero-copy > p { max-width: 610px; margin-bottom: 27px; color: #c9d4df; font-size: 1.03rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 28px; } .hero-points { display: flex; flex-wrap: wrap; gap: 11px 22px; margin: 0; padding: 0; list-style: none; color: #e5edf4; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .hero-points li::before { margin-right: 8px; color: var(--accent-bright); content: "✓"; } .hero-visual { position: absolute; top: 0; right: 0; width: 49%; height: 100%; } .hero-visual::before { position: absolute; z-index: 2; top: -9%; bottom: -9%; left: -58px; width: 52px; background: var(--red); box-shadow: -14px 0 0 rgba(var(--accent-rgb), 0.28); content: ""; transform: rotate(-8deg); } .hero-visual::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(11, 30, 58, 0.6), transparent 45%); content: ""; } .hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 52% center; } .arrival-card { position: absolute; z-index: 4; right: 6%; bottom: 68px; display: grid; width: 230px; grid-template-columns: 47px 1fr; align-items: center; gap: 12px; padding: 17px; border-bottom: 4px solid var(--red); background: var(--paper); box-shadow: var(--shadow); color: var(--navy); } .arrival-card b:first-child { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 50%; background: #e4f6ee; color: var(--green); font-size: 1.3rem; } .arrival-card span, .arrival-card strong { display: block; } .arrival-card span { color: var(--muted); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .arrival-card strong { font-family: var(--heading); font-size: 1.22rem; text-transform: uppercase; } .request-rail { position: relative; z-index: 8; margin-top: -48px; } .request-panel { padding: 24px; border-top: 5px solid var(--red); background: var(--paper); box-shadow: var(--shadow); } .request-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 17px; } .request-panel-head h2 { margin: 0; font-size: 2rem; } .request-panel-head p { margin: 0; color: var(--muted); font-size: 0.8125rem; } .inline-form { display: grid; grid-template-columns: 1fr 1fr 1.1fr 1.25fr auto; gap: 10px; } .inline-form input, .inline-form select, .contact-form input, .contact-form select, .contact-form textarea { width: 100%; min-height: 49px; border: 1px solid var(--line); border-radius: 0; outline: none; background: #f7f8f8; color: var(--ink); padding: 0 13px; } .inline-form input:focus, .inline-form select:focus, .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(12, 96, 150, 0.12); } .form-success { display: none; margin: 14px 0 0; color: var(--green); font-size: 0.8125rem; font-weight: 800; } .form-success.visible { display: block; } /* Trust rail */ .trust-rail { padding: 43px 0 39px; border-bottom: 1px solid var(--line); background: var(--cream); } .trust-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .trust-grid article { display: flex; align-items: center; gap: 11px; } .trust-grid b { display: grid; width: 39px; height: 39px; flex: 0 0 39px; place-items: center; border: 1px solid #cbd3d8; border-radius: 50%; background: var(--paper); color: var(--red); font-family: var(--heading); font-size: 1rem; } .trust-grid strong, .trust-grid span { display: block; } .trust-grid strong { color: var(--navy); font-family: var(--heading); font-size: 0.99rem; line-height: 1; text-transform: uppercase; } .trust-grid span { margin-top: 5px; color: var(--muted); font-size: 0.8125rem; } /* About */ .about-section { overflow: hidden; background: var(--paper); } .about-grid { display: grid; grid-template-columns: 0.91fr 1.09fr; align-items: center; gap: 92px; } .image-stack { position: relative; min-height: 610px; } .image-stack-main { position: absolute; inset: 0 70px 55px 0; overflow: hidden; border-left: 7px solid var(--red); } .image-stack-main img, .image-stack-small img { width: 100%; height: 100%; object-fit: cover; } .image-stack-small { position: absolute; right: 0; bottom: 0; width: 47%; height: 275px; overflow: hidden; border: 11px solid var(--paper); border-radius: 0 0 92px; box-shadow: var(--shadow); } .image-stack-note { position: absolute; top: 41px; right: 25px; display: grid; width: 120px; height: 120px; place-items: center; border-radius: 50%; background: var(--navy); color: var(--paper); text-align: center; transform: rotate(6deg); } .image-stack-note strong { font-family: var(--heading); font-size: 2.5rem; line-height: 0.8; } .image-stack-note span { display: block; margin-top: 7px; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.25; text-transform: uppercase; } .about-copy > p:not(.eyebrow) { color: var(--muted); } .promise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 30px 0 31px; } .promise-grid article { padding: 18px; border: 1px solid var(--line); background: #fbfbf9; } .promise-grid b { display: block; margin-bottom: 8px; color: var(--red); font-family: var(--heading); font-size: 1.4rem; } .promise-grid strong { display: block; color: var(--navy); font-size: 0.8125rem; letter-spacing: 0.04em; line-height: 1.35; text-transform: uppercase; } .promise-grid span { display: block; margin-top: 5px; color: var(--muted); font-size: 0.8125rem; } /* Services */ .services-section { overflow: hidden; background: var(--cream); } .service-list { display: grid; gap: 17px; } .service-row { display: grid; min-height: 270px; grid-template-columns: 0.62fr 1.38fr 0.82fr; overflow: hidden; border: 1px solid var(--line); background: var(--paper); transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; } .service-row:hover { border-color: var(--blue); box-shadow: 0 17px 45px rgba(11, 30, 58, 0.1); transform: translateY(-3px); } .service-row-index { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 27px; background: var(--navy); color: var(--paper); } .service-row:first-child .service-row-index { background: var(--red); } .service-row-index > b { color: rgba(255, 255, 255, 0.55); font-family: var(--heading); font-size: 1.1rem; } .service-row-index span { font-family: var(--heading); font-size: 4.1rem; line-height: 0.8; } .service-row-index small { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .service-row-copy { display: flex; flex-direction: column; justify-content: center; padding: 30px 42px; } .service-row-copy h3 { font-size: 2.3rem; } .service-row-copy p { max-width: 610px; color: var(--muted); font-size: 0.82rem; } .service-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 20px; } .service-tags span { padding: 5px 8px; border: 1px solid var(--line); color: var(--navy); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .service-row-media { min-height: 270px; overflow: hidden; } .service-row-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; } .service-row:hover img { transform: scale(1.035); } .service-more { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 18px; padding: 23px 27px; background: var(--blue); color: var(--paper); } .service-more p { margin: 0; font-size: 0.8125rem; } /* Brand rail */ .brand-rail { padding: 31px 0; border-block: 1px solid var(--line); background: var(--paper); } .brand-rail-inner { display: flex; align-items: center; gap: 46px; } .brand-rail p { flex: 0 0 auto; margin: 0; color: var(--muted); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .brand-rail div { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 28px; color: #7d8792; font-family: var(--heading); font-size: 1.17rem; font-weight: 700; text-transform: uppercase; } /* Offers */ .offers { background: var(--red); color: var(--paper); } .offers-head { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 37px; } .offers h2 { max-width: 650px; margin: 0; color: var(--paper); } .offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .offer-card { position: relative; min-height: 285px; overflow: hidden; padding: 28px; background: var(--paper); color: var(--ink); } .offer-card::before, .offer-card::after { position: absolute; top: 50%; width: 30px; height: 30px; border-radius: 50%; background: var(--red); content: ""; transform: translateY(-50%); } .offer-card::before { left: -15px; } .offer-card::after { right: -15px; } .offer-card > span { color: var(--blue); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .offer-card strong { display: block; margin: 25px 0 11px; color: var(--navy); font-family: var(--heading); font-size: 4.7rem; line-height: 0.8; } .offer-card h3 { font-size: 1.55rem; } .offer-card p { color: var(--muted); font-size: 0.8125rem; } .offer-card button { position: absolute; right: 28px; bottom: 23px; left: 28px; padding: 13px 0 0; border: 0; border-top: 1px dashed #cdd3d8; background: transparent; color: var(--red); font-size: 0.8125rem; font-weight: 800; text-align: left; text-transform: uppercase; } .offer-card button b { float: right; color: var(--navy); } /* Why us */ .why-section { overflow: hidden; background: var(--paper); } .why-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; align-items: center; gap: 76px; } .why-copy > p:not(.eyebrow) { color: var(--muted); } .reason-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 30px; background: var(--line); border: 1px solid var(--line); } .reason-list article { min-height: 150px; padding: 23px; background: var(--paper); } .reason-list b { display: grid; width: 34px; height: 34px; margin-bottom: 25px; place-items: center; background: var(--blue-light); color: var(--blue); font-family: var(--heading); } .reason-list strong { display: block; color: var(--navy); font-size: 0.8125rem; line-height: 1.4; text-transform: uppercase; } .reason-list span { display: block; margin-top: 5px; color: var(--muted); font-size: 0.8125rem; } .why-visual { position: relative; height: 675px; } .why-visual > img { width: 100%; height: 100%; object-fit: cover; } .why-score { position: absolute; right: -26px; bottom: 34px; width: 245px; padding: 23px; border-left: 5px solid var(--red); background: var(--navy); box-shadow: var(--shadow); color: var(--paper); } .why-score strong, .why-score span { display: block; } .why-score strong { color: var(--yellow); font-family: var(--heading); font-size: 3.6rem; line-height: 0.8; } .why-score span { margin-top: 10px; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } /* Process route */ .route-section { overflow: hidden; background: var(--navy); color: var(--paper); } .route-section h2 { color: var(--paper); } .route-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 50px; } .route-grid::before { position: absolute; top: 25px; right: 12.5%; left: 12.5%; height: 3px; background: var(--red); content: ""; } .route-grid article { position: relative; z-index: 2; padding-top: 68px; text-align: center; } .route-grid article > b { position: absolute; top: 0; left: calc(50% - 27px); display: grid; width: 54px; height: 54px; place-items: center; border: 7px solid var(--navy); border-radius: 50%; background: var(--red); color: var(--paper); font-family: var(--heading); font-size: 1.15rem; } .route-grid h3 { color: var(--paper); font-size: 1.38rem; } .route-grid p { margin: 0; color: #aebccd; font-size: 0.8125rem; } /* Residential/commercial */ .compare-section { background: var(--cream); } .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .compare-card { position: relative; padding: 35px; border: 1px solid var(--line); background: var(--paper); } .compare-card.featured { border-color: var(--navy); background: var(--navy); color: var(--paper); } .compare-icon { display: grid; width: 53px; height: 53px; margin-bottom: 28px; place-items: center; background: var(--blue-light); color: var(--blue); font-size: 1.6rem; } .featured .compare-icon { background: var(--red); color: var(--paper); } .compare-card h3 { font-size: 2.4rem; } .featured h3 { color: var(--paper); } .compare-card > p { color: var(--muted); } .featured > p { color: #b8c5d2; } .check-list { display: grid; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; } .featured .check-list { border-color: rgba(255, 255, 255, 0.18); } .check-list li { position: relative; padding: 13px 0 13px 24px; border-bottom: 1px solid var(--line); font-size: 0.8125rem; font-weight: 700; } .featured .check-list li { border-color: rgba(255, 255, 255, 0.18); } .check-list li::before { position: absolute; left: 0; color: var(--red); content: "✓"; font-weight: 900; } /* Problems */ .problems-section { background: var(--paper); } .problem-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .problem-grid article { min-height: 254px; padding: 27px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .problem-grid span { display: inline-block; margin-bottom: 44px; padding: 5px 8px; background: var(--red); color: var(--paper); font-family: var(--heading); font-size: 0.85rem; } .problem-grid h3 { font-size: 1.45rem; } .problem-grid p { margin: 0; color: var(--muted); font-size: 0.8125rem; } /* Reviews */ .reviews-section { overflow: hidden; background: var(--blue); color: var(--paper); } .reviews-section::before { position: absolute; top: -310px; left: -160px; width: 650px; height: 650px; border: 115px solid rgba(255, 255, 255, 0.05); border-radius: 50%; content: ""; } .reviews-header { position: relative; z-index: 2; display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 45px; } .reviews-header h2 { max-width: 760px; margin: 0; color: var(--paper); } .rating { flex: 0 0 auto; text-align: right; } .rating strong { display: block; color: var(--paper); font-family: var(--heading); font-size: 4rem; line-height: 0.8; } .rating span { display: block; margin-top: 10px; color: var(--yellow); font-size: 0.85rem; letter-spacing: 0.1em; } .rating small { display: block; color: #c6d9e4; font-size: 0.8125rem; letter-spacing: 0; } .review-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; } .review-card { min-height: 350px; padding: 29px; background: var(--paper); color: var(--ink); } .review-stars { color: #ffac17; font-size: 0.8125rem; letter-spacing: 0.08em; } .review-card blockquote { margin: 38px 0 42px; color: #354156; font-size: 0.86rem; line-height: 1.8; } .review-card footer { display: flex; align-items: center; gap: 12px; margin-top: auto; } .review-card footer > b { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: var(--navy); color: var(--paper); font-family: var(--heading); } .review-card footer strong, .review-card footer span { display: block; } .review-card footer strong { color: var(--navy); font-size: 0.8125rem; text-transform: uppercase; } .review-card footer span { color: var(--muted); font-size: 0.8125rem; } /* Area */ .area-section { background: var(--cream); } .area-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: center; gap: 75px; } .area-copy > p:not(.eyebrow) { color: var(--muted); } .city-list { display: grid; grid-template-columns: 1fr 1fr; margin: 29px 0 31px; padding: 0; list-style: none; } .city-list li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--navy); font-size: 0.8125rem; font-weight: 800; } .city-list li::before { margin-right: 8px; color: var(--red); content: "●"; font-size: 0.8125rem; } .map-card { position: relative; min-height: 540px; overflow: hidden; border: 10px solid var(--paper); box-shadow: var(--shadow); background: #b8aa8a; } .map-card img { width: 100%; height: 540px; object-fit: cover; filter: saturate(0.65) contrast(1.02); } .map-card::after { position: absolute; inset: 0; background: linear-gradient(rgba(11, 30, 58, 0.1), rgba(11, 30, 58, 0.3)), radial-gradient(circle at 50% 52%, transparent 0 12%, rgba(11, 30, 58, 0.16) 12.4% 13%, transparent 13.4%); content: ""; } .map-pin { position: absolute; z-index: 2; display: grid; width: 37px; height: 37px; place-items: center; border: 5px solid var(--paper); border-radius: 50% 50% 50% 0; background: var(--red); box-shadow: 0 7px 20px rgba(11, 30, 58, 0.3); color: var(--paper); font-family: var(--heading); font-size: 0.8125rem; transform: rotate(-45deg); } .map-pin b { transform: rotate(45deg); } .pin-1 { top: 24%; left: 38%; } .pin-2 { top: 46%; left: 58%; } .pin-3 { top: 67%; left: 35%; } .pin-4 { top: 35%; left: 74%; } .map-note { position: absolute; z-index: 3; right: 20px; bottom: 20px; max-width: 220px; padding: 16px; background: var(--navy); color: var(--paper); font-size: 0.8125rem; } .map-note strong { display: block; margin-bottom: 4px; color: var(--yellow); font-family: var(--heading); font-size: 1.2rem; text-transform: uppercase; } /* Work gallery */ .gallery-section { background: var(--paper); } .gallery-grid { display: grid; min-height: 560px; grid-template-columns: 1.1fr 0.8fr 1.1fr; grid-template-rows: 1fr 1fr; gap: 10px; } .gallery-grid figure { position: relative; margin: 0; overflow: hidden; background: var(--cream); } .gallery-grid figure:first-child { grid-row: span 2; } .gallery-grid figure:last-child { grid-row: span 2; } .gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms ease; } .gallery-grid figure:hover img { transform: scale(1.045); } .gallery-grid figcaption { position: absolute; right: 12px; bottom: 12px; left: 12px; padding: 10px 12px; background: rgba(11, 30, 58, 0.91); color: var(--paper); font-size: 0.8125rem; font-weight: 800; text-transform: uppercase; } /* FAQ */ .faq-section { overflow: hidden; background: var(--cream); } .faq-grid { display: grid; grid-template-columns: 0.84fr 1.16fr; gap: 72px; } .faq-aside { display: flex; flex-direction: column; } .faq-aside img { width: 100%; height: 390px; margin-bottom: 25px; object-fit: cover; } .faq-aside p:not(.eyebrow) { color: var(--muted); } .faq-list { border-top: 1px solid var(--line); } .faq-list details { border-bottom: 1px solid var(--line); background: var(--paper); } .faq-list summary { position: relative; padding: 23px 54px 23px 22px; color: var(--navy); font-family: var(--heading); font-size: 1.13rem; font-weight: 700; line-height: 1.2; list-style: none; text-transform: uppercase; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { position: absolute; top: 50%; right: 20px; display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--navy); color: var(--paper); content: "+"; font-family: var(--body); font-size: 0.95rem; transform: translateY(-50%); } .faq-list details[open] summary::after { background: var(--red); content: "−"; } .faq-list details p { padding: 0 55px 23px 22px; color: var(--muted); font-size: 0.8125rem; } /* CTA */ .cta-band { position: relative; overflow: hidden; background: var(--navy); color: var(--paper); } .cta-band::before { position: absolute; top: -120px; left: 48%; width: 34px; height: 500px; background: var(--red); content: ""; transform: rotate(-17deg); } .cta-grid { position: relative; z-index: 2; display: grid; min-height: 390px; grid-template-columns: 0.82fr 1.18fr; align-items: center; gap: 80px; } .cta-copy { padding: 64px 0; } .cta-copy h2 { margin-bottom: 20px; color: var(--paper); font-size: clamp(3.1rem, 5vw, 5rem); } .cta-copy p { color: #bdc9d5; } .cta-photo { align-self: stretch; min-height: 390px; } .cta-photo img { width: 100%; height: 100%; object-fit: cover; } /* Contact / newsletter */ .contact-section { background: var(--paper); } .contact-grid { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 82px; } .contact-copy > p:not(.eyebrow) { color: var(--muted); } .contact-details { display: grid; gap: 14px; margin-top: 30px; } .contact-details article { padding: 17px 0; border-top: 1px solid var(--line); } .contact-details strong, .contact-details span { display: block; } .contact-details strong { color: var(--navy); font-family: var(--heading); font-size: 1.1rem; text-transform: uppercase; } .contact-details span { color: var(--muted); font-size: 0.8125rem; } .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; padding: 35px; border-top: 5px solid var(--red); background: var(--cream); } .contact-form label { color: var(--navy); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .contact-form label span { display: block; margin-bottom: 6px; } .contact-form .wide { grid-column: 1 / -1; } .contact-form textarea { min-height: 120px; padding-top: 13px; resize: vertical; } .newsletter { padding: 40px 0; background: var(--red); color: var(--paper); } .newsletter-inner { display: grid; grid-template-columns: 0.8fr 1.2fr; align-items: center; gap: 60px; } .newsletter h2 { margin: 0; color: var(--paper); font-size: 2.5rem; } .newsletter p { margin: 6px 0 0; color: #ffd5d9; font-size: 0.8125rem; } .newsletter form { display: flex; } .newsletter input { width: 100%; min-height: 51px; border: 0; outline: none; padding: 0 15px; } .newsletter button { min-height: 51px; border: 0; background: var(--navy); color: var(--paper); padding: 0 22px; font-family: var(--heading); font-weight: 700; text-transform: uppercase; } /* Footer */ .site-footer { padding: 78px 0 28px; background: #07162c; color: #9dadbd; } .footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3, 0.9fr); gap: 58px; } .footer-brand .brand { color: var(--paper); } .footer-brand p { max-width: 315px; margin-top: 24px; font-size: 0.8125rem; } .footer-grid h3 { margin-bottom: 22px; color: var(--paper); font-size: 1.22rem; } .footer-grid ul { margin: 0; padding: 0; list-style: none; } .footer-grid li { margin-bottom: 9px; font-size: 0.8125rem; } .footer-grid a:hover { color: var(--paper); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 58px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.11); font-size: 0.8125rem; } .footer-bottom p { margin: 0; } .socials { display: flex; gap: 8px; } .socials a { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; color: var(--paper); font-size: 0.8125rem; font-weight: 800; } .sticky-call { position: fixed; z-index: 80; right: 18px; bottom: 18px; display: none; min-height: 48px; align-items: center; gap: 9px; padding: 0 17px; border-radius: 30px; background: var(--red); box-shadow: 0 12px 30px rgba(11, 30, 58, 0.28); color: var(--paper); font-family: var(--heading); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; } /* Inner pages */ .inner-hero { position: relative; min-height: 590px; overflow: hidden; background: var(--navy); color: var(--paper); } .inner-hero-photo { position: absolute; inset: 0 0 0 48%; } .inner-hero-photo::before { position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, var(--navy), rgba(11, 30, 58, 0.05) 62%); content: ""; } .inner-hero-photo img { width: 100%; height: 100%; object-fit: cover; } .inner-hero-grid { position: relative; z-index: 3; display: grid; min-height: 590px; grid-template-columns: 0.62fr 0.38fr; align-items: center; padding-block: 72px; } .inner-hero h1 { max-width: 790px; margin-bottom: 23px; color: var(--paper); font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 0.94; } .inner-hero-copy > p { max-width: 590px; color: #c6d2dd; } .breadcrumbs { display: flex; gap: 8px; margin-bottom: 22px; color: #9db0c4; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .breadcrumbs span { color: var(--red); } .hero-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0; } .hero-facts span { padding: 7px 9px; border: 1px solid rgba(255, 255, 255, 0.23); color: #e7edf3; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .quick-strip { background: var(--red); color: var(--paper); } .quick-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .quick-strip article { min-height: 88px; padding: 19px 23px; border-right: 1px solid rgba(255, 255, 255, 0.22); } .quick-strip article:first-child { border-left: 1px solid rgba(255, 255, 255, 0.22); } .quick-strip strong, .quick-strip span { display: block; } .quick-strip strong { font-family: var(--heading); font-size: 1.17rem; line-height: 1.1; text-transform: uppercase; } .quick-strip span { margin-top: 5px; color: #ffd2d8; font-size: 0.8125rem; } .content-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; align-items: start; gap: 78px; } .content-grid.reverse { grid-template-columns: 0.88fr 1.12fr; } .content-copy > p:not(.eyebrow) { color: var(--muted); } .content-media { position: relative; min-height: 540px; } .content-media > img { width: 100%; height: 540px; object-fit: cover; } .content-media::before { position: absolute; z-index: 2; top: -12px; right: 22px; width: 105px; height: 6px; background: var(--red); content: ""; } .content-media-note { position: absolute; right: -24px; bottom: 26px; max-width: 235px; padding: 20px; background: var(--navy); box-shadow: var(--shadow); color: var(--paper); font-size: 0.8125rem; } .content-media-note strong { display: block; margin-bottom: 7px; color: var(--yellow); font-family: var(--heading); font-size: 1.45rem; text-transform: uppercase; } .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 31px; } .stat-row article { padding: 19px; border-top: 3px solid var(--red); background: var(--cream); } .stat-row strong, .stat-row span { display: block; } .stat-row strong { color: var(--navy); font-family: var(--heading); font-size: 2.2rem; line-height: 1; } .stat-row span { margin-top: 6px; color: var(--muted); font-size: 0.8125rem; line-height: 1.45; } .detail-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .detail-card { min-height: 265px; padding: 27px; border: 1px solid var(--line); background: var(--paper); } .detail-card b { display: grid; width: 42px; height: 42px; margin-bottom: 45px; place-items: center; background: var(--red); color: var(--paper); font-family: var(--heading); } .detail-card h3 { font-size: 1.55rem; } .detail-card p { margin: 0; color: var(--muted); font-size: 0.8125rem; } .dark-panel { background: var(--navy); color: var(--paper); } .dark-panel h2, .dark-panel h3 { color: var(--paper); } .state-blocks { display: grid; gap: 12px; } .state-block { display: grid; grid-template-columns: 0.38fr 1.62fr; border: 1px solid var(--line); background: var(--paper); } .state-block-label { display: flex; min-height: 235px; flex-direction: column; justify-content: space-between; padding: 25px; background: var(--navy); color: var(--paper); } .state-block:nth-child(even) .state-block-label { background: var(--blue); } .state-block-label b { color: rgba(255, 255, 255, 0.45); font-family: var(--heading); } .state-block-label strong { font-family: var(--heading); font-size: 2rem; line-height: 0.95; text-transform: uppercase; } .state-block-copy { display: grid; grid-template-columns: 1.35fr 0.65fr; align-items: center; gap: 28px; padding: 28px 34px; } .state-block-copy p { color: var(--muted); font-size: 0.8125rem; } .mini-list { margin: 0; padding: 0; list-style: none; } .mini-list li { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--navy); font-size: 0.8125rem; font-weight: 800; text-transform: uppercase; } .mini-list li::before { margin-right: 7px; color: var(--red); content: "✓"; } .timeline { display: grid; gap: 0; margin-top: 44px; } .timeline article { display: grid; grid-template-columns: 100px 1fr 0.75fr; gap: 34px; padding: 30px 0; border-top: 1px solid var(--line); } .timeline article > b { color: var(--red); font-family: var(--heading); font-size: 2.25rem; } .timeline article p { margin: 0; color: var(--muted); font-size: 0.8125rem; } .timeline article > span { color: var(--blue); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .equipment-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; } .equipment-grid article { min-height: 235px; padding: 25px; border-top: 5px solid var(--red); background: var(--paper); } .equipment-grid b { display: block; margin-bottom: 45px; color: var(--blue); font-family: var(--heading); font-size: 2.1rem; } .equipment-grid p { margin: 0; color: var(--muted); font-size: 0.8125rem; } .case-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 14px; } .case-grid figure { position: relative; min-height: 520px; margin: 0; overflow: hidden; } .case-grid figure img { width: 100%; height: 100%; object-fit: cover; } .case-grid figcaption { position: absolute; right: 20px; bottom: 20px; left: 20px; padding: 21px; background: rgba(11, 30, 58, 0.93); color: var(--paper); } .case-grid figcaption strong { display: block; color: var(--paper); font-family: var(--heading); font-size: 1.4rem; text-transform: uppercase; } .case-grid figcaption span { color: #b8c8d8; font-size: 0.8125rem; } .case-list { display: grid; gap: 12px; } .case-list article { padding: 25px; border: 1px solid var(--line); background: var(--paper); } .case-list h3 { font-size: 1.4rem; } .case-list p { margin: 0; color: var(--muted); font-size: 0.8125rem; } .zip-wall { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; } .zip-wall a, .zip-wall span { padding: 9px 12px; border: 1px solid var(--line); background: var(--paper); color: var(--navy); font-family: var(--heading); font-size: 0.9rem; font-weight: 700; } .zip-wall a:hover { border-color: var(--red); color: var(--red); } .price-path { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); } .price-path article { min-height: 310px; padding: 31px; border-right: 1px solid var(--line); background: var(--paper); } .price-path article:last-child { border: 0; } .price-path article:nth-child(2) { background: var(--navy); color: var(--paper); } .price-path b { color: var(--red); font-family: var(--heading); font-size: 1.1rem; } .price-path h3 { margin-top: 45px; font-size: 2rem; } .price-path article:nth-child(2) h3 { color: var(--paper); } .price-path p { color: var(--muted); font-size: 0.8125rem; } .price-path article:nth-child(2) p { color: #b8c5d3; } .season-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .season-grid article { min-height: 245px; padding: 26px; background: var(--paper); } .season-grid span { color: var(--red); font-family: var(--heading); font-size: 1rem; text-transform: uppercase; } .season-grid h3 { margin-top: 38px; font-size: 1.5rem; } .season-grid p { margin: 0; color: var(--muted); font-size: 0.8125rem; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .related-card { position: relative; min-height: 350px; overflow: hidden; } .related-card img { width: 100%; height: 100%; object-fit: cover; } .related-card::after { position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(7, 22, 44, 0.96)); content: ""; } .related-card div { position: absolute; z-index: 2; right: 24px; bottom: 24px; left: 24px; } .related-card h3 { color: var(--paper); } .related-card span { color: #d7e2ec; font-size: 0.8125rem; font-weight: 800; text-transform: uppercase; } .landmark-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 14px; } .landmark-photo { position: relative; min-height: 525px; } .landmark-photo img { width: 100%; height: 100%; object-fit: cover; } .landmark-copy { display: flex; flex-direction: column; justify-content: center; padding: 46px; background: var(--navy); color: var(--paper); } .landmark-copy h2 { color: var(--paper); font-size: 3.8rem; } .landmark-copy p { color: #bac7d3; } .landmark-copy ul { margin: 14px 0 0; padding: 0; list-style: none; } .landmark-copy li { padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.8125rem; font-weight: 800; text-transform: uppercase; } /* Responsive */ @media (max-width: 1100px) { .main-nav { grid-template-columns: auto 1fr auto; } .nav-links { gap: 16px; } .nav-phone { display: none; } .hero-grid { grid-template-columns: 1.12fr 0.88fr; } .inline-form { grid-template-columns: 1fr 1fr; } .inline-form .button { grid-column: span 2; } .trust-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } .trust-grid article:nth-child(n + 4) { display: none; } .service-row { grid-template-columns: 0.45fr 1.2fr 0.8fr; } .problem-grid { grid-template-columns: 1fr 1fr; } .equipment-grid, .season-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 850px) { .shell { width: min(100% - 36px, 700px); } .section { padding: 84px 0; } .utility-inner div, .nav-actions { display: none; } .utility-inner { justify-content: center; } .main-nav { min-height: 72px; grid-template-columns: 1fr auto; } .nav-toggle { display: block; } .nav-links { position: absolute; top: 100%; right: 0; left: 0; display: none; align-items: stretch; flex-direction: column; gap: 0; padding: 12px 24px 24px; border-top: 1px solid var(--line); background: var(--paper); box-shadow: 0 25px 45px rgba(11, 30, 58, 0.17); } .nav-links.open { display: flex; } .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--line); } .nav-links a::after { display: none; } .hero { min-height: auto; } .hero-grid { min-height: 680px; grid-template-columns: 1fr; padding-top: 90px; padding-bottom: 170px; } .hero-visual { width: 100%; opacity: 0.25; } .hero-visual::before, .arrival-card { display: none; } .hero-visual::after { background: linear-gradient(90deg, var(--navy) 0%, rgba(11, 30, 58, 0.45) 100%); } .hero-copy { max-width: 650px; } .request-panel-head, .section-head, .reviews-header, .offers-head { align-items: flex-start; flex-direction: column; } .request-panel-head, .reviews-header, .offers-head { display: flex; } .section-head { grid-template-columns: 1fr; gap: 18px; } .about-grid, .why-grid, .area-grid, .faq-grid, .contact-grid, .content-grid, .content-grid.reverse, .landmark-grid { grid-template-columns: 1fr; gap: 50px; } .image-stack, .why-visual { min-height: 540px; } .service-row { grid-template-columns: 135px 1fr; } .service-row-media { display: none; } .offer-grid, .review-grid, .detail-card-grid, .price-path, .related-grid { grid-template-columns: 1fr; } .offer-card { min-height: 260px; } .route-grid { grid-template-columns: 1fr 1fr; gap: 35px 20px; } .route-grid::before { display: none; } .compare-grid { grid-template-columns: 1fr; } .gallery-grid { min-height: 720px; grid-template-columns: 1fr 1fr; } .gallery-grid figure:first-child, .gallery-grid figure:last-child { grid-row: auto; } .cta-grid { min-height: auto; grid-template-columns: 1fr; gap: 0; } .cta-photo { min-height: 330px; } .cta-band::before { display: none; } .newsletter-inner { grid-template-columns: 1fr; gap: 22px; } .footer-grid { grid-template-columns: 1.25fr 0.75fr; } .inner-hero-photo { inset: 0; opacity: 0.28; } .inner-hero-photo::before { background: linear-gradient(90deg, var(--navy), rgba(11, 30, 58, 0.45)); } .inner-hero-grid { grid-template-columns: 1fr; } .quick-strip-grid { grid-template-columns: 1fr 1fr; } .state-block { grid-template-columns: 150px 1fr; } .state-block-copy { grid-template-columns: 1fr; } .timeline article { grid-template-columns: 70px 1fr; } .timeline article > span { grid-column: 2; } .case-grid { grid-template-columns: 1fr; } .case-grid figure { min-height: 430px; } .price-path article { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); } } @media (max-width: 580px) { .shell { width: min(100% - 26px, 520px); } body { font-size: 15px; } h1 { font-size: clamp(2.4rem, 10.5vw, 3.4rem); } h2 { font-size: clamp(1.9rem, 8vw, 2.9rem); } .hero-grid { min-height: 670px; padding-top: 78px; } .request-rail { margin-top: -82px; } .inline-form { grid-template-columns: 1fr; } .inline-form .button { grid-column: auto; } .trust-grid { grid-template-columns: 1fr; } .trust-grid article:nth-child(n + 3) { display: none; } .image-stack { min-height: 470px; } .image-stack-main { right: 35px; } .image-stack-small { width: 51%; height: 205px; } .image-stack-note { top: 22px; right: 0; width: 98px; height: 98px; } .promise-grid, .reason-list, .problem-grid, .route-grid, .equipment-grid, .season-grid { grid-template-columns: 1fr; } .service-row { grid-template-columns: 1fr; } .service-row-index { min-height: 115px; flex-direction: row; align-items: center; } .service-row-index span { font-size: 3rem; } .service-row-copy { padding: 28px; } .service-more, .brand-rail-inner { align-items: flex-start; flex-direction: column; } .brand-rail div { width: 100%; flex-wrap: wrap; justify-content: flex-start; } .why-visual { height: 520px; min-height: 0; } .why-score { right: -7px; } .route-grid article { padding: 0 0 0 69px; text-align: left; } .route-grid article > b { top: 0; left: 0; } .gallery-grid { min-height: auto; grid-template-columns: 1fr; } .gallery-grid figure { height: 270px; } .map-card, .map-card img { min-height: 430px; height: 430px; } .contact-form { grid-template-columns: 1fr; padding: 25px; } .contact-form .wide { grid-column: auto; } .newsletter form { flex-direction: column; gap: 8px; } .footer-grid { grid-template-columns: 1fr; gap: 33px; } .footer-bottom { align-items: flex-start; flex-direction: column; } .sticky-call { display: flex; } .inner-hero, .inner-hero-grid { min-height: 560px; } .inner-hero h1 { font-size: clamp(2.4rem, 10.5vw, 3.6rem); } .quick-strip-grid { grid-template-columns: 1fr; } .quick-strip article { min-height: 72px; border-bottom: 1px solid rgba(255, 255, 255, 0.22); } .stat-row { grid-template-columns: 1fr; } .content-media, .content-media > img { min-height: 420px; height: 420px; } .content-media-note { right: -8px; } .state-block { grid-template-columns: 1fr; } .state-block-label { min-height: 112px; flex-direction: row; align-items: center; } .timeline article { grid-template-columns: 54px 1fr; gap: 14px; } .zip-wall a, .zip-wall span { flex: 1 0 72px; text-align: center; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ============================================================================ RankLocal integration additions (not in the raw concept) - scroll-reveal (replaces the concept's external sal.js/sal.css) - lead-capture honeypot + Turnstile spacing - proper SVG social icons in the footer .socials row ============================================================================ */ /* Scroll reveal — main.js adds `.sal-animate` when an element enters view; disabled for reduced-motion users, and shown outright when JS is off (see the