:root {
    --ink: #101622;
    --midnight: #070d1b;
    --steel: #5f6672;
    --paper: #f6f6f4;
    --line: #e4e2de;
    --gold: #c49a65;
    --orange: #e8723d;
    --soft: #eceae6;
    --white: #ffffff
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--white);
    font-family: "Trebuchet MS", "Gill Sans", sans-serif
}

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

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

body>main {
    padding-top: 66px
}

body>main:has(.hero:first-child) {
    padding-top: 0
}

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 10;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 66px;
    column-gap: clamp(58px, 5vw, 82px);
    padding: 0 32px;
    color: var(--white);
    font-size: 13px;
    transition: box-shadow 0.3s ease
}

.site-header.scrolled {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    background: #ffffff;
    backdrop-filter: none;
    color: var(--ink)
}

.site-header.scrolled .main-nav a,
.site-header.scrolled .nav-item>a {
    color: var(--ink);
    opacity: 0.8
}

.site-header.scrolled .nav-item>a:hover,
.site-header.scrolled .nav-item>a[aria-current="page"] {
    color: var(--orange);
    opacity: 1
}

.brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    transform: none;
    gap: 9px;
    font-weight: 800;
    letter-spacing: 0
}

.brand-logo {
    width: 128px;
    height: auto;
    filter: drop-shadow(0 2px 6px rgb(0 0 0 / 32%))
}

.main-nav {
    display: flex;
    justify-self: center;
    justify-content: center;
    gap: clamp(18px, 2.4vw, 34px)
}

.nav-item {
    position: relative;
    display: inline-block
}

.nav-item>a {
    opacity: .86;
    font-size: 19px
}

.nav-item>a:hover,
.nav-item>a[aria-current="page"] {
    color: #ffd19c;
    opacity: 1
}

.submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    margin-top: 8px;
    padding: 12px 0;
    background: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: all 0.3s ease;
    z-index: 100
}

.nav-item:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0)
}

.submenu a {
    display: block;
    padding: 10px 20px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease
}

.submenu a:hover {
    background: #fff3ec;
    color: #f05f2d;
    padding-left: 24px
}

.main-nav a {
    opacity: .86;
    font-size: 19px;
    white-space: nowrap
}

.hero {
    position: relative;
    display: grid;
    place-items: center;
    height: 66vh;
    min-height: 520px;
    overflow: hidden;
    color: var(--white);
    background: radial-gradient(circle at 50% 78%, rgb(201 165 117 / 23%), transparent 20%), radial-gradient(circle at 50% 0%, #182239, var(--midnight) 72%)
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(6 9 18 / 30%), rgb(6 9 18 / 0) 45%, rgb(6 9 18 / 42%))
}

.hero-copy {
    position: relative;
    z-index: 2;
    align-self: start;
    padding-top: clamp(140px, 12vw, 220px);
    text-align: center
}

.hero-copy h1,
.strip-copy h2,
.tile-copy h2,
.techniques h2,
.process h2 {
    margin: 0;
    line-height: 1;
    letter-spacing: 0
}

.hero-copy h1 {
    color: #ddbd8f;
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 800;
    letter-spacing: 2px
}

.hero-copy p {
    margin: 18px 0 22px;
    font-size: clamp(20px, 2.4vw, 32px);
    font-weight: 800
}

.tagline {
    margin: 0 0 16px 0
}

.subtitle {
    color: white;
    font-size: clamp(16px, 1.8vw, 24px);
    font-weight: 600
}

.button-row,
.micro-links {
    display: flex;
    justify-content: center;
    gap: 10px
}

.button-row a,
.micro-links a {
    border: 1px solid rgb(255 255 255 / 48%);
    border-radius: 999px;
    background: rgb(255 255 255 / 10%);
    backdrop-filter: blur(8px)
}

.button-row a {
    padding: 7px 15px;
    font-size: 11px
}

.hero-slides,
.hero-slide {
    position: absolute;
    inset: 0
}

.hero-slides {
    z-index: 0;
    overflow: hidden
}

.hero-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 75%;
    transform: translateY(24px) scale(1.06);
    opacity: 0;
    transition: opacity 950ms ease
}

.hero-slide.is-active {
    opacity: 1
}

@media (prefers-reduced-motion:reduce) {
    .hero-slide {
        transition: none
    }
}

.slide-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 48px;
    height: 72px;
    border: 0;
    color: rgb(255 255 255 / 86%);
    background: rgb(3 9 21 / 18%);
    border-radius: 2px;
    font-size: 58px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 180ms ease, color 180ms ease
}

.slide-arrow:hover {
    color: var(--white);
    background: rgb(3 9 21 / 34%)
}

.slide-arrow-left {
    left: 20px
}

.slide-arrow-right {
    right: 20px
}

.home-proof {
    position: relative;
    z-index: 4;
    margin-top: -34px;
    padding: 0 36px 44px;
    background: linear-gradient(180deg, rgb(255 255 255 / 0), var(--white) 34%)
}

.home-proof-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1280px;
    margin: 0 auto;
    padding: 36px 0 34px;
    background: var(--white);
    box-shadow: 0 22px 70px rgb(16 22 34 / 11%)
}

.proof-item {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    min-height: 184px;
    padding: 24px clamp(18px, 3vw, 50px) 0;
    color: var(--steel);
    text-align: center
}

.proof-item+.proof-item {
    border-left: 1px solid #d9dce2
}

.proof-item strong {
    display: block;
    min-height: 45px;
    margin-bottom: 12px;
    color: #f19700;
    font-size: clamp(27px, 2.7vw, 42px);
    line-height: 1;
    font-weight: 900
}

.proof-item h2 {
    margin: 0 0 17px;
    color: #ff9400;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase
}

.proof-item p {
    max-width: 250px;
    margin: 0;
    color: #566173;
    font-size: 16px;
    line-height: 1.55
}

.home-body {
    --home-orange: #f0b35f;
    --home-orange-soft: #ffd08a
}

.home-body .hero {
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.2fr);
    align-items: center;
    place-items: stretch;
    height: max(520px, calc(100vh - 192px));
    min-height: 520px;
    padding: 96px clamp(36px, 5vw, 90px) 34px;
    background: #071427
}

.home-body .hero::before {
    content: none
}

.home-body .hero-copy {
    align-self: center;
    justify-self: start;
    max-width: 780px;
    padding-top: 0;
    text-align: left;
    transform: translateX(clamp(42px, 5vw, 96px))
}

.home-body .hero-copy h1 {
    color: var(--home-orange);
    font-size: clamp(88px, 9.2vw, 156px);
    line-height: 0.92;
    letter-spacing: 0;
    text-shadow: 0 15px 38px rgb(0 0 0 / 38%)
}

.home-body .hero-copy p {
    margin: 10px 0 30px;
    color: var(--home-orange);
    font-size: clamp(31px, 3vw, 50px);
    line-height: 1.05;
    font-weight: 700;
    white-space: nowrap
}

.home-body .hero-copy strong {
    display: block;
    position: relative;
    margin: 0 0 14px;
    padding-top: 28px;
    color: var(--home-orange);
    font-size: clamp(18px, 1.55vw, 25px);
    letter-spacing: 0
}

.home-body .hero-copy strong::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 72px;
    height: 2px;
    background: var(--home-orange)
}

.home-body .hero-copy small {
    display: block;
    max-width: 440px;
    margin-bottom: 34px;
    color: rgb(255 232 201 / 88%);
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.55
}

.home-body .button-row {
    justify-content: flex-start;
    gap: 18px
}

.home-body .button-row a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 28px;
    border-color: rgb(240 179 95 / 72%);
    color: var(--home-orange-soft);
    background: transparent;
    font-size: 13px;
    font-weight: 800
}

.home-body .button-row a:first-child {
    color: #1b1820;
    background: linear-gradient(135deg, #ffd08a, #d99a45);
    border-color: transparent
}

.home-body .hero-slides {
    inset: 0;
    z-index: 0
}

.home-body .hero-slide {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: none
}

.home-body .slide-arrow {
    z-index: 4;
    display: grid;
    width: 32px;
    height: 56px;
    color: rgb(240 179 95 / 88%);
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 44px
}

.home-body .slide-arrow:hover {
    color: #ffb86a;
    background: transparent
}

.home-body .home-proof {
    margin-top: 0;
    padding: 0 clamp(28px, 4.8vw, 72px) 36px;
    background: #081426
}

.home-body .home-proof-track {
    max-width: 1420px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-top: 1px solid rgb(218 186 133 / 16%);
    border-bottom: 1px solid rgb(218 186 133 / 10%)
}

.home-body .proof-item {
    position: relative;
    grid-template-columns: 58px minmax(0, 1fr);
    justify-items: start;
    align-content: center;
    align-items: start;
    min-height: 156px;
    padding: 34px clamp(22px, 2.8vw, 48px);
    text-align: left
}

.home-body .proof-item::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: start;
    justify-self: center;
    width: 44px;
    height: 44px;
    margin-top: 3px;
    border: 1px solid rgb(240 179 95 / 42%);
    border-radius: 50%;
    background: rgb(240 179 95 / 10%);
    box-shadow: inset 0 0 0 5px rgb(240 179 95 / 5%)
}

.home-body .proof-item::after {
    content: "";
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: start;
    justify-self: center;
    width: 44px;
    height: 44px;
    margin-top: 3px;
    background: var(--home-orange);
    transform: scale(0.58);
    transform-origin: center;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat
}

.home-body .proof-item:nth-child(1)::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h2v2h6V2h2v2h2.5A2.5 2.5 0 0 1 22 6.5v13A2.5 2.5 0 0 1 19.5 22h-15A2.5 2.5 0 0 1 2 19.5v-13A2.5 2.5 0 0 1 4.5 4H7V2Zm13 8H4v9.5c0 .28.22.5.5.5h15a.5.5 0 0 0 .5-.5V10ZM4.5 6a.5.5 0 0 0-.5.5V8h16V6.5a.5.5 0 0 0-.5-.5h-15Zm3 6h3v3h-3v-3Zm5 0h3v3h-3v-3Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h2v2h6V2h2v2h2.5A2.5 2.5 0 0 1 22 6.5v13A2.5 2.5 0 0 1 19.5 22h-15A2.5 2.5 0 0 1 2 19.5v-13A2.5 2.5 0 0 1 4.5 4H7V2Zm13 8H4v9.5c0 .28.22.5.5.5h15a.5.5 0 0 0 .5-.5V10ZM4.5 6a.5.5 0 0 0-.5.5V8h16V6.5a.5.5 0 0 0-.5-.5h-15Zm3 6h3v3h-3v-3Zm5 0h3v3h-3v-3Z'/%3E%3C/svg%3E")
}

.home-body .proof-item:nth-child(2)::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 2 9 4.5v11L12 22l-9-4.5v-11L12 2Zm0 2.24L5.24 7.62 12 11l6.76-3.38L12 4.24ZM5 9.24v7.03l6 3v-7.03l-6-3Zm14 0-6 3v7.03l6-3V9.24ZM7.45 6.52 14.2 9.9l2.35-1.18-6.75-3.37-2.35 1.17Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 2 9 4.5v11L12 22l-9-4.5v-11L12 2Zm0 2.24L5.24 7.62 12 11l6.76-3.38L12 4.24ZM5 9.24v7.03l6 3v-7.03l-6-3Zm14 0-6 3v7.03l6-3V9.24ZM7.45 6.52 14.2 9.9l2.35-1.18-6.75-3.37-2.35 1.17Z'/%3E%3C/svg%3E")
}

.home-body .proof-item:nth-child(3)::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2 4 5.2v6.15c0 5.05 3.33 8.88 8 10.65 4.67-1.77 8-5.6 8-10.65V5.2L12 2Zm0 2.16 6 2.4v4.79c0 3.89-2.34 6.91-6 8.5-3.66-1.59-6-4.61-6-8.5V6.56l6-2.4Zm4.24 5.18-5.32 5.32-2.32-2.32-1.42 1.42 3.74 3.74 6.74-6.74-1.42-1.42Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2 4 5.2v6.15c0 5.05 3.33 8.88 8 10.65 4.67-1.77 8-5.6 8-10.65V5.2L12 2Zm0 2.16 6 2.4v4.79c0 3.89-2.34 6.91-6 8.5-3.66-1.59-6-4.61-6-8.5V6.56l6-2.4Zm4.24 5.18-5.32 5.32-2.32-2.32-1.42 1.42 3.74 3.74 6.74-6.74-1.42-1.42Z'/%3E%3C/svg%3E")
}

.home-body .proof-item:nth-child(4)::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h10v3h4v2.5c0 2.8-1.86 5.16-4.41 5.93A5.03 5.03 0 0 1 13 17.9V20h4v2H7v-2h4v-2.1a5.03 5.03 0 0 1-3.59-3.47A6.22 6.22 0 0 1 3 8.5V6h4V3Zm2 2v7.5a3 3 0 1 0 6 0V5H9ZM5 8v.5c0 1.52.8 2.86 2 3.62V8H5Zm12 0v4.12a4.2 4.2 0 0 0 2-3.62V8h-2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h10v3h4v2.5c0 2.8-1.86 5.16-4.41 5.93A5.03 5.03 0 0 1 13 17.9V20h4v2H7v-2h4v-2.1a5.03 5.03 0 0 1-3.59-3.47A6.22 6.22 0 0 1 3 8.5V6h4V3Zm2 2v7.5a3 3 0 1 0 6 0V5H9ZM5 8v.5c0 1.52.8 2.86 2 3.62V8H5Zm12 0v4.12a4.2 4.2 0 0 0 2-3.62V8h-2Z'/%3E%3C/svg%3E")
}

.home-body .proof-item+.proof-item {
    border-left: 1px solid rgb(218 186 133 / 20%)
}

.home-body .proof-item strong {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    margin: 0 0 4px;
    color: var(--home-orange);
    font-size: clamp(28px, 2.35vw, 44px);
    letter-spacing: 0;
    text-transform: uppercase
}

.home-body .proof-item h2 {
    grid-column: 2;
    grid-row: 2;
    margin: 0 0 10px;
    color: var(--home-orange);
    font-size: 14px;
    letter-spacing: 0
}

.home-body .proof-item p {
    grid-column: 2;
    grid-row: 3;
    max-width: 280px;
    color: rgb(255 232 201 / 74%);
    font-size: 13px;
    line-height: 1.5
}

.feature-strip {
    position: relative;
    display: grid;
    place-items: center;
    height: calc(100vw / 3.2);
    min-height: 360px;
    overflow: hidden;
    border-top: 10px solid var(--white)
}

.feature-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 20%, rgb(255 255 255 / 35%), transparent 34%)
}

.perfume {
    background: #d4bd9b
}

.product-range {
    background: #9a7a66;
    padding: 0 80px;
    max-width: 100%
}

.product-range .strip-copy {
    max-width: 700px;
    padding: 0 30px
}

.product-range>img {
    width: 100%;
    max-width: 100%;
    object-fit: cover
}

.strip-copy {
    position: absolute;
    top: clamp(42px, 4.4vw, 78px);
    z-index: 2;
    color: var(--white);
    text-align: center;
    text-shadow: 0 1px 2px rgb(0 0 0 / 18%)
}

.strip-copy span,
.tile-copy span {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    opacity: .86
}

.strip-copy h2 {
    font-size: clamp(36px, 3.8vw, 52px);
    font-weight: 900
}

.strip-copy p {
    margin: 5px 0 10px;
    font-size: 17px;
    font-weight: 700
}

.feature-strip .strip-copy span {
    font-size: 15px
}

.feature-strip .strip-copy h2 {
    font-size: clamp(44px, 4.7vw, 66px)
}

.feature-strip .strip-copy p {
    margin: 8px 0 14px;
    font-size: 21px
}

.feature-strip .micro-links {
    gap: 14px
}

.micro-links a {
    padding: 8px 18px;
    min-width: 96px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2
}

.feature-strip>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center bottom
}

.product-range>img {
    width: 100%;
    max-height: none;
    object-position: center bottom
}

.holiday-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    gap: 20px;
    padding: 40px clamp(24px, 8vw, 180px);
    background: linear-gradient(180deg, #fbfaf7 0%, #eef2f1 100%)
}

.holiday-grid article {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    min-height: 0;
    overflow: hidden;
    background: radial-gradient(circle at 50% 76%, rgb(207 194 176 / 22%), transparent 20%), linear-gradient(135deg, #fcfbf8 0%, #f4f6f5 48%, #ebe8e2 100%);
    border: 1px solid rgb(25 31 42 / 7%);
    border-radius: 12px;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease
}

.holiday-grid article:hover {
    border-color: rgb(196 154 101 / 28%);
    box-shadow: none;
    transform: translateY(-4px)
}

.tile-copy {
    position: absolute;
    top: clamp(26px, 3.1vw, 48px);
    z-index: 2;
    width: 92%;
    color: #151b27;
    text-align: center
}

.tile-copy h2 {
    font-size: clamp(32px, 3.5vw, 50px);
    font-weight: 800;
    line-height: 0.94;
    letter-spacing: 0.015em
}

.tile-copy p {
    max-width: 520px;
    margin: 9px auto 15px;
    color: #2f3745;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45
}

.tile-copy span {
    display: none
}

.tile-copy .micro-links a {
    border-color: transparent;
    background: transparent;
    color: #161d2a;
    font-size: 24px;
    font-weight: 700
}

.holiday-grid article img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: center center
}

.techniques {
    position: relative;
    padding: 30px 0 66px;
    background: var(--white);
    text-align: center
}

.techniques h2 {
    margin-bottom: 18px;
    font-size: clamp(23px, 2.4vw, 31px)
}

.technique-carousel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%
}

.carousel-arrow {
    position: absolute;
    z-index: 10;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    font-size: 28px;
    font-weight: bold;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.3s ease
}

.carousel-arrow:hover {
    background: var(--white);
    transform: scale(1.05)
}

.carousel-prev {
    left: 20px
}

.carousel-next {
    right: 20px
}

.carousel-track {
    display: flex;
    gap: 14px;
    width: 100%;
    transform: translateX(0);
    transition: transform 0.5s ease-in-out
}

.carousel-track figure {
    flex-shrink: 0;
    width: calc((100% - 28px) / 3);
    margin: 0;
    overflow: hidden;
    background: var(--soft);
    aspect-ratio: 16 / 9
}

.carousel-track img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 18px
}

.carousel-dots span {
    width: 27px;
    height: 5px;
    cursor: pointer;
    background: #e3e0dc;
    border-radius: 10px;
    transition: background 0.3s ease
}

.carousel-dots span:hover {
    background: #c4c1bc
}

.carousel-dots .active {
    background: #aaa7a2
}

.process {
    padding: 96px 20px 112px;
    background: var(--white)
}

.process-card {
    max-width: 1110px;
    margin: 0 auto;
    padding: 46px 56px 42px;
    text-align: center;
    border: 1px solid #f0eeea;
    box-shadow: 0 18px 70px rgb(25 35 48 / 6%)
}

.process-logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 20px
}

.process-logo img {
    display: block;
    width: min(260px, 58vw);
    height: auto
}

.process h2 {
    font-family: Georgia, "Times New Roman", serif;
    color: #26304f;
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 400
}

.process h2 span {
    color: var(--orange)
}

.process-card>p {
    margin: 24px 0 42px;
    color: #667083;
    font-size: 14px
}

.process ol {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none
}

.process li {
    position: relative;
    min-width: 0
}

.process li:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    top: 34px;
    right: -16px;
    color: #c8c5c0
}

.process i {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 12px;
    color: var(--orange);
    border: 2px solid #f1c7b3;
    border-radius: 50%;
    font-style: normal;
    font-weight: 900
}

.process strong,
.process small {
    display: block
}

.process strong {
    font-size: 13px
}

.process small {
    margin-top: 5px;
    color: #7b828d;
    font-size: 11px
}

.promise-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 42px
}

.promise-row span {
    padding: 14px 10px;
    color: #26304f;
    border: 1px solid #f0d4c6;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800
}

.site-footer {
    position: relative;
    overflow: hidden;
    padding: 0 48px 70px;
    background: #f1f1f0
}

.site-footer::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -88px;
    z-index: 0;
    width: min(1600px, 96vw);
    height: 360px;
    background: url("data:image/svg+xml,%3Csvg width='1600' height='360' viewBox='0 0 1600 360' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M90 330C430 360 930 300 1510 60' fill='none' stroke='%23e8723d' stroke-opacity='.15' stroke-width='80' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none
}

.footer-arc {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 34px;
    padding: 150px 20px 90px;
    text-align: center
}

.footer-arc::before {
    content: "";
    position: absolute;
    top: -400px;
    left: 50%;
    z-index: -1;
    width: max(1600px, 120vw);
    height: 640px;
    background: #f1f1f0;
    border-radius: 50%;
    transform: translateX(-50%)
}

.footer-arc img {
    width: min(400px, 54vw);
    height: auto
}

.footer-arc p {
    margin: 0;
    color: #5f6671;
    font-size: clamp(24px, 2.8vw, 40px)
}

.footer-top,
.footer-links {
    position: relative;
    z-index: 2;
    display: grid;
    max-width: 1220px;
    margin: 0 auto
}

.footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    padding-bottom: 14px;
    border-bottom: 1px solid #d5d2cd
}

.footer-top h2,
.footer-links h3 {
    margin: 0 0 13px;
    color: #333945;
    font-size: 14px
}

.socials {
    display: flex;
    gap: 12px
}

.socials a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--white);
    border-radius: 8px;
    background: transparent !important;
    font-weight: 900;
    font-size: 0;
    transition: transform 180ms ease, box-shadow 180ms ease
}

.socials a:hover {
    box-shadow: 0 10px 22px rgb(20 22 28 / 14%);
    transform: translateY(-2px)
}

.socials a:nth-child(1) {
    background: #f23c55
}

.socials a:nth-child(2) {
    background: #316fb2
}

.socials a:nth-child(3) {
    background: #d52230
}

.socials a:nth-child(4) {
    background: #111111
}

.socials a:nth-child(5) {
    background: #e22d24
}

.socials a:nth-child(6) {
    background: #111111
}

.socials a::before {
    content: none;
    width: 21px;
    height: 21px;
    background: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat
}

.socials a img {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: contain
}

.socials a[aria-label="Instagram"]::before {
    width: 22px;
    height: 22px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.8 2h8.4A5.8 5.8 0 0 1 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8A5.8 5.8 0 0 1 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2Zm0 2.2a3.6 3.6 0 0 0-3.6 3.6v8.4a3.6 3.6 0 0 0 3.6 3.6h8.4a3.6 3.6 0 0 0 3.6-3.6V7.8a3.6 3.6 0 0 0-3.6-3.6H7.8ZM12 7.4a4.6 4.6 0 1 1 0 9.2 4.6 4.6 0 0 1 0-9.2Zm0 2.2a2.4 2.4 0 1 0 0 4.8 2.4 2.4 0 0 0 0-4.8Zm5-2.9a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.8 2h8.4A5.8 5.8 0 0 1 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8A5.8 5.8 0 0 1 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2Zm0 2.2a3.6 3.6 0 0 0-3.6 3.6v8.4a3.6 3.6 0 0 0 3.6 3.6h8.4a3.6 3.6 0 0 0 3.6-3.6V7.8a3.6 3.6 0 0 0-3.6-3.6H7.8ZM12 7.4a4.6 4.6 0 1 1 0 9.2 4.6 4.6 0 0 1 0-9.2Zm0 2.2a2.4 2.4 0 1 0 0 4.8 2.4 2.4 0 0 0 0-4.8Zm5-2.9a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2Z'/%3E%3C/svg%3E")
}

.socials a[aria-label="LinkedIn"]::before {
    width: 20px;
    height: 20px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.98 3.5A2.48 2.48 0 1 1 0 3.5a2.48 2.48 0 0 1 4.98 0ZM.4 8.1h4.15V24H.4V8.1Zm7.25 0h3.98v2.17h.06c.55-1.05 1.91-2.17 3.94-2.17 4.21 0 4.99 2.77 4.99 6.38V24h-4.15v-8.44c0-2.01-.04-4.6-2.8-4.6-2.81 0-3.24 2.2-3.24 4.46V24H7.65V8.1Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.98 3.5A2.48 2.48 0 1 1 0 3.5a2.48 2.48 0 0 1 4.98 0ZM.4 8.1h4.15V24H.4V8.1Zm7.25 0h3.98v2.17h.06c.55-1.05 1.91-2.17 3.94-2.17 4.21 0 4.99 2.77 4.99 6.38V24h-4.15v-8.44c0-2.01-.04-4.6-2.8-4.6-2.81 0-3.24 2.2-3.24 4.46V24H7.65V8.1Z'/%3E%3C/svg%3E")
}

.socials a[aria-label="Pinterest"]::before {
    width: 22px;
    height: 22px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.04 0C5.4 0 0 5.4 0 12.04c0 4.9 2.93 9.11 7.13 10.98-.1-.84-.18-2.13.04-3.05l1.55-6.58s-.4-.8-.4-1.98c0-1.86 1.08-3.25 2.42-3.25 1.14 0 1.69.86 1.69 1.89 0 1.15-.73 2.86-1.1 4.45-.31 1.33.67 2.41 1.98 2.41 2.37 0 4.2-2.5 4.2-6.12 0-3.2-2.3-5.44-5.59-5.44-3.8 0-6.04 2.85-6.04 5.8 0 1.15.44 2.38 1 3.05.1.13.12.25.09.38l-.37 1.48c-.06.24-.2.29-.45.17-1.67-.78-2.72-3.23-2.72-5.2 0-4.23 3.07-8.12 8.86-8.12 4.65 0 8.27 3.31 8.27 7.75 0 4.62-2.91 8.34-6.96 8.34-1.36 0-2.64-.71-3.08-1.54l-.84 3.2c-.3 1.17-1.12 2.64-1.67 3.54 1.26.39 2.59.6 3.98.6C18.6 24.08 24 18.68 24 12.04S18.68 0 12.04 0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.04 0C5.4 0 0 5.4 0 12.04c0 4.9 2.93 9.11 7.13 10.98-.1-.84-.18-2.13.04-3.05l1.55-6.58s-.4-.8-.4-1.98c0-1.86 1.08-3.25 2.42-3.25 1.14 0 1.69.86 1.69 1.89 0 1.15-.73 2.86-1.1 4.45-.31 1.33.67 2.41 1.98 2.41 2.37 0 4.2-2.5 4.2-6.12 0-3.2-2.3-5.44-5.59-5.44-3.8 0-6.04 2.85-6.04 5.8 0 1.15.44 2.38 1 3.05.1.13.12.25.09.38l-.37 1.48c-.06.24-.2.29-.45.17-1.67-.78-2.72-3.23-2.72-5.2 0-4.23 3.07-8.12 8.86-8.12 4.65 0 8.27 3.31 8.27 7.75 0 4.62-2.91 8.34-6.96 8.34-1.36 0-2.64-.71-3.08-1.54l-.84 3.2c-.3 1.17-1.12 2.64-1.67 3.54 1.26.39 2.59.6 3.98.6C18.6 24.08 24 18.68 24 12.04S18.68 0 12.04 0Z'/%3E%3C/svg%3E")
}

.socials a[aria-label="X"]::before {
    width: 20px;
    height: 20px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.9 2h3.68l-8.04 9.19L24 22h-7.41l-5.8-7.59L4.15 22H.46l8.6-9.83L0 2h7.59l5.24 6.93L18.9 2Zm-1.29 18.1h2.04L6.48 3.8H4.29L17.61 20.1Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.9 2h3.68l-8.04 9.19L24 22h-7.41l-5.8-7.59L4.15 22H.46l8.6-9.83L0 2h7.59l5.24 6.93L18.9 2Zm-1.29 18.1h2.04L6.48 3.8H4.29L17.61 20.1Z'/%3E%3C/svg%3E")
}

.socials a[aria-label="YouTube"]::before {
    width: 24px;
    height: 18px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 28 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.4 3.13A3.5 3.5 0 0 0 24.94.65C22.78.08 14 .08 14 .08S5.22.08 3.06.65A3.5 3.5 0 0 0 .6 3.13C.02 5.32.02 9.9.02 9.9s0 4.58.58 6.77a3.5 3.5 0 0 0 2.46 2.48c2.16.57 10.94.57 10.94.57s8.78 0 10.94-.57a3.5 3.5 0 0 0 2.46-2.48c.58-2.19.58-6.77.58-6.77s0-4.58-.58-6.77ZM11.2 14.02V5.78l7.32 4.12-7.32 4.12Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 28 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.4 3.13A3.5 3.5 0 0 0 24.94.65C22.78.08 14 .08 14 .08S5.22.08 3.06.65A3.5 3.5 0 0 0 .6 3.13C.02 5.32.02 9.9.02 9.9s0 4.58.58 6.77a3.5 3.5 0 0 0 2.46 2.48c2.16.57 10.94.57 10.94.57s8.78 0 10.94-.57a3.5 3.5 0 0 0 2.46-2.48c.58-2.19.58-6.77.58-6.77s0-4.58-.58-6.77ZM11.2 14.02V5.78l7.32 4.12-7.32 4.12Z'/%3E%3C/svg%3E")
}

.socials a[aria-label="TikTok"]::before {
    width: 22px;
    height: 22px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.56 5.15A6.24 6.24 0 0 0 21.2 6.3v3.86a9.76 9.76 0 0 1-5.14-1.49v7.15a6.18 6.18 0 1 1-6.18-6.18c.43 0 .85.04 1.25.13v3.96a2.34 2.34 0 1 0 1.62 2.23V0h3.98c.15 1.96.48 3.54.83 5.15Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.56 5.15A6.24 6.24 0 0 0 21.2 6.3v3.86a9.76 9.76 0 0 1-5.14-1.49v7.15a6.18 6.18 0 1 1-6.18-6.18c.43 0 .85.04 1.25.13v3.96a2.34 2.34 0 1 0 1.62 2.23V0h3.98c.15 1.96.48 3.54.83 5.15Z'/%3E%3C/svg%3E")
}

.footer-email {
    position: relative;
    justify-self: end;
    display: grid;
    grid-template-columns: minmax(0, auto) 58px;
    align-items: center;
    column-gap: 18px;
    width: min(100%, 520px);
    text-align: right
}

.footer-email span {
    grid-column: 1;
    color: #b9bec6;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700
}

.footer-email a {
    grid-column: 1;
    color: #252b35;
    font-size: clamp(26px, 2.3vw, 40px);
    line-height: 1.1;
    font-weight: 900;
    white-space: nowrap
}

.footer-email i {
    grid-column: 2;
    grid-row: 1 / 3;
    position: relative;
    display: block;
    width: 58px;
    height: 58px;
    background: #2d2d2d;
    border-radius: 50%
}

.footer-email i::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='34' height='26' viewBox='0 0 34 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2.5' y='3.5' width='29' height='19' rx='1.5' stroke='white' stroke-width='3'/%3E%3Cpath d='M4 6L17 15L30 6' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 34px 26px no-repeat
}

.footer-email i::after {
    content: none
}

.footer-links {
    grid-template-columns: repeat(5, 1fr);
    gap: 34px;
    padding-top: 32px
}

.footer-links a {
    display: block;
    margin: 0 0 9px;
    color: #666c76;
    font-size: 13px;
    line-height: 1.35
}

@media (max-width:1400px) {
    .site-header {
        grid-template-columns: auto auto;
        column-gap: clamp(34px, 4.5vw, 62px);
        padding-inline: 24px
    }

    .main-nav {
        gap: clamp(14px, 2vw, 24px)
    }

    .main-nav a,
    .nav-item>a {
        font-size: 17px
    }

    .brand {
        transform: none
    }

    .brand-logo {
        width: 116px
    }
}

@media (max-width:1100px) {
    .brand {
        transform: none
    }
}

@media (min-width:901px) and (max-width:1800px) {
    .strip-copy {
        top: clamp(24px, 2.4vw, 40px)
    }

    .feature-strip .strip-copy h2 {
        font-size: clamp(30px, 3.2vw, 46px)
    }

    .feature-strip .strip-copy p {
        margin: 6px 0 10px;
        font-size: clamp(13px, 1.15vw, 16px)
    }

    .feature-strip .micro-links a {
        min-width: 86px;
        padding: 6px 12px;
        font-size: 14px;
        backdrop-filter: none
    }

    .tile-copy {
        top: clamp(18px, 1.8vw, 30px)
    }

    .tile-copy span {
        margin-bottom: 6px;
        font-size: 10px
    }

    .tile-copy h2 {
        font-size: clamp(30px, 2.55vw, 43px);
        line-height: .96
    }

    .tile-copy p {
        max-width: 82%;
        margin: 6px auto 7px;
        font-size: clamp(12px, .95vw, 14px);
        line-height: 1.28
    }

    .tile-copy .micro-links {
        gap: 8px
    }

    .tile-copy .micro-links a {
        min-width: auto;
        padding: 4px 8px;
        background: transparent;
        backdrop-filter: none;
        font-size: 16px
    }
}

@media (min-width:901px) and (max-width:1500px) {
    .tile-copy {
        top: clamp(14px, 1.45vw, 22px);
        width: 90%
    }

    .tile-copy h2 {
        font-size: clamp(24px, 2.55vw, 34px);
        line-height: .96
    }

    .tile-copy p {
        max-width: 78%;
        margin: 4px auto 4px;
        font-size: clamp(10px, .95vw, 12px);
        line-height: 1.18
    }

    .tile-copy .micro-links {
        gap: 7px
    }

    .tile-copy .micro-links a {
        padding: 2px 6px;
        font-size: clamp(10px, 1vw, 12px);
        line-height: 1.1
    }
}

@media (max-width:900px) {
    .site-header {
        position: fixed;
        grid-template-columns: 1fr;
        gap: 11px;
        height: auto;
        padding: 14px 18px;
        background: var(--midnight)
    }

    body>main {
        padding-top: 150px
    }

    body>main:has(.hero:first-child) {
        padding-top: 0
    }

    .brand {
        justify-self: center;
        transform: translateX(0)
    }

    .main-nav {
        flex-wrap: wrap;
        gap: 10px 18px
    }

    .hero {
        height: 470px
    }

    .hero-copy {
        padding-top: 58px
    }

    .hero-slide {
        transform: translateY(12px) scale(1.05)
    }

    .home-proof {
        margin-top: 0;
        padding: 28px 22px 36px;
        background: var(--white)
    }

    .home-proof-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0
    }

    .proof-item {
        min-height: 220px;
        padding: 30px 24px
    }

    .proof-item+.proof-item {
        border-left: 0
    }

    .proof-item:nth-child(2),
    .proof-item:nth-child(4) {
        border-left: 1px solid #d9dce2
    }

    .proof-item:nth-child(n+3) {
        border-top: 1px solid #d9dce2
    }

    .feature-strip {
        height: min(520px, 56vw);
        min-height: 340px
    }

    .strip-copy {
        top: clamp(22px, 3vw, 34px)
    }

    .feature-strip .strip-copy span {
        font-size: 12px
    }

    .feature-strip .strip-copy h2 {
        font-size: clamp(26px, 4.4vw, 40px)
    }

    .feature-strip .strip-copy p {
        margin: 5px 0 8px;
        font-size: 14px
    }

    .feature-strip .micro-links a {
        min-width: 72px;
        padding: 5px 10px;
        font-size: 10px;
        backdrop-filter: none
    }

    .feature-strip>img,
    .product-range>img {
        object-position: center bottom
    }

    .holiday-grid {
        grid-template-columns: 1fr;
        padding: 30px clamp(24px, 8vw, 72px);
        gap: 16px
    }

    .holiday-grid article {
        min-height: 320px
    }

    .tile-copy {
        top: clamp(18px, 2.8vw, 30px)
    }

    .tile-copy h2 {
        font-size: clamp(28px, 5.4vw, 42px)
    }

    .tile-copy p {
        margin: 6px auto 8px;
        font-size: 13px;
        line-height: 1.32
    }

    .tile-copy span {
        margin-bottom: 7px;
        font-size: 10px
    }

    .tile-copy .micro-links {
        gap: 8px
    }

    .tile-copy .micro-links a {
        min-width: auto;
        padding: 4px 8px;
        font-size: 20px;
        backdrop-filter: none
    }

    .process ol,
    .promise-row,
    .footer-top,
    .footer-links {
        grid-template-columns: 1fr
    }

    .process-card {
        padding: 34px 22px
    }

    .process li:not(:last-child)::after {
        content: ""
    }

    .footer-email {
        justify-self: stretch
    }

    .footer-email {
        justify-content: center;
        text-align: center
    }
}

@media (max-width:560px) {
    .site-footer {
        padding-inline: 20px
    }

    .site-footer::after {
        right: -300px;
        bottom: -62px;
        width: 920px;
        height: 230px
    }

    .footer-arc::before {
        top: -250px;
        width: 980px;
        height: 430px
    }

    .holiday-grid {
        padding: 20px 16px;
        gap: 12px
    }

    .holiday-grid article {
        aspect-ratio: 4 / 3;
        min-height: 300px
    }

    .holiday-grid article img {
        height: 100%;
        max-width: none
    }

    .tile-copy {
        top: 16px;
        width: 94%
    }

    .tile-copy span {
        margin-bottom: 5px;
        font-size: 8px;
        letter-spacing: .07em
    }

    .tile-copy h2 {
        font-size: clamp(24px, 8.2vw, 32px);
        line-height: 0.98
    }

    .tile-copy p {
        max-width: 88%;
        margin: 4px auto 5px;
        font-size: 10px;
        line-height: 1.25
    }

    .tile-copy .micro-links {
        gap: 5px
    }

    .tile-copy .micro-links a {
        min-width: auto;
        padding: 2px 5px;
        font-size: 16px
    }

    .home-proof {
        padding-inline: 16px
    }

    .home-proof-track {
        grid-template-columns: 1fr
    }

    .proof-item {
        min-height: auto;
        padding: 28px 18px 32px
    }

    .proof-item:nth-child(2),
    .proof-item:nth-child(4) {
        border-left: 0
    }

    .proof-item+.proof-item {
        border-top: 1px solid #d9dce2
    }

    .proof-item strong {
        min-height: 0
    }

    .footer-email {
        grid-template-columns: 1fr;
        row-gap: 10px;
        justify-items: center
    }

    .footer-email span,
    .footer-email a,
    .footer-email i {
        grid-column: 1
    }

    .footer-email i {
        grid-row: auto
    }
}

@media (max-width:1100px) {
    .home-body .hero {
        grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1fr);
        min-height: max(520px, calc(100vh - 192px));
        padding-inline: 34px
    }

    .home-body .hero-slides {
        inset: 0
    }
}

@media (max-width:900px) {
    .home-body .hero {
        display: grid;
        grid-template-columns: 1fr;
        min-height: 720px;
        height: auto;
        padding: 190px 28px 36px
    }

    .home-body .hero-copy {
        max-width: 620px;
        transform: none
    }

    .home-body .hero-slides {
        inset: 0
    }

    .home-body .hero-slide {
        background-position: 64% center
    }

    .home-body .home-proof {
        padding: 0 22px 28px;
        background: #081426
    }

    .home-body .home-proof-track {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .home-body .proof-item {
        min-height: 150px
    }

    .home-body .proof-item:nth-child(2),
    .home-body .proof-item:nth-child(4) {
        border-left: 1px solid rgb(218 186 133 / 20%)
    }

    .home-body .proof-item:nth-child(n+3) {
        border-top: 1px solid rgb(218 186 133 / 20%)
    }
}

@media (max-width:560px) {
    .home-body .hero {
        min-height: 650px;
        padding: 188px 20px 28px
    }

    .home-body .hero-copy h1 {
        font-size: clamp(50px, 18vw, 72px)
    }

    .home-body .hero-copy p {
        font-size: clamp(22px, 8vw, 31px);
        white-space: normal
    }

    .home-body .hero-copy small {
        max-width: 280px
    }

    .home-body .button-row {
        flex-wrap: wrap
    }

    .home-body .hero-slides {
        inset: 0
    }

    .home-body .home-proof {
        padding: 0 16px 24px
    }

    .home-body .home-proof-track {
        grid-template-columns: 1fr
    }

    .home-body .proof-item,
    .home-body .proof-item:nth-child(2),
    .home-body .proof-item:nth-child(4) {
        border-left: 0
    }

    .home-body .proof-item+.proof-item {
        border-top: 1px solid rgb(218 186 133 / 20%)
    }
}

.design-market {
    position: relative;
    overflow: hidden;
    padding: 62px clamp(24px, 6vw, 112px) 72px;
    background: linear-gradient(180deg, #fbfaf6 0%, #f7f5ee 100%), radial-gradient(circle at 10% 18%, rgb(196 154 101 / 12%), transparent 24%);
    border-top: 1px solid rgb(218 186 133 / 16%)
}

.design-market::before,
.design-market::after {
    content: "";
    position: absolute;
    pointer-events: none
}

.design-market::before {
    inset: 28px auto auto 5%;
    width: 170px;
    height: 170px;
    border: 1px solid rgb(196 154 101 / 13%);
    transform: rotate(30deg)
}

.design-market::after {
    right: 7%;
    bottom: -72px;
    width: 360px;
    height: 180px;
    border-radius: 50%;
    background: rgb(129 154 127 / 8%)
}

.design-market-inner {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    text-align: center
}

.section-kicker {
    margin: 0 0 10px;
    color: #c98234;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase
}

.design-market h2 {
    margin: 0;
    color: #28313d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    font-weight: 400
}

.design-market-lede {
    max-width: 710px;
    margin: 16px auto 34px;
    color: #6c726f;
    font-size: 15px;
    line-height: 1.7
}

.promise-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    text-align: left
}

.promise-card {
    min-width: 0;
    padding: clamp(28px, 3.5vw, 42px);
    border: 1px solid rgb(196 154 101 / 18%);
    border-radius: 8px;
    background: rgb(255 255 255 / 82%);
    box-shadow: 0 18px 48px rgb(16 22 34 / 8%)
}

.promise-card-design {
    color: #f8ead5;
    background: linear-gradient(135deg, #10233b 0%, #071427 100%);
    border-color: rgb(240 179 95 / 28%)
}

.promise-label {
    display: block;
    margin-bottom: 14px;
    color: #d99a45;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase
}

.promise-card h3 {
    margin: 0 0 22px;
    color: #28313d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1;
    font-weight: 400
}

.promise-card-design h3 {
    color: #fff6e9
}

.promise-card ul {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none
}

.promise-card li {
    position: relative;
    padding-left: 30px;
    color: #4f5d59;
    font-size: 14px;
    line-height: 1.45
}

.promise-card-design li {
    color: rgb(255 241 220 / 84%)
}

.promise-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m7.2 11.5 6-6 1.15 1.15-7.15 7.15-3.7-3.7 1.15-1.15 2.55 2.55Z' fill='white'/%3E%3C/svg%3E") center / 14px 14px no-repeat, #6f9284
}

.promise-card-design li::before {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m7.2 11.5 6-6 1.15 1.15-7.15 7.15-3.7-3.7 1.15-1.15 2.55 2.55Z' fill='%23071427'/%3E%3C/svg%3E") center / 14px 14px no-repeat, #f0b35f
}

@media (max-width:900px) {
    .design-market {
        padding: 48px 22px 56px
    }

    .promise-cards {
        grid-template-columns: 1fr
    }
}

@media (max-width:560px) {
    .design-market {
        padding: 42px 16px 46px
    }

    .design-market h2 {
        font-size: 32px
    }

    .design-market-lede {
        margin-bottom: 24px;
        font-size: 14px
    }

    .promise-card {
        padding: 24px 20px
    }

    .promise-card li {
        font-size: 13px
    }
}

.home-body .design-market .section-kicker {
    font-size: 30px;
    text-transform: none
}

.home-body .design-market .section-kicker {
    color: #1f2b31;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(36px, 3.2vw, 52px);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.12;
    text-transform: none
}

.home-body .design-market-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin: 10px 0 62px;
    color: #b88143;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1;
    font-weight: 400
}

.home-body .design-market-subtitle::before,
.home-body .design-market-subtitle::after {
    content: "";
    width: 78px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(196 154 101 / 58%))
}

.home-body .design-market-subtitle::after {
    background: linear-gradient(90deg, rgb(196 154 101 / 58%), transparent)
}

.home-body .promise-cards {
    gap: clamp(34px, 5vw, 58px)
}

.home-body .promise-card {
    position: relative;
    padding: clamp(54px, 4.2vw, 74px) clamp(28px, 3.5vw, 42px) clamp(28px, 3.5vw, 42px)
}

.home-body .promise-icon {
    position: absolute;
    top: -46px;
    left: 50%;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 7px solid rgb(255 255 255 / 82%);
    box-shadow: 0 12px 28px rgb(16 22 34 / 18%);
    transform: translateX(-50%)
}

.home-body .promise-icon::before {
    content: "";
    width: 46px;
    height: 46px;
    background: rgb(255 255 255 / 86%);
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat
}

.home-body .promise-icon-design {
    background: #87966a
}

.home-body .promise-icon-market {
    background: #b88143
}

.home-body .promise-icon-design::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 4 8 16v31l24 13 24-13V16L32 4Zm0 5.6 17.8 8.9L32 27.6 14.2 18.5 32 9.6ZM13 23.2l16.5 8.4v21.2L13 43.9V23.2Zm38 20.7-16.5 8.9V31.6L51 23.2v20.7ZM17.2 18.4 32 11l14.8 7.4L32 26l-14.8-7.6Z'/%3E%3Cpath d='M18 29.8 25.4 34v9.8L18 39.5v-9.7Zm28-1.1v9.8l-7.4 4.2v-9.8L46 28.7Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 4 8 16v31l24 13 24-13V16L32 4Zm0 5.6 17.8 8.9L32 27.6 14.2 18.5 32 9.6ZM13 23.2l16.5 8.4v21.2L13 43.9V23.2Zm38 20.7-16.5 8.9V31.6L51 23.2v20.7ZM17.2 18.4 32 11l14.8 7.4L32 26l-14.8-7.6Z'/%3E%3Cpath d='M18 29.8 25.4 34v9.8L18 39.5v-9.7Zm28-1.1v9.8l-7.4 4.2v-9.8L46 28.7Z'/%3E%3C/svg%3E")
}

.home-body .promise-icon-market::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 17h21v4H6v-4Zm-2 9h26v4H4v-4Zm5 9h17v4H9v-4Zm17-25h16v10h8l10 11v16h-6.2a8 8 0 0 1-15.6 0H28.8a8 8 0 0 1-15.6 0H8v-5h5.2a8 8 0 0 1 15.6 0H34V15h-8v-5Zm13 5v27h.2a8 8 0 0 1 13.6 0H55v-9l-7.2-8H42V15h-3Zm7 10h-4v-5h4v5ZM21 42a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm25 0a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM52 5l-6 10h5l-7 12 14-15h-6l5-7h-5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 17h21v4H6v-4Zm-2 9h26v4H4v-4Zm5 9h17v4H9v-4Zm17-25h16v10h8l10 11v16h-6.2a8 8 0 0 1-15.6 0H28.8a8 8 0 0 1-15.6 0H8v-5h5.2a8 8 0 0 1 15.6 0H34V15h-8v-5Zm13 5v27h.2a8 8 0 0 1 13.6 0H55v-9l-7.2-8H42V15h-3Zm7 10h-4v-5h4v5ZM21 42a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm25 0a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM52 5l-6 10h5l-7 12 14-15h-6l5-7h-5Z'/%3E%3C/svg%3E")
}

@media (max-width:900px) {
    .home-body .design-market .section-kicker {
        font-size: clamp(30px, 7vw, 40px)
    }

    .home-body .design-market-subtitle {
        margin-bottom: 58px
    }

    .home-body .design-market-subtitle::before,
    .home-body .design-market-subtitle::after {
        width: 42px
    }

    .home-body .promise-cards {
        gap: 74px
    }
}

@media (max-width:560px) {
    .home-body .design-market .section-kicker {
        font-size: 29px
    }

    .home-body .design-market-subtitle {
        gap: 10px;
        margin-bottom: 54px;
        font-size: 22px
    }

    .home-body .design-market-subtitle::before,
    .home-body .design-market-subtitle::after {
        width: 24px
    }

    .home-body .promise-card {
        padding: 54px 20px 24px
    }

    .home-body .promise-icon {
        top: -38px;
        width: 76px;
        height: 76px;
        border-width: 6px
    }

    .home-body .promise-icon::before {
        width: 38px;
        height: 38px
    }
}

.home-body .promise-icon-market::before {
    width: 54px;
    height: 54px;
    background: url("/.netlify/images?url=/assets/images/logos/fast.png&w=240&q=85") center / contain no-repeat;
    -webkit-mask: none;
    mask: none
}

.home-body .promise-icon-design {
    background: #b88143
}

.home-body .promise-icon {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none
}

.home-body .promise-icon::before {
    width: 100%;
    height: 100%;
    background: center / contain no-repeat;
    -webkit-mask: none;
    mask: none
}

.home-body .promise-icon-design {
    background: transparent
}

.home-body .promise-icon-market {
    background: transparent
}

.home-body .promise-icon-design::before {
    background-image: url("/.netlify/images?url=/assets/images/logos/true.png&w=240&q=85");
    -webkit-mask: none;
    mask: none
}

.home-body .promise-icon-market::before {
    width: 100%;
    height: 100%;
    background: url("/.netlify/images?url=/assets/images/logos/fast.png&w=240&q=85") center / contain no-repeat;
    -webkit-mask: none;
    mask: none
}

.home-body .promise-card ul {
    gap: 18px
}

.home-body .promise-card li {
    padding-left: 36px;
    font-size: 17px;
    line-height: 1.5
}

.home-body .promise-card li::before {
    top: .16em;
    width: 22px;
    height: 22px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m7.2 11.5 6-6 1.15 1.15-7.15 7.15-3.7-3.7 1.15-1.15 2.55 2.55Z' fill='white'/%3E%3C/svg%3E") center / 16px 16px no-repeat, #6f9284
}

.home-body .promise-card-design li::before,
.home-body .promise-card-market li::before {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m7.2 11.5 6-6 1.15 1.15-7.15 7.15-3.7-3.7 1.15-1.15 2.55 2.55Z' fill='%23071427'/%3E%3C/svg%3E") center / 16px 16px no-repeat, #f0b35f
}

.home-body .home-proof {
    padding-bottom: 0
}

.home-body .promise-card li {
    color: #111111
}

.home-body .promise-card-design li {
    color: #ffffff
}