:root {
    --ink: #132241;
    --paper: #fbf9f3;
    --sand: #d4b791;
    --peach: #d99a84;
    --sky: #eaf5fb;
    --line: #c9c7c0;
    --serif: "Baskervville", "Times New Roman", serif;
    --sans: "Inter", "Helvetica Neue", Arial, sans-serif;

    /* Content measure. Every full-width block resolves its width from this, so
       one value moves the whole page in step on very wide screens. */
    --measure: 1380px;

    /* ---- Approved typography scale (desktop) ---- */
    --font-heading: 40px;
    --font-subheading: 31px;
    --font-body: 16px;
    --font-caption: 12.8px;
    --font-tiny: 11.5px;

    /* Leading */
    --lh-heading: 1.15;
    --lh-subheading: 1.25;
    --lh-body: 1.6;

    /* Kerning / tracking */
    --ls-heading: -.015em;
    --ls-body: .002em;
    --ls-caption: .06em;
}

/* Tablet */
@media(max-width:1024px) {
    :root {
        --font-heading: 35px;
        --font-subheading: 27px;
        --font-body: 16px;
        --font-caption: 12.4px;
        --font-tiny: 11.2px;
    }
}

/* Mobile */
@media(max-width:600px) {
    :root {
        --font-heading: 30px;
        --font-subheading: 23px;
        --font-body: 15.5px;
        --font-caption: 12px;
        --font-tiny: 11px;
    }
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--font-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    overflow-x: hidden
}

/* Consistent leading + kerning for every heading level */
h1,
h2,
h3,
h4 {
    letter-spacing: var(--ls-heading);
    font-kerning: normal;
    font-variant-ligatures: common-ligatures
}
article.about-person.about-person--reverse.reveal h3, article.about-person.about-person--reverse.reveal p {
    text-align: right;
}
img {
    display: block;
    max-width: 100%;
    width: 100%
}

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

button,
input,
select,
textarea {
    font: inherit
}

.container {
    width: min(var(--measure), calc(100% - 58px));
    margin: auto
}

.eyebrow {
    font-size: var(--font-caption);
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .04em
}

.eyebrow:before {
    content: "";
    display: block;
    width: 11px;
    height: 11px;
    background: currentColor;
    border-radius: 0 3px;
    margin-bottom: 5px
}

.display {
    font-family: var(--serif);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -.025em;
    line-height: .98;
    margin: 0;
    font-size: var(--font-heading)
}

.section-title {
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    text-transform: uppercase;
    margin: 0
}

.copy {
    font-size: var(--font-body);
    line-height: var(--lh-body);
    text-transform: uppercase;
    color: #626262
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: white;
    text-transform: uppercase;
    font-weight: 700;
    font-size: var(--font-caption);
    cursor: pointer
}

.btn--light {
    background: transparent;
    color: var(--ink)
}

.btn:after {
    content: "→";
    font-size: var(--font-body)
}

.site-header {
    height: 84px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 20;
    background: var(--paper)
}

.site-header.overlay {
    position: absolute;
    left: 0;
    right: 0;
    background: transparent;
    color: #fff
}

.nav {
    width: min(var(--measure), calc(100% - 58px));
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.logo {
    width: 112px
}

.overlay .logo {
    filter: brightness(0) invert(1)
}

.nav-links {
    display: flex;
    gap: 42px;
    align-items: center;
    font-family: var(--serif);
    font-size: var(--font-caption)
}

.nav-links a[aria-current=page] {
    border-bottom: 1px solid
}

.menu-btn {
    display: none;
    border: 0;
    background: none;
    color: inherit;
    font-size: 25px
}

.hero {
    min-height:700px;
    position: relative;
    display: grid;
    place-items: center;
    color: white;
    text-align: center;
    overflow: hidden
}

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

.hero:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, .05) 55%, rgba(0, 0, 0, .25))
}

.hero h1 {
    position: relative;
    z-index: 1;
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    text-transform: uppercase;
    max-width: 700px
}

.split {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    min-height: 755px;
    align-items: center;
    gap: 60px
}

.split-media {
    height: 755px;
    overflow: hidden;
    border-radius: 0 0 260px 0
}

.split-media img {
    height: 100%;
    object-fit: cover
}

.split-copy {
    padding: 80px 5vw
}

.rule-label {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 20px;
    align-items: center;
    margin: 70px 0
}

.rule-label span {
    height: 1px;
    background: var(--line)
}

.showcase {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 820px
}

.showcase-main {
    position: relative;
    overflow: hidden;
    background: #ddd
}

.showcase-main img {
    height: 100%;
    object-fit: cover
}

.showcase-main h2 {
    position: absolute;
    top: 30px;
    left: 30px;
    color: white;
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    text-transform: uppercase
}

.showcase-info {
    padding: 70px 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.feature-list {
    display: grid;
    gap: 30px
}

.feature-list div {
    border-bottom: 1px solid var(--line);
    padding-bottom: 25px
}

.product-banner {
    position: relative;
    min-height: 560px;
    margin: 80px auto;
    overflow: hidden
}

.product-banner>img {
    height: 560px;
    object-fit: cover
}

.product-banner-card {
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: 16%;
    right: 16%;
    background: #fff;
    display: grid;
    grid-template-columns: 1.1fr .9fr
}

.product-banner-card img {
    height: 100%;
    object-fit: cover
}

.product-banner-copy {
    padding: 50px;
    align-self: center
}

.why-grid {
    display: grid;
    grid-template-columns: .8fr 1fr;
    gap: 28px;
    align-items: start
}

.why-grid img {
    height: 900px;
    object-fit: cover;
    filter: grayscale(1)
}

.why-copy img {
    height: 430px;
    margin-bottom: 55px
}

.why-list div {
    font-size: var(--font-body);
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
    padding: clamp(22px, 2.6vw, 38px) 0
}

.cta {
    min-height: 420px;
    border: 1px solid var(--line);
    border-radius: 0 120px;
    margin: 90px auto;
    display: flex;
    align-items: center;
    padding: 60px
}

.cta h2 {
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    max-width: 650px;
    text-transform: capitalize
}

.site-footer {
    padding: 65px 0;
    background: var(--paper)
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 65px
}

.footer-links {
    display: grid;
    gap: 16px;
    font-weight: 700;
    text-transform: uppercase
}

.address {
    font-size: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    line-height: var(--lh-body);
    border-block: 1px solid var(--line);
    padding: 18px 0
}

.inner-hero {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    min-height: 650px;
    align-items: center;
    gap: 40px
}

.inner-hero img {
    height: 650px;
    object-fit: cover;
    border-radius: 170px 0 0 0
}

.inner-hero .copy-block {
    padding: 60px 5vw 30px 0
}

.collection-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;
    margin: 50px 0 100px
}

.collection-card {
    border: 1px solid #dedbd2;
    padding: 28px;
    min-height: 370px
}

.collection-card img {
    height: 260px;
    object-fit: contain
}

.collection-card.tall {
    grid-row: span 2
}

.collection-card.tall img {
    height: 100%;
    object-fit: cover
}

.collection-card h3 {
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    text-transform: uppercase
}

.series-hero {
    position: relative;
    height: 560px;
    overflow: hidden
}

.series-hero img {
    height: 100%;
    object-fit: cover
}

.series-hero .series-title {
    position: absolute;
    left: 3%;
    top: 20%;
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    text-transform: uppercase
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #ddd;
    margin: 50px 0
}

.product-card {
    background: var(--paper);
    padding: 26px;
    min-height: 380px;
    border-radius: 0 70px 0 0
}

.product-card img {
    height: 260px;
    object-fit: contain
}

.product-card h3 {
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    text-transform: uppercase
}

.editorial-product {
    text-align: center;
    padding: 80px 0
}

.editorial-product img {
    max-height: 520px;
    object-fit: contain
}

.editorial-product.blue {
    background: #eaf5fb
}

.product-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    padding: 30px 0 70px
}

.gallery-main {
    height: 480px;
    object-fit: contain;
    background: white
}

.thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 10px
}

.thumbs img {
    height: 85px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent
}

.thumbs img.active {
    border-color: var(--ink)
}

.product-summary {
    padding: 50px 0
}

.swatches {
    display: flex;
    gap: 12px;
    margin: 22px 0
}

.swatch {
    width: 34px;
    height: 34px;
    border: 1px solid #aaa;
    cursor: pointer
}

.tabs {
    display: flex;
    gap: 40px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 35px
}

.tabs button {
    border: 0;
    background: none;
    padding: 18px 0;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer
}

.tabs button.active {
    border-bottom: 3px solid var(--ink);
    font-weight: 700
}

.tab-panel {
    display: none
}

.tab-panel.active {
    display: block
}

.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px
}

.detail-table div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--line);
    padding: 12px 0
}

.enquiry-hero {
    height: 470px;
    position: relative;
    margin: 0 auto 55px;
    overflow: hidden
}

.enquiry-hero img {
    height: 100%;
    object-fit: cover;
    filter: brightness(.7)
}

.enquiry-hero h1 {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: white;
    text-align: center;
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    display: block;
    top: 40%;
}

.enquiry-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 30px;
    margin: 50px auto 120px
}

.contact-panel {
    background: #f8f5ee;
    padding: 35px
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.field {
    display: grid;
    gap: 8px
}

.field.full {
    grid-column: 1/-1
}

.field label {
    font-size: var(--font-caption)
}

.field input,
.field select,
.field textarea {
    border: 1px solid #ccd2dc;
    border-radius: 5px;
    background: white;
    padding: 14px;
    color: var(--ink)
}

.field textarea {
    min-height: 100px
}

.form-message {
    padding: 14px;
    margin-top: 15px;
    display: none
}

.form-message.show {
    display: block;
    background: #e7f2e6
}

.about-intro {
    text-align: center;
    max-width: 1050px;
    margin: 60px auto
}

.principles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    margin: 80px auto
}

.principle {
    max-width: 520px
}

.principle:nth-child(even) {
    margin-top: 130px
}

.team-member {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 50px;
    align-items: center;
    margin: 65px 0
}

.team-member:nth-child(even) {
    grid-template-columns: 1fr 360px
}

.team-member:nth-child(even) img {
    order: 2
}

.team-member img {
    height: 460px;
    object-fit: cover
}

.sustainability {
    background: #b8d7e7;
    border-radius: 0 120px;
    padding: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 45px;
    align-items: center
}

.sustainability img {
    height: 340px;
    object-fit: cover;
    border-radius: 0 80px
}

.reveal {
    visibility: visible
}

@media(max-width:900px) {
    .container {
        width: min(100% - 30px, 760px)
    }

    .site-header {
        height: 68px
    }

    .nav {
        width: calc(100% - 30px)
    }

    .nav-links {
        position: fixed;
        inset: 68px 0 auto;
        background: var(--paper);
        color: var(--ink);
        padding: 30px;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        box-shadow: 0 15px 25px #0002
    }

    .nav-links.open {
        display: flex
    }

    .menu-btn {
        display: block
    }

    .overlay .menu-btn {
        color: #fff
    }

    .hero {
        min-height: 680px
    }

    .split,
    .showcase,
    .why-grid,
    .inner-hero,
    .product-top,
    .details-grid,
    .enquiry-layout,
    .principles,
    .team-member,
    .sustainability {
        grid-template-columns: 1fr
    }

    .split-media {
        height: 520px;
        border-radius: 0 0 140px 0
    }

    .split-copy {
        padding: 55px 20px
    }

    .showcase-main {
        min-height: 560px
    }

    .product-banner-card {
        left: 5%;
        right: 5%;
        grid-template-columns: 1fr
    }

    .product-banner-card>img {
        display: none
    }

    .why-grid img {
        height: 560px
    }

    .footer-grid {
        grid-template-columns: 1fr
    }

    .inner-hero {
        padding-top: 50px
    }

    .inner-hero img {
        height: 500px;
        order: 2
    }

    .collection-grid {
        grid-template-columns: 1fr 1fr
    }

    .collection-card.tall {
        grid-row: auto;
        grid-column: 1/-1;
        height: 500px
    }

    .products-grid {
        grid-template-columns: 1fr 1fr
    }

    .enquiry-layout {
        margin-bottom: 70px
    }

    .principle:nth-child(even) {
        margin-top: 0
    }

    .team-member:nth-child(even) {
        grid-template-columns: 1fr
    }

    .team-member:nth-child(even) img {
        order: 0
    }
}

@media(max-width:600px) {
    .display {
        font-size: var(--font-heading)
    }

    .hero {
        min-height: 600px
    }

    .hero h1 {
        font-size: var(--font-heading);
        padding: 20px
    }

    .showcase {
        grid-template-columns: 1fr
    }

    .showcase-main h2 {
        font-size: var(--font-heading)
    }

    .product-banner {
        min-height: 500px
    }

    .product-banner-card {
        position: absolute
    }

    .product-banner-copy {
        padding: 28px
    }

    .cta {
        padding: 35px 24px;
        border-radius: 0 70px
    }

    .collection-grid,
    .products-grid,
    .form-grid {
        grid-template-columns: 1fr
    }

    .collection-card.tall {
        grid-column: auto
    }

    .series-hero {
        height: 450px
    }

    .series-hero .series-title {
        font-size: var(--font-heading)
    }

    .gallery-main {
        height: 330px
    }

    .tabs {
        gap: 12px;
        overflow: auto
    }

    .team-member {
        grid-template-columns: 1fr
    }

    .team-member img {
        height: 390px
    }

    .sustainability {
        padding: 35px 22px;
        border-radius: 0 70px
    }

    .enquiry-hero h1 {
        font-size: var(--font-heading)
    }

    .footer-grid {
        gap: 40px
    }
}

/* Enquiry page — Figma frame 111:1415 */
.enquiry-page {
    padding-top: 62px
}

.enquiry-page .enquiry-hero {
    height: 470px;
    margin-bottom: 78px
}

.enquiry-page .enquiry-hero img {
    filter: none;
    transform: scale(1.01)
}

.enquiry-page .enquiry-hero:after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55)
}

.enquiry-page .enquiry-hero h1 {
    z-index: 1;
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    letter-spacing: var(--ls-heading);
    margin: 0;
}

.enquiry-intro {
    text-align: center;
    margin-bottom: 70px
}

.enquiry-intro h2 {
    max-width: 943px;
    margin: 0 auto;
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    letter-spacing: -.01em;
    text-transform: uppercase
}

.enquiry-page .enquiry-layout {
    grid-template-columns: 532px minmax(0, 806px);
    gap: 26px;
    align-items: start;
    margin-top: 0;
    margin-bottom: 166px
}

.enquiry-page .contact-panel {
    height: 588px;
    padding: 37px 30px;
    background: var(--paper)
}

.contact-panel h2 {
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    letter-spacing: var(--ls-heading);
    text-transform: uppercase;
    margin: 0 0 22px
}

.contact-panel__intro {
    max-width: 442px;
    color: #5f5f5f;
    font-size: var(--font-body);
    line-height: var(--lh-body);
    letter-spacing: 0;
    margin: 0 0 41px
}

.contact-detail {
    margin-bottom: 31px
}

.contact-detail span {
    display: block;
    color: #909090;
    font-size: var(--font-caption);
    line-height: 1.4;
    text-transform: capitalize;
    margin-bottom: 6px
}

.contact-detail p,
.contact-detail a {
    display: block;
    max-width: 393px;
    color: var(--ink);
    font-size: var(--font-body);
    line-height: var(--lh-body);
    letter-spacing: 0;
    margin: 0
}

.contact-detail a {
    text-decoration: none
}

.enquiry-form {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 16px 0 0
}

.form-section {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0
}

.form-section legend {
    width: 100%;
    padding: 0;
    margin-bottom: 18px;
    color: #676767;
    font-size: var(--font-caption);
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase
}

.form-grid--basic {
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 36px
}

.form-grid--basic .field:last-child {
    grid-column: 1/-1;
    width: calc(50% + 18px)
}

.enquiry-form .field {
    gap: 12px
}

.enquiry-form .field label {
    color: #262e36;
    font-size: var(--font-caption);
    line-height: 1.4;
    letter-spacing: 0
}

.enquiry-form .field label em {
    color: #d95117;
    font-style: normal
}

.enquiry-form .field input,
.enquiry-form .field select,
.enquiry-form .field textarea {
    width: 100%;
    height: 41px;
    padding: 10px 16px;
    border: 1px solid #d8dde3;
    border-radius: 8px;
    background: #fff;
    color: #4c5c6b;
    font-size: var(--font-body);
    box-shadow: 0 0 4px rgba(23, 25, 28, .05)
}

.enquiry-form .field select {
    padding: 4px 44px 4px 16px;
    background-color: #fff
}

.phone-input {
    position: relative
}

.phone-input>span {
    position: absolute;
    z-index: 1;
    left: 16px;
    top: 0;
    height: 41px;
    display: flex;
    align-items: center;
    color: #4c5c6b;
    font-size: var(--font-body)
}

.phone-input input {
    padding-left: 64px !important
}

.form-stack {
    display: flex;
    flex-direction: column;
    gap: 36px;
    width: 642px;
    max-width: 100%
}

.form-section--message textarea {
    height: 74px !important;
    min-height: 74px !important;
    resize: vertical;
    line-height: var(--lh-body)
}

.form-submit {
    margin-top: -1px
}

.form-submit .btn {
    padding: 12px 20px;
    font-weight: 400;
    letter-spacing: .06em
}

.form-submit .btn:after {
    font-size: var(--font-body)
}

.enquiry-page+.site-footer {
    background: var(--paper)
}

@media(max-width:1100px) {
    .enquiry-page .enquiry-layout {
        grid-template-columns: 360px 1fr
    }

    .enquiry-page .contact-panel {
        height: auto
    }

    .contact-panel__intro {
        font-size: var(--font-body)
    }

    .contact-detail p,
    .contact-detail a {
        font-size: var(--font-body);
        line-height: var(--lh-body)
    }
}

@media(max-width:900px) {
    .enquiry-page {
        padding-top: 32px
    }

    .enquiry-page .enquiry-hero {
        height: 420px;
        margin-bottom: 58px
    }

    .enquiry-page .enquiry-layout {
        grid-template-columns: 1fr;
        gap: 48px;
        margin-bottom: 90px
    }

    .enquiry-page .contact-panel {
        padding: 32px
    }

    .enquiry-form {
        padding-top: 0
    }

    .enquiry-intro h2 {
        font-size: var(--font-subheading);
        line-height: var(--lh-subheading)
    }

    .enquiry-intro h2 br {
        display: none
    }
}

@media(max-width:600px) {
    .enquiry-page .enquiry-hero {
        height: 360px
    }

    .enquiry-page .enquiry-hero h1 {
        font-size: var(--font-heading);
        line-height: var(--lh-heading);
        padding: 20px
    }

    .enquiry-intro {
        margin-bottom: 52px
    }

    .enquiry-intro h2 {
        font-size: var(--font-subheading)
    }

    .enquiry-page .contact-panel {
        padding: 26px 22px
    }

    .contact-panel h2 {
        font-size: var(--font-heading)
    }

    .contact-detail p,
    .contact-detail a {
        font-size: var(--font-body)
    }

    .form-grid--basic {
        grid-template-columns: 1fr;
        gap: 26px
    }

    .form-grid--basic .field:last-child {
        grid-column: auto;
        width: 100%
    }

    .enquiry-form {
        gap: 40px
    }

    .form-stack {
        gap: 26px
    }
}

/* Shared Figma header and mega menu */
.site-header {
    height: 66px;
    position: relative;
    z-index: 100;
    background: var(--paper);
    transition: background .3s, color .3s
}

.site-header.overlay {
    position: absolute;
    inset: 0 0 auto;
    color: #fff;
    background: linear-gradient(180deg, rgba(8, 8, 8, .72), rgba(8, 8, 8, .24) 72%, transparent)
}

.nav {
    height: 66px;
    width: calc(100% - 44px);
    max-width: none
}

.brand {
    flex: 0 0 auto
}

.logo {
    width: 111px;
    height: 40px;
    object-fit: contain
}

.nav-links {
    flex: 1;
    gap: 40px;
    margin-left: 115px;
    font-family: var(--sans);
    font-size: var(--font-caption);
    text-transform: uppercase
}

.nav-links a,
.nav-trigger {
    white-space: nowrap
}

.nav-links span,
.nav-trigger span {
    font-size: var(--font-tiny)
}

.nav-spacer {
    margin-left: auto
}

.nav-trigger {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    padding: 23px 0;
    cursor: pointer
}

.mega-menu {
    position: absolute;
    top: 66px;
    left: 16px;
    right: 16px;
    max-height: 0;
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
    transition: max-height .5s cubic-bezier(.22, 1, .36, 1), opacity .25s, visibility .25s
}

.mega-menu.open {
    max-height: 540px;
    opacity: 1;
    visibility: visible
}

.mega-grid {
    display: grid;
    grid-template-columns: 1.08fr 1.08fr 1fr 1fr .75fr;
    min-height: 448px;
    padding: 25px 50px 48px;
    gap: 70px
}

.mega-grid section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0
}

.mega-grid h2 {
    font: 500 var(--font-caption)/1.3 var(--sans);
    text-transform: uppercase;
    border-bottom: 1px solid #dedbd2;
    padding: 0 0 12px;
    margin: 0 0 9px
}

.mega-grid h3 {
    font: 500 var(--font-tiny)/1.4 var(--sans);
    text-transform: uppercase;
    margin: 12px 0 5px
}

.mega-grid section>a {
    /* font: 400 var(--font-tiny)/1.5 var(--sans); */

    padding: 9px 0;
    font-size:16px;
}
.mega-menu h2 a, .mega-menu h2 {
    font-weight: bold;
    font-size: 16px;
}
.mega-grid .mega-active {
    display: flex;
    justify-content: space-between;
    background: var(--ink);
    color: #fff;
    padding: 8px 12px;
    margin: 2px 0
}

.hero {
    height: 700px;
    min-height: 700px
}

.hero h1 {
    font-size: var(--font-heading);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    max-width: 626px
}

.hero>img {
    transform: scale(1.01)
}

.site-footer {
    border-top: 0
}

.footer-grid {
    grid-template-columns: 430px 1fr 1fr
}

.footer-links {
    font-size: var(--font-caption)
}

.address {
    font-size: var(--font-body);
    line-height: var(--lh-body)
}

@media(max-width:1150px) {
    .nav-links {
        gap: 22px;
        margin-left: 55px
    }

    .mega-grid {
        gap: 30px;
        padding-inline: 35px
    }
}

@media(max-width:900px) {

    .site-header,
    .nav {
        height: 68px
    }

    .site-header.overlay {
        position: absolute
    }

    .logo {
        width: 96px;
        height: 34px
    }

    .menu-btn {
        display: flex;
        width: 44px;
        height: 44px;
        flex-direction: column;
        justify-content: center;
        gap: 7px;
        padding: 10px
    }

    .menu-btn span {
        display: block;
        width: 24px;
        height: 1px;
        background: currentColor;
        transition: .25s
    }

    /* Three bars: stack is 1+7+1+7+1 = 17px, so the outer bars sit 8px from the
       centre and need 8px of travel (was 4px when there were only two). The
       middle bar fades out so the X stays clean. */
    .menu-btn.open span:first-child {
        transform: translateY(8px) rotate(45deg)
    }

    .menu-btn.open span:nth-child(2) {
        opacity: 0;
        transform: scaleX(.3)
    }

    .menu-btn.open span:last-child {
        transform: translateY(-8px) rotate(-45deg)
    }

    .nav-links {
        inset: 68px 0 auto;
        margin: 0;
        gap: 0;
        padding: 20px 25px;
        max-height: calc(100vh - 68px);
        overflow: auto
    }

    .nav-links a,
    .nav-trigger {
        display: block;
        width: 100%;
        padding: 15px 0;
        border-bottom: 1px solid #dedbd2;
        text-align: left
    }

    .nav-spacer {
        margin-left: 0
    }

    .mega-menu {
        position: fixed;
        top: 68px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        box-shadow: none
    }

    .mega-menu.open {
        max-height: calc(100vh - 68px);
        overflow: auto
    }

    .mega-grid {
        grid-template-columns: 1fr;
        padding: 25px;
        gap: 30px
    }

    .hero {
        height: 680px;
        min-height: 680px
    }

    .hero h1 {
        font-size: var(--font-heading);
        line-height: var(--lh-heading)
    }

    .footer-grid {
        grid-template-columns: 1fr
    }
}

/* Motion, hover, and Framer-inspired collection story */
.nav-links>a,
.nav-trigger {
    position: relative
}

.nav-links>a:after,
.nav-trigger:after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 16px;
    height: 1px;
    background: currentColor;
    transition: right .35s cubic-bezier(.22, 1, .36, 1)
}

.nav-links>a:hover:after,
.nav-links>a:focus-visible:after,
.nav-trigger:hover:after,
.nav-trigger:focus-visible:after {
    right: 0
}

.nav-links>a {
    transition: opacity .25s
}

.nav-links:hover>a:not(:hover) {
    opacity: .55
}

.mega-grid section>a:not(.mega-active) {
    position: relative;
    padding-left: 0;
    transition: color .25s, padding-left .3s
}

.mega-grid section>a:not(.mega-active):hover {
    color: var(--ink);
    padding-left: 10px
}

.mega-grid section>a:not(.mega-active):before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 1px;
    background: var(--ink);
    transition: width .25s
}

.mega-grid section>a:not(.mega-active):hover:before {
    width: 5px
}

.mega-active {
    transition: background .25s, transform .25s
}

.mega-active:hover {
    background: #26375b;
    transform: translateX(5px)
}

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

.hero-scroll {
    position: absolute;
    z-index: 2;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: center;
    color: #fff;
    font-size: var(--font-tiny);
    text-transform: uppercase;
    letter-spacing: .18em
}

.hero-scroll span {
    font-size: 18px;
    animation: scroll-cue 1.6s ease-in-out infinite
}

@keyframes scroll-cue {
    50% {
        transform: translateY(7px)
    }
}

.who-we-are {
    height: 100vh;
    min-height: 720px;
    position: relative;
    overflow: hidden;
    color: #fff
}

.who-we-are>img {
    position: absolute;
    inset: 0;
    height: 110%;
    object-fit: cover
}

.who-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .58)
}

.who-copy {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 9vh 3vw 5vh;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.who-lines {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 22px;
    align-items: center
}

.who-lines h2 {
    grid-row: 1/4;
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    text-transform: uppercase;
    margin: 0
}

.who-lines p {
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    margin: 8px 0;
    color: rgba(255, 255, 255, .25)
}

.who-lines p span {
    color: #fff
}

.who-description {
    font: 400 var(--font-body)/var(--lh-body) var(--sans);
    max-width: 700px;
    margin-top: auto
}

.who-lines p {
    transition: color .4s
}

.who-lines p.is-lit {
    color: #fff
}

@media(max-width:900px) {

    .nav-links>a:after,
    .nav-trigger:after {
        display: none
    }

    .collection-story {
        height: auto
    }

    .collection-pin {
        position: relative;
        height: auto;
        min-height: 0;
        padding: 95px 15px 35px
    }

    .collection-stage {
        position: relative
    }

    .collection-slide {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        opacity: 1;
        visibility: visible;
        margin-bottom: 24px;
        background: #fff
    }

    .collection-visual {
        height: 440px
    }

    .collection-content {
        padding: 34px 24px
    }

    .collection-content h2 {
        font-size: var(--font-heading);
        margin: 20px 0 35px
    }

    .collection-features {
        margin-left: 0
    }

    .collection-link {
        position: relative;
        right: auto;
        bottom: auto;
        display: inline-flex;
        margin-left: 0
    }

    .collection-progress {
        display: none
    }

    .who-we-are {
        min-height: 760px
    }

    .who-copy {
        padding: 70px 24px 35px
    }

    .who-lines {
        display: block
    }

    .who-lines h2 {
        font-size: var(--font-heading);
        margin-bottom: 25px
    }

    .who-lines p {
        font-size: var(--font-subheading)
    }

    .who-description {
        font-size: var(--font-body)
    }

    .hero-video {
        object-position: center
    }
}


/* Shared reference typography and responsive collection layout. */

/* About page — Figma frame 111:1516 */
.about-page {
    padding-top: 92px
}

.about-hero h1 {
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    text-transform: uppercase;
    max-width: 670px;
    margin: 0 0 16px
}

.about-hero__image {
    height: 520px;
    overflow: hidden
}

.about-hero__image img {
    height: 100%;
    object-fit: cover
}

.about-intro {
    max-width: 1126px;
    margin: 78px auto 24px;
    text-align: center
}

.about-intro h2 {
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    letter-spacing: var(--ls-heading);
    text-transform: uppercase;
    margin: 0 auto 32px
}

.about-intro p {
    font-size: var(--font-body);
    line-height: var(--lh-body);
    letter-spacing: 0;
    margin: 0
}

.about-principles {
    position: relative;
    min-height: 1745px;
    padding-top: 20px
}

.about-principles__line {
    position: absolute;
    left: 50%;
    top: 75px;
    bottom: 0;
    width: 1px;
    background: #d3d3d3
}

.about-principle {
    position: relative;
    width: calc(50% - 35px);
    min-height: 500px
}

.about-principle--right {
    margin-left: calc(50% + 35px)
}

.about-principle>span {
    display: block;
    font: 400 var(--font-heading)/1 var(--serif);
    letter-spacing: var(--ls-heading);
    color: #eaeaea
}

.about-principle h3,
.about-person h3,
.about-address h3 {
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    letter-spacing: -.01em;
    text-transform: uppercase;
    margin: 18px 0 28px
}

.about-principle p {
    font-size: var(--font-body);
    line-height: var(--lh-body);
    letter-spacing: 0;
    margin: 0
}

.about-mission {
    height: 335px;
    display: grid;
    place-content: center;
    text-align: center;
    margin-bottom: 50px
}
article.about-person.reveal img {
    border-top-right-radius: 130px;
}
article.about-person.about-person--reverse.reveal img {
    border-top-right-radius: 0px;
    border-top-left-radius: 130px;
}
.about-mission p {
    /* font: 400 var(--font-heading) / var(--lh-heading) var(--serif); */
    /* text-transform: uppercase; */
    margin: 0 0 28px;
    text-align: center;
}
section.about-india img {
    height: 200px;
    width: auto;
    margin: 0 auto;
}
.about-mission h2 {
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    /* text-transform: uppercase; */
    margin: 0
}
.about-rule span {
    font-size: 16px !important;
    font-weight: bold;
    color: #132241 !important;
}
.about-rule {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    gap: 20px;
    margin: 45px 0
}

.about-rule:after {
    content: "";
    height: 1px;
    background: #b7b7b7
}

.about-rule span {
    font-size: var(--font-caption);
    text-transform: uppercase
}

.about-rule span:before {
    content: "";
    display: block;
    width: 7px;
    height: 8px;
    background: var(--ink);
    margin-bottom: 5px
}

.about-team>h2,
.about-sustainability>h2,
.about-india h2 {
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    text-transform: uppercase;
    letter-spacing: -.02em;
    margin: 30px 0 48px
}

.about-person {
    display: grid;
    grid-template-columns: 484px 1fr;
    gap: 26px;
    align-items: start;
    margin-bottom: 60px
}

.about-person--reverse {
    grid-template-columns: 1fr 484px
}

.about-person--reverse img {
    order: 2
}

/* .about-person img {
    height: 671px;
    object-fit: cover
} */

.about-person>div {
    min-height: 671px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-left: 25px
}

.about-person__copy {
    font-size: var(--font-body);
    line-height: var(--lh-body);
    margin: auto 0 40px;
    /* max-width: 870px */
}

.about-person__role {
    font: 400 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase;
    margin: 0
}

.about-person h3 {
    margin: 20px 0 0
}

.about-address {
    max-width: 720px;
    margin-bottom: 25px
}

.about-address p {
    font-size: var(--font-body);
    line-height: var(--lh-body)
}

.about-location {
    height: 386px;
    overflow: hidden
}

.about-location img {
    height: 100%;
    object-fit: cover
}



.about-quote {
    height: 468px;
    position: relative;
    overflow: hidden
}

.about-quote img {
    height: 100%;
    object-fit: cover
}

.about-quote p {
    position: absolute;
    top: 48%;
    left: 44%;
    right: 8%;
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    margin: 0
}

.about-materials {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin: 28px 0 60px
}

.about-materials article {
    min-height: 355px;
    border: 1px solid #d7d4cc;
    padding: 35px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.about-materials p {
    font-size: var(--font-body);
    line-height: var(--lh-body);
    margin: 30px 0 0
}

.about-tree {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 68px;
    align-items: start
}

.about-tree h2 {
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    text-transform: uppercase;
    margin: 0 0 70px
}

.about-tree dl {
    margin-left: 90px
}

.about-tree dt {
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    text-transform: uppercase;
    margin-top: 28px
}

.about-tree dd {
    font-size: var(--font-body);
    line-height: var(--lh-body);
    margin: 6px 0
}

.about-tree img {
    height: 759px;
    object-fit: cover
}

.about-india {
    text-align: center;
    padding: 130px 0 90px
}

.about-india p {
    font-size: var(--font-body);
    line-height: var(--lh-body);
    margin: 0 auto 45px;
    max-width: 1357px
}

.about-india .btn {
    margin: auto
}

@media(max-width:900px) {
    .about-page {
        padding-top: 45px
    }

    .about-hero__image {
        height: 420px
    }

    .about-intro p {
        font-size: var(--font-body)
    }

    .about-principles {
        min-height: auto
    }

    .about-principles__line {
        display: none
    }

    .about-principle,
    .about-principle--right {
        width: 100%;
        margin: 0 0 55px
    }

    .about-principle>span {
        font-size: var(--font-heading)
    }

    .about-principle p {
        font-size: var(--font-body)
    }

    .about-mission {
        padding: 30px;
        height: auto
    }

    .about-mission h2 {
        font-size: var(--font-subheading)
    }

    .about-person,
    .about-person--reverse {
        grid-template-columns: 1fr
    }

    .about-person--reverse img {
        order: 0
    }

    .about-person img {
        height: min(125vw, 671px)
    }

    .about-person>div {
        min-height: 0;
        padding: 0
    }

    .about-person__copy {
        margin: 10px 0 30px
    }

    .about-quote p {
        left: 35%;
        font-size: var(--font-subheading)
    }

    .about-materials,
    .about-tree {
        grid-template-columns: 1fr
    }

    .about-tree dl {
        margin-left: 0
    }

    .about-tree img {
        height: 580px
    }

    .about-india p {
        font-size: var(--font-body)
    }
}

@media(max-width:600px) {
    .about-hero h1 {
        font-size: var(--font-heading)
    }

    .about-hero__image {
        height: 300px
    }

    .about-intro {
        margin-top: 50px
    }

    .about-intro h2 {
        font-size: var(--font-heading)
    }

    .about-intro p,
    .about-principle p,
    .about-person__copy,
    .about-materials p,
    .about-tree dd {
        font-size: var(--font-body)
    }

    .about-principle>span {
        font-size: var(--font-heading)
    }

    .about-mission h2 {
        font-size: var(--font-subheading)
    }

    .about-team>h2,
    .about-sustainability>h2,
    .about-india h2 {
        font-size: var(--font-heading)
    }

    .about-person__role {
        font-size: var(--font-caption)
    }

    .about-person h3 {
        font-size: var(--font-subheading)
    }

    .about-quote {
        height: 360px
    }

    .about-quote p {
        left: 25px;
        right: 25px;
        top: auto;
        bottom: 28px;
        color: white;
        text-shadow: 0 1px 8px #000
    }

    .about-materials article {
        min-height: 300px
    }

    .about-tree h2 {
        font-size: var(--font-heading)
    }

    .about-tree img {
        height: 420px
    }

    .about-india {
        padding-top: 80px
    }
}

/* Precise lower About-page composition from Figma */
@media(min-width:901px) {
    .about-tree {
        position: relative;
        display: block;
        min-height: 759px
    }

    .about-tree>div {
        position: relative;
        z-index: 2;
        width: 61.25%
    }

    .about-tree h2 {
        width: 100%;
        margin-bottom: 45px
    }

    .about-tree dl {
        width: 65.56%;
        margin: 0 0 0 10.9%
    }

    .about-tree img {
        position: absolute;
        z-index: 1;
        right: 0;
        top: 9px;
        width: 48.2%;
        height: 759px
    }

    .about-india {
        padding-top: 140px;
        padding-bottom: 140px
    }

    .about-india h2 {
        margin-bottom: 330px
    }

}

.about-materials {
    gap: 70px;
    margin-top: 42px
}

.about-materials article {
    min-height: 0;
    border: 0;
    padding: 0 12px;
    display: block
}

.about-materials p {
    margin-top: 24px
}

.about-tree h2 {
    color: #d3a064;
    line-height: var(--lh-heading)
}

.about-tree img {
    border-radius: 0 110px 0 0
}

.about-quote img {
    border-top-right-radius: 130px;
}

.about-india__mark {
    width: 250px;
    height: auto;
    /* margin: 42px auto 48px; */
    /* border-block: 4px solid #e1a529; */
    /* display: grid; */
    /* place-content: center; */
    /* transform: rotate(-3deg); */
    /* color: #173a70; */
    /* font-family: var(--sans); */
    /* font-weight: 800; */
    line-height: 1;
    text-transform: uppercase;
    display: block;
    margin: 0 auto;
}

.about-india__mark span {
    font-size: var(--font-caption);
    border-block: 2px solid currentColor;
    padding: 5px 2px
}

.about-india__mark b {
    font-size: var(--font-caption);
    margin-top: 5px
}

@media(min-width:901px) {
    .about-tree h2 {
        width: 118%;
        margin-bottom: 48px
    }

    .about-tree dl {
        margin-left: 4%
    }

    .about-tree img {
        top: 20px;
        height: 739px
    }

    .about-india {
        padding-top: 105px
    }

    .about-india h2 {
        margin-bottom: 0
    }
}

/* Consistent Figma editorial heading scale and quote artwork */
.about-team>h2,
.about-sustainability>h2,
.about-india>h2 {
    font-family: var(--serif);
    font-size: var(--font-heading);
    font-weight: 400;
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    text-transform: uppercase
}

.about-quote__mark {
    position: absolute;
    z-index: 2;
    font: 400 72px/.8 var(--serif);
    color: var(--ink);
    pointer-events: none
}

.about-quote__mark--open {
    left: 39.7%;
    top: 69px
}

.about-quote__mark--close {
    right: 1.2%;
    bottom: -60px
}

.about-quote p {
    z-index: 3
}

.about-india>p {
    font-family: var(--sans);
    font-weight: 300;
    letter-spacing: 0
}

.about-materials p,
.about-tree dd {
    font-weight: 300
}

@media(max-width:900px) {

    .about-team>h2,
    .about-sustainability>h2,
    .about-india>h2 {
        font-size: var(--font-heading);
        letter-spacing: var(--ls-heading)
    }

    .about-quote__mark {
        font-size: 72px
    }

    .about-quote__mark--open {
        left: 22px;
        top: 25px
    }

    .about-quote__mark--close {
        right: 18px;
        bottom: -35px
    }
}

@media(max-width:600px) {
    .about-materials article {
        min-height: 0
    }

    .about-india__mark {
        margin-block: 32px 38px
    }
}


/* Consolidated from framer.css */

/* Shared title face measured on /home-final; served locally on every page. */
@font-face {
    font-family: Baskervville;
    src: url('../fonts/baskervville-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Inter;
    src: url('../fonts/inter-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Inter;
    src: url('../fonts/inter-semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Inter;
    src: url('../fonts/inter-medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Baskervville;
    src: url('../fonts/baskervville-semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

:root {
    --serif: Baskervville, 'Times New Roman', serif
}

.site-header,
.nav {
    height: 94px
}

.site-header .logo {
    width: 170px;
    height: 66px
}

.nav-links {
    margin-left: 65px
}

.mega-menu {
    top:80px
}

.home-section {
    padding: 70px 2vw;
    background: var(--paper)
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 55px
}

.section-heading h2 {
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    letter-spacing: var(--ls-heading);
    text-transform: uppercase;
    margin: 0
}

.section-heading>p {
    font: 400 var(--font-body)/var(--lh-body) var(--sans);
    color: #8b8b88;
    max-width: 510px;
    width: 32%;
    margin: 0;
    text-align: right
}

.action-link {
    display: inline-flex;
    align-items: stretch;
    gap: 18px;
    color: #fff;
    font: 400 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase
}

.action-link>span,
.action-link>b {
    display: grid;
    place-items: center;
    background: var(--ink);
    padding: 20px 24px;
    transition: background .3s
}

.action-link>b {
    padding: 16px;
    width: 58px
}

.action-link svg,
.category-button svg {
    height: 24px;
    width: 24px;
    transition: transform .35s
}

.action-link:hover svg,
.category-card:hover svg {
    transform: translateX(4px)
}

.action-link:hover>span {
    background: #30405f
}

.action-link:focus-visible,
.category-card:focus-visible {
    outline: 2px solid var(--sand);
    outline-offset: 5px
}

.statement-story {
    position: relative
}

.statement-story.is-pinned {
    height: 260vh
}

/* the pinned block is shorter on a phone, so the scroll it needs is shorter
   too — 260vh there meant a long push through three short steps */
@media (max-width:900px) {
    .statement-story.is-pinned {
        height: 200vh
    }
}

.statement-story .who-we-are {
    height: 100vh;
    min-height: 620px
}

.statement-story.is-pinned .who-we-are {
    position: sticky;
    top: 0
}

.statement-images {
    position: absolute;
    inset: 0
}

.statement-images img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.statement-images img:not(:first-child) {
    opacity: 0
}

.who-overlay {
    background: rgba(0, 0, 0, .58)
}

.statement-story .who-copy {
    padding: 40px 3vw;
    display: flex;
    justify-content: center
}

.statement-story .who-lines {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: auto;
    margin-bottom: auto
}

.statement-story .who-lines h2 {
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    letter-spacing: var(--ls-heading);
    white-space: nowrap;
    grid-row: auto
}

.statement-lines {
    display: grid;
    gap: 14px
}

.statement-story .who-lines p {
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    margin: 0;
    color: #fff;
    transition: none
}

.who-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px
}

.statement-story .who-description {
    font: 400 var(--font-body)/var(--lh-body) var(--sans);
    max-width: 550px;
    margin: 0
}

.action-light>span,
.action-light>b {
    background: transparent;
    border: 1px solid #ffffff55
}

.featured-stage {
    height: min(780px, 75vw);
    min-height: 510px;
    background: #fff;
    position: relative;
    overflow: hidden
}

.featured-stage>img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.featured-title {
    position: absolute;
    top: 5%;
    left: 0;
    right: 0;
    text-align: center
}

.featured-title h3 {
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    margin: 0 0 20px;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: var(--ls-heading)
}

.testimonials {
    padding: 100px 3vw 60px
}

.testimonials .section-heading>p {
    text-align: left
}

.testimonial-window {
    height: 650px;
    overflow: hidden;
    mask-image: linear-gradient(transparent, #000 12%, #000 84%, transparent)
}

.testimonial-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 65px;
    padding: 35px 25px
}

.testimonial-column {
    display: flex;
    flex-direction: column;
    gap: 80px
}

.testimonial-column:nth-child(2) {
    padding-top: 100px
}

.testimonial-column:nth-child(3) {
    padding-top: 30px
}

.testimonial {
    margin: 0;
    color: #8b8b88;
    font: 400 var(--font-body)/var(--lh-body) var(--sans)
}

.testimonial blockquote {
    margin: 0 0 24px
}

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

.testimonial figcaption img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover
}

.testimonial strong,
.testimonial figcaption span {
    display: block
}

.testimonial strong {
    font-weight: 600
}

.categories {
    padding: 65px 1vw 35px
}

.categories .section-heading {
    padding: 0 2vw;
    margin-bottom: 80px
}

.category-grid {
    display: flex;
    gap: 15px
}

.category-card {
    display: flex;
    flex: 1;
    min-width: 0;
    border: 1px solid #e0ded7;
    height: 500px;
    overflow: hidden;
    transition: flex .8s cubic-bezier(.22, 1, .36, 1)
}

.category-card:first-child {
    flex: 1.9
}

.category-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    flex: 0 0 50%;
    padding: 30px;
    min-width: 0
}

.category-copy h3 {
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
    letter-spacing: var(--ls-heading)
}

.category-copy p {
    max-width: 220px;
    font: 400 var(--font-body)/var(--lh-body) var(--sans);
    margin: 30px 0
}

.category-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--ink);
    color: white;
    padding: 18px 20px;
    white-space: nowrap;
    font: 400 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase
}

.category-image {
    flex: 1;
    min-width: 0;
    overflow: hidden
}

.category-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.22, 1, .36, 1)
}

.category-card:not(:first-child) .category-copy {
    flex-basis: 100%;
    transition: flex-basis .8s cubic-bezier(.22, 1, .36, 1)
}

.category-card:not(:first-child) .category-copy p {
    opacity: 0;
    transition: opacity .4s
}

.category-grid:has(.category-card:last-child:hover) .category-card:first-child,
.category-grid:has(.category-card:last-child:focus-visible) .category-card:first-child {
    flex: 1
}

.category-card:last-child:hover,
.category-card:last-child:focus-visible {
    flex: 1.9
}

.category-card:last-child:hover .category-copy,
.category-card:last-child:focus-visible .category-copy {
    flex-basis: 50%
}

.category-card:last-child:hover .category-copy p,
.category-card:last-child:focus-visible .category-copy p {
    opacity: 1
}

.category-card:hover img {
    transform: scale(1.035)
}

.home-lower {
    width: calc(100% - 5vw);
    max-width: none;
    background: white;
    padding: 0 2vw 65px
}

.home-lower .rule-label {
    padding-top: 30px;
    margin-top: 0
}

.line-cta {
    position: relative;
    min-height: 480px;
    border: 0;
    border-radius: 0;
    background: #fff;
    padding: 65px 4%;
    margin: 60px 0 0;
    overflow: hidden
}

.cta-outline {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    stroke: #c5c5c5;
    stroke-width: 1
}

.line-cta .cta-copy {
    position: relative;
    width: 65%
}

.line-cta h2 {
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    letter-spacing: var(--ls-heading);
    margin: 35px 0 55px;
    max-width: none
}

.cta-actions {
    display: flex;
    gap: 22px;
    flex-wrap: wrap
}

.action-plain>span,
.action-plain>b {
    background: transparent;
    color: var(--ink);
    padding-inline: 10px
}

.action-plain {
    gap: 0
}

.action-plain:hover>span {
    background: transparent
}

@media(max-width:1100px) {
    .nav-links {
        margin-left: 30px;
        gap: 18px
    }

    .category-copy {
        padding: 22px
    }

    .category-button {
        padding: 15px 10px;
        font-size: var(--font-caption)
    }

    .testimonial-columns {
        gap: 35px
    }

    .section-heading {
        gap: 25px
    }
}

@media(max-width:900px) {

    .site-header,
    .nav {
        height: 82px
    }

    .site-header .logo {
        width: 145px;
        height: 56px
    }

    .nav-links {
        top: 82px;
        margin: 0
    }

    .mega-menu {
        top: 82px
    }

    .mega-menu.open {
        max-height: calc(100vh - 82px)
    }

    .home-section {
        padding: 55px 20px
    }

    .section-heading {
        display: block;
        margin-bottom: 32px
    }

    .section-heading>p {
        width: auto;
        max-width: 520px;
        text-align: left;
        margin-top: 20px
    }

    .statement-story .who-lines {
        display: block
    }

    .statement-story .who-lines h2 {
        margin-bottom: 28px
    }

    .statement-story .who-we-are {
        min-height: 690px
    }

    .who-bottom {
        display: block
    }

    .who-bottom .action-link {
        margin-top: 25px
    }

    .statement-story .who-description {
        max-width: 500px
    }

    .featured-stage {
        height: 600px;
        min-height: 0
    }

    .featured-title {
        top: 7%
    }

    .featured-title h3 {
        font-size: var(--font-subheading)
    }

    .testimonial-columns {
        gap: 28px;
        padding-inline: 0
    }

    .testimonial-window {
        height: 700px
    }

    .testimonial-column {
        gap: 50px
    }

    .testimonial figcaption {
        align-items: flex-start;
        flex-direction: column
    }

    .category-grid {
        display: grid;
        grid-template-columns: 1fr
    }

    .category-card,
    .category-card:first-child {
        height: 420px
    }

    .category-card:not(:first-child) .category-copy {
        flex-basis: 50%
    }

    .category-card:not(:first-child) .category-copy p {
        opacity: 1
    }

    .category-copy h3 {
        font-size: var(--font-subheading);
        white-space: normal
    }

    .categories .section-heading {
        padding: 0;
        margin-bottom: 35px
    }

    .line-cta {
        min-height: 420px;
        padding: 45px 25px
    }

    .line-cta .cta-copy {
        width: 85%
    }

    .line-cta h2 {
        font-size: var(--font-heading)
    }

    .action-link {
        gap: 10px
    }

    .action-link>span {
        padding: 16px
    }

    .action-link>b {
        width: 46px;
        padding: 10px
    }
}

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

    .testimonial-window {
        height: auto;
        mask-image: none;
        overflow: visible
    }

    .testimonial-column:nth-child(n) {
        padding: 0;
        gap: 36px
    }

    .testimonial-columns {
        gap: 36px
    }

    .testimonial {
        font-size: var(--font-body)
    }

    .testimonial figcaption {
        flex-direction: row;
        align-items: center
    }

    .testimonial {
        padding-bottom: 25px;
        border-bottom: 1px solid #e5e2da
    }

    .featured-stage {
        height: 450px
    }

    .featured-title h3 {
        font-size: var(--font-subheading)
    }

    .featured-title .action-link {
        font-size: var(--font-caption)
    }

    .category-card {
        height: auto;
        flex-direction: column
    }

    .category-copy {
        gap: 25px
    }

    .category-copy p {
        margin: 0
    }

    .category-image {
        height: 270px;
        flex: auto
    }

    .line-cta .cta-copy {
        width: 100%
    }

    .line-cta {
        padding: 45px 22px
    }

    .line-cta h2 {
        font-size: var(--font-heading)
    }

    .line-cta h2 br {
        display: none
    }

    .cta-outline path:not(:first-child) {
        opacity: .25
    }

    .cta-actions {
        gap: 16px
    }

    .who-copy .who-lines p {
        font-size: var(--font-subheading)
    }

    .statement-story .who-copy {
        padding: 45px 24px
    }

    .section-heading h2 {
        font-size: var(--font-heading)
    }
}

main h1,
main h2,
main h3,
.hero h1,
.enquiry-hero h1,
.showcase-main h2,
.cta h2,
.who-lines h2 {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: var(--ls-heading)
}

.display {
    font-size: var(--font-heading);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading)
}

.section-title {
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading)
}

.title-word {
    display: inline-block;
    white-space: nowrap
}

.title-char {
    display: inline-block
}

.collection-story {
    position: relative;
    background: var(--paper);
    height: auto
}

.collection-pin {
    position: relative;
    padding-top: 88px;
    overflow: hidden
}

.collection-kicker {
    position: absolute;
    inset: 16px 0 auto;
    display: flex;
    flex-direction: column;
    font-size: var(--font-caption);
    text-transform: uppercase;
    z-index: 2
}

.collection-kicker:after {
    content: '';
    position: absolute;
    left: 138px;
    right: 0;
    top: 20px;
    height: 1px;
    background: #d9d7d1
}

.collection-kicker i {
    width: 11px;
    height: 11px;
    background: var(--ink);
    border-radius: 0 2px;
    margin-bottom: 5px
}

.collection-stage {
    position: relative;
    display: grid;
    gap: 32px
}

.collection-slide {
    position: relative;
    background: #fff;
    visibility: visible;
    opacity: 1;
    overflow: hidden;
    min-width: 0
}

.collection-visual {
    overflow: hidden;
    border-radius: 0 90px 0 90px
}

.collection-visual img,
.collection-detail img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.collection-detail {
    overflow: hidden;
    border-radius: 0 0 8px 90px
}

.collection-content {
    color: var(--accent)
}

.collection-content h2 {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: var(--ls-heading);
    line-height: var(--lh-heading);
    text-transform: uppercase;
    margin: 0
}

.collection-features {
    color: var(--ink)
}

.collection-features span {
    display: block;
    font: 400 var(--font-caption)/1.4 var(--sans);
    border-bottom: 1px solid #d9d9d9;
    padding: 18px 2px;
    text-transform: uppercase
}

.collection-features span:last-child {
    border-bottom: 0
}

.collection-features span:before {
    content: '';
    display: block;
    width: 11px;
    height: 12px;
    background: var(--sand);
    margin-bottom: 6px
}

.collection-link {
    display: inline-flex;
    gap: 18px;
    color: #fff;
    font: 400 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase
}

.collection-link>span,
.collection-link b {
    background: var(--accent);
    display: grid;
    place-items: center;
    transition: filter .2s
}

.collection-link>span {
    padding: 18px 24px
}

.collection-link b {
    width: 54px;
    flex-shrink: 0
}

.collection-link svg {
    width: 24px;
    height: 24px;
    transition: transform .3s
}

.collection-link:hover svg {
    transform: translateX(4px)
}

.collection-link:hover>span {
    filter: brightness(.92)
}

.collection-link:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 5px
}

@media(min-width:901px) {
    .collection-story.is-scrolling {
        height: calc(100vh + 300vw)
    }

    .collection-pin {
        height: 100vh;
        min-height: 600px
    }

    .is-scrolling .collection-pin {
        position: sticky;
        top: 0
    }

    .collection-stage {
        display: flex;
        gap: 0;
        width: 100%;
        height: 100%
    }

    .collection-story:not(.is-scrolling) .collection-stage {
        overflow-x: auto;
        scroll-snap-type: x mandatory
    }

    .collection-slide {
        flex: 0 0 89.1vw;
        height: 100%;
        scroll-snap-align: start
    }

    .collection-visual {
        position: absolute;
        left: 0;
        top: 0;
        width: 47.9%;
        height: 100%
    }

    .collection-detail {
        position: absolute;
        left: 73.7%;
        top: 0;
        width: 19.6%;
        height: 48.2%
    }

    .collection-content {
        position: absolute;
        inset: 0;
        padding: 0;
        pointer-events: none
    }

    .collection-features {
        position: absolute;
        left: 50.3%;
        top: 7.3%;
        width: 19.3%
    }

    .collection-features span {
        padding: 18px 2px;
        font-size: var(--font-caption)
    }

    .collection-content h2 {
        position: absolute;
        left: 49.3%;
        top: 58.2%;
        font-size: var(--font-heading);
        white-space: nowrap
    }

    .collection-link {
        position: absolute;
        left: 48.9%;
        bottom: 0
    }
}

@media(max-width:900px) {
    .collection-pin {
        padding: 88px 15px 30px;
        min-height: 0;
        height: auto
    }

    .collection-kicker {
        left: 15px;
        right: 15px
    }

    .collection-stage {
        display: grid
    }

    .collection-slide {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 0
    }

    .collection-visual {
        grid-column: 1/-1;
        height: 420px
    }

    .collection-detail {
        grid-column: 2;
        grid-row: 2;
        height: 190px;
        margin: 24px 20px 0 0
    }

    .collection-content {
        grid-column: 1/-1;
        grid-row: 2;
        padding: 24px 20px;
        display: block
    }

    .collection-features {
        width: 48%;
        margin: 0
    }

    .collection-features span {
        padding: 10px 0;
        font-size: var(--font-caption)
    }

    .collection-content h2 {
        font-size: var(--font-heading);
        margin: 28px 0 0
    }

    .collection-link {
        grid-column: 1/-1;
        position: static;
        justify-self: start;
        margin: 0 20px 24px;
        gap: 12px;
        font-size: var(--font-caption)
    }

    .collection-link>span {
        padding: 16px
    }

    .collection-link b {
        width: 48px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *:before,
    *:after {
        animation: none !important;
        transition: none !important
    }

    .reveal {
        visibility: visible
    }
}

.line-cta .cta-copy h2 {
    font-family: var(--sans);
    font-weight: 400
}

/* The source logo has a large transparent canvas; crop it in its display box. */
.site-header .brand {
    position: relative;
    display: block;
    width: 170px;
    height: 54px;
    overflow: hidden
}

.site-header .logo {
    position: absolute;
    width: 123.75%;
    height: auto;
    max-width: none;
    left: -12.9%;
    top: 50%;
    transform: translateY(-50%)
}

@media(max-width:900px) {
    .site-header .brand {
        width: 140px;
        height: 46px
    }
}

@media(min-width:901px) {
    .category-card {
        height: clamp(350px, 26.3vw, 500px)
    }

    .category-copy {
        transition: flex-basis .8s cubic-bezier(.22, 1, .36, 1)
    }

    .category-copy p {
        transition: opacity .35s
    }

    .category-grid:has(.category-card:last-child:hover) .category-card:first-child .category-copy,
    .category-grid:has(.category-card:last-child:focus-visible) .category-card:first-child .category-copy {
        flex-basis: 100%
    }

    .category-grid:has(.category-card:last-child:hover) .category-card:first-child .category-copy p,
    .category-grid:has(.category-card:last-child:focus-visible) .category-card:first-child .category-copy p {
        opacity: 0
    }
}



/* Consolidated from cove-collection.css */

.cove-page {
    max-width: 1440px;
    margin: auto
}

.cove-hero {
    height: 720px;
    position: relative;
    overflow: hidden;
    background: #ead5cd
}

.cove-hero-image {
    position: absolute;
    inset: 0
}

.cove-hero-image:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(251, 249, 243, .96) 0, rgba(251, 249, 243, .8) 34%, transparent 67%)
}

.cove-hero-image img {
    height: 100%;
    object-fit: cover;
    object-position: center
}

.cove-hero-copy {
    position: relative;
    z-index: 1;
    width: 48%;
    height: 100%;
    padding: 100px 0 70px 3.2%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.cove-hero h1,
.cove-section-head h2,
.complete-spaces>h2 {
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    letter-spacing: var(--ls-heading);
    text-transform: uppercase;
    margin: 22px 0
}

.cove-hero-copy>p:last-child {
    font: 400 var(--font-body)/var(--lh-body) var(--sans);
    text-transform: uppercase;
    max-width: 460px;
    color: #676767
}

.cove-products {
    padding: 110px 2.6% 0
}

.cove-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 70px
}

.cove-section-head h2 {
    margin: 0
}

.cove-section-head>p {
    max-width: 360px;
    color: #777;
    font: 400 var(--font-body)/var(--lh-body) var(--sans);
    text-transform: uppercase;
    text-align: right
}

.cove-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr)
}

.cove-card {
    height: 480px;
    border: 1px solid #ddd;
    margin: -1px 0 0 -1px;
    position: relative;
    overflow: hidden;
    padding: 28px;
    transition: color .45s, background .45s, border-radius .65s cubic-bezier(.22, 1, .36, 1), transform .45s
}

.cove-card .eyebrow {
    position: relative;
    z-index: 2;
    font: 400 var(--font-caption)/1.4 var(--sans);
    color: #676767;
    max-width: 220px;
    transition: color .4s
}

.cove-card-media {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 78px;
    height: 285px;
    display: grid;
    place-items: center
}

.cove-card-media img {
    height: 100%;
    object-fit: contain;
    transition: transform .75s cubic-bezier(.22, 1, .36, 1), filter .4s
}

.cove-card h3 {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 27px;
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    text-transform: uppercase;
    margin: 0;
    z-index: 2;
    transition: transform .45s
}

.cove-card>span {
    position: absolute;
    left: 28px;
    top: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--ink);
    padding: 11px 15px;
    font: 600 var(--font-tiny)/1.4 var(--sans);
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(-10px);
    transition: .4s;
    z-index: 3
}

.cove-card>span img {
    width: 20px;
    height: 20px;
    filter: brightness(0)
}

.cove-card:focus-visible {
    outline: 3px solid var(--sand);
    outline-offset: -4px;
    background: var(--ink);
    color: #fff;
    border-radius: 0 75px 0 75px
}

.cove-card:focus-visible .eyebrow {
    opacity: 0
}

.cove-card:focus-visible>span {
    opacity: 1;
    transform: none
}

.cove-card:focus-visible .cove-card-media img {
    transform: scale(1.12)
}

@media(hover:hover) {
    .cove-card:hover {
        background: var(--ink);
        color: #fff;
        border-radius: 0 75px 0 75px;
        z-index: 2;
        transform: translateY(-3px)
    }

    .cove-card:hover .eyebrow {
        opacity: 0
    }

    .cove-card:hover>span {
        opacity: 1;
        transform: none
    }

    .cove-card:hover .cove-card-media img {
        transform: scale(1.12);
        filter: drop-shadow(0 18px 20px #0005)
    }

    .cove-card:hover h3 {
        transform: translateX(6px)
    }
}

.complete-spaces {
    padding: 105px 2.6% 40px
}

.complete-spaces>h2 {
    margin: 0 0 95px
}

.space-feature {
    min-height: 690px;
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 40px;
    background: #fff;
    margin-bottom: 35px
}

.space-feature h3 {
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    text-transform: uppercase;
    letter-spacing: var(--ls-heading);
    margin: 15px 0;
    color: var(--sand)
}

.space-feature .eyebrow {
    position: absolute;
    left: 35px;
    top: 35px;
    text-align: left
}

.space-image {
    height: 520px;
    display: grid;
    place-items: center
}

.space-image img {
    height: 100%;
    object-fit: contain;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1)
}

.space-feature>a {
    position: absolute;
    right: 28px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    font: 600 var(--font-caption) var(--sans)
}

.space-feature>a img {
    width: 24px;
    height: 24px
}

.space-feature:hover .space-image img {
    transform: scale(1.035)
}

.space-feature--grove {
    background: #fff
}

.space-feature--pebble {
    background: #edf2f7
}

.space-feature--pebble h3 {
    color: #5f677d
}

.cove-enquiry {
    margin: 90px 2.6%;
    min-height: 470px;
    border: 1px solid #c4c4c4;
    border-radius: 0 130px;
    position: relative;
    overflow: hidden;
    padding: 75px 5%;
    display: flex;
    align-items: center
}

.cove-enquiry>div:first-child {
    position: relative;
    z-index: 2
}

.cove-enquiry h2 {
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    letter-spacing: var(--ls-heading);
    margin: 35px 0 55px;
    text-transform: capitalize
}

.cove-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap
}

.cove-enquiry-lines {
    position: absolute;
    right: 0;
    top: 35%;
    width: 43%;
    height: 65%;
    border: 1px solid #c4c4c4;
    border-radius: 120px 0 0 0
}

.cove-enquiry-lines:after {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 50%;
    height: 58%;
    border: 1px solid #c4c4c4;
    border-radius: 90px 0 0 0
}

@media(max-width:900px) {
    .cove-hero {
        height: 620px
    }

    .cove-hero-copy {
        width: 65%;
        padding-left: 25px
    }

    .cove-product-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .cove-card {
        height: 420px
    }

    .cove-section-head {
        display: block
    }

    .cove-section-head>p {
        text-align: left
    }

    .space-feature {
        min-height: 570px
    }

    .space-image {
        height: 430px
    }

    .cove-enquiry-lines {
        opacity: .45
    }
}

@media(max-width:600px) {
    .cove-hero {
        height: 660px
    }

    .cove-hero-copy {
        width: 100%;
        justify-content: flex-end;
        padding: 35px 20px
    }

    .cove-hero-image:after {
        background: linear-gradient(0deg, rgba(251, 249, 243, .95), transparent 75%)
    }

    .cove-hero h1 {
        font-size: var(--font-heading)
    }

    .cove-product-grid {
        grid-template-columns: 1fr
    }

    .cove-products,
    .complete-spaces {
        padding-inline: 20px
    }

    .cove-card {
        height: 430px
    }

    .cove-section-head h2,
    .complete-spaces>h2 {
        font-size: var(--font-heading)
    }

    .space-feature {
        min-height: 480px;
        padding: 30px 12px
    }

    .space-feature .eyebrow {
        position: relative;
        left: auto;
        top: auto;
        text-align: left
    }

    .space-feature h3 {
        font-size: var(--font-subheading)
    }

    .space-image {
        height: 340px
    }

    .cove-enquiry {
        margin: 60px 20px;
        padding: 45px 24px;
        min-height: 440px;
        border-radius: 0 75px
    }

    .cove-enquiry h2 {
        font-size: var(--font-heading)
    }

    .cove-enquiry h2 br {
        display: none
    }

    .cove-enquiry-lines {
        display: none
    }
}



/* Consolidated from cove-figma-fix.css */

.site-header.overlay {
    color: #132241;
    background: transparent
}

.site-header.overlay .logo {
    filter: none
}

.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
}

.cove-page {
    max-width: 1440px
}

.cove-hero {
    height: 700px;
    background: #fbf9f3
}

.cove-hero-image:after {
    display: none
}

.cove-hero-image img {
    height: 100%;
    object-fit: cover;
    object-position: center
}

.cove-hero-copy {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 179px 39px 86px;
    display: grid;
    grid-template-columns: 730px 1fr;
    gap: 141px;
    align-items: start;
    justify-content: initial
}

.cove-hero-copy>div:first-child {
    display: flex;
    flex-direction: column;
    gap: 26px
}

.cove-hero-copy .eyebrow {
    width: 199px;
    color: #676767;
    margin: 0;
    font: 400 var(--font-caption)/1.4 var(--sans);
    letter-spacing: .06em
}

.cove-hero-copy .eyebrow:before {
    width: 7px;
    height: 8px;
    border-radius: 0 2px 0 2px;
    margin-bottom: 5px;
    background: #132241
}

.cove-hero h1 {
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    letter-spacing: var(--ls-heading);
    margin: 0;
    color: #132241
}

.cove-hero-summary {
    padding-top: 35px;
    width: 490px
}

.cove-hero-summary>p {
    margin: 0;
    color: #676767;
    font: 400 var(--font-body)/var(--lh-body) var(--sans);
    letter-spacing: 0;
    text-transform: uppercase
}

.cove-hero-summary>a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 45px;
    padding: 12px 20px;
    font: 600 var(--font-caption)/1.4 var(--sans);
    letter-spacing: .06em;
    text-transform: uppercase
}

.cove-hero-summary>a img {
    width: 24px;
    height: 24px
}

.cove-scroll-cue {
    position: absolute;
    z-index: 3;
    left: 39px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 13px;
    font: 500 var(--font-tiny)/1.4 var(--sans);
    text-transform: uppercase;
    color: #676767
}

.cove-scroll-cue i {
    display: block;
    width: 54px;
    height: 1px;
    background: #676767;
    transform-origin: left;
    animation: cove-cue 1.8s ease-in-out infinite
}

@keyframes cove-cue {
    50% {
        transform: scaleX(.3)
    }
}

.cove-products {
    padding: 95px 19px 0
}

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

.cove-card {
    height: 522px;
    margin: 0;
    padding: 27px 28px;
    border: 1px solid #ddd;
    border-radius: 16px 134px 16px 16px;
    transform: none;
    background: #fbf9f3
}

.cove-card .eyebrow {
    max-width: 270px;
    margin: 0;
    font: 400 var(--font-caption)/1.4 var(--sans);
    letter-spacing: .06em
}

.cove-card .eyebrow:before {
    width: 7px;
    height: 8px;
    border-radius: 0 2px 0 2px;
    margin-bottom: 5px
}

.cove-card h3 {
    top: 72px;
    bottom: auto;
    left: 28px;
    right: 20px;
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    letter-spacing: var(--ls-heading)
}

.cove-card h3 em {
    color: #b5b5b5;
    font: inherit;
    font-style: normal
}

.cove-card-media {
    left: 0;
    right: 0;
    top: 136px;
    height: 386px
}

.cove-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.cove-card>span {
    left: 28px;
    top: 145px
}

.cove-card:focus-visible {
    border-radius: 16px 134px 16px 16px
}

.cove-card:focus-visible h3 {
    color: #fff
}

@media(hover:hover) {
    .cove-card:hover {
        border-radius: 16px 134px 16px 16px;
        transform: none
    }

    .cove-card:hover h3 {
        transform: none;
        color: #fff
    }

    .cove-card:hover h3 em {
        color: #9aa3b5
    }

    .cove-card:hover .cove-card-media img {
        transform: none;
        filter: none
    }
}

@media(max-width:900px) {
    .cove-hero {
        height: 720px
    }

    .cove-hero-copy {
        padding: 130px 25px 55px;
        grid-template-columns: 1fr;
        gap: 34px
    }

    .cove-hero-summary {
        padding: 0;
        width: min(490px, 100%)
    }

    .cove-hero-image img {
        object-position: 62% center;
        opacity: .46
    }

    .cove-products {
        padding-top: 48px
    }

    .cove-product-grid {
        gap: 20px;
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .cove-card {
        height: 470px
    }

    .cove-card-media {
        height: 330px
    }
}

@media(max-width:600px) {
    .cove-hero {
        height: 680px
    }

    .cove-hero-copy {
        padding: 120px 20px 50px;
        justify-content: start
    }

    .cove-hero h1 {
        font-size: var(--font-subheading);
        line-height: var(--lh-subheading)
    }

    .cove-hero-summary>p {
        font-size: var(--font-body);
        line-height: var(--lh-body)
    }

    .cove-scroll-cue {
        left: 20px
    }

    .cove-products {
        padding: 34px 0 12px 20px;
        overflow: hidden
    }

    .cove-product-grid {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 0 20px 18px 0;
        scrollbar-width: thin
    }

    .cove-card {
        flex: 0 0 min(84vw, 390px);
        height: 460px;
        scroll-snap-align: start
    }

    .cove-card h3 {
        font-size: var(--font-subheading);
        line-height: var(--lh-subheading)
    }

    .cove-card-media {
        top: 125px;
        height: 335px
    }
}

@media(hover:hover) {
    .cove-card:hover {
        background: #fff;
        color: #132241
    }

    .cove-card:hover .eyebrow,
    .cove-card:hover h3 {
        opacity: 0
    }

    .cove-card:hover>span {
        display: flex;
        gap: 7px;
        align-items: stretch;
        left: 22px;
        top: 36px;
        padding: 0;
        background: transparent;
        transform: none
    }

    .cove-card:hover>span>img {
        width: 46px;
        height: 48px;
        object-fit: contain;
        padding: 12px;
        background: #fbf9f3;
        border-radius: 11px
    }

    .cove-card:hover>span>b {
        display: flex;
        align-items: center;
        padding: 12px 20px;
        background: #132241;
        color: #fbf9f3;
        border-radius: 2px 2px 11px 2px;
        font: 600 var(--font-caption)/1.4 var(--sans);
        letter-spacing: .06em
    }

    .cove-card:hover .cove-card-media {
        top: 91px;
        height: 436px
    }

    .cove-card:hover .cove-card-media img {
        width: 100%;
        height: 100%;
        object-fit: contain
    }
}

@media(hover:hover) {
    .cove-card:nth-child(1):hover .cove-card-media {
        left: -38px;
        right: -36px;
        top: 120px;
        height: 396px
    }

    .cove-card:nth-child(2):hover .cove-card-media {
        left: -72px;
        right: -57px;
        top: 91px;
        height: 436px
    }

    .cove-card:nth-child(3):hover .cove-card-media {
        left: -38px;
        right: -37px;
        top: 145px;
        height: 396px
    }

    .cove-card:nth-child(4):hover .cove-card-media {
        left: 48px;
        right: 50px;
        top: 194px;
        height: 339px
    }

    .cove-card:nth-child(5):hover .cove-card-media {
        left: 49px;
        right: 50px;
        top: 211px;
        height: 294px
    }

    .cove-card:nth-child(6):hover .cove-card-media {
        left: 55px;
        right: 56px;
        top: 256px;
        height: 232px
    }
}

@media(max-width:600px) {
    .cove-card>span {
        display: none
    }
}

.cove-hero {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw)
}

.cove-card-media {
    transition: left .7s cubic-bezier(.22, 1, .36, 1), right .7s cubic-bezier(.22, 1, .36, 1), top .7s cubic-bezier(.22, 1, .36, 1), height .7s cubic-bezier(.22, 1, .36, 1)
}

.cove-card-media .cove-base-image,
.cove-card-media .cove-hover-image {
    position: absolute;
    inset: 0;
    transition: opacity .55s ease, transform .75s cubic-bezier(.22, 1, .36, 1)
}

.cove-card-media .cove-base-image {
    opacity: 1
}

.cove-card-media .cove-hover-image {
    opacity: 0
}

.cove-card>span {
    transition: opacity .4s ease, transform .55s cubic-bezier(.22, 1, .36, 1)
}

.cove-card>span>img {
    filter: none
}

@media(hover:hover) {
    .cove-card:hover .cove-card-media .cove-base-image {
        opacity: 0;
        transform: scale(.97)
    }

    .cove-card:hover .cove-card-media .cove-hover-image {
        opacity: 1;
        transform: scale(1)
    }

    .cove-card:hover>span>img {
        filter: none
    }
}

@media(prefers-reduced-motion:reduce) {

    .cove-card-media,
    .cove-card-media img,
    .cove-card>span {
        transition: none !important
    }

    .cove-scroll-cue i {
        animation: none
    }
}



/* Consolidated from cove-social.css. The header overrides that once lived here
   (100px bar, sentence-case links, a bigger brand mark and a matching mega-menu
   offset) have been removed: the product page uses the same header as every
   other page, so it inherits the shared rules instead. */

/* Home hero: transparent overlay with white navigation. */
body[data-page="home"] .site-header.overlay {
    color: #fff;
    background: linear-gradient(180deg, rgba(8, 8, 8, .72), rgba(8, 8, 8, .24) 72%, transparent)
}

body[data-page="home"] .site-header.overlay .logo {
    filter: brightness(0) invert(1)
}

.social-page {
    background: var(--paper)
}

.social-page .container {
    width: min(var(--measure), calc(100% - 60px))
}

.social-page h2 {
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    letter-spacing: var(--ls-heading);
    text-transform: uppercase;
    margin: 30px 0
}

.social-page section[id] {
    scroll-margin-top: 110px
}

.social-hero {
    position: relative;
    padding: 45px 0 59px;
    background: #fff;
    box-shadow: 0 0 0 100vmax #fff;
    clip-path: inset(0 -100vmax)
}

.social-hero header {
    text-align: center;
    margin-bottom: 43px
}

.social-hero h1 {
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    text-transform: uppercase;
    letter-spacing: var(--ls-heading);
    margin: 0
}

.social-hero header p {
    font-size: var(--font-caption);
    line-height: 1.4;
    color: #676767;
    text-transform: uppercase;
    margin: 6px 0 0
}

.social-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 533fr) minmax(0, 808fr);
    gap: 26px;
    align-items: start
}

.social-hero__copy>p {
    font-size: var(--font-body);
    line-height: var(--lh-body);
    letter-spacing: 0;
    text-transform: none;
    margin: 0 0 20px
}

.social-capacity:before,
.social-rule span:before,
.social-related .eyebrow:before {
    content: "";
    display: block;
    width: 7px;
    height: 8px;
    background: var(--ink);
    border-radius: 0 2px;
    margin-bottom: 5px
}

.social-capacity span {
    display: block;
    color: #676767;
    font-size: var(--font-tiny);
    line-height: 1.4;
    text-transform: uppercase
}

.social-capacity strong {
    display: block;
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif)
}

.social-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 40px
}

.social-actions .btn {
    font-size: var(--font-caption);
    white-space: nowrap;
    padding: 12px 20px;
    line-height: 1.4
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    font-size: var(--font-caption);
    line-height: 1.4;
    font-weight: 700;
    text-transform: uppercase
}

.social-front {
    position: relative;
    overflow: hidden;
    background: #fff;
    aspect-ratio: 808/458
}

.social-front>img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: 132.42%;
    object-fit: fill
}

.social-mosaic {
    display: grid;
    grid-template-columns: 777fr 571fr;
    grid-template-rows: 410px 217px;
    gap: 20px 22px;
    padding: 56px 0 62px
}

.social-mosaic .social-front {
    aspect-ratio: auto
}

.social-mosaic>img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.social-mosaic__lifestyle {
    grid-column: 2;
    grid-row: 1/3;
    object-position: 52% center
}

.social-subnav {
    position: sticky;
    top: 0;
    z-index: 20;
    width: min(1393px, calc(100% - 46px));
    min-height: 86px;
    margin: auto;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 67px;
    font: 400 var(--font-caption)/1.4 var(--sans)
}

.social-subnav a {
    white-space: nowrap;
    padding: 24px 0
}

.social-subnav a:hover,
.social-subnav a:focus-visible {
    color: #a27254
}

.social-section {
    padding: 74px 14px 0
}

.social-rule {
    display: flex;
    gap: 0;
    align-items: center;
    margin-bottom: 32px
}

.social-rule:after {
    content: "";
    height: 1px;
    background: #c9c7c0;
    flex: 1
}

.social-rule span {
    flex: 0 0 199px;
    color: #676767;
    font-size: var(--font-caption);
    line-height: 1.4;
    text-transform: uppercase
}

.social-ideal {
    padding-bottom: 16px
}

.social-ideal .social-rule {
    max-width: 493px;
    margin-bottom: 46px
}

.social-ideal__grid {
    display: grid;
    grid-template-columns: minmax(0, 724fr) minmax(0, 607fr);
    gap: 40px;
    align-items: start
}

.social-ideal ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 23px
}

.social-ideal li {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 105px;
    padding: 20px 0 20px 69px;
    border-block: 1px solid #efefef;
    font-size: var(--font-body);
    line-height: var(--lh-body);
    letter-spacing: 0;
    text-transform: none
}

.social-ideal li:before {
    content: "";
    position: absolute;
    left: -16px;
    top: -10px;
    width: 65px;
    height: 49px;
    background: #f3b970;
    opacity: .23;
    border-radius: 4px 4px 21px 4px
}

.social-ideal__grid .social-front {
    margin-top: 18px
}

.social-lede {
    max-width: 604px;
    font-size: var(--font-body);
    line-height: var(--lh-body);
    letter-spacing: 0;
    margin: 0 0 78px
}

.finish-grid {
    display: grid;
    grid-template-columns: 882fr 499fr;
    margin-inline: -14px
}

.finish-detail {
    display: block;
    height: 522px;
    width: 100%;
    object-fit: cover;
    border: 1px solid #ddd;
    transition: opacity .2s
}

.finish-detail.is-changing {
    opacity: .3
}

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

.swatch-grid button {
    min-height: 261px;
    border: 1px solid #ddd;
    background: transparent;
    display: grid;
    place-items: center;
    position: relative;
    cursor: pointer
}

.swatch-grid button:last-child {
    grid-column: 1/-1
}

.swatch-grid small {
    position: absolute;
    right: 10px;
    top: 8px;
    color: #6f6e6e;
    font-size: var(--font-tiny);
    line-height: 1.4;
    text-transform: uppercase
}

.swatch-grid img {
    width: 150px;
    height: 150px;
    object-fit: cover
}

.swatch-grid button:focus-visible,
.swatch-grid button.active {
    outline: 1px solid #a27254;
    outline-offset: -5px
}

.social-gallery {
    padding-top: 105px;
    padding-inline: 0;
    overflow: hidden
}

.gallery-heading {
    margin: 0 0 74px;
    padding-left: 34.1%
}

.social-gallery h2 {
    font-size: var(--font-heading);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    margin: 0
}

.social-gallery__viewport {
    position: relative;
    touch-action: pan-y;
    cursor: grab
}

.social-gallery__viewport:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px
}

.social-gallery__viewport.is-dragging {
    cursor: grabbing
}

.social-gallery__track {
    display: flex;
    align-items: flex-start;
    gap: 36px;
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
    will-change: transform
}

.gallery-slide {
    position: relative;
    flex: 0 0 40.29%;
    margin: 0;
    aspect-ratio: 556/315;
    background: white;
    overflow: hidden
}

.gallery-slide[data-view="front"] {
    flex-basis: 31.67%;
    aspect-ratio: 437/248;
    align-self: flex-start;
    margin-top: -28px
}

.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none
}

.gallery-slide[data-view="front"] img {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 132.42%;
    object-fit: fill
}

.gallery-slide[data-view="side"] img {
    object-fit: contain;
    padding: 5% 14%
}

.gallery-slide figcaption,
.gallery-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
}

.gallery-arrow {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 1px solid #bfc3ca;
    border-radius: 50%;
    background: #fffffff0;
    color: var(--ink);
    font-size: 22px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s, background .2s
}

.gallery-arrow--prev {
    left: 16px
}

.gallery-arrow--next {
    right: 16px
}

.social-gallery__viewport:hover .gallery-arrow,
.social-gallery__viewport:focus-within .gallery-arrow {
    opacity: 1
}

.gallery-arrow:hover {
    background: var(--ink);
    color: white
}

.gallery-progress {
    display: flex;
    gap: 4px;
    width: 272px;
    margin: 30px 0 0 34.1%
}

.gallery-progress button {
    height: 20px;
    border: 0;
    padding: 8px 0;
    background: linear-gradient(#bfbfbf, #bfbfbf) center/100% 4px no-repeat;
    flex: 1;
    cursor: pointer
}

.gallery-progress button.active {
    background-image: linear-gradient(var(--ink), var(--ink))
}

.social-measuring {
    padding-top: 65px
}

.measure-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-right: -14px
}

.measure-grid>img,
.measure-bottom {
    height: 322px;
    border: 1px solid #ddd;
    background: transparent
}

.measure-grid>img {
    width: 100%;
    object-fit: contain;
    padding: 0 12%
}

.measure-bottom {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 324px
}

.measure-bottom>img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    padding-inline: 12%
}

.measure-values {
    margin: 8px 28% 8px 0;
    color: #848484;
    display: grid;
    font-size: var(--font-body)
}

.measure-values div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #c9c7c0;
    gap: 20px
}

.measure-values div:last-child {
    border: 0
}

.measure-values dd {
    margin: 0;
    white-space: nowrap
}

.measure-values small {
    font-size: var(--font-caption)
}

.measure-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 104px
}

.measure-actions .btn {
    font-size: var(--font-caption)
}

.measure-actions .text-link {
    font-size: var(--font-caption)
}

.measure-actions img {
    width: 36px;
    height: 36px;
    object-fit: contain
}

.specs {
    padding-top: 105px;
    padding-bottom: 185px
}

.specs dl {
    margin: 46px 0 0;
    display: grid;
    gap: 10px
}

.specs dl div {
    display: grid;
    grid-template-columns: 310fr 963fr;
    gap: 62px;
    font-size: var(--font-body);
    line-height: var(--lh-body);
    letter-spacing: 0
}

.specs dt,
.specs dd {
    border-block: 1px solid #cacaca;
    margin: 0;
    min-height: 51px;
    padding: 5px 46px
}

.specs dd {
    color: #7c7c7c;
    text-transform: uppercase;
    padding-left: clamp(30px, 17.8vw, 257px)
}

.downloads {
    padding-top: 74px
}

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

.download-grid>a {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    padding: 5px 12px 19px;
    min-width: 0
}

.download-cover {
    display: block;
    height: 133px;
    overflow: hidden;
    background: white;
    margin: 0 -7px
}

.download-cover img {
    width: 71%;
    height: auto;
    max-width: none;
    margin: 11px auto 0
}

.download-grid>a:last-child .download-cover img {
    width: 172%;
    height: 540px;
    object-fit: cover;
    margin: -220px 0 0 -40%
}

.download-title {
    font-size: var(--font-body);
    line-height: var(--lh-body);
    margin: 18px 0 25px;
    text-transform: none
}

.download-grid b {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    background: var(--ink);
    color: white;
    font-size: var(--font-caption);
    text-transform: uppercase;
    padding: 12px;
    margin-top: auto
}

.social-related {
    padding-top: 46px
}

.social-related h2,
.social-enquiry h2 {
    font-size: var(--font-heading);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    margin: 0 0 70px
}

.social-related .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    background: none;
    margin: 0
}

.social-related .product-card {
    position: relative;
    height: 522px;
    min-height: 0;
    border: 1px solid #ddd;
    border-radius: 16px 134px 16px 16px;
    padding: 27px;
    overflow: hidden
}

.social-related .eyebrow {
    font-size: var(--font-caption);
    line-height: 1.4;
    color: #676767;
    margin: 0 0 20px;
    white-space: nowrap;
    letter-spacing: 0
}

.social-related .product-card h3 {
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    margin: 0;
    text-transform: uppercase
}

.social-related h3>span:not(.title-word) {
    color: #b5b5b5
}

.social-related .product-card>img {
    position: absolute;
    max-width: none;
    left: -15%;
    bottom: -4%;
    width: 130%;
    height: auto;
    mix-blend-mode: multiply
}

.social-related .product-card:last-child {
    background: #f7edc2
}

.social-related .product-card:last-child h3 {
    font-size: var(--font-subheading);
    line-height: var(--lh-subheading);
    color: #f3b970;
    max-width: 240px
}

.social-related .product-card:last-child .text-link {
    padding: 16px 0;
    font-size: var(--font-caption)
}

.social-enquiry {
    padding: 85px 14px 0
}

.social-enquiry__heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px
}

.social-enquiry h2 {
    max-width: 620px;
    margin: 0
}

.social-enquiry__heading>p {
    max-width: 490px;
    font-size: var(--font-body);
    line-height: var(--lh-body);
    color: #676767;
    text-transform: uppercase
}

.social-enquiry .enquiry-form {
    padding-top: 60px;
    gap: 64px
}

.social-enquiry .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px
}

.social-enquiry .form-grid--basic .field:last-child {
    grid-column: auto;
    width: auto
}

.social-enquiry .field input,
.social-enquiry .field select,
.social-enquiry .field textarea {
    background: transparent
}

.social-enquiry .form-submit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px
}

.social-enquiry .form-submit .btn {
    font-size: var(--font-caption);
    font-weight: 700
}

.social-enquiry__contact {
    display: flex;
    gap: 50px
}

.social-enquiry__contact span {
    display: block;
    color: #909090;
    font-size: var(--font-caption);
    margin-bottom: 8px
}

.social-enquiry__contact a {
    font-size: var(--font-body);
    font-weight: 700
}

.social-enquiry .form-message {
    display: block;
    margin: 12px 0 0;
    color: #676767;
    font-size: var(--font-caption);
    line-height: 1.4
}

@media(max-width:1200px) {
    .social-hero__copy>p {
        font-size: var(--font-body);
        line-height: var(--lh-body)
    }

    .social-actions {
        gap: 8px;
        flex-wrap: wrap
    }

    .social-mosaic {
        grid-template-rows: 32vw 17vw
    }

    .social-subnav {
        gap: 35px
    }

    .social-ideal__grid {
        gap: 25px
    }

    .social-ideal li {
        padding-left: 54px;
        line-height: var(--lh-body)
    }

    .finish-detail {
        height: 440px
    }

    .swatch-grid button {
        min-height: 220px
    }

    .swatch-grid img {
        width: 120px;
        height: 120px
    }

    .specs dd {
        padding-left: 8vw
    }

    .social-related .eyebrow {
        white-space: normal
    }

    .social-related .product-card h3 {
        font-size: var(--font-subheading)
    }

    .social-related .product-card {
        height: 450px
    }

    .social-related h2,
    .social-enquiry h2 {
        font-size: var(--font-heading);
        line-height: var(--lh-heading)
    }
}

@media(max-width:900px) {

    .social-page .container {
        width: calc(100% - 40px)
    }

    .social-hero__grid {
        grid-template-columns: 1fr
    }

    .social-hero__grid>.social-front {
        grid-row: 1
    }

    .social-hero__copy>p {
        max-width: none
    }

    .social-hero header {
        margin-bottom: 30px
    }

    .social-hero {
        padding-top: 35px
    }

    .social-hero h1 {
        font-size: var(--font-heading)
    }

    .social-subnav {
        justify-content: flex-start;
        gap: 30px;
        overflow-x: auto;
        padding-inline: 22px;
        min-height: 72px;
        width: calc(100% - 24px)
    }

    .social-section {
        padding: 60px 0 0
    }

    .social-ideal__grid {
        grid-template-columns: 1fr
    }

    .social-ideal li {
        font-size: var(--font-body);
        min-height: 85px
    }

    .social-ideal .social-rule {
        max-width: none
    }

    .social-ideal__grid .social-front {
        width: 100%;
        max-width: 607px;
        margin: 20px auto 0
    }

    .finish-grid {
        grid-template-columns: 1fr;
        margin: 0
    }

    .finish-detail {
        height: auto;
        aspect-ratio: 882/522
    }

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

    .swatch-grid button {
        min-height: 180px
    }

    .swatch-grid button:last-child {
        grid-column: auto
    }

    .swatch-grid small {
        font-size: var(--font-tiny)
    }

    .swatch-grid img {
        width: 100px;
        height: 100px
    }

    .social-lede {
        margin-bottom: 40px
    }

    .social-gallery {
        padding-top: 75px
    }

    .gallery-heading {
        padding-left: 0;
        text-align: center;
        margin-bottom: 50px
    }

    .gallery-progress {
        margin-inline: auto
    }

    .gallery-slide {
        flex-basis: 65%
    }

    .gallery-slide[data-view="front"] {
        flex-basis: 55%
    }

    .gallery-arrow {
        opacity: 1
    }

    .measure-grid {
        margin: 0
    }

    .measure-grid>img {
        height: 250px;
        padding: 0 5%
    }

    .measure-bottom {
        height: 270px
    }

    .measure-bottom>img {
        padding: 0 5%
    }

    .measure-values {
        font-size: var(--font-body);
        margin: 8px 20px 8px 0
    }

    .measure-actions {
        margin-top: 45px
    }

    .specs {
        padding-bottom: 50px
    }

    .specs dl div {
        font-size: var(--font-body);
        line-height: var(--lh-body);
        grid-template-columns: 1fr 2fr;
        gap: 20px
    }

    .specs dt,
    .specs dd {
        padding: 10px 15px
    }

    .download-grid {
        gap: 12px
    }

    .download-title {
        font-size: var(--font-body);
        line-height: var(--lh-body)
    }

    .download-grid b {
        font-size: var(--font-caption)
    }

    .social-related {
        padding-top: 60px
    }

    .social-related h2 {
        margin-bottom: 40px
    }

    .social-related .products-grid {
        gap: 14px
    }

    .social-related .product-card {
        padding: 20px;
        height: 380px;
        border-top-right-radius: 75px
    }

    .social-related .product-card h3 {
        font-size: var(--font-subheading);
        line-height: var(--lh-subheading)
    }

    .social-related .product-card:last-child h3 {
        font-size: var(--font-subheading);
        line-height: var(--lh-subheading)
    }

    .social-enquiry {
        padding: 65px 0 0
    }

    .social-enquiry__heading {
        gap: 30px
    }

    .social-enquiry__heading>p {
        font-size: var(--font-body);
        line-height: var(--lh-body)
    }

    .social-enquiry h2 {
        font-size: var(--font-heading)
    }

    .social-enquiry .form-submit {
        align-items: flex-start;
        flex-direction: column
    }
}

@media(max-width:600px) {
    .social-page .container {
        width: calc(100% - 32px)
    }

    .social-page h2 {
        font-size: var(--font-heading);
        line-height: var(--lh-heading)
    }

    .social-hero h1 {
        font-size: var(--font-heading)
    }

    .social-hero__copy>p {
        font-size: var(--font-body);
        line-height: var(--lh-body)
    }

    .social-actions {
        margin-top: 25px;
        gap: 12px
    }

    .social-actions .text-link {
        padding-left: 0
    }

    .social-mosaic {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        padding: 32px 0;
        gap: 16px
    }

    .social-mosaic .social-front {
        aspect-ratio: 777/410
    }

    .social-mosaic__lifestyle {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 571/646
    }

    .social-mosaic>img:last-child {
        aspect-ratio: 777/217
    }

    .social-subnav {
        font-size: var(--font-caption);
        min-height: 64px;
        gap: 25px
    }

    .social-rule span {
        flex-basis: 180px;
        font-size: var(--font-caption)
    }

    .social-ideal li {
        font-size: var(--font-body);
        line-height: var(--lh-body);
        padding-left: 50px
    }

    .social-ideal ul {
        gap: 16px
    }

    .social-lede {
        font-size: var(--font-body);
        line-height: var(--lh-body)
    }

    .social-lede br {
        display: none
    }

    .swatch-grid button {
        min-height: 145px
    }

    .swatch-grid img {
        width: 74px;
        height: 74px
    }

    .swatch-grid small {
        font-size: var(--font-tiny);
        right: 5px
    }

    .social-gallery h2 {
        font-size: var(--font-heading)
    }

    .gallery-slide,
    .gallery-slide[data-view="front"] {
        flex-basis: 100%;
        aspect-ratio: 556/315;
        margin-top: 0
    }

    .social-gallery__track {
        gap: 20px
    }

    .gallery-heading {
        margin-bottom: 35px
    }

    .measure-grid {
        grid-template-columns: 1fr
    }

    .measure-bottom {
        grid-template-columns: 1fr;
        height: auto
    }

    .measure-bottom>img {
        height: 260px
    }

    .measure-values {
        margin: 0 24px 20px
    }

    .measure-values div {
        min-height: 50px
    }

    .measure-actions {
        flex-direction: column;
        gap: 10px
    }

    .specs dl div {
        font-size: var(--font-body);
        line-height: var(--lh-body);
        grid-template-columns: 105px 1fr;
        gap: 12px
    }

    .specs dt,
    .specs dd {
        padding: 10px 5px
    }

    .specs dl {
        margin-top: 28px
    }

    .download-grid {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .download-title {
        font-size: var(--font-body);
        margin-bottom: 18px
    }

    .download-grid b {
        font-size: var(--font-caption)
    }

    .social-related h2,
    .social-enquiry h2 {
        font-size: var(--font-heading);
        line-height: var(--lh-heading)
    }

    .social-related .products-grid {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .social-related .product-card {
        height: 480px;
        border-top-right-radius: 120px;
        padding: 27px
    }

    .social-related .product-card h3 {
        font-size: var(--font-subheading)
    }

    .social-related .product-card:last-child h3 {
        font-size: var(--font-subheading);
        line-height: var(--lh-subheading)
    }

    .social-enquiry__heading {
        display: block
    }

    .social-enquiry__heading>p {
        margin-top: 25px
    }

    .social-enquiry .enquiry-form {
        padding-top: 35px;
        gap: 40px
    }

    .social-enquiry .form-grid {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .social-enquiry__contact a {
        font-size: var(--font-body)
    }

    .social-enquiry .form-submit .btn {
        font-size: var(--font-caption)
    }
}

@media(prefers-reduced-motion:reduce) {

    .social-gallery__track,
    .finish-detail {
        transition: none !important
    }
}

/* Keep the desktop hero's measured copy width and vertical rhythm. */
body[data-page="cove-social"] {
    --sans: "Inter", "Helvetica Neue", Arial, sans-serif
}

@media(min-width:1201px) {
    .social-hero {
        min-height: 841px
    }

    .social-hero__grid {
        grid-template-columns: 533px minmax(0, 1fr)
    }

    .social-hero__copy>p {
        min-height: 440px
    }
}

/* Related-product hover: reuse the collection's lifestyle images and CTA. */
.social-related .product-card {
    isolation: isolate;
    transition: background-color .45s ease, border-color .45s ease
}

.social-related .product-card>img {
    pointer-events: none;
    transition: opacity .5s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
    transform-origin: center bottom
}

.social-related .product-card>.social-related__hover-image {
    left: -12%;
    bottom: 0;
    width: 124%;
    height: 80%;
    object-fit: contain;
    object-position: center bottom;
    mix-blend-mode: normal;
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(.98)
}

.social-related .product-card>.eyebrow,
.social-related .product-card>h3 {
    transition: opacity .35s ease
}

.social-related__hover-action {
    position: absolute;
    top: 32px;
    left: 24px;
    z-index: 2;
    display: flex;
    gap: 7px;
    align-items: center;
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition: opacity .35s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none
}

.social-related__hover-action>img {
    width: 46px;
    height: 48px;
    object-fit: contain;
    padding: 12px;
    background: var(--paper);
    border-radius: 11px
}

.social-related__hover-action>b {
    padding: 12px 20px;
    background: var(--ink);
    color: var(--paper);
    border-radius: 2px 2px 11px 2px;
    font: 600 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase
}

.social-related .product-card:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
    background: #fff
}

.social-related .product-card:has(.social-related__hover-image):focus-visible>.eyebrow,
.social-related .product-card:has(.social-related__hover-image):focus-visible>h3,
.social-related .product-card:has(.social-related__hover-image):focus-visible>img:not(.social-related__hover-image) {
    opacity: 0
}

.social-related .product-card:focus-visible>.social-related__hover-image,
.social-related .product-card:focus-visible>.social-related__hover-action {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1)
}

.social-related .product-card:last-child:focus-visible {
    background: #f5e7af
}

.social-related .product-card:last-child:focus-visible>img {
    transform: translate3d(0, -5px, 0) scale(1.025)
}

.social-related .product-card:last-child>.text-link {
    transition: transform .45s ease
}

.social-related .product-card:last-child:focus-visible>.text-link {
    transform: translate3d(5px, 0, 0)
}

@media(hover:hover) and (pointer:fine) {
    .social-related .product-card:hover {
        background: #fff;
        border-color: #c9c7c0
    }

    .social-related .product-card:has(.social-related__hover-image):hover>.eyebrow,
    .social-related .product-card:has(.social-related__hover-image):hover>h3,
    .social-related .product-card:has(.social-related__hover-image):hover>img:not(.social-related__hover-image) {
        opacity: 0
    }

    .social-related .product-card:hover>.social-related__hover-image,
    .social-related .product-card:hover>.social-related__hover-action {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1)
    }

    .social-related .product-card:last-child:hover {
        background: #f5e7af
    }

    .social-related .product-card:last-child:hover>img {
        transform: translate3d(0, -5px, 0) scale(1.025)
    }

    .social-related .product-card:last-child:hover>.text-link {
        transform: translate3d(5px, 0, 0)
    }
}

@media(prefers-reduced-motion:reduce) {

    .social-related .product-card,
    .social-related .product-card>img,
    .social-related .product-card>.eyebrow,
    .social-related .product-card>h3,
    .social-related__hover-action,
    .social-related .product-card:last-child>.text-link {
        transition: none !important
    }

    .social-related .product-card:last-child:is(:hover, :focus-visible)>img,
    .social-related .product-card:last-child:is(:hover, :focus-visible)>.text-link {
        transform: none
    }
}

/* Bounded product motion and native horizontal gallery. */
.social-page .social-front>img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
    transform: translate3d(0, var(--social-image-y, 0px), 0) scale(var(--social-image-scale, 1));
    transform-origin: center;
    transition: transform .18s ease-out
}

.social-hero__grid>.social-front,
.social-ideal__grid>.social-front {
    align-self: start
}

@media(min-width:901px) {

    .social-hero__grid>.social-front,
    .social-ideal__grid>.social-front {
        position: sticky;
        top: var(--social-sticky-top, 116px);
        max-height: calc(100svh - var(--social-sticky-top, 116px) - 24px);
        width: 100%;
        margin-top: 0
    }
}

.social-gallery .social-gallery__viewport {
    cursor: auto;
    touch-action: auto
}

.social-gallery__scroller {
    --gallery-slide-width: min(62vw, 820px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(16px, calc((100% - var(--gallery-slide-width))/2));
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    cursor: grab;
    border-radius: 1px;
    padding-inline: max(16px, calc((100% - var(--gallery-slide-width))/2))
}

.social-gallery__scroller::-webkit-scrollbar {
    display: none
}

.social-gallery__scroller:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -2px
}

.social-gallery__scroller.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none
}

.social-gallery__scroller.is-moving {
    scroll-snap-type: none
}

.social-gallery .social-gallery__track {
    transform: none;
    transition: none;
    will-change: auto;
    align-items: center;
    gap: clamp(20px, 3vw, 44px)
}

.social-gallery .gallery-slide,
.social-gallery .gallery-slide[data-view="front"] {
    flex: 0 0 var(--gallery-slide-width);
    height: clamp(360px, 43vw, 590px);
    aspect-ratio: auto;
    margin: 0;
    align-self: center;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    opacity: .48;
    transform: scale(.94);
    transition: opacity .45s ease, transform .65s cubic-bezier(.22, 1, .36, 1)
}

.social-gallery .gallery-slide.is-active {
    opacity: 1;
    transform: scale(1)
}

.social-gallery .gallery-slide img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    padding: 0
}

.social-gallery .gallery-slide[data-view="front"] img,
.social-gallery .gallery-slide[data-view="side"] img {
    object-fit: contain;
    object-position: center
}

.social-gallery .gallery-arrow {
    opacity: 1;
    top: 50%;
    width: 54px;
    height: 54px;
    background: #fffffff2;
    box-shadow: 0 8px 28px rgba(18, 32, 58, .1)
}

.social-gallery .gallery-arrow--prev {
    left: 24px
}

.social-gallery .gallery-arrow--next {
    right: 24px
}

.social-gallery .gallery-arrow:disabled {
    opacity: .35;
    cursor: default
}

.social-gallery .gallery-arrow:disabled:hover {
    background: #fffffff0;
    color: var(--ink)
}

.social-gallery .gallery-progress {
    margin-inline: auto;
    width: min(360px, 60vw);
    gap: 7px
}

.social-gallery .gallery-progress button {
    transition: background-image .25s ease, transform .25s ease
}

.social-gallery .gallery-progress button.active {
    transform: scaleY(1.35)
}

@media(min-width:601px) and (max-width:900px) {
    .social-gallery__scroller {
        --gallery-slide-width: 78%
    }

    .social-gallery .gallery-slide,
    .social-gallery .gallery-slide[data-view="front"] {
        height: 360px
    }
}

@media(max-width:600px) {
    .social-gallery__scroller {
        --gallery-slide-width: 88%
    }

    .social-gallery .social-gallery__track {
        gap: 20px
    }

    .social-gallery .gallery-slide,
    .social-gallery .gallery-slide[data-view="front"] {
        flex-basis: 88%;
        height: auto;
        aspect-ratio: 1.2
    }

    .social-gallery .gallery-arrow {
        width: 44px;
        height: 44px
    }

    .social-gallery .gallery-arrow--prev {
        left: 8px
    }

    .social-gallery .gallery-arrow--next {
        right: 8px
    }
}

@media(prefers-reduced-motion:reduce) {
    .social-page .social-front>img {
        transform: none !important;
        transition: none !important
    }

    .social-gallery__scroller {
        scroll-behavior: auto
    }
}

/* The final lifestyle panel fills the remaining viewport at the end of the track. */
.social-gallery .gallery-slide:last-child {
    flex-basis: var(--gallery-slide-width)
}

/* Figma node 111:1681 — asymmetric Cove Social gallery composition. */
@media(min-width:901px) {
    .social-gallery {
        padding-top: 105px
    }

    .social-gallery .gallery-heading {
        padding-left: 34.1%;
        margin-bottom: 27px;
        text-align: left
    }

    .social-gallery__scroller {
        --gallery-slide-width: 556px;
        padding: 0;
        scroll-padding-inline: 0;
        border-radius: 0
    }

    .social-gallery .social-gallery__track {
        gap: 36px;
        align-items: flex-start;
        padding-top: 128px
    }

    .social-gallery .gallery-slide,
    .social-gallery .gallery-slide[data-view="front"],
    .social-gallery .gallery-slide:last-child {
        flex: 0 0 556px;
        width: 556px;
        /* height: 315px; */
        margin: 0;
        aspect-ratio: auto;
        align-self: flex-start;
        opacity: 1;
        transform: none;
        transition: none;
        scroll-snap-align: start
    }

    .social-gallery .gallery-slide[data-view="front"] {
        flex-basis: 437px;
        width: 437px;
        height: 248px;
        margin-top: -128px
    }

    .social-gallery .gallery-slide img {
        width: 100%;
        height: auto;
    }

    .social-gallery .gallery-arrow {
        width: 46px;
        height: 46px;
        opacity: 0;
        box-shadow: none;
        background: #fffffff0
    }

    .social-gallery__viewport:hover .gallery-arrow,
    .social-gallery__viewport:focus-within .gallery-arrow {
        opacity: 1
    }

    .social-gallery .gallery-progress {
        width: 272px;
        margin: 39px 0 0 34.1%;
        gap: 4px
    }

    .social-gallery .gallery-progress button {
        height: 20px;
        padding-block: 8px;
        transform: none
    }
}

/* A temporary image layer creates seamless section-to-section product handoffs. */
.social-page {
    position: relative;
    isolation: isolate
}

.social-image-traveler {
    position: absolute;
    z-index: 20;
    display: block;
    overflow: hidden;
    pointer-events: none;
    background: transparent;
    clip-path: inset(0 round 3px);
    contain: layout paint style;
    backface-visibility: hidden;
    will-change: left, top, width, height, opacity, transform, filter
}

.social-image-traveler>img {
    display: block;
    width: 100%;
    height: 100%;
    transform: none !important;
    backface-visibility: hidden
}

[data-motion-anchor] {
    position: relative !important;
    top: auto !important;
    max-height: none !important
}

@media(max-width:600px) {
    .social-image-traveler {
        display: none
    }
}



/* Consolidated from footer-cta.css */

.footer-cta {
    position: relative;
    min-height: 480px;
    margin: 60px auto 37px;
    padding: 65px 4%;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.footer-cta .cta-outline {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #c5c5c5;
    stroke-width: 1;
    pointer-events: none;
}

.footer-cta .cta-copy {
    position: relative;
    width: 65%
}

.footer-cta .eyebrow {
    margin: 0;
    color: #132241;
    font-weight: 700;
    text-transform: uppercase
}

.footer-cta h2 {
    max-width: none;
    margin: 35px 0 55px;
    color: #132241;
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    letter-spacing: var(--ls-heading);
    text-transform: none;
}

.footer-cta .cta-actions {
    display: flex;
    align-items: center;
    gap: 20px
}

.footer-cta .action-link {
    display: flex;
    align-items: stretch;
    color: #132241;
    font: 400 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase
}

.footer-cta .action-link>span,
.footer-cta .action-link>b {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 16px 20px
}

.footer-cta .action-link:not(.action-plain)>span,
.footer-cta .action-link>b {
    background: #132241;
    color: #fff
}

.footer-cta .action-link>b {
    width: 56px;
    padding: 14px
}

.footer-cta .action-link svg {
    display: block;
    width: 24px;
    height: 24px
}

@media(max-width:900px) {
    .footer-cta {
        min-height: 420px;
        padding: 45px 25px
    }

    .footer-cta .cta-copy {
        width: 85%
    }

    .footer-cta h2 {
        font-size: var(--font-heading)
    }
}

@media(max-width:600px) {
    .footer-cta {
        padding: 45px 22px
    }

    .footer-cta .cta-copy {
        width: 100%
    }

    .footer-cta h2 {
        font-size: var(--font-heading)
    }

    .footer-cta h2 br {
        display: none
    }

    .footer-cta .cta-outline path:not(:first-child) {
        opacity: .25
    }

    .footer-cta .cta-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px
    }
}



/* Consolidated from soft-seating.css */

/* Figma 111:666, scoped to the soft seating page. */
.seating-page {
    max-width: 1440px;
    margin: auto
}

.seating-hero {
    margin: 0 2.57%;
    display: grid;
    grid-template-columns: 42.9% 1fr;
    gap: 3.45%;
    height: 706px
}

.seating-hero-image {
    height: 100%;
    overflow: hidden;
    border-radius: 288px 0 0 0
}

.seating-hero-image img {
    width: 100%;
    height: 109.58%;
    object-fit: cover;
    position: relative;
    top: -4.79%
}

.seating-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 157px 5.9% 32px 0
}

.seating-page h1,
.seating-collections>h2 {
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    letter-spacing: var(--ls-heading);
    text-transform: uppercase;
    margin: 0
}

.seating-intro .eyebrow {
    max-width: 199px;
    color: #676767;
    font: 400 var(--font-caption)/1.4 var(--sans);
    margin: 0 0 28px
}

.seating-page .eyebrow:before {
    width: 7px;
    height: 8px;
    margin-bottom: 5px;
    background: var(--ink)
}

.seating-intro .copy {
    font: 400 var(--font-body)/var(--lh-body) var(--sans);
    letter-spacing: 0;
    margin: 0;
    color: #676767
}

.seating-collections {
    margin: 120px 3.2% 0 2.57%
}

.seating-collections>h2 {
    line-height: var(--lh-heading);
    margin: 0 0 95px -7px
}

.seating-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, 522px);
    gap: 0
}

.seating-card {
    position: relative;
    border: 1px solid #ddd;
    margin-right: -1px;
    margin-bottom: -1px;
    min-width: 0;
    overflow: hidden;
    transition: background .5s, border-color .5s;
    isolation: isolate
}

.seating-card-copy {
    position: absolute;
    left: 6.18%;
    right: 5%;
    bottom: 27px
}

.seating-card .eyebrow {
    font: 400 var(--font-caption)/1.4 var(--sans);
    color: #676767;
    max-width: 199px;
    min-height: 47px;
    margin: 0 0 20px
}

.seating-card h3 {
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    letter-spacing: var(--ls-heading);
    text-transform: uppercase;
    margin: 0;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1)
}

.seating-product {
    position: absolute;
    overflow: hidden
}

.seating-product img {
    position: absolute;
    max-width: none;
    transition: transform .85s cubic-bezier(.22, 1, .36, 1);
    transform-origin: center
}

.seating-card--cove .seating-product {
    left: 15.23%;
    top: 7.09%;
    width: 69.32%;
    height: 36.4%
}

.seating-card--cove .seating-product img {
    width: 134.94%;
    height: 168%;
    left: -17.47%;
    top: -34%
}

.seating-card--pebble .seating-product {
    left: 11.7%;
    top: 9.77%;
    width: 74.17%;
    height: 29.12%
}

.seating-card--pebble .seating-product img {
    width: 119.14%;
    height: 198.29%;
    left: -9.57%;
    top: -58.39%
}

.seating-card--orbit .seating-product {
    left: 17.22%;
    top: 13.6%;
    width: 63.8%;
    height: 41.19%
}

.seating-card--orbit .seating-product img {
    width: 130.1%;
    height: 131.16%;
    left: -14.19%;
    top: -20%
}

.seating-card--grove .seating-product {
    left: 7.9%;
    top: 6.51%;
    width: 86.31%;
    height: 40.61%
}

.seating-card--grove .seating-product img {
    width: 124.47%;
    height: 172.17%;
    left: -13.64%;
    top: -47.64%
}

.seating-lifestyle {
    grid-column: 3;
    grid-row: 1/3;
    position: relative;
    border-radius: 0 248px 0 0;
    overflow: hidden
}

.seating-lifestyle img {
    position: absolute;
    width: 181.68%;
    height: 105.27%;
    max-width: none;
    left: -81.68%;
    top: -2.635%;
    object-fit: cover
}

.seating-hover-arrow {
    position: absolute;
    width: 24px;
    height: 24px;
    right: 24px;
    top: 26px;
    opacity: 0;
    transform: translate(-8px, 8px);
    transition: opacity .4s, transform .5s
}

.seating-card:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -3px;
    background: #f2eee4;
    z-index: 1
}

.seating-card:focus-visible .seating-hover-arrow {
    opacity: 1;
    transform: none
}

@media(hover:hover) {
    .seating-card:hover {
        background: #f2eee4;
        border-color: #c5b799;
        z-index: 1
    }

    .seating-card:hover .seating-product img {
        transform: scale(1.045) translateY(-2px)
    }

    .seating-card:hover .seating-hover-arrow {
        opacity: 1;
        transform: none
    }

    .seating-card:hover h3 {
        transform: translateX(5px)
    }
}

.seating-enquiry {
    display: grid;
    grid-template-columns: 61.7% 38.3%;
    min-height: 474px;
    border: 1px solid #c4c4c4;
    border-radius: 0 130px 0 130px;
    overflow: hidden;
    margin: 132px 2.43% 98px 2.01%
}

.seating-enquiry-copy {
    padding: 75px 6.7% 55px;
    align-self: center
}

.seating-enquiry-copy .eyebrow {
    font: 400 var(--font-caption)/1.4 var(--sans);
    margin: 0 0 32px
}

.seating-enquiry-copy .eyebrow:before {
    width: 11px;
    height: 12px
}

.seating-enquiry .seating-enquiry-copy h2 {
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    letter-spacing: var(--ls-heading);
    text-transform: capitalize;
    margin: 0 0 60px
}

.seating-enquiry-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.seating-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ink);
    color: white;
    padding: 12px 20px;
    font: 600 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase;
    transition: background .3s
}

.seating-button img {
    width: 24px;
    height: 24px;
    transition: transform .3s
}

.seating-button:hover img {
    transform: translateX(4px)
}

.seating-button:hover {
    background: #30405f
}

.seating-button--plain {
    background: transparent;
    color: var(--ink)
}

.seating-button--plain:hover {
    background: #eee9de
}

.seating-enquiry-image {
    position: relative;
    overflow: hidden
}

.seating-enquiry-image img {
    position: absolute;
    width: 137.1%;
    height: 114.65%;
    max-width: none;
    left: -37.1%;
    top: -7.325%;
    object-fit: cover
}

body[data-page="soft-seating"] .site-footer {
    border: 0;
    padding-top: 62px
}

body[data-page="soft-seating"] .footer-grid {
    max-width: 1382px;
    width: calc(100% - 58px);
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px
}

body[data-page="soft-seating"] .footer-links,
body[data-page="soft-seating"] .address {
    font-size: var(--font-body);
}

@media(min-width:901px) and (max-width:1439px) {
    .seating-hero {
        height: 49vw
    }

    .seating-hero-copy {
        padding-top: 10.9vw;
        padding-bottom: 2.22vw
    }

    .seating-page h1,
    .seating-collections>h2 {
        font-size: var(--font-heading)
    }

    .seating-hero-image {
        border-top-left-radius: 20vw
    }

    .seating-intro .copy {
        font-size: var(--font-body);
        line-height: var(--lh-body)
    }

    .seating-collections {
        margin-top: 8.33vw
    }

    .seating-collections>h2 {
        margin-bottom: 6.6vw
    }

    .seating-grid {
        grid-template-rows: repeat(2, 36.25vw)
    }

    .seating-card-copy {
        bottom: 1.875vw
    }

    .seating-lifestyle {
        border-top-right-radius: 17.22vw
    }

    .seating-enquiry {
        margin-top: 9.17vw;
        min-height: 32.9vw
    }

    .seating-enquiry-copy {
        padding-block: 5.2vw 3.8vw
    }

    .seating-enquiry .seating-enquiry-copy h2 {
        margin-bottom: 4.17vw
    }
}

@media(max-width:900px) {
    .seating-hero {
        height: auto;
        margin: 15px 20px 0;
        gap: 30px;
        grid-template-columns: 1fr 1fr
    }

    .seating-hero-image {
        height: 520px;
        border-top-left-radius: 160px
    }

    .seating-hero-copy {
        padding: 55px 0 25px
    }

    .seating-page h1,
    .seating-collections>h2 {
        font-size: var(--font-heading)
    }

    .seating-intro .copy {
        font-size: var(--font-body);
        line-height: var(--lh-body)
    }

    .seating-intro .eyebrow {
        margin-bottom: 20px
    }

    .seating-collections {
        margin: 75px 20px 0
    }

    .seating-collections>h2 {
        margin: 0 0 45px
    }

    .seating-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, 440px) 500px
    }

    .seating-lifestyle {
        grid-column: 1/-1;
        grid-row: 3;
        border-top-right-radius: 160px
    }

    .seating-lifestyle img {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        object-position: center 38%
    }

    .seating-card-copy {
        left: 22px;
        right: 16px
    }

    .seating-card h3 {
        font-size: var(--font-subheading);
        line-height: var(--lh-subheading)
    }

    .seating-card .eyebrow {
        font-size: var(--font-caption)
    }

    .seating-enquiry {
        margin: 70px 20px;
        grid-template-columns: 1fr 40%;
        border-radius: 0 85px;
        min-height: 420px
    }

    .seating-enquiry-copy {
        padding: 40px 25px
    }

    .seating-enquiry .seating-enquiry-copy h2 {
        font-size: var(--font-heading);
        margin-bottom: 30px
    }

    .seating-enquiry .seating-enquiry-copy h2 br {
        display: none
    }

    .seating-button {
        padding: 10px 14px;
        font-size: var(--font-caption)
    }

    body[data-page="soft-seating"] .footer-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:600px) {
    .seating-hero {
        grid-template-columns: 1fr;
        gap: 0
    }

    .seating-hero-image {
        height: 450px;
        border-top-left-radius: 150px
    }

    .seating-hero-copy {
        padding: 35px 0 0;
        gap: 35px
    }

    .seating-page h1,
    .seating-collections>h2 {
        font-size: var(--font-heading)
    }

    .seating-intro .copy {
        font-size: var(--font-body)
    }

    .seating-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: 440px
    }

    .seating-lifestyle {
        grid-column: 1;
        grid-row: 5
    }

    .seating-card h3 {
        font-size: var(--font-subheading)
    }

    .seating-card .eyebrow {
        font-size: var(--font-caption)
    }

    .seating-enquiry {
        grid-template-columns: 1fr;
        border-radius: 0 75px
    }

    .seating-enquiry-copy {
        padding: 45px 25px
    }

    .seating-enquiry-image {
        height: 280px
    }

    .seating-enquiry-image img {
        height: 100%;
        top: 0
    }

    .seating-hover-arrow {
        opacity: 1;
        transform: none
    }
}

@media(prefers-reduced-motion:reduce) {

    .seating-card *,
    .seating-card,
    .seating-button {
        transition: none
    }

    .seating-card:hover .seating-product img {
        transform: none
    }
}


/* ==========================================================================
   Client review corrections — Sept 2026
   Implements the annotated feedback screenshots on top of the approved
   typography scale declared in :root. Layout/spacing only; sizes come
   from the --font-* tokens so the scale stays in one place.
   ========================================================================== */

/* --- Nav: align every item (including the Collection button) on one line --- */
.nav-links>a,
.nav-trigger {
    display: inline-flex;
    align-items: center;
    padding: 23px 0;
    line-height: 1
}

/* --- Hero: heading centred, scroll cue removed --- */
.hero h1 {
    margin: 0 auto;
    text-align: center
}

/* --- The art of balance: bigger image, all copy in the right column --- */
.split {
    grid-template-columns: 1.18fr 1fr;
    min-height: 840px;
    gap: clamp(28px, 3.5vw, 64px)
}

.split-media {
    height: 840px
}

.split-copy {
    padding: 80px clamp(24px, 4vw, 70px) 80px 0
}

@media(max-width:900px) {
    .split {
        grid-template-columns: 1fr;
        min-height: 0
    }

    .split-media {
        height: min(78vw, 520px)
    }

    .split-copy {
        padding: 44px 20px 60px
    }
}

/* --- Our collection strip: two categories, no repeated feature list --- */
.collection-features {
    display: none
}

.collection-story.is-scrolling {
    height: calc(100vh + 95vw)
}

/* --- Featured products / compact action links (no oversized buttons) --- */
.action-link.action-compact {
    gap: 0;
    align-items: center
}

.action-link.action-compact>span {
    padding: 12px 8px 12px 18px
}

.action-link.action-compact>b {
    width: auto;
    min-height: 0;
    padding: 12px 18px 12px 6px
}

.action-link.action-compact svg {
    width: 18px;
    height: 18px
}

.featured-title h3 {
    margin: 0 0 18px
}

/* --- Why Cofur: duplicate label removed, single image + copy --- */
.why-grid {
    display: block
}

.why-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(30px, 5vw, 76px);
    align-items: start
}

.why-copy>img {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: stretch;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    margin: 0
}

.why-copy .section-title {
    grid-column: 2;
    margin: 0
}

.why-copy .why-list {
    grid-column: 2
}

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

    .why-copy>img {
        grid-column: 1;
        grid-row: auto;
        height: min(80vw, 430px);
        margin-bottom: 36px
    }

    .why-copy .section-title,
    .why-copy .why-list {
        grid-column: 1
    }
}

/* --- Footer CTA: decorative outline removed, compact actions --- */
.footer-cta .cta-outline {
    display: none
}

/* Figma 111:489 / 111:494 — "Contact us" is a plain text link, "Download catalog"
   is a single filled block with the arrow inside it. No detached arrow tiles. */
.footer-cta .action-link.action-compact {
    gap: 0;
    align-items: center;
    font-weight: 700;
    letter-spacing: var(--ls-caption)
}

.footer-cta .action-link.action-compact>span,
.footer-cta .action-link.action-compact>b {
    min-height: 48px
}

.footer-cta .action-link.action-compact>span {
    padding: 12px 10px 12px 22px
}

.footer-cta .action-link.action-compact>b {
    width: auto;
    padding: 12px 22px 12px 0
}

.footer-cta .action-plain.action-compact>span,
.footer-cta .action-plain.action-compact>b {
    background: transparent;
    color: #132241;
    border: 0;
    min-height: 0;
    padding: 0
}

.footer-cta .action-plain.action-compact {
    gap: 12px;
    margin-right: 12px
}

.footer-cta .action-link.action-compact svg {
    width: 20px;
    height: 20px
}

/* --- Footer: single address column, page list removed --- */
.site-footer .footer-grid {
    grid-template-columns: minmax(0, 560px);
    gap: 24px
}

/* --- Cove collection hero: centred title, summary + scroll cue removed --- */
.cove-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 22px;
    width: 100%;
    padding: 100px 24px 80px
}

.cove-hero-copy>div:first-child {
    align-items: center;
    gap: 20px
}

.cove-hero-copy .eyebrow {
    width: auto;
    max-width: 320px;
    text-align: center
}

.cove-hero-copy .eyebrow:before {
    margin: 0 auto 6px
}

.cove-hero-image:after {
    display: block;
    background: linear-gradient(180deg, rgba(251, 249, 243, .62), rgba(251, 249, 243, .34))
}

/* --- Cove / seating cards: product name first, tagline underneath --- */
.cove-card h3,
.seating-card h3 {
    margin: 0 0 10px
}

.cove-card .eyebrow,
.seating-card .eyebrow {
    margin: 0
}

.cove-card .eyebrow:before,
.seating-card .eyebrow:before {
    display: none
}

.seating-card .eyebrow {
    min-height: 0
}

/* --- Soft seating: full-page hero image with the title centred on it --- */
.seating-hero {
    display: block;
    position: relative;
    height: min(86vh, 760px);
    margin: 0 0 0 calc(50% - 50vw);
    width: 100vw;
    overflow: hidden
}

.seating-hero-image {
    position: absolute;
    inset: 0;
    height: 100%;
    border-radius: 0
}

.seating-hero-image img {
    position: static;
    width: 100%;
    height: 100%;
    top: 0;
    object-fit: cover
}

.seating-hero:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(11, 16, 28, .42), rgba(11, 16, 28, .5) 50%, rgba(11, 16, 28, .38))
}

.seating-hero-copy {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    text-align: center
}

.seating-page h1 {
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .45)
}

/* --- Seating collection: centred heading, evenly placed product cards --- */
.seating-collections>h2 {
    text-align: center;
    margin: 0 auto clamp(48px, 5vw, 80px)
}

.seating-grid {
    grid-template-rows: repeat(2, minmax(0, 500px))
}

.seating-grid .seating-card .seating-product {
    left: 8%;
    top: 8%;
    width: 84%;
    height: 44%
}

.seating-grid .seating-card .seating-product img {
    position: absolute;
    inset: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.seating-card-copy {
    bottom: 32px
}

/* --- About: whole image shown, at a controlled size, clipped so the
       parallax scale can never ride up over the heading --- */
.about-hero__image {
    height: auto;
    overflow: hidden;
    display: flex;
    justify-content: center
}

.about-hero__image img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: clamp(240px, 46vw, 640px);
    object-fit: contain
}

/* --- About intro: left aligned, heading at the approved size --- */
.about-intro {
    text-align: left;
    max-width: 1126px;
    margin: clamp(48px, 6vw, 78px) auto 24px
}

.about-intro h2 {
    margin: 0 0 26px;
    max-width: 900px
}

.about-intro p {
    max-width: 840px;
    margin: 0
}

/* --- About principles: proper two-column alignment --- */
.about-principles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(40px, 6vw, 90px);
    min-height: 0;
    padding-top: 30px
}

.about-principle {
    width: auto;
    min-height: 0;
    grid-column: 1;
    margin: 0 0 clamp(48px, 5vw, 86px)
}

.about-principle--right {
    grid-column: 2;
    margin-left: 0
}

.about-principle>span {
    margin: 0 0 8px
}

.about-principle h3 {
    margin: 0 0 18px
}

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

    .about-principle,
    .about-principle--right {
        grid-column: 1;
        margin: 0 0 55px
    }
}

/* --- About team: name first, then designation, both above the story --- */
.about-person>div {
    justify-content: flex-start
}

.about-person__id {
    margin: 0 0 26px
}

.about-person__id h3 {
    margin: 0 0 6px
}

.about-person__role {
    margin: 0;
    color: #6b6b68;
    letter-spacing: var(--ls-caption)
}

/* --- About address + live location map --- */
.about-address h3 {
    margin: 0 0 12px
}

.about-location {
    height: clamp(280px, 32vw, 420px)
}

.about-location iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0
}

/* --- Sustainability: consistent heading colour and tree-section alignment --- */
.about-tree {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 70px);
    align-items: start;
    min-height: 0
}

.about-tree>div {
    position: static;
    width: auto
}

.about-tree h2 {
    width: auto;
    color: var(--ink);
    margin: 0 0 clamp(28px, 3vw, 44px)
}

.about-tree dl {
    width: auto;
    margin: 0
}

.about-tree dt {
    margin: 0 0 6px
}

.about-tree dt+dd {
    margin: 0 0 26px
}

.about-tree img {
    position: static;
    width: 100%;
    height: min(640px, 45vw);
    top: auto;
    border-radius: 0 110px 0 0
}

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

    .about-tree img {
        height: min(80vw, 460px)
    }
}

/* --- Made in India: stated once, no repeated collection CTA --- */
.about-india {
    padding: 0px 0px 100px 0px;
}

.about-india>h2,
.about-india h2 {
    margin: 0 0 clamp(24px, 3vw, 40px)
}

/* --- Enquiry: hero image shown in full, one type family --- */
.enquiry-page .enquiry-hero {
    height: auto;
    margin: 0 auto clamp(40px, 5vw, 60px)
}

.enquiry-page .enquiry-hero img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: brightness(.72)
}

.enquiry-page .enquiry-hero h1 {
    position: absolute;
    inset: 0;
    top: auto;
    bottom: 0;
    display: grid;
    place-items: center;
    padding: 0 24px;
    margin: 0;
    font-family: var(--serif);
    font-weight: 400
}

.contact-panel .contact-detail a {
    font-weight: 500
}

/* --- Enquiry form: never force the layout wider than the viewport --- */
.enquiry-layout>*,
.enquiry-form,
.form-section {
    min-width: 0
}

.form-stack {
    width: 100%;
    max-width: 642px
}

/* --- About intro + mission: flush left with every other section --- */
.about-intro {
    max-width: none
}

.about-mission {
    display: block;
    height: auto;
    padding: 0;
    text-align: center;
    margin: clamp(60px, 7vw, 110px) auto
}

.about-mission p {
    margin: 0 0 20px
}

.about-mission h2 {
    margin: 0 auto;
    max-width: 900px
}

/* --- About team: copy sits directly under the name + designation --- */
.about-person>div {
    min-height: 0
}

.about-person__copy {
    margin: 0 0 30px
}

/* --- Footer CTA: copy fills the band now that the outline artwork is gone --- */
.footer-cta {
    min-height: 0;
    padding: clamp(48px, 5vw, 78px) clamp(24px, 4vw, 70px)
}

.footer-cta .cta-copy {
    width: 100%;
    max-width: 780px
}

.footer-cta h2 {
    margin: 26px 0 38px
}

/* --- Cove hero: title centred above the product, no summary block --- */
.cove-hero-copy {
    justify-content: flex-start;
    padding: clamp(96px, 12vh, 140px) 24px 60px
}

.cove-hero-image:after {
    background: linear-gradient(180deg, rgba(251, 249, 243, .5), rgba(251, 249, 243, .18) 45%, rgba(251, 249, 243, 0))
}

/* --- Cove product cards: name first, tagline directly beneath it --- */
.cove-card h3 {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    margin: 0 0 10px
}

.cove-card .eyebrow {
    position: static;
    max-width: 280px
}

.cove-card-media {
    top: 178px;
    height: 300px
}

@media(max-width:900px) {
    .cove-card-media {
        top: 168px;
        height: 268px
    }
}

@media(max-width:600px) {
    .cove-card-media {
        top: 158px;
        height: 268px
    }
}

/* --- Featured products: small text link, no boxed button --- */
.text-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font: 400 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase;
    letter-spacing: var(--ls-caption)
}

.text-cta span {
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px
}

.text-cta svg {
    width: 15px;
    height: 15px;
    transition: transform .35s
}

.text-cta:hover svg {
    transform: translateX(4px)
}

.text-cta:focus-visible {
    outline: 2px solid var(--sand);
    outline-offset: 5px
}

/* Seating hero now stands alone as a full-page image */
.seating-collections {
    margin-top: clamp(70px, 8vw, 100px);
    padding-bottom: 100px;
}
section.cove-products {
    padding-bottom: 100px;
}
/* --- Sustainability cards: labels promoted to real subheadings (h3, 31px) --- */
.about-materials h3 {
    margin: 0;
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    letter-spacing: var(--ls-heading);
    /* text-transform: uppercase; */
    color: var(--ink)
}

.about-materials h3+p {
    margin-top: 18px
}

/* --- Reveal animation wrappers must never override their heading's type --- */
main .title-word,
main .title-char {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit
}

main .title-char {
    display: inline-block
}

/* --- Why Cofur (Figma 111:465): image height follows the copy column, no dead space --- */
.home-lower {
    width: min(var(--measure), calc(100% - 58px));
    max-width: none;
    background: transparent;
    padding: 0 0 clamp(60px, 7vw, 100px)
}

.why-copy>img {
    /* height:0 keeps the image out of intrinsic row sizing, so the rows are sized by
       the heading + list; min-height then stretches it to exactly that height. */
    height: 0;
    min-height: 100%;
    align-self: stretch;
    object-fit: cover
}

/* --- Footer CTA copy shares the footer's left edge (the outline artwork that
       justified the old inset was removed at the client's request) --- */
.footer-cta {
    padding-left: 0;
    padding-right: 0
}

@media(max-width:900px) {
    .home-lower {
        width: calc(100% - 40px);
        padding-bottom: 60px
    }

    .why-copy>img {
        height: min(80vw, 430px);
        min-height: 0;
        align-self: auto;
        margin-bottom: 36px
    }
}

/* --- Featured product: title stays at the top, the CTA sits at the bottom
       of the image (client reference mark-up) --- */
.featured-title {
    top: 5%;
    bottom: 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    pointer-events: none
}

.featured-title h3 {
    margin: 0
}

.featured-title .text-cta {
    pointer-events: auto
}

@media(max-width:900px) {
    .featured-title {
        top: 7%;
        bottom: 7%
    }
}

/* ==========================================================================
   Header: one right-aligned group, fixed to the top on scroll
   ========================================================================== */
.nav-links {
    flex: 0 0 auto;
    margin-left: auto;
    gap: clamp(20px, 2.2vw, 38px)
}

.nav-spacer {
    margin-left: 0
}

/* Non-overlay pages keep the header in flow and stick it on scroll —
   no layout shift, no spacer element needed. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    transition: background .3s, box-shadow .3s, color .3s
}

/* Overlay pages (home / cove collection) sit over the hero, so they need
   to be taken out of flow entirely and follow the scroll. */
.site-header.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0
}

.site-header.is-stuck {
    background: var(--paper);
    box-shadow: 0 1px 0 rgba(19, 34, 65, .1), 0 10px 24px rgba(19, 34, 65, .05)
}

/* Outranks the per-page overlay rules (body[data-page="home"] .site-header.overlay) */
body[data-page] .site-header.overlay.is-stuck {
    color: var(--ink);
    background: var(--paper);
    background-image: none
}

body[data-page] .site-header.overlay.is-stuck .logo {
    filter: none
}

@media(max-width:900px) {
    .nav-links {
        margin-left: 0
    }
}

/* --- Our collection: kicker + rule removed, breathing room under the strip --- */
.collection-pin {
    padding-top: clamp(40px, 5vw, 70px)
}

.collection-story {
    padding-bottom: clamp(70px, 8vw, 120px)
}

@media(max-width:900px) {
    .collection-pin {
        padding-top: 40px
    }

    .collection-story {
        padding-bottom: 70px
    }
}

/* ==========================================================================
   Page banner — About and Enquiry now use the home hero treatment:
   full-bleed cover image, dark wash, centred white heading, overlay header.
   ========================================================================== */
.about-page .about-hero.page-banner,
.enquiry-page .enquiry-hero.page-banner,
.cove-page .cove-hero.page-banner,
.seating-page .seating-hero.page-banner,
.product-page .pdp-banner.page-banner {
    position: relative;
    width: 100vw;
    max-width: none;
    margin: 0 0 0 calc(50% - 50vw);
    height: 700px;
    min-height: 700px;
    display: grid;
    place-items: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
    padding: 0
}

.about-page .about-hero.page-banner .about-hero__image {
    position: absolute;
    inset: 0;
    height: 100%;
    display: block;
    overflow: hidden;
    justify-content: initial
}

.about-page .about-hero.page-banner img,
.enquiry-page .enquiry-hero.page-banner img,
.cove-page .cove-hero.page-banner img,
.seating-page .seating-hero.page-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    filter: none
}

/* Same wash as the home hero, but held darker through the middle band so the
   centred heading stays legible over lighter photography. */
.about-page .about-hero.page-banner:after,
.enquiry-page .enquiry-hero.page-banner:after,
.cove-page .cove-hero.page-banner:after,
.seating-page .seating-hero.page-banner:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .38) 45%, rgba(0, 0, 0, .5))
}

.about-page .about-hero.page-banner h1,
.enquiry-page .enquiry-hero.page-banner h1,
.cove-page .cove-hero.page-banner h1,
.seating-page .seating-hero.page-banner h1 {
    position: relative;
    z-index: 2;
    inset: auto;
    display: block;
    margin: 0 auto;
    padding: 0 24px;
    max-width: 700px;
    color: #fff;
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    letter-spacing: var(--ls-heading);
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .45)
}

@media(max-width:900px) {

    .about-page .about-hero.page-banner,
    .enquiry-page .enquiry-hero.page-banner,
    .cove-page .cove-hero.page-banner,
    .seating-page .seating-hero.page-banner,
    .product-page .pdp-banner.page-banner {
        height: 600px;
        min-height: 600px
    }
}

@media(max-width:600px) {

    .about-page .about-hero.page-banner,
    .enquiry-page .enquiry-hero.page-banner,
    .cove-page .cove-hero.page-banner,
    .seating-page .seating-hero.page-banner,
    .product-page .pdp-banner.page-banner {
        height: 480px;
        min-height: 480px
    }
}

/* White navigation over the banner, matching the home page */
body[data-page="about"] .site-header.overlay,
body[data-page="enquiry"] .site-header.overlay,
body[data-page="cove-collection"] .site-header.overlay,
body[data-page="soft-seating"] .site-header.overlay {
    color: #fff;
    background: linear-gradient(180deg, rgba(8, 8, 8, .72), rgba(8, 8, 8, .24) 72%, transparent)
}

body[data-page="about"] .site-header.overlay .logo,
body[data-page="enquiry"] .site-header.overlay .logo,
body[data-page="cove-collection"] .site-header.overlay .logo,
body[data-page="soft-seating"] .site-header.overlay .logo {
    filter: brightness(0) invert(1)
}

/* Content that used to sit under the old inline heroes needs its own top gap */
.about-page .about-hero.page-banner+.about-intro,
.enquiry-page .enquiry-hero.page-banner+.enquiry-intro {
    margin-top: clamp(60px, 7vw, 100px)
}

/* Cove Collection hero uses the shared banner treatment */
.cove-page .cove-hero.page-banner {
    background: none
}

.cove-page .cove-hero.page-banner .cove-hero-image {
    position: absolute;
    inset: 0;
    z-index: 0
}

.cove-page .cove-hero.page-banner .cove-hero-image:after {
    display: none
}

.cove-page .cove-hero.page-banner .cove-hero-copy {
    position: relative;
    z-index: 2;
    display: grid;
    /* the old hero used a 730px + 1fr split, which left the title off-centre */
    grid-template-columns: minmax(0, 1fr);
    place-content: center;
    justify-items: center;
    width: 100%;
    height: 100%;
    padding: 0 24px;
    gap: 0
}

.cove-page .cove-hero.page-banner .cove-hero-copy>div:first-child {
    display: block
}

.cove-page .cove-hero.page-banner h1 {
    color: #fff
}

/* The Cove hero photo is almost exactly the banner's aspect ratio, so `cover`
   leaves the sofa dead-centre and the heading lands on it. Scale the image
   against the top edge to open clear space for the title. */
.cove-page .cove-hero.page-banner img {
    height: 134%;
    top: 0;
    bottom: auto;
    object-position: center top
}

/* --- Location map: the office is the subject, not a dot in a wide strip --- */
.about-location {
    height: clamp(340px, 40vw, 560px);
    max-width: 1040px;
    margin: 0 auto;
    border: 1px solid var(--line)
}

/* --- Where to find us: map on the left, address on the right --- */
.about-find {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(32px, 4.5vw, 70px);
    align-items: center
}

.about-find .about-location {
    max-width: none;
    margin: 0;
    height: 100%;
    min-height: clamp(320px, 34vw, 320px)
}

.about-find .about-address {
    max-width: 520px;
    margin: 0
}

.about-find .about-address h3 {
    margin: 0 0 14px
}

.about-find .about-address p {
    margin: 0
}

@media(max-width:900px) {
    .about-find {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .about-find .about-location {
        min-height: clamp(280px, 60vw, 380px)
    }
}

/* Soft Seating hero adopts the shared banner (was a bespoke hero below the header) */
.seating-page .seating-hero.page-banner .seating-hero-image {
    position: absolute;
    inset: 0;
    height: 100%;
    border-radius: 0;
    z-index: 0
}

.seating-page .seating-hero.page-banner .seating-hero-copy {
    position: relative;
    z-index: 2;
    display: grid;
    place-content: center;
    justify-items: center;
    width: 100%;
    height: 100%;
    padding: 0 24px;
    text-align: center
}

/* Banners run edge-to-edge from the very top of the page on every banner page */
.enquiry-page,
.seating-page,
.cove-page,
.about-page {
    padding-top: 0
}

/* One auto column in a `place-items: center` grid is laid out at the start,
   so the tracks need centring too or the heading sits left. */
.about-page .about-hero.page-banner,
.enquiry-page .enquiry-hero.page-banner,
.cove-page .cove-hero.page-banner,
.seating-page .seating-hero.page-banner {
    /* these heroes carried their own multi-column grids; collapse to one
       full-width track so the heading centres on the page, not in a track */
    grid-template-columns: minmax(0, 1fr);
    place-content: center
}

/* --- Team: "The people behind Cofur" is the heading, "Our team" the subheading --- */
.about-team>h2 {
    margin: 0 0 14px
}

.about-team__sub {
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    letter-spacing: var(--ls-heading);
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 clamp(36px, 4vw, 60px)
}

/* --- Mission back to left aligned --- */
.about-mission {
    text-align: left
}

.about-mission h2 {
   
    margin: 0 auto;
    font:400 var(--font-heading)/var(--lh-heading) var(--serif);
    text-align: center;
}

/* ==========================================================================
   Home hero slider — three stills, then the existing video
   ========================================================================== */
.hero-slides {
    position: absolute;
    inset: 0;
    z-index: 0
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.1s ease
}

.hero-slide.is-active {
    opacity: 1
}

.hero-slide img,
.hero-slide video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.hero .hero-video {
    position: static;
    inset: auto
}

.hero h1 {
    z-index: 2
}

.hero-dots {
    position: absolute;
    z-index: 3;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px
}

.hero-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: background .3s, transform .3s
}

.hero-dots button[aria-selected="true"] {
    background: #fff;
    transform: scale(1.35)
}

.hero-dots button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px
}

@media(prefers-reduced-motion:reduce) {
    .hero-slide {
        transition: none
    }
}

/* Hero wash held darker through the middle so the heading reads on every
   slide, including the brighter interiors (matches the inner-page banners) */
.hero:after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .38) 45%, rgba(0, 0, 0, .5))
}

.hero h1 {
    text-shadow: 0 2px 24px rgba(0, 0, 0, .45)
}

/* ==========================================================================
   Contact page — Sept 2026 redesign (replaces the old enquiry layout)
   ========================================================================== */
.contact-lead {
    max-width: 760px;
    margin: clamp(64px, 8vw, 110px) auto 0;
    text-align: center
}

.contact-lead__eyebrow {
    font-family: var(--sans);
    font-size: var(--font-caption);
    letter-spacing: var(--ls-caption);
    text-transform: uppercase;
    color: rgba(19, 34, 65, .55);
    margin: 0 0 14px
}

.contact-lead h2 {
    font-family: var(--serif);
    font-size: var(--font-heading);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    margin: 0 0 18px
}

.contact-lead__copy {
    font-family: var(--sans);
    font-size: var(--font-body);
    line-height: var(--lh-body);
    color: rgba(19, 34, 65, .78);
    margin: 0
}

.contact-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 34px);
    margin-top: clamp(40px, 5vw, 64px)
}

.contact-card {
    border-top: 1px solid var(--line);
    padding-top: 20px;
    min-width: 0
}

.contact-card h3 {
    font-family: var(--sans);
    font-size: var(--font-caption);
    letter-spacing: var(--ls-caption);
    text-transform: uppercase;
    color: rgba(19, 34, 65, .55);
    font-weight: 500;
    margin: 0 0 10px
}

.contact-card p {
    font-family: var(--sans);
    font-size: var(--font-body);
    line-height: var(--lh-body);
    margin: 0
}

.contact-card a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px
}

.contact-form-section {
    margin: clamp(48px, 6vw, 90px) auto clamp(72px, 9vw, 130px)
}

.contact-form-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: clamp(28px, 4vw, 60px)
}

.contact-form-title {
    font-family: var(--serif);
    font-size: var(--font-subheading);
    line-height: var(--lh-subheading);
    margin: 0 0 clamp(24px, 3vw, 38px)
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.2vw, 28px)
}

.cfield {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0
}

.cfield--full {
    grid-column: 1 / -1
}

.contact-form label {
    font-family: var(--sans);
    font-size: var(--font-caption);
    letter-spacing: .02em;
    color: rgba(19, 34, 65, .8)
}

.contact-form label em {
    font-style: normal;
    color: var(--peach);
    margin-left: 2px
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    min-width: 0;
    font-family: var(--sans);
    font-size: var(--font-body);
    line-height: 1.5;
    color: var(--ink);
    background: #f4f2ed;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 13px 14px;
    transition: border-color .25s, background .25s
}

.contact-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23132241' stroke-width='1.4'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    padding-right: 38px
}

.contact-form textarea {
    resize: vertical;
    min-height: 150px
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: 0;
    background: #fff;
    border-color: var(--sand)
}

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
    box-shadow: 0 0 0 3px rgba(212, 183, 145, .35)
}

.contact-submit {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: clamp(24px, 3vw, 36px)
}

.contact-button {
    font-family: var(--sans);
    font-size: var(--font-caption);
    letter-spacing: var(--ls-caption);
    text-transform: uppercase;
    color: #9d7936;
    background: transparent;
    border: 1px solid var(--sand);
    border-radius: 3px;
    padding: 15px 30px;
    cursor: pointer;
    transition: background .28s, color .28s
}

.contact-button:hover,
.contact-button:focus-visible {
    background: var(--sand);
    color: var(--ink)
}

.contact-page .form-message {
    margin: 0
}

@media(max-width:900px) {
    .contact-cards {
        grid-template-columns: 1fr;
        gap: 24px
    }
}

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

    .contact-submit .contact-button {
        width: 100%
    }
}

/* ==========================================================================
   About — centred opening + "Our values" numbered format (ekko reference)
   ========================================================================== */
.about-intro--centered {
    text-align: center;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto
}

.about-intro--centered h2 {
    max-width: none;
    margin: 0 auto 22px
}

.about-intro--centered p {
    max-width: 720px;
    margin: 0 auto
}

.about-values {
    margin: clamp(56px, 7vw, 96px) auto clamp(60px, 7vw, 100px)
}

.about-values__title {
    font-family: var(--serif);
    font-size: var(--font-subheading);
    line-height: var(--lh-subheading);
    letter-spacing: var(--ls-heading);
    text-align: center;
    margin: 0 0 clamp(28px, 4vw, 52px)
}

.about-values__list {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(30px, 5vw, 80px)
}

/* the hairline the numerals sit against */
.about-values__line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--line);
    transform: translateX(-.5px)
}

.about-value {
    position: relative;
    grid-column: 1;
    max-width: 400px;
    padding-top: clamp(34px, 4vw, 58px)
}
.about-values p {
    margin-bottom: 15px;
}
/* alternate sides and stagger, so each block reads down the centre line */
.about-value:nth-of-type(odd) {
    grid-column: 1;
    justify-self: end;
    text-align: right
}

.about-value:nth-of-type(even) {
    grid-column: 2;
    justify-self: start;
    text-align: left
}

/* each block rises into the one above it, the way the reference staggers */
.about-values__list>.about-value:not(:nth-of-type(1)) {
    margin-top: clamp(-130px, -7vw, -40px)
}

.about-values__list>.about-value:nth-of-type(1) {
    grid-row: 1
}

.about-values__list>.about-value:nth-of-type(2) {
    grid-row: 2
}

.about-values__list>.about-value:nth-of-type(3) {
    grid-row: 3
}

.about-values__list>.about-value:nth-of-type(4) {
    grid-row: 4
}

.about-value__num {
    display: block;
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(66px, 7.6vw, 112px);
    line-height: .8;
    letter-spacing: -.03em;
    color: rgba(19, 34, 65, .1);
    margin: 0 0 -6px;
    user-select: none
}

.about-value h3 {
    font-family: var(--serif);
    font-size: var(--font-subheading);
    line-height: var(--lh-subheading);
    letter-spacing: var(--ls-heading);
    font-weight: 400;
    margin: 0 0 14px
}

.about-value p {
    font-family: var(--sans);
    font-size: var(--font-body);
    line-height: var(--lh-body);
    color: rgba(19, 34, 65, .78);
    margin: 0
}

@media(max-width:900px) {
    .about-values__list {
        grid-template-columns: 1fr;
        column-gap: 0
    }

    .about-values__line {
        left: 0;
        transform: none
    }

    .about-value:nth-of-type(odd),
    .about-value:nth-of-type(even) {
        grid-column: 1;
        justify-self: stretch;
        text-align: left;
        max-width: none;
        padding-left: clamp(18px, 4vw, 32px)
    }

    .about-values__list>.about-value:nth-of-type(1),
    .about-values__list>.about-value:nth-of-type(2),
    .about-values__list>.about-value:nth-of-type(3),
    .about-values__list>.about-value:nth-of-type(4) {
        grid-row: auto
    }

    .about-values__list>.about-value:not(:nth-of-type(1)) {
        margin-top: 0
    }
}

/* ==========================================================================
   Floating WhatsApp contact — replaces the product guide that sat here
   --------------------------------------------------------------------------
   Same footprint as the old assistant (64px, 30px in from the corner) so the
   clearances measured against it elsewhere still hold. The label is folded
   away until hover or keyboard focus, so at rest it is just the mark.
   ========================================================================== */
.cofur-whatsapp {
    --o: 64px;
    position: fixed;
    right: clamp(16px, 2.2vw, 30px);
    bottom: clamp(16px, 2.2vw, 30px);
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 0;
    height: var(--o);
    padding: 0 calc((var(--o) - 30px) / 2);
    border-radius: calc(var(--o) / 2);
    background: #25d366;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(19, 34, 65, .22);
    transition: gap .4s cubic-bezier(.22, 1, .36, 1), padding .4s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, transform .3s ease
}

.cofur-whatsapp svg {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    fill: currentColor
}

/* The 1fr -> 0fr track collapse keeps the label out of the flow until it is
   wanted, so the resting state is a clean circle. The clipping and the zero
   minimum go on the inner span: an fr track floors at its item's min-content
   width, and a bare text node is an anonymous box no rule can reach. */
.cofur-whatsapp__label {
    display: inline-grid;
    grid-template-columns: 0fr;
    opacity: 0;
    font: 400 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase;
    letter-spacing: var(--ls-caption);
    transition: grid-template-columns .4s cubic-bezier(.22, 1, .36, 1), opacity .3s ease
}

.cofur-whatsapp__label>span {
    overflow: clip;
    min-width: 0;
    white-space: nowrap
}

.cofur-whatsapp:hover,
.cofur-whatsapp:focus-visible {
    gap: 10px;
    padding: 0 22px;
    box-shadow: 0 14px 32px rgba(19, 34, 65, .28);
    transform: translateY(-1px)
}

.cofur-whatsapp:hover .cofur-whatsapp__label,
.cofur-whatsapp:focus-visible .cofur-whatsapp__label {
    grid-template-columns: 1fr;
    opacity: 1
}

.cofur-whatsapp:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px
}

@media(max-width:600px) {
    .cofur-whatsapp {
        --o: 56px
    }

    /* a phone has no hover, and the tap target is the point — keep it a circle,
       including on focus, where the padding would otherwise still open up */
    .cofur-whatsapp__label {
        display: none
    }

    .cofur-whatsapp:hover,
    .cofur-whatsapp:focus-visible {
        gap: 0;
        padding: 0 calc((var(--o) - 30px) / 2)
    }
}

@media(prefers-reduced-motion:reduce) {

    .cofur-whatsapp,
    .cofur-whatsapp__label {
        transition: none
    }
}

/* ==========================================================================
   Client review — Sept 2026 (round 3)
   Header wash, Collections mega-menu, CTA unification, section rhythm
   ========================================================================== */

/* --- 1. Fixed nav: white at the top, fading to nothing at the bottom --- */
body[data-page] .site-header.is-stuck,
body[data-page] .site-header.overlay.is-stuck {
    background-color: transparent;
    background-image: linear-gradient(180deg, #fff 0%, #fff 46%, rgba(255, 255, 255, .55) 76%, rgba(255, 255, 255, 0) 100%);
    box-shadow: none
}

body[data-page] .site-header.is-stuck {
    padding-bottom: clamp(10px, 1.4vw, 20px)
}

/* --- 2. Collections mega-menu: flat two-level list, 5% chip, right arrow --- */
.mega-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 0;
    padding: 26px 50px 42px;
    gap: clamp(24px, 3vw, 48px)
}

.mega-grid h2 {
    margin: 0 0 10px
}

.mega-grid section>a,
.mega-grid section>a:not(.mega-active) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: static;
    background: transparent;
    border-radius: 2px;
    padding: 9px 12px;
    margin: 1px -12px;
    transition: background .25s, color .25s
}

/* the old left-hand tick is gone */
.mega-grid section>a:not(.mega-active):before {
    content: none
}

.mega-grid section>a:after {
    content: "";
    flex: 0 0 auto;
    width: 15px;
    height: 11px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='%23132241' stroke-width='1.3'%3E%3Cpath d='M1 6h13m-4.5-4.5L14.5 6 9.5 10.5'/%3E%3C/svg%3E") no-repeat center/contain;
    opacity: .35;
    transition: opacity .25s, transform .25s
}

.mega-grid section>a:hover,
.mega-grid section>a:focus-visible,
.mega-grid section>a:not(.mega-active):hover,
.mega-grid section>a:not(.mega-active):focus-visible {
    background: rgba(19, 34, 65, .05);
    color: var(--ink);
    padding-left: 12px
}

.mega-grid section>a:hover:after,
.mega-grid section>a:focus-visible:after {
    opacity: 1;
    transform: translateX(3px)
}

/* --- 3. Collection strip: standard section rhythm + Featured-products CTA --- */
.collection-pin {
    padding-top: clamp(60px, 7vw, 100px)
}

.collection-story {
    padding-bottom: clamp(60px, 7vw, 100px)
}

.collection-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font: 400 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase;
    letter-spacing: var(--ls-caption)
}

.collection-link>span {
    display: inline;
    background: none;
    padding: 0 0 2px;
    border-bottom: 1px solid currentColor
}

.collection-link b {
    display: inline-flex;
    align-items: center;
    background: none;
    width: auto;
    padding: 0
}

.collection-link svg {
    width: 15px;
    height: 15px
}

.collection-link:hover>span {
    filter: none
}

.collection-link:hover svg {
    transform: translateX(4px)
}

.collection-link:focus-visible {
    outline: 2px solid var(--sand);
    outline-offset: 5px
}

/* --- 4. "We are" band: About us CTA matches Featured products --- */
.who-bottom .action-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font: 400 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase;
    letter-spacing: var(--ls-caption)
}

.who-bottom .action-link>span {
    display: inline;
    background: none;
    border: 0;
    padding: 0 0 2px;
    border-bottom: 1px solid currentColor
}

.who-bottom .action-link>b {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    width: auto;
    padding: 0
}

.who-bottom .action-link svg {
    width: 15px;
    height: 15px
}

.who-bottom .action-link:hover>span {
    background: none
}

/* the CTA is a text link now, so it needs its own breathing room */
@media(min-width:901px) {
    .collection-link {
        bottom: clamp(34px, 6vh, 70px)
    }
}

@media(max-width:900px) {
    .collection-link {
        margin: 0 24px 34px
    }
}

/* ==========================================================================
   Client review — Sept 2026 (round 4)
   ========================================================================== */

/* --- Header: a genuinely soft white-to-clear wash, no visible edge --- */
body[data-page] .site-header.is-stuck,
body[data-page] .site-header.overlay.is-stuck {
    background-color: transparent;
    background-image: linear-gradient(180deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, .995) 22%,
            rgba(255, 255, 255, .97) 40%,
            rgba(255, 255, 255, .91) 52%,
            rgba(255, 255, 255, .8) 62%,
            rgba(255, 255, 255, .64) 71%,
            rgba(255, 255, 255, .46) 79%,
            rgba(255, 255, 255, .29) 86%,
            rgba(255, 255, 255, .15) 92%,
            rgba(255, 255, 255, .06) 96%,
            rgba(255, 255, 255, 0) 100%);
    box-shadow: none
}

body[data-page] .site-header.is-stuck {
    padding-bottom: clamp(20px, 2.8vw, 42px)
}

/* --- Our products: even top/bottom rhythm + Featured products CTA --- */
.categories {
    padding: clamp(60px, 7vw, 100px) 1vw
}

.category-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    color: var(--ink);
    padding: 0;
    font: 400 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase;
    letter-spacing: var(--ls-caption)
}

.category-button>span {
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px
}

.category-button svg {
    width: 15px;
    height: 15px;
    transition: transform .35s
}

@media(max-width:900px) {
    .category-button {
        padding: 0;
        font-size: var(--font-caption)
    }
}

/* keep the About us link clear of the floating product guide */
@media(min-width:901px) {
    .who-bottom {
        padding-right: clamp(74px, 6vw, 110px)
    }
}

/* ==========================================================================
   Footer — rebuilt Sept 2026 (ekko reference), ink #132241 ground
   ========================================================================== */
.cofur-footer {
    background: #132241;
    color: #fff;
    font-family: var(--sans);
    padding: clamp(48px, 6vw, 60px) clamp(20px, 4vw, 62px) clamp(24px, 2.6vw, 36px)
}

.cofur-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
    padding-bottom: clamp(44px, 5.5vw, 82px)
}

/* --- left: identity --- */
.cofur-footer__logo {
    display: inline-block;
    margin-bottom: clamp(26px, 3vw, 42px)
}

.cofur-footer__logo img {
    width: 168px;
    height: auto;
    filter: brightness(0) invert(1)
}

.cofur-footer__name {
    font-size: var(--font-body);
    font-weight: 500;
    margin: 0 0 10px
}

.cofur-footer__address {
    font-style: normal;
    font-size: var(--font-body);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, .72);
    margin: 0 0 18px;
    max-width: 420px
}

.cofur-footer__address a {
    color: inherit
}

.cofur-footer__address a:hover {
    color: #fff
}

.cofur-footer__contact {
    list-style: none;
    margin: 0 0 clamp(24px, 3vw, 36px);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 26px;
    font-size: var(--font-body)
}

.cofur-footer__contact a {
    color: rgba(255, 255, 255, .82);
    border-bottom: 1px solid rgba(255, 255, 255, .28);
    padding-bottom: 2px;
    transition: color .25s, border-color .25s
}

.cofur-footer__contact a:hover {
    color: #fff;
    border-color: #fff
}

.cofur-footer__social {
    list-style: none;
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 0
}

.cofur-footer__social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    color: rgba(255, 255, 255, .82);
    transition: background .25s, color .25s, border-color .25s
}

.cofur-footer__social svg {
    width: 16px;
    height: 16px
}

.cofur-footer__social a:hover,
.cofur-footer__social a:focus-visible {
    background: #fff;
    border-color: #fff;
    color: #132241
}

/* --- right: closing CTA --- */
.cofur-footer__eyebrow {
    font-size: var(--font-caption);
    letter-spacing: var(--ls-caption);
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 12px
}

.cofur-footer__eyebrow:before {
    content: "";
    width: 10px;
    height: 11px;
    background: var(--sand);
    flex: 0 0 auto
}

.cofur-footer__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 34px;
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    color: #fff;
    margin: 0 0 clamp(26px, 3vw, 40px)
}

.cofur-footer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px
}

.cofur-footer__btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: var(--font-caption);
    letter-spacing: var(--ls-caption);
    text-transform: uppercase;
    color: #132241;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 3px;
    padding: 15px 24px;
    transition: background .28s, color .28s, border-color .28s
}

.cofur-footer__btn svg {
    width: 17px;
    height: 17px;
    transition: transform .35s
}

.cofur-footer__btn:hover svg,
.cofur-footer__btn:focus-visible svg {
    transform: translateX(4px)
}

.cofur-footer__btn--ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .38)
}

.cofur-footer__btn--ghost:hover,
.cofur-footer__btn--ghost:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, .08)
}

.cofur-footer__btn:not(.cofur-footer__btn--ghost):hover,
.cofur-footer__btn:not(.cofur-footer__btn--ghost):focus-visible {
    background: var(--sand);
    border-color: var(--sand)
}

/* --- bottom bar --- */
.cofur-footer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 34px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding-top: clamp(20px, 2.4vw, 30px)
}

.cofur-footer__copy {
    margin: 0;
    font-size: var(--font-caption);
    color: rgba(255, 255, 255, .58)
}

.cofur-footer__menu {
    display: flex;
    flex-wrap: wrap;
    gap: 12px clamp(20px, 2.4vw, 38px);
    margin-right: 50px;
}

.cofur-footer__menu a {
    font-size: var(--font-caption);
    letter-spacing: var(--ls-caption);
    color: rgba(255, 255, 255, .74);
    transition: color .25s
}

.cofur-footer__menu a:hover,
.cofur-footer__menu a:focus-visible {
    color: #fff
}

@media(max-width:900px) {
    .cofur-footer__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px
    }

    .cofur-footer__bar {
        flex-direction: column;
        align-items: flex-start
    }
}

@media(max-width:600px) {
    .cofur-footer__actions {
        flex-direction: column;
        align-items: stretch
    }

    .cofur-footer__btn {
        justify-content: space-between
    }
}

.cofur-footer__logo {
    display: block;
    line-height: 0
}

.cofur-footer__logo img {
    display: block
}

/* keep the footer menu clear of the floating product guide */
@media(min-width:901px) {
    .cofur-footer__bar {
        padding-right: clamp(74px, 6vw, 110px)
    }
}

/* ==========================================================================
   Footer refinement — real two-tone logo assets + tighter brand column
   ========================================================================== */
.cofur-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 110px);
    padding-bottom: clamp(30px, 4.6vw, 30px)
}

.cofur-footer__brand {
    max-width: 460px
}

/* the supplied light lock-up — no filter needed any more */
.cofur-footer__logo img {
    width: 176px;
    filter: none
}

/* a hairline separates the mark from the details, the way the rest of the
   site separates a label from its block */
.cofur-footer__logo {
    margin: 0 0 clamp(22px, 2.4vw, 32px);
}

.cofur-footer__name {
    margin: 0 0 8px
}

.cofur-footer__address {
    margin: 0 0 16px;
    max-width: none
}

.cofur-footer__contact {
    margin: 0 0 26px
}

@media(max-width:900px) {
    .cofur-footer__brand {
        max-width: none
    }
}

/* both columns end on the same line — no dead space under the CTA */
.cofur-footer__inner {
    align-items: stretch
}

.cofur-footer__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end
}
section.about-india.container .about-rule:before,section.about-india.container .about-rule:after {
    display: none !important;
}
section.about-india.container .about-rule{
    height: 1px;
    background: rgba(19, 34, 65, .16);
    
    margin: clamp(52px, 6vw, 60px) 0 clamp(32px, 3.6vw, 52px);
}
.cofur-footer__actions {
    margin-top: auto;
    padding-top: clamp(20px, 2.4vw, 34px)
}

.cofur-footer__title {
    margin-bottom: 0
}

/* header lock-up: match the supplied mark's proportions */
.logo {
    width: 130px;
    height: 40px
}

@media(max-width:900px) {
    .cofur-footer__actions {
        margin-top: 0
    }
}

/* the two-column footer is desktop only — restore the stack on small screens
   (the unconditional grid above would otherwise outrank the 900px override) */
@media(max-width:900px) {
    .cofur-footer__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
        align-items: start
    }
}

/* --- Header lock-up: the supplied dark mark is tightly cropped, so the old
   overflow-crop hack (.site-header .logo, absolute + 123.75% wide) is retired --- */
.site-header .brand {
    width: auto;
    height: auto;
    overflow: visible
}

.site-header .logo {
    position: static;
    width: 148px;
    height: auto;
    max-width: 100%;
    left: auto;
    top: auto;
    transform: none;
    object-fit: contain;
    display: block
}

@media(max-width:900px) {
    .site-header .brand {
        width: auto;
        height: auto
    }

    .site-header .logo {
        width: 122px;
        height: auto
    }
}

/* ==========================================================================
   Page measure — header, content and footer share ONE left/right alignment
   The site's content measure is .container: min(1380px, 100% - 58px).
   Everything that was running on its own gutter (22 / 19 / 38 / 240 / 277 /
   62) is pulled onto it here so every edge stacks vertically.
   ========================================================================== */

/* --- header --- */
.site-header .nav {
    width: min(var(--measure), calc(100% - 58px));
    max-width: none;
    margin-left: auto;
    margin-right: auto
}

/* --- home: category strip --- */
.categories {
    padding-left: 0;
    padding-right: 0
}

.categories .category-grid {
    width: min(var(--measure), calc(100% - 58px));
    margin-left: auto;
    margin-right: auto
}

/* --- home: featured products --- */
.featured-section {
    padding-left: 0;
    padding-right: 0
}

.featured-section .section-heading,
.featured-section .featured-stage {
    width: min(var(--measure), calc(100% - 58px));
    margin-left: auto;
    margin-right: auto
}

/* --- home: "We are" band sits on the measure inside its full-bleed photo --- */
.statement-story .who-copy {
    width: min(var(--measure), calc(100% - 58px));
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0
}

/* the asymmetric nudge added for the floating guide broke the right edge */
.who-bottom {
    padding-right: 0
}

/* --- cove collection --- */
.cove-products {
    width: min(var(--measure), calc(100% - 58px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0
}

/* --- soft seating (was 277 left / 286 right) --- */
.seating-collections {
    width: min(var(--measure), calc(100% - 58px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0
}

/* --- cove social sub-nav --- */
.social-subnav {
    width: min(var(--measure), calc(100% - 58px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0
}

/* --- footer --- */
.cofur-footer {
    padding-left: 0;
    padding-right: 0;
    /* enough room at the very bottom that the floating guide never lands on
       the menu — no asymmetric padding, so both edges stay aligned */
    padding-bottom: clamp(0px, 3vw, 0px)
}

.cofur-footer__inner,
.cofur-footer__bar {
    width: min(var(--measure), calc(100% - 58px));
    margin-left: auto;
    margin-right: auto;
    padding-right: 0
}

.cofur-footer__bar {
    padding-bottom: clamp(46px, 4vw, 70px)
}

/* the same measure has to survive the tablet/mobile overrides, or the header
   and footer drift away from the content again */
@media(max-width:900px) {

    .container,
    .social-page .container,
    .home-lower,
    .site-header .nav,
    body[data-page="cove-social"] .nav,
    .categories .category-grid,
    .featured-section .section-heading,
    .featured-section .featured-stage,
    .statement-story .who-copy,
    .cove-products,
    .seating-collections,
    .social-subnav,
    .cofur-footer__inner,
    .cofur-footer__bar {
        width: calc(100% - 48px);
        max-width: none;
        margin-left: auto;
        margin-right: auto
    }
}

@media(max-width:600px) {

    .container,
    .social-page .container,
    .home-lower,
    .site-header .nav,
    body[data-page="cove-social"] .nav,
    .categories .category-grid,
    .featured-section .section-heading,
    .featured-section .featured-stage,
    .statement-story .who-copy,
    .cove-products,
    .seating-collections,
    .social-subnav,
    .cofur-footer__inner,
    .cofur-footer__bar {
        width: calc(100% - 40px);
        max-width: none;
        margin-left: auto;
        margin-right: auto
    }
}

/* --- Collections mega-menu sits on the page measure too --- */
.mega-menu {
    left: 0;
    right: 0
}

.mega-grid {
    width: min(var(--measure), calc(100% - 58px));
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0
}

@media(max-width:900px) {
    .mega-grid {
        width: calc(100% - 48px)
    }
}

@media(max-width:600px) {
    .mega-grid {
        width: calc(100% - 40px)
    }
}

/* ==========================================================================
   Section rule — centred label with a hairline running out to both edges
   (Where to find us / Our responsibility), per the supplied reference
   ========================================================================== */
.about-rule {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(18px, 2.6vw, 44px);
    margin: clamp(52px, 6vw, 88px) 0 clamp(32px, 3.6vw, 52px)
}

.about-rule:before,
.about-rule:after {
    content: "";
    height: 1px;
    background: rgba(19, 34, 65, .16)
}

.about-rule span {
    grid-column: 2;
    font-family: var(--sans);
    font-size: var(--font-caption);
    letter-spacing: var(--ls-caption);
    text-transform: uppercase;
    color: rgba(19, 34, 65, .58);
    text-align: center;
    white-space: nowrap
}

/* the small ink square belonged to the old left-aligned treatment */
.about-rule span:before {
    content: none
}

/* the heading that follows the rule now reads as a centred section title */
.about-sustainability>.about-rule+h2 {
    text-align: center
}

@media(max-width:600px) {
    .about-rule {
        gap: 14px
    }

    .about-rule span {
        white-space: normal
    }
}

/* ==========================================================================
   Section imagery refresh — Sept 2026
   Responsive <picture> swap for the homepage hero/statement/why blocks, the
   Cove, About and Contact banners, the sustainability quote and the soft
   seating lifestyle tile.

   Two jobs only:
   1. give each <picture> wrapper the box geometry its <img> used to get
      directly, so no existing layout rule changes behaviour;
   2. set a per-section object-position for desktop and again for mobile, so
      each crop keeps its own subject in frame. No global default is used.
   ========================================================================== */

/* --- 1. wrapper geometry ------------------------------------------------ */

/* Home hero: slide is the positioned box; the picture just has to fill it. */
.hero-slide>picture {
    display: block;
    width: 100%;
    height: 100%
}

/* Statement crossfade. The legacy rule `.statement-images img:not(:first-child)`
   assumed the three <img>s were siblings. Inside a <picture> the <source> element
   occupies the :first-child slot, so that rule now matches EVERY image — including
   the first one, which the GSAP timeline never animates back to 1. Reset all three,
   then re-hide 2 and 3 for the scrub to fade in. */
/* Specificity matters here: the legacy rule is (0,2,1). `.statement-images>picture>img`
   is only (0,1,2) and loses, so the reset is scoped with .statement-story to reach
   (0,2,2); the hide rule below is already (0,2,2) and wins on source order. */
.statement-story .statement-images>picture>img {
    opacity: 1
}

.statement-images>picture:not(:first-child)>img {
    opacity: 0
}

/* Why Cofur: replaces the .why-copy>img grid placement. The inner image is
   pinned so it fills the stretched track without relying on percentage
   heights resolving against a zero-height parent. */
.why-copy>picture {
    position: relative;
    display: block;
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: stretch;
    height: 0;
    min-height: 100%;
    margin: 0
}

.why-copy>picture>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

/* mirrors the original @media(max-width:900px) .why-copy>img rule — without this
   the picture keeps height:0 once the grid collapses and the image disappears. */
@media (max-width: 900px) {
    .why-copy>picture {
        grid-column: 1;
        grid-row: auto;
        align-self: auto;
        height: min(80vw, 430px);
        min-height: 0;
        margin-bottom: 36px
    }
}

/* Sustainability quote: picture takes the fixed 468px box height. */
.about-quote>picture {
    display: block;
    width: 100%;
    height: 100%
}

.about-quote>picture>img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

/* --- 2. section-specific crops, desktop --------------------------------- */

[data-shot="hero-1"] img         { object-position: 50% 58% }
[data-shot="hero-2"] img         { object-position: 50% 46% }
[data-shot="hero-3"] img         { object-position: 50% 55% }
[data-shot="hero-4"] img         { object-position: 50% 52% }
[data-shot="hero-5"] img         { object-position: 58% 50% }
[data-shot="statement-1"] img    { object-position: 50% 55% }
[data-shot="statement-2"] img    { object-position: 50% 50% }
[data-shot="statement-3"] img    { object-position: 50% 44% }
[data-shot="banner-cove"] img    { object-position: 50% 56% }

/* The Cove banner keeps its bespoke `height:134%; top:0` treatment (which exists
   to open clear space under the title), but that rule is anchored to the top of
   the artwork and the replacement photo puts its subject low in frame — anchored
   at the top you only ever see ceiling. Shift the scaled image up so the lounge
   seating is in the window; specificity has to match the 8294 rule to win. */
.cove-page .cove-hero.page-banner [data-shot="banner-cove"] img {
    top: -17%;
    object-position: 50% 56%
}
[data-shot="banner-about"] img   { object-position: 56% 50% }
[data-shot="banner-contact"] img { object-position: 50% 62% }
[data-shot="why-cofur"] img      { object-position: 50% 50% }

/* The Why Cofur image was desaturated by `.why-grid img { filter: grayscale(1) }`
   (line ~377), which was the original treatment. Client asked for the photograph
   in its original colour, so the filter is cleared for this image only —
   `.why-grid` is kept in the selector so nothing else in that grid is affected. */
.why-grid [data-shot="why-cofur"] img {
    filter: none
}

/* --- "WE ARE" statement block: height on mobile ---------------------------
   `.statement-story .who-we-are` carries `height:100vh`, which exists so the
   desktop pinned/sticky scroll has a full viewport to scrub through. Below
   901px the section is never pinned (initHomeMotion's block is min-width:901px),
   so 100vh just left ~600px of empty space under the copy on a tall phone.
   Let the content size the block instead, with a floor so the photograph still
   reads. Desktop is untouched. */
@media (max-width: 900px) {
    .statement-story .who-we-are {
        height: auto;
        min-height: 560px
    }
}

/* --- About: numbered values, numeral/heading collision -------------------
   `.about-value__num` sets `line-height:.8` with `margin-bottom:-6px`, so the
   numeral's glyph overflows its own line box by ~6px top and bottom and the
   negative margin pulls the <h3> up another 6px. The heading then sits on top
   of the numeral ("02" through "How We Work"). Give the glyph a line box that
   contains it, plus a small positive gap. */
@media (max-width: 900px) {
    .about-value__num {
        line-height: 1;
        margin: 0 0 6px
    }
}

/* --- Why Cofur: show the whole photograph on phones ----------------------
   The desktop layout crops this image to fit a copy-height column. Below 767px
   the art-directed portrait file is served (480x640 / 768x1024, both exactly
   3:4), so matching the box to that ratio shows the full frame with nothing cut
   and no letterboxing. 767px is used, not 900px, so the ratio switches in step
   with the <source> — between 768 and 900px the landscape file is still in play
   and keeps its cropped box. */
@media (max-width: 767px) {
    .cofur-footer__cta {
    align-items: flex-start;
}
    .why-copy>picture {
        height: auto;
        aspect-ratio: 3 / 4;
        min-height: 0;
        margin-bottom: 36px
    }

    .why-copy>picture>img {
        object-fit: contain
    }
}

/* --- Inner-page banners: match the home hero on mobile -------------------
   Desktop already agrees (all five are 700px at >=901px). Below that the home
   hero stays 680px while the four page-banners stepped down to 600px (<=900)
   and 480px (<=600), so every inner page had a visibly shorter banner than the
   home page. One rule at <=900px; it sits after both existing rules and shares
   their specificity, so it supersedes the 600px and 480px steps. */
@media (max-width: 900px) {
    .about-page .about-hero.page-banner,
    .enquiry-page .enquiry-hero.page-banner,
    .cove-page .cove-hero.page-banner,
    .seating-page .seating-hero.page-banner,
    .product-page .pdp-banner.page-banner {
        height: 680px;
        min-height: 680px
    }
}
[data-shot="sustainability"] img { object-position: 50% 38% }
[data-shot="seating-lifestyle"] img { object-position: 50% 45% }

/* --- 3. section-specific crops, mobile ---------------------------------- */
/* 767px matches the <source media> breakpoint, so the art-directed portrait
   file and its crop anchor always switch together. */

@media (max-width: 767px) {

    /* hero-1, statement-1, banner-cove and banner-about now have true portrait
       crops cut from their own desktop artwork, so the framing is baked into the
       file and these anchors only need to sit near centre. */
    [data-shot="hero-1"] img         { object-position: 50% 50% }
    [data-shot="hero-2"] img         { object-position: 50% 50% }
    [data-shot="hero-3"] img         { object-position: 50% 62% }
    [data-shot="hero-4"] img         { object-position: 50% 55% }
    [data-shot="hero-5"] img         { object-position: 50% 50% }
    [data-shot="statement-1"] img    { object-position: 50% 50% }
    [data-shot="statement-2"] img    { object-position: 50% 55% }
    [data-shot="statement-3"] img    { object-position: 50% 40% }
    [data-shot="banner-cove"] img    { object-position: 50% 50% }

    /* On mobile the Cove banner now serves a portrait crop, so the desktop-only
       `height:134%; top:0` trick (which existed to open space under the title on a
       landscape photo) is no longer needed — plain cover frames it correctly. */
    .cove-page .cove-hero.page-banner [data-shot="banner-cove"] img {
        height: 100%;
        top: 0;
        bottom: 0;
        object-position: 50% 50%
    }
    [data-shot="banner-about"] img   { object-position: 50% 45% }
    [data-shot="banner-contact"] img { object-position: 50% 70% }
    [data-shot="why-cofur"] img      { object-position: 50% 45% }
    [data-shot="sustainability"] img { object-position: 50% 50% }
    [data-shot="seating-lifestyle"] img { object-position: 50% 45% }
}

/* ==========================================================================
   Home — "We design / We build / We create" statement, rebuilt Sept 2026
   --------------------------------------------------------------------------
   The old markup carried one fixed display heading ("WE DESIGN") beside three
   sentence fragments, so only the first line ever read as a whole sentence.
   Each line now owns its verb twice: once as the large serif display word in
   the left column, once inline inside the sentence. The active line shows the
   display word and collapses its inline copy; every other line keeps the
   inline copy, so all three always read as complete sentences and the emphasis
   moves down the column as the section scrubs.

   `.statement-line` is `display:contents` on purpose — that hands the word and
   the sentence straight to `.statement-lines`, so all three rows share one set
   of column tracks. Without it each line would size its own word column and the
   sentences would step in and out horizontally row to row.
   ========================================================================== */
.statement-story .who-lines {
    display: block;
    margin-top: auto;
    margin-bottom: auto
}

.statement-lines {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: clamp(18px, 1.6vw, 30px);
    row-gap: clamp(4px, .8vh, 14px);
    align-items: baseline
}

.statement-line {
    display: contents
}

.statement-word {
    grid-column: 1;
    justify-self: end;
    font: 400 var(--font-heading)/var(--lh-subheading) var(--serif);
    letter-spacing: var(--ls-heading);
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    opacity: 0;
    transform: translateY(.14em);
    transition: opacity .5s ease, transform .6s cubic-bezier(.22, .61, .36, 1)
}

.statement-line.is-active .statement-word {
    opacity: 1;
    transform: none
}

.statement-body {
    grid-column: 2;
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    color: #fff;
    transition: opacity .5s ease
}

/* The resting opacity is set further down, in the block added from your CSS.
   This keeps the line being read at full strength: three classes outrank the
   two-class, two-element selector there, so it wins without !important. */
.statement-line.is-active .statement-body {
    opacity: 1
}

/* The 1fr -> 0fr track collapse is what lets a run of text animate its width
   away. `overflow:clip` rather than `hidden` keeps the span out of scroll
   container territory, so its baseline stays the text baseline and the prefix
   never rides high against the rest of the sentence mid-transition. */
.statement-prefix {
    display: inline-grid;
    grid-template-columns: 1fr;
    transition: grid-template-columns .62s cubic-bezier(.65, 0, .35, 1), opacity .34s ease
}

.statement-prefix>span {
    overflow: clip;
    /* an fr track floors at the item's min-content size unless the item says
       otherwise, so without this the prefix never collapses past its widest
       word and the sentences step out of the left edge they share */
    min-width: 0;
    white-space: nowrap
}

.statement-line.is-active .statement-prefix {
    grid-template-columns: 0fr;
    opacity: 0
}

/* --- Phones and tablets -------------------------------------------------
   There is no room beside the copy for a word column, so the same idea plays
   out in time instead of across the line: the section pins and each sentence
   takes the screen in turn, its verb set large above the rest of it.

   Two states live here. Without the pin — no JavaScript, reduced motion, an
   old browser — the three sentences simply stack, whole and all visible, so
   nothing is ever hidden behind an effect that is not running. The one-at-a-
   time rules below are scoped to `.is-pinned`, which the script adds. */
@media (max-width:900px) {
    .statement-lines {
        grid-template-columns: minmax(0, 1fr);
        row-gap: clamp(8px, 2vw, 14px)
    }

    /* one column, so the word and the sentence each need the full track or
       they land side by side on the same row and overlap */
    .statement-word,
    .statement-body {
        grid-column: 1 / -1
    }

    .statement-word {
        justify-self: start;
        opacity: 1;
        transform: none;
        margin-bottom: clamp(8px, 2vw, 16px);
        transition: none
    }

    .statement-line:not(.is-active) .statement-word {
        display: none
    }

    .statement-prefix {
        transition: none
    }

    /* the block sizes to its content here, so nothing separates the last line
       from the supporting copy unless it is asked for */
    .statement-story .who-bottom {
        margin-top: clamp(30px, 7vw, 50px)
    }

    /* --- pinned state ---
       A full phone screen left the line stranded in the middle with dead space
       above and below it. The block is capped instead: tall enough to hold the
       sequence, short enough that the next section is always in sight. */
    .statement-story.is-pinned .who-we-are {
        height: min(84svh, 620px);
        min-height: 440px
    }

    .statement-story.is-pinned .who-copy {
        padding-top: clamp(64px, 14vw, 88px);
        padding-bottom: clamp(24px, 6vw, 36px)
    }

    .statement-story.is-pinned .who-bottom {
        margin-top: clamp(18px, 4vw, 28px)
    }

    /* every line sits in the same cell, so the section keeps one height and the
       sentences cross-fade in place instead of pushing each other around */
    .statement-story.is-pinned .statement-lines {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0
    }

    .statement-story.is-pinned .statement-line {
        display: grid;
        grid-area: 1 / 1;
        align-content: start;
        opacity: 0;
        visibility: hidden;
        transform: translateY(16px);
        transition: opacity .45s ease, transform .6s cubic-bezier(.22, .61, .36, 1), visibility .45s
    }

    .statement-story.is-pinned .statement-line.is-active {
        opacity: 1;
        visibility: visible;
        transform: none
    }

    /* the whole line is hidden when it is not the active one, so its display
       word no longer needs hiding on its own */
    .statement-story.is-pinned .statement-line:not(.is-active) .statement-word {
        display: block
    }

    .statement-story.is-pinned .statement-word {
        font-size: clamp(30px, 8.6vw, 44px);
        line-height: 1.08
    }

    .statement-story.is-pinned .statement-body {
        font-size: clamp(21px, 5.4vw, 30px);
        /* only one line is on screen here, so it is never a background line */
        opacity: 1
    }

    /* a quiet read-out of how far through the three the reader is — it only
       means anything while the sequence is running */
    .statement-story.is-pinned .statement-steps {
        display: flex;
        gap: 8px;
        margin-top: clamp(22px, 5vw, 34px)
    }

    .statement-steps i {
        width: 26px;
        height: 2px;
        background: rgba(255, 255, 255, .3);
        transition: background .4s ease
    }

    .statement-steps i.is-on {
        background: #fff
    }
}

/* the sequence read-out belongs to the phone layout only: on a wide screen all
   three lines are on the page at once */
.statement-steps {
    display: none
}

@media (prefers-reduced-motion: reduce) {

    .statement-word,
    .statement-prefix {
        transition: none
    }
}

/* --- "About us" vs the floating WhatsApp button -------------------------
   `.cofur-whatsapp` is fixed at 64px square, 30px from the right and bottom,
   so it owns the last ~94px of the viewport. The page measure is
   `min(1380px, 100% - 58px)`, which leaves a side margin of (100vw - 1380px)/2
   — wider than the button only above ~1570px. Below that the button reaches
   into the content column and lands on the About us link, which sits on the
   right edge of that column.

   An earlier fix padded `.who-bottom` by a flat clamp() and was reverted
   because it pulled the link off the measure on wide screens, where there was
   nothing to avoid. This asks for the clearance the button actually takes minus
   the margin already there, so it resolves to 0 on wide screens — the link stays
   flush with the right edge — and only grows as the margin runs out. */
@media (min-width:901px) {
    .statement-story .who-bottom {
        padding-right: clamp(0px, calc(104px - (100vw - var(--measure)) / 2), 78px)
    }
}

/* ==========================================================================
   Large screens — Sept 2026
   --------------------------------------------------------------------------
   Two things were pinned to pixels and so fell apart above ~1800px: every
   full-bleed hero and page banner was a fixed 700px band, and the content
   measure and type scale never grew past their 1440px-era values. On a
   2560x1400 display the hero filled half the window (the fold landed in the
   middle of the next section) and the page read as a 1380px island with ~590px
   of dead margin either side, set in 40px headings.

   Nothing below 1800px changes: the hero clamps up from 700px only when the
   window is taller than that, and the token overrides start at 1800px.
   ========================================================================== */

/* --- Full-bleed heroes fill the window ----------------------------------
   clamp() floors at the old fixed height, so short laptop windows render
   exactly as before, and caps at 1000px so the photographs are never blown up
   far past the sizes in their srcset. */
@media (min-width:901px) {

    .hero,
    .about-page .about-hero.page-banner,
    .enquiry-page .enquiry-hero.page-banner,
    .cove-page .cove-hero.page-banner,
    .seating-page .seating-hero.page-banner,
    .product-page .pdp-banner.page-banner,
    .cove-hero {
        height: clamp(700px, 100vh, 1000px);
        min-height: 700px
    }
}

@media (min-width:1800px) {
    :root {
        --measure: 1500px;
        --font-heading: 45px;
        --font-subheading: 35px;
        --font-body: 17px;
        --font-caption: 13.4px;
        --font-tiny: 12.1px;
    }

    /* fixed pixel boxes that have to follow the type up, or the larger text
       rewraps inside boxes sized for the old scale */
    .hero h1 {
        max-width: 720px
    }

    .category-card {
        height: 540px
    }

    .category-copy p {
        max-width: 250px
    }

    .statement-story .who-description,
    .who-description {
        max-width: 620px
    }
}

@media (min-width:2200px) {
    :root {
        --measure: 1650px;
        --font-heading: 50px;
        --font-subheading: 38px;
        --font-body: 18px;
        --font-caption: 14px;
        --font-tiny: 12.6px;
    }

    .hero h1 {
        max-width: 820px
    }

    .category-card {
        height: 580px
    }

    .category-copy p {
        max-width: 280px
    }
}

/* ==========================================================================
   Product page — rebuilt Sept 2026 to the supplied flow
   --------------------------------------------------------------------------
   Nav bar > banner with the product name > overview > product details >
   gallery > tech specs accordion > related products > enquiry.

   Typography is untouched: every rule below reads the existing --serif /
   --sans tokens and the approved type scale.
   ========================================================================== */

/* --- 1. Product nav ------------------------------------------------------
   The page's second bar. The site header owns the top of the page; once the
   banner has scrolled past, the header steps aside (see `.is-product-nav`
   below) and this bar takes its place. It is translated out of view rather
   than hidden so the handover is one movement in both directions. */
.product-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    color: var(--ink);
    background: #fff;
    box-shadow: 0 1px 0 rgba(19, 34, 65, .12);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .3s ease
}

.product-nav.is-active {
    transform: none;
    opacity: 1;
    pointer-events: auto
}

/* the site header and the product nav never share the top of the screen */
body.is-product-nav .site-header {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none
}

body[data-page="cove-social"] .site-header {
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, background .3s, color .3s
}

.product-nav__inner {
    width: min(var(--measure), calc(100% - 58px));
    margin: auto;
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
    min-height: 76px
}

.product-nav__brand {
    position: relative;
    display: block;
    flex: 0 0 auto;
    line-height: 0
}

.product-nav__logo {
    width: clamp(108px, 9vw, 140px);
    height: auto
}

.product-nav__links {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.2vw, 38px);
    margin-inline: auto
}

.product-nav__links a {
    position: relative;
    padding: 28px 0;
    color: inherit;
    text-decoration: none;
    font: 400 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase;
    letter-spacing: var(--ls-caption);
    white-space: nowrap
}

/* the active marker is drawn on the bar's own rule, so it reads as one line
   rather than an underline floating under the word */
.product-nav__links a:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1)
}

.product-nav__links a:hover:after,
.product-nav__links a:focus-visible:after,
.product-nav__links a.is-current:after {
    transform: scaleX(1)
}

.product-nav__cta {
    flex: 0 0 auto;
    padding: 12px 22px;
    font: 400 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase;
    letter-spacing: var(--ls-caption);
    white-space: nowrap
}

/* --- 2. Banner -----------------------------------------------------------
   The banner is a `.page-banner`, so it is listed with the other four in the
   shared block above and steps with them at every width. Only the pieces that
   block does not cover live here. */

.pdp-banner__image,
.pdp-banner__image picture,
.pdp-banner__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.pdp-banner__image img {
    object-fit: cover;
    object-position: 50% 55%
}

.pdp-banner:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .58), rgba(0, 0, 0, .34) 45%, rgba(0, 0, 0, .48))
}

.pdp-banner__copy {
    position: relative;
    z-index: 2
}

.pdp-banner__copy h1 {
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    letter-spacing: var(--ls-heading);
    text-transform: uppercase;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
    margin: 0
}

.pdp-banner__copy p {
    font: 400 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase;
    letter-spacing: var(--ls-caption);
    margin: 14px 0 0
}

/* --- 3. Overview ---------------------------------------------------------
   Copy, product and specification columns, as in the reference. */
.product-overview {
    display: grid;
    grid-template-columns: minmax(0, 31fr) minmax(0, 44fr) minmax(0, 20fr);
    gap: clamp(24px, 3vw, 56px);
    align-items: start;
    padding: clamp(56px, 6vw, 96px) 0 clamp(40px, 5vw, 80px)
}

.product-overview__copy p {
    font: 400 var(--font-body)/var(--lh-body) var(--sans);
    margin: 0 0 28px
}

/* One row of minmax(0,1fr) is what makes `height:100%` on the image resolve
   against the frame. With the default `place-items`, the row would size itself
   to the image's own height instead, and a tall cut-out would push straight
   through the frame it is meant to sit inside. */
.product-overview__stage {
    background: #fff;
    aspect-ratio: 4/3;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    padding: 0px;
}

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

.product-overview__meta {
    margin: 0;
    display: grid;
    gap: 22px
}

.product-overview__meta div {
    display: grid;
    gap: 4px;
    border-top: 1px solid rgba(19, 34, 65, .18);
    padding-top: 12px
}

.product-overview__meta dt {
    font: 400 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase;
    letter-spacing: var(--ls-caption);
    color: #676767
}

.product-overview__meta dd {
    margin: 0;
    font: 400 var(--font-body)/1.45 var(--sans);
    color: var(--ink)
}

/* --- 4. Product details mosaic ------------------------------------------ */
.product-details {
    padding: clamp(40px, 5vw, 80px) 0
}

/* Six columns on a fixed row height: two half-width frames on the first row,
   three equal frames on the second. Sizing by row rather than by aspect ratio
   keeps the tiles the same height whatever shape the cut-out inside them is. */
.product-mosaic {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: clamp(110px, 10.5vw, 175px);
    gap: clamp(12px, 1.4vw, 24px)
}

.product-mosaic__tile {
    position: relative;
    grid-column: span 2;
    grid-row: span 2;
    margin: 0;
    background: #fff;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    padding: clamp(14px, 1.6vw, 28px) clamp(14px, 1.6vw, 28px) clamp(38px, 3.4vw, 54px)
}

.product-mosaic__tile--half {
    grid-column: span 3
}

.product-mosaic__tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .9s cubic-bezier(.22, 1, .36, 1)
}

.product-mosaic__tile:hover img {
    transform: scale(1.03)
}

.product-mosaic__tile figcaption {
    position: absolute;
    left: clamp(14px, 1.6vw, 28px);
    bottom: clamp(12px, 1.4vw, 22px);
    font: 400 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase;
    letter-spacing: var(--ls-caption);
    color: #676767
}

/* --- 5. Tech specs accordion --------------------------------------------
   <details name> keeps one panel open at a time natively. Browsers without
   exclusive accordion support simply allow more than one open, which is a
   graceful fallback rather than a break. */
.product-specs {
    padding: clamp(40px, 5vw, 80px) 0
}

.product-specs__grid {
    display: grid;
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    gap: clamp(28px, 4vw, 72px);
    align-items: start
}

.product-specs__stage {
    background: #fff;
    aspect-ratio: 1/1;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    padding: clamp(16px, 2vw, 34px);
    position: sticky;
    top: 110px
}

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

.product-accordion>details {
    border-bottom: 1px solid rgba(19, 34, 65, .16)
}

.product-accordion summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(20px, 2.2vw, 30px) 0;
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    letter-spacing: var(--ls-heading);
    color: var(--ink)
}

.product-accordion summary::-webkit-details-marker {
    display: none
}

.product-accordion summary:after {
    content: "+";
    font: 400 var(--font-subheading)/1 var(--sans);
    color: var(--ink);
    transition: transform .3s ease
}

.product-accordion details[open] summary:after {
    content: "×"
}

.product-accordion summary:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px
}

.product-accordion__panel {
    padding: 0 0 clamp(24px, 3vw, 40px)
}

.product-accordion__panel>.social-lede {
    margin-top: 0
}

.product-feature-list {
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px
}

.product-feature-list li {
    position: relative;
    padding-left: 22px;
    font: 400 var(--font-body)/var(--lh-body) var(--sans)
}

.product-feature-list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .7em;
    width: 12px;
    height: 1px;
    background: var(--ink)
}

.product-spec-list {
    margin: 0;
    display: grid;
    gap: 12px
}

.product-spec-list div {
    display: grid;
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
    gap: 16px;
    border-top: 1px solid rgba(19, 34, 65, .14);
    padding-top: 12px
}

.product-spec-list dt {
    font: 400 var(--font-caption)/1.5 var(--sans);
    text-transform: uppercase;
    letter-spacing: var(--ls-caption);
    color: #676767
}

.product-spec-list dd {
    margin: 0;
    font: 400 var(--font-body)/1.5 var(--sans)
}

/* the dimension drawings arrive inside the Dimensions panel, so the measuring
   grid loses the standalone section's top spacing */
.product-accordion .measure-grid {
    margin-top: 0
}

/* The swatch grid was drawn for a full-width section: two big cells with the
   third spanning both. Inside an accordion panel it becomes a compact row. */
.product-accordion .swatch-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 520px;
    gap: 10px
}

.product-accordion .swatch-grid button {
    min-height: 0;
    aspect-ratio: 1;
    grid-column: auto;
    padding: 26px 10px 10px
}

.product-accordion .swatch-grid img {
    width: 100%;
    height: 100%;
    max-width: 110px;
    max-height: 110px
}

.product-accordion .swatch-grid small {
    right: auto;
    left: 10px;
    font-size: var(--font-tiny)
}

/* --- 6. Related products ------------------------------------------------- */
.product-related {
    padding: clamp(40px, 5vw, 80px) 0 clamp(60px, 7vw, 110px)
}

.product-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 34px)
}

.product-related__card {
    background: #fff;
    border: 1px solid #e0ded7;
    padding: clamp(22px, 2.4vw, 38px);
    display: flex;
    flex-direction: column;
    gap: 18px
}

.product-related__card h3 {
    margin: 0;
    text-align: center;
    font: 400 var(--font-subheading)/var(--lh-subheading) var(--serif);
    letter-spacing: var(--ls-heading)
}

.product-related__viewport {
    overflow: hidden;
    flex: 1
}

.product-related__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform .7s cubic-bezier(.22, 1, .36, 1)
}

.product-related__track>li {
    flex: 0 0 100%;
    min-width: 0
}

.product-related__track a {
    display: grid;
    justify-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--ink)
}

.product-related__track img {
    width: 100%;
    height: clamp(180px, 18vw, 280px);
    object-fit: contain;
    margin-bottom: 14px;
    transition: transform .9s cubic-bezier(.22, 1, .36, 1)
}

.product-related__track a:hover img {
    transform: scale(1.04)
}

.product-related__track b {
    font: 400 var(--font-body)/1.4 var(--sans);
    font-weight: 500
}

.product-related__track span {
    font: 400 var(--font-caption)/1.4 var(--sans);
    color: #676767
}

.product-related__nav {
    display: flex;
    justify-content: center;
    gap: 26px
}

.product-related__nav button {
    background: none;
    border: 0;
    padding: 6px 10px;
    font-size: 20px;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
    transition: opacity .3s ease, transform .3s ease
}

.product-related__nav button:hover:not(:disabled) {
    transform: translateX(var(--nudge, 0))
}

.product-related__nav button[data-prev]:hover:not(:disabled) {
    --nudge: -3px
}

.product-related__nav button[data-next]:hover:not(:disabled) {
    --nudge: 3px
}

.product-related__nav button:disabled {
    opacity: .3;
    cursor: default
}

.product-related__nav button:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px
}

/* --- 7. Page-level adjustments ------------------------------------------ */
/* the product nav is fixed, so anchored sections need to clear it */
.product-page section[id] {
    scroll-margin-top: 96px
}

/* the gallery keeps its own carousel, only its heading indent is dropped so
   it lines up with the other section heads on the rebuilt page */
.product-page .gallery-heading {
    padding-left: 0;
    margin-bottom: clamp(28px, 3.4vw, 54px)
}

.product-page .social-gallery {
    padding-top: clamp(40px, 5vw, 80px)
}

/* The track carries a 128px inset so the old overlapping "front" slide could
   hang above the row. This gallery has no such slide, so the inset would just
   be a gap under the heading. */
.product-page .social-gallery .social-gallery__track {
    padding-top: 0
}

/* the copy column is narrow here, so the two calls to action stack rather than
   squeezing the link onto a second line beside the button */
.product-overview .social-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px
}

@media (max-width:1100px) {
    .product-overview {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        row-gap: clamp(26px, 4vw, 44px)
    }

    .product-overview__stage {
        grid-row: 1;
        grid-column: 2
    }

    .product-overview__meta {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px
    }
}

@media (max-width:900px) {

    /* No handover on a phone. The product bar would have to drop the section
       links for want of room, and hiding the site header to show a bar with
       only a logo and a button would cost the main menu for nothing. */
    .product-nav {
        display: none
    }

    body.is-product-nav .site-header {
        transform: none;
        opacity: 1;
        pointer-events: auto
    }

    .product-overview {
        grid-template-columns: minmax(0, 1fr)
    }

    .product-overview__stage {
        grid-row: auto;
        grid-column: auto
    }

    .product-overview__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .product-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .product-mosaic__tile,
    .product-mosaic__tile--half {
        grid-column: span 1
    }

    .product-mosaic__tile--half:first-child {
        grid-column: span 2
    }

    .product-specs__grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .product-specs__stage {
        position: static;
        aspect-ratio: 4/3
    }

    .product-related__grid {
        grid-template-columns: minmax(0, 1fr)
    }
}

@media (max-width:600px) {

    .product-overview__meta {
        grid-template-columns: minmax(0, 1fr)
    }

    .product-mosaic {
        grid-template-columns: minmax(0, 1fr)
    }

    .product-mosaic__tile--half:first-child {
        grid-column: span 1
    }
}

/* ==========================================================================
   Product enquiry — redesigned Sept 2026 to sit on one screen
   --------------------------------------------------------------------------
   The stacked version ran a centred intro over a full-width card of three-up
   rows, which pushed the submit button well past the fold. The intro now sits
   beside the form as a column of its own and the fields run two to a row, so
   the whole section lands inside a single viewport on a laptop. The section
   headings are gone from view — the field labels already name everything, and
   the legends stay in the markup for screen readers.

   Type is unchanged: the same --serif / --sans tokens and the same scale.
   ========================================================================== */
.product-enquiry {
    padding: clamp(34px, 4vw, 64px) 0 clamp(40px, 5vw, 80px)
}

.product-enquiry__grid {
    display: grid;
    grid-template-columns: minmax(0, 32fr) minmax(0, 68fr);
    gap: clamp(28px, 4vw, 70px);
    align-items: start
}

.product-enquiry__eyebrow {
    font: 400 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase;
    letter-spacing: var(--ls-caption);
    color: #909090;
    margin: 0 0 12px
}

.social-enquiry.product-enquiry h2 {
    max-width: none;
    margin: 0;
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    letter-spacing: var(--ls-heading);
    text-transform: uppercase
}

.product-enquiry__lede {
    font: 400 var(--font-body)/var(--lh-body) var(--sans);
    color: #676767;
    text-transform: none;
    margin: 16px 0 0
}

.product-enquiry .social-enquiry__contact {
    display: block;
    margin-top: clamp(22px, 2.6vw, 36px)
}

.product-enquiry .social-enquiry__contact a {
    font-weight: 400;
    font-size: var(--font-body)
}

/* `.form-section legend` sets width:100%, which outranks .sr-only and leaves an
   absolutely positioned full-width box hanging off the right of the page. */
.product-enquiry .form-section legend.sr-only {
    width: 1px;
    padding: 0;
    margin: -1px;
    border: 0
}

/* `.social-enquiry .enquiry-form` carries a 60px top padding and a 64px gap
   from the full-width layout; both have to be undone here or the card alone is
   most of a screen. */
.social-enquiry.product-enquiry .enquiry-form {
    background: #fff;
    border: 1px solid #e0ded7;
    padding: clamp(22px, 2.6vw, 38px);
    gap: clamp(18px, 2vw, 26px)
}

/* two to a row; the brief takes the full width underneath */
.social-enquiry.product-enquiry .form-grid,
.social-enquiry.product-enquiry .form-grid--basic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(16px, 1.8vw, 26px);
    row-gap: clamp(14px, 1.5vw, 20px)
}

/* `.social-enquiry .form-grid--basic .field:last-child` resets grid-column to
   auto, so the brief needs the heavier selector to claim the full row. */
.social-enquiry.product-enquiry .form-grid .field--message {
    grid-column: 1 / -1
}

.product-enquiry .field {
    gap: 7px
}

.product-enquiry .field label {
    font: 400 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase;
    letter-spacing: var(--ls-caption);
    color: #676767
}

.social-enquiry.product-enquiry .field input,
.social-enquiry.product-enquiry .field select,
.social-enquiry.product-enquiry .field textarea {
    height: 44px;
    padding: 10px 14px;
    border: 1px solid #e0ded7;
    border-radius: 4px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: none;
    transition: border-color .25s ease, background .25s ease
}

.social-enquiry.product-enquiry .field select {
    padding-right: 38px
}

.social-enquiry.product-enquiry .field input:hover,
.social-enquiry.product-enquiry .field select:hover,
.social-enquiry.product-enquiry .field textarea:hover {
    border-color: #c9c5bb
}

.social-enquiry.product-enquiry .field input:focus,
.social-enquiry.product-enquiry .field select:focus,
.social-enquiry.product-enquiry .field textarea:focus {
    outline: none;
    border-color: var(--ink);
    background: #fff
}

.social-enquiry.product-enquiry .field textarea {
    height: auto !important;
    min-height: 88px !important;
    padding: 12px 14px
}

.product-enquiry .phone-input>span {
    height: 44px;
    color: #676767
}

.product-enquiry .phone-input input {
    padding-left: 56px !important
}

.product-enquiry .form-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 24px
}

.social-enquiry.product-enquiry .form-foot .btn {
    padding: 13px 24px;
    font-size: var(--font-caption);
    font-weight: 400;
    white-space: nowrap
}

.social-enquiry.product-enquiry .form-message {
    flex: 1;
    min-width: 200px;
    margin: 0
}

@media (max-width:1100px) {
    .product-enquiry__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(22px, 3vw, 34px)
    }

    .product-enquiry .social-enquiry__contact {
        margin-top: 18px
    }
}

@media (max-width:600px) {

    .social-enquiry.product-enquiry .form-grid,
    .social-enquiry.product-enquiry .form-grid--basic {
        grid-template-columns: minmax(0, 1fr)
    }
}


/* --- Product page: the site header overlays the banner ---------------------
   `body[data-page="cove-social"] .site-header` paints the bar white for the
   old banner-less layout. The page now opens on a full-bleed photograph, so
   the overlay state has to outrank it — same treatment the home hero uses. */
body[data-page="cove-social"] .site-header.overlay {
    background: linear-gradient(180deg, rgba(8, 8, 8, .72), rgba(8, 8, 8, .24) 72%, transparent);
    color: #fff
}

body[data-page="cove-social"] .site-header.overlay .logo {
    filter: brightness(0) invert(1)
}

/* Where the product nav takes over, the header never needs its opaque state —
   the stuck wash would only flash during the handover. Below 901px there is no
   handover, so the header keeps the normal white-on-scroll treatment or its
   white logo would sit on white content. */
@media (min-width:901px) {
    body[data-page="cove-social"] .site-header.overlay.is-stuck {
        background: linear-gradient(180deg, rgba(8, 8, 8, .72), rgba(8, 8, 8, .24) 72%, transparent);
        background-image: linear-gradient(180deg, rgba(8, 8, 8, .72), rgba(8, 8, 8, .24) 72%, transparent);
        color: #fff
    }

    body[data-page="cove-social"] .site-header.overlay.is-stuck .logo {
        filter: brightness(0) invert(1)
    }
}

/* ==========================================================================
   Category rail — home, directly under the banner
   --------------------------------------------------------------------------
   A statement line with the arrows on its right, and a row of category cards
   beneath it that scrolls sideways. The cards are a real scroll container with
   snap points rather than a transformed track: a trackpad swipe, a drag and a
   keyboard all work on their own, and the arrows only nudge scrollLeft, so
   nothing breaks if the script never runs.
   ========================================================================== */
.range-rail {
    padding: clamp(50px, 6vw, 92px) 0 clamp(40px, 5vw, 76px);
    /* it carries #our-products, so an anchor jump has to clear the fixed header */
    scroll-margin-top: 96px
}

.range-rail__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 60px);
    margin-bottom: clamp(26px, 3.4vw, 50px)
}

/* The reference sets this in a geometric sans; here it stays on the site's own
   serif and type scale — the borrowed idea is the layout and the sideways
   scroll, not the typeface. */
.range-rail__head h2 {
    margin: 0;
    max-width: 26ch;
    font: 400 var(--font-heading)/1.2 var(--serif);
    letter-spacing: var(--ls-heading);
    color: var(--ink)
}

.range-rail__head h2 strong {
    font-weight: 600
}

.range-rail__nav {
    display: flex;
    gap: 12px;
    flex: 0 0 auto
}

/* With four categories and four visible, there is nothing to scroll to, so the
   arrows would sit there permanently greyed. The script marks the rail when its
   track overflows; until then the arrows stay out of the way. */
.range-rail:not(.has-overflow) .range-rail__nav {
    display: none
}

.range-rail__arrow {
    width: clamp(46px, 4vw, 58px);
    height: clamp(46px, 4vw, 58px);
    border: 1px solid rgba(19, 34, 65, .25);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease, color .3s ease, opacity .3s ease
}

.range-rail__arrow svg {
    width: 20px;
    height: 20px
}

.range-rail__arrow:hover:not(:disabled) {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff
}

.range-rail__arrow:disabled {
    opacity: .3;
    cursor: default
}

.range-rail__arrow:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px
}

.range-rail__track {
    display: flex;
    gap: clamp(14px, 1.6vw, 26px);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* the rail runs to the page edge on a phone without breaking the measure */
    scroll-padding-inline: 0
}

.range-rail__track::-webkit-scrollbar {
    display: none
}

.range-rail__track:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 6px
}

.range-card {
    flex: 0 0 calc((100% - 3 * clamp(14px, 1.6vw, 26px)) / 4);
    scroll-snap-align: start
}

.range-card a {
    position: relative;
    display: block;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: #ece9e2;
    text-decoration: none;
    color: #fff
}

.range-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.22, 1, .36, 1)
}

.range-card a:hover img,
.range-card a:focus-visible img {
    transform: scale(1.04)
}

/* the wash is on the link, not the image, so it does not scale with the hover */
.range-card a:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .55) 100%)
}

.range-card__copy {
    position: absolute;
    z-index: 2;
    left: clamp(16px, 1.6vw, 26px);
    right: clamp(16px, 1.6vw, 26px);
    bottom: clamp(16px, 1.6vw, 26px);
    display: grid;
    gap: 10px;
    justify-items: start
}

.range-card__copy b {
    font: 400 var(--font-subheading)/1.15 var(--serif);
    letter-spacing: var(--ls-heading);
    text-transform: uppercase;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35)
}

.range-card__copy i {
    font: 400 var(--font-caption)/1.4 var(--sans);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: var(--ls-caption);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px
}

/* Hover reveal. The reference slips a product count in above the link; we have
   no counts, so the line says what the category actually holds. The 0fr -> 1fr
   row collapse keeps it out of the flow until it is wanted, and because the
   block is anchored to the bottom of the card the title lifts to make room
   rather than the link dropping off the image. */
.range-card__copy em {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    font: 400 var(--font-caption)/1.5 var(--sans);
    font-style: normal;
    color: rgba(255, 255, 255, .85);
    transition: grid-template-rows .45s cubic-bezier(.22, 1, .36, 1), opacity .35s ease
}

.range-card__copy em>span {
    overflow: clip;
    min-height: 0
}

.range-card a:hover .range-card__copy em,
.range-card a:focus-visible .range-card__copy em {
    grid-template-rows: 1fr;
    opacity: 1
}

/* the wash deepens with it, so the extra line stays readable on a light photo */
.range-card a:after {
    transition: background .45s ease
}

.range-card a:hover:after,
.range-card a:focus-visible:after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .05) 22%, rgba(0, 0, 0, .68) 100%)
}

.range-card__copy {
    transition: gap .45s cubic-bezier(.22, 1, .36, 1)
}

.range-card a:hover .range-card__copy,
.range-card a:focus-visible .range-card__copy {
    gap: 8px
}

.range-card a:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px
}

@media (max-width:1100px) {
    .range-card {
        flex-basis: calc((100% - 2 * clamp(14px, 1.6vw, 26px)) / 3)
    }
}

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

    .range-rail__head h2 {
        max-width: none
    }

    .range-card {
        flex-basis: calc((100% - clamp(14px, 1.6vw, 26px)) / 2)
    }
}

@media (max-width:600px) {

    /* a sliver of the next card is the affordance on a phone, where the arrows
       are a poor target and the swipe is the natural gesture */
    .range-card {
        flex-basis: 78%
    }

    .range-rail__nav {
        display: none
    }
}

@media (prefers-reduced-motion:reduce) {
    .range-rail__track {
        scroll-behavior: auto
    }

    .range-card img {
        transition: none
    }
}

/* --- Statement lines: resting strength (supplied) ------------------------- */
p.statement-line.is-active span.statement-body {
    color: #ffffff;
}

p.statement-line  span.statement-body {
    opacity: 0.5;
}

/* ==========================================================================
   Product page — Sept 2026 round: white ground, centred section titles,
   and an overview built on a symmetrical three-column row
   ========================================================================== */

/* --- 1. The content sits on white, not the paper ground ------------------ */
.social-page.product-page {
    background: #fff
}

/* The site header owns the top of the page and sits in the flow, so the first
   section makes no extra room for it — the product bar only arrives once the
   header has scrolled away. */
.product-page>section:first-of-type {
    padding-top: clamp(34px, 4vw, 64px)
}

/* The product photography is shot on white, so tinting these frames put a hard
   white rectangle inside every one of them. They stay white and are drawn with
   a hairline instead, which is what separates them from the page now. */
.product-page .product-overview__stage,
.product-page .product-mosaic__tile,
.product-page .product-specs__stage,
.product-page .gallery-slide {
    background: #fff;
    border: 1px solid #ece9e2
}

/* the overview's product is the page's opening image — it reads better free of
   a frame on a white ground */
.product-page .product-overview__stage {
    border: 0
}

.product-page .product-related__card {
    background: #fff;
    border-color: #ece9e2
}

/* On a white page the enquiry card can no longer be white on paper, so the
   card and its fields swap tones: paper card, white fields. (The section is not
   on this page at the moment, but the rules travel with it.) */
.social-enquiry.product-enquiry .enquiry-form {
    background: var(--paper);
    border-color: #ece9e2
}

.social-enquiry.product-enquiry .field input,
.social-enquiry.product-enquiry .field select,
.social-enquiry.product-enquiry .field textarea,
.social-enquiry.product-enquiry .field input:focus,
.social-enquiry.product-enquiry .field select:focus,
.social-enquiry.product-enquiry .field textarea:focus {
    background: #fff
}

/* --- 2. Section titles: the centred label and hairline from the About page
   The rule is an <h2> here rather than a <div>, so the sections keep a real
   heading; everything visual comes from the shared `.about-rule` rules. */
.product-page .about-rule {
    margin: 0 0 clamp(28px, 3.4vw, 48px)
}

.product-page .about-rule span {
    font-weight: 600
}

/* the gallery's supporting line follows the centred title */
.product-page .gallery-heading {
    text-align: center
}

.product-page .gallery-heading .social-lede {
    margin: 0 auto;
    max-width: 52ch
}

.product-page .social-gallery__viewport {
    text-align: left
}

/* --- 3. Overview: title on top, equal columns either side of a larger
   product image. The side columns share one track size so the image is
   centred on the measure rather than just sitting in the middle cell. */
.product-overview__head {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 0
}

.product-overview__head h2 {
    margin: 0;
    font: 400 var(--font-heading)/var(--lh-heading) var(--serif);
    letter-spacing: var(--ls-heading);
    text-transform: uppercase;
    color: var(--ink)
}

.product-overview__head p {
    margin: 10px 0 0;
    font: 400 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase;
    letter-spacing: var(--ls-caption);
    color: #676767
}

.product-overview {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr);
    align-items: start
}

.product-overview__stage {
    aspect-ratio: 1/1
}

@media (max-width:1100px) {
    .product-overview {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
    }

    .product-overview__head {
        margin-bottom: clamp(18px, 2.4vw, 32px)
    }

    .product-overview__stage {
        aspect-ratio: 4/3
    }
}

@media (max-width:900px) {
    .product-overview {
        grid-template-columns: minmax(0, 1fr)
    }
}

/* ==========================================================================
   Scrolled header — a solid bar again
   --------------------------------------------------------------------------
   The stuck state used a white-to-clear wash so it would have no visible edge.
   It also meant the bottom half of the bar was transparent, and any text
   passing under it showed through behind the navigation. A flat bar with a
   hairline keeps the soft look without the ghosting.
   ========================================================================== */
body[data-page] .site-header.is-stuck,
body[data-page] .site-header.overlay.is-stuck {
    background-color: #fff;
    background-image: none;
    box-shadow: 0 1px 0 rgba(19, 34, 65, .1);
    padding-bottom: 0
}

body[data-page] .site-header.overlay.is-stuck {
    color: var(--ink)
}

body[data-page] .site-header.overlay.is-stuck .logo {
    filter: none
}

/* the product page still hands over to its own bar, so its header stays clear
   through the whole handover rather than flashing solid on the way out */
@media (min-width:901px) {

    body[data-page="cove-social"] .site-header.overlay.is-stuck {
        background-color: transparent;
        background-image: linear-gradient(180deg, rgba(8, 8, 8, .72), rgba(8, 8, 8, .24) 72%, transparent);
        box-shadow: none;
        color: #fff
    }

    body[data-page="cove-social"] .site-header.overlay.is-stuck .logo {
        filter: brightness(0) invert(1)
    }
}

/* ==========================================================================
   Product page — Sept 2026, second pass
   Overview title left, even gallery with the controls beneath it, a tighter
   specifications list, and related products as a card grid.
   ========================================================================== */

/* --- Overview ------------------------------------------------------------ */
.product-overview__head {
    text-align: left
}

/* The stage was square while the product sits wide in its frame, which left a
   band of empty white above and below it. The frame follows the photograph. */
.product-page .product-overview__stage {
    aspect-ratio: 4/3;
    padding: 0;
    align-self: start
}

.product-page .product-overview__stage img {
    object-fit: contain
}

/* --- Gallery ------------------------------------------------------------- */
/* Three even frames across the measure, whatever shape the photograph is —
   the slides used to be sized individually and stepped up and down the row. */
@media (min-width:901px) {

    .product-page .social-gallery .gallery-slide {
        flex: 0 0 calc((100% - 2 * clamp(16px, 1.8vw, 28px)) / 3);
        width: auto;
        height: auto;
        aspect-ratio: 4/3;
        margin: 0
    }
}

.product-page .social-gallery .social-gallery__track {
    gap: clamp(16px, 1.8vw, 28px);
    align-items: stretch;
    padding-top: 0
}

.product-page .gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

/* the controls are a row under the gallery rather than arrows floating over it */
.gallery-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2vw, 30px);
    margin-top: clamp(22px, 2.6vw, 38px)
}

.product-page .gallery-arrow {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    width: clamp(44px, 3.6vw, 54px);
    height: clamp(44px, 3.6vw, 54px);
    border: 1px solid rgba(19, 34, 65, .25);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 0;
    transition: background .3s ease, border-color .3s ease, color .3s ease, opacity .3s ease
}

.product-page .gallery-arrow svg {
    width: 19px;
    height: 19px
}

.product-page .gallery-arrow:hover:not(:disabled) {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff
}

.product-page .gallery-arrow:disabled {
    opacity: .3
}

.product-page .gallery-progress {
    display: flex;
    gap: 8px;
    margin: 0
}

.product-page .gallery-progress button {
    width: 26px;
    height: 2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(19, 34, 65, .2);
    cursor: pointer;
    transition: background .3s ease
}

.product-page .gallery-progress button.active {
    background: var(--ink)
}

/* --- Specifications ------------------------------------------------------ */
/* Smaller headings, less air, and no panel open until one is asked for. */
.product-page .product-accordion summary {
    padding: clamp(14px, 1.5vw, 19px) 0;
    font: 400 var(--font-body)/1.4 var(--serif);
    font-size: clamp(19px, 1.6vw, 23px);
    letter-spacing: var(--ls-heading)
}

.product-page .product-accordion summary:after {
    font-size: 20px
}

.product-page .product-accordion__panel {
    padding: 0 0 clamp(18px, 2vw, 28px)
}

.product-page .product-specs {
    padding: clamp(28px, 3.4vw, 56px) 0
}

.product-page .product-specs__grid {
    gap: clamp(24px, 3vw, 52px);
    align-items: start
}

.product-page .product-specs__stage {
    aspect-ratio: 4/3;
    padding: 0
}

.product-page .product-accordion .swatch-grid {
    gap: 8px;
    max-width: 440px
}

.product-page .product-accordion .swatch-grid button {
    padding: 22px 8px 8px
}

.product-page .product-feature-list {
    gap: 9px;
    margin-bottom: 20px
}

/* --- Related products ---------------------------------------------------- */
.product-page .product-related__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 28px)
}

.related-card {
    display: grid;
    gap: 10px;
    align-content: start;
    text-decoration: none;
    color: var(--ink)
}

.related-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid #ece9e2
}

.related-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: clamp(14px, 1.6vw, 26px);
    transition: transform .8s cubic-bezier(.22, 1, .36, 1)
}

.related-card:hover .related-card__media img,
.related-card:focus-visible .related-card__media img {
    transform: scale(1.05)
}

.related-card__tag {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(19, 34, 65, .1);
    font: 400 var(--font-tiny)/1.2 var(--sans);
    text-transform: uppercase;
    letter-spacing: var(--ls-caption);
    color: var(--ink)
}

.related-card b {
    font: 400 var(--font-body)/1.35 var(--sans);
    font-weight: 500;
    margin-top: 4px
}

.related-card>span:not(.related-card__media):not(.related-card__tag) {
    font: 400 var(--font-caption)/1.55 var(--sans);
    color: #676767
}

.related-card:hover b,
.related-card:focus-visible b {
    text-decoration: underline;
    text-underline-offset: 3px
}

.related-card:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px
}

@media (max-width:900px) {
    .product-page .product-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .gallery-controls {
        margin-top: 20px
    }
}

@media (max-width:600px) {
    .product-page .product-related__grid {
        grid-template-columns: minmax(0, 1fr)
    }
}

/* --- Product page rhythm: one spacing step between every section ---------- */
.product-page .product-details,
.product-page .social-gallery,
.product-page .product-specs,
.product-page .product-related {
    padding-top: clamp(30px, 3.4vw, 56px);
    padding-bottom: clamp(30px, 3.4vw, 56px)
}

.product-page .product-related {
    padding-bottom: clamp(44px, 5vw, 78px)
}

/* the accordion column is shorter than the image beside it, so the section was
   ending on a band of empty space */
.product-page .product-specs__grid {
    align-items: start
}

.product-page .product-accordion>details:last-child {
    border-bottom: 0
}

/* the gallery frames stay the same shape and size at every width, not just on
   a desktop — they were inheriting three different sizings below 901px */
@media (max-width:900px) {

    .product-page .social-gallery .gallery-slide {
        flex: 0 0 calc((100% - clamp(16px, 1.8vw, 28px)) / 2);
        width: auto;
        height: auto;
        aspect-ratio: 4/3;
        margin: 0;
        align-self: stretch;
        scroll-snap-align: start;
        /* below 901px the gallery dimmed and shrank every slide but the active
           one — that is what made the frames different sizes here */
        opacity: 1;
        transform: none
    }
}

@media (max-width:600px) {
    .product-page .social-gallery .gallery-slide {
        flex-basis: 82%
    }
}

/* ==========================================================================
   Product page — Sept 2026, third pass
   ========================================================================== */

/* --- The product title belongs to the information column ------------------ */
.product-overview__head {
    grid-column: auto;
    text-align: left;
    margin: 0 0 clamp(18px, 2vw, 28px)
}

.product-overview__head p {
    margin-top: 8px
}

/* --- Related cards: image and title only, with a scene on hover ----------- */
.related-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity .5s ease, transform .8s cubic-bezier(.22, 1, .36, 1)
}

/* the cut-out sits inside the frame; the room shot fills it */
.related-card__cutout {
    object-fit: contain;
    padding: clamp(14px, 1.6vw, 26px)
}

.related-card__scene {
    object-fit: cover;
    opacity: 0
}

.related-card:hover .related-card__scene,
.related-card:focus-visible .related-card__scene {
    opacity: 1;
    transform: scale(1.03)
}

.related-card:hover .related-card__cutout,
.related-card:focus-visible .related-card__cutout {
    opacity: 0
}

.related-card b {
    margin-top: 2px
}

/* --- Fabric swatches: a small row, not three large panels ----------------- */
.product-page .product-accordion .swatch-grid {
    grid-template-columns: repeat(3, minmax(0, 104px));
    max-width: none;
    gap: 12px
}

.product-page .product-accordion .swatch-grid button {
    aspect-ratio: 1;
    min-height: 0;
    padding: 0
}

.product-page .product-accordion .swatch-grid img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover
}

/* the "click the swatch" hint belonged to the full-width panel */
.product-page .product-accordion .swatch-grid small {
    display: none
}

/* ==========================================================================
   Product images: fill the frame
   --------------------------------------------------------------------------
   The tiles held their photographs at `contain` inside padding, which left a
   wide white margin around every one of them. The frames are the same 4:3 as
   the product shots, so `cover` fills them edge to edge without cropping.
   ========================================================================== */
.product-page .product-mosaic__tile {
    padding: 0
}

.product-page .product-mosaic__tile img,
.product-page .product-overview__stage img,
.product-page .product-specs__stage img {
    object-fit: cover
}

.product-page .product-mosaic__tile figcaption {
    left: clamp(12px, 1.4vw, 20px);
    bottom: clamp(10px, 1.2vw, 16px);
    padding: 4px 10px;
    background: rgba(255, 255, 255, .88);
    color: var(--ink)
}

/* ==========================================================================
   Enquiry popup
   ========================================================================== */
.enquire-modal {
    width: min(620px, calc(100vw - 32px));
    max-height: min(90svh, 760px);
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    overflow: visible
}

.enquire-modal::backdrop {
    background: rgba(19, 34, 65, .55);
    backdrop-filter: blur(2px)
}

.enquire-modal__panel {
    position: relative;
    display: grid;
    gap: clamp(16px, 2vw, 22px);
    padding: clamp(26px, 3.2vw, 44px);
    max-height: inherit;
    overflow-y: auto
}

.enquire-modal__close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background .25s ease
}

.enquire-modal__close:hover {
    background: rgba(19, 34, 65, .07)
}

.enquire-modal__title {
    margin: 0;
    font: 400 var(--font-subheading)/1.15 var(--serif);
    letter-spacing: var(--ls-heading);
    text-transform: uppercase
}

.enquire-modal__lede {
    margin: -8px 0 0;
    font: 400 var(--font-body)/var(--lh-body) var(--sans);
    color: #676767
}

.enquire-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 18px)
}

.enquire-modal .field {
    display: grid;
    gap: 7px
}

.enquire-modal .field--message {
    grid-column: 1 / -1
}

.enquire-modal .field label {
    font: 400 var(--font-caption)/1.4 var(--sans);
    text-transform: uppercase;
    letter-spacing: var(--ls-caption);
    color: #676767
}

.enquire-modal .field label em {
    color: #d95117;
    font-style: normal
}

.enquire-modal input,
.enquire-modal textarea {
    width: 100%;
    height: 44px;
    padding: 10px 14px;
    border: 1px solid #e0ded7;
    border-radius: 4px;
    background: var(--paper);
    color: var(--ink);
    font: 400 var(--font-body)/1.4 var(--sans);
    transition: border-color .25s ease, background .25s ease
}

.enquire-modal textarea {
    height: auto;
    min-height: 86px;
    resize: vertical
}

.enquire-modal input:focus,
.enquire-modal textarea:focus {
    outline: none;
    border-color: var(--ink);
    background: #fff
}

.enquire-modal .phone-input {
    position: relative
}

.enquire-modal .phone-input>span {
    position: absolute;
    left: 14px;
    top: 0;
    height: 44px;
    display: flex;
    align-items: center;
    color: #676767;
    font: 400 var(--font-body)/1.4 var(--sans)
}

.enquire-modal .phone-input input {
    padding-left: 54px
}

.enquire-modal__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px
}

.enquire-modal__foot .btn {
    padding: 13px 24px;
    font-size: var(--font-caption);
    white-space: nowrap
}

.enquire-modal__note {
    flex: 1;
    min-width: 180px;
    margin: 0;
    font: 400 var(--font-caption)/1.45 var(--sans);
    color: #676767
}

@media (max-width:600px) {
    .enquire-modal__grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .enquire-modal__foot .btn {
        width: 100%;
        text-align: center;
        justify-content: center
    }
}


/* ==========================================================================
   Product page on a phone
   --------------------------------------------------------------------------
   One card per row turned four product shots into a very long scroll of very
   similar pictures. Two per row reads as a set and keeps the sections short.
   ========================================================================== */
@media (max-width:600px) {

    .product-page .product-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .product-page .product-mosaic__tile,
    .product-page .product-mosaic__tile--half,
    .product-page .product-mosaic__tile--half:first-child {
        grid-column: span 1
    }

    .product-page .product-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px
    }

    .related-card b {
        font-size: var(--font-caption)
    }

    .related-card__tag {
        top: 8px;
        left: 8px;
        padding: 4px 9px
    }

    /* the accordion's +/x marker sat under the floating WhatsApp button */
    .product-page .product-accordion summary {
        padding-right: 4px
    }
}

/* ==========================================================================
   About — team members on a phone
   --------------------------------------------------------------------------
   The alternating layout right-aligns the second person's name, role and copy,
   which reads as a mirror of the first while the two sit side by side. Below
   901px the columns stack, so every block starts at the same left edge and the
   right-aligned one just looks out of place — and ragged-left body copy is
   harder to read. Same specificity as the rule it undoes, placed after it.
   ========================================================================== */
@media (max-width:900px) {

    article.about-person.about-person--reverse.reveal h3,
    article.about-person.about-person--reverse.reveal p {
        text-align: left
    }

    /* the name and the role sat 6px apart here against 41px on a desktop —
       the gap came from the heading's own line box, which shrinks with the
       type, so it needs stating once the block is stacked */
    .about-person__role {
        margin-top: 16px
    }
}

/* ==========================================================================
   Collection pages on a phone — a two-up grid, not a slider
   --------------------------------------------------------------------------
   The Cove grid turned into a horizontal snap scroller below 601px, so only
   one product was visible at a time and the rest were off-screen with no
   affordance beyond the swipe. Two to a row shows the whole range at a glance
   and matches the related-products grid on the product page.
   ========================================================================== */
@media (max-width:600px) {

    .cove-products {
        padding: 34px 20px 12px;
        overflow: visible
    }

    .cove-product-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        overflow: visible;
        padding: 0
    }

    /* The card pins its title, eyebrow and image to fixed offsets, which only
       holds while it is nearly full width. At half that, a two-line title runs
       straight into the eyebrow below it. Everything goes back into normal flow
       here, so each card sizes itself whatever its text does. */
    .cove-card {
        flex: none;
        display: flex;
        flex-direction: column;
        height: 300px;
        padding: 16px 16px 14px;
        border-radius: 12px 70px 12px 12px
    }

    .cove-card h3 {
        position: static;
        order: 1;
        inset: auto;
        margin: 0 0 6px;
        font-size: var(--font-body);
        line-height: 1.25
    }

    .cove-card .eyebrow {
        position: static;
        order: 2;
        max-width: none;
        font-size: var(--font-tiny);
        line-height: 1.35
    }

    .cove-card-media {
        position: relative;
        order: 3;
        inset: auto;
        height: auto;
        flex: 1;
        min-height: 0;
        margin-top: 8px
    }

    /* the roll-over "view product" chip has no hover to trigger it here */
    .cove-card>span {
        display: none
    }

    /* the same on the soft-seating page, which stacked to a single column */
    .seating-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 300px;
        gap: 14px
    }
}

/* ==========================================================================
   Product page on a phone: the product leads
   --------------------------------------------------------------------------
   Stacked, the copy came first and pushed the product below the fold. On a
   phone the photograph is the page's opening statement, so it goes first and
   the writing follows it.
   ========================================================================== */
@media (max-width:900px) {
    .product-page .product-overview__stage {
        order: -1;
        margin-bottom: clamp(6px, 2vw, 14px)
    }
}

/* ==========================================================================
   About — team copy rhythm
   --------------------------------------------------------------------------
   The bios run on the browser's default paragraph margins (1em top and bottom),
   and the markup carries a few unbalanced <p> tags, so the browser closes them
   into empty paragraphs that each add another gap. One bottom-only margin gives
   an even rhythm and stops those strays from opening the copy up further.
   ========================================================================== */
/* the role sits in the identity block and keeps its own spacing */
.about-person>div p:not(.about-person__role) {
    margin-top: 0;
    margin-bottom: clamp(12px, 1.4vw, 18px)
}

.about-person>div p:last-child {
    margin-bottom: 0
}

.about-person__copy {
    margin-bottom: clamp(18px, 2vw, 26px) !important
}

/* the enquiry buttons open a dialog rather than going anywhere, so the arrow
   that marks a link on every other CTA does not belong on them */
.product-nav__cta.btn:after,
.enquire-modal__foot .btn:after {
    content: none
}

/* ==========================================================================
   Mobile menu — one rhythm, and a Collections list that opens
   --------------------------------------------------------------------------
   Two things were wrong on a phone. The rows inherited the desktop button's
   23px padding, so five links spread over most of the screen with the panel's
   own 25px of padding on top of that; and the Collections list, being fixed
   inside a transformed header, had no height to open into. The list now sits
   inside the panel (see initMobileMenu) and reads as an accordion, and every
   row — link or button — shares one 14px rhythm inside a 20px gutter that
   lines up with the logo above it.
   ========================================================================== */
@media (max-width:900px) {

    .nav-links {
        inset: 82px 0 auto;
        max-height: calc(100vh - 82px);
        max-height: calc(100dvh - 82px);
        padding: 2px 20px calc(18px + env(safe-area-inset-bottom, 0px));
        gap: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: 0 16px 28px rgba(19, 34, 65, .10)
    }

    /* the Collections button is a <button> and the rest are <a>: one rule so
       they cannot drift apart again */
    .nav-links>a,
    .nav-links .nav-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        margin: 0;
        padding: 14px 0;
        border-bottom: 1px solid rgba(19, 34, 65, .12);
        line-height: 1.2;
        text-align: left
    }

    .nav-links>a:last-child {
        border-bottom: 0
    }

    .nav-links .nav-trigger span {
        opacity: .55;
        transition: transform .3s, opacity .3s
    }

    .nav-links .nav-trigger[aria-expanded="true"] span {
        opacity: 1;
        transform: rotate(180deg)
    }

    /* --- the mega-menu, folded into the panel --- */
    .nav-links .mega-menu {
        position: static;
        inset: auto;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: hidden;
        transition: max-height .45s cubic-bezier(.22, 1, .36, 1), visibility .45s
    }

    .nav-links .mega-menu.open {
        max-height: 1400px;
        visibility: visible
    }

    .nav-links .mega-grid {
        display: block;
        width: auto;
        min-height: 0;
        margin: 0;
        padding: 4px 0 10px;
        gap: 0
    }

    .nav-links .mega-grid section {
        display: block;
        padding: 8px 0 2px
    }

    .nav-links .mega-grid h2,
    .nav-links .mega-grid h2 a {
        display: block;
        width: auto;
        margin: 0 0 2px;
        padding: 0;
        border: 0;
        font-size: var(--font-tiny);
        letter-spacing: .14em;
        text-transform: uppercase;
        opacity: .5
    }

    .nav-links .mega-grid section>a {
        display: flex;
        width: auto;
        margin: 0;
        padding: 9px 0 9px 12px;
        border: 0;
        font-size: var(--font-caption);
        letter-spacing: .02em;
        text-transform: none
    }

    .nav-links .mega-grid section>a:after {
        width: 13px;
        height: 9px;
        opacity: .3
    }

    /* the tap highlight belongs to the row, not to a hover state that a
       finger can leave behind */
    .nav-links .mega-grid section>a:hover {
        background: transparent;
        padding-left: 12px
    }
}

/* On a pointer, hovering one nav item dims the others. A finger has no
   hover to leave, so on touch that dimming would simply stick. */
@media (hover:none) {
    .nav-links:hover>a:not(:hover) {
        opacity: 1
    }
}

/* ==========================================================================
   Collection pages on a phone — one product to a row, edge to edge
   --------------------------------------------------------------------------
   Two-up halved every card, so the photograph — the whole reason the page
   exists — was the size of a thumbnail. One to a row gives each product the
   full width of the screen, and the section drops its 20px gutter and the
   20px the measure rule was taking off its width, so the cards run to both
   edges with nothing to squeeze them.
   ========================================================================== */
@media (max-width:600px) {

    .cove-products,
    .seating-collections {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 16px;
        padding-right: 16px
    }

    .cove-products {
        padding-top: 28px;
        padding-bottom: 12px
    }

    .cove-product-grid,
    .seating-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px
    }

    /* the desktop layout pins the first two rows to 522px each, which left the
       top two cards taller than the rest once they were stacked */
    .seating-grid {
        grid-template-rows: none
    }

    /* full width now, so the card can be shallower and still show the whole
       product rather than a crop of it */
    .cove-card {
        height: 320px;
        padding: 18px 20px 16px
    }

    .seating-grid {
        grid-auto-rows: 320px
    }

    /* the section carries the gutter now, so nothing inside needs its own */
    .cove-products>:not(.cove-product-grid):not(.sr-only),
    .seating-collections>:not(.seating-grid):not(.sr-only) {
        padding-left: 0;
        padding-right: 0
    }
}

/* ==========================================================================
   Cove collection — room to breathe
   --------------------------------------------------------------------------
   The page ran hero → cards → footer with almost nothing between them: the
   first row started 28px under the banner, the columns sat 20px apart while
   the rows sat 108px apart, and the grid stopped dead against the footer.
   The rhythm here is one idea — space scales with the viewport — applied at
   every edge: above the grid, between the cards, inside them and below.
   ========================================================================== */
.cove-products {
    padding-top: clamp(64px, 7vw, 120px);
    padding-bottom: clamp(72px, 8vw, 130px)
}

@media (min-width:901px) {

    /* rows were five times further apart than columns; both now come from the
       same scale, so the grid reads as a grid */
    .cove-product-grid {
        gap: clamp(46px, 4.5vw, 72px) clamp(26px, 2.6vw, 40px)
    }

    .cove-card {
        height: 540px;
        padding: 32px 34px;
        transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s, border-color .4s
    }

    .cove-card h3 {
        top: 78px;
        left: 34px;
        right: 26px
    }

    .cove-card .eyebrow {
        max-width: 300px
    }

    /* the product sat tight to the card's edges; 20px of inset gives it a
       margin of its own without making the photograph smaller on the page */
    .cove-card-media {
        top: 148px;
        height: 360px;
        padding: 0 20px 10px
    }

    .cove-card:hover {
        transform: translateY(-6px);
        border-color: #cfcabb;
        box-shadow: 0 20px 44px rgba(19, 34, 65, .09)
    }
}

/* tablets: two up, with the same scale of gutter */
@media (max-width:900px) and (min-width:601px) {
    .cove-product-grid {
        gap: 36px 22px
    }
}

@media (max-width:600px) {

    .cove-products {
        padding-top: 40px;
        padding-bottom: 64px
    }

    .cove-product-grid {
        gap: 16px
    }

    /* full width still, but the product gets a taller frame and the copy a
       wider margin, so the card is not a strip of text over a small photo */
    .cove-card {
        height: 360px;
        padding: 22px 22px 20px
    }

    .cove-card-media {
        margin-top: 12px;
        padding-bottom: 4px
    }
}

/* ==========================================================================
   The menu button on a stuck header
   --------------------------------------------------------------------------
   Overlay pages paint the burger white so it reads against the hero. Once the
   header sticks it turns into a white bar, and the button stayed white on it —
   three invisible lines beside the logo. The header already switches its own
   colour to ink there; the button needs telling too, since a colour set on the
   element itself never loses to an inherited one.
   ========================================================================== */
@media (max-width:900px) {

    body[data-page] .site-header.overlay.is-stuck .menu-btn,
    .site-header.is-stuck .menu-btn {
        color: var(--ink)
    }
}

/* ==========================================================================
   Product page — columns centred on the product
   --------------------------------------------------------------------------
   The overview's three columns and the specifications accordion all started
   at the top of their row, so against a tall photograph the writing sat high
   and the space collected underneath it. Centring the text columns on the
   image — and only the text columns, so the image itself still fills the row
   — puts the two halves of each section on one axis.
   ========================================================================== */
.product-overview__copy,
.product-overview__meta {
    align-self: center
}

.product-specs__grid>.product-accordion {
    align-self: center
}

/* --- Related products: the chip clears the frame --- */
.related-card__tag {
    top: 20px;
    left: 20px
}

.related-card__media {
    border-color: #f0ede6
}

/* the product name sits 20px under its frame (the card's own 10px row gap
   plus the heading's 2px margin came to 12px) */
.related-card b {
    margin-top: 10px
}

/* --- Related products: rounded frames, and the category chip removed --- */
.related-card__media {
    border-radius: 20px
}

/* the chip is gone from the markup; the rule that placed it goes too */
.related-card__tag {
    display: none
}

/* ==========================================================================
   Related products — the name set like a specification heading
   --------------------------------------------------------------------------
   The cards used the interface sans while every other heading on the page is
   Baskervville, so the four names read as labels rather than as products.
   They now take the accordion summary's exact type, and an arrow marks the
   card as a link: it rests at the end of the name and steps out on hover,
   which the sans version had no room to do.
   ========================================================================== */
.related-card b {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font: 400 var(--font-body)/1.4 var(--serif);
    font-size: clamp(19px, 1.6vw, 23px);
    letter-spacing: var(--ls-heading);
    color: var(--ink)
}

.related-card b:after {
    content: "";
    width: 15px;
    height: 11px;
    flex: 0 0 auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='%23132241' stroke-width='1.3'%3E%3Cpath d='M1 6h13m-4.5-4.5L14.5 6 9.5 10.5'/%3E%3C/svg%3E") no-repeat center/contain;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .35s, transform .35s cubic-bezier(.22, 1, .36, 1)
}

.related-card:hover b:after,
.related-card:focus-visible b:after {
    opacity: .55;
    transform: translateX(0)
}

/* a phone has no hover, so the arrow simply stays on, quietly */
@media (hover:none) {
    .related-card b:after {
        opacity: .4;
        transform: none
    }
}

@media (max-width:600px) {
    .related-card b {
        font-size: 19px;
        gap: 8px
    }
}

/* ==========================================================================
   Floating WhatsApp link — back to the COFUR "O"
   --------------------------------------------------------------------------
   The green pill with its unfolding label is replaced by the mark that sat
   here originally: the "O" in a paper circle, eyes blinking, lifting on
   hover. Same class as the pill, so every clearance measured against it
   elsewhere (About us, the footer menu, the accordion marker) still holds,
   and the same footprint: 64px, 30px in from the corner.
   ========================================================================== */
.cofur-whatsapp {
    --o: 64px;
    width: var(--o);
    height: var(--o);
    padding: calc(var(--o) * .14);
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    box-shadow: 0 10px 30px rgba(19, 34, 65, .16);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s
}

.cofur-whatsapp img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.cofur-whatsapp:hover,
.cofur-whatsapp:focus-visible {
    padding: calc(var(--o) * .14);
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(19, 34, 65, .22)
}

/* two eyes inside the counter of the "O" */
.cofur-whatsapp__eyes {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: calc(var(--o) * .115);
    pointer-events: none
}

.cofur-whatsapp__eyes i {
    display: block;
    width: calc(var(--o) * .075);
    height: calc(var(--o) * .075);
    border-radius: 50%;
    background: var(--ink);
    transform-origin: center;
    animation: cofur-blink 4.6s infinite
}

.cofur-whatsapp__eyes i:nth-child(2) {
    animation-delay: .04s
}

@keyframes cofur-blink {

    0%,
    92%,
    100% {
        transform: scaleY(1)
    }

    94%,
    96% {
        transform: scaleY(.12)
    }
}

@media (prefers-reduced-motion:reduce) {
    .cofur-whatsapp__eyes i {
        animation: none
    }
}

@media (max-width:600px) {
    .cofur-whatsapp {
        --o: 56px
    }
}

/* ==========================================================================
   CMS additions: form validation states, flash messages, optional blocks
   ========================================================================== */
.site-messages{position:fixed;top:96px;left:50%;transform:translateX(-50%);z-index:900;display:grid;gap:8px;width:min(560px,calc(100% - 32px))}
.site-message{padding:12px 18px;border-radius:8px;background:var(--ink);color:#fff;font-size:var(--font-caption);box-shadow:0 10px 30px rgba(19,34,65,.18)}
.site-message--error{background:#9c2f2f}
.site-message--success{background:#2f6b4a}
.field-error{display:block;margin-top:6px;color:#9c2f2f;font-size:var(--font-tiny);letter-spacing:.02em}
.cfield.has-error input,.cfield.has-error textarea,.cfield.has-error select{border-color:#9c2f2f}
.form-errors{margin:0 0 18px;color:#9c2f2f;font-size:var(--font-caption)}
.range-rail__intro,.why-description,.contact-form-description,.hero-description,.hero-subheading{max-width:62ch}
.why-list>div small{display:block;font-weight:400;opacity:.75;margin-top:4px;font-size:var(--font-caption)}
.why-icon{width:28px;height:28px;object-fit:contain;display:inline-block;margin-right:12px;vertical-align:middle}
.swatch-color{display:block;width:100%;aspect-ratio:1;border-radius:50%}
.seating-empty,.cove-empty{grid-column:1/-1;padding:40px 0;text-align:center}
.seating-empty a,.cove-empty a{text-decoration:underline}
.about-value__image,.about-mission__image,.about-materials article>img{margin:0 0 18px;border-radius:6px}
.contact-map .about-location{margin:0 0 48px}
.contact-map iframe{width:100%;height:360px;border:0;border-radius:6px}
.hero-cta{position:relative;z-index:2;margin-top:18px}

/* Product details mosaic: video tiles (CMS) ---------------------------------- */
.product-mosaic__tile--video { padding: 0; background: #0f172a }
.product-mosaic__tile .product-mosaic__video { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; object-fit: cover; background: #0f172a }
.product-mosaic__tile--video figcaption { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6) }