:root {
    --ink: #171714;
    --cream: #f2eee5;
    --paper: #faf9f5;
    --muted: #77736b;
    --line: #d9d4c9;
    --accent: #c9ff4a;
    --ease: cubic-bezier(.2, .8, .2, 1)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'DM Sans', sans-serif;
    line-height: 1.45
}

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

button,
input,
select {
    font: inherit
}

button {
    cursor: pointer;
    border: 0;
    background: none;
    color: inherit
}

.section-pad {
    padding: 110px 5vw
}

.eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--muted);
    margin: 0 0 20px
}

.logo {
    font-weight: 700;
    letter-spacing: -.06em;
    font-size: 25px
}

.logo span,
.loader-mark span {
    font-style: normal
}

.site-header {
    height: 76px;
    padding: 0 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(250, 249, 245, .9);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0, 0, 0, .05)
}

.desktop-nav {
    display: flex;
    gap: 30px;
    font-size: 13px
}

.desktop-nav a {
    position: relative
}

.desktop-nav a:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: .35s
}

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

.header-actions {
    display: flex;
    align-items: center;
    gap: 18px
}

.icon-btn {
    font-size: 13px
}

.bag-count {
    display: inline-flex;
    min-width: 17px;
    height: 17px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: #fff;
    font-size: 9px;
    margin-left: 3px
}

.menu-btn {
    display: none;
    font-size: 22px
}

.hero {
    height: calc(100vh - 76px);
    min-height: 650px;
    position: relative;
    color: #fff;
    overflow: hidden;
    background: #222
}

.hero-image {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .12)), url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=2200&q=90') center/cover;
    transform: scale(1.03);
    animation: heroZoom 12s var(--ease) forwards
}

.hero-content {
    position: absolute;
    left: 5vw;
    bottom: 10vh;
    max-width: 760px
}

.hero h1 {
    font-size: clamp(70px, 11vw, 170px);
    line-height: .82;
    letter-spacing: -.075em;
    margin: 0 0 35px
}

.hero h1 em,
h1 em,
h2 em,
.display-copy em {
    font-family: 'Playfair Display', serif;
    font-weight: 500
}

.hero-copy {
    max-width: 400px;
    font-size: 16px;
    margin-bottom: 28px
}

.button {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding: 16px 20px;
    background: var(--ink);
    color: #fff;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .1em;
    transition: transform .3s, background .3s
}

.button:hover {
    transform: translateY(-3px)
}

.button-light {
    background: #fff;
    color: var(--ink)
}

.button-full {
    width: 100%
}

.hero-scroll {
    position: absolute;
    right: 5vw;
    bottom: 5vh;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em
}

.statement {
    display: grid;
    grid-template-columns: 1fr 2.6fr;
    gap: 5vw
}

.display-copy {
    font-size: clamp(34px, 5vw, 72px);
    letter-spacing: -.055em;
    line-height: 1.05;
    max-width: 1050px;
    margin: 0 0 35px
}

.text-link {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
    border-bottom: 1px solid currentColor;
    padding-bottom: 5px
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 45px
}

.section-head h2 {
    font-size: clamp(38px, 5vw, 70px);
    letter-spacing: -.06em;
    line-height: .95;
    margin: 0
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px
}

.product-image {
    display: block;
    aspect-ratio: 3/4;
    background: #eee;
    overflow: hidden;
    position: relative
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s var(--ease)
}

.product-card:hover img {
    transform: scale(1.045)
}

.quick {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background: #fff;
    padding: 10px 12px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: 0;
    transform: translateY(8px);
    transition: .35s
}

.product-card:hover .quick {
    opacity: 1;
    transform: none
}

.product-meta {
    display: flex;
    justify-content: space-between;
    padding: 15px 0
}

.product-meta a {
    font-size: 14px;
    font-weight: 600
}

.product-meta small {
    display: block;
    color: var(--muted);
    text-transform: capitalize;
    font-size: 11px;
    margin-top: 4px
}

.product-meta strong {
    font-size: 13px;
    font-weight: 500
}

.split-feature {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    min-height: 700px
}

.split-image {
    background-size: cover;
    background-position: center
}

.split-copy {
    padding: 9vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--cream)
}

.split-copy h2 {
    font-size: clamp(48px, 6vw, 90px);
    line-height: .9;
    letter-spacing: -.065em;
    margin: 0 0 35px
}

.split-copy p {
    max-width: 430px;
    color: #5e5a53;
    margin-bottom: 35px
}

.journal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px
}

.journal-img {
    aspect-ratio: 1.15;
    background-size: cover;
    background-position: center;
    margin-bottom: 22px
}

.journal h3 {
    font-size: 23px;
    line-height: 1.05;
    letter-spacing: -.035em;
    max-width: 350px;
    margin: 0 0 20px
}

.newsletter {
    background: var(--ink);
    color: #fff;
    padding: 100px 5vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5vw
}

.newsletter h2 {
    font-size: clamp(48px, 6vw, 90px);
    letter-spacing: -.06em;
    line-height: .9;
    margin: 0
}

.newsletter form {
    display: flex;
    align-items: end;
    border-bottom: 1px solid #777;
    max-width: 500px
}

.newsletter input {
    background: none;
    border: 0;
    outline: 0;
    color: #fff;
    width: 100%;
    padding: 18px 0;
    font-size: 18px
}

.newsletter button {
    padding: 18px 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    white-space: nowrap
}

.site-footer {
    padding: 55px 5vw 25px;
    background: var(--cream)
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    padding-bottom: 80px
}

.footer-top p {
    margin: 0;
    color: var(--muted);
    font-size: 13px
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px
}

.footer-bottom {
    border-top: 1px solid var(--line);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em
}

.mobile-menu {
    position: fixed;
    z-index: 50;
    inset: 0 0 0 auto;
    width: min(420px, 90%);
    background: var(--ink);
    color: #fff;
    padding: 90px 35px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transform: translateX(100%);
    transition: transform .5s var(--ease)
}

.mobile-menu span {
    color: #888;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .15em;
    margin-bottom: 10px
}

.mobile-menu a {
    font-size: 40px;
    letter-spacing: -.05em
}

.close-menu,
.close-search {
    position: absolute;
    right: 30px;
    top: 25px;
    color: inherit;
    font-size: 28px
}

.overlay {
    position: fixed;
    z-index: 35;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    transition: .35s
}

.cart-drawer {
    position: fixed;
    z-index: 45;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(460px, 100%);
    background: var(--paper);
    padding: 28px;
    transform: translateX(100%);
    transition: transform .5s var(--ease);
    display: flex;
    flex-direction: column
}

.drawer-head {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding-bottom: 20px
}

.drawer-head h3 {
    margin: 0;
    font-size: 20px
}

.cart-items {
    flex: 1;
    overflow: auto;
    padding: 20px 0
}

.drawer-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 15px;
    margin-bottom: 20px
}

.drawer-item img {
    width: 80px;
    height: 100px;
    object-fit: cover
}

.drawer-item b,
.drawer-item span {
    display: block
}

.drawer-item span {
    font-size: 12px;
    color: var(--muted);
    margin: 4px 0 10px
}

.drawer-item button {
    border: 1px solid var(--line);
    width: 25px;
    height: 25px
}

.cart-foot {
    border-top: 1px solid var(--line);
    padding-top: 20px
}

.cart-foot>div,
.cart-summary>div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px
}

.cart-foot small,
.cart-summary small,
.fine {
    font-size: 10px;
    color: var(--muted);
    display: block;
    margin-top: 12px
}

.empty {
    color: var(--muted);
    font-size: 13px
}

.empty a {
    color: var(--ink);
    display: block;
    margin-top: 10px
}

.search-panel {
    position: fixed;
    z-index: 46;
    left: 0;
    right: 0;
    top: 0;
    background: var(--paper);
    padding: 80px 8vw 50px;
    transform: translateY(-100%);
    transition: transform .5s var(--ease);
    min-height: 45vh
}

.search-panel input {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--ink);
    background: none;
    outline: 0;
    padding: 20px 0;
    font-size: clamp(30px, 5vw, 70px);
    letter-spacing: -.05em
}

.search-hint {
    color: var(--muted)
}

#searchResults {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 20px;
    max-height: 260px;
    overflow: auto
}

#searchResults a {
    display: flex;
    gap: 10px;
    font-size: 12px
}

.search-panel #searchResults img {
    width: 55px;
    height: 65px;
    object-fit: cover
}

.search-panel #searchResults small {
    display: block;
    color: var(--muted);
    margin-top: 3px
}

.shop-page h1,
.cart-page h1,
.about-hero h1 {
    font-size: clamp(70px, 11vw, 150px);
    line-height: .82;
    letter-spacing: -.075em;
    margin: 0
}

.shop-intro {
    padding: 80px 0 100px;
    max-width: 800px
}

.shop-intro>p:last-child {
    margin-top: 35px;
    color: var(--muted)
}

.toolbar {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
    margin-bottom: 35px
}

.filters {
    display: flex;
    gap: 25px
}

.filter {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted)
}

.filter.active {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 5px
}

.toolbar select {
    border: 0;
    background: none;
    font-size: 11px;
    text-transform: uppercase
}

.product-page {
    padding-top: 50px
}

.back-link {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em
}

.product-detail {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 7vw;
    margin-top: 35px
}

.product-gallery {
    background: #eee
}

.product-gallery img {
    width: 100%;
    display: block;
    aspect-ratio: 1/1.1;
    object-fit: cover
}

.product-info {
    padding: 8vw 0;
    max-width: 520px
}

.product-info h1 {
    font-size: clamp(55px, 7vw, 95px);
    line-height: .88;
    letter-spacing: -.065em;
    margin: 0 0 20px
}

.price {
    font-size: 18px;
    margin-bottom: 50px
}

.detail-desc {
    font-size: 18px;
    line-height: 1.45;
    margin-bottom: 45px
}

.detail-line {
    border-top: 1px solid var(--line);
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    font-size: 12px
}

.detail-line b {
    font-weight: 500
}

.cart-page h1 {
    margin: 25px 0 80px
}

.full-cart {
    border-top: 1px solid var(--line)
}

.full-row {
    display: grid;
    grid-template-columns: 100px 1fr 150px 120px;
    align-items: center;
    gap: 25px;
    border-bottom: 1px solid var(--line);
    padding: 20px 0
}

.full-row img {
    width: 100px;
    height: 125px;
    object-fit: cover
}

.full-row h3 {
    margin: 0 0 5px;
    font-size: 17px
}

.full-row p {
    margin: 0;
    color: var(--muted);
    font-size: 11px
}

.qty {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px
}

.qty button {
    border: 1px solid var(--line);
    width: 28px;
    height: 28px
}

.cart-summary {
    margin: 35px 0 0 auto;
    max-width: 420px
}

.full-empty {
    text-align: center;
    padding: 80px 0
}

.about-hero {
    min-height: 75vh;
    padding: 120px 5vw;
    display: flex;
    align-items: end;
    background: url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=2200&q=90') center/cover;
    color: #fff
}

.about-hero h1 {
    max-width: 900px
}

.values {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 8vw
}

.values h2 {
    font-size: clamp(55px, 7vw, 100px);
    line-height: .9;
    letter-spacing: -.07em;
    margin: 0
}

.value-list article {
    border-top: 1px solid var(--line);
    padding: 22px 0;
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 20px
}

.value-list span {
    color: var(--muted);
    font-size: 11px
}

.value-list h3 {
    margin: 0;
    font-size: 25px;
    letter-spacing: -.04em
}

.value-list p {
    grid-column: 2;
    margin: 5px 0 15px;
    color: var(--muted);
    max-width: 450px
}

body.cart-open .cart-drawer {
    transform: none
}

body.cart-open .overlay,
body.search-open .overlay,
body.menu-open .overlay {
    opacity: 1;
    pointer-events: auto
}

body.search-open .search-panel {
    transform: none
}

body.menu-open .mobile-menu {
    transform: none
}

#loader {
    position: fixed;
    inset: 0;
    background: var(--ink);
    color: #fff;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: opacity .7s, visibility .7s
}

.loader-mark {
    font-size: 45px;
    font-weight: 700;
    letter-spacing: -.07em
}

.loader-line {
    width: 150px;
    height: 1px;
    background: #444;
    margin-top: 25px
}

.loader-line i {
    display: block;
    height: 100%;
    background: #fff;
    width: 0;
    animation: load 1.1s forwards
}

body.loaded #loader {
    opacity: 0;
    visibility: hidden
}

@keyframes load {
    to {
        width: 100%
    }
}

@keyframes heroZoom {
    to {
        transform: scale(1)
    }
}

@media(max-width:900px) {
    .desktop-nav {
        display: none
    }

    .menu-btn {
        display: block
    }

    .section-pad {
        padding: 75px 5vw
    }

    .hero {
        min-height: 650px
    }

    .hero h1 {
        font-size: clamp(68px, 16vw, 120px)
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px
    }

    .split-feature {
        grid-template-columns: 1fr;
        min-height: auto
    }

    .split-image {
        min-height: 600px
    }

    .split-copy {
        padding: 80px 10vw
    }

    .journal-grid {
        grid-template-columns: 1fr
    }

    .newsletter {
        grid-template-columns: 1fr;
        padding: 75px 5vw
    }

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

    .footer-links {
        grid-column: 2
    }

    .statement {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .product-detail {
        grid-template-columns: 1fr;
        gap: 0
    }

    .product-info {
        padding: 60px 0
    }

    .product-gallery img {
        aspect-ratio: 1/1.15
    }

    .values {
        grid-template-columns: 1fr
    }

    .about-hero {
        min-height: 65vh
    }

    .full-row {
        grid-template-columns: 80px 1fr 90px
    }

    .full-row img {
        width: 80px;
        height: 100px
    }

    .full-row>strong {
        grid-column: 3
    }

    .qty {
        grid-column: 2
    }

    .toolbar {
        align-items: center
    }

    .filters {
        gap: 14px
    }

    .shop-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:560px) {
    .site-header {
        height: 68px
    }

    .logo {
        font-size: 22px
    }

    .header-actions {
        gap: 12px
    }

    .hero {
        height: calc(100vh - 68px);
        min-height: 620px
    }

    .hero-content {
        bottom: 9vh
    }

    .hero-copy {
        font-size: 14px;
        max-width: 300px
    }

    .hero-scroll {
        display: none
    }

    .product-grid {
        gap: 12px
    }

    .product-meta {
        padding: 10px 0
    }

    .product-meta a {
        font-size: 12px
    }

    .product-meta strong {
        font-size: 11px
    }

    .quick {
        display: none
    }

    .split-image {
        min-height: 450px
    }

    .split-copy {
        padding: 65px 8vw
    }

    .journal-grid {
        gap: 45px
    }

    .newsletter form {
        margin-top: 30px
    }

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

    .footer-links {
        grid-column: auto;
        margin-top: 25px
    }

    .footer-bottom {
        gap: 20px;
        flex-direction: column
    }

    .mobile-menu a {
        font-size: 34px
    }

    .search-panel {
        padding: 70px 5vw 30px
    }

    #searchResults {
        grid-template-columns: repeat(2, 1fr)
    }

    .shop-intro {
        padding: 55px 0 65px
    }

    .shop-page h1,
    .cart-page h1,
    .about-hero h1 {
        font-size: clamp(65px, 19vw, 105px)
    }

    .toolbar {
        display: block
    }

    .filters {
        overflow: auto;
        padding-bottom: 15px
    }

    .toolbar select {
        margin-top: 10px
    }

    .full-row {
        grid-template-columns: 70px 1fr 70px;
        gap: 15px
    }

    .full-row img {
        width: 70px;
        height: 90px
    }

    .full-row>strong {
        grid-column: 3;
        grid-row: 1
    }

    .qty {
        grid-column: 2;
        grid-row: 2
    }

    .cart-page h1 {
        margin-bottom: 50px
    }

    .about-hero {
        padding-bottom: 60px
    }

    .value-list h3 {
        font-size: 21px
    }
}

/* NOVA v5 account + checkout */
.auth-page {
    min-height: 100vh;
    background: var(--cream);
    display: grid;
    place-items: center
}

.auth-shell {
    width: min(520px, 92vw);
    padding: 40px 0
}

.auth-logo {
    font-weight: 900;
    letter-spacing: -.08em;
    font-size: 42px;
    color: var(--ink);
    display: block;
    margin-bottom: 28px
}

.auth-card {
    background: var(--paper);
    padding: 42px;
    border: 1px solid var(--line)
}

.auth-card h1 {
    font-size: clamp(38px, 7vw, 64px);
    line-height: .95;
    letter-spacing: -.06em;
    margin: 8px 0 28px
}

.auth-card form {
    display: grid;
    gap: 18px
}

.auth-card label {
    display: grid;
    gap: 8px;
    font-size: 13px
}

.auth-card input,
.auth-card textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--line);
    background: white;
    font: inherit
}

.form-error {
    padding: 12px 14px;
    border: 1px solid #b88;
    background: #fff5f5;
    margin-bottom: 18px;
    font-size: 14px
}

.auth-switch {
    font-size: 14px;
    margin-top: 22px
}

.auth-switch a,
.section-title a {
    text-decoration: underline
}

.account-shell,
.checkout-shell {
    width: min(1180px, 92vw);
    margin: auto
}

.account-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 26px 0;
    border-bottom: 1px solid var(--line)
}

.account-nav>div {
    display: flex;
    gap: 20px
}

.brand {
    font-weight: 900;
    font-size: 28px;
    letter-spacing: -.08em
}

.account-head {
    padding: 80px 0 50px
}

.account-head h1,
.checkout-grid h1,
.confirmation h1 {
    font-size: clamp(48px, 8vw, 92px);
    line-height: .9;
    letter-spacing: -.07em;
    margin: 10px 0 18px
}

.orders-card {
    border-top: 1px solid var(--ink);
    padding: 25px 0 80px
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.section-title h2 {
    font-size: 28px
}

.order-list {
    border-top: 1px solid var(--line)
}

.order-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px
}

.empty-state {
    padding: 40px 0
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 80px;
    padding: 70px 0
}

.checkout-grid form {
    display: grid;
    gap: 18px;
    max-width: 650px
}

.checkout-grid label {
    display: grid;
    gap: 8px;
    font-size: 13px
}

.checkout-grid input,
.checkout-grid textarea {
    padding: 15px;
    border: 1px solid var(--line);
    font: inherit;
    background: var(--paper)
}

.checkout-summary {
    background: var(--cream);
    padding: 28px;
    height: max-content
}

.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px
}

.summary-row.total {
    border-bottom: 0;
    font-size: 16px;
    padding-top: 22px
}

.confirmation {
    width: min(760px, 90vw);
    margin: 12vh auto
}

.confirm-total {
    margin: 40px 0;
    padding: 24px 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    display: flex;
    justify-content: space-between;
    font-size: 20px
}

.text-link {
    display: block;
    margin-top: 18px;
    text-decoration: underline
}

.muted {
    color: var(--muted)
}

@media(max-width:760px) {
    .auth-card {
        padding: 28px
    }

    .checkout-grid {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 40px 0
    }

    .order-row {
        grid-template-columns: 1fr 1fr
    }

    .order-row time {
        grid-column: 1/-1
    }

    .account-nav {
        gap: 15px
    }

    .account-nav>div {
        gap: 12px
    }

    .account-head {
        padding: 50px 0 35px
    }

    .nav-account {
        display: none
    }
}
/* =========================================================
   T&T CREATIVE LABS — ART DIRECTION PASS
   ========================================================= */
.tt-home .site-header { background: rgba(248,246,240,.82); }
.tt-home .logo { font-size: 27px; letter-spacing: -.07em; }
.tt-hero { min-height: calc(100vh - 76px); height: 820px; max-height: 980px; position: relative; overflow: hidden; color:#fff; background:#171714; }
.tt-hero-image { position:absolute; inset:0; background:url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=2200&q=90') center/cover; transform:scale(1.04); animation: heroZoom 14s var(--ease) forwards; }
.tt-hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.36) 48%,rgba(0,0,0,.12) 100%); }
.tt-hero-content { position:absolute; left:5vw; bottom:10vh; max-width:850px; z-index:2; }
.tt-hero h1 { font-size:clamp(72px,11.5vw,176px); line-height:.8; letter-spacing:-.085em; margin:0 0 34px; }
.tt-hero h1 em { font-family:'Playfair Display',serif; font-weight:500; }
.tt-hero .eyebrow { color:rgba(255,255,255,.7); }
.tt-hero .hero-copy { max-width:510px; font-size:17px; color:rgba(255,255,255,.88); }
.tt-hero-actions { display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.tt-quiet-link { font-size:11px; text-transform:uppercase; letter-spacing:.13em; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:5px; }
.tt-intro { display:grid; grid-template-columns:22% 1fr; gap:8vw; }
.tt-intro-copy { max-width:560px; margin-top:30px; color:var(--muted); font-size:16px; }
.tt-services { background:var(--ink); color:#f7f3e9; }
.tt-services .eyebrow,.tt-services .tt-index { color:#a8a39a; }
.tt-services h2,.tt-work h2,.tt-shop h2 { font-size:clamp(52px,7vw,100px); line-height:.88; letter-spacing:-.07em; margin:0; }
.tt-services h2 em,.tt-work h2 em,.tt-shop h2 em { font-family:'Playfair Display',serif; font-weight:500; }
.section-head { align-items:flex-end; }
.service-list { margin-top:80px; border-top:1px solid rgba(255,255,255,.18); }
.service-list a { display:grid; grid-template-columns:8% 1fr 5%; align-items:start; gap:20px; padding:31px 0; border-bottom:1px solid rgba(255,255,255,.18); transition:padding .35s var(--ease),background .35s; }
.service-list a:hover { padding-left:18px; padding-right:18px; background:rgba(255,255,255,.035); }
.service-list span { font-size:11px; color:#a8a39a; letter-spacing:.1em; }
.service-list h3 { margin:0 0 8px; font-size:clamp(25px,3vw,42px); letter-spacing:-.045em; font-weight:500; }
.service-list p { margin:0; max-width:620px; color:#aaa69e; font-size:14px; }
.service-list b { font-size:22px; font-weight:400; text-align:right; }
.tt-work { background:#e8e3d9; }
.tt-work-head { display:flex; align-items:flex-end; justify-content:space-between; gap:50px; }
.tt-work-head > p { max-width:310px; color:var(--muted); margin:0; font-size:14px; }
.work-grid { display:grid; grid-template-columns:1.45fr 1fr; gap:1px; background:#c8c1b4; }
.work-card { display:block; background:#e8e3d9; overflow:hidden; }
.work-card-large { grid-row:span 2; }
.work-image { aspect-ratio:1.12/1; background-position:center; background-size:cover; filter:saturate(.72); transition:transform .7s var(--ease),filter .7s; }
.work-card-large .work-image { aspect-ratio:auto; height:100%; min-height:720px; }
.work-card:hover .work-image { transform:scale(1.035); filter:saturate(1); }
.work-meta { display:flex; justify-content:space-between; gap:20px; padding:18px 20px 22px; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.work-meta span { color:var(--muted); }
.work-meta strong { font-weight:500; }
.tt-shop-copy { max-width:610px; margin:55px 0 65px; color:var(--muted); font-size:16px; }
.tt-contact { min-height:620px; padding:110px 5vw; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:8vw; background:#1b1b18; color:#f7f3e9; }
.tt-contact .eyebrow { color:#aaa69e; }
.tt-contact h2 { font-size:clamp(58px,8vw,120px); line-height:.84; letter-spacing:-.075em; margin:0; }
.tt-contact h2 em { font-family:'Playfair Display',serif; font-weight:500; }
.tt-contact-right { max-width:390px; }
.tt-contact-right p { color:#aaa69e; margin-bottom:30px; font-size:16px; }
.tt-contact .button-light { color:var(--ink); }
@media (max-width:800px) {
 .tt-intro,.tt-contact { grid-template-columns:1fr; gap:50px; }
 .tt-hero { height:760px; }
 .tt-hero-content { bottom:8vh; }
 .tt-work-head { display:block; }
 .tt-work-head > p { margin-top:35px; }
 .work-grid { display:block; }
 .work-card-large .work-image { min-height:500px; }
 .service-list a { grid-template-columns:11% 1fr 7%; }
 .service-list p { font-size:13px; }
}

/* T&T Creative Labs v12 inner pages */
.tt-page-hero{padding:150px 5vw 100px;background:var(--cream);min-height:62vh;display:flex;align-items:flex-end}
.tt-page-hero .hero-inner{max-width:1100px}.tt-page-hero h1{font-size:clamp(70px,11vw,160px);line-height:.82;letter-spacing:-.08em;margin:0}.tt-page-hero h1 em{font-family:'Playfair Display',serif;font-weight:500}.tt-page-hero p.lead{max-width:580px;font-size:18px;color:var(--muted);margin:38px 0 0}
.tt-dark-section{background:var(--ink);color:#f7f3e9;padding:120px 5vw}.tt-dark-section .eyebrow{color:#aaa69e}
.service-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#3b3a35;margin-top:70px;border:1px solid #3b3a35}.service-detail{background:var(--ink);padding:55px 45px;min-height:300px}.service-detail span{font-size:11px;color:#aaa69e;letter-spacing:.15em}.service-detail h2{font-size:clamp(30px,4vw,58px);letter-spacing:-.05em;margin:35px 0 18px;line-height:.95}.service-detail p{max-width:450px;color:#aaa69e;font-size:15px}
.tt-process{padding:120px 5vw}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:45px;margin-top:70px}.process-grid article{border-top:1px solid var(--line);padding-top:20px}.process-grid span{font-size:11px;color:var(--muted)}.process-grid h3{font-size:24px;margin:28px 0 12px}.process-grid p{color:var(--muted);font-size:14px}
.work-page-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px;padding:0 5vw 110px;background:var(--cream)}.work-page-card{display:block}.work-page-card:nth-child(2){margin-top:140px}.work-page-card:nth-child(3){grid-column:1/-1;max-width:72%;margin-top:40px}.work-page-image{aspect-ratio:1.45;min-height:360px;background-position:center;background-size:cover;transition:transform .7s var(--ease)}.work-page-card:hover .work-page-image{transform:scale(.985)}.work-page-meta{display:flex;justify-content:space-between;gap:20px;padding:18px 0 0;border-top:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.1em}.work-page-meta span{color:var(--muted)}
.tt-contact-page{padding:130px 5vw;background:#1b1b18;color:#f7f3e9;display:grid;grid-template-columns:1fr .6fr;gap:10vw}.tt-contact-page h1{font-size:clamp(65px,10vw,150px);line-height:.83;letter-spacing:-.08em;margin:0}.tt-contact-page h1 em{font-family:'Playfair Display',serif;font-weight:500}.contact-copy{max-width:430px;align-self:end}.contact-copy p{color:#aaa69e;font-size:16px}.contact-links{margin-top:45px;display:grid;gap:14px}.contact-links a{font-size:18px;border-bottom:1px solid #45443e;padding-bottom:14px}
@media(max-width:800px){.service-detail-grid{grid-template-columns:1fr}.process-grid{grid-template-columns:1fr 1fr}.work-page-grid{grid-template-columns:1fr}.work-page-card:nth-child(2){margin-top:0}.work-page-card:nth-child(3){grid-column:auto;max-width:none}.tt-contact-page{grid-template-columns:1fr;gap:60px}.tt-page-hero{min-height:55vh;padding-top:110px}.work-page-image{min-height:260px}}
@media(max-width:520px){.process-grid{grid-template-columns:1fr}.service-detail{padding:38px 25px}.tt-dark-section,.tt-process,.tt-contact-page{padding:85px 5vw}}


/* =========================================================
   T&T CREATIVE LABS v13 — BRAND POLISH
   ========================================================= */
:root{--acid:#d8ff58;--warm:#e8e3d9;--deep:#141411}
body{overflow-x:hidden}
body:not(.loaded) main,body:not(.loaded) footer{opacity:0}
body.loaded main,body.loaded footer{opacity:1;transition:opacity .8s ease}
#loader{background:var(--ink);color:var(--paper)}
.loader-mark{letter-spacing:-.08em}
.loader-mark span{color:var(--acid)}
.site-header{transition:background .35s ease,transform .35s ease}
.site-header.scrolled{background:rgba(250,249,245,.96);box-shadow:0 8px 30px rgba(0,0,0,.05)}
.logo{display:inline-flex;align-items:baseline;gap:2px}
.logo::after{content:'CREATIVE LABS';font-size:7px;letter-spacing:.18em;font-weight:600;margin-left:8px;color:var(--muted)}
.header-actions{display:flex;align-items:center;gap:18px}
.icon-btn{font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.bag-count{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;border-radius:50%;background:var(--ink);color:#fff;font-size:9px;margin-left:4px}
.tt-marquee{overflow:hidden;background:var(--acid);color:var(--ink);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);white-space:nowrap}
.tt-marquee-track{display:flex;width:max-content;animation:marquee 24s linear infinite}
.tt-marquee span{padding:13px 28px;font-size:10px;font-weight:700;letter-spacing:.17em;text-transform:uppercase}
.tt-marquee i{font-style:normal;font-size:13px}
@keyframes marquee{to{transform:translateX(-50%)}}
.reveal{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.08s}.reveal-delay-2{transition-delay:.16s}.reveal-delay-3{transition-delay:.24s}
.tt-hero-content .eyebrow,.tt-hero-content h1,.tt-hero-content .hero-copy,.tt-hero-actions{animation:heroIn .9s var(--ease) both}
.tt-hero-content h1{animation-delay:.08s}.tt-hero-content .hero-copy{animation-delay:.16s}.tt-hero-actions{animation-delay:.24s}
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.tt-hero-image{filter:saturate(.72)}
.tt-hero:hover .tt-hero-image{filter:saturate(.9);transform:scale(1.06)}
.service-list a b{transition:transform .35s var(--ease)}
.service-list a:hover b{transform:translate(5px,-5px)}
.work-card,.work-page-card,.journal article,.product-card{position:relative}
.work-card::after,.work-page-card::after{content:'';position:absolute;inset:0;pointer-events:none;border:1px solid transparent;transition:border-color .4s ease}
.work-card:hover::after,.work-page-card:hover::after{border-color:rgba(255,255,255,.45)}
.tt-shop .product-card img,.product-grid .product-image img{transition:transform .7s var(--ease),filter .5s ease}
.tt-shop .product-card:hover img,.product-grid .product-card:hover img{transform:scale(1.04);filter:saturate(.9)}
.tt-contact .button-light{position:relative;overflow:hidden}
.tt-contact .button-light::before{content:'';position:absolute;inset:0;background:var(--acid);transform:translateY(102%);transition:transform .4s var(--ease)}
.tt-contact .button-light:hover::before{transform:translateY(0)}
.tt-contact .button-light span,.tt-contact .button-light{z-index:0}.tt-contact .button-light span{position:relative}.tt-contact .button-light{isolation:isolate}.tt-contact .button-light::after{content:'';position:absolute;inset:0;z-index:-1}
.footer-links a{transition:opacity .25s}.footer-links:hover a{opacity:.45}.footer-links a:hover{opacity:1}
/* subtle desktop pointer treatment */
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}


/* T&T Creative Labs v18 — clean interaction system */
html{scroll-behavior:smooth}
body{cursor:auto}
a,button,[role="button"],select{cursor:pointer}
:focus-visible{outline:2px solid var(--acid,#d8ff58);outline-offset:4px}
.skip-link{position:fixed;left:16px;top:16px;z-index:9999;padding:12px 16px;background:var(--ink,#141411);color:var(--paper,#faf9f5);transform:translateY(-160%);transition:transform .2s ease}
.skip-link:focus{transform:translateY(0)}
.page-transition{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
body.loaded .page-transition{opacity:1;transform:none}
.work-filter{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 40px}
.work-filter button{border:1px solid rgba(20,20,17,.25);background:transparent;padding:10px 15px;border-radius:999px;font:inherit}
.work-filter button.active{background:var(--ink,#141411);color:var(--paper,#faf9f5);border-color:var(--ink,#141411)}
.work-page-card.is-hidden{display:none}
@media(max-width:700px){.work-filter{margin-bottom:28px}.work-filter button{font-size:13px;padding:9px 12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.page-transition{transition:none;opacity:1;transform:none}}

/* v19 — official T&T Creative Labs logo system */
.brand-lockup{display:flex;align-items:center;min-width:0}
.brand-lockup img{display:block;width:124px;height:58px;object-fit:contain;object-position:left center}
.brand-lockup span{display:none}
.footer-brand img{width:150px;height:78px}

/* Keep the user's standard system cursor. No custom cursor layer is used. */
html,body,a,button,input,select,textarea{cursor:auto}
button,.button,.desktop-nav a,.text-link,.tt-quiet-link,.work-card,.product-card,.service-list a{cursor:pointer}

/* More restrained motion for a professional studio feel */
.page-transition{animation:ttPageIn .55s var(--ease) both}
@keyframes ttPageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Editorial logo presence */
.tt-brand-feature{display:grid;grid-template-columns:.75fr 1.25fr;gap:8vw;align-items:center;padding:9vw 5vw;background:var(--cream);overflow:hidden}
.tt-brand-feature img{width:min(100%,520px);height:auto;display:block;justify-self:center}
.tt-brand-feature-copy{max-width:650px}
.tt-brand-feature-copy h2{font-size:clamp(48px,7vw,105px);line-height:.88;letter-spacing:-.07em;margin:0 0 28px}
.tt-brand-feature-copy p{max-width:520px;color:var(--muted);font-size:17px}

/* Stronger project metadata */
.work-meta strong,.product-meta strong{transition:letter-spacing .3s var(--ease)}
.work-card:hover .work-meta strong,.product-card:hover .product-meta strong{letter-spacing:.01em}

@media (max-width:760px){
  .site-header{height:68px;padding:0 5vw}
  .brand-lockup img{width:102px;height:52px}
  .footer-brand img{width:125px;height:66px}
  .tt-brand-feature{grid-template-columns:1fr;gap:35px;padding:70px 5vw}
  .tt-brand-feature img{width:min(100%,360px);justify-self:start}
  .tt-brand-feature-copy h2{font-size:clamp(46px,15vw,78px)}
}

/* T&T v20 — Studio Experience */
.brand-lockup{display:inline-flex;align-items:baseline;gap:10px;white-space:nowrap}
.brand-main{font-size:25px;font-weight:700;letter-spacing:-.07em;line-height:1}
.brand-sub{font-size:9px;font-weight:700;letter-spacing:.16em;color:var(--muted)}
.header-cta{font-size:10px;text-transform:uppercase;letter-spacing:.1em;border:1px solid var(--ink);padding:11px 14px;transition:.3s}
.header-cta:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.header-actions{gap:14px}
.mobile-cta{margin-top:auto;display:flex!important;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.18);padding-top:22px;font-size:15px!important;letter-spacing:0!important}
.tt-studio-note{display:grid;grid-template-columns:1fr 2.6fr;gap:5vw;border-top:1px solid var(--line);background:var(--paper)}
.studio-note-index{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.studio-note-index>span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.studio-note-copy p{font-size:clamp(34px,5vw,72px);line-height:1.02;letter-spacing:-.055em;max-width:980px;margin:0 0 35px}
.work-index-note{display:grid;grid-template-columns:1.4fr 1fr;gap:8vw;align-items:end;border-top:1px solid var(--line)}
.work-index-note h2,.capability-intro h2{font-size:clamp(40px,5.5vw,82px);line-height:.94;letter-spacing:-.06em;margin:0}
.work-index-note>p{max-width:460px;color:var(--muted);font-size:15px;margin:0}
.capability-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw;background:var(--cream)}
.capability-list{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.capability-list article{padding:25px 20px 30px 0;border-bottom:1px solid var(--line)}
.capability-list article:nth-child(odd){padding-right:35px}
.capability-list article:nth-child(even){padding-left:35px;border-left:1px solid var(--line)}
.capability-list span{font-size:10px;color:var(--muted)}
.capability-list h3{font-size:25px;letter-spacing:-.04em;margin:22px 0 10px}
.capability-list p{color:var(--muted);font-size:13px;max-width:320px;margin:0}
.journal-note{border-top:1px solid var(--line)}
.project-enquiry{display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw;background:var(--cream);border-top:1px solid var(--line)}
.project-enquiry-intro h2{font-size:clamp(42px,5vw,78px);line-height:.92;letter-spacing:-.06em;margin:0 0 25px}
.project-enquiry-intro>p:last-child{max-width:390px;color:var(--muted);font-size:14px}
.project-form{display:grid;gap:22px;align-content:start}
.project-form label{display:grid;gap:9px;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.project-form label span{color:var(--muted);text-transform:none;letter-spacing:0}
.project-form input,.project-form textarea,.project-form select{width:100%;border:0;border-bottom:1px solid #aaa;background:transparent;padding:12px 0;font-size:16px;outline:0;border-radius:0;color:var(--ink)}
.project-form textarea{resize:vertical;min-height:110px}
.project-form input:focus,.project-form textarea:focus,.project-form select:focus{border-bottom-color:var(--ink)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.form-note{font-size:10px!important;color:var(--muted);margin:0;text-transform:none!important;letter-spacing:0!important}
.form-success{font-size:13px;line-height:1.5}
.form-success:empty{display:none}
.page-transition{animation:pageIn .65s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:900px){
 .header-cta{display:none}
 .tt-studio-note,.work-index-note,.capability-grid,.project-enquiry{grid-template-columns:1fr;gap:40px}
 .studio-note-index{display:block}
 .studio-note-index>span{display:block;margin-top:10px}
 .capability-list{grid-template-columns:1fr}
 .capability-list article:nth-child(even),.capability-list article:nth-child(odd){padding-left:0;padding-right:0;border-left:0}
 .capability-list article:nth-child(even){border-left:0}
}
@media (max-width:700px){
 .brand-main{font-size:21px}.brand-sub{font-size:8px}
 .site-header{height:68px;padding:0 5vw}
 .header-actions{gap:9px}
 .icon-btn{font-size:12px}
 .tt-studio-note,.work-index-note,.capability-grid,.project-enquiry{padding:75px 5vw}
 .form-row{grid-template-columns:1fr;gap:22px}
 .project-form .button{width:100%}
 .mobile-menu a{font-size:34px}
}
@media (prefers-reduced-motion:reduce){.page-transition{animation:none}.header-cta{transition:none}}

/* =========================================================
   T&T v22 — EDITORIAL DEPTH + FOOTER SYSTEM
   ========================================================= */
.tt-fit{background:var(--paper);border-top:1px solid var(--line)}
.tt-fit-head{display:grid;grid-template-columns:1.2fr .8fr;gap:8vw;align-items:end}
.tt-fit-head h2{font-size:clamp(48px,6.8vw,98px);line-height:.88;letter-spacing:-.07em;margin:0}
.tt-fit-head h2 em{font-family:'Playfair Display',serif;font-weight:500}
.tt-fit-head>p{max-width:390px;color:var(--muted);font-size:15px;margin:0 0 5px}
.tt-fit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-top:75px;border:1px solid var(--line)}
.tt-fit-grid article{background:var(--paper);padding:28px 24px 30px;min-height:310px;display:flex;flex-direction:column;align-items:flex-start;transition:background .35s var(--ease),transform .35s var(--ease)}
.tt-fit-grid article:hover{background:var(--cream);transform:translateY(-4px)}
.tt-fit-grid article>span{font-size:10px;color:var(--muted);letter-spacing:.12em}
.tt-fit-grid h3{font-size:25px;line-height:1;letter-spacing:-.04em;margin:52px 0 14px}
.tt-fit-grid p{font-size:13px;color:var(--muted);max-width:270px;margin:0}
.tt-fit-grid a{margin-top:auto;padding-top:28px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--ink);padding-bottom:4px}

.site-footer{padding:0 5vw 24px;background:var(--ink);color:#f7f3e9}
.footer-cta{padding:105px 0 95px;border-bottom:1px solid rgba(255,255,255,.16);display:grid;grid-template-columns:1fr auto;grid-template-areas:'eyebrow link' 'title link';column-gap:8vw;align-items:end}
.footer-cta .eyebrow{grid-area:eyebrow;color:#aaa69e;margin-bottom:22px}
.footer-cta h2{grid-area:title;font-size:clamp(56px,8vw,118px);line-height:.84;letter-spacing:-.075em;margin:0}
.footer-cta h2 em{font-family:'Playfair Display',serif;font-weight:500}
.footer-cta-link{grid-area:link;display:inline-flex;align-items:center;gap:24px;border:1px solid rgba(255,255,255,.4);padding:18px 20px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;transition:.35s var(--ease);white-space:nowrap}
.footer-cta-link span{font-size:18px;line-height:0;transition:transform .35s var(--ease)}
.footer-cta-link:hover{background:var(--acid);border-color:var(--acid);color:var(--ink);transform:translateY(-3px)}
.footer-cta-link:hover span{transform:translate(4px,-4px)}
.footer-main{display:grid;grid-template-columns:1.6fr .7fr .7fr 1.2fr;gap:5vw;padding:65px 0 85px}
.footer-brand-block .brand-lockup{color:#fff}
.footer-brand-block .brand-sub{color:#aaa69e}
.footer-brand-block p{max-width:300px;color:#aaa69e;font-size:13px;margin:25px 0 0}
.footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:13px}
.footer-column a{transition:opacity .25s,transform .25s var(--ease)}
.footer-column a:hover{opacity:.65;transform:translateX(3px)}
.footer-label{color:#77736b;font-size:9px;text-transform:uppercase;letter-spacing:.15em;margin-bottom:10px}
.footer-email{font-size:14px;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:5px}
.footer-location{color:#aaa69e;font-size:12px;line-height:1.7;margin-top:12px}
.site-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.16);padding-top:18px;color:#77736b;display:flex;justify-content:space-between;gap:20px;font-size:9px;text-transform:uppercase;letter-spacing:.11em}

@media(max-width:900px){
 .tt-fit-head{grid-template-columns:1fr;gap:30px}
 .tt-fit-grid{grid-template-columns:1fr 1fr}
 .footer-cta{grid-template-columns:1fr;grid-template-areas:'eyebrow' 'title' 'link';gap:35px}
 .footer-cta-link{justify-self:start}
 .footer-main{grid-template-columns:1.2fr 1fr 1fr;gap:45px 30px}
 .footer-contact-column{grid-column:1/-1}
}
@media(max-width:600px){
 .tt-fit-grid{grid-template-columns:1fr}
 .tt-fit-grid article{min-height:245px}
 .tt-fit-grid h3{margin-top:38px}
 .footer-cta{padding:80px 0 70px}
 .footer-cta h2{font-size:clamp(52px,15vw,80px)}
 .footer-main{grid-template-columns:1fr 1fr;padding:50px 0 65px;gap:42px 25px}
 .footer-brand-block,.footer-contact-column{grid-column:1/-1}
 .site-footer .footer-bottom{flex-direction:column;gap:9px}
}

/* v23 — temporary generic T&T Creative Labs logo */
.brand-lockup{display:inline-flex;align-items:center;min-width:0;line-height:0}
.brand-lockup img{display:block;width:168px;height:auto;max-height:58px;object-fit:contain;object-position:left center}
.footer-brand img{width:190px;height:auto;filter:invert(1)}
@media(max-width:760px){.brand-lockup img{width:142px;max-height:50px}.footer-brand img{width:165px}}

/* v25 — exact user-provided logo image */
.brand-lockup{display:inline-flex;align-items:center;min-width:0;line-height:0}
.brand-lockup img{display:block;width:72px;height:58px;object-fit:contain;object-position:center}
.footer-brand img{width:92px;height:76px;object-fit:contain;filter:none}
@media(max-width:760px){
  .brand-lockup img{width:64px;height:50px}
  .footer-brand img{width:80px;height:66px}
}

/* =========================================================
   T&T v27 — checkout production diagnostics + polish
   ========================================================= */
.checkout-page { background: var(--cream); color: var(--ink); }
.checkout-page .checkout-shell { min-height: 100vh; }
.checkout-nav { background: transparent; }
.checkout-brand { display:inline-flex; align-items:center; width: 180px; height: 62px; overflow:hidden; }
.checkout-brand img { width:100%; height:100%; object-fit:contain; object-position:left center; }
.checkout-status { display:inline-flex; align-items:center; gap:9px; margin-top:28px; padding:8px 12px; border:1px solid var(--line); background:rgba(255,255,255,.55); font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.status-dot { width:7px; height:7px; border-radius:50%; background:#5f8b44; display:block; }
.checkout-main { padding-top:25px; }
.checkout-intro { max-width:650px; color:var(--muted); font-size:17px; line-height:1.65; margin-bottom:36px; }
.checkout-submit { display:flex; justify-content:space-between; align-items:center; min-width:250px; }
.checkout-note { color:var(--muted); font-size:13px; max-width:500px; margin-top:16px; }
.checkout-summary { border:1px solid var(--line); box-shadow:0 18px 45px rgba(17,17,17,.06); }
.summary-heading h2 { margin:6px 0 22px; }
.checkout-diagnostic { min-height:100vh; display:grid; place-items:center; padding:40px 20px; background:var(--cream); }
.checkout-diagnostic-card { width:min(720px,100%); padding:48px; background:var(--paper); border:1px solid var(--line); box-shadow:0 20px 60px rgba(17,17,17,.08); }
.checkout-diagnostic-card h1 { font-size:clamp(42px,7vw,76px); line-height:.92; letter-spacing:-.06em; margin:10px 0 18px; }
.checkout-diagnostic-lead { font-size:20px; line-height:1.5; margin-bottom:8px; }
.diagnostic-box { margin:28px 0; padding:20px; border:1px solid var(--line); background:var(--cream); }
.diagnostic-box ul { margin:12px 0 0 18px; padding:0; line-height:1.8; }
.diagnostic-box code { font-family:monospace; font-size:.92em; }
.checkout-diagnostic-actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
@media(max-width:760px){ .checkout-brand{width:145px;height:54px}.checkout-diagnostic-card{padding:30px 24px}.checkout-status{margin-top:20px}.checkout-main{padding-top:10px}.checkout-intro{font-size:15px}.checkout-submit{width:100%;} }