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

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    background: #ffffff;
    color: #1e1e1e;
    line-height: 1.6;
}

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

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

button {
    font: inherit;
}


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

:root {

    --blue: #0F62FE;
    --red: #E30613;

    --dark: #151515;
    --dark-soft: #222222;

    --text: #1e1e1e;
    --muted: #686868;

    --light: #f6f6f6;
    --white: #ffffff;

    --max-width: 1280px;

}


/* ============================================================
   EXISTING SITE HEADER
============================================================ */

header {

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding: 18px 4%;

    background: #a3a5a9;

    border-bottom: 1px solid #e8e8e8;

    position: relative;

    z-index: 1000;
}

.logo img {
    width: 180px;
    height: auto;
}

nav {

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 22px;

    flex-wrap: wrap;
}

nav a {

    color: #222;

    font-size: 14px;
    font-weight: 700;

    transition:
        color .2s ease,
        transform .2s ease;
}

nav a:hover {

    color: var(--blue);
    transform: translateY(-1px);
}


/* ============================================================
   HAMBURGER
============================================================ */

.hamburger {

    display: none;

    width: 44px;
    height: 44px;

    padding: 8px;

    border: 0;
    background: transparent;

    cursor: pointer;
}

.hamburger span {

    display: block;

    width: 100%;
    height: 3px;

    margin: 5px 0;

    background: #111;
}


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

.tshirt-hero{

    position:relative;

    overflow:hidden;

    min-height:90vh;

    display:flex;

    align-items:center;

    background:#ffffff;

}

/*------------------------------------------------------------
 Background
------------------------------------------------------------*/

.tshirt-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at 78% 40%,
            rgba(15,98,254,.18) 0%,
            rgba(15,98,254,.10) 18%,
            transparent 42%),

        radial-gradient(circle at 84% 58%,
            rgba(227,6,19,.15) 0%,
            transparent 32%),

        radial-gradient(circle at 25% 80%,
            rgba(15,98,254,.04) 0%,
            transparent 45%),

        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafbfd 100%
        );

    z-index:0;

}

/*------------------------------------------------------------
 Fabric texture
------------------------------------------------------------*/

.tshirt-hero::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:url("images/fabric.png");

    opacity:.04;

    mix-blend-mode:multiply;

    pointer-events:none;

    z-index:1;

}

/* ============================================================
   BUTTONS
============================================================ */

.btn {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 0 28px;

    border: 2px solid #111;

    font-size: 13px;
    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .07em;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.btn:hover {

    transform: translateY(-3px);
}

.btn-dark {

    background: #111;
    color: #fff;
}

.btn-dark:hover {

    background: var(--blue);
    border-color: var(--blue);
}

.btn-light {

    background: #fff;
    color: #111;
}

.btn-light:hover {

    background: #111;
    color: #fff;
}

.btn-red {

    background: var(--red);
    border-color: var(--red);

    color: #fff;
}

.btn-red:hover {

    background: #b5000a;
    border-color: #b5000a;
}


/* ============================================================
   STICKY COLLECTION NAV
============================================================ */

.collection-nav {

    position: sticky;

    top: 0;

    z-index: 900;

    background: rgba(255,255,255,.96);

    backdrop-filter: blur(10px);

    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
}

.collection-nav-inner {

    width: min(92%, var(--max-width));

    margin: auto;

    display: grid;

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

.collection-nav a {

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 58px;

    padding: 10px 15px;

    font-size: 12px;
    font-weight: 900;

    text-align: center;

    text-transform: uppercase;

    letter-spacing: .08em;

    border-bottom: 3px solid transparent;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.collection-nav a:hover,
.collection-nav a.active {

    color: var(--red);

    border-bottom-color: var(--red);

    background: #fafafa;
}


/* ============================================================
   COLLECTION SECTION
============================================================ */

.collection {

    padding: 110px 0;

    scroll-margin-top: 58px;

    overflow: hidden;
}

.collection-inner {

    width: min(92%, var(--max-width));

    margin: auto;

    display: grid;

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

    align-items: center;

    gap: clamp(
        50px,
        8vw,
        120px
    );
}


/* ============================================================
   COLLECTION IMAGE
============================================================ */

.collection-image {

    position: relative;

    min-height: 620px;

    overflow: hidden;

    background: #ddd;
}

.collection-image img {

    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.8,.2,1);
}

.collection-image:hover img {

    transform: scale(1.035);
}

.image-placeholder {

    width: 100%;
    min-height: 620px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 40px;

    text-align: center;

    font-size: 14px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .1em;
}


/* ============================================================
   COLLECTION CONTENT
============================================================ */

.collection-number {

    margin-bottom: 12px;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: .18em;

    text-transform: uppercase;
}

.collection-title {

    margin: 0;

    font-size: clamp(
        2.8rem,
        6vw,
        5.6rem
    );

    line-height: .92;

    letter-spacing: -.045em;

    font-weight: 900;

    text-transform: uppercase;
}

.collection-tagline {

    margin: 22px 0 0;

    font-size: clamp(
        1.25rem,
        2.5vw,
        1.8rem
    );

    line-height: 1.3;

    font-weight: 700;
}

.collection-copy {

    max-width: 570px;

    margin-top: 24px;

    color: inherit;

    opacity: .8;
}


/* ============================================================
   COLOURS
============================================================ */

.colour-heading {

    margin-top: 36px;
    margin-bottom: 16px;

    font-size: 12px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .12em;
}

.colour-swatches {

    display: flex;
    flex-wrap: wrap;

    gap: 16px;
}

.colour-swatch {

    display: flex;
    align-items: center;

    gap: 8px;

    font-size: 13px;

    font-weight: 800;
}

.swatch {

    width: 28px;
    height: 28px;

    border-radius: 50%;

    border: 2px solid rgba(0,0,0,.12);

    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.35);
}


/* ============================================================
   BLACK & WHITE
============================================================ */

.collection-black {

    background:
        radial-gradient(
            circle at 20% 30%,
            #2b2b2b 0,
            #171717 55%,
            #0d0d0d 100%
        );

    color: #fff;
}

.collection-black .collection-number {

    color: #bcbcbc;
}

.collection-black .collection-image {

    background: #282828;
}

.collection-black .image-placeholder {

    color: #777;
}


/* ============================================================
   VINTAGE
============================================================ */

.collection-vintage {

    background:
        linear-gradient(
            135deg,
            #eee4d7,
            #f8f4ee
        );

    color: #25231f;
}

.collection-vintage .collection-number {

    color: #8d6652;
}

.collection-vintage .collection-image {

    background: #d8c5b0;
}


/* ============================================================
   VIBRANT
============================================================ */

.collection-vibrant {

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(15,98,254,.13),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(227,6,19,.11),
            transparent 30%
        ),
        #ffffff;

    color: #181818;
}

.collection-vibrant .collection-number {

    color: var(--blue);
}

.collection-vibrant .collection-image {

    background: #f2f4f7;
}


/* ============================================================
   COLLECTION ACTION
============================================================ */

.collection-action {

    margin-top: 36px;
}


/* ============================================================
   TRUST SECTION
============================================================ */

.trust-section {

    padding: 110px 0;

    background: #f5f5f5;
}

.section-inner {

    width: min(92%, var(--max-width));

    margin: auto;
}

.section-kicker {

    margin-bottom: 12px;

    color: var(--red);

    font-size: 12px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .15em;
}

.section-title {

    max-width: 900px;

    margin: 0;

    font-size: clamp(
        2.5rem,
        5vw,
        4.8rem
    );

    line-height: .95;

    letter-spacing: -.04em;

    text-transform: uppercase;

    font-weight: 900;
}

.trust-grid {

    display: grid;

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

    gap: 1px;

    margin-top: 60px;

    background: #dcdcdc;
}

.trust-card {

    min-height: 230px;

    padding: 35px;

    background: #ffffff;
}

.trust-icon {

    margin-bottom: 25px;

    color: var(--blue);

    font-size: 32px;

    font-weight: 900;
}

.trust-card h3 {

    margin: 0 0 10px;

    font-size: 18px;

    text-transform: uppercase;
}

.trust-card p {

    margin: 0;

    color: #666;

    font-size: 14px;
}


/* ============================================================
   BRANDING METHODS
============================================================ */

.branding-section {

    padding: 110px 0;

    background: #ffffff;
}

.branding-grid {

    display: grid;

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

    gap: 20px;

    margin-top: 55px;
}

.branding-card {

    min-height: 285px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 32px;

    position: relative;

    overflow: hidden;

    background: #111;

    color: #fff;

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

.branding-card::before {

    content: "";

    width: 100px;
    height: 100px;

    position: absolute;

    top: -30px;
    right: -30px;

    border-radius: 50%;

    background: rgba(15,98,254,.45);
}

.branding-card:hover {

    transform: translateY(-6px);

    background: #171717;
}

.branding-card span {

    display: block;

    margin-bottom: auto;

    color: #777;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: .1em;
}

.branding-card h3 {

    margin: 0 0 8px;

    font-size: 28px;

    text-transform: uppercase;
}

.branding-card p {

    margin: 0;

    color: #bdbdbd;

    font-size: 14px;
}


/* ============================================================
   BRING YOUR OWN
============================================================ */

.supply-section {

    padding: 120px 0;

    background:
        linear-gradient(
            120deg,
            #111,
            #202020
        );

    color: #fff;

    position: relative;

    overflow: hidden;
}

.supply-section::after {

    content: "YOUR SHIRT";

    position: absolute;

    right: -40px;
    bottom: -60px;

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

    font-size: clamp(
        6rem,
        16vw,
        15rem
    );

    font-weight: 900;

    white-space: nowrap;
}

.supply-content {

    max-width: 850px;

    position: relative;

    z-index: 2;
}

.supply-title {

    margin: 0;

    font-size: clamp(
        3rem,
        7vw,
        6.7rem
    );

    line-height: .9;

    letter-spacing: -.05em;

    font-weight: 900;

    text-transform: uppercase;
}

.supply-title span {

    color: var(--red);
}

.supply-copy {

    max-width: 580px;

    margin-top: 30px;

    color: #cfcfcf;

    font-size: 18px;
}


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

.faq-section {

    padding: 110px 0;

    background: #f7f7f7;
}

.faq-list {

    max-width: 950px;

    margin-top: 55px;
}

.faq-item {

    border-top: 1px solid #d6d6d6;
}

.faq-item:last-child {

    border-bottom: 1px solid #d6d6d6;
}

.faq-question {

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 26px 0;

    border: 0;

    background: transparent;

    color: #111;

    text-align: left;

    font-size: 18px;
    font-weight: 800;

    cursor: pointer;
}

.faq-plus {

    font-size: 28px;
    font-weight: 300;

    transition: transform .25s ease;
}

.faq-answer {

    max-height: 0;

    overflow: hidden;

    color: #666;

    transition:
        max-height .35s ease,
        padding .35s ease;
}

.faq-answer p {

    margin: 0;

    padding: 0 50px 25px 0;
}

.faq-item.open .faq-answer {

    max-height: 250px;
}

.faq-item.open .faq-plus {

    transform: rotate(45deg);
}


/* ============================================================
   FINAL CTA
============================================================ */

.final-cta {

    padding: 130px 0;

    text-align: center;

    background: var(--blue);

    color: #fff;
}

.final-cta-inner {

    width: min(92%, 1000px);

    margin: auto;
}

.final-cta h2 {

    margin: 0;

    font-size: clamp(
        3.4rem,
        8vw,
        7.5rem
    );

    line-height: .86;

    letter-spacing: -.055em;

    font-weight: 900;

    text-transform: uppercase;
}

.final-cta p {

    max-width: 650px;

    margin: 30px auto;

    font-size: 19px;

    color: rgba(255,255,255,.85);
}

.contact-line {

    margin-top: 32px;

    display: flex;

    justify-content: center;
    flex-wrap: wrap;

    gap: 10px 30px;

    font-size: 15px;

    font-weight: 700;
}


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

.site-footer {

    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    padding: 25px;

    background: #111;

    color: #aaa;

    text-align: center;

    font-size: 13px;
}

.site-footer a {

    color: #fff;
}


/* ============================================================
   REVEAL ANIMATION
============================================================ */

.reveal {

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .75s ease,
        transform .75s ease;
}

.reveal.visible {

    opacity: 1;

    transform: translateY(0);
}


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

@media (max-width: 980px) {

    header {

        flex-wrap: wrap;
    }

    .hamburger {

        display: block;
    }

    nav {

        width: 100%;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding-top: 10px;
    }

    nav.open {

        display: flex;
    }

    nav a {

        padding: 12px 0;

        border-top: 1px solid #eee;
    }

    .collection-inner {

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .collection-vintage .collection-image {

        order: 2;
    }

    .collection-vintage .collection-content {

        order: 1;
    }

    .collection-image,
    .image-placeholder {

        min-height: 520px;
    }

    .trust-grid {

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

    .branding-grid {

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

}


@media (max-width: 640px) {

    .logo img {

        width: 150px;
    }

    .tshirt-hero {

        min-height: auto;
    }

    .hero-inner {

        padding: 75px 0 80px;
    }

    .hero-title {

        font-size: clamp(
            3.5rem,
            19vw,
            5.5rem
        );
    }

    .hero-actions {

        flex-direction: column;
    }

    .hero-actions .btn {

        width: 100%;
    }

    .collection-nav-inner {

        width: 100%;
    }

    .collection-nav a {

        min-height: 54px;

        padding: 7px 5px;

        font-size: 10px;
    }

    .collection {

        padding: 75px 0;
    }

    .collection-inner {

        width: 90%;
    }

    .collection-title {

        font-size: 3.1rem;
    }

    .collection-image,
    .image-placeholder {

        min-height: 420px;
    }

    .trust-section,
    .branding-section,
    .faq-section {

        padding: 80px 0;
    }

    .trust-grid,
    .branding-grid {

        grid-template-columns: 1fr;
    }

    .trust-card,
    .branding-card {

        min-height: 210px;
    }

    .supply-section {

        padding: 90px 0;
    }

    .final-cta {

        padding: 90px 0;
    }

    .contact-line {

        flex-direction: column;
    }

}

@media (max-width:980px){

    .hero-grid{

        grid-template-columns:1fr;

        gap:40px;

        text-align:center;

    }

    .hero-content{

        order:2;

    }

    .hero-image{

        order:1;

    }

    .hero-image img{

        max-width:520px;

    }

    .hero-actions{

        justify-content:center;

    }

}

.hero-image::before{

    content:"";

    position:absolute;

    width:620px;

    height:620px;

    border-radius:50%;

    background:

        radial-gradient(circle,

            rgba(15,98,254,.22),

            rgba(15,98,254,.08),

            transparent 72%

        );

    z-index:-2;

}

.hero-image::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-60px;

    bottom:-40px;

    border-radius:50%;

    background:

        radial-gradient(circle,

            rgba(227,6,19,.18),

            transparent 70%

        );

    z-index:-3;

}

.hero-ring{

    position:absolute;

    width:640px;

    height:640px;

    border-radius:50%;

    border:2px solid rgba(15,98,254,.12);

    right:20px;

    top:50%;

    transform:translateY(-50%);

    z-index:0;

}

@keyframes heroFloat{

    0%{

        transform:
            translateY(0px)
            rotate(0deg);

    }

    50%{

        transform:
            translateY(-14px)
            rotate(.5deg);

    }

    100%{

        transform:
            translateY(0px)
            rotate(0deg);

    }

}

.hero-dots{

    position:absolute;

    width:70px;

    height:70px;

    background-image:

        radial-gradient(
            var(--blue) 1px,
            transparent 1px
        );

    background-size:14px 14px;

    opacity:.28;

}

.hero-dots-top{

    top:40px;

    right:40px;

}

.hero-dots-bottom{

    bottom:50px;

    left:30px;

}

.hero-lines{

    position:absolute;

    right:25px;

    top:110px;

    width:120px;

    height:120px;

    pointer-events:none;

}

.hero-lines::before,
.hero-lines::after{

    content:"";

    position:absolute;

    width:90px;

    height:2px;

    background:var(--red);

    transform:rotate(-45deg);

}

.hero-lines::before{

    top:25px;

}

.hero-lines::after{

    top:55px;

    right:-15px;

}
/*============================================================
 HERO GRID
============================================================*/

.hero-inner{

    width:min(92%,1280px);

    margin:auto;

    position:relative;

    z-index:5;

}

.hero-grid{

    display:grid;

    grid-template-columns:
        520px
        1fr;

    gap:80px;

    align-items:center;

}

.hero-content{

    position:relative;

    z-index:2;

}

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:100%;

    max-width:760px;

    height:auto;

    display:block;

    filter:

        drop-shadow(0 45px 60px rgba(0,0,0,.18))

        drop-shadow(0 10px 20px rgba(0,0,0,.08));

    animation:

        heroFloat 7s ease-in-out infinite;

}

/*============================================================
 HERO FLOAT
============================================================*/

@keyframes heroFloat{

    0%{

        transform:
            translateY(0px);

    }

    50%{

        transform:
            translateY(-12px);

    }

    100%{

        transform:
            translateY(0px);

    }

}

/*============================================================
COLLECTION CARDS
============================================================*/

.hero-actions{

    display:flex;
    gap:18px;
    margin-top:45px;
    flex-wrap:wrap;

}

.hero-card{

    flex:1;
    min-width:220px;

    display:flex;
    align-items:center;
    gap:18px;

    padding:22px;

    border-radius:18px;

    text-decoration:none;

    transition:.35s;

    position:relative;

    overflow:hidden;

    box-shadow:
        0 15px 35px rgba(0,0,0,.08);

}

.hero-card:hover{

    transform:
        translateY(-8px);

    box-shadow:
        0 25px 45px rgba(0,0,0,.15);

}

/*============================================================
COLLECTION NAV
============================================================*/

.collection-nav{

    position:sticky;

    top:0;

    z-index:999;

    backdrop-filter:blur(16px);

    background:
        rgba(255,255,255,.94);

    border-bottom:1px solid #ececec;

    box-shadow:
        0 6px 30px rgba(0,0,0,.05);

}

.collection-nav-inner{

    width:min(92%,1200px);

    margin:auto;

    display:flex;

    justify-content:center;

    gap:18px;

    padding:14px 0;

}

.collection-pill{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 24px;

    border-radius:40px;

    background:#fff;

    color:#444;

    border:1px solid #e8e8e8;

    transition:.35s;

    font-weight:700;

}

.collection-pill:hover{

    transform:translateY(-3px);

    border-color:#0F62FE;

    box-shadow:

        0 12px 30px rgba(15,98,254,.12);

}

.collection-pill.active{

    background:#0F62FE;

    color:#fff;

    border-color:#0F62FE;

}

.pill-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:currentColor;

}

.collection-pill.active .pill-swatch{

    transform:scale(1.15);

    box-shadow:

        0 0 12px rgba(255,255,255,.55),

        0 0 0 2px rgba(255,255,255,.35);

}

@media(max-width:768px){

.collection-nav-inner{

    gap:8px;

    overflow-x:auto;

    justify-content:flex-start;

    padding:10px;

}

.collection-pill{

    white-space:nowrap;

    font-size:12px;

    padding:10px 18px;

}

}

/*============================================================
COLLECTION SWATCHS
============================================================*/

.pill-swatch{

    width:18px;
    height:18px;

    border-radius:50%;

    flex-shrink:0;

    border:2px solid rgba(255,255,255,.35);

    box-shadow:
        0 0 0 1px rgba(0,0,0,.15),
        inset 0 1px 2px rgba(255,255,255,.4);

}

.swatch-bw{

    background:

        linear-gradient(
            90deg,
            #111 0%,
            #111 50%,
            #ffffff 50%,
            #ffffff 100%
        );

}

.swatch-vintage{

    background:

        conic-gradient(

            #efe3cc 0deg 72deg,

            #b7c1a5 72deg 144deg,

            #dca47d 144deg 216deg,

            #cf9e9e 216deg 288deg,

            #caa24c 288deg 360deg

        );

}

.swatch-vibrant{

    background:

        conic-gradient(

            #1d73da 0deg 72deg,

            #f16d22 72deg 144deg,

            #46b14a 144deg 216deg,

            #6e36b5 216deg 288deg,

            #f3d126 288deg 360deg

        );

}