@import url(https://use.typekit.net/ldr2pjp.css);:root {
    --navy: #002147;
    --navy-soft: #0a2e56;
    --navy-deep: #001530;
    --gold: #988663;
    --gold-soft: #b0a07c;
    --grey: #666;
    --grey-light: #8a8a8a;
    --grey-rule: #e5e2dc;
    --cream: #f6f3ee;
    --paper: #fbfaf7;
    --white: #fff;
    --ink: #1a1a1a;
    --font-display: 'superior-title' , 'Cormorant Garamond' , Georgia , serif;
    --font-body: 'Roboto' , -apple-system , BlinkMacSystemFont , 'Segoe UI' , sans-serif;
    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.875rem;
    --fs-2xl: 2.5rem;
    --fs-3xl: 3.5rem;
    --fs-4xl: clamp(2.5rem,6vw,5rem);
    --s-1: .5rem;
    --s-2: 1rem;
    --s-3: 1.5rem;
    --s-4: 2rem;
    --s-5: 3rem;
    --s-6: 4rem;
    --s-7: 6rem;
    --s-8: 8rem;
    --max-width: 1400px;
    --max-width-text: 720px;
    --gutter: clamp(1.25rem,4vw,3rem);
    --ease: cubic-bezier(.33,1,.68,1);
    --ease-in: cubic-bezier(.55,.08,.68,.53);
    --dur: .5s
}

*,*::before,*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    overflow-x: hidden
}

img,svg,video {
    display: block;
    max-width: 100%;
    height: auto
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .3s var(--ease) , opacity .3s var(--ease)
}

button {
    font: inherit;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--navy)
}

h1 {
    font-size: var(--fs-4xl);
    letter-spacing: -.02em
}

h2 {
    font-size: var(--fs-3xl)
}

h3 {
    font-size: var(--fs-2xl)
}

h4 {
    font-size: var(--fs-xl)
}

h5 {
    font-size: var(--fs-lg)
}

p {
    font-size: var(--fs-md);
    line-height: 1.75;
    color: var(--grey);
    font-weight: 400
}

.eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: var(--s-3);
    display: inline-block
}

.rule {
    width: 48px;
    height: 1px;
    background: var(--gold);
    border: 0;
    margin: var(--s-3) 0
}

.error {
    outline: 2px solid #d93025;
    transition: outline .2s ease
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter)
}

.section {
    padding: var(--s-8) 0
}

@media (max-width: 768px) {
    .section {
        padding:var(--s-7) 0
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 2.25rem;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    transition: all .4s var(--ease);
    cursor: pointer;
    border: 1px solid transparent
}

.btn-primary {
    background: var(--navy);
    color: var(--white)
}

.btn-primary:hover {
    background: var(--gold);
    color: var(--white)
}

.btn-ghost {
    background: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,.4)
}

.btn-ghost:hover {
    background: var(--white);
    color: var(--navy);
    border-color: var(--white)
}

.btn-outline {
    background: transparent;
    color: var(--navy);
    border-color: var(--navy)
}

.btn-outline:hover {
    background: var(--navy);
    color: var(--white)
}

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--navy);
    padding-bottom: .375rem;
    border-bottom: 1px solid var(--gold);
    transition: color .3s var(--ease) , border-color .3s var(--ease)
}

.btn-link::after {
    content: "→";
    transition: transform .3s var(--ease)
}

.btn-link:hover {
    color: var(--gold)
}

.btn-link:hover::after {
    transform: translateX(4px)
}

/* Header: logo centred on top and scrolls away with the page; the menu bar
   below it sticks to the top of the viewport (.is-stuck, set in main.js). */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100
}

.site-header.is-solid {
    position: relative;
    background: var(--navy)
}

.header-brand {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 1.5rem;
    padding-bottom: 1rem
}

.header-contact {
    position: absolute;
    top: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    letter-spacing: .06em;
    color: rgba(255,255,255,.88);
    transition: color .3s var(--ease)
}

.header-contact:hover {
    color: var(--gold)
}

.header-contact-left {
    left: var(--gutter)
}

.header-contact-right {
    right: var(--gutter)
}

.site-logo {
    display: block;
    flex-shrink: 0;
    width: 200px
}

.site-logo svg {
    width: 100%;
    height: auto
}

.header-bar-inner {
    display: flex;
    justify-content: center;
    padding-top: .25rem;
    padding-bottom: .75rem
}

.site-header.is-stuck .header-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(0,33,71,.98);
    box-shadow: 0 2px 20px rgba(0,0,0,.08)
}

.site-header.is-stuck .header-bar-inner {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.nav-primary {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center
}

.nav-primary ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1.875rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: .5rem
}

/* Desktop: menu items and the Contact button wrap together as one centred row */
@media (min-width: 1025px) {
    .nav-primary {
        gap: .25rem 1.875rem
    }

    .nav-primary > ul {
        display: contents
    }
}

.nav-primary a,
.nav-primary .dropdown-toggle {
    font-family: var(--font-body);
    font-size: .8125rem;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.92);
    position: relative;
    padding: .5rem;
    white-space: nowrap
}

.nav-primary a::after,
.nav-primary .dropdown-toggle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width .3s var(--ease)
}

.nav-primary a:hover::after,
.nav-primary a[aria-current="page"]::after,
.nav-primary .dropdown-toggle:hover::after,
.nav-primary .has-dropdown.is-current > .dropdown-toggle::after,
.nav-primary .has-dropdown.is-open > .dropdown-toggle::after {
    width: 100%
}

/* ---------- Flooring Types dropdown ---------- */
.nav-primary .has-dropdown {
    position: relative
}

.nav-primary .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer
}

.dropdown-caret {
    transition: transform .3s var(--ease)
}

.has-dropdown.is-open .dropdown-caret {
    transform: rotate(180deg)
}

.nav-primary .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 12.5rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 0;
    background: var(--navy);
    border-top: 1px solid var(--gold);
    box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.25);
    z-index: 120
}

.nav-primary .has-dropdown:hover > .dropdown,
.nav-primary .has-dropdown:focus-within > .dropdown,
.nav-primary .has-dropdown.is-open > .dropdown {
    display: flex
}

.nav-primary .dropdown a {
    display: block;
    padding: .75rem 1.5rem
}

.nav-primary .dropdown a::after {
    left: 1.5rem;
    transform: none;
    bottom: .5rem
}

.nav-primary .dropdown a:hover::after,
.nav-primary .dropdown a[aria-current="page"]::after {
    width: calc(100% - 3rem)
}

.nav-cta {
    padding: .625rem 1.5rem;
    border: 1px solid var(--gold);
    color: #fff!important;
    font-size: .75rem!important;
    white-space: nowrap;
    transition: background .3s var(--ease) , color .3s var(--ease)!important
}

.nav-cta:hover,
.nav-cta[aria-current="page"] {
    background: var(--gold);
    color: var(--white)!important
}

.nav-cta::after {
    display: none
}

@media (max-width: 1400px) and (min-width:861px) {
    .nav-primary {
        width: 100%;
        justify-content: center;
        gap: 10px;
    }

    .nav-primary ul {
        justify-content: center;
        gap: 0.8rem;
    }
}

.nav-toggle {
    display: none;
    width: 32px;
    height: 32px;
    position: relative;
    z-index: 110
}

.nav-toggle span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--white);
    transition: transform .4s var(--ease) , opacity .3s var(--ease) , top .4s var(--ease)
}

.nav-toggle span:nth-child(1) {
    top: 10px
}

.nav-toggle span:nth-child(2) {
    top: 16px
}

.nav-toggle span:nth-child(3) {
    top: 22px
}

.nav-toggle.is-open span:nth-child(1) {
    top: 16px;
    transform: rotate(45deg)
}

.nav-toggle.is-open span:nth-child(2) {
    opacity: 0
}

.nav-toggle.is-open span:nth-child(3) {
    top: 16px;
    transform: rotate(-45deg)
}

@media (max-width: 1024px) {
    .site-logo {
        width: 170px
    }

    /* Tablet and mobile: keep the phone number, drop the email to leave room for the menu button */
    .header-contact-right {
        display: none
    }

    .header-contact-left {
        top: 1.25rem
    }

    .header-bar-inner {
        padding: 0
    }

    .site-header.is-stuck .header-bar {
        min-height: 4rem
    }

    .nav-primary {
        display: none
    }

    .nav-toggle {
        display: block;
        position: fixed;
        top: 1.25rem;
        right: 1.25rem
    }

    .nav-primary.is-open {
        display: flex;
        position: fixed;
        inset: 0;
        background: var(--navy);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: var(--s-7) var(--s-3);
        height: 100dvh;
    }

    .nav-primary.is-open ul {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center
    }

    .nav-primary.is-open a,
    .nav-primary.is-open .dropdown-toggle {
        font-size: 1rem
    }

    .nav-primary.is-open .dropdown {
        position: static;
        transform: none;
        min-width: 0;
        padding: .5rem 0 0;
        background: none;
        border: 0;
        box-shadow: none;
        align-items: center
    }

    .nav-primary.is-open .has-dropdown:hover > .dropdown,
    .nav-primary.is-open .has-dropdown:focus-within > .dropdown {
        display: none
    }

    .nav-primary.is-open .has-dropdown.is-open > .dropdown {
        display: flex
    }

    .nav-primary.is-open .dropdown a {
        font-size: .875rem;
        padding: .5rem
    }

    .nav-primary.is-open .dropdown a::after {
        left: 50%;
        transform: translateX(-50%);
        bottom: 0
    }

    .nav-primary.is-open .dropdown a:hover::after,
    .nav-primary.is-open .dropdown a[aria-current="page"]::after {
        width: 100%
    }

    .nav-primary.is-open .nav-cta {
        margin-top: var(--s-3)
    }
}

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--navy-deep)
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 1
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    animation: slowZoom 20s var(--ease) forwards
}

@keyframes slowZoom {
    from {
        transform: scale(1.08);
    }

    to {
        transform: scale(1);
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg,rgba(0,21,48,.55) 0%,rgba(0,21,48,.45) 50%,rgba(0,21,48,.75) 100%)
}

.hero-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    padding-top: 12rem;
    padding-bottom: 5rem
}

.hero-content {
    max-width: 840px
}

.hero-eyebrow {
    color: var(--gold);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin-bottom: 1.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    opacity: 0;
    animation: fadeUp 1s var(--ease) .2s forwards
}

.hero-eyebrow::before {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--gold)
}

.hero-title {
    color: var(--white);
    font-size: var(--fs-4xl);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.02em;
    margin-bottom: 1.75rem;
    opacity: 0;
    animation: fadeUp 1.1s var(--ease) .35s forwards
}

.hero-title em {
    font-style: italic;
    color: var(--gold-soft)
}

.hero-lead {
    color: rgba(255,255,255,.82);
    font-size: var(--fs-md);
    line-height: 1.75;
    font-weight: 300;
    max-width: 560px;
    margin-bottom: 2.5rem;
    opacity: 0;
    animation: fadeUp 1.1s var(--ease) .55s forwards
}

.hero-ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeUp 1.1s var(--ease) .75s forwards
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 2.5rem;
    z-index: 3;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    color: rgba(255,255,255,.7);
    font-size: .7rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    opacity: 0;
    animation: fadeUp 1s var(--ease) 1.2s forwards
}

.hero-scroll::after {
    content: '';
    width: 1px;
    height: 40px;
    background: var(--gold);
    animation: scrollPulse 2.2s ease-in-out infinite;
    transform-origin: top
}

@keyframes scrollPulse {
    0%, 100% {
        transform: scaleY(0.3);
        opacity: 0.4;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .hero-scroll {
        display:none
    }

    .hero-inner {
        padding-top: 8rem;
        padding-bottom: 4rem
    }
}

.intro {
    background: var(--paper);
    text-align: center
}

.intro-inner {
    max-width: 860px;
    margin: 0 auto
}

.intro h2 {
    font-size: clamp(2rem,4vw,3rem);
    color: var(--navy);
    margin-bottom: 1.75rem;
    line-height: 1.2
}

.intro p {
    font-size: var(--fs-md);
    line-height: 1.8;
    color: var(--grey);
    max-width: 680px;
    margin: 0 auto 1.5rem
}

.intro .rule {
    margin: 2rem auto
}

.collections {
    background: var(--white);
    padding: var(--s-8) 0
}

.collections-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto var(--s-7)
}

.collections-header h2 {
    font-size: clamp(2rem,4vw,3rem);
    margin-bottom: 1.25rem
}

.collections-header p {
    color: var(--grey)
}

.collection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem,6vw,6rem);
    margin-bottom: var(--s-8)
}

.collection:last-child {
    margin-bottom: 0
}

.collection-image {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--cream)
}

.collection-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease)
}

.collection:hover .collection-image img {
    transform: scale(1.03)
}

.collection-image::after {
    content: attr(data-label);
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    background: var(--white);
    color: var(--navy);
    padding: .5rem 1rem;
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase
}

.collection-content {
    padding: 0 var(--s-2)
}

.collection-number {
    font-family: var(--font-display);
    font-size: .875rem;
    color: var(--gold);
    letter-spacing: .1em;
    margin-bottom: .75rem;
    display: block;
    font-style: italic
}

.collection-content h3 {
    font-size: clamp(1.75rem,3vw,2.5rem);
    color: var(--navy);
    margin-bottom: 1.25rem;
    line-height: 1.15
}

.collection-content p {
    color: var(--grey);
    margin-bottom: 1.75rem;
    line-height: 1.75
}

.collection.reverse {
    direction: rtl
}

.collection.reverse>* {
    direction: ltr
}

@media (max-width: 900px) {
    .collection {
        grid-template-columns:1fr;
        gap: 2rem;
        margin-bottom: var(--s-7)
    }

    .collection.reverse {
        direction: ltr
    }

    .collection-image {
        aspect-ratio: 4 / 3
    }

    .collection-content {
        padding: 0
    }
}

.promise {
    background: var(--cream);
    position: relative
}

.promise-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto var(--s-7)
}

.promise-header h2 {
    font-size: clamp(2rem,4vw,3rem);
    margin-bottom: 1.25rem
}

.promise-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: var(--s-5) var(--s-6)
}

.promise-item h3 {
    font-size: var(--fs-xl);
    color: var(--navy);
    margin-bottom: 1rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.25
}

.promise-item p {
    font-size: var(--fs-base);
    line-height: 1.8;
    color: var(--grey)
}

.promise-item::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--gold);
    margin-bottom: 1.5rem
}

@media (max-width: 768px) {
    .promise-grid {
        grid-template-columns:1fr;
        gap: var(--s-4)
    }
}

.showroom {
    background: var(--white);
    padding: 0
}

.showroom-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 640px
}

.showroom-media {
    position: relative;
    overflow: hidden
}

.showroom-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.showroom-content {
    background: var(--navy);
    color: var(--white);
    padding: clamp(3rem,6vw,6rem);
    display: flex;
    flex-direction: column;
    justify-content: center
}

.showroom-content .eyebrow {
    color: var(--gold)
}

.showroom-content h2 {
    color: var(--white);
    font-size: clamp(2rem,3.5vw,2.75rem);
    margin-bottom: 1.5rem;
    line-height: 1.2
}

.showroom-content p {
    color: rgba(255,255,255,.78);
    margin-bottom: 1.25rem;
    font-size: var(--fs-base);
    line-height: 1.8
}

.showroom-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1.75rem;
    margin: 2rem 0 2.25rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(152,134,99,.3)
}

.showroom-meta a:hover {
    color: var(--gold)!important
}

.showroom-meta h4 {
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: .625rem
}

.showroom-meta p {
    color: var(--white);
    font-size: .925rem;
    line-height: 1.6;
    margin: 0
}

.showroom-content .btn {
    align-self: flex-start
}

@media (max-width: 900px) {
    .showroom-inner {
        grid-template-columns:1fr
    }

    .showroom-media {
        min-height: 320px
    }
}

.installation {
    background: var(--paper);
    text-align: center
}

.installation-inner {
    max-width: 720px;
    margin: 0 auto
}

.installation h2 {
    font-size: clamp(2rem,4vw,2.75rem);
    margin-bottom: 1.25rem
}

.installation p {
    margin-bottom: 2rem
}

.site-footer {
    background: var(--navy-deep);
    color: rgba(255,255,255,.7);
    padding: var(--s-7) 0 var(--s-3)
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--s-5);
    margin-bottom: var(--s-5)
}

.footer-brand .site-logo {
    width: 220px;
    margin-bottom: 1.5rem
}

.footer-brand p {
    color: rgba(255,255,255,.6);
    font-size: .925rem;
    line-height: 1.7;
    max-width: 320px
}

.footer-col h4 {
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: 1.25rem
}

.footer-col ul {
    list-style: none
}

.footer-col li {
    margin-bottom: .625rem
}

.footer-col a {
    color: rgba(255,255,255,.7);
    font-size: .925rem;
    transition: color .3s var(--ease)
}

.footer-col a:hover {
    color: var(--gold)
}

.footer-col address {
    font-style: normal;
    color: rgba(255,255,255,.7);
    font-size: .925rem;
    line-height: 1.7
}

.footer-bottom {
    padding-top: var(--s-3);
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .8rem;
    color: rgba(255,255,255,.5)
}

.footer-bottom a:hover {
    color: var(--gold)
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns:1fr 1fr;
        gap: var(--s-4)
    }

    .footer-brand {
        grid-column: 1 / -1
    }
}

@media (max-width: 520px) {
    .footer-grid {
        grid-template-columns:1fr
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center
    }
}

/* Scroll-reveal animation disabled site-wide (per client request).
   Classes kept as no-ops so existing markup continues to render correctly. */
.reveal,
.reveal-delay-1,
.reveal-delay-2,
.reveal-delay-3 {
    opacity: 1;
    transform: none;
    transition: none;
    visibility: visible
}

@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation-duration: .01ms!important;
        animation-iteration-count: 1!important;
        transition-duration: .01ms!important;
        scroll-behavior: auto!important
    }

    .reveal {
        opacity: 1;
        transform: none
    }
}

.page-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--navy-deep);
    padding-top: 12rem
}

.page-hero-media {
    position: absolute;
    inset: 0;
    z-index: 1
}

.page-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: slowZoom 18s var(--ease) forwards
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg,rgba(0,21,48,.40) 0%,rgba(0,21,48,.30) 40%,rgba(0,21,48,.85) 100%)
}

.page-hero-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    padding-bottom: 4.5rem
}

.page-hero-content {
    max-width: 720px
}

.page-hero .hero-eyebrow {
    margin-bottom: 1.5rem;
    animation-delay: .15s
}

.page-hero h1 {
    color: var(--white);
    font-size: clamp(2.5rem,5.5vw,4.5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.02em;
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeUp 1.1s var(--ease) .3s forwards
}

.page-hero-lead {
    color: rgba(255,255,255,.85);
    font-size: var(--fs-md);
    line-height: 1.7;
    font-weight: 300;
    max-width: 560px;
    opacity: 0;
    animation: fadeUp 1.1s var(--ease) .5s forwards
}

@media (max-width: 768px) {
    .page-hero {
        min-height:60vh;
        padding-top: 8rem
    }
}

.breadcrumb {
    background: var(--paper);
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--grey-rule)
}

.breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--grey)
}

.breadcrumb a {
    color: var(--grey);
    transition: color .3s var(--ease)
}

.breadcrumb a:hover {
    color: var(--gold)
}

.breadcrumb li+li::before {
    content: '/';
    margin-right: .5rem;
    color: var(--gold)
}

.breadcrumb [aria-current="page"] {
    color: var(--navy)
}

.editorial {
    background: var(--white);
    padding: var(--s-7) 0
}

.editorial-inner {
    max-width: 760px;
    margin: 0 auto
}

.editorial h2 {
    font-size: clamp(1.75rem,3.5vw,2.5rem);
    margin-bottom: 1.5rem;
    line-height: 1.2
}

.editorial h3 {
    font-size: clamp(1.25rem,2.5vw,1.625rem);
    color: var(--navy);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 400
}

.editorial p {
    font-size: var(--fs-md);
    line-height: 1.85;
    color: var(--grey);
    margin-bottom: 1.5rem
}

.editorial p strong {
    color: var(--navy);
    font-weight: 500
}

.pullquote {
    margin: 3rem 0;
    padding: 2rem 0;
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
    text-align: center
}

.pullquote p {
    font-family: var(--font-display);
    font-size: clamp(1.5rem,3vw,2rem);
    font-style: italic;
    color: var(--navy);
    line-height: 1.4;
    font-weight: 400;
    margin: 0
}

.diagram-section {
    background: var(--paper);
    padding: var(--s-7) 0
}

.diagram-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto var(--s-5)
}

.diagram-header h2 {
    font-size: clamp(2rem,4vw,2.75rem);
    margin-bottom: 1rem
}

.diagram-frame {
    background: var(--white);
    padding: clamp(1.5rem,4vw,3rem);
    border: 1px solid var(--grey-rule)
}

.diagram-frame img,.diagram-frame svg {
    width: 100%;
    height: auto;
    display: block
}

.suitability {
    background: var(--white);
    padding: var(--s-7) 0
}

.suitability-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto var(--s-6)
}

.suitability-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: var(--s-4)
}

.room-card {
    background: var(--paper);
    padding: 2rem 1.75rem;
    border-top: 2px solid var(--gold);
    transition: transform .4s var(--ease) , box-shadow .4s var(--ease)
}

.room-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,33,71,.06)
}

.room-card .room-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 1.25rem;
    color: var(--gold)
}

.room-card h3 {
    font-size: var(--fs-lg);
    color: var(--navy);
    margin-bottom: .75rem;
    font-weight: 400
}

.room-card p {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--grey)
}

.room-card .room-rating {
    margin-top: 1.5rem;
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold)
}

@media (max-width: 900px) {
    .suitability-grid {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (max-width: 560px) {
    .suitability-grid {
        grid-template-columns:1fr
    }
}

.glossary {
    background: var(--cream);
    padding: var(--s-7) 0
}

.glossary-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto var(--s-5)
}

.glossary-list {
    max-width: 880px;
    margin: 0 auto;
    list-style: none
}

.glossary-item {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    padding: 1.75rem 0;
    border-bottom: 1px solid rgba(152,134,99,.25)
}

.glossary-item:last-child {
    border-bottom: 0
}

.glossary-term {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    color: var(--navy);
    font-weight: 400;
    font-style: italic
}

.glossary-def {
    color: var(--grey);
    line-height: 1.75;
    font-size: .975rem
}

@media (max-width: 700px) {
    .glossary-item {
        grid-template-columns:1fr;
        gap: .5rem
    }
}

.range {
    background: var(--white);
    padding: var(--s-7) 0
}

.range-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--s-6)
}

.range-header .stat {
    display: inline-block;
    font-family: var(--font-display);
    font-size: clamp(3.5rem,8vw,5.5rem);
    color: var(--gold);
    line-height: 1;
    font-weight: 400;
    margin-bottom: .5rem
}

.range-header .stat-label {
    display: block;
    font-family: var(--font-body);
    font-size: .75rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--grey);
    margin-bottom: 1.5rem
}

.range-header h2 {
    font-size: clamp(1.75rem,3.5vw,2.5rem);
    margin-bottom: 1.25rem
}

.range-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 1rem;
    margin-bottom: var(--s-5)
}

.range-tile {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--cream)
}

.range-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease)
}

.range-tile:hover img {
    transform: scale(1.05)
}

.range-tile-label {
    position: absolute;
    inset: auto 0 0 0;
    padding: .875rem 1rem;
    background: linear-gradient(180deg,transparent,rgba(0,21,48,.85));
    color: var(--white);
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s var(--ease) , transform .4s var(--ease)
}

.range-tile:hover .range-tile-label {
    opacity: 1;
    transform: translateY(0)
}

@media (max-width: 900px) {
    .range-grid {
        grid-template-columns:repeat(3,1fr)
    }
}

@media (max-width: 560px) {
    .range-grid {
        grid-template-columns:repeat(2,1fr)
    }
}

.range-cta {
    text-align: center
}

.visit-banner {
    background: var(--navy);
    color: var(--white);
    padding: var(--s-7) 0;
    text-align: center;
    position: relative;
    overflow: hidden
}

.visit-banner::before,.visit-banner::after {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(152,134,99,.12) 0%,transparent 70%);
    pointer-events: none
}

.visit-banner::before {
    top: -100px;
    left: -100px
}

.visit-banner::after {
    bottom: -100px;
    right: -100px
}

.visit-banner-inner {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto
}

.visit-banner .eyebrow {
    color: var(--gold)
}

.visit-banner h2 {
    color: var(--white);
    font-size: clamp(2rem,4vw,2.75rem);
    margin-bottom: 1.25rem
}

.visit-banner p {
    color: rgba(255,255,255,.78);
    margin-bottom: 2rem;
    font-size: var(--fs-md)
}

.visit-banner .btn-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap
}

.process {
    padding: var(--s-7) 0;
    background: var(--paper)
}

.process-header {
    max-width: 780px;
    margin: 0 auto var(--s-6);
    text-align: center
}

.process-header h2 {
    font-size: clamp(2rem,4vw,2.75rem);
    color: var(--navy);
    margin-bottom: 1.25rem;
    line-height: 1.15
}

.process-header p {
    color: var(--grey);
    font-size: var(--fs-md);
    line-height: 1.7
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: clamp(1.5rem,3vw,3rem);
    position: relative
}

.process-steps::before {
    content: '';
    position: absolute;
    top: 32px;
    left: 12.5%;
    right: 12.5%;
    height: 1px;
    border-top: 1px dashed var(--gold);
    opacity: .5;
    z-index: 0
}

.process-step {
    position: relative;
    z-index: 1;
    text-align: center
}

.process-step-number {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    background: var(--paper);
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--gold);
    background: var(--white)
}

.process-step h3 {
    font-size: 1.25rem;
    color: var(--navy);
    margin-bottom: .75rem;
    font-weight: 500
}

.process-step p {
    color: var(--grey);
    font-size: .95rem;
    line-height: 1.7
}

.process-step-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: .7rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: .5rem;
    font-weight: 500
}

@media (max-width: 900px) {
    .process-steps {
        grid-template-columns:1fr;
        gap: var(--s-4)
    }

    .process-steps::before {
        display: none
    }
}

.install-standards {
    padding: var(--s-7) 0;
    background: var(--cream)
}

.install-standards-header {
    max-width: 780px;
    margin: 0 auto var(--s-6);
    text-align: center
}

.install-standards-header h2 {
    font-size: clamp(2rem,4vw,2.75rem);
    color: var(--navy);
    margin-bottom: 1.25rem;
    line-height: 1.15
}

.install-standards-header p {
    color: var(--grey);
    font-size: var(--fs-md);
    line-height: 1.7
}

.install-standards-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: clamp(1.5rem,3vw,3rem) clamp(2rem,5vw,5rem);
    max-width: 1100px;
    margin: 0 auto
}

.install-standard {
    border-top: 1px solid rgba(0,33,71,.12);
    padding-top: 1.5rem
}

.install-standard h3 {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--navy);
    margin-bottom: .75rem;
    font-weight: 500
}

.install-standard p {
    color: var(--grey);
    font-size: .95rem;
    line-height: 1.7
}

@media (max-width: 800px) {
    .install-standards-grid {
        grid-template-columns:1fr
    }
}

.hours-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.hours-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .55rem 0;
    border-bottom: 1px solid rgba(152,134,99,.18);
    font-size: .92rem
}

.hours-list li:last-child {
    border-bottom: none
}

.hours-list .day {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--white);
    letter-spacing: .02em
}

.hours-list .hours {
    color: rgba(255,255,255,.72);
    font-variant-numeric: tabular-nums
}

.hours-list li.closed .hours {
    color: rgba(255,255,255,.45);
    font-style: italic
}

.hours-list.light li {
    border-bottom: 1px solid rgba(0,33,71,.12)
}

.hours-list.light .day {
    color: var(--navy)
}

.hours-list.light .hours {
    color: var(--grey)
}

.hours-list.light li.closed .hours {
    color: rgba(0,33,71,.45)
}

.areas {
    padding: var(--s-7) 0;
    background: var(--cream)
}

.areas-header {
    max-width: 780px;
    margin: 0 auto var(--s-5);
    text-align: center
}

.areas-header h2 {
    font-size: clamp(1.9rem,3.5vw,2.5rem);
    color: var(--navy);
    margin-bottom: 1rem;
    line-height: 1.2
}

.areas-header p {
    color: var(--grey);
    font-size: var(--fs-md);
    line-height: 1.7
}

.areas-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: clamp(.75rem,1.5vw,1.25rem);
    max-width: 1100px;
    margin: 0 auto
}

.area-tile {
    background: var(--white);
    border: 1px solid rgba(152,134,99,.25);
    padding: 1.25rem 1rem;
    text-align: center;
    transition: all .3s var(--ease)
}

.area-tile:hover {
    border-color: var(--gold);
    transform: translateY(-2px)
}

.area-tile h3 {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--navy);
    margin: 0 0 .25rem;
    font-weight: 500
}

.area-tile .postcode {
    font-family: var(--font-body);
    font-size: .7rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--gold);
    display: block
}

@media (max-width: 900px) {
    .areas-grid {
        grid-template-columns:repeat(3,1fr)
    }
}

@media (max-width: 560px) {
    .areas-grid {
        grid-template-columns:repeat(2,1fr)
    }
}

.collection-intro {
    background: var(--paper);
    padding: var(--s-7) 0 var(--s-5)
}

.collection-intro-header {
    max-width: 820px;
    margin: 0 auto;
    text-align: center
}

.collection-intro-header h2 {
    font-size: clamp(2rem,4vw,2.75rem);
    color: var(--navy);
    margin-bottom: 1.5rem;
    line-height: 1.15
}

.collection-intro-header p {
    color: var(--grey);
    font-size: var(--fs-md);
    line-height: 1.75
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: clamp(1rem,2vw,1.5rem);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 var(--s-2)
}

.category-tile {
    background: var(--white);
    border: 1px solid rgba(152,134,99,.2);
    padding: 2rem 1.5rem;
    transition: all .3s var(--ease);
    text-align: left
}

.category-tile:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,33,71,.06)
}

.category-tile h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--navy);
    margin: 0 0 .75rem;
    line-height: 1.25;
    font-weight: 500
}

.category-tile p {
    color: var(--grey);
    font-size: .92rem;
    line-height: 1.65;
    margin: 0 0 1rem
}

.category-tile a {
    font-family: var(--font-body);
    font-size: .75rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    font-weight: 500
}

.category-tile a:hover {
    color: var(--navy)
}

.map-section {
    background: var(--paper);
    padding: var(--s-6) 0
}

.map-frame {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(152,134,99,.25);
    background: var(--cream)
}

.map-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block
}

@media (max-width: 700px) {
    .map-frame {
        aspect-ratio: 4 / 3
    }
}

.contact-section {
    padding: var(--s-7) 0;
    background: var(--paper)
}

.contact-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(2rem,5vw,5rem);
    max-width: 1200px;
    margin: 0 auto;
    align-items: start
}

.contact-form-wrap {
    background: var(--white);
    padding: clamp(2rem,4vw,3.5rem);
    border: 1px solid rgba(152,134,99,.2)
}

.contact-form-wrap h2 {
    font-size: clamp(1.8rem,3vw,2.35rem);
    color: var(--navy);
    margin-bottom: .75rem;
    line-height: 1.2
}

.contact-form-wrap .form-intro {
    color: var(--grey);
    line-height: 1.7;
    margin-bottom: 2rem;
    font-size: .95rem
}

.form-row {
    margin-bottom: 1.5rem
}

.form-row.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem
}

@media (max-width: 600px) {
    .form-row.two-col {
        grid-template-columns:1fr;
        gap: 1.5rem
    }
}

.form-row label {
    display: block;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: .625rem
}

.form-row label .required {
    color: var(--gold);
    margin-left: 2px
}

.form-row input[type="text"],.form-row input[type="email"],.form-row input[type="tel"],.form-row select,.form-row textarea {
    width: 100%;
    padding: .875rem 1rem;
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--navy);
    background: var(--paper);
    border: 1px solid rgba(0,33,71,.15);
    border-radius: 0;
    transition: border-color .2s var(--ease) , background .2s var(--ease);
    -webkit-appearance: none;
    appearance: none
}

.form-row select {
    background-image: url(data:image/svg+xml;utf8,<svg\ xmlns=\'http://www.w3.org/2000/svg\'\ width=\'12\'\ height=\'8\'\ viewBox=\'0\ 0\ 12\ 8\'><path\ fill=\'none\'\ stroke=\'%23002147\'\ stroke-width=\'1.5\'\ d=\'M1\ 1l5\ 5\ 5-5\'/></svg>);
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    cursor: pointer
}

.form-row textarea {
    min-height: 160px;
    resize: vertical;
    line-height: 1.6
}

.form-row input:focus,.form-row select:focus,.form-row textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: var(--white)
}

.form-row input.error,.form-row select.error,.form-row textarea.error {
    border-color: #c0392b;
    background: #fef7f6
}

.field-error {
    display: block;
    font-size: .8rem;
    color: #c0392b;
    margin-top: .4rem
}

.form-consent {
    margin: 2rem 0 1.5rem;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(152,134,99,.2);
    border-bottom: 1px solid rgba(152,134,99,.2)
}

.consent-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1rem
}

.consent-item:last-child {
    margin-bottom: 0
}

.consent-item input[type="checkbox"] {
    margin-top: .25rem;
    accent-color: var(--gold);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer
}

.consent-item label {
    font-size: .85rem;
    color: var(--grey);
    line-height: 1.55;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    margin: 0
}

.form-actions {
    margin-top: 2rem
}

.form-actions .btn {
    width: 100%;
    padding: 1.05rem 2rem;
    font-size: .85rem
}

.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}

.form-alert {
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    border-left: 3px solid var(--gold);
    background: var(--cream);
    font-size: .95rem;
    line-height: 1.6;
    color: var(--navy)
}

.form-alert.success {
    border-left-color: #2e7d5b;
    background: #f0f7f3
}

.form-alert.error {
    border-left-color: #c0392b;
    background: #fef7f6
}

.form-alert strong {
    display: block;
    margin-bottom: .4rem;
    font-weight: 500;
    font-size: 1rem
}

.contact-info {
    padding: clamp(1rem,2vw,1.5rem) 0
}

.contact-info h3 {
    font-size: 1.35rem;
    color: var(--navy);
    margin-bottom: .5rem;
    line-height: 1.2;
    font-weight: 500;
    font-family: var(--font-display)
}

.contact-info .info-intro {
    color: var(--grey);
    font-size: .95rem;
    line-height: 1.7;
    margin-bottom: 1.75rem
}

.contact-info-block {
    padding: 1.25rem 0;
    border-top: 1px solid rgba(152,134,99,.25)
}

.contact-info-block:first-of-type {
    border-top: 1px solid rgba(152,134,99,.4)
}

.contact-info-block:last-of-type {
    border-bottom: 1px solid rgba(152,134,99,.25)
}

.contact-info-block h4 {
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: .75rem
}

.contact-info-block p {
    color: var(--navy);
    font-size: .95rem;
    line-height: 1.65;
    margin: 0
}

.contact-info-block a {
    color: var(--navy);
    text-decoration: none;
    border-bottom: 1px dotted rgba(0,33,71,.3);
    transition: border-color .2s var(--ease)
}

.contact-info-block a:hover {
    border-bottom-color: var(--gold)
}

@media (max-width: 900px) {
    .contact-layout {
        grid-template-columns:1fr
    }

    .contact-info {
        order: -1
    }
}

/* Home: Google reviews widget under the intro text */
.home-reviews { padding-top: 0; }
.home-reviews .container { min-height: 120px; }