@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Inter:wght@300;400;500;600;700&display=swap');


:root {
    --font-display: 'DM Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
}



/* ==========================================================
   RESET / GLOBAL
   ========================================================== */

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


html,
body {
    min-height: 100%;
}


html {
    scroll-behavior: smooth;
}


body,
body.light {
    font-family: var(--font-body);

    color: #ffffff;

    background-color: #000000;
}


body.light {
    color: #000000;

    background-color: #ffffff;
}


a {
    color: #000000;

    font-weight: 600;
}


a:hover {
    color: rgba(0,0,0,0.6);
}



/* ==========================================================
   HEADER
   ========================================================== */

.site-header,
.site-header.light {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 10000;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 18px 40px;

    background: transparent;

    border-bottom: 1px solid transparent;

    transition:
        transform 0.35s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        backdrop-filter 0.3s ease,
        -webkit-backdrop-filter 0.3s ease;
}


.site-header.is-hidden {
    transform: translateY(-100%);
}



/* ==========================================================
   HEADER — SCROLLED STATE
   ========================================================== */

.site-header.is-scrolled,
.site-header.light.is-scrolled {
    background: rgba(243, 242, 238, 0.94);

    border-bottom-color: rgba(0,0,0,0.08);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);
}



/* ==========================================================
   LOGO
   ========================================================== */

.logo {
    display: flex;

    flex-direction: column;

    letter-spacing: 0.18em;

    font-size: 11px;

    text-transform: uppercase;
}


.logo-main {
    font-weight: 700;
}


.logo-sub {
    opacity: 0.75;
}


.logo img {
    display: block;

    width: 200px;

    height: auto;

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


.site-header.is-scrolled .logo img {
    filter: brightness(0);
}



/* ==========================================================
   MENU TOGGLE
   ========================================================== */

.menu-toggle {
    --w: 30px;
    --h: 20px;
    --bar: 2px;

    width: var(--w);
    height: var(--h);

    display: inline-flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 0;

    background: none;

    border: none;

    cursor: pointer;

    z-index: 9999;

    appearance: none;

    -webkit-appearance: none;

    color: transparent !important;
}


.menu-toggle span {
    width: 100%;

    height: var(--bar);

    background: #ffffff;

    border-radius: 2px;

    transform-origin: center;

    will-change:
        transform,
        opacity;

    transition:
        transform 0.3s ease,
        opacity 0.25s ease,
        background-color 0.3s ease;
}


.site-header.is-scrolled .menu-toggle span {
    background: #111111;
}


.menu-toggle.active span:nth-child(1) {
    transform:
        translateY(calc((var(--h) - var(--bar)) / 2))
        rotate(45deg);
}


.menu-toggle.active span:nth-child(2) {
    opacity: 0;

    transform: scaleX(0);
}


.menu-toggle.active span:nth-child(3) {
    transform:
        translateY(calc(-1 * (var(--h) - var(--bar)) / 2))
        rotate(-45deg);
}


.site-header.is-scrolled .menu-toggle.active span,
.menu-toggle.active span {
    background: #ffffff;
}



/* ==========================================================
   SIDE MENU
   ========================================================== */

.side-menu {
    position: fixed;

    top: 0;

    right: -240px;

    width: 240px;

    height: 100vh;

    padding: 80px 40px;

    background: rgba(0,0,0,0.5);

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

    transition: right 0.35s ease;

    z-index: 25;

    font-family: var(--font-display);

    text-transform: none;
}


.side-menu.open {
    right: 0;
}


.side-menu ul {
    list-style: none;
}


.side-menu li {
    margin-bottom: 20px;

    font-weight: 600;
}


.side-menu a {
    color: #ffffff;

    text-decoration: none;

    font-size: 28px;

    opacity: 0.9;

    transition: opacity 0.2s ease;
}


.side-menu a:hover {
    color: #ffffff;

    opacity: 1;
}



/* ==========================================================
   HOME PAGE
   ========================================================== */

.home-page {
    background: #f3f2ee;

    color: #111111;
}



/* ==========================================================
   GLOBAL CONTENT LAYOUT
   ========================================================== */

.home-container {
    width: 100%;

    max-width: 1440px;

    margin: 0 auto;

    padding-left: clamp(24px, 4vw, 64px);

    padding-right: clamp(24px, 4vw, 64px);
}


.home-display-heading {
    max-width: 1180px;

    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(50px, 6.5vw, 96px);

    line-height: 0.94;

    font-weight: 600;
}


.home-eyebrow {
    margin-bottom: 36px;

    font-size: 15px;

    font-weight: 500;

    color: rgba(0,0,0,0.62);
}



/* ==========================================================
   TEXT LINK
   ========================================================== */

.text-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: inherit;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

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


.text-link:hover {
    color: inherit;

    opacity: 0.6;

    gap: 17px;
}



/* ==========================================================
   PHOSPHOR ARROW UP RIGHT
   ========================================================== */

.brand-card-arrow {
    display: block;

    width: 22px;
    height: 22px;

    flex: 0 0 auto;

    margin-top: 0;

    color: rgba(0,0,0,0.45);

    transition:
        transform 0.3s ease,
        color 0.3s ease,
        opacity 0.3s ease;
}


.brand-card-arrow svg {
    display: block;

    width: 100%;
    height: 100%;

    overflow: visible;
}


.brand-card:hover .brand-card-arrow {
    transform: translate(4px, -4px);

    color: #111111;
}


.text-link:hover .brand-card-arrow {
    transform: translate(3px, -3px);
}



/* ==========================================================
   HOME HERO
   ========================================================== */

.home-page .hero {
    position: relative;

    min-height: 100svh;

    padding:
        clamp(150px, 18vh, 220px)
        clamp(24px, 4vw, 64px)
        48px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    color: #ffffff;

    background-image:
        url('/assets/images/hero-3.jpg');

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;
}


.home-page .hero::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.18) 0%,
            rgba(0,0,0,0.03) 55%,
            rgba(0,0,0,0.02) 100%
        );

    pointer-events: none;
}


.home-page .hero-content {
    position: relative;

    z-index: 2;

    max-width: 780px;
}


.home-page .hero h1 {
    margin: 0 0 36px;

    font-family: var(--font-display);

    font-size: clamp(64px, 10vw, 150px);

    line-height: 0.82;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: -0.065em;
}


.home-page .hero-lead {
    max-width: 560px;

    font-family: var(--font-body);

    font-size: clamp(16px, 1.25vw, 19px);

    line-height: 1.65;

    font-weight: 400;

    color: rgba(255,255,255,0.9);
}



/* ==========================================================
   SCROLL INDICATOR
   ========================================================== */

.scroll-down {
    position: absolute;

    left: 50%;

    bottom: 32px;

    transform: translateX(-50%);

    z-index: 3;

    display: flex;

    text-decoration: none;

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


.scroll-down:hover {
    transform: translate(-50%, 3px);
}


.scroll-down img.scroll-icon {
    width: 28px;

    height: auto;

    filter: invert(1);

    opacity: 0.8;

    animation:
        caret-bounce 1.8s ease-in-out infinite;
}


@keyframes caret-bounce {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }

    100% {
        transform: translateY(0);
    }

}



/* ==========================================================
   HOME INTRO
   ========================================================== */

.home-intro {
    padding:
        clamp(110px, 12vw, 190px)
        0
        clamp(120px, 12vw, 190px);

    background: #f3f2ee;

    color: #111111;
}


.home-intro-copy {
    max-width: 570px;

    margin:
        clamp(65px, 7vw, 105px)
        0
        0
        auto;

    margin-right: clamp(0px, 3vw, 55px);
}


.home-intro-copy p {
    margin-bottom: 24px;

    font-size: 17px;

    line-height: 1.75;

    color: rgba(0,0,0,0.72);
}


.home-intro-copy .text-link {
    margin-top: 28px;
}



/* ==========================================================
   HOME BRANDS
   ========================================================== */

.home-brands {
    padding:
        clamp(120px, 12vw, 190px)
        0
        clamp(130px, 13vw, 210px);

    background: #ffffff;

    color: #111111;
}


.home-brands-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(280px, 0.7fr);

    gap: clamp(50px, 8vw, 130px);

    align-items: end;

    margin-bottom: clamp(90px, 10vw, 150px);
}


.home-brands-header .home-display-heading {
    max-width: 900px;
}


.home-brands-header > p {
    max-width: 420px;

    margin: 0 0 8px;

    font-size: 17px;

    line-height: 1.7;

    color: rgba(0,0,0,0.6);
}



/* ==========================================================
   BRAND GRID
   ========================================================== */

.brand-grid {
    display: grid;

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

    column-gap: clamp(45px, 6vw, 100px);

    row-gap: clamp(80px, 9vw, 140px);

    align-items: stretch;
}


.brand-card {
    display: grid;

    grid-template-rows:
        220px
        auto;

    min-width: 0;

    color: #111111;

    text-decoration: none;
}


.brand-card:hover {
    color: #111111;
}


.brand-card-logo {
    width: 100%;

    height: 220px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        20px
        clamp(20px, 4vw, 55px);
}


.brand-card-logo img {
    display: block;

    width: auto;

    height: auto;

    max-width: min(320px, 82%);

    max-height: 95px;

    object-fit: contain;

    object-position: center center;

    filter: grayscale(100%);

    opacity: 0.9;

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


.brand-card:hover .brand-card-logo img {
    transform: translateY(-4px);

    opacity: 1;

    filter: grayscale(0%);
}


.brand-card-bottom {
    min-height: 92px;

    display: grid;

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

    gap: 30px;

    align-items: start;

    padding-top: 24px;

    border-top: 1px solid rgba(0,0,0,0.18);
}


.brand-card-bottom p {
    max-width: 360px;

    margin: 0;

    font-size: 14px;

    line-height: 1.6;

    font-weight: 400;

    color: rgba(0,0,0,0.55);
}



/* ==========================================================
   LEGACY BRAND LIST
   ========================================================== */

.brand-list {
    border-top: 1px solid rgba(255,255,255,0.18);
}


.brand-row {
    min-height: 150px;

    display: grid;

    grid-template-columns:
        minmax(240px, 1.4fr)
        minmax(220px, 1fr)
        40px;

    gap: 32px;

    align-items: center;

    border-bottom: 1px solid rgba(255,255,255,0.18);

    text-decoration: none;

    color: #ffffff;

    transition:
        background-color 0.3s ease,
        padding 0.3s ease;
}


.brand-row:hover {
    color: #ffffff;

    background: rgba(255,255,255,0.045);

    padding-left: 18px;

    padding-right: 18px;
}


.brand-row-logo {
    height: 70px;

    display: flex;

    align-items: center;
}


.brand-row-logo img {
    display: block;

    width: auto;

    height: auto;

    max-width: 250px;

    max-height: 65px;

    object-fit: contain;

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}


.brand-row:hover .brand-row-logo img {
    transform: translateX(5px);
}


.brand-row-description {
    max-width: 330px;

    font-size: 14px;

    line-height: 1.6;

    color: rgba(255,255,255,0.52);
}


.brand-row-arrow {
    justify-self: end;

    font-size: 22px;

    color: rgba(255,255,255,0.55);

    transition: transform 0.3s ease;
}


.brand-row:hover .brand-row-arrow {
    transform: translate(4px, -4px);
}



/* ==========================================================
   HOME STATEMENT
   ========================================================== */

.home-statement {
    padding:
        clamp(120px, 14vw, 220px)
        0;

    background: #d9ded8;

    color: #101010;
}


.home-statement-intro {
    width: 100%;
}


.home-statement .home-display-heading {
    max-width: 1100px;
}



/* ==========================================================
   HOME AREAS
   ========================================================== */

.home-areas {
    padding:
        clamp(110px, 12vw, 190px)
        0;

    background: #f3f2ee;

    color: #111111;
}


.home-areas .home-display-heading {
    max-width: 850px;
}


.home-area-list {
    width: min(100%, 720px);

    margin:
        clamp(70px, 8vw, 115px)
        0
        0
        auto;

    border-top: 1px solid rgba(0,0,0,0.25);
}


.home-area-item {
    min-height: 95px;

    display: flex;

    align-items: center;

    border-bottom: 1px solid rgba(0,0,0,0.25);
}


.home-area-item strong {
    font-family: var(--font-display);

    font-size: clamp(24px, 2.7vw, 38px);

    line-height: 1;

    font-weight: 600;
}



/* ==========================================================
   HOME NEWS
   ========================================================== */

.home-news {
    padding:
        clamp(110px, 12vw, 190px)
        0;

    background: #ffffff;

    color: #111111;
}


.home-news-heading {
    max-width: none;
}


.home-news-feature {
    max-width: 800px;

    margin:
        clamp(70px, 8vw, 115px)
        0
        0
        auto;

    margin-right: clamp(0px, 3vw, 55px);
}


.home-news-date {
    display: block;

    margin-bottom: 30px;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.12em;

    color: rgba(0,0,0,0.45);
}


.home-news-feature h3 {
    max-width: 800px;

    margin: 0 0 35px;

    font-family: var(--font-display);

    font-size: clamp(38px, 4.5vw, 66px);

    line-height: 0.98;

    font-weight: 600;
}


.home-news-feature p {
    max-width: 570px;

    margin: 0 0 40px;

    font-size: 17px;

    line-height: 1.75;

    color: rgba(0,0,0,0.65);
}



/* ==========================================================
   HOME END
   ========================================================== */

.home-end {
    padding:
        clamp(130px, 15vw, 240px)
        0;

    background: #0b0b0b;

    color: #ffffff;
}


.home-end h2 {
    max-width: 1180px;

    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(64px, 10vw, 145px);

    line-height: 0.84;

    font-weight: 600;
}


.home-end p {
    margin-top: 45px;

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 0.14em;

    color: rgba(255,255,255,0.45);
}



/* ==========================================================
   BRANDS PAGE
   ========================================================== */

.page-brands {
    background: #ffffff;

    color: #111111;
}


.brands-hero {
    position: relative;

    min-height: clamp(520px, 72vh, 760px);

    display: flex;

    align-items: flex-end;

    color: #ffffff;

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;
}


.brands-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.06) 0%,
            rgba(0,0,0,0.08) 45%,
            rgba(0,0,0,0.42) 100%
        );

    pointer-events: none;
}


.brands-hero-inner {
    position: relative;

    z-index: 2;

    padding-top: 160px;

    padding-bottom: clamp(55px, 6vw, 90px);
}


.brands-hero h1 {
    max-width: 1000px;

    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(64px, 9vw, 138px);

    line-height: 0.9;

    font-weight: 600;
}


.brands-intro {
    padding:
        clamp(110px, 12vw, 190px)
        0
        clamp(110px, 12vw, 180px);

    background: #f3f2ee;

    color: #111111;
}


.brands-intro .home-display-heading {
    max-width: 1000px;
}


.brands-intro-copy {
    max-width: 570px;

    margin:
        clamp(65px, 7vw, 105px)
        0
        0
        auto;

    margin-right: clamp(0px, 3vw, 55px);
}


.brands-intro-copy p {
    margin-bottom: 24px;

    font-size: 17px;

    line-height: 1.75;

    color: rgba(0,0,0,0.68);
}


.brands-intro-copy p:last-child {
    margin-bottom: 0;
}


.brands-portfolio {
    padding:
        clamp(120px, 12vw, 190px)
        0
        clamp(130px, 13vw, 210px);

    background: #ffffff;

    color: #111111;
}


.brands-portfolio .brand-grid {
    row-gap: clamp(95px, 10vw, 155px);
}


.brands-end {
    padding:
        clamp(130px, 15vw, 230px)
        0;

    background: #d9ded8;

    color: #111111;
}


.brands-end h2 {
    max-width: 1150px;

    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(60px, 8vw, 118px);

    line-height: 0.92;

    font-weight: 600;
}



/* ==========================================================
   INDIVIDUAL BRAND DETAIL PAGE
   ========================================================== */

.page-brand-detail {
    background: #ffffff;

    color: #111111;
}


.page-brand-detail .site-footer {
    margin-top: 0;
}


.brand-detail-hero {
    position: relative;

    min-height: clamp(520px, 72vh, 760px);

    display: flex;

    align-items: flex-end;

    color: #ffffff;

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;
}


.brand-detail-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.04) 0%,
            rgba(0,0,0,0.08) 45%,
            rgba(0,0,0,0.46) 100%
        );

    pointer-events: none;
}


.brand-detail-hero-inner {
    position: relative;

    z-index: 2;

    padding-top: 160px;

    padding-bottom: clamp(55px, 6vw, 90px);
}


.brand-detail-kicker {
    margin-bottom: 18px;

    font-size: 12px;

    line-height: 1;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.16em;

    color: rgba(255,255,255,0.66);
}


.brand-detail-hero h1 {
    max-width: 1100px;

    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(64px, 9vw, 138px);

    line-height: 0.9;

    font-weight: 600;
}


.brand-detail-intro {
    padding:
        clamp(120px, 12vw, 190px)
        0;

    background: #f3f2ee;

    color: #111111;
}


.brand-detail-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.9fr)
        minmax(0, 1.25fr);

    gap: clamp(70px, 10vw, 160px);

    align-items: center;
}


.brand-detail-logo {
    min-height: 280px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.brand-detail-logo img {
    display: block;

    width: auto;

    height: auto;

    max-width: min(380px, 88%);

    max-height: 120px;

    object-fit: contain;
}


.brand-detail-copy {
    max-width: 650px;
}


.brand-detail-copy h2 {
    margin: 0 0 42px;

    font-family: var(--font-display);

    font-size: clamp(44px, 5vw, 74px);

    line-height: 0.98;

    font-weight: 600;
}


.brand-detail-copy p {
    max-width: 570px;

    margin-bottom: 24px;

    font-size: 17px;

    line-height: 1.75;

    color: rgba(0,0,0,0.68);
}


.brand-detail-copy .text-link {
    margin-top: 25px;
}


.brand-detail-facts {
    padding:
        clamp(95px, 9vw, 145px)
        0;

    background: #ffffff;

    color: #111111;
}


.brand-facts-grid {
    display: grid;

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

    border-top: 1px solid rgba(0,0,0,0.18);

    border-bottom: 1px solid rgba(0,0,0,0.18);
}


.brand-fact {
    min-height: 200px;

    padding:
        32px
        clamp(20px, 3vw, 42px)
        35px;

    border-right: 1px solid rgba(0,0,0,0.18);
}


.brand-fact:first-child {
    padding-left: 0;
}


.brand-fact:last-child {
    padding-right: 0;

    border-right: none;
}


.brand-fact-label {
    display: block;

    margin-bottom: 45px;

    font-size: 11px;

    line-height: 1;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.14em;

    color: rgba(0,0,0,0.38);
}


.brand-fact strong {
    display: block;

    font-family: var(--font-display);

    font-size: clamp(20px, 2vw, 30px);

    line-height: 1.18;

    font-weight: 500;
}


.brand-fact strong a {
    color: inherit;

    font-weight: inherit;

    text-decoration: none;

    transition:
        opacity 0.2s ease;
}


.brand-fact strong a:hover {
    color: inherit;

    opacity: 0.55;
}



/* ==========================================================
   BRAND FACT — WEBSITE LINK
   ========================================================== */

/*
 * The website anchor itself contains both the URL
 * and the arrow.
 *
 * Making the anchor inline-flex forces them to remain
 * on the same horizontal row.
 */
.brand-fact strong > a {
    display: inline-flex;

    align-items: center;

    justify-content: flex-start;

    gap: 10px;

    width: fit-content;

    max-width: 100%;

    color: inherit;

    font-family: inherit;

    font-size: inherit;

    line-height: inherit;

    font-weight: inherit;

    text-decoration: none;

    white-space: nowrap;

    vertical-align: middle;

    transition:
        opacity 0.2s ease;
}


.brand-fact strong > a:hover {
    color: inherit;

    opacity: 0.55;
}


/*
 * The global .brand-card-arrow uses display:block.
 *
 * For an arrow inside a Website link we explicitly
 * override that so it behaves as a flex item beside
 * the URL.
 */
.brand-fact strong > a .brand-card-arrow--inline {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    width: 22px;
    height: 22px;

    margin: 0;

    color: rgba(0,0,0,0.45);

    transform: none;

    transition:
        transform 0.3s ease,
        color 0.3s ease,
        opacity 0.3s ease;
}


.brand-fact strong > a .brand-card-arrow--inline svg {
    display: block;

    width: 100%;
    height: 100%;

    overflow: visible;
}


.brand-fact strong > a:hover .brand-card-arrow--inline {
    transform: translate(3px, -3px);

    color: #111111;
}



/* ==========================================================
   BRAND DETAIL END
   ========================================================== */

.brand-detail-end {
    padding:
        clamp(130px, 15vw, 230px)
        0;

    background: #d9ded8;

    color: #111111;
}


.brand-detail-end h2 {
    max-width: 1100px;

    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(60px, 8vw, 118px);

    line-height: 0.92;

    font-weight: 600;
}



/* ==========================================================
   ABOUT PAGE
   ========================================================== */

.page-about {
    background: #ffffff;

    color: #111111;
}


.page-about .site-footer {
    margin-top: 0;
}


.about-detail-hero {
    position: relative;

    min-height: clamp(520px, 72vh, 760px);

    display: flex;

    align-items: flex-end;

    color: #ffffff;

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;
}


.about-detail-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.04) 0%,
            rgba(0,0,0,0.08) 45%,
            rgba(0,0,0,0.46) 100%
        );

    pointer-events: none;
}


.about-detail-hero-inner {
    position: relative;

    z-index: 2;

    padding-top: 160px;

    padding-bottom: clamp(55px, 6vw, 90px);
}


.about-detail-hero h1 {
    max-width: 1100px;

    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(64px, 9vw, 138px);

    line-height: 0.9;

    font-weight: 600;
}


.about-intro {
    padding:
        clamp(110px, 12vw, 190px)
        0
        clamp(120px, 12vw, 190px);

    background: #f3f2ee;

    color: #111111;
}


.about-intro .home-display-heading {
    max-width: 1100px;
}


.about-intro-copy {
    max-width: 590px;

    margin:
        clamp(65px, 7vw, 105px)
        0
        0
        auto;

    margin-right: clamp(0px, 3vw, 55px);
}


.about-intro-copy p {
    margin-bottom: 24px;

    font-size: 17px;

    line-height: 1.75;

    color: rgba(0,0,0,0.68);
}


.about-intro-copy p:last-child {
    margin-bottom: 0;
}


.about-history-intro {
    padding:
        clamp(120px, 13vw, 200px)
        0
        clamp(80px, 8vw, 125px);

    background: #ffffff;

    color: #111111;
}


.about-history-intro .home-display-heading {
    max-width: 1050px;
}


.timeline {
    padding:
        0
        0
        clamp(130px, 14vw, 220px);

    background: #ffffff;

    color: #111111;
}


.timeline-inner {
    width: 100%;

    max-width: 1440px;

    margin: 0 auto;

    padding-left: clamp(24px, 4vw, 64px);

    padding-right: clamp(24px, 4vw, 64px);
}


.timeline-alt {
    position: relative;

    list-style: none;

    margin: 0;

    padding: 0;
}


.timeline-alt::before {
    content: "";

    position: absolute;

    left: 50%;

    top: 0;
    bottom: 0;

    width: 1px;

    background: rgba(0,0,0,0.16);

    transform: translateX(-0.5px);
}


.timeline-alt-group {
    position: relative;

    padding:
        clamp(42px, 5vw, 70px)
        0
        clamp(52px, 6vw, 85px);
}


.timeline-alt-year {
    position: relative;

    z-index: 2;

    width: fit-content;

    margin:
        0
        auto
        clamp(35px, 4vw, 55px);

    padding:
        8px
        20px;

    background: #ffffff;

    font-family: var(--font-display);

    font-size: clamp(36px, 4.5vw, 62px);

    line-height: 1;

    font-weight: 600;
}


.timeline-alt-entries {
    display: flex;

    flex-direction: column;

    gap: clamp(32px, 4vw, 50px);
}


.timeline-alt-entry {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        120px
        minmax(0, 1fr);

    align-items: start;
}


.timeline-alt-card {
    width: min(440px, 100%);
}


.timeline-alt-entry.left .timeline-alt-card {
    grid-column: 1;

    justify-self: end;

    padding-right: 45px;
}


.timeline-alt-entry.right .timeline-alt-card {
    grid-column: 3;

    justify-self: start;

    padding-left: 45px;
}


.timeline-alt-title {
    margin-bottom: 14px;

    font-family: var(--font-display);

    font-size: clamp(22px, 2vw, 30px);

    line-height: 1.15;

    font-weight: 600;
}


.timeline-alt-text {
    font-size: 15px;

    line-height: 1.75;

    color: rgba(0,0,0,0.62);
}


.about-end {
    padding:
        clamp(130px, 15vw, 230px)
        0;

    background: #d9ded8;

    color: #111111;
}


.about-end h2 {
    max-width: 1100px;

    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(60px, 8vw, 118px);

    line-height: 0.92;

    font-weight: 600;
}



/* ==========================================================
   PRESS PAGE
   ========================================================== */

.page-press {
    background: #ffffff;

    color: #111111;
}


.page-press .site-footer {
    margin-top: 0;
}


.press-hero {
    position: relative;

    min-height: clamp(520px, 72vh, 760px);

    display: flex;

    align-items: flex-end;

    color: #ffffff;

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;
}


.press-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.04) 0%,
            rgba(0,0,0,0.08) 45%,
            rgba(0,0,0,0.46) 100%
        );

    pointer-events: none;
}


.press-hero-inner {
    position: relative;

    z-index: 2;

    padding-top: 160px;

    padding-bottom: clamp(55px, 6vw, 90px);
}


.press-hero h1 {
    max-width: 1100px;

    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(64px, 9vw, 138px);

    line-height: 0.9;

    font-weight: 600;
}


.press-intro {
    padding:
        clamp(110px, 12vw, 190px)
        0
        clamp(120px, 12vw, 190px);

    background: #f3f2ee;

    color: #111111;
}


.press-intro .home-display-heading {
    max-width: 1050px;
}


.press-intro-copy {
    max-width: 570px;

    margin:
        clamp(65px, 7vw, 105px)
        0
        0
        auto;

    margin-right: clamp(0px, 3vw, 55px);
}


.press-intro-copy p {
    margin: 0;

    font-size: 17px;

    line-height: 1.75;

    color: rgba(0,0,0,0.68);
}


.press-archive {
    padding:
        clamp(120px, 12vw, 190px)
        0
        clamp(130px, 13vw, 210px);

    background: #ffffff;

    color: #111111;
}


.press-story {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    gap: clamp(60px, 8vw, 130px);

    align-items: start;

    padding:
        clamp(70px, 8vw, 120px)
        0;

    border-top: 1px solid rgba(0,0,0,0.18);
}


.press-story:first-child {
    padding-top: 0;

    border-top: none;
}


.press-story:nth-child(even) {
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);
}


.press-story:nth-child(even) .press-story-media {
    grid-column: 2;
}


.press-story:nth-child(even) .press-story-content {
    grid-column: 1;

    grid-row: 1;
}


.press-story--featured {
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, 0.75fr);

    padding-bottom:
        clamp(100px, 10vw, 160px);
}


.press-story--featured .press-story-content h2 {
    font-size: clamp(42px, 4.7vw, 70px);

    line-height: 1;
}


.press-story-media {
    width: 100%;

    min-width: 0;
}


.press-story-media img {
    display: block;

    width: 100%;

    height: auto;

    object-fit: cover;
}


.press-story-media--video {
    min-height: 350px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f3f2ee;
}


.press-story-media .fb-video {
    width: 100%;

    margin: 0;
}


.press-story-content {
    max-width: 620px;

    padding-top: 5px;
}


.press-story-meta {
    margin-bottom: 28px;

    font-size: 11px;

    line-height: 1;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.14em;

    color: rgba(0,0,0,0.4);
}


.press-story-content h2 {
    margin:
        0
        0
        32px;

    font-family: var(--font-display);

    font-size: clamp(32px, 3.4vw, 50px);

    line-height: 1.04;

    font-weight: 600;
}


.press-story-content p {
    margin-bottom: 22px;

    font-size: 16px;

    line-height: 1.75;

    color: rgba(0,0,0,0.66);
}


.press-story-content p:last-child {
    margin-bottom: 0;
}


.press-story-content a {
    color: #111111;

    font-weight: 600;

    text-decoration-thickness: 1px;

    text-underline-offset: 3px;

    text-decoration-color: rgba(0,0,0,0.35);
}


.press-story-content a:hover {
    color: rgba(0,0,0,0.55);
}


.press-story-content .text-link {
    margin-top: 14px;

    text-decoration: none;
}


.press-quote {
    margin-top: 42px;

    padding-top: 28px;

    border-top: 1px solid rgba(0,0,0,0.18);
}


.press-quote span {
    display: block;

    margin-bottom: 18px;

    font-size: 11px;

    line-height: 1;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.14em;

    color: rgba(0,0,0,0.4);
}


.press-quote p {
    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(20px, 2vw, 28px);

    line-height: 1.45;

    font-weight: 400;

    color: rgba(0,0,0,0.72);
}


.press-story--text-only {
    display: block;
}


.press-story--text-only .press-story-content {
    max-width: 760px;

    margin-left: auto;

    margin-right: clamp(0px, 6vw, 100px);
}


.press-end {
    padding:
        clamp(130px, 15vw, 230px)
        0;

    background: #d9ded8;

    color: #111111;
}


.press-end h2 {
    max-width: 1100px;

    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(60px, 8vw, 118px);

    line-height: 0.92;

    font-weight: 600;
}



/* ==========================================================
   CONTACT PAGE
   ========================================================== */

.page-contact {
    background: #ffffff;

    color: #111111;
}


.page-contact .site-footer {
    margin-top: 0;
}



/* ==========================================================
   CONTACT HERO
   ========================================================== */

.contact-hero {
    position: relative;

    min-height: clamp(520px, 72vh, 760px);

    display: flex;

    align-items: flex-end;

    color: #ffffff;

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;
}


.contact-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.04) 0%,
            rgba(0,0,0,0.08) 45%,
            rgba(0,0,0,0.46) 100%
        );

    pointer-events: none;
}


.contact-hero-inner {
    position: relative;

    z-index: 2;

    padding-top: 160px;

    padding-bottom: clamp(55px, 6vw, 90px);
}


.contact-hero h1 {
    max-width: 1100px;

    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(64px, 9vw, 138px);

    line-height: 0.9;

    font-weight: 600;
}



/* ==========================================================
   CONTACT INTRO
   ========================================================== */

.contact-intro {
    padding:
        clamp(110px, 12vw, 190px)
        0
        clamp(120px, 12vw, 190px);

    background: #f3f2ee;

    color: #111111;
}


.contact-intro .home-display-heading {
    max-width: 1050px;
}


.contact-intro-copy {
    max-width: 590px;

    margin:
        clamp(65px, 7vw, 105px)
        0
        0
        auto;

    margin-right: clamp(0px, 3vw, 55px);
}


.contact-intro-copy p {
    margin-bottom: 24px;

    font-size: 17px;

    line-height: 1.75;

    color: rgba(0,0,0,0.68);
}


.contact-intro-copy p:last-child {
    margin-bottom: 0;
}



/* ==========================================================
   CONTACT PEOPLE
   ========================================================== */

.contact-people {
    padding:
        clamp(120px, 12vw, 190px)
        0
        clamp(130px, 13vw, 210px);

    background: #ffffff;

    color: #111111;
}


.contact-people-header {
    margin-bottom: clamp(80px, 9vw, 135px);
}


.contact-people-header .home-display-heading {
    max-width: 1000px;
}


.contact-people-grid {
    display: grid;

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

    column-gap: clamp(28px, 4vw, 58px);

    row-gap: clamp(75px, 8vw, 120px);
}



/* ==========================================================
   CONTACT PERSON
   ========================================================== */

.contact-person {
    min-width: 0;
}


.contact-person-photo {
    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #eeeeea;
}


.contact-person-photo img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center center;

    filter: grayscale(100%);

    transition:
        filter 0.4s ease,
        transform 0.6s ease;
}


.contact-person:hover .contact-person-photo img {
    filter: grayscale(0%);

    transform: scale(1.015);
}


.contact-person-info {
    display: block;

    padding-top: 23px;

    border-top: 1px solid rgba(0,0,0,0.2);
}


.contact-person-heading h3 {
    margin: 0 0 7px;

    font-family: var(--font-display);

    font-size: clamp(24px, 2.2vw, 34px);

    line-height: 1.05;

    font-weight: 600;
}


.contact-person-title {
    margin: 0 0 22px;

    font-size: 13px;

    line-height: 1.5;

    color: rgba(0,0,0,0.46);
}


.contact-person-details {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 5px;
}


.contact-person-details a {
    max-width: 100%;

    color: rgba(0,0,0,0.68);

    font-size: 13px;

    line-height: 1.55;

    font-weight: 400;

    text-decoration: none;

    overflow-wrap: anywhere;

    transition: color 0.2s ease;
}


.contact-person-details a:hover {
    color: #111111;
}



/* ==========================================================
   CONTACT COMPANY
   ========================================================== */

.contact-company {
    padding:
        clamp(110px, 11vw, 170px)
        0;

    background: #f3f2ee;

    color: #111111;
}


.contact-company-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(340px, 0.85fr);

    gap: clamp(70px, 10vw, 170px);

    align-items: start;
}


.contact-company-heading h2 {
    max-width: 700px;

    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(48px, 6vw, 88px);

    line-height: 0.95;

    font-weight: 600;
}


.contact-company-details {
    border-top: 1px solid rgba(0,0,0,0.2);
}


.contact-company-item {
    display: grid;

    grid-template-columns:
        110px
        minmax(0, 1fr);

    gap: 25px;

    padding:
        27px
        0;

    border-bottom: 1px solid rgba(0,0,0,0.2);
}


.contact-company-label {
    padding-top: 3px;

    font-size: 11px;

    line-height: 1;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.14em;

    color: rgba(0,0,0,0.4);
}


.contact-company-item address {
    margin: 0;

    font-style: normal;

    font-size: 16px;

    line-height: 1.65;

    color: rgba(0,0,0,0.7);
}


.contact-company-item > a {
    width: fit-content;

    color: #111111;

    font-size: 16px;

    line-height: 1.65;

    font-weight: 500;

    text-decoration: none;

    transition: opacity 0.2s ease;
}


.contact-company-item > a:hover {
    color: #111111;

    opacity: 0.55;
}



/* ==========================================================
   CONTACT MAP
   ========================================================== */

.contact-map-section {
    padding:
        clamp(90px, 9vw, 145px)
        0
        clamp(110px, 11vw, 175px);

    background: #ffffff;
}


.contact-map {
    width: 100%;

    height: clamp(430px, 52vw, 680px);

    overflow: hidden;

    background: #eeeeea;
}


.contact-map iframe {
    display: block;

    width: 100%;

    height: 100%;

    border: none;

    filter: grayscale(100%);

    transition: filter 0.4s ease;
}


.contact-map:hover iframe {
    filter: grayscale(0%);
}



/* ==========================================================
   CONTACT END
   ========================================================== */

.contact-end {
    padding:
        clamp(130px, 15vw, 230px)
        0;

    background: #d9ded8;

    color: #111111;
}


.contact-end h2 {
    max-width: 1150px;

    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(60px, 8vw, 118px);

    line-height: 0.92;

    font-weight: 600;
}



/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer {
    margin-top: 100px;

    background: #050505;

    color: #ffffff;
}


.home-page .site-footer,
.page-brands .site-footer,
.page-brand-detail .site-footer,
.page-about .site-footer,
.page-press .site-footer,
.page-contact .site-footer {
    margin-top: 0;
}


.footer-inner {
    width: 100%;

    max-width: 1440px;

    margin: 0 auto;

    padding:
        clamp(80px, 8vw, 130px)
        clamp(24px, 4vw, 64px)
        36px;
}


.footer-top {
    display: grid;

    grid-template-columns:
        minmax(320px, 2fr)
        minmax(130px, 0.7fr)
        minmax(210px, 1fr)
        minmax(220px, 1fr);

    gap: clamp(45px, 6vw, 100px);

    align-items: start;

    padding-bottom:
        clamp(80px, 9vw, 140px);
}


.footer-brand {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.footer-logo {
    display: inline-block;

    text-decoration: none;
}


.footer-logo img {
    display: block;

    width: 230px;

    max-width: 100%;

    height: auto;

    transition: opacity 0.2s ease;
}


.footer-logo:hover img {
    opacity: 0.8;
}


.footer-statement {
    margin-top: 60px;

    max-width: 430px;

    font-family: var(--font-display);

    font-size: clamp(32px, 3.4vw, 52px);

    line-height: 0.98;

    font-weight: 600;

    color: #ffffff;
}


.footer-heading {
    margin-bottom: 26px;

    font-size: 11px;

    line-height: 1;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.16em;

    color: rgba(255,255,255,0.4);
}


.footer-nav {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 13px;
}


.footer-nav a {
    position: relative;

    display: inline-block;

    color: rgba(255,255,255,0.78);

    font-size: 14px;

    line-height: 1.45;

    font-weight: 400;

    text-decoration: none;

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


.footer-nav a:hover {
    color: #ffffff;

    transform: translateX(3px);
}


.footer-contact address {
    margin: 0 0 22px;

    font-style: normal;

    font-size: 14px;

    line-height: 1.7;

    color: rgba(255,255,255,0.65);
}


.footer-contact-link {
    display: inline-block;

    color: #ffffff;

    font-size: 14px;

    font-weight: 500;

    text-decoration: none;

    transition: opacity 0.2s ease;
}


.footer-contact-link:hover {
    color: #ffffff;

    opacity: 0.6;
}


.footer-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding-top: 30px;

    border-top: 1px solid rgba(255,255,255,0.14);

    color: rgba(255,255,255,0.38);

    font-size: 11px;

    line-height: 1.5;
}


.footer-bottom p {
    margin: 0;
}


.footer-bottom-tagline {
    text-transform: uppercase;

    letter-spacing: 0.14em;
}



/* ==========================================================
   LIGHT FOOTER
   ========================================================== */

.site-footer.light {
    background: #eeeeea;

    color: #111111;
}


.site-footer.light .footer-statement {
    color: #111111;
}


.site-footer.light .footer-heading {
    color: rgba(0,0,0,0.4);
}


.site-footer.light .footer-nav a {
    color: rgba(0,0,0,0.7);
}


.site-footer.light .footer-nav a:hover {
    color: #000000;
}


.site-footer.light .footer-contact address {
    color: rgba(0,0,0,0.65);
}


.site-footer.light .footer-contact-link {
    color: #111111;
}


.site-footer.light .footer-bottom {
    border-top-color: rgba(0,0,0,0.15);

    color: rgba(0,0,0,0.4);
}



/* ==========================================================
   RESPONSIVE — FOOTER TABLET
   ========================================================== */

@media (max-width: 1000px) {

    .footer-top {
        grid-template-columns:
            1.5fr
            1fr
            1fr;

        row-gap: 70px;
    }


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


    .footer-statement {
        margin-top: 45px;

        max-width: 600px;
    }

}



/* ==========================================================
   RESPONSIVE — TABLET
   ========================================================== */

@media (max-width: 900px) {

    .home-intro-copy,
    .home-news-feature,
    .brands-intro-copy,
    .about-intro-copy,
    .press-intro-copy,
    .contact-intro-copy {
        margin-right: 0;
    }


    .home-brands-header {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .home-brands-header > p {
        max-width: 520px;
    }


    .brand-grid {
        column-gap: 40px;

        row-gap: 90px;
    }


    .brand-card {
        grid-template-rows:
            190px
            auto;
    }


    .brand-card-logo {
        height: 190px;

        padding-left: 25px;

        padding-right: 25px;
    }


    .brand-card-logo img {
        max-width: min(270px, 82%);

        max-height: 80px;
    }


    .brand-row {
        min-height: 130px;

        grid-template-columns:
            1fr
            30px;

        gap: 22px;
    }


    .brand-row-description {
        display: none;
    }


    .brand-row-logo img {
        max-width: 220px;

        max-height: 55px;
    }


    .home-area-list {
        width: min(100%, 680px);
    }


    .brands-hero,
    .brand-detail-hero,
    .about-detail-hero,
    .press-hero,
    .contact-hero {
        min-height: 620px;
    }



    /* ------------------------------------------------------
       BRAND DETAIL
       ------------------------------------------------------ */

    .brand-detail-intro-grid {
        grid-template-columns:
            minmax(220px, 0.7fr)
            minmax(0, 1.3fr);

        gap: 60px;
    }


    .brand-detail-logo {
        min-height: 220px;
    }


    .brand-detail-logo img {
        max-width: min(300px, 90%);

        max-height: 100px;
    }


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


    .brand-fact {
        border-bottom: 1px solid rgba(0,0,0,0.18);
    }


    .brand-fact:nth-child(2) {
        border-right: none;
    }


    .brand-fact:nth-child(3),
    .brand-fact:nth-child(4) {
        border-bottom: none;
    }


    .brand-fact:nth-child(3) {
        padding-left: 0;
    }


    .brand-fact:nth-child(4) {
        padding-right: 0;

        border-right: none;
    }



    /* ------------------------------------------------------
       PRESS
       ------------------------------------------------------ */

    .press-story,
    .press-story--featured,
    .press-story:nth-child(even) {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap: 50px;
    }


    .press-story--featured .press-story-content h2 {
        font-size: clamp(38px, 5vw, 56px);
    }



    /* ------------------------------------------------------
       CONTACT
       ------------------------------------------------------ */

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

        column-gap: 26px;

        row-gap: 70px;
    }


    .contact-person-heading h3 {
        font-size: 24px;
    }


    .contact-person-details a {
        font-size: 12px;
    }


    .contact-company-grid {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(320px, 1.1fr);

        gap: 60px;
    }

}



/* ==========================================================
   RESPONSIVE — ABOUT TIMELINE
   ========================================================== */

@media (max-width: 800px) {

    .timeline-alt::before {
        left: 17px;

        transform: none;
    }


    .timeline-alt-group {
        padding:
            35px
            0
            50px;
    }


    .timeline-alt-year {
        margin:
            0
            0
            30px;

        padding:
            6px
            12px
            6px
            0;

        background: #ffffff;

        font-size: 32px;
    }


    .timeline-alt-entries {
        gap: 40px;
    }


    .timeline-alt-entry {
        display: block;

        padding-left: 55px;
    }


    .timeline-alt-card,
    .timeline-alt-entry.left .timeline-alt-card,
    .timeline-alt-entry.right .timeline-alt-card {
        width: 100%;

        max-width: 520px;

        padding-left: 0;

        padding-right: 0;

        justify-self: auto;
    }


    .timeline-alt-title {
        font-size: 22px;
    }

}



/* ==========================================================
   RESPONSIVE — FOOTER / HEADER
   ========================================================== */

@media (max-width: 700px) {

    .site-header,
    .site-header.light {
        padding: 14px 20px;
    }


    .site-header.is-hidden {
        transform: none !important;
    }


    .logo img {
        max-width: 60vw;
    }


    .menu-toggle {
        flex-shrink: 0;
    }


    .footer-inner {
        padding:
            80px
            20px
            28px;
    }


    .footer-top {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 55px 30px;

        padding-bottom: 75px;
    }


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


    .footer-statement {
        margin-top: 40px;

        max-width: 340px;

        font-size: clamp(34px, 11vw, 48px);
    }


    .footer-contact {
        grid-column: 1 / -1;
    }


    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

        padding-top: 24px;
    }

}



/* ==========================================================
   RESPONSIVE — MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .home-container {
        padding-left: 20px;

        padding-right: 20px;
    }



    /* ------------------------------------------------------
       HOME HERO
       ------------------------------------------------------ */

    .home-page .hero {
        min-height: 100svh;

        padding:
            120px
            20px
            40px;

        background-position: center center;
    }


    .home-page .hero-content {
        max-width: 100%;
    }


    .home-page .hero h1 {
        margin-bottom: 28px;

        font-size: clamp(58px, 19vw, 92px);

        line-height: 0.84;

        letter-spacing: -0.06em;
    }


    .home-page .hero-lead {
        max-width: 330px;

        font-size: 15px;

        line-height: 1.55;
    }



    /* ------------------------------------------------------
       HOME SECTIONS
       ------------------------------------------------------ */

    .home-intro,
    .home-brands,
    .home-statement,
    .home-areas,
    .home-news {
        padding-top: 90px;

        padding-bottom: 90px;
    }



    /* ------------------------------------------------------
       MAIN HEADINGS
       ------------------------------------------------------ */

    .home-display-heading {
        font-size: clamp(40px, 13vw, 58px);

        line-height: 0.96;
    }



    /* ------------------------------------------------------
       HOME INTRO
       ------------------------------------------------------ */

    .home-intro-copy {
        margin-top: 55px;

        margin-left: 0;

        margin-right: 0;
    }


    .home-intro-copy p,
    .home-brands-header > p,
    .home-news-feature p,
    .brands-intro-copy p,
    .about-intro-copy p,
    .press-intro-copy p,
    .contact-intro-copy p {
        font-size: 15px;

        line-height: 1.7;
    }



    /* ------------------------------------------------------
       HOME BRANDS
       ------------------------------------------------------ */

    .home-brands {
        padding-bottom: 100px;
    }


    .home-brands-header {
        gap: 45px;

        margin-bottom: 65px;
    }



    /* ------------------------------------------------------
       SHARED BRAND GRID
       ------------------------------------------------------ */

    .brand-grid {
        grid-template-columns: 1fr;

        row-gap: 65px;
    }


    .brand-card {
        grid-template-rows:
            160px
            auto;
    }


    .brand-card-logo {
        height: 160px;

        padding:
            15px
            20px;
    }


    .brand-card-logo img {
        max-width: min(240px, 82%);

        max-height: 75px;
    }


    .brand-card-bottom {
        min-height: 82px;

        gap: 20px;

        padding-top: 20px;
    }


    .brand-card-bottom p {
        font-size: 13px;

        line-height: 1.55;
    }


    .brand-card-arrow {
        width: 20px;
        height: 20px;
    }



    /* ------------------------------------------------------
       LEGACY BRAND ROWS
       ------------------------------------------------------ */

    .brand-row {
        min-height: 105px;

        grid-template-columns:
            1fr
            25px;

        gap: 16px;
    }


    .brand-row:hover {
        padding-left: 0;

        padding-right: 0;
    }


    .brand-row-logo {
        height: 55px;
    }


    .brand-row-logo img {
        max-width: 175px;

        max-height: 45px;
    }


    .brand-row-arrow {
        font-size: 18px;
    }



    /* ------------------------------------------------------
       HOME STATEMENT
       ------------------------------------------------------ */

    .home-eyebrow {
        margin-bottom: 25px;

        font-size: 14px;
    }



    /* ------------------------------------------------------
       HOME AREAS
       ------------------------------------------------------ */

    .home-area-list {
        width: 100%;

        margin-top: 60px;
    }


    .home-area-item {
        min-height: 78px;
    }


    .home-area-item strong {
        font-size: 24px;
    }



    /* ------------------------------------------------------
       HOME NEWS
       ------------------------------------------------------ */

    .home-news-feature {
        margin-top: 55px;

        margin-left: 0;

        margin-right: 0;
    }


    .home-news-feature h3 {
        font-size: clamp(34px, 10vw, 48px);

        line-height: 0.98;
    }



    /* ------------------------------------------------------
       HOME END
       ------------------------------------------------------ */

    .home-end {
        padding-top: 120px;

        padding-bottom: 120px;
    }


    .home-end h2 {
        font-size: clamp(58px, 18vw, 92px);

        line-height: 0.86;
    }


    .home-end p {
        margin-top: 30px;
    }



    /* ------------------------------------------------------
       SHARED PAGE HERO
       ------------------------------------------------------ */

    .brands-hero,
    .brand-detail-hero,
    .about-detail-hero,
    .press-hero,
    .contact-hero {
        min-height: 520px;

        background-position: center center;
    }


    .brands-hero-inner,
    .brand-detail-hero-inner,
    .about-detail-hero-inner,
    .press-hero-inner,
    .contact-hero-inner {
        padding-top: 120px;

        padding-bottom: 45px;
    }


    .brands-hero h1,
    .brand-detail-hero h1,
    .about-detail-hero h1,
    .press-hero h1,
    .contact-hero h1 {
        font-size: clamp(54px, 17vw, 78px);

        line-height: 0.92;
    }



    /* ------------------------------------------------------
       SHARED PAGE INTRO / END
       ------------------------------------------------------ */

    .brands-intro,
    .about-intro,
    .press-intro,
    .contact-intro {
        padding-top: 90px;

        padding-bottom: 95px;
    }


    .brands-intro-copy,
    .about-intro-copy,
    .press-intro-copy,
    .contact-intro-copy {
        margin-top: 50px;

        margin-left: 0;

        margin-right: 0;
    }


    .brands-end,
    .brand-detail-end,
    .about-end,
    .press-end,
    .contact-end {
        padding-top: 110px;

        padding-bottom: 110px;
    }


    .brands-end h2,
    .brand-detail-end h2,
    .about-end h2,
    .press-end h2,
    .contact-end h2 {
        font-size: clamp(48px, 15vw, 72px);

        line-height: 0.94;
    }



    /* ------------------------------------------------------
       BRANDS
       ------------------------------------------------------ */

    .brands-portfolio {
        padding-top: 90px;

        padding-bottom: 105px;
    }


    .brands-portfolio .brand-grid {
        row-gap: 65px;
    }



    /* ------------------------------------------------------
       BRAND DETAIL
       ------------------------------------------------------ */

    .brand-detail-kicker {
        margin-bottom: 14px;

        font-size: 10px;
    }


    .brand-detail-intro {
        padding-top: 90px;

        padding-bottom: 95px;
    }


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

        gap: 65px;
    }


    .brand-detail-logo {
        min-height: 150px;

        justify-content: flex-start;
    }


    .brand-detail-logo img {
        max-width: min(260px, 80%);

        max-height: 85px;
    }


    .brand-detail-copy {
        max-width: 100%;
    }


    .brand-detail-copy h2 {
        margin-bottom: 32px;

        font-size: clamp(40px, 12vw, 58px);

        line-height: 0.98;
    }


    .brand-detail-copy p {
        font-size: 15px;

        line-height: 1.7;
    }


    .brand-detail-facts {
        padding-top: 80px;

        padding-bottom: 80px;
    }


    .brand-facts-grid {
        grid-template-columns: 1fr;
    }


    .brand-fact,
    .brand-fact:first-child,
    .brand-fact:nth-child(2),
    .brand-fact:nth-child(3),
    .brand-fact:nth-child(4),
    .brand-fact:last-child {
        min-height: 0;

        padding:
            28px
            0
            32px;

        border-right: none;

        border-bottom: 1px solid rgba(0,0,0,0.18);
    }


    .brand-fact:last-child {
        border-bottom: none;
    }


    .brand-fact-label {
        margin-bottom: 20px;
    }


    .brand-fact strong {
        font-size: 24px;
    }


    .brand-fact strong > a .brand-card-arrow--inline {
        width: 20px;
        height: 20px;
    }



    /* ------------------------------------------------------
       ABOUT
       ------------------------------------------------------ */

    .about-history-intro {
        padding-top: 95px;

        padding-bottom: 55px;
    }


    .timeline {
        padding-bottom: 110px;
    }



    /* ------------------------------------------------------
       PRESS
       ------------------------------------------------------ */

    .press-archive {
        padding-top: 90px;

        padding-bottom: 105px;
    }


    .press-story,
    .press-story--featured,
    .press-story:nth-child(even) {
        display: flex;

        flex-direction: column;

        gap: 38px;

        padding:
            65px
            0;
    }


    .press-story:first-child {
        padding-top: 0;
    }


    .press-story:nth-child(even) .press-story-media,
    .press-story:nth-child(even) .press-story-content {
        grid-column: auto;

        grid-row: auto;
    }


    .press-story-media {
        order: 1;
    }


    .press-story-content {
        order: 2;

        max-width: 100%;

        padding-top: 0;
    }


    .press-story-content h2,
    .press-story--featured .press-story-content h2 {
        margin-bottom: 25px;

        font-size: clamp(30px, 9vw, 42px);

        line-height: 1.04;
    }


    .press-story-content p {
        font-size: 15px;

        line-height: 1.7;
    }


    .press-story-meta {
        margin-bottom: 20px;
    }


    .press-story--text-only .press-story-content {
        margin: 0;
    }


    .press-story-media--video {
        min-height: 260px;
    }


    .press-quote {
        margin-top: 32px;

        padding-top: 24px;
    }


    .press-quote p {
        font-size: 20px;

        line-height: 1.5;
    }



    /* ------------------------------------------------------
       CONTACT PEOPLE
       ------------------------------------------------------ */

    .contact-people {
        padding-top: 90px;

        padding-bottom: 105px;
    }


    .contact-people-header {
        margin-bottom: 65px;
    }


    .contact-people-grid {
        grid-template-columns: 1fr;

        row-gap: 70px;
    }


    .contact-person-photo {
        aspect-ratio: 4 / 5;
    }


    .contact-person-info {
        padding-top: 20px;
    }


    .contact-person-heading h3 {
        font-size: 30px;
    }


    .contact-person-title {
        margin-bottom: 20px;
    }


    .contact-person-details {
        gap: 5px;
    }


    .contact-person-details a {
        font-size: 13px;
    }



    /* ------------------------------------------------------
       CONTACT COMPANY
       ------------------------------------------------------ */

    .contact-company {
        padding-top: 90px;

        padding-bottom: 95px;
    }


    .contact-company-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    .contact-company-heading h2 {
        font-size: clamp(44px, 13vw, 62px);

        line-height: 0.96;
    }


    .contact-company-item {
        grid-template-columns: 1fr;

        gap: 16px;

        padding:
            24px
            0;
    }



    /* ------------------------------------------------------
       CONTACT MAP
       ------------------------------------------------------ */

    .contact-map-section {
        padding-top: 70px;

        padding-bottom: 90px;
    }


    .contact-map {
        height: 390px;
    }

}



/* ==========================================================
   RESPONSIVE — SMALL MOBILE
   ========================================================== */

@media (max-width: 450px) {

    .home-container {
        padding-left: 24px;

        padding-right: 24px;
    }


    .home-page .hero {
        padding-left: 24px;

        padding-right: 24px;
    }


    .brands-hero-inner,
    .brand-detail-hero-inner,
    .about-detail-hero-inner,
    .press-hero-inner,
    .contact-hero-inner {
        padding-left: 24px;

        padding-right: 24px;
    }


    .footer-inner {
        padding-left: 24px;

        padding-right: 24px;
    }


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


    .footer-brand,
    .footer-contact {
        grid-column: auto;
    }


    .contact-map {
        height: 340px;
    }

}