:root {
    --bg: #050506;
    --fg: #e9eefb;
    --mut: #7d8496;
    --line: #1c1f27;
    --d: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
    --m: 'Roboto Mono', ui-monospace, monospace;
    --pad: clamp(16px, 3vw, 44px);
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px)
}

@media (prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) {
        --bg: #050506;
        --fg: #e9eefb
    }
}

*,
*::before,
*::after {
    box-sizing: inherit
}

html {
    height: 100%;
    scroll-padding-top: env(safe-area-inset-top, 0px)
}

html.lenis,
html.lenis body {
    height: auto
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--m);
    font-size: 12px;
    letter-spacing: .06em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased
}

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

.d {
    font-family: var(--d);
    text-transform: uppercase;
    font-weight: 400;
    line-height: .9;
    margin: 0
}

.lbl {
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mut)
}

/* header */
header {
    position: fixed;
    inset: env(safe-area-inset-top, 0px) 0 auto 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 14px var(--pad);
    pointer-events: none
}

header>* {
    pointer-events: auto
}

#slot {
    width: clamp(84px, 9vw, 132px);
    aspect-ratio: 844/641
}

nav {
    display: flex;
    gap: clamp(14px, 3vw, 40px)
}

nav.r {
    justify-content: flex-end;
    align-items: center
}

nav a {
    position: relative;
    padding: 6px 0;
    overflow: hidden;
    display: inline-block
}

nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    height: 1px;
    width: 100%;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1)
}

nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left
}

.avail {
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.avail i {
    width: 6px;
    height: 6px;
    background: #9fe0b4;
    border-radius: 50%
}

@media(max-width:640px) {
    header {
        grid-template-columns: 1fr auto 1fr;
        padding: 10px var(--pad)
    }

    nav.l a:not(:first-child),
    .avail {
        display: none
    }
}

#logo {
    position: fixed;
    z-index: 60;
    left: 50%;
    margin-left: calc(clamp(84px, 9vw, 132px)/-2);
    width: clamp(84px, 9vw, 132px);
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: transform
}

#logo img {
    display: block;
    width: 100%;
    height: auto
}

#logo .sweep {
    position: absolute;
    inset: 0;
    mix-blend-mode: soft-light;
    background: linear-gradient(105deg, transparent 35%, #fff 50%, transparent 65%);
    background-size: 300% 100%;
    background-position: 130% 0;
    opacity: 0
}

.veil {
    display: none
}

.js .veil {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 50
}

.im {
    position: absolute;
    left: var(--pad);
    right: var(--pad);
    bottom: calc(var(--pad) + 4px);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    z-index: 55;
    color: var(--mut)
}

.skip {
    position: fixed;
    z-index: 70;
    right: var(--pad);
    top: calc(var(--pad) + env(safe-area-inset-top, 0px));
    background: none;
    border: 0;
    color: var(--mut);
    font: inherit;
    letter-spacing: .18em;
    cursor: pointer;
    padding: 8px
}

.skip:hover {
    color: var(--fg)
}

/* hero */
.hero {
    min-height: 100svh;
    position: relative;
    padding: calc(var(--pad)*3 + 70px) var(--pad) var(--pad);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: 0 12px
}

.hl {
    grid-column: 1/9;
    grid-row: 2;
    align-self: center;
    position: relative;
    z-index: 3;
    font-size: clamp(54px, 11vw, 190px)
}

.hl .ln {
    display: block;
    overflow: hidden;
    padding-bottom: .04em
}

.hl .ln span {
    display: block
}

.hl .ln:nth-child(2) {
    padding-left: 12%
}

.hl .ln:nth-child(3) {
    padding-left: 3%;
    -webkit-text-stroke: 1px var(--fg);
    color: transparent
}

.hv {
    grid-column: 8/13;
    grid-row: 1/4;
    position: relative;
    align-self: stretch;
    min-height: 56vh;
    margin-top: -30px
}

.frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: radial-gradient(120% 90% at 30% 20%, #2a2f3d, #0b0c10 70%)
}

.frame svg {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 70%;
    transform: translate(-50%, -50%) rotate(-7deg);
    filter: drop-shadow(0 40px 40px #000)
}

.floor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34%;
    background: linear-gradient(#0000, #000a)
}

.hf {
    grid-column: 1/8;
    grid-row: 3;
    display: flex;
    gap: 24px;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    z-index: 3
}

.hf p {
    margin: 0;
    max-width: 26ch;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.5
}

.cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--fg);
    padding: 16px 22px;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    transition: color .4s, background .4s
}

.cta:hover {
    background: var(--fg);
    color: #000
}

.cta .ar {
    display: inline-block;
    transition: transform .4s
}

.cta:hover .ar {
    transform: translate(4px, 4px)
}

.tags {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 18px
}

@media(max-width:820px) {
    .hero {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        padding-top: 110px
    }

    .hl,
    .hv,
    .hf {
        grid-column: 1;
        grid-row: auto
    }

    .hv {
        min-height: 50vh;
        margin: 24px 0
    }

    .hl {
        font-size: clamp(48px, 17vw, 120px)
    }
}

/* A */
#attn {
    height: 100svh;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    text-align: center;
    border-top: 1px solid var(--line)
}

#attn .bg {
    position: absolute;
    inset: 0;
    clip-path: inset(38% 38% 38% 38%);
    background: radial-gradient(90% 80% at 50% 40%, #3a2b24, #0a0807 75%)
}

#attn .bg svg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(60vh, 70vw);
    transform: translate(-50%, -50%)
}

#attn .t {
    position: relative;
    z-index: 2;
    mix-blend-mode: difference
}

#attn .a {
    font-size: clamp(80px, 22vw, 380px)
}

#attn .b {
    font-size: clamp(28px, 6vw, 100px);
    margin-top: 2vh
}

/* B — video campaigns */
#gal {
    position: relative;
    overflow: hidden
}

.gh {
    position: absolute;
    z-index: 5;
    left: var(--pad);
    top: calc(var(--pad)*2 + 70px);
    pointer-events: none;
    mix-blend-mode: difference;
    color: #fff
}

.gh h2 {
    font-size: clamp(34px, 6vw, 96px)
}

.track {
    display: flex;
    align-items: center;
    gap: clamp(24px, 5vw, 80px);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    min-height: 100svh;
    padding: 120px var(--pad) 40px;
    overscroll-behavior-x: contain
}

#gal.is-pinned .track {
    overflow: visible;
    width: max-content;
    height: 100svh;
    min-height: 0;
    scroll-snap-type: none;
    padding-top: 130px
}

.cp.intro {
    flex: none;
    width: min(46vw, 560px);
    scroll-snap-align: start
}

.vc {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scroll-snap-align: center
}

.vw {
    position: relative;
    height: min(58svh, 600px);
    aspect-ratio: var(--ar, 9/16);
    background: #0d0f14;
    overflow: hidden;
    max-width: 86vw
}

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

.vc-toggle {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 1px solid #fff6;
    background: #000a;
    color: #fff;
    font: inherit;
    cursor: pointer;
    display: grid;
    place-items: center
}

.vc-toggle:hover {
    background: #fff;
    color: #000
}

.vc-toggle .i-pause {
    display: none
}

.vc-toggle[aria-pressed="true"] .i-play {
    display: none
}

.vc-toggle[aria-pressed="true"] .i-pause {
    display: inline
}

.vi {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    align-items: end;
    max-width: min(86vw, calc(min(58svh, 600px)*var(--arn, .5625)))
}

.vi .num {
    font-family: var(--d);
    font-size: clamp(40px, 5vw, 72px);
    line-height: .8;
    grid-row: span 2
}

.vi h3 {
    font-size: clamp(20px, 2.4vw, 34px)
}

.vi .vws {
    color: var(--mut);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase
}

.reel {
    grid-column: 1/-1;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
    border-top: 1px solid var(--line);
    padding-top: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11px
}

.reel .ar {
    display: inline-block;
    transition: transform .4s
}

.reel:hover .ar,
.reel:focus-visible .ar {
    transform: translate(3px, -3px)
}

.reel:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px
}

.vc.is-empty .vw::after {
    content: "ADD VIDEO FILE";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--mut);
    font-size: 10px;
    letter-spacing: .18em
}

/* brands */
#brands {
    padding: clamp(80px, 12vw, 180px) var(--pad);
    border-top: 1px solid var(--line)
}

#brands h2 {
    font-size: clamp(44px, 9vw, 150px);
    max-width: 12ch
}

#brands h2 span {
    display: block
}

#brands h2 span+span {
    -webkit-text-stroke: 1px var(--fg);
    color: transparent
}

.bg-grid {
    list-style: none;
    margin: clamp(40px, 6vw, 90px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, 2vw, 28px)
}

.bg-grid li:nth-child(even) {
    margin-top: clamp(24px, 5vw, 80px)
}

.bc {
    display: block;
    border: 1px solid var(--line);
    background: #0b0c10;
    transition: border-color .4s
}

.bc .im2 {
    aspect-ratio: 1/1;
    overflow: hidden;
    display: grid;
    place-items: center
}

.bc img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.bc .cap2 {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11px
}

.bc .ar {
    transition: transform .4s
}

.bc:hover,
.bc:focus-visible {
    border-color: #5b6275
}

.bc:hover img,
.bc:focus-visible img {
    transform: scale(1.03)
}

.bc:hover .ar,
.bc:focus-visible .ar {
    transform: translate(3px, -3px)
}

@media(max-width:820px) {
    .bg-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

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

    .bg-grid li:nth-child(even) {
        margin-top: 0
    }
}

.hcta {
    background: var(--fg);
    color: #050506 !important;
    border: 1px solid var(--fg);
    padding: 11px 20px !important;
    font-weight: 700;
    letter-spacing: .16em;
    transition: background .3s, color .3s
}

.hcta:hover {
    background: transparent;
    color: var(--fg) !important
}

.hcta::after {
    display: none
}

.hcta .ar {
    display: inline-block;
    margin-left: 8px;
    transition: transform .3s
}

.hcta:hover .ar {
    transform: translateY(3px)
}



/* C */
#phil {
    padding: clamp(100px, 18vw, 260px) var(--pad) clamp(80px, 12vw, 180px);
    position: relative
}

#phil h2 {
    font-size: clamp(52px, 13vw, 230px)
}

#phil h2 span {
    display: block
}

#phil h2 span:nth-child(2) {
    padding-left: 18%
}

#phil h2 span:nth-child(3) {
    padding-left: 4%
}

#phil h2 span:nth-child(4) {
    padding-left: 30%;
    -webkit-text-stroke: 1px var(--fg);
    color: transparent
}

.st {
    max-width: 46ch;
    margin: clamp(50px, 8vw, 120px) 0 0 auto;
    font-size: 14px;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: .08em
}

.rows {
    margin-top: clamp(40px, 6vw, 90px);
    border-top: 1px solid var(--line)
}

.row {
    display: grid;
    grid-template-columns: 80px 1fr 1.2fr;
    gap: 20px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline
}

.row h3 {
    font-size: clamp(24px, 3.4vw, 50px)
}

.row p {
    margin: 0;
    color: var(--mut);
    line-height: 1.7;
    max-width: 48ch
}

@media(max-width:700px) {
    .row {
        grid-template-columns: 40px 1fr
    }

    .row p {
        grid-column: 2
    }
}

/* D */
#cap {
    padding: clamp(60px, 8vw, 120px) var(--pad)
}

.svc {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 0;
    border-top: 1px solid var(--line);
    position: relative;
    transition: padding .5s cubic-bezier(.2, .8, .2, 1)
}

.svc:last-child {
    border-bottom: 1px solid var(--line)
}

.svc h3 {
    font-size: clamp(28px, 6vw, 100px);
    flex: 1;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), color .4s;
    color: var(--mut)
}

.svc:hover h3,
.svc:focus-within h3 {
    transform: translateX(14px);
    color: var(--fg)
}

.svc .th {
    width: 72px;
    height: 72px;
    overflow: hidden;
    background: #111319;
    flex: none;
    position: relative
}

.svc .th svg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70%;
    transform: translate(-50%, -50%)
}

@media(hover:hover) and (min-width:900px) {
    .svc .th {
        width: 0;
        opacity: 0;
        transition: width .6s cubic-bezier(.2, .8, .2, 1), opacity .4s;
        height: 96px
    }

    .svc:hover .th {
        width: 200px;
        opacity: 1
    }
}

/* E */
#con {
    min-height: 100svh;
    padding: var(--pad);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    position: relative;
    overflow: hidden
}

#con h2 {
    font-size: clamp(56px, 13.5vw, 300px);
    margin-top: 12vh
}

.ct {
    display: flex;
    gap: clamp(20px, 5vw, 80px);
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 6vh
}

.ct a.l {
    overflow-wrap: anywhere;
    font-size: clamp(14px, 2.4vw, 30px);
    display: block;
    border-bottom: 1px solid var(--line);
    padding: 6px 0;
    transition: color .3s, border-color .3s
}

.ct a.l:hover {
    border-color: var(--fg)
}

footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 40px;
    color: var(--mut)
}

/* cursor */
#cur {
    position: fixed;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: #fff;
    mix-blend-mode: difference;
    z-index: 100;
    pointer-events: none;
    opacity: 0
}

a:focus-visible,
button:focus-visible {
    outline: 1px solid var(--fg);
    outline-offset: 4px
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important
    }

    .bc img,
    .reel .ar {
        transition: none
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}



.frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

#attn .bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

/* ===== rhythm ===== */
:root{--sec:clamp(64px,9vw,128px)}
#phil{padding:var(--sec) var(--pad)}
.st{margin-top:clamp(32px,5vw,64px)}
.rows{margin-top:clamp(32px,4vw,56px)}
#brands{padding:var(--sec) var(--pad)}
.bg-grid{margin-top:clamp(32px,4vw,56px)}
#cap{padding:var(--sec) var(--pad)}

/* ===== headline effects: outline only on hero line 3 and "matter." ===== */
#brands h2 span+span{-webkit-text-stroke:0;color:var(--fg)}
.hl .ln:nth-child(3){-webkit-text-stroke:1.5px var(--fg)}
#attn .t{mix-blend-mode:normal;text-shadow:0 2px 40px #000a}
#attn .bg::after{content:"";position:absolute;inset:0;background:#0007}

/* ===== header ===== */
header::before{content:"";position:absolute;inset:0 0 -24px;background:linear-gradient(var(--bg),#0000);z-index:-1;pointer-events:none}

/* ===== campaign cards: fit the pinned viewport ===== */
#gal{--vwh:min(52svh,560px)}
#gal.is-pinned .track{padding:96px var(--pad) 28px}
.vw{height:var(--vwh)}
.vi{max-width:max(calc(var(--vwh)*var(--arn,.5625)),260px)}

/* ===== brands: uniform square tiles ===== */
.bc .im2{aspect-ratio:1/1;padding:12%;background:var(--tile,#fff)}
.bc img{object-fit:contain}

/* ===== contact: CTA is the star ===== */
#con{min-height:0;justify-content:flex-start;gap:clamp(24px,4vw,48px)}
#con h2{font-size:clamp(52px,12vw,260px);margin-top:clamp(16px,3vw,40px)}
.ct{flex-direction:column-reverse;align-items:flex-start;gap:clamp(24px,3vw,40px);margin-top:0}
.ct .cta{background:var(--fg);color:#050506;font-size:clamp(14px,1.6vw,20px);padding:clamp(18px,2.2vw,28px) clamp(26px,3.4vw,48px)}
.ct .cta:hover{background:transparent;color:var(--fg)}
.ct a.l{font-size:clamp(15px,3.2vw,44px);padding:10px 0}
footer{margin-top:clamp(40px,6vw,80px)}

/* ===== mobile composition ===== */
@media(max-width:820px){
 .hero{display:flex;flex-direction:column;gap:20px;min-height:0;padding:112px var(--pad) 48px}
 .hero .lbl{order:1}
 .hl{order:2;font-size:clamp(46px,15.5vw,96px)}
 .hl .ln{padding-left:0!important}
 .hv{order:3;margin:4px 0 28px;min-height:0;aspect-ratio:4/5;width:100%;flex:none}
 .hf{order:4;flex-direction:column;align-items:flex-start;gap:20px}
 .hf .cta{width:100%;justify-content:space-between}
}
@media(max-width:640px){
 header{padding:8px var(--pad)}
 #slot{width:96px}
 header nav{gap:14px;font-size:12px}
 header nav a{min-height:44px;display:inline-flex;align-items:center}
 header nav.l a:not(:first-child){display:inline-flex}
 #gal{--vwh:min(46svh,420px)}
 .cp.intro{width:78vw}.cp.intro h2{font-size:36px}
 .vi .num{font-size:36px}.vi h3{font-size:20px}
 header nav{letter-spacing:.02em;gap:12px}
}