:root{
  --bg:#050505;
  --surface:#111111;
  --surface-2:#181818;
  --border:rgba(255,255,255,.08);
  --text:#ffffff;
  --muted:rgba(255,255,255,.65);
  --accent:#E65581;
  --radius:30px;
  --max:1400px;
}

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

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  line-height:1.5;
  overflow-x:hidden;
  max-width:100%;
}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font:inherit}

section{
  padding:7rem 0;
}

.max-w-7xl{
  max-width:var(--max);
}

/* HERO */

.hero{
  min-height:90vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
  radial-gradient(circle at top,
  rgba(230,85,129,.18),
  transparent 45%);
  pointer-events:none;
}

.hero h1{
  letter-spacing:-.05em;
}

.hero p{
  color:var(--muted);
}

/* COLLECTIONS */

.collection-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:36px;
  padding:3rem;
  transition:.35s;
}

.collection-card:hover{
  transform:translateY(-8px);
  border-color:var(--accent);
}

.featured{
  background:
  linear-gradient(180deg,#111,#090909);
}

/* =========================================================
PRODUCTS
========================================================= */

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

.product{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:.35s;
}

.product:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 60px rgba(0,0,0,.45);
}

/* Product Images */

.product .mockup,
.aspect-square{
  aspect-ratio:1/1;
  background:#1d1d1d;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#666;
  font-weight:600;
}

/* Product Name */

.product h3{
  font-size:1.2rem;
  line-height:1.25;
}

/* Product Price */

.price{
  color:var(--accent);
  font-size:1.4rem;
  font-weight:700;
}

/* Buttons */

button,
.btn{
  transition:.25s;
}

button:hover,
.btn:hover{
  transform:translateY(-2px);
}

button.bg\[\#E65581\]{
  box-shadow:0 10px 30px #E65581;
}


/* =========================================================
MOBILE
Center final product when there is an odd number
========================================================= */

@media (max-width:767px){

  .products > .product:last-child:nth-child(odd){
    grid-column:1 / -1;
    width:calc(50% - .5rem);
    justify-self:center;
  }

}


/* =========================================================
TABLET / DESKTOP
Return to original larger product layout
========================================================= */

@media (min-width:768px){

  .products{
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:2rem;
  }

  .product h3{
    font-size:1.7rem;
  }

  .price{
    font-size:2rem;
  }

}

/* FAQ */

details{
  transition:.25s;
}

details summary{
  list-style:none;
}

details summary::-webkit-details-marker{
  display:none;
}

/* NEWSLETTER */

input{
  background:#101010;
  border:1px solid var(--border);
  color:white;
}

input:focus{
  outline:none;
  border-color:var(--accent);
}

/* CART */

#cartDrawer{
  transition:right .35s ease;
  box-shadow:-15px 0 40px rgba(0,0,0,.5);
}

/* UTILITIES */

.badge{
  display:inline-block;
  background:var(--accent);
  color:black;
  font-size:.7rem;
  text-transform:uppercase;
  padding:.45rem .8rem;
  border-radius:999px;
  letter-spacing:.2em;
  font-weight:700;
}

/* MOBILE */

@media(max-width:1024px){

.hero{
padding-top:5rem;
}

.hero h1{
font-size:4rem!important;
}

section{
padding:5rem 0;
}

}

@media(max-width:768px){

  .products{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .product{
    width:100%;
    max-width:100%;
    min-width:0;
  }

.hero .grid{
display:block;
}

.hero h1{
font-size:3rem!important;
}

.collection-card{
padding:2rem;
}

}

#mobile-menu{
    width:100%;
    background:#000;
    border-top:1px solid rgba(255,255,255,.1);
}

.size-btn{
    padding:12px 20px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:9999px;
    transition:.2s;
}

.size-btn:hover{
    border-color:#E65581;
}

.size-btn.active{
    background:#E65581;
    color:#000;
    border-color:#E65581;
}

.qty-btn{
    width:46px;
    height:46px;
    border-radius:9999px;
    border:1px solid rgba(255,255,255,.15);
    font-size:24px;
    transition:.2s;
}

.qty-btn:hover{
    border-color:#E65581;
}

/* ========================================
   ANNOUNCEMENT BAR
======================================== */

#announcementBar {
    background: #E65581;
    color: #000;

    position: fixed;
    top: 72px;
    left: 0;
    right: 0;

    z-index: 49;
    width: 100%;

    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

@media (min-width: 768px) {
    #announcementBar {
        top: 80px;
    }
}

#announcementBar .announcement-slide{
    font-size:.95rem;
    font-weight:600;
    letter-spacing:.03em;
    transition:.5s;
}

#announcementBar strong{
    font-weight:800;
}

.hidden{
    display:none;
}
/* ========================================
   HERO BADGES
======================================== */

.hero-badges{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-top:40px;
}

.hero-badges span{
    display:flex;
    align-items:center;
    gap:8px;

    background:#111;

    padding:12px 18px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.08);

    color:rgba(255,255,255,.75);

    transition:.25s;
}

.hero-badges span:hover{

    border-color:#E65581;

    color:white;

    transform:translateY(-3px);

}
/* =========================================================
   FOUNDING FIVE — HONOR ROLL
========================================================= */

.founding-five {
    position: relative;
    overflow: hidden;

    padding: 6rem 1.5rem;

    background: #050505;

    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
}


/* SUBTLE BACKGROUND GLOW */

.founding-five::before {
    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(230,85,129,.07),
            transparent 68%
        );

    pointer-events: none;
}


.founding-five-inner {
    position: relative;
    z-index: 1;

    max-width: 1024px;
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.founding-five-heading {
    text-align: center;
}


.founding-five-eyebrow {
    color: #E65581;

    font-size: .7rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .3em;
}


.founding-five-heading h2 {
    margin-top: 1rem;

    font-size: clamp(2.75rem, 6vw, 4.5rem);

    font-weight: 900;

    line-height: .95;
    letter-spacing: -.045em;
}


.founding-five-intro {
    margin: 1.25rem auto 0;

    max-width: 520px;

    color: rgba(255,255,255,.52);

    font-size: .95rem;
    line-height: 1.7;
}


/* =========================================================
   FOUNDERS
========================================================= */

.founding-five-roll {
    margin-top: 4rem;

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

    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
}


.founding-member {
    position: relative;

    padding: 2rem 1.25rem;

    text-align: center;

    transition:
        background .3s ease,
        transform .3s ease;
}


.founding-member:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,.10);
}


.founding-member:hover {
    background: rgba(255,255,255,.025);
    transform: translateY(-3px);
}


.founding-number {
    display: block;

    margin-bottom: 1.1rem;

    color: #E65581;

    font-size: .65rem;
    font-weight: 900;

    letter-spacing: .2em;
}


.founding-member h3 {
    color: white;

    font-size: 1rem;
    font-weight: 800;

    line-height: 1.2;

    transition: color .25s ease;
}


.founding-member:hover h3 {
    color: #E65581;
}


.founding-member p {
    margin-top: .5rem;

    color: rgba(255,255,255,.35);

    font-size: .7rem;

    text-transform: uppercase;
    letter-spacing: .08em;
}


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

.founding-five-footer {
    margin-top: 1.5rem;

    display: flex;
    align-items: center;
    gap: 1rem;

    color: rgba(255,255,255,.25);

    font-size: .6rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .18em;
}


.founding-five-line {
    flex: 1;

    height: 1px;

    background: rgba(255,255,255,.08);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .founding-five {
        padding: 4.5rem 1.5rem;
    }


    .founding-five-intro {
        font-size: .85rem;
    }


    .founding-five-roll {
        margin-top: 3rem;

        display: block;

        border-bottom: 0;
    }


    .founding-member {
        display: grid;

        grid-template-columns: 42px 1fr;

        align-items: center;

        padding: 1.25rem .25rem;

        text-align: left;

        border-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.10);
    }


    .founding-number {
        margin: 0;

        font-size: .65rem;
    }


    .founding-member h3 {
        font-size: 1rem;
    }


    .founding-member p {
        margin-top: .25rem;
    }


    .founding-five-footer {
        margin-top: 1.5rem;

        justify-content: center;

        font-size: .52rem;
    }


    .founding-five-line {
        display: none;
    }

}
/* ========================================
   MISSION ICONS
======================================== */

#mission .text-5xl{

    transition:.3s;

}

#mission .text-5xl:hover{

    transform:scale(1.1);

}
/* ========================================
   FAQ
======================================== */

#faq details{

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:22px;

    margin-bottom:18px;

}

#faq details:hover{

    border-color:#E65581;

}
/* ========================================
   NEWSLETTER
======================================== */

#newsletter input{

    transition:.3s;

}

#newsletter input:focus{

    box-shadow:0 0 0 4px rgba(230,85,129,.2);

}
@media(max-width:768px){

.founding-card{

padding:28px;

}

.hero-badges{

justify-content:center;

}

#announcementBar{

font-size:.85rem;

}

}

/* =========================================================
FORCE 2-COLUMN PRODUCT GRID ON MOBILE
========================================================= */

@media (max-width: 767px) {

  #essentialsGrid.products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  #essentialsGrid.products > .product {
    width: 100% !important;
    min-width: 0 !important;
  }

  #essentialsGrid.products > .product:last-child:nth-child(odd) {
     grid-column: auto !important;
        width: 100% !important;
        justify-self: stretch !important;
  }

  #essentialsGrid .product h3 {
    font-size: 1.15rem !important;
    line-height: 1.2;
  }

  #essentialsGrid .price {
    font-size: 1.35rem !important;
  }

}

/* =========================================================
   HOLIDAY COLLECTION PRODUCT GRID
========================================================= */

/* Desktop */
/* Desktop */
#holidayGrid.products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#holidayGrid.products > .product {
    width: 100%;
    min-width: 0;
}


/* Mobile */
@media (max-width: 767px) {

    #holidayGrid.products {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem !important;
        width: 100%;
        max-width: 100%;
    }

    #holidayGrid.products > .product {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Fifth product: same width as every other card */
    #holidayGrid.products > .product:last-child:nth-child(odd) {
        grid-column: auto !important;
        width: 100% !important;
        justify-self: stretch !important;
    }

    #holidayGrid .product h3 {
        font-size: 1.15rem !important;
        line-height: 1.2;
    }

    #holidayGrid .price {
        font-size: 1.35rem !important;
    }
}
/* =========================================================
   HOLIDAY COLLECTION VOL. 9 COLORS
========================================================= */

/* VIEW BUTTON */
#holidayGrid .product button {
    background: #1B263B;
    color: #F1E1C3;
    border: 1px solid rgba(241,225,195,.35);
}

#holidayGrid .product button:hover {
    background: #F1E1C3;
    color: #1B263B;
    border-color: #F1E1C3;
}

/* PRICE */
#holidayGrid .price {
    color: #F1E1C3;
}

/* PREORDER BADGE */
#holidayGrid .badge {
    background: #1B263B;
    color: #F1E1C3;
    border: 1px solid rgba(241,225,195,.45);
}
/* =========================================================
   PRODUCT MODAL COLORS
   Essentials = DG Pink
   Holiday Vol. 9 = Navy + Cream
========================================================= */

/* ---------- DEFAULT / ESSENTIALS ---------- */

#productModal .modal-product-price {
    color: #E65581;
}

#productModal .modal-add-cart {
    background: #E65581;
    color: #000;
}

#productModal .modal-thumbnail:hover {
    border-color: #E65581;
}


/* ---------- HOLIDAY COLLECTION VOL. 9 ---------- */

#productModal.holiday-modal .modal-product-price {
    color: #F1E1C3;
}

#productModal.holiday-modal .badge {
    background: #1B263B;
    color: #F1E1C3;
    border: 1px solid rgba(241,225,195,.45);
}

#productModal.holiday-modal .size-btn:hover {
    border-color: #F1E1C3;
}

#productModal.holiday-modal .size-btn.active {
    background: #1B263B;
    color: #F1E1C3;
    border-color: #F1E1C3;
}

#productModal.holiday-modal .qty-btn:hover {
    border-color: #F1E1C3;
}

#productModal.holiday-modal .modal-thumbnail:hover {
    border-color: #F1E1C3;
}

#productModal.holiday-modal .modal-add-cart {
    background: #1B263B;
    color: #F1E1C3;
    border: 1px solid rgba(241,225,195,.35);
}

#productModal.holiday-modal .modal-add-cart:hover {
    background: #F1E1C3;
    color: #1B263B;
}

/* =========================================================
   ESSENTIALS — MATCH HOLIDAY GRID EXACTLY
========================================================= */

@media (min-width: 768px) {

    #essentialsGrid.products {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
        width: 100%;
        max-width: 100%;
    }

    #essentialsGrid.products > .product {
        width: 100%;
        min-width: 0;
    }

}
/* =========================================================
   ALIGN PRODUCT PRICE + VIEW BUTTONS
========================================================= */

/* Make each product card a vertical flex container */
.product {
    display: flex;
    flex-direction: column;
}

/* The content area underneath the product image */
.product > .p-4,
.product > .p-6,
.product > .p-4.md\:p-6 {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Push price + View button to bottom of every card */
.product > div:last-child > .flex.items-center.justify-between {
    margin-top: auto !important;
    padding-top: 1rem;
}

/* Space for fixed header + announcement bar */
body {
    padding-top: 120px;
}

@media (min-width: 768px) {
    body {
        padding-top: 128px;
    }
}

/* =========================================================
   THE VAULT — SHOP ENTRANCE
========================================================= */

.vault-preview {
    padding: 4rem 1.5rem 7rem;
    background: #050505;
}

.vault-preview-inner {
    max-width: 1024px;
    margin: 0 auto;
}

.vault-preview-card {
    position: relative;

    display: block;
    overflow: hidden;

    min-height: 420px;

    padding: 4rem;

    background:
        linear-gradient(
            135deg,
            #111111 0%,
            #090909 55%,
            #050505 100%
        );

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 30px;

    color: white;

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}


/* ---------------------------------------------------------
   HOVER
--------------------------------------------------------- */

.vault-preview-card:hover {
    transform: translateY(-6px);

    border-color: rgba(230,85,129,.55);

    box-shadow:
        0 35px 90px rgba(0,0,0,.55),
        0 0 60px rgba(230,85,129,.08);
}


/* ---------------------------------------------------------
   SUBTLE PINK GLOW
--------------------------------------------------------- */

.vault-preview-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    top: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(230,85,129,.18),
            rgba(230,85,129,.04) 45%,
            transparent 70%
        );

    pointer-events: none;

    transition: transform .6s ease;
}

.vault-preview-card:hover .vault-preview-glow {
    transform: scale(1.15);
}


/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.vault-preview-content {
    position: relative;
    z-index: 2;

    max-width: 620px;
}

.vault-preview-eyebrow {
    color: #E65581;

    font-size: .75rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .3em;
}

.vault-preview h2 {
    margin-top: 1rem;

    font-size: clamp(3.5rem, 8vw, 6.5rem);

    font-weight: 900;

    line-height: .9;
    letter-spacing: -.06em;
}

.vault-preview-tagline {
    margin-top: 1.5rem;

    font-size: 1.4rem;
    font-weight: 700;
}

.vault-preview-description {
    margin-top: 1rem;

    max-width: 540px;

    color: rgba(255,255,255,.58);

    line-height: 1.7;
}


/* ---------------------------------------------------------
   ENTER BUTTON
--------------------------------------------------------- */

.vault-preview-button {
    display: inline-flex;
    align-items: center;
    gap: .75rem;

    margin-top: 2.2rem;

    padding: .9rem 1.4rem;

    background: #E65581;
    color: #050505;

    border-radius: 999px;

    font-size: .8rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .14em;

    transition:
        transform .3s ease,
        background .3s ease;
}

.vault-preview-card:hover .vault-preview-button {
    transform: translateX(5px);
    background: white;
}


/* ---------------------------------------------------------
   GIANT BACKGROUND V
--------------------------------------------------------- */

.vault-preview-mark {
    position: absolute;

    right: 2rem;
    bottom: -4.5rem;

    color: rgba(255,255,255,.025);

    font-size: 22rem;
    font-weight: 900;

    line-height: 1;

    user-select: none;
    pointer-events: none;

    transition:
        color .5s ease,
        transform .6s ease;
}

.vault-preview-card:hover .vault-preview-mark {
    color: rgba(230,85,129,.045);
    transform: translateY(-8px);
}


/* =========================================================
   THE VAULT — MOBILE
========================================================= */

@media (max-width: 767px) {

    .vault-preview {
        padding:
            2.5rem
            1.5rem
            5rem;
    }

    .vault-preview-card {
        min-height: 390px;
        padding: 2.25rem;
        border-radius: 24px;
    }

    .vault-preview h2 {
        font-size: 4rem;
    }

    .vault-preview-tagline {
        font-size: 1.2rem;
    }

    .vault-preview-description {
        font-size: .9rem;
    }

    .vault-preview-button {
        margin-top: 1.8rem;

        padding: .8rem 1.1rem;

        font-size: .7rem;
    }

    .vault-preview-mark {
        right: -1rem;
        bottom: -2rem;

        font-size: 14rem;
    }

}

/* =========================================================
   PRODUCT CARD IMAGE HOVER
========================================================= */

.product-card-image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #111;
}

.product-card-image-primary,
.product-card-image-hover {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        opacity .45s ease,
        transform .65s ease;
}

.product-card-image-primary {
    opacity: 1;
    z-index: 1;
}

.product-card-image-hover {
    opacity: 0;
    z-index: 2;
}


/* HOVER */

/* Only crossfade when a second image actually exists */

.product:hover
.product-card-image.has-hover-image
.product-card-image-primary {
    opacity: 0;
    transform: scale(1.025);
}

.product:hover
.product-card-image.has-hover-image
.product-card-image-hover {
    opacity: 1;
    transform: scale(1.025);
}

/* =========================================================
   DG STUDIOS SHOP — GLOBAL TYPOGRAPHY
========================================================= */

/* ---------------------------------------------------------
   MAJOR SECTION HEADINGS
   Founding Five editorial treatment
--------------------------------------------------------- */

#hero h1,
#holiday h2,
#shop h2,
#story h2,
#founding-five h2,
#faq > div > h2,
#newsletter h2 {
    font-weight: 900 !important;
    line-height: .95;
    letter-spacing: -.045em;
}


/* ---------------------------------------------------------
   HERO — keep it oversized
--------------------------------------------------------- */

#hero h1 {
    letter-spacing: -.055em;
}


/* ---------------------------------------------------------
   SECTION EYEBROWS
--------------------------------------------------------- */

#holiday .uppercase,
#essentials,
#story .uppercase,
.founding-five-eyebrow {
    font-weight: 800;
    letter-spacing: .3em;
}


/* ---------------------------------------------------------
   PRODUCT NAMES
--------------------------------------------------------- */

.product h3 {
    font-weight: 800;
    letter-spacing: -.025em;
}


/* ---------------------------------------------------------
   PRODUCT PRICES
--------------------------------------------------------- */

.product .price {
    font-weight: 800;
    letter-spacing: -.025em;
}


/* ---------------------------------------------------------
   FAQ
--------------------------------------------------------- */

#faq summary {
    font-weight: 800;
    letter-spacing: -.015em;
}


/* ---------------------------------------------------------
   BODY / SUPPORTING COPY
--------------------------------------------------------- */

#holiday p,
#story p,
#founding-five p,
#faq p,
#newsletter p {
    letter-spacing: -.01em;
}


/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

.product button,
#hero a,
#newsletter button,
.vault-preview-button {
    font-weight: 800;
    letter-spacing: -.01em;
}

/* =========================================================
   HOLIDAY COLLECTION — COUNTDOWN PREVIEW
========================================================= */

#holiday {
    position: relative;
}

#holiday.holiday-preview > .max-w-5xl {
    filter: blur(9px);
    opacity: .32;
    pointer-events: none;
    user-select: none;
}

#holiday.holiday-preview #holidayGrid {
    pointer-events: none;
}

.holiday-countdown-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    background: rgba(5, 5, 5, .3);
}

.holiday-countdown-overlay.hidden {
    display: none;
}

.holiday-countdown-content {
    max-width: 620px;
}

.holiday-countdown-eyebrow {
    color: #F1E1C3;
    text-transform: uppercase;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .25em;
}

.holiday-countdown-content h2 {
    margin: 1.25rem 0;
    font-size: clamp(2.1rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.045em;
}

.holiday-countdown-content p {
    color: rgba(255,255,255,.7);
}

.holiday-countdown-clock {
    margin: 1.5rem 0;
    color: #F1E1C3;
    font-size: clamp(2rem, 7vw, 4.5rem);
    font-weight: 900;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}

.holiday-countdown-content span {
    color: rgba(255,255,255,.55);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .15em;
}

/* =========================================================
   HOLIDAY COUNTDOWN — COLLABORATION LOGO
========================================================= */

.holiday-countdown-logo {
    display: block;
    width: 260px;
    max-width: 85%;
    height: auto;
    object-fit: contain;
    margin: 0 auto 1.5rem;
}

@media (max-width: 767px) {
    .holiday-countdown-logo {
        width: 210px;
        margin-bottom: 1.25rem;
    }
}