@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=PT+Serif:wght@400;700&display=swap");

/* ============================================
    TOKENS — two-colour system: white + logo blue
    All "extra" colours below are tints/shades of
    the SAME blue (#60B3DB), not new hues.
    ============================================ */
    :root {
    --white: #FFFFFF;
    --blue: #60B3DB;         /* logo blue, primary */
    --blue-deep: #60B3DB;    /* shade of the same blue, for text/dark sections */
    --blue-ink: #063E52;     /* deepest shade, for body copy on white (contrast) */
    --blue-pale: #EAF7FD;    /* tint of the same blue, for panels */
    --blue-line: rgba(12, 124, 168, 0.22);   /* hairlines on white */
    --blue-line-dark: rgba(255, 255, 255, 0.22); /* hairlines on blue */

    --font-display: "PT Serif", Georgia, serif;
    --font-mono: "Open Sans", Arial, sans-serif;
    --font-body: "Open Sans", Arial, sans-serif;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
    margin: 0;
    background: var(--white);
    color: var(--blue-ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    }

    a { color: inherit; }

    h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--blue-deep);
    }

    p, li, a, nav, button, input, select, textarea, label {
    font-family: var(--font-body);
    }

    p { margin: 0; }

    .eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue-ink);
    margin: 0 0 14px;
    }
    .eyebrow--light { color: var(--white); }
    .eyebrow.center, h2.center { text-align: center; }

    @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    }

    a:focus-visible, button:focus-visible {
    outline: 2px solid var(--blue-deep);
    outline-offset: 3px;
    }

/* ============================================
   HEADER
   ============================================ */
header {
    width: 100%;
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px clamp(20px, 4vw, 60px);
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--white);
    border-bottom: 1px solid var(--blue-line);
}

.logo {
    width: 105px;
    height: 58px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

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

.nav-inner {
    display: flex;
    align-items: center;
    margin-left: auto;
}

header nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-list > li {
    display: flex;
    align-items: center;
}

.nav-item {
    position: relative;
}

.nav-link-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Top-level dropdown labels (Products, Portfolio, About Us) are now
   plain text, not links — this restyles them to match how the
   original <a class="nav-link"> looked and behaved. */
.nav-link {
    color: var(--blue-deep);
    font-family: var(--font-mono, "Open Sans", Arial, sans-serif);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    cursor: default;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.nav-link-wrap:hover .nav-link,
.nav-link-wrap:focus-within .nav-link,
.has-dropdown.is-open > .nav-link-wrap .nav-link {
    border-color: var(--blue);
    color: var(--blue);
}

header nav a {
    color: var(--blue-deep);
    text-decoration: none;
    font-family: var(--font-mono, "Open Sans", Arial, sans-serif);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}

header nav a:hover,
header nav a:focus-visible {
    border-color: var(--blue);
    color: var(--blue);
}

.nav-cta {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    background: var(--blue-deep);
    color: var(--white);
    font-family: var(--font-mono, "Open Sans", Arial, sans-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.nav-cta:hover {
    background: var(--blue-ink);
}

/* Mobile menu button — hidden on desktop, shown only at the
   mobile breakpoint below. */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--blue-deep);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Dropdown arrow button */
.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--blue-deep);
    transform: translateY(-2px);
}

.dropdown-toggle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease, color 0.2s ease;
}

.has-dropdown:hover .dropdown-toggle::before,
.has-dropdown:focus-within .dropdown-toggle::before,
.has-dropdown.is-open .dropdown-toggle::before {
    transform: rotate(225deg);
}

/* Hide the arrow only on nested dropdown items (Stone Materials,
   Our Brands) — top-level nav items keep theirs. */
.nested-dropdown > .nav-link-wrap > .dropdown-toggle::before {
    content: none;
}

/* Invisible bridge over the visual gap between a nav item and its
   dropdown menu. Without it, moving the mouse from the item down to
   the menu crosses empty space that belongs to neither element, so
   :hover is lost mid-travel and the menu closes before the pointer
   arrives — this is what made the dropdowns feel overly sensitive.
   Scoped to top-level nav items only: a nested item (Stone Materials,
   Our Brands) sits flush above the next row in the same menu, so its
   bridge would otherwise overlap and eat clicks on that next row
   (e.g. Catalogues, right below Our Brands). */
.nav-list > .has-dropdown::after {
    content: "";
    position: absolute;
    left: -20px;
    right: -20px;
    top: 100%;
    height: 12px;
}

@media (max-width: 920px) {
    .nav-list > .has-dropdown::after {
        content: none;
    }
}

/* Dropdown menu */
.dropdown-menu {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translateX(-50%) translateY(10px);
    min-width: 220px;
    margin: 0;
    padding: 12px 0;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--blue-line);
    box-shadow: 0 18px 40px rgba(6, 62, 82, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;
    z-index: 60;
}

.dropdown-menu li a {
    display: block;
    padding: 12px 18px;
    border-bottom: 0;
    color: var(--blue-deep);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus-visible {
    background: #f7fbfd;
    color: var(--blue);
}

/* Rows that carry a nested submenu (e.g. Stone Materials, Our Brands)
   pair the link with a toggle button inside .nav-link-wrap. Stretch
   that wrapper to the full row width so the hover highlight covers
   the whole bar, not just the text + arrow. */
.dropdown-menu .nav-link-wrap {
    width: 100%;
    justify-content: space-between;
    padding: 0 18px;
    transition: background 0.15s ease, color 0.15s ease;
}

.dropdown-menu .nav-link-wrap .nav-link {
    flex: 1;
    padding: 12px 0;
    border-bottom: none;
}

/* Rows with a nested submenu (Stone Materials, Our Brands) reuse
   .nav-link, which underlines on hover for top-level items — override
   that here so these rows only get the background highlight above. */
.dropdown-menu .nav-link-wrap:hover .nav-link,
.dropdown-menu .nav-link-wrap:focus-within .nav-link,
.dropdown-menu .has-dropdown.is-open > .nav-link-wrap .nav-link {
    border-color: transparent;
}

.dropdown-menu .nav-link-wrap:hover,
.dropdown-menu .nav-link-wrap:focus-within {
    background: #f7fbfd;
}

.dropdown-menu .nav-link-wrap:hover .nav-link,
.dropdown-menu .nav-link-wrap:focus-within .nav-link {
    color: var(--blue);
}

.has-dropdown:hover > .dropdown-menu,
.has-dropdown:focus-within > .dropdown-menu,
.has-dropdown.is-open > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Nested submenus (Stone Materials, Our Brands) open to the right of
   their row instead of dropping below it — opening downward would
   otherwise overlap the page content sitting right under the nav.
   top:-13px cancels the parent menu's own border+padding (1px + 12px)
   so the two panels' boxes align flush at the same height, instead of
   the nested one starting level with its trigger row (which sits 13px
   lower than the parent panel's top edge). */
.nested-dropdown > .nested-menu {
    left: 100%;
    top: -13px;
    transform: translateX(-8px);
}

.nested-dropdown:hover > .nested-menu,
.nested-dropdown:focus-within > .nested-menu,
.nested-dropdown.is-open > .nested-menu {
    transform: translateX(0);
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive */
@media (max-width: 1100px) {
    header {
        padding: 10px 20px;
    }

    .nav-list {
        gap: 28px;
    }
}

@media (max-width: 920px) {
    header {
        flex-wrap: wrap;
        gap: 12px;
        min-height: auto;
    }

    /* Flex-wrap keeps items in DOM order, and .nav-inner sits between
       .logo and .menu-toggle in the markup — without an explicit order,
       .nav-inner's width:100% forces a wrap and pushes .menu-toggle to
       a THIRD row below the open panel instead of staying next to the
       logo. Pinning the order keeps logo + hamburger on row one and
       the panel on its own row below, in both open and closed states. */
    .logo {
        order: 1;
    }

    .menu-toggle {
        order: 2;
    }

    .nav-inner {
        order: 3;
    }

    header nav {
        position: static;
        transform: none;
        width: 100%;
    }

    /* Collapsible mobile panel — hidden until the hamburger toggles
       .mobile-nav-open on the header. Holds the nav links AND the
       Book Consultation button together, so the CTA lives inside the
       hamburger menu instead of sitting in the header bar. */
    .nav-inner {
        display: none;

        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-left: 0;
        gap: 18px;

        padding-bottom: 20px;
    }

    header.mobile-nav-open {
        padding-bottom: 0;
    }

    header.mobile-nav-open .nav-inner {
        display: flex;
    }

    .nav-list {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

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

    .menu-toggle {
        display: flex;
    }

    .menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .dropdown-menu {
        position: static;
        min-width: 0;
        margin-top: 8px;
        padding: 0 0 0 14px;
        border: 0;
        box-shadow: none;
        background: transparent;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        display: none;
    }

    .has-dropdown.is-open > .dropdown-menu {
        display: block;
    }

    /* The base (always-on) .has-dropdown:hover/.is-open rule sets a
       translateX(-50%) centering transform with higher specificity
       than the plain ".dropdown-menu { transform: none }" reset above,
       so it kept winning here and shoving open submenus off-screen to
       the left. Matching its selector/specificity so source order
       (this comes later) decides the tie instead. */
    .has-dropdown:hover > .dropdown-menu,
    .has-dropdown:focus-within > .dropdown-menu,
    .has-dropdown.is-open > .dropdown-menu {
        transform: none;
    }

    .nested-dropdown > .nested-menu,
    .nested-dropdown.is-open > .nested-menu {
        left: auto;
        transform: none;
    }

    .dropdown-menu li a {
        padding: 8px 0;
        font-size: 12px;
    }

    .nav-cta {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }
}

    /* ============================================
    HERO
    ============================================ */
    .hero {
    position: relative;
    padding: 40px clamp(20px, 4vw, 60px) 0;
    overflow: hidden;
    background: var(--white);
    }

    .hero-slab {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-slab img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.hero-slab::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(6, 62, 82, 0.78) 0%,
        rgba(6, 62, 82, 0.55) 45%,
        rgba(6, 62, 82, 0.85) 100%
    );
    z-index: 1;
    pointer-events: none;
}

    .hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 0 80px;
    }

    .hero .eyebrow { color: var(--white); opacity: 0.9; }

    .hero h1 {
    color: var(--white);
    font-size: clamp(34px, 4vw, 48px);
    line-height: 0.98;
    margin-bottom: 26px;
    }

    .hero-sub {
    max-width: 560px;
    margin: 0 auto 40px;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255,255,255,0.88);
    }

    .hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    }

    .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.2s ease;
    }
    .btn-primary { background: var(--blue-deep); color: var(--white); }
    .btn-primary:hover { background: var(--blue-ink); }
    .btn-ghost { border: 1px solid var(--blue-deep); color: var(--blue-deep); }
    .btn-ghost:hover { background: var(--blue-pale); }
    .hero .btn-ghost { border-color: var(--white); color: var(--white); }
    .hero .btn-ghost:hover { background: rgba(255,255,255,0.12); }

    .dim-strip {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding: 34px 0;
    }

    .dim-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 40px;
    }

    .dim-value {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 34px;
    color: var(--white);
    }
    .dim-value .unit { font-size: 16px; color: rgba(255,255,255,0.75); margin-left: 2px; }

    .dim-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    margin-top: 6px;
    }

    .dim-tick {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,0.2);
    }

    @media (max-width: 720px) {
    .dim-strip { flex-wrap: wrap; row-gap: 24px; }
    .dim-tick { display: none; }
    .dim-item { padding: 0 20px; width: 40%; }
    }

    /* ============================================
    FOUR KEYS
    ============================================ */
    .keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--blue-line);
    border-bottom: 1px solid var(--blue-line);
    }

    .key {
    padding: 44px clamp(20px, 4vw, 60px);
    border-left: 1px solid var(--blue-line);
    }
    .key:first-child { border-left: none; }

    .key-num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--black);
    letter-spacing: 0.1em;
    }

    .key h3 {
    font-family: var(--font-mono);
    font-size: 20px;
    margin: 14px 0 10px;
    color: var(--black);
    }

    .key p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--black);
    }

    @media (max-width: 900px) {
    .keys { grid-template-columns: repeat(2, 1fr); }
    .key:nth-child(3) { border-left: none; }
    }
    /* .about-copy switches to a 6vw gutter here - match it so the
       cards stay aligned with the About copy below. */
    @media (max-width: 860px) {
    .key { padding: 44px clamp(20px, 6vw, 60px); }
    }
    @media (max-width: 560px) {
    .keys { grid-template-columns: 1fr; }
    .key { border-left: none !important; border-top: 1px solid var(--blue-line); }
    .key:first-child { border-top: none; }
    }

    /* ============================================
    ABOUT
    ============================================ */
    .about {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 0;
    align-items: stretch;
    }

    .about-copy {
    padding: 100px clamp(20px, 4vw, 60px) 100px clamp(20px, 4vw, 60px);
    max-width: 620px;
    }

    .about-copy h2 {
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.08;
    margin-bottom: 26px;
    }

    .about-copy p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--black);
    margin-bottom: 20px;
    }

    .text-link {
    display: inline-block;
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.03em;
    text-decoration: none;
    color: var(--blue-deep);
    border-bottom: 1px solid var(--blue);
    padding-bottom: 2px;
    }
    .text-link:hover { color: var(--blue); }
    .text-link--light { color: var(--white); }

    .about-visual {
    position: relative;
    overflow: hidden;
    min-height: 500px;
    }

    .about-visual img {
        width: 100%;
        height: 100%;

        display: block;

        object-fit: cover;
    }

    @media (max-width: 860px) {
    .about { grid-template-columns: 1fr; }
    .about-copy { padding: 70px clamp(20px, 6vw, 60px); }
    .about-visual { min-height: 320px; }
    }

/* ============================================
    PROCESS VIDEO
    ============================================ */
.process-video-section {
    width: 100%;
    height: 680px;
    overflow: hidden;
    background: var(--blue-ink);
}

.process-video-section video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 760px) {
    .process-video-section {
        height: 480px;
    }
}
    /* ============================================
    PROCESS
    ============================================ */
    .process {
    background: var(--blue-ink);
    color: var(--white);
    padding: 100px clamp(20px, 4vw, 60px);
    }

    .process h2 {
    color: var(--white);
    font-size: clamp(26px, 3vw, 34px);
    max-width: 600px;
    margin: 0 auto 64px;
    }

    .process-track {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    max-width: 1180px;
    margin: 0 auto;
    align-items: start;
    }

    .process-step { padding: 0 20px; }

    .step-num {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--white);
    letter-spacing: 0.1em;
    opacity: 0.8;
    }

    .process-step h3 {
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 24px;
    margin: 16px 0 14px;
    }

    .process-step p {
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255,255,255,0.78);
    }

    .process-line {
    width: 1px;
    height: 100%;
    background: var(--blue-line-dark);
    margin-top: 8px;
    }

    @media (max-width: 900px) {
    .process-track { grid-template-columns: 1fr; row-gap: 40px; }
    .process-line { display: none; }
    }

/* ============================================
PRODUCTS  (homepage teaser grid — index.html only)
============================================ */
.products { padding: 100px clamp(20px, 4vw, 60px); }

.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 48px;
flex-wrap: wrap;
}

.section-head h2 {
font-size: clamp(19px, 1.8vw, 23px);
line-height: 1.1;
color: var(--blue-ink);
}

.section-head--dark { color: var(--white); }
.section-head--dark h2.light { color: var(--white); }

.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 280px;
gap: 2px;
background: var(--blue-line);
}

.product-card {
position: relative;
display: block;
text-decoration: none;
color: var(--white);
overflow: hidden;
background: var(--white);
}

.product-card--wide {
grid-column: span 2;
grid-row: span 2;
}

.product-media {
position: absolute;
inset: 0;
transition: transform 0.5s ease;
}
.product-card:hover .product-media { transform: scale(1.06); }

.product-meta {
position: absolute;
left: 24px;
bottom: 20px;
z-index: 1;
}

.product-index {
display: block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
color: var(--white);
opacity: 0.85;
margin-bottom: 6px;
}

.product-meta h3 { 
    color: var(--white);
    font-size: 22px;
    font-family: var(--font-mono);
}

.product-meta p { font-size: 13px; color: rgba(255,255,255,0.85); margin-top: 4px; }

@media (max-width: 900px) {
.product-grid { grid-template-columns: repeat(2, 1fr); }
.product-card--wide { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 560px) {
.product-grid { grid-template-columns: 1fr; }
.product-card--wide { grid-column: span 1; }
}

/* ============================================
FEATURED PROJECTS  (index.html only)
============================================ */

.featured-projects {
width: 100%;

padding: 40px clamp(20px, 4vw, 60px) 120px;

background: var(--white);
}

.featured-projects-head {
display: flex;
align-items: flex-end;
justify-content: space-between;

gap: 30px;

margin-bottom: 48px;
}

.featured-projects-head h2 {
max-width: 760px;

color: var(--blue-deep);

font-family: var(--font-display);
font-size: clamp(26px, 3vw, 34px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.025em;
}

.featured-projects-head .text-link {
flex-shrink: 0;

margin-bottom: 7px;
}


/* Project grid */

.featured-projects-grid {
display: grid;
grid-template-columns: 1.35fr 0.65fr;

gap: 24px;
}

.featured-project {
min-width: 0;

display: flex;
flex-direction: column;

color: var(--blue-ink);
text-decoration: none;
}

.featured-project--large {
grid-row: span 2;
}


/* Images */

.featured-project-image {
position: relative;

width: 100%;
aspect-ratio: 4 / 3;

overflow: hidden;

background: var(--blue-pale);
}

.featured-project--large .featured-project-image {
    height: 670px;
    min-height: 0;
    aspect-ratio: auto;
}

.featured-project-image img {
width: 100%;
height: 100%;

display: block;

object-fit: cover;
object-position: center;

transition: transform 0.65s ease;
}

.featured-project:hover .featured-project-image img {
transform: scale(1.045);
}


/* Project information */

.featured-project-info {
display: flex;
align-items: flex-end;
justify-content: space-between;

gap: 20px;

padding: 20px 2px 8px;
}

.featured-project-type {
display: block;

margin-bottom: 8px;

color: var(--blue-deep);

font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
}

.featured-project-info h3 {
color: var(--blue-deep);

font-family: var(--font-mono);
font-size: clamp(19px, 1.8vw, 23px);
font-weight: 700;
line-height: 1.15;
}

.featured-project-location {
flex-shrink: 0;

color: rgba(6, 62, 82, 0.62);

font-family: var(--font-body);
font-size: 12px;
line-height: 1.4;
}

/* Responsive */

@media (max-width: 900px) {
.featured-projects {
    padding: 80px clamp(20px, 6vw, 60px) 90px;
}

.featured-projects-grid {
    grid-template-columns: 1fr 1fr;
}

.featured-project--large {
    grid-column: 1 / -1;
    grid-row: auto;
}

.featured-project--large .featured-project-image {
    min-height: 480px;
}
}

@media (max-width: 650px) {
.featured-projects-head {
    align-items: flex-start;
    flex-direction: column;

    margin-bottom: 34px;
}

.featured-projects-grid {
    grid-template-columns: 1fr;
}

.featured-project--large {
    grid-column: auto;
}

.featured-project--large .featured-project-image,
.featured-project-image {
    min-height: 0;
    aspect-ratio: 4 / 3;
}

.featured-project-info {
    align-items: flex-start;
    flex-direction: column;

    gap: 8px;
}
}

/* ============================================
PORTFOLIO  (simple list style — used wherever a
.portfolio-row list is embedded, e.g. index sections)
============================================ */
.portfolio {
background: var(--blue-deep);
color: var(--white);
padding: 100px clamp(20px, 4vw, 60px) 60px;
}

.portfolio-list { border-top: 1px solid var(--blue-line-dark); }

.portfolio-row {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 24px;
padding: 30px 4px;
border-bottom: 1px solid var(--blue-line-dark);
text-decoration: none;
color: var(--white);
transition: padding-left 0.25s ease, color 0.25s ease;
}
.portfolio-row:hover { padding-left: 16px; color: var(--blue-pale); }

.portfolio-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(19px, 1.8vw, 23px);
}

.portfolio-tag {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--white);
opacity: 0.75;
}

.portfolio-arrow { font-size: 20px; }

/* ============================================
CLIENTS MARQUEE  (index.html only)
============================================ */
.clients { padding: 10px 0 100px; }

.client-logo-grid {
max-width: 1400px;
margin: 0 auto;

display: grid;
grid-template-columns: repeat(5, 1fr);
}

.client-logo {
min-height: 140px;

display: flex;
align-items: center;
justify-content: center;

padding: 28px;
}

.client-logo img {
display: block;

width: 100%;
max-width: 140px;
max-height: 58px;

object-fit: contain;

filter: grayscale(1);
opacity: 0.65;

transition:
    filter 0.25s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}

.client-logo:hover img {
filter: grayscale(0);
opacity: 1;
transform: scale(1.05);
}

@media (max-width: 1000px) {
.client-logo-grid {
    grid-template-columns: repeat(3, 1fr);
}
}

@media (max-width: 650px) {
.client-logo-grid {
    grid-template-columns: repeat(2, 1fr);
}

.client-logo {
    min-height: 110px;
    padding: 20px;
}

.client-logo img {
    max-width: 110px;
    max-height: 46px;
}
}

/* =========================================================
SHOWROOM GALLERY
========================================================= */

.showroom-gallery {
    padding: 45px clamp(20px, 4vw, 60px) 110px;
    background: var(--white);
    border-top: 1px solid var(--blue-line);
}

.showroom-gallery-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 38px;
}

.showroom-gallery-head h2 {
    color: var(--blue-deep);
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1;
}

.showroom-gallery-intro {
    max-width: 470px;
    color: var(--blue-ink);
    font-size: 15px;
    line-height: 1.65;
}


/* Slider wrapper leaves room for arrows */

.showroom-slider {
    position: relative;
    padding: 0 110px;
}

.showroom-viewport {
    width: 100%;
    overflow: hidden;
}

.showroom-track {
    display: flex;
    align-items: stretch;
    gap: 20px;

    transition: transform 0.45s ease;
    will-change: transform;
}


/* Slightly smaller image cards */

.showroom-slide {
    flex: 0 0 calc((100% - 40px) / 3);
    min-width: 0;

    height: 330px;
    margin: 0;
    padding: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #fff;
    border: 1px solid var(--blue-line);
}


/* Show the whole image — no cropping */

.showroom-slide img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;

    transition: transform 0.35s ease;
}

.showroom-slide:hover img {
    transform: scale(1.02);
}


/* Arrows sit beside the gallery */

.showroom-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;

    width: 48px;
    height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid var(--blue-deep);

    background: #fff;
    color: var(--blue-deep);

    font-size: 30px;
    line-height: 1;

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.showroom-arrow:hover {
    background: var(--blue-deep);
    color: #fff;
}

.showroom-arrow--prev {
    left: 0;
}

.showroom-arrow--next {
    right: 0;
}

.showroom-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}


/* Dots */

.showroom-dots {
    display: flex;
    justify-content: center;
    gap: 8px;

    margin-top: 24px;
}

.showroom-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(12, 124, 168, 0.25);

    cursor: pointer;
}

.showroom-dot.is-active {
    background: var(--blue-deep);
}


/* Tablet */

@media (max-width: 900px) {
    .showroom-gallery-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .showroom-slider {
        padding: 0 58px;
    }

    .showroom-slide {
        flex-basis: calc((100% - 20px) / 2);
        height: 300px;
    }
}


/* Mobile */

@media (max-width: 600px) {
    .showroom-gallery {
        padding: 70px 20px 80px;
    }

    .showroom-slider {
        padding: 0 48px;
    }

    .showroom-slide {
        flex-basis: 100%;
        height: 280px;
        padding: 8px;
    }

    .showroom-arrow {
        width: 38px;
        height: 42px;
        font-size: 25px;
    }
}


/* Responsive */

@media (max-width: 1100px) {
.portfolio-filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portfolio-filter-reset {
    width: max-content;
}
}

@media (max-width: 820px) {
.portfolio-section-head,
.showroom-gallery-head,
.showroom-cta {
    grid-template-columns: 1fr;
}

.showroom-gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 420px 260px;
}

.showroom-photo--large {
    grid-column: 1 / -1;
    grid-row: auto;
}

.showroom-cta-actions {
    max-width: 520px;
}
}

@media (max-width: 560px) {
.portfolio-filter-panel {
    grid-template-columns: 1fr;

    padding: 18px;
}

.portfolio-filter-reset {
    width: 100%;
}

.portfolio-results-bar {
    align-items: flex-start;
    flex-direction: column;

    gap: 6px;
}

.showroom-gallery {
    padding: 75px 20px 80px;
}

.showroom-gallery-head {
    gap: 24px;
    margin-bottom: 35px;
}

.showroom-gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
}

.showroom-photo,
.showroom-photo--large {
    grid-column: auto;
    grid-row: auto;

    min-height: 300px;
}

.showroom-cta {
    padding: 70px 20px;
}
}

/* =========================================================
PORTFOLIO FILTER ALIGNMENT FIX
========================================================= */

.portfolio-filter-panel {
display: grid;

/* Four equal dropdown columns */
grid-template-columns: repeat(4, minmax(0, 1fr));

gap: 24px;

padding: 0;
margin-bottom: 30px;

border: 0;
background: transparent;
}


/* Give dropdown arrows more space from the right edge */

.portfolio-filter-field select {
width: 100%;
height: 54px;

padding:
    0
    52px
    0
    18px;

border: 1px solid var(--blue-line);

background-color: var(--white);

color: var(--blue-ink);

font-size: 14px;

cursor: pointer;
}


/* Move the clear button below the dropdowns */

.portfolio-filter-reset {
grid-column: 4;

justify-self: end;

width: auto;
height: 46px;

margin-top: -4px;

padding: 0 24px;
}


/* Keep result bar aligned with project cards */

.portfolio-results-bar {
width: 100%;

margin-top: 4px;
margin-bottom: 30px;
}

/* =========================================================
PORTFOLIO CARDS — SQUARE
========================================================= */

.portfolio-card,
.portfolio-card--featured,
.portfolio-card--wide {
  width: 100%;
  aspect-ratio: 1 / 1;

  min-height: 0 !important;
  height: auto;
}

/* =========================================================
CLICKABLE PORTFOLIO CARDS
========================================================= */

button.portfolio-card {
    width: 100%;
    padding: 0;
    border: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

button.portfolio-card:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 4px;
}


/* =========================================================
PROJECT GALLERY MODAL
========================================================= */

body.gallery-open {
    overflow: hidden;
}

.project-gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    visibility: hidden;
    opacity: 0;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.project-gallery-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.project-gallery-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(6, 31, 41, 0.88);
    backdrop-filter: blur(8px);
}

.project-gallery-dialog {
    position: relative;
    z-index: 1;

    width: min(1180px, 100%);
    max-height: calc(100vh - 60px);

    overflow-y: auto;

    padding: 34px;

    background: var(--white);
}

.project-gallery-close {
    position: absolute;
    top: 18px;
    right: 20px;

    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid var(--blue-line);

    background: var(--white);
    color: var(--blue-deep);

    font-size: 30px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.project-gallery-close:hover {
    background: var(--blue-deep);
    color: var(--white);
}

.project-gallery-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 25px;
    padding-right: 60px;
}

.project-gallery-category {
    display: block;

    margin-bottom: 8px;

    color: var(--blue-deep);

    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.project-gallery-header h2 {
    color: var(--blue-ink);

    font-size: clamp(26px, 3vw, 34px);
    line-height: 1;
}

.project-gallery-counter {
    flex-shrink: 0;

    color: var(--blue-deep);

    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.project-gallery-stage {
    position: relative;

    width: 100%;
    height: min(65vh, 680px);

    overflow: hidden;
}

.project-gallery-stage img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;
}

.project-gallery-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;

    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.5);

    background: rgba(6, 62, 82, 0.72);
    color: var(--white);

    font-size: 34px;
    line-height: 1;

    cursor: pointer;

    transform: translateY(-50%);

    transition: background 0.2s ease;
}

.project-gallery-arrow:hover {
    background: var(--blue-deep);
}

.project-gallery-arrow--previous {
    left: 18px;
}

.project-gallery-arrow--next {
    right: 18px;
}

.project-gallery-thumbnails {
    display: grid;
    grid-template-columns: repeat(5, minmax(90px, 1fr));

    gap: 10px;

    margin-top: 14px;
}

.project-gallery-thumbnail {
    aspect-ratio: 4 / 3;

    padding: 0;

    overflow: hidden;

    border: 2px solid transparent;

    background: var(--blue-pale);

    cursor: pointer;

    opacity: 0.58;

    transition:
        opacity 0.2s ease,
        border-color 0.2s ease;
}

.project-gallery-thumbnail:hover,
.project-gallery-thumbnail.is-active {
    border-color: var(--blue-deep);
    opacity: 1;
}

.project-gallery-thumbnail img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

@media (max-width: 700px) {
    .project-gallery-modal {
        padding: 12px;
    }

    .project-gallery-dialog {
        max-height: calc(100vh - 24px);
        padding: 22px 16px 18px;
    }

    .project-gallery-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 10px;

        padding-right: 50px;
    }

    .project-gallery-stage {
        height: 52vh;
    }

    .project-gallery-arrow {
        width: 42px;
        height: 42px;
    }

    .project-gallery-arrow--previous {
        left: 10px;
    }

    .project-gallery-arrow--next {
        right: 10px;
    }

    .project-gallery-thumbnails {
        display: flex;
        overflow-x: auto;
    }

    .project-gallery-thumbnail {
        min-width: 100px;
    }
}

/* =========================================================
CIRCULAR FLOATING CTA BUTTONS
========================================================= */

.floating-cta-group {
    position: fixed;
    right: 26px;
    bottom: 12px;
    z-index: 900;

    display: flex;
    flex-direction: column;
    gap: 12px;

    transition: bottom 0.35s ease;
}

/* Move the entire CTA group upward when it would otherwise
   overlap the very bottom of the page (e.g. above a footer). */
.floating-cta-group.at-page-bottom {
    bottom: 60px;
}

.floating-cta-item {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.floating-cta-circle {
    width: 58px;
    height: 58px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 0;

    border: 1px solid var(--blue-deep);
    border-radius: 50%;

    background: var(--blue-deep);
    color: var(--white);

    font-size: 22px;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 12px 28px rgba(6, 62, 82, 0.2);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.floating-cta-item:nth-child(2) .floating-cta-circle {
    background: var(--white);
    color: var(--blue-deep);
}

.floating-cta-icon {
    width: 38px;
    height: 38px;
    object-fit: contain;
    pointer-events: none;
}

/* Sales Enquiry icon only — the Visit Showroom icon keeps the
   default size above. */
.floating-cta-item:first-child .floating-cta-icon {
    width: 28px;
    height: 28px;
}

.floating-cta-circle:hover {
    transform: translateY(-3px) scale(1.04);

    background: var(--blue-ink);
    color: var(--white);

    box-shadow: 0 16px 34px rgba(6, 62, 82, 0.26);
}

.floating-cta-circle:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 4px;
}


/* Hover label */

.floating-cta-tooltip {
    position: absolute;
    right: calc(100% + 13px);
    top: 50%;

    min-width: max-content;

    padding: 10px 14px;

    border: 1px solid var(--blue-line);

    background: var(--white);
    color: var(--blue-deep);

    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;

    box-shadow: 0 10px 24px rgba(6, 62, 82, 0.12);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateY(-50%)
        translateX(8px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
}

.floating-cta-tooltip::after {
    content: "";

    position: absolute;
    top: 50%;
    right: -6px;

    width: 10px;
    height: 10px;

    border-top: 1px solid var(--blue-line);
    border-right: 1px solid var(--blue-line);

    background: var(--white);

    transform:
        translateY(-50%)
        rotate(45deg);
}

.floating-cta-item:hover .floating-cta-tooltip,
.floating-cta-item:focus-within .floating-cta-tooltip {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(-50%)
        translateX(0);
}


/* Mobile */

@media (max-width: 600px) {
    .floating-cta-group {
        right: 16px;
        bottom: 8px;
    }

    .floating-cta-group.at-page-bottom {
        bottom: 60px;
    }

    .floating-cta-circle {
        width: 52px;
        height: 52px;

        font-size: 19px;
    }

    .floating-cta-icon {
        width: 28px;
        height: 28px;
    }

    .floating-cta-item:first-child .floating-cta-icon {
        width: 19px;
        height: 19px;
    }

    .floating-cta-tooltip {
        right: calc(100% + 10px);

        padding: 9px 12px;

        font-size: 10px;
    }
}


/* =========================================================
   FLOATING FORM MODAL (Sales Enquiry / Visit Showroom)
   ========================================================= */

.floating-form-modal {
    position: fixed;
    inset: 0;

    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.floating-form-modal.is-open {
    opacity: 1;
    visibility: visible;
}


/* Backdrop */

.floating-form-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(6, 62, 82, 0.76);
}


/* Dialog */

.floating-form-dialog {
    position: relative;
    z-index: 2;

    width: min(850px, 100%);
    max-height: calc(100vh - 48px);

    padding: 48px;

    overflow-y: auto;

    background: #ffffff;
    color: #063e52;

    box-shadow:
        0 30px 90px rgba(6, 62, 82, 0.3);

    transform: translateY(20px);

    transition:
        transform 0.3s ease;
}


.floating-form-modal.is-open .floating-form-dialog {
    transform: translateY(0);
}


/* Close */

.floating-form-close {
    position: absolute;
    top: 15px;
    right: 18px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    background: transparent;
    color: var(--blue-deep);

    font-size: 30px;

    cursor: pointer;
}


.floating-form-close:hover {
    color: var(--blue-ink);
}


/* Heading */

.floating-form-eyebrow {
    margin: 0 0 10px;

    color: #0c7ca8;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.floating-form-dialog h2 {
    margin: 0;

    color: #063e52;

    font-family: "PT Serif", Georgia, serif;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.05;
}


.floating-form-intro {
    max-width: 650px;

    margin: 15px 0 35px;

    color: #5f6f75;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   FORM SECTIONS
   ========================================================= */

.floating-form-section {
    margin-top: 35px;
    padding-top: 30px;

    border-top: 1px solid rgba(6, 62, 82, 0.16);
}


.floating-form-section:first-child {
    margin-top: 0;
    padding-top: 0;

    border-top: 0;
}


.floating-form-section-title {
    margin: 0 0 22px;

    color: var(--blue-deep);

    font-family: "PT Serif", Georgia, serif;
    font-size: 24px;
}


/* Form grid */

.floating-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 22px 24px;
}


/* Field */

.floating-form-field {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.floating-form-field--full {
    grid-column: 1 / -1;
}


.floating-form-field label {
    display: block;

    margin-bottom: 8px;

    color: #0c7ca8;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.floating-form-field input,
.floating-form-field select,
.floating-form-field textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 13px 14px;

    border: 1px solid rgba(12, 124, 168, 0.3);
    border-radius: 0;

    outline: none;

    background: #ffffff;
    color: #063e52;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 14px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.floating-form-field input,
.floating-form-field select {
    min-height: 48px;
}


.floating-form-field textarea {
    min-height: 140px;

    resize: vertical;
}


.floating-form-field input:focus,
.floating-form-field select:focus,
.floating-form-field textarea:focus {
    border-color: #0c7ca8;

    box-shadow:
        0 0 0 3px rgba(95, 204, 246, 0.16);
}


/* File input */

.floating-form-field input[type="file"] {
    padding: 11px;
}


.floating-form-help {
    margin: 8px 0 0;

    color: #7c8588;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   AREA / USAGE CHECKBOXES
   ========================================================= */

.floating-checkbox-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}


.floating-checkbox {
    min-height: 48px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 11px 13px;

    border: 1px solid rgba(12, 124, 168, 0.2);

    background: #ffffff;

    color: #063e52;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 12px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.floating-checkbox:hover {
    border-color: #0c7ca8;

    background: #f4fbfd;
}


.floating-checkbox input {
    width: 16px;
    height: 16px;

    margin: 0;

    accent-color: #0c7ca8;
}


/* Submit */

.floating-form-submit {
    width: 100%;
    min-height: 54px;

    margin-top: 35px;
    padding: 14px 26px;

    border: 0;

    background: #0c7ca8;
    color: #ffffff;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.floating-form-submit:hover {
    background: #063e52;

    transform: translateY(-2px);
}


/* Prevent page scrolling while modal is open */

body.floating-modal-open {
    overflow: hidden;
}


/* Business hours (Visit Showroom form) */

.business-hours-field {
    margin-top: 4px;
}

.business-hours-field > label {
    display: block;
    margin-bottom: 10px;
    padding-top: 15px;
}

.business-hours {
    width: 100%;
    border: 1px solid rgba(44, 74, 62, 0.18);
    background: #f8f6f1;
    border-radius: 4px;
    overflow: hidden;
}

.business-hours-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(44, 74, 62, 0.12);

    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #2c4a3e;
}

.business-hours-row:last-child {
    border-bottom: none;
}

.business-hours-row span:first-child {
    font-weight: 600;
}

.business-hours-row span:last-child {
    text-align: right;
    font-weight: 400;
}

.business-hours-row em {
    font-style: normal;
    opacity: 0.7;
    font-size: 12px;
}


/* Mobile */

@media (max-width: 650px) {

    .floating-form-modal {
        align-items: flex-start;

        padding: 12px;
    }


    .floating-form-dialog {
        width: 100%;

        max-height: calc(100vh - 24px);

        padding: 52px 22px 28px;
    }


    .floating-form-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .floating-form-field--full {
        grid-column: auto;
    }


    .floating-checkbox-grid {
        grid-template-columns: 1fr 1fr;
    }


    .floating-form-section {
        margin-top: 30px;
        padding-top: 25px;
    }

}

@media (max-width: 600px) {
    .business-hours-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .business-hours-row span:last-child {
        text-align: left;
    }
}


/* ============================================
    FOOTER
    ============================================ */
    footer {
    background: #0c7da9;
    color: var(--white);
    padding: 90px clamp(20px, 4vw, 60px) 30px;
    }

    .footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 60px;
    border-bottom: 1px solid var(--blue-line-dark);
    }

    .footer-logo { width: 130px; filter: brightness(0) invert(1); margin-bottom: 18px; }

    .footer-brand p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    max-width: 280px;
    }

    .footer-col h4 {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 18px;
    font-weight: 500;
    }

    .footer-col a, .footer-col p {
    display: block;
    font-size: 14.5px;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    margin-bottom: 12px;
    line-height: 1.5;
    }

    .footer-col a:hover {
        color: #000000;
    }

    .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 26px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    flex-wrap: wrap;
    gap: 16px;
    }

.footer-brand-logos {
    display: grid;
    margin-top: 4px;
    }

.footer-brand-logos a {
    display: flex;
    align-items: center;

    height: 28px;
    }

.footer-brand-logos img {
    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
    opacity: 0.85;

    transition: filter 0.2s ease, opacity 0.2s ease;
    }

.footer-brand-logos a:hover img {
  filter: none;
  opacity: 1;
}

    .footer-social { display: flex; gap: 20px; }
    .footer-social a { color: rgba(255,255,255,0.75); text-decoration: none; }
    .footer-social a:hover { color: var(--blue); }

    @media (max-width: 900px) {
    .footer-top { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 560px) {
    .footer-top { grid-template-columns: 1fr; }
    }

    /* Legacy "RESPONSIVE — NAV" breakpoints (860px/680px) removed —
       they predated the collapsible hamburger panel and conflicted
       with it (forcibly hiding <nav> below 680px with no way to
       reopen it). The @media (max-width: 920px) block above now owns
       all mobile nav behavior. */