@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Montserrat:wght@700;800;900&family=Open+Sans:wght@400;600;700;800&family=Poppins:wght@700;800;900&family=Space+Grotesk:wght@600;700;800&display=swap');

:root {
    --blue: #24352f;
    --blue-2: #607466;
    --teal: #356854;
    --gold: #b9863b;
    --ink: #171717;
    --muted: #62615c;
    --line: #e1ded7;
    --soft: #f7f5f0;
    --soft-2: #efebe2;
    --cream: #fbf7ed;
    --white: #ffffff;
    --shadow: 0 18px 45px rgba(51, 43, 28, 0.14);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    color: var(--ink);
    background: #f7f5f0;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 9px 20px;
    color: var(--white);
    background: #171717;
    font-size: 14px;
    font-weight: 700;
}

.top-social {
    display: inline-flex;
    gap: 8px;
}

.top-social a {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 50%;
    color: var(--white);
    background: rgba(255,255,255,0.08);
}

.top-social svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.nav {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px clamp(18px, 5vw, 72px);
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand img {
    width: 68px;
    height: 68px;
    object-fit: contain;
}

.brand strong {
    display: block;
    color: var(--blue);
    font-family: 'Space Grotesk', Inter, Arial, sans-serif;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.1;
    text-transform: uppercase;
}

.brand small {
    color: var(--muted);
    font-size: 13px;
    letter-spacing: 0;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--ink);
    font-weight: 700;
}

.nav-cta {
    padding: 10px 15px;
    border-radius: 4px;
    color: var(--white);
    background: linear-gradient(135deg, #1f513f, var(--gold));
    box-shadow: 0 10px 22px rgba(99, 73, 28, 0.22);
}

.nav-links .nav-cta:hover {
    color: var(--white);
    background: #1f513f;
}

.nav-links a:hover {
    color: var(--gold);
}

.menu-toggle {
    display: none;
    border: 1px solid var(--blue);
    color: var(--blue);
    background: linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
    padding: 9px 14px;
    font-weight: 700;
}

.hero,
.city-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    padding: clamp(48px, 7vw, 96px) clamp(18px, 5vw, 72px);
    background:
        radial-gradient(circle at 82% 18%, rgba(245, 185, 66, 0.2), transparent 28%),
        radial-gradient(circle at 16% 8%, rgba(0, 169, 157, 0.12), transparent 24%),
        linear-gradient(112deg, #ffffff 0%, #fffdf8 58%, #f3ead5 100%);
}

.premium-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 76% 24%, rgba(245, 185, 66, 0.22), transparent 22%),
        linear-gradient(120deg, rgba(27, 26, 23, 0.94), rgba(31, 81, 63, 0.88), rgba(111, 90, 45, 0.76)),
        url('../images/project-roof-web.jpg') center / cover;
    color: var(--white);
}

.premium-hero::after {
    content: "";
    position: absolute;
    inset: auto -12% -38% 44%;
    height: 420px;
    background: rgba(245, 185, 66, 0.2);
    filter: blur(90px);
    pointer-events: none;
}

.premium-hero .hero-copy {
    position: relative;
    z-index: 1;
}

.hero.premium-hero h1 {
    color: var(--white);
    text-transform: none;
    font-size: clamp(42px, 6.8vw, 86px);
}

.hero.premium-hero p {
    color: #dcecff;
}

.premium-hero .hero-stats span {
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.10);
    color: #dcecff;
    backdrop-filter: blur(12px);
}

.premium-hero .hero-stats strong {
    color: var(--white);
}

.hero-showcase {
    position: relative;
    z-index: 1;
    min-height: 560px;
}

.hero-showcase img {
    position: absolute;
    object-fit: cover;
    border: 8px solid rgba(255,255,255,0.9);
    border-radius: 8px;
    box-shadow: 0 26px 70px rgba(0,0,0,0.28);
}

.showcase-main {
    right: 0;
    top: 82px;
    width: 78%;
    aspect-ratio: 4 / 3;
}

.showcase-small {
    width: 44%;
    aspect-ratio: 4 / 3;
}

.showcase-small.top {
    top: 0;
    left: 0;
}

.showcase-small.bottom {
    right: 8%;
    bottom: 0;
}

.showcase-badge {
    position: absolute;
    left: 7%;
    bottom: 72px;
    max-width: 240px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 8px;
    color: var(--white);
    background: linear-gradient(135deg, rgba(31,81,63,0.94), rgba(201,154,59,0.88));
    box-shadow: 0 18px 40px rgba(0,0,0,0.22);
}

.showcase-badge strong {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    line-height: 1.1;
}

.showcase-badge span {
    color: #eaffff;
    font-size: 14px;
}

.hero h1,
.city-hero h1 {
    margin: 0 0 18px;
    color: var(--blue);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(38px, 6.4vw, 78px);
    line-height: 1.03;
    text-transform: uppercase;
}

.hero p,
.city-hero p {
    max-width: 680px;
    color: var(--muted);
    font-size: clamp(16px, 1.5vw, 19px);
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--teal);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.hero-photo,
.city-hero img {
    overflow: hidden;
    border: 8px solid var(--white);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.hero-photo img,
.city-hero img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 680px;
    margin-top: 28px;
}

.hero-stats span {
    min-height: 76px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,0.72);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.hero-stats strong {
    display: block;
    color: var(--blue);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    line-height: 1.1;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.btn,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    border: 0;
    border-radius: 4px;
    font-weight: 800;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    cursor: pointer;
}

.btn:hover,
button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(7, 60, 143, 0.18);
}

.btn.primary,
button {
    color: var(--white);
    background: linear-gradient(90deg, #1f513f, var(--gold));
}

.btn.secondary {
    color: var(--blue);
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(245,185,66,0.45);
}

.section {
    padding: clamp(44px, 7vw, 86px) clamp(18px, 5vw, 72px);
}

.page-hero {
    padding: clamp(50px, 7vw, 92px) clamp(18px, 5vw, 72px);
    background:
        radial-gradient(circle at 82% 20%, rgba(245, 185, 66, 0.2), transparent 26%),
        radial-gradient(circle at 18% 12%, rgba(0, 169, 157, 0.13), transparent 22%),
        linear-gradient(112deg, #ffffff 0%, #fffdf8 62%, #f3ead5 100%);
}

.page-hero h1 {
    max-width: 940px;
    margin: 0 0 18px;
    color: var(--blue);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(36px, 6vw, 68px);
    line-height: 1.05;
}

.page-hero p:not(.eyebrow) {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: clamp(16px, 1.6vw, 19px);
}

.intro {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 32px;
    align-items: start;
}

.split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.75fr);
    gap: clamp(24px, 5vw, 58px);
    align-items: start;
}

.split p {
    color: var(--muted);
    font-size: 17px;
}

.info-panel {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
    box-shadow: var(--shadow);
}

.info-panel h2,
.info-panel h3 {
    margin: 0 0 14px;
    color: var(--blue);
    font-family: 'Playfair Display', Georgia, serif;
}

.info-panel ul {
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
}

.section h2,
.intro h2 {
    margin: 0;
    color: var(--ink);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.12;
}

.section-heading {
    max-width: 780px;
    margin-bottom: 28px;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.service-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-card {
    position: relative;
    min-height: 230px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
    box-shadow: 0 12px 32px rgba(8, 36, 83, 0.06);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.service-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 167, 165, 0.36);
    box-shadow: var(--shadow);
}

.service-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 16px;
    border-radius: 50%;
    color: var(--white);
    background: linear-gradient(135deg, #1f513f, var(--gold));
    font-size: 24px;
    line-height: 1;
}

.service-card h3 {
    margin: 0 0 10px;
    color: var(--blue);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 20px;
    line-height: 1.25;
}

.service-card p {
    margin: 0;
    color: var(--muted);
}

.service-card a {
    display: inline-flex;
    margin-top: 18px;
    color: #0b8f86;
    font-weight: 800;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.category-grid.large {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.category-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
    box-shadow: 0 14px 38px rgba(8, 36, 83, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 58px rgba(8, 36, 83, 0.15);
}

.category-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.category-card div {
    padding: 22px;
}

.category-card span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.category-card h2,
.category-card h3 {
    margin: 8px 0 10px;
    color: var(--blue);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    line-height: 1.12;
}

.category-card p {
    color: var(--muted);
}

.category-card a {
    display: inline-flex;
    margin-top: 12px;
    color: var(--teal);
    font-weight: 900;
}

.category-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    padding: clamp(50px, 7vw, 96px) clamp(18px, 5vw, 72px);
    color: var(--white);
    background:
        radial-gradient(circle at 78% 24%, rgba(245, 185, 66, 0.22), transparent 24%),
        linear-gradient(120deg, rgba(27, 26, 23, 0.94), rgba(31, 81, 63, 0.84), rgba(111, 90, 45, 0.76)),
        url('../images/project-parking-web.jpg') center / cover;
}

.category-hero h1 {
    margin: 0 0 18px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(42px, 6vw, 78px);
    line-height: 1.04;
}

.category-hero p {
    max-width: 720px;
    color: #dcecff;
    font-size: 18px;
}

.category-hero img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 8px solid rgba(255,255,255,0.9);
    border-radius: 8px;
    box-shadow: 0 26px 70px rgba(0,0,0,0.26);
}

.product-keywords {
    padding-top: 0;
}

.keyword-section {
    padding: 38px 0;
    border-top: 1px solid var(--line);
}

.keyword-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.keyword-card {
    min-height: 150px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
    box-shadow: 0 10px 24px rgba(8, 36, 83, 0.05);
}

.keyword-card h2,
.keyword-card h3 {
    margin: 0 0 10px;
    color: var(--blue);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 20px;
    line-height: 1.18;
}

.keyword-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.keyword-card a {
    display: inline-flex;
    margin-top: 14px;
    color: var(--teal);
    font-weight: 900;
}

.blue-band {
    color: var(--white);
    background:
        radial-gradient(circle at 84% 20%, rgba(245, 185, 66, 0.24), transparent 22%),
        linear-gradient(135deg, #181713, var(--blue) 58%, #6f5a2d);
}

.process {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.process div {
    padding: 22px;
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 8px;
    background: rgba(255,255,255,0.07);
}

.process span {
    color: #bfe0ff;
    font-weight: 900;
    font-size: 28px;
}

.process h3,
.process p,
.city-copy h2,
.city-copy p {
    margin-top: 8px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.gallery figure {
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    background: var(--soft);
    box-shadow: 0 12px 28px rgba(8, 36, 83, 0.06);
}

.gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.gallery figcaption {
    padding: 12px 14px;
    color: var(--blue);
    font-weight: 800;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.project-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    box-shadow: 0 12px 32px rgba(8, 36, 83, 0.07);
}

.project-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.project-card div {
    padding: 22px;
}

.project-card span {
    color: var(--teal);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
}

.project-card h2 {
    margin: 8px 0 10px;
    color: var(--blue);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    line-height: 1.16;
}

.project-card p {
    color: var(--muted);
}

.project-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.86fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    padding: clamp(48px, 7vw, 96px) clamp(18px, 5vw, 72px);
    background:
        radial-gradient(circle at 82% 16%, rgba(245, 185, 66, 0.2), transparent 24%),
        linear-gradient(112deg, #ffffff 0%, #fffdf8 62%, #f3ead5 100%);
}

.project-hero h1 {
    margin: 0 0 18px;
    color: var(--blue);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(38px, 6vw, 72px);
    line-height: 1.04;
}

.project-hero p {
    max-width: 680px;
    color: var(--muted);
    font-size: 18px;
}

.project-hero img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 8px solid var(--white);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.testimonial-card {
    min-height: 220px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
    box-shadow: 0 12px 32px rgba(8, 36, 83, 0.06);
}

.testimonial-card p {
    margin-top: 0;
    color: var(--muted);
}

.testimonial-card h2 {
    margin: 18px 0 2px;
    color: var(--blue);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 21px;
}

.testimonial-card span {
    color: var(--teal);
    font-weight: 800;
}

.content-page {
    max-width: 920px;
}

.content-page h2 {
    margin-top: 28px;
    color: var(--blue);
    font-size: 30px;
}

.content-page p {
    color: var(--muted);
    font-size: 17px;
}

.city-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.city-grid a {
    min-height: 54px;
    padding: 14px 15px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: linear-gradient(180deg, #ffffff 0%, var(--soft-2) 100%);
    color: var(--blue);
    font-weight: 800;
}

.city-grid a:hover {
    color: var(--white);
    background: linear-gradient(135deg, #1f513f, var(--gold));
}

.city-copy {
    max-width: 920px;
}

.city-copy ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 28px;
    padding-left: 20px;
}

.footer {
    display: grid;
    grid-template-columns: 1.1fr 0.7fr 0.8fr 1.2fr 0.8fr;
    gap: 26px;
    padding: clamp(38px, 6vw, 72px) clamp(18px, 5vw, 72px);
    color: var(--white);
    background:
        radial-gradient(circle at 86% 18%, rgba(245, 185, 66, 0.16), transparent 22%),
        linear-gradient(135deg, #061225, #092b58 56%, #064f58);
}

.footer-brand p {
    color: #cfe0f3;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    padding: 10px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 12px 32px rgba(0,0,0,0.2), 0 0 0 4px rgba(245,185,66,0.22);
}

.footer-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer h2 {
    margin: 16px 0 6px;
    font-family: 'Playfair Display', Georgia, serif;
    line-height: 1.1;
}

.footer h3 {
    margin: 0 0 14px;
    color: var(--white);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 20px;
}

.social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.social-icons a {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    color: var(--white);
    background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(245,185,66,0.18));
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.social-icons a:hover {
    transform: translateY(-2px);
    color: #181713;
    background: var(--gold);
}

.social-icons svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.social-icons.compact {
    margin-top: 8px;
}

.footer-links {
    display: grid;
    align-content: start;
    gap: 10px;
}

.footer-links a,
.footer-contact a {
    color: #bfe0ff;
    font-weight: 800;
}

.footer-links a:hover,
.footer-contact a:hover {
    color: var(--white);
}

.contact-form {
    display: grid;
    gap: 12px;
}

.contact-form label {
    display: grid;
    gap: 6px;
    color: #d7e6f8;
    font-weight: 700;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    color: var(--white);
    background: rgba(255,255,255,0.08);
    font: inherit;
}

.footer-form {
    padding: 18px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
}

.contact-form.light {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    box-shadow: var(--shadow);
}

.contact-form.light label {
    color: var(--ink);
}

.contact-form.light input,
.contact-form.light textarea {
    color: var(--ink);
    background: var(--soft);
    border-color: var(--line);
}

.form-alert {
    margin: 0;
    padding: 11px 12px;
    border-radius: 4px;
    font-weight: 800;
}

.form-alert.success {
    color: #064e3b;
    background: #d1fae5;
}

.form-alert.error {
    color: #7f1d1d;
    background: #fee2e2;
}

.footer-contact {
    display: grid;
    align-content: start;
    gap: 12px;
}

.not-found {
    min-height: 48vh;
}

@media (max-width: 980px) {
    .hero,
    .city-hero,
    .project-hero,
    .intro,
    .split,
    .footer {
        grid-template-columns: 1fr;
    }

    .service-grid,
    .process,
    .gallery,
    .project-grid,
    .testimonial-grid,
    .category-grid,
    .city-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .keyword-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .topbar {
        display: none;
    }

    .brand img {
        width: 52px;
        height: 52px;
    }

    .brand span {
        max-width: 190px;
    }

    .brand strong {
        font-size: 16px;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 16px 18px;
        background: var(--white);
        border-bottom: 1px solid var(--line);
    }

    .nav-links.open {
        display: flex;
    }

    .hero,
    .city-hero,
    .category-hero {
        grid-template-columns: 1fr;
        padding-top: 34px;
    }

    .hero h1,
    .city-hero h1 {
        font-size: clamp(34px, 12vw, 48px);
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-stats {
        grid-template-columns: 1fr;
    }

    .service-grid,
    .service-grid.compact,
    .process,
    .gallery,
    .project-grid,
    .testimonial-grid,
    .category-grid,
    .category-grid.large,
    .keyword-grid,
    .city-grid,
    .city-copy ul {
        grid-template-columns: 1fr;
    }

    .hero-showcase {
        min-height: 430px;
    }

    .showcase-main {
        width: 86%;
        top: 78px;
    }

    .showcase-small {
        width: 48%;
    }

    .showcase-badge {
        left: 0;
        bottom: 20px;
    }

    .service-card {
        min-height: auto;
    }
}

/* Skyshade-inspired homepage */
.sky-hero {
    min-height: 640px;
    display: grid;
    align-items: center;
    padding: clamp(80px, 10vw, 150px) clamp(18px, 5vw, 72px);
    color: var(--white);
    background:
        linear-gradient(90deg, rgba(4, 25, 65, 0.9), rgba(5, 54, 126, 0.62), rgba(9, 130, 216, 0.2)),
        url('../images/project-roof-web.jpg') center / cover;
}

.sky-hero div {
    max-width: 880px;
}

.sky-hero h1 {
    margin: 0 0 22px;
    font-family: 'Space Grotesk', Inter, Arial, sans-serif;
    font-size: clamp(44px, 7vw, 96px);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.sky-hero p:not(.eyebrow) {
    max-width: 760px;
    color: rgba(255,255,255,0.88);
    font-size: clamp(17px, 1.6vw, 21px);
}

.sky-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.78fr);
    gap: clamp(28px, 6vw, 82px);
    align-items: center;
    background: var(--white);
}

.sky-intro h2,
.sky-feature h2 {
    margin: 0 0 20px;
    color: var(--ink);
    font-family: 'Space Grotesk', Inter, Arial, sans-serif;
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.sky-intro p,
.sky-feature p {
    color: var(--muted);
    font-size: 17px;
}

.sky-intro img,
.sky-feature img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    box-shadow: var(--shadow);
}

.impact-band {
    padding: clamp(42px, 6vw, 72px) clamp(18px, 5vw, 72px);
    color: var(--white);
    background: linear-gradient(135deg, #052766, #074ba5, #0b95df);
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.impact-grid div {
    padding: 22px;
    border: 1px solid rgba(255,255,255,0.24);
    background: rgba(255,255,255,0.08);
}

.impact-grid strong {
    display: block;
    font-family: 'Space Grotesk', Inter, Arial, sans-serif;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1;
}

.impact-grid span {
    color: rgba(255,255,255,0.82);
    font-weight: 700;
}

.visual-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    background: #052766;
}

.visual-strip article {
    position: relative;
    min-height: 360px;
    overflow: hidden;
}

.visual-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.96) contrast(1.04);
    transition: transform 0.35s ease;
}

.visual-strip article:hover img {
    transform: scale(1.06);
}

.visual-strip article::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 39, 102, 0.08), rgba(5, 39, 102, 0.78));
}

.visual-strip div {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 1;
    color: var(--white);
}

.visual-strip span {
    color: #8ed8ff;
    font-weight: 900;
}

.visual-strip h2 {
    margin: 8px 0 0;
    font-family: 'Space Grotesk', Inter, Arial, sans-serif;
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1.05;
}

.application-section {
    background: #f7fbff;
}

.application-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.application-card {
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: 0 12px 34px rgba(7, 59, 142, 0.06);
}

.application-card:first-child {
    grid-column: span 2;
}

.application-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.application-card div {
    padding: 22px;
}

.application-card h3 {
    margin: 0 0 10px;
    color: var(--ink);
    font-family: 'Space Grotesk', Inter, Arial, sans-serif;
    font-size: 24px;
    line-height: 1.14;
}

.application-card p {
    color: var(--muted);
}

.application-card a {
    color: var(--blue-2);
    font-weight: 900;
}

.sky-feature {
    display: grid;
    grid-template-columns: minmax(320px, 0.78fr) minmax(0, 0.9fr);
    gap: clamp(28px, 6vw, 82px);
    align-items: center;
    background: var(--white);
}

.feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0;
}

.feature-list span {
    padding: 14px 16px;
    border-left: 4px solid var(--blue-2);
    background: var(--soft);
    color: var(--ink);
    font-weight: 800;
}

.benefits-section {
    background: #f7fbff;
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.benefit-grid article {
    min-height: 150px;
    padding: 24px;
    border: 1px solid var(--line);
    background: var(--white);
}

.benefit-grid span {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 18px;
    color: var(--white);
    background: var(--blue-2);
    border-radius: 50%;
    font-size: 22px;
}

.benefit-grid h3 {
    margin: 0;
    color: var(--ink);
    font-family: 'Space Grotesk', Inter, Arial, sans-serif;
    font-size: 24px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.blog-card {
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--white);
}

.blog-card.featured {
    grid-column: span 2;
}

.blog-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.blog-card div {
    padding: 26px;
}

.blog-card span,
.blog-hero .eyebrow {
    color: var(--blue-2);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blog-card h2 {
    margin: 10px 0 12px;
    color: var(--ink);
    font-family: 'Space Grotesk', Inter, Arial, sans-serif;
    font-size: clamp(26px, 3vw, 44px);
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.blog-card:not(.featured) h2 {
    font-size: 26px;
}

.blog-card p {
    color: var(--muted);
}

.blog-card a:not(.btn) {
    color: var(--blue-2);
    font-weight: 900;
}

.blog-article {
    background: var(--white);
}

.blog-hero {
    padding: clamp(58px, 8vw, 110px) clamp(18px, 5vw, 72px);
    background: #f7fbff;
}

.blog-hero h1 {
    max-width: 980px;
    margin: 0 0 20px;
    color: var(--ink);
    font-family: 'Space Grotesk', Inter, Arial, sans-serif;
    font-size: clamp(42px, 7vw, 88px);
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.blog-hero p {
    max-width: 780px;
    color: var(--muted);
    font-size: 19px;
}

.blog-hero img {
    width: 100%;
    max-height: 520px;
    margin-top: 34px;
    object-fit: cover;
}

.blog-article section {
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(34px, 5vw, 62px) 18px;
}

.blog-article h2 {
    margin: 0 0 16px;
    color: var(--ink);
    font-family: 'Space Grotesk', Inter, Arial, sans-serif;
    font-size: clamp(30px, 4vw, 50px);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.blog-article p,
.blog-article li {
    color: var(--muted);
    font-size: 18px;
}

.comparison-table {
    border: 1px solid var(--line);
}

.comparison-table div {
    display: grid;
    grid-template-columns: 0.8fr 1fr 1fr;
    border-bottom: 1px solid var(--line);
}

.comparison-table div:last-child {
    border-bottom: 0;
}

.comparison-table strong,
.comparison-table span {
    padding: 16px;
    border-right: 1px solid var(--line);
}

.comparison-table strong:last-child,
.comparison-table span:last-child {
    border-right: 0;
}

.comparison-table div:first-child {
    color: var(--white);
    background: var(--blue);
}

@media (max-width: 980px) {
    .sky-intro,
    .sky-feature {
        grid-template-columns: 1fr;
    }

    .application-grid,
    .impact-grid,
    .benefit-grid,
    .visual-strip,
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-card.featured {
        grid-column: span 2;
    }

    .application-card:first-child {
        grid-column: span 1;
    }
}

@media (max-width: 700px) {
    .sky-hero {
        min-height: 620px;
        padding-top: 70px;
    }

    .application-grid,
    .impact-grid,
    .benefit-grid,
    .feature-list,
    .visual-strip,
    .blog-grid,
    .comparison-table div {
        grid-template-columns: 1fr;
    }

    .blog-card.featured {
        grid-column: span 1;
    }

    .comparison-table strong,
    .comparison-table span {
        border-right: 0;
    }

    .visual-strip article {
        min-height: 280px;
    }
}

/* Premium reference-inspired visual system */
:root {
    --blue: #073b8e;
    --blue-2: #0982d8;
    --teal: #13a8e6;
    --gold: #0b58bd;
    --ink: #0c1830;
    --muted: #5f6e82;
    --line: #dbe8f5;
    --soft: #f5f9fd;
    --soft-2: #edf6ff;
    --white: #ffffff;
    --shadow: 0 24px 70px rgba(7, 59, 142, 0.12);
}

body {
    background: #f7fbff;
    color: var(--ink);
}

.topbar {
    justify-content: flex-end;
    padding: 8px clamp(18px, 5vw, 72px);
    background: linear-gradient(90deg, #052766, #074ba5, #0b95df);
    color: rgba(255,255,255,0.88);
    font-size: 13px;
}

.topbar > span:first-child {
    margin-right: auto;
    color: #d9efff;
}

.nav {
    padding: 14px clamp(18px, 5vw, 72px);
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--line);
}

.brand img {
    width: 62px;
    height: 62px;
}

.brand strong {
    color: var(--ink);
    font-family: 'Space Grotesk', Inter, Arial, sans-serif;
    font-size: clamp(17px, 1.8vw, 23px);
    letter-spacing: 0;
}

.brand small,
.nav-links {
    color: var(--muted);
}

.nav-links a {
    position: relative;
}

.nav-links a:not(.nav-cta)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--gold);
    transition: transform 0.2s ease;
}

.nav-links a:hover {
    color: var(--ink);
}

.nav-links a:hover::after {
    transform: scaleX(1);
}

.nav-cta {
    border-radius: 999px;
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    color: var(--white);
    box-shadow: none;
}

.nav-links .nav-cta:hover {
    background: #052766;
    color: var(--white);
}

.hero.premium-hero {
    display: grid;
    grid-template-columns: minmax(0, 980px);
    min-height: 760px;
    align-items: end;
    padding: clamp(92px, 12vw, 168px) clamp(18px, 5vw, 72px);
    background:
        linear-gradient(90deg, rgba(5, 30, 76, 0.9) 0%, rgba(5, 57, 128, 0.68) 48%, rgba(5, 91, 170, 0.16) 100%),
        url('../images/project-roof-web.jpg') center / cover;
}

.premium-hero::after {
    display: none;
}

.premium-hero .hero-copy {
    max-width: 900px;
}

.hero.premium-hero .eyebrow,
.page-hero .eyebrow,
.section-heading .eyebrow {
    color: var(--blue-2);
    font-size: 13px;
    letter-spacing: 0.08em;
}

.hero.premium-hero h1 {
    max-width: 900px;
    margin-bottom: 24px;
    color: var(--white);
    font-family: 'Space Grotesk', Inter, Arial, sans-serif;
    font-size: clamp(48px, 8vw, 116px);
    line-height: 0.92;
    letter-spacing: -0.04em;
}

.hero.premium-hero p:not(.eyebrow) {
    max-width: 690px;
    color: rgba(255,255,255,0.84);
    font-size: clamp(17px, 1.7vw, 22px);
    line-height: 1.55;
}

.hero-actions {
    gap: 14px;
    margin-top: 34px;
}

.btn,
button {
    border-radius: 999px;
    min-height: 52px;
    padding: 13px 24px;
}

.btn.primary,
button {
    color: var(--white);
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
}

.btn.secondary {
    color: var(--white);
    border-color: rgba(255,255,255,0.32);
    background: rgba(255,255,255,0.08);
}

.section {
    padding: clamp(58px, 8vw, 110px) clamp(18px, 5vw, 72px);
}

.section-heading {
    max-width: 900px;
    margin-bottom: 36px;
}

.section h2,
.intro h2,
.page-hero h1,
.project-hero h1,
.category-hero h1 {
    color: var(--ink);
    font-family: 'Space Grotesk', Inter, Arial, sans-serif;
    letter-spacing: -0.04em;
}

.page-hero {
    background:
        radial-gradient(circle at 82% 20%, rgba(19, 168, 230, 0.12), transparent 26%),
        linear-gradient(112deg, #ffffff 0%, #f7fbff 62%, #edf6ff 100%);
    border-bottom: 1px solid var(--line);
}

.category-grid,
.project-grid {
    gap: 24px;
}

.category-card,
.project-card,
.service-card,
.testimonial-card,
.keyword-card,
.info-panel {
    border-color: var(--line);
    border-radius: 0;
    background: var(--white);
    box-shadow: none;
}

.category-card:hover,
.project-card:hover,
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.category-card img,
.project-card img,
.gallery img {
    filter: saturate(0.92) contrast(1.04);
}

.category-card div,
.project-card div {
    padding: 26px;
}

.category-card h2,
.category-card h3,
.project-card h2,
.service-card h3,
.keyword-card h2,
.keyword-card h3,
.testimonial-card h2 {
    color: var(--ink);
    font-family: 'Space Grotesk', Inter, Arial, sans-serif;
    letter-spacing: -0.03em;
}

.category-card span,
.project-card span,
.service-card a,
.category-card a,
.project-card span,
.keyword-card a,
.testimonial-card span {
    color: var(--blue-2);
}

.city-grid {
    gap: 14px;
}

.city-grid a {
    border-radius: 0;
    background: var(--white);
    color: var(--ink);
    box-shadow: none;
}

.city-grid a:hover {
    color: #161616;
    background: #dff1ff;
}

.blue-band,
.footer {
    background: linear-gradient(135deg, #052766, #073b8e 58%, #075fba);
}

.footer {
    border-top: 6px solid #13a8e6;
}

.footer-logo {
    box-shadow: none;
    border-radius: 0;
}

.social-icons a {
    border-radius: 0;
    background: rgba(255,255,255,0.08);
}

.social-icons a:hover {
    color: var(--white);
    background: var(--blue-2);
}

@media (max-width: 700px) {
    .hero.premium-hero {
        min-height: 680px;
        padding-top: 82px;
    }

    .hero.premium-hero h1 {
        font-size: clamp(44px, 15vw, 66px);
    }

    .btn.secondary {
        color: var(--ink);
        background: var(--white);
    }
}

/* Final reference-inspired rebuild */
.site-header {
    background: var(--white);
}

.topbar {
    background: #061d4a;
}

.nav {
    top: 0;
    background: rgba(255, 255, 255, 0.96);
}

.brand img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: contain;
}

.sky-hero {
    min-height: min(780px, calc(100vh - 104px));
    display: grid;
    align-items: end;
    padding: clamp(100px, 14vw, 180px) clamp(18px, 5vw, 72px) clamp(62px, 8vw, 96px);
    color: var(--white);
    background:
        linear-gradient(90deg, rgba(3, 21, 58, 0.94) 0%, rgba(3, 45, 102, 0.76) 46%, rgba(3, 61, 124, 0.2) 100%),
        url('../images/project-roof-web.jpg') center / cover;
}

.sky-hero > div {
    max-width: 1060px;
}

.sky-hero .eyebrow,
.clients-strip .eyebrow {
    color: #77d8ff;
}

.sky-hero h1 {
    max-width: 1060px;
    margin: 0 0 24px;
    color: var(--white);
    font-family: 'Space Grotesk', Inter, Arial, sans-serif;
    font-size: clamp(48px, 8.2vw, 112px);
    line-height: 0.94;
    letter-spacing: 0;
}

.sky-hero p:not(.eyebrow) {
    max-width: 740px;
    color: rgba(255,255,255,0.88);
    font-size: clamp(17px, 1.6vw, 22px);
}

.sky-about {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.86fr);
    gap: clamp(34px, 6vw, 86px);
    align-items: center;
    background: var(--white);
}

.sky-about-copy {
    max-width: 820px;
}

.sky-about h2,
.clients-heading h2 {
    margin: 0 0 24px;
    color: var(--ink);
    font-family: 'Space Grotesk', Inter, Arial, sans-serif;
    font-size: clamp(38px, 5.6vw, 82px);
    line-height: 0.98;
    letter-spacing: 0;
}

.sky-about p:not(.eyebrow) {
    margin: 0 0 18px;
    color: #4a4f55;
    font-size: clamp(16px, 1.3vw, 19px);
}

.about-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 30px 0;
}

.about-points span {
    padding: 16px 18px;
    border-left: 4px solid #0d8fd8;
    background: #f3f8fd;
    color: #10214a;
    font-weight: 800;
}

.sky-about-media {
    position: relative;
}

.sky-about-media img {
    width: 100%;
    aspect-ratio: 4 / 4.6;
    object-fit: cover;
}

.about-float {
    position: absolute;
    right: clamp(16px, 3vw, 34px);
    bottom: clamp(16px, 3vw, 34px);
    width: min(320px, calc(100% - 32px));
    padding: 24px;
    color: var(--white);
    background: linear-gradient(135deg, #062a65, #0c8ed6);
}

.about-float strong {
    display: block;
    font-family: 'Space Grotesk', Inter, Arial, sans-serif;
    font-size: 34px;
    line-height: 1;
}

.about-float span {
    display: block;
    margin-top: 8px;
    color: rgba(255,255,255,0.86);
}

.clients-strip {
    overflow: hidden;
    padding: clamp(46px, 7vw, 86px) 0;
    color: var(--white);
    background: linear-gradient(135deg, #031a45 0%, #073b8e 58%, #0b8bd5 100%);
}

.clients-heading {
    max-width: 980px;
    padding: 0 clamp(18px, 5vw, 72px);
    margin-bottom: 34px;
}

.clients-heading h2 {
    max-width: 920px;
    color: var(--white);
}

.client-marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.client-track {
    display: flex;
    width: max-content;
    gap: 16px;
    animation: client-scroll 28s linear infinite;
}

.client-track span {
    display: inline-flex;
    align-items: center;
    min-height: 66px;
    padding: 0 30px;
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.92);
    background: rgba(255,255,255,0.08);
    font-family: 'Space Grotesk', Inter, Arial, sans-serif;
    font-size: 20px;
    font-weight: 800;
    white-space: nowrap;
}

@keyframes client-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.visual-strip article,
.application-card,
.benefit-grid article,
.category-card,
.project-card,
.service-card,
.testimonial-card,
.keyword-card,
.info-panel {
    border-radius: 0;
    box-shadow: none;
}

.application-card,
.benefit-grid article {
    border: 1px solid var(--line);
    background: var(--white);
}

.application-card img {
    height: 220px;
}

.page-hero,
.project-hero,
.category-hero,
.blog-hero {
    color: var(--white);
    background:
        linear-gradient(90deg, rgba(3, 21, 58, 0.94), rgba(5, 55, 120, 0.74)),
        url('../images/project-roof-web.jpg') center / cover;
}

.page-hero h1,
.project-hero h1,
.category-hero h1,
.blog-hero h1 {
    color: var(--white);
}

.page-hero p,
.project-hero p,
.category-hero p,
.blog-hero p {
    color: rgba(255,255,255,0.86);
}

.page-hero .eyebrow,
.project-hero .eyebrow,
.category-hero .eyebrow,
.blog-hero .eyebrow {
    color: #77d8ff;
}

@media (max-width: 980px) {
    .sky-about {
        grid-template-columns: 1fr;
    }

    .sky-about-media img {
        aspect-ratio: 16 / 11;
    }
}

@media (max-width: 700px) {
    .sky-hero {
        min-height: 660px;
        padding-top: 90px;
    }

    .sky-hero h1,
    .sky-about h2,
    .clients-heading h2 {
        font-size: clamp(42px, 13vw, 58px);
    }

    .about-points {
        grid-template-columns: 1fr;
    }

    .about-float {
        position: static;
        width: 100%;
    }

    .client-track span {
        min-height: 58px;
        padding: 0 22px;
        font-size: 17px;
    }
}

/* Master platform structure */
.nav-links {
    gap: clamp(10px, 1.15vw, 18px);
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(5, minmax(170px, 1fr));
    gap: 0;
    width: min(1120px, calc(100vw - 36px));
    padding: 24px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.98);
    box-shadow: 0 26px 70px rgba(6, 29, 74, 0.16);
    transform: translate(-50%, 12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.nav-dropdown:hover .mega-menu,
.nav-dropdown:focus-within .mega-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.mega-menu h3 {
    margin: 0 0 10px;
    color: #061d4a;
    font-family: 'Space Grotesk', Inter, Arial, sans-serif;
    font-size: 16px;
}

.mega-menu a {
    display: block;
    padding: 7px 8px;
    color: #475569;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 700;
}

.mega-menu a:hover {
    color: #0b78bf;
    background: #eef8ff;
}

.clean-mega-menu {
    grid-template-columns: repeat(5, minmax(170px, 1fr));
    gap: 12px;
    padding: 18px;
}

.mega-menu .mega-category-link {
    display: block;
    min-height: 86px;
    padding: 18px;
    border: 1px solid #dbe5ee;
    border-radius: 8px;
    color: #061d4a;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

.mega-menu .mega-category-link h3 {
    margin: 0 0 8px;
}

.mega-menu .mega-category-link span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.mega-menu .mega-category-link:hover {
    color: #061d4a;
    border-color: #b9d9ee;
    background: #eef8ff;
}

.sky-hero {
    min-height: min(720px, calc(100vh - 104px));
    align-items: center;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.86) 31%, rgba(255,255,255,0.22) 61%, rgba(255,255,255,0.02) 100%),
        url('../images/illustration-hero-tensile.png') center / cover;
}

.sky-hero .eyebrow {
    color: #0b78bf;
}

.sky-hero h1 {
    max-width: 760px;
    color: #061d4a;
    font-size: clamp(46px, 6.7vw, 92px);
}

.sky-hero p:not(.eyebrow) {
    max-width: 650px;
    color: #334155;
}

.sky-hero .btn.secondary {
    color: #061d4a;
    border-color: rgba(6,29,74,0.18);
    background: rgba(255,255,255,0.8);
}

.visual-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.visual-strip article {
    min-height: 430px;
}

.visual-strip article img {
    filter: saturate(1.02) contrast(1.02);
}

.visual-strip article a {
    display: inline-block;
    margin-top: 10px;
    color: var(--white);
    font-weight: 800;
}

.seo-hero {
    background:
        linear-gradient(112deg, #ffffff 0%, #eef8ff 54%, #dff3ff 100%);
    color: var(--ink);
}

.seo-hero h1,
.seo-hero p {
    color: #061d4a;
}

.seo-hero .eyebrow {
    color: #0b78bf;
}

.seo-hero .btn.secondary {
    color: #061d4a;
    border-color: rgba(6,29,74,0.18);
    background: rgba(255,255,255,0.74);
}

.seo-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.34fr);
    gap: 28px;
    align-items: start;
}

.seo-main {
    max-width: 980px;
}

.seo-main h2 {
    margin-top: 0;
    font-size: clamp(32px, 4vw, 58px);
}

.seo-side {
    position: sticky;
    top: 120px;
}

.seo-side a {
    display: block;
    margin-top: 12px;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.faq-grid article {
    padding: 24px;
    border: 1px solid var(--line);
    background: var(--white);
}

.gallery-strip {
    padding-top: 0;
}

.service-image-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.service-image-row img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--white);
    box-shadow: 0 14px 30px rgba(7,31,69,0.08);
}

.real-project-card {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(0, 0.75fr);
    gap: clamp(22px, 4vw, 54px);
    align-items: center;
    padding: clamp(18px, 3vw, 34px);
    border: 1px solid var(--line);
    background: var(--white);
    box-shadow: 0 18px 44px rgba(7,31,69,0.1);
}

.real-project-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.real-project-card h3 {
    margin: 0 0 12px;
    color: #071f45;
    font-family: 'Montserrat', 'Poppins', Inter, Arial, sans-serif;
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.08;
}

.real-project-card p {
    color: #475569;
    font-size: 17px;
}

.product-visual-hero {
    position: relative;
    min-height: clamp(380px, 38vw, 620px);
    overflow: hidden;
    display: grid;
    place-items: start center;
    background: #c7f0ff;
}

.product-visual-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-visual-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 26%;
    background: linear-gradient(180deg, transparent, rgba(232, 243, 250, 0.92));
}

.product-title-band {
    display: grid;
    justify-items: center;
    padding: 38px 18px 24px;
    text-align: center;
    background: #eaf5fb;
}

.product-title-band span {
    color: #0b78bf;
    font-family: 'Montserrat', 'Poppins', Inter, Arial, sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.product-title-band h1 {
    max-width: 980px;
    margin: 10px 0 0;
    color: #071f45;
    font-family: 'Montserrat', 'Poppins', Inter, Arial, sans-serif;
    font-size: clamp(34px, 5vw, 76px);
    line-height: 1;
}

.product-detail-intro {
    grid-template-columns: minmax(0, 0.78fr) minmax(340px, 0.62fr);
    align-items: center;
    background: #eaf5fb;
}

.product-detail-intro .seo-main {
    max-width: 690px;
    justify-self: end;
}

.product-detail-intro .seo-main h2 {
    font-size: clamp(30px, 3.3vw, 48px);
}

.product-real-card {
    display: grid;
    gap: 16px;
}

.product-real-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(7,31,69,0.18);
}

.product-real-card h3 {
    margin: 0;
    color: #071f45;
    font-family: 'Montserrat', 'Poppins', Inter, Arial, sans-serif;
    font-size: 24px;
}

.product-real-card p {
    margin: 4px 0 0;
    color: #475569;
}

.footer {
    grid-template-columns: minmax(220px, 1.1fr) repeat(4, minmax(150px, 0.72fr)) minmax(260px, 1.1fr) minmax(170px, 0.8fr);
}

@media (max-width: 1180px) {
    .nav-links {
        gap: 9px;
        font-size: 14px;
    }

    .mega-menu {
        grid-template-columns: repeat(3, minmax(170px, 1fr));
    }

    .solution-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .mega-menu {
        position: static;
        display: none;
        width: 100%;
        padding: 14px;
        transform: none;
        opacity: 1;
        box-shadow: none;
    }

    .nav-links.open .nav-dropdown .mega-menu {
        display: grid;
        grid-template-columns: 1fr;
    }

    .clean-mega-menu {
        gap: 8px;
    }

    .mega-menu .mega-category-link {
        min-height: auto;
        padding: 12px;
    }

    .visual-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-image-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .real-project-card {
        grid-template-columns: 1fr;
    }

    .product-detail-intro {
        grid-template-columns: 1fr;
    }

    .product-detail-intro .seo-main {
        justify-self: stretch;
        max-width: none;
    }

    .seo-content,
    .faq-grid {
        grid-template-columns: 1fr;
    }

    .seo-side {
        position: static;
    }
}

@media (max-width: 700px) {
    .sky-hero {
        min-height: 680px;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.82) 47%, rgba(255,255,255,0.34) 100%),
            url('../images/illustration-hero-tensile.png') center bottom / cover;
    }

    .visual-strip {
        grid-template-columns: 1fr;
    }

    .service-image-row {
        grid-template-columns: 1fr;
    }

    .product-visual-hero {
        min-height: 420px;
    }

    .product-title-band h1 {
        font-size: clamp(30px, 9vw, 46px);
    }

    .visual-strip article {
        min-height: 360px;
    }
}

/* Corporate engineering style guide */
:root {
    --blue: #071f45;
    --blue-2: #0c4f8f;
    --teal: #2f6b83;
    --gold: #f58220;
    --ink: #101827;
    --muted: #5f6b7a;
    --line: #d9dee7;
    --soft: #f3f6fa;
    --soft-2: #e9eef5;
    --cream: #f7f9fc;
    --white: #ffffff;
    --shadow: 0 22px 55px rgba(7, 31, 69, 0.14);
}

body {
    background: #f4f7fb;
    font-family: 'Inter', 'Open Sans', Arial, sans-serif;
}

.topbar {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: #071f45;
}

.top-quote {
    padding: 7px 13px;
    color: #071f45;
    background: var(--gold);
}

.nav {
    padding-block: 9px;
}

.brand strong,
.section h2,
.sky-hero h1,
.sky-about h2,
.clients-heading h2,
.page-hero h1,
.project-hero h1,
.category-hero h1,
.blog-hero h1 {
    font-family: 'Montserrat', 'Poppins', 'Space Grotesk', Inter, Arial, sans-serif;
}

.nav-links {
    gap: clamp(8px, 0.9vw, 14px);
    font-size: 14px;
}

.nav-cta,
.btn.primary,
button {
    background: linear-gradient(135deg, #f58220, #ff9b3d);
    color: #071f45;
}

.nav-cta:hover,
.btn.primary:hover,
button:hover {
    background: #071f45;
    color: var(--white);
}

.sky-hero {
    border-bottom: 8px solid var(--gold);
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.hero-badges span {
    padding: 11px 15px;
    border: 1px solid rgba(7,31,69,0.14);
    color: #071f45;
    background: rgba(255,255,255,0.82);
    font-weight: 900;
}

.industry-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.industry-grid a {
    display: flex;
    align-items: center;
    min-height: 82px;
    padding: 18px;
    border-left: 5px solid var(--gold);
    color: #071f45;
    background: var(--white);
    font-family: 'Montserrat', 'Poppins', Inter, Arial, sans-serif;
    font-weight: 900;
    box-shadow: 0 12px 28px rgba(7,31,69,0.08);
}

.home-lead {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.72fr);
    gap: clamp(24px, 5vw, 72px);
    align-items: start;
    color: var(--white);
    background:
        linear-gradient(135deg, rgba(7,31,69,0.96), rgba(12,79,143,0.9)),
        url('../images/optimized/illustration-fabrication-services.jpg') center / cover;
}

.home-lead h2 {
    color: var(--white);
    font-size: clamp(36px, 5vw, 72px);
}

.home-lead p {
    color: rgba(255,255,255,0.84);
    font-size: 18px;
}

.home-lead .eyebrow {
    color: #ffbd80;
}

.floating-actions {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 60;
    display: grid;
    gap: 10px;
}

.floating-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 116px;
    min-height: 46px;
    padding: 11px 16px;
    color: var(--white);
    font-weight: 900;
    box-shadow: 0 16px 34px rgba(7,31,69,0.22);
}

.float-call {
    background: #071f45;
}

.float-whatsapp {
    background: #22c55e;
}

.footer {
    background: linear-gradient(135deg, #061733, #071f45 58%, #0c4f8f);
    border-top-color: var(--gold);
}

.footer-logo {
    width: 86px;
    height: 86px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
}

.footer-logo img {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    object-fit: cover;
    background: transparent;
}

.footer h2 {
    margin-top: 14px;
    max-width: 280px;
    font-family: 'Montserrat', 'Poppins', Inter, Arial, sans-serif;
    font-size: 25px;
    line-height: 1.1;
}

.blue-band,
.blue-band h1,
.blue-band h2,
.blue-band h3,
.blue-band p,
.blue-band li,
.blue-band .eyebrow,
.city-copy h2,
.city-copy p,
.city-copy li {
    color: #ffffff !important;
}

.blue-band li::marker,
.city-copy li::marker {
    color: #ffffff !important;
}

.office-section {
    background: #ffffff;
}

.office-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.office-card {
    padding: 22px;
    border: 1px solid var(--line);
    background: #f8fbff;
}

.office-card h3 {
    margin: 0 0 10px;
    color: #071f45;
    font-family: 'Montserrat', 'Poppins', Inter, Arial, sans-serif;
    font-size: 19px;
}

.office-card p {
    margin: 0 0 14px;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.55;
}

.office-card a,
.footer-addresses a {
    color: #0c4f8f;
    font-weight: 800;
}

.map-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.map-grid iframe {
    width: 100%;
    min-height: 320px;
    border: 0;
    background: #e9eef5;
}

.coming-soon-box {
    margin-top: 20px;
    padding: 20px 22px;
    border-left: 5px solid var(--gold);
    background: #f3f6fa;
}

.coming-soon-box h3 {
    margin: 0 0 6px;
    color: #071f45;
}

.coming-soon-box p {
    margin: 0;
    color: #4b5563;
    font-weight: 700;
}

.footer-addresses {
    display: grid;
    gap: 9px;
    margin: 14px 0 16px;
}

.footer-addresses a,
.footer-addresses p {
    margin: 0;
    color: rgba(255,255,255,0.82);
    font-size: 13px;
    line-height: 1.45;
}

.footer-addresses a:hover {
    color: #ffffff;
}

.footer {
    grid-template-columns: minmax(240px, 1.15fr) minmax(160px, 0.72fr) minmax(145px, 0.62fr) minmax(150px, 0.62fr) minmax(420px, 1.8fr);
    align-items: start;
    gap: 24px;
}

.footer-contact {
    padding: 0 0 0 18px;
    border-left: 1px solid rgba(255,255,255,0.16);
}

.footer-addresses {
    gap: 10px;
    margin-top: 16px;
}

.footer-addresses a {
    display: block;
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.86);
}

.footer-addresses strong {
    display: block;
    margin-bottom: 3px;
    color: #ffffff;
}

.catalog-section + .catalog-section {
    margin-top: 56px;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.catalog-card {
    position: relative;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 38px;
    gap: 14px;
    align-items: center;
    min-height: 122px;
    padding: 14px;
    border: 1px solid var(--line);
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(7,31,69,0.07);
}

.static-catalog-card {
    grid-template-columns: 92px minmax(0, 1fr);
}

.catalog-media {
    display: block;
    overflow: hidden;
    border-radius: 10px;
}

.catalog-card img {
    width: 92px;
    height: 80px;
    object-fit: cover;
}

.catalog-card h3 {
    margin: 0 0 4px;
    color: #101827;
    font-family: 'Inter', 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 800;
}

.catalog-card p,
.catalog-card span {
    display: block;
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.35;
}

.catalog-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: #475569;
    background: #ffffff;
    font-size: 24px;
    line-height: 1;
}

.catalog-add:hover {
    color: #ffffff;
    background: var(--blue);
}

.solution-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 32px);
    align-items: start;
}

.solution-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

.solution-card-photo {
    width: 100%;
    aspect-ratio: 3 / 4.35;
    object-fit: cover;
    border-radius: 4px;
    background: #dceaf2;
    box-shadow: 0 14px 32px rgba(7,31,69,0.08);
}

.solution-card > div:last-child {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    padding: 18px 4px 0;
}

.solution-card h3 {
    min-height: 46px;
    margin: 0 0 14px;
    color: #183253;
    font-family: 'Montserrat', 'Poppins', Inter, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 900;
    text-transform: uppercase;
}

.solution-card p {
    display: none;
    margin: 0;
    color: #536273;
    font-size: 14px;
    line-height: 1.6;
}

.solution-card span {
    display: inline-flex;
    margin-top: 12px;
    color: #0b78bf;
    font-weight: 900;
}

.solution-know-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    min-height: 52px;
    margin-top: auto;
    padding: 13px 24px;
    border-radius: 10px;
    color: #ffffff;
    background: #27136f;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.solution-know-more:hover {
    color: #ffffff;
    background: #0b78bf;
}

@media (max-width: 700px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        background: #f4f7fb;
    }

    main,
    .site-header,
    .sky-hero,
    .section,
    .clients-strip,
    .impact-band,
    .visual-strip,
    .footer {
        width: 100%;
        max-width: 100%;
    }

    .topbar {
        display: none;
    }

    .nav {
        min-height: 64px;
        padding: 8px 14px;
        gap: 10px;
    }

    .brand {
        min-width: 0;
        gap: 8px;
    }

    .brand img {
        width: 42px;
        height: 42px;
    }

    .brand strong {
        font-size: 12px;
        line-height: 1.05;
    }

    .brand small {
        display: none;
    }

    .menu-toggle {
        min-height: 34px;
        padding: 7px 10px;
        font-size: 12px;
    }

    .sky-hero {
        min-height: 520px !important;
        padding: 34px 16px 28px !important;
        align-items: end;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.86) 52%, rgba(255,255,255,0.34) 100%),
            url('../images/optimized/illustration-hero-tensile.jpg') center bottom / cover !important;
    }

    .sky-hero > div {
        max-width: 100%;
    }

    .sky-hero h1 {
        max-width: 330px;
        margin-bottom: 12px;
        font-size: clamp(28px, 9.4vw, 38px) !important;
        line-height: 1.04;
    }

    .sky-hero p:not(.eyebrow) {
        max-width: 320px;
        font-size: 14px;
        line-height: 1.5;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        max-width: 290px;
        margin-top: 14px;
    }

    .hero-actions .btn {
        min-height: 38px;
        padding: 9px 12px;
        font-size: 12px;
    }

    .hero-badges {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        max-width: 320px;
        margin-top: 14px;
    }

    .hero-badges span {
        min-height: 34px;
        padding: 8px 9px;
        font-size: 10px;
        line-height: 1.15;
    }

    .section,
    .impact-band,
    .clients-strip {
        padding: 34px 16px;
    }

    .sky-about,
    .home-lead,
    .intro,
    .split,
    .project-hero,
    .category-hero,
    .city-hero,
    .product-detail-intro,
    .seo-content {
        grid-template-columns: 1fr !important;
    }

    .sky-about h2,
    .clients-heading h2,
    .section h2,
    .city-hero h1,
    .project-hero h1,
    .category-hero h1,
    .product-title-band h1 {
        font-size: clamp(26px, 8.6vw, 36px) !important;
        line-height: 1.12;
    }

    .section p,
    .service-card p,
    .application-card p,
    .project-card p,
    .content-page p,
    .contact-form label,
    .info-panel p {
        font-size: 14px;
        line-height: 1.58;
    }

    .about-points,
    .industry-grid,
    .application-grid,
    .impact-grid,
    .benefit-grid,
    .service-grid,
    .service-grid.compact,
    .project-grid,
    .category-grid,
    .city-grid,
    .footer {
        grid-template-columns: 1fr !important;
    }

    .footer-contact {
        padding-left: 0;
        border-left: 0;
    }

    .footer-addresses a {
        padding-bottom: 9px;
    }

    .office-grid,
    .map-grid {
        grid-template-columns: 1fr;
    }

    .map-grid iframe {
        min-height: 260px;
    }

    .office-card {
        padding: 18px;
    }

    .catalog-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .catalog-card {
        grid-template-columns: 82px minmax(0, 1fr) 34px;
        min-height: 104px;
        padding: 10px;
        gap: 12px;
        box-shadow: none;
    }

    .static-catalog-card {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .solution-card-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .solution-card > div:last-child {
        padding: 14px;
    }

    .catalog-card img {
        width: 82px;
        height: 74px;
        border-radius: 10px;
    }

    .catalog-card h3 {
        font-size: 15px;
        line-height: 1.22;
    }

    .catalog-card p,
    .catalog-card span {
        font-size: 13px;
    }

    .sky-about-media img,
    .application-card img,
    .project-card img,
    .city-hero img,
    .category-hero img,
    .project-hero img,
    .real-project-card img {
        height: auto;
        max-height: 360px;
        object-fit: cover;
    }

    .visual-strip article {
        min-height: 260px !important;
    }

    .floating-actions {
        right: 8px;
        bottom: 8px;
        gap: 6px;
    }

    .floating-actions a {
        min-width: 70px;
        min-height: 34px;
        padding: 8px 10px;
        font-size: 11px;
    }
}

@media (max-width: 1240px) {
    .nav-links {
        font-size: 13px;
    }

    .brand strong {
        font-size: 17px;
    }
}

@media (max-width: 980px) {
    .industry-grid,
    .home-lead {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .topbar {
        justify-content: center;
        text-align: center;
    }

    .industry-grid {
        grid-template-columns: 1fr;
    }

    .floating-actions {
        right: 12px;
        bottom: 12px;
    }

    .floating-actions a {
        min-width: 96px;
        min-height: 42px;
        font-size: 13px;
    }
}

@media (max-width: 700px) {
    .topbar {
        display: none !important;
    }

    .floating-actions {
        right: 8px !important;
        bottom: 8px !important;
        gap: 6px !important;
    }

    .floating-actions a {
        min-width: 70px !important;
        min-height: 34px !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    .sky-hero {
        min-height: 520px !important;
        padding: 34px 16px 28px !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.86) 52%, rgba(255,255,255,0.34) 100%),
            url('../images/optimized/illustration-hero-tensile.jpg') center bottom / cover !important;
    }

    .product-visual-hero {
        min-height: 220px !important;
        height: auto !important;
    }

    .product-visual-hero img,
    .solution-card-photo,
    .product-real-card img {
        width: 100% !important;
        max-width: 100% !important;
        object-fit: cover !important;
    }

    .solution-card {
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden;
    }

    .solution-card h3,
    .product-title-band h1,
    .seo-main h2 {
        overflow-wrap: anywhere;
        word-break: normal;
    }
}