/* ========================================
   THE BUZZ PEOPLE — Design System
   Inspired by truus.co aesthetic
   ======================================== */

:root {
    --color-black: #1a1a1a;
    --color-white: #ffffff;
    --color-offwhite: #f0ebe6;
    --color-pink: #f0befa;
    --color-orange: #f5693c;
    --color-lightgreen: #e6fab9;
    --color-darkgrey: #2d2d2d;
    --color-darkblue: #4b69f0;
    --color-green: #2d7864;
    --color-blue: #82a0ff;
    --color-pastelpink: #ffe1f0;
    --color-maroon: #a0325a;
    
    --color-primary: var(--color-pink);
    --color-light: var(--color-offwhite);
    --color-dark: var(--color-black);
    
    --font-heading: 'Epilogue', Arial, sans-serif;
    --font-body: 'DM Sans', Arial, sans-serif;
    --font-accent: 'Lora', 'Times New Roman', serif;
    
    --border-radius-s: 0.5em;
    --border-radius-m: 0.75em;
    --border-radius-l: 1.25em;
    --border-radius-xl: 2em;
    
    --container-padding: 2.5em;
    --section-padding: 8em;
    --gap: 2.5em;
    
    --transition-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-black);
    background-color: var(--color-offwhite);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s var(--transition-smooth);
}

ul, ol {
    list-style: none;
}

/* Container */
.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* ========================================
   NAVIGATION
   ======================================== */

.nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25em var(--container-padding);
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
}

.nav-bar--scrolled {
    background-color: rgba(240, 235, 230, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.nav-logo {
    color: var(--color-black);
    position: relative;
    z-index: 2;
}

.nav-logo__svg {
    width: 200px;
    height: 40px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2.5em;
}

.nav-link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--color-black);
    position: relative;
    padding: 0.5em 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-orange);
    transition: width 0.3s var(--transition-smooth);
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link--cta {
    background: var(--color-black);
    color: var(--color-white);
    padding: 0.75em 1.5em;
    border-radius: var(--border-radius-l);
    transition: transform 0.3s var(--transition-bounce), background-color 0.3s ease;
}

.nav-link--cta::after {
    display: none;
}

.nav-link--cta:hover {
    transform: scale(1.05);
    background: var(--color-orange);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5em;
    z-index: 2;
}

.nav-toggle span {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--color-black);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

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

.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8em var(--container-padding) 4em;
    overflow: hidden;
}

.hero-stickers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.sticker {
    position: absolute;
    pointer-events: auto;
    cursor: grab;
    user-select: none;
    transition: transform 0.3s var(--transition-bounce);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.08));
}

.sticker:active {
    cursor: grabbing;
}

/* Hero sticker scatter — 3 left column, 3 right column, no overlaps */
.sticker--bam { /* make some noise */
    top: 11%;
    left: 3%;
    transform: rotate(-7deg);
    animation: floatSticker 6s ease-in-out infinite;
}

.sticker--vibes { /* stay buzzing */
    top: 11%;
    right: 3%;
    transform: rotate(6deg);
    animation: floatSticker 7s ease-in-out infinite 0.5s;
}

.sticker--100 { /* pow */
    top: 43%;
    left: 4%;
    transform: rotate(-5deg);
    animation: floatSticker 7.5s ease-in-out infinite 0.8s;
}

.sticker--lets-go { /* create the buzz */
    top: 42%;
    right: 3%;
    transform: rotate(4deg);
    animation: floatSticker 8s ease-in-out infinite 2s;
}

.sticker--cute { /* big ideas only */
    top: 74%;
    left: 4%;
    transform: rotate(4deg);
    animation: floatSticker 5.5s ease-in-out infinite 1s;
}

.sticker--smile { /* good vibes */
    top: 74%;
    right: 4%;
    transform: rotate(-5deg);
    animation: floatSticker 6.5s ease-in-out infinite 1.5s;
}

@keyframes floatSticker {
    0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
    50% { transform: translateY(-15px) rotate(var(--rot, 0deg)); }
}

.sticker--bam { --rot: -7deg; }
.sticker--vibes { --rot: 6deg; }
.sticker--cute { --rot: 4deg; }
.sticker--smile { --rot: -5deg; }
.sticker--lets-go { --rot: 4deg; }
.sticker--100 { --rot: -5deg; }

/* Nav logo lockup — bee + wordmark */
.nav-logo { display: inline-flex; align-items: center; gap: 11px; }
.nav-bee { height: 52px; width: auto; display: block; }

/* Marker-highlight wordmark (nav) — yellow highlighter swipe, no outline */
.nav-wm {
    font-family: 'Epilogue', sans-serif;
    font-weight: 900;
    font-size: 31px;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #1a1a1a;
    white-space: nowrap;
}
.nav-wm .hl { position: relative; z-index: 1; padding: 0 0.1em; }
.nav-wm .hl::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -4%; right: -4%; top: 6%; bottom: 0%;
    background: #FFC400;
    border-radius: 8px 6px 9px 7px / 6px 9px 7px 8px;
    transform: rotate(-2deg);
}

/* PNG die-cut stickers (hero) */
.sticker--png { width: 138px !important; }
.sticker--png img { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 13px rgba(26,18,6,0.2)); }
.footer-wm { color: #fff; font-size: 30px; margin-bottom: 1em; display: inline-block; }

/* Bee mascot stickers in hero */
.sticker--bee { width: 134px !important; }
.sticker--bee img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 8px 12px rgba(26, 18, 6, 0.18));
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.hero-label {
    margin-bottom: 1.5em;
}

.hero-label__text {
    display: inline-block;
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--color-darkgrey);
    position: relative;
}

.hero-label__text::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-orange);
    border-radius: 2px;
}

.hero-heading {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 0.6em;
}

.hero-heading__line {
    display: block;
}

.hero-heading__line--highlight {
    color: var(--color-orange);
    position: relative;
    display: inline-block;
}

.hero-heading__line--highlight::after {
    content: '';
    position: absolute;
    bottom: 0.05em;
    left: -0.1em;
    right: -0.1em;
    height: 0.25em;
    background: var(--color-lightgreen);
    z-index: -1;
    border-radius: 4px;
    transform: rotate(-1.5deg);
}

.hero-subtext {
    font-size: 1.125rem;
    color: var(--color-darkgrey);
    max-width: 540px;
    margin: 0 auto 2em;
    line-height: 1.7;
}

.hero-cta {
    display: flex;
    justify-content: center;
    gap: 1em;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
    padding: 1em 2em;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--border-radius-xl);
    transition: all 0.3s var(--transition-bounce);
    cursor: pointer;
    border: none;
}

.btn--primary {
    background: var(--color-black);
    color: var(--color-white);
}

.btn--primary:hover {
    transform: scale(1.05) translateY(-2px);
    background: var(--color-orange);
    box-shadow: 0 8px 24px rgba(245, 105, 60, 0.3);
}

.btn svg {
    transition: transform 0.3s ease;
}

.btn:hover svg {
    transform: translateX(4px);
}

.hero-drag-hint {
    position: absolute;
    bottom: 2em;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-darkgrey);
    opacity: 0.7;
    animation: fadeInOut 3s ease-in-out infinite;
}

.hero-drag-hint__icon {
    font-size: 1.2em;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}

/* Blobs */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
}

.blob--1 {
    width: 500px;
    height: 500px;
    background: var(--color-pink);
    top: -10%;
    right: -10%;
    animation: blobMove 20s ease-in-out infinite;
}

.blob--2 {
    width: 400px;
    height: 400px;
    background: var(--color-lightgreen);
    bottom: -10%;
    left: -10%;
    animation: blobMove 25s ease-in-out infinite reverse;
}

@keyframes blobMove {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -40px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

/* ========================================
   WORK SECTION
   ======================================== */

.work {
    padding: var(--section-padding) 0;
    position: relative;
    overflow: hidden;
}

.work-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3em;
}

.work-header__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: -0.02em;
}

.work-header__link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
    color: var(--color-darkgrey);
    position: relative;
    padding-bottom: 0.25em;
}

.work-header__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-orange);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s var(--transition-smooth);
}

.work-header__link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.work-carousel {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    padding: 1em 0 2em;
}

.work-carousel::-webkit-scrollbar {
    display: none;
}

.work-carousel:active {
    cursor: grabbing;
}

.work-track {
    display: flex;
    gap: 2em;
    padding: 0 var(--container-padding);
    width: max-content;
}

.work-card {
    width: 380px;
    flex-shrink: 0;
    position: relative;
}

.work-card__media {
    position: relative;
    border-radius: var(--border-radius-l);
    overflow: hidden;
    aspect-ratio: 4/5;
    margin-bottom: 1.25em;
}

.work-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.work-card__client {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2rem;
    color: rgba(255,255,255,0.9);
    text-align: center;
    padding: 1em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.work-card__sticker {
    position: absolute;
    top: 1em;
    right: 1em;
    width: 70px;
    height: 70px;
    z-index: 2;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1));
}

.work-card__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5em;
}

.work-card__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.125rem;
}

.work-card__tag {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-darkgrey);
    background: rgba(0,0,0,0.05);
    padding: 0.35em 0.9em;
    border-radius: var(--border-radius-xl);
}

/* ========================================
   ABOUT SECTION
   ======================================== */

.about {
    padding: var(--section-padding) 0;
    position: relative;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4em;
    align-items: center;
}

.about-label {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 1.125rem;
    color: var(--color-orange);
    margin-bottom: 1em;
}

.about-heading {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 0.75em;
}

.about-body {
    font-size: 1.125rem;
    color: var(--color-darkgrey);
    line-height: 1.7;
    margin-bottom: 2em;
}

.about-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.badge {
    display: inline-block;
    padding: 0.75em 1.5em;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    background: var(--color-lightgreen);
    color: var(--color-darkgrey);
    border-radius: var(--border-radius-xl);
    transform: rotate(-2deg);
}

.badge--alt {
    background: var(--color-pastelpink);
    transform: rotate(1.5deg);
}

.about-visual {
    position: relative;
    min-height: 500px;
}

.sticker-cloud {
    position: relative;
    width: 100%;
    height: 500px;
}

.sticker--floating {
    animation: floatSticker 6s ease-in-out infinite;
}

.sticker--floating:nth-child(2) { animation-delay: 1s; }
.sticker--floating:nth-child(3) { animation-delay: 2s; }
.sticker--floating:nth-child(4) { animation-delay: 0.5s; }

/* ========================================
   SERVICES SECTION
   ======================================== */

.services {
    padding: var(--section-padding) 0;
    background: var(--color-white);
    border-radius: var(--border-radius-l) var(--border-radius-l) 0 0;
    position: relative;
    z-index: 2;
}

.services-title {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--color-darkgrey);
    margin-bottom: 2em;
    text-align: center;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2em;
}

.service-card {
    padding: 2em;
    background: var(--color-offwhite);
    border-radius: var(--border-radius-l);
    transition: transform 0.3s var(--transition-bounce), box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}

.service-card__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1.25em;
}

.service-card__icon svg {
    width: 100%;
    height: 100%;
}

.service-card__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1em;
}

.service-card__list li {
    font-size: 0.95rem;
    color: var(--color-darkgrey);
    padding: 0.4em 0;
    position: relative;
    padding-left: 1.2em;
}

.service-card__list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-orange);
    font-weight: 700;
}

/* ========================================
   CLIENTS SECTION
   ======================================== */

.clients {
    padding: 4em 0;
    background: var(--color-white);
}

.clients-label {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 1.125rem;
    color: var(--color-darkgrey);
    text-align: center;
    margin-bottom: 2em;
}

/* rolling logo strip */
.clients-strip {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    margin-bottom: 2.5em;
}
.clients-track {
    display: inline-flex;
    align-items: center;
    gap: 3.5em;
    white-space: nowrap;
    animation: clientScroll 46s linear infinite;
}
.clients:hover .clients-track { animation-play-state: paused; }
.clients-track img {
    height: 30px; width: auto; object-fit: contain;
    filter: grayscale(1); opacity: 0.5;
    transition: filter 0.35s ease, opacity 0.35s ease;
}
.clients-track a:hover img { filter: grayscale(0); opacity: 1; }
@keyframes clientScroll { to { transform: translateX(-50%); } }

/* logo grid */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: #eceae4;
    border: 1px solid #eceae4;
    border-radius: 18px;
    overflow: hidden;
}
.client-logo {
    background: var(--color-white);
    aspect-ratio: 3 / 2;
    display: grid;
    place-items: center;
    padding: 18px;
}
.client-logo img {
    max-height: 40px; max-width: 78%; object-fit: contain;
    filter: grayscale(1); opacity: 0.55;
    transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}
.client-logo:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.07); }
@media (max-width: 1000px) { .clients-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .clients-grid { grid-template-columns: repeat(3, 1fr); } }

/* ========================================
   TEAM SECTION
   ======================================== */

.team {
    padding: var(--section-padding) 0;
    background: var(--color-white);
}

.team-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4em;
}

.team-header__text {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.2;
    display: block;
    margin-bottom: 0.5em;
}

.team-header__sub {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 1.125rem;
    color: var(--color-orange);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5em;
}

.team-member {
    text-align: center;
}

.team-member__photo {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--border-radius-l);
    margin-bottom: 1em;
    transition: transform 0.3s var(--transition-bounce);
}

.team-member:hover .team-member__photo {
    transform: scale(1.03) rotate(-2deg);
}

.team-member__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.25em;
}

.team-member__role {
    font-size: 0.875rem;
    color: var(--color-darkgrey);
}

/* ========================================
   CONTACT SECTION
   ======================================== */

.contact {
    padding: var(--section-padding) 0;
    background: var(--color-offwhite);
    position: relative;
    overflow: hidden;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4em;
    align-items: center;
    position: relative;
}

.contact-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 0.5em;
}

.contact-body {
    font-size: 1.25rem;
    color: var(--color-darkgrey);
    margin-bottom: 2em;
    max-width: 440px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.contact-item {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

.contact-item__label {
    font-size: 0.875rem;
    color: var(--color-darkgrey);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact-item__value {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.125rem;
    transition: color 0.3s ease;
}

.contact-item__value:hover {
    color: var(--color-orange);
}

.contact-stickers {
    position: relative;
    min-height: 400px;
}

.sticker--contact {
    position: absolute;
    animation: floatSticker 5s ease-in-out infinite;
}

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

.footer {
    padding: 4em 0 2em;
    background: var(--color-black);
    color: var(--color-white);
    border-radius: var(--border-radius-l) var(--border-radius-l) 0 0;
    margin-top: -1.25em;
    position: relative;
    z-index: 3;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2em;
    align-items: start;
    margin-bottom: 3em;
}

.footer-brand svg {
    width: 200px;
    height: 40px;
    margin-bottom: 1em;
    color: var(--color-white);
}

.footer-brand p {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.6);
    max-width: 280px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}

.footer-links a {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.7);
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--color-white);
}

.footer-social {
    display: flex;
    gap: 1em;
}

.footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    transition: all 0.3s ease;
}

.footer-social a:hover {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: var(--color-white);
    transform: translateY(-2px);
}

.footer-credits {
    display: flex;
    justify-content: space-between;
    padding-top: 2em;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.875rem;
    color: rgba(255,255,255,0.4);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 3em;
    }
    
    .about-visual {
        min-height: 350px;
    }
    
    .sticker-cloud {
        height: 350px;
    }
}

@media (max-width: 768px) {
    :root {
        --container-padding: 1.5em;
    }
    
    .nav-links {
        position: fixed;
        inset: 0;
        background: var(--color-offwhite);
        flex-direction: column;
        justify-content: center;
        gap: 2em;
        transform: translateX(100%);
        transition: transform 0.4s var(--transition-smooth);
    }
    
    .nav-links.active {
        transform: translateX(0);
    }
    
    .nav-link {
        font-size: 1.5rem;
    }
    
    .nav-toggle {
        display: flex;
    }
    
    .hero-stickers {
        display: none;
    }
    
    .work-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1em;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5em;
    }
    
    .footer-credits {
        flex-direction: column;
        gap: 0.5em;
    }
    
    .contact-stickers {
        display: none;
    }
}

@media (max-width: 480px) {
    .work-card {
        width: 300px;
    }
    
    .team-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   SCROLL REVEAL ANIMATIONS (GSAP hooks)
   ======================================== */

.reveal {
    opacity: 0;
    transform: translateY(40px);
}

.reveal--left {
    transform: translateX(-40px);
}

.reveal--right {
    transform: translateX(40px);
}

.reveal--scale {
    transform: scale(0.95);
}

/* ========================================
   HORIZONTAL-SCROLL HEADING (pinned, letters fly in)
   ======================================== */
.horizontal-words {
    height: 300vh;
    overflow: clip;
    position: relative;
    background: var(--color-offwhite);
}
.horizontal-words__content {
    height: 100vh;
    min-height: 40em;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    overflow: hidden;
}
.horizontal-words__relative {
    margin-left: 35vw;
    margin-right: 35vw;
    position: relative;
    will-change: transform;
}
.horizontal-words__h2 {
    white-space: nowrap;
    width: max-content;
    margin: 0;
    padding: 0.25em 0.1em;
    font-family: 'Epilogue', sans-serif;
    font-weight: 800;
    font-style: normal;
    letter-spacing: -0.01em;
    line-height: 1.12;
    font-size: clamp(2.25rem, 7.5vw, 6.5rem);
    color: var(--color-black);
}
.horizontal-words .letter { display: inline-block; will-change: transform; }
/* decorations that travel with the heading (truus-style) */
.horizontal-words__sticker {
    position: absolute;
    width: 120px;
    height: auto;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 6px 12px rgba(26,18,6,0.2));
}
.horizontal-words__sticker--1 { top: -3.9em; left: 18%; width: 104px; transform: rotate(-8deg); }
.horizontal-words__sticker--2 { bottom: -3.1em; left: 55%; width: 112px; transform: rotate(6deg); }
.horizontal-words__arrow { position: absolute; z-index: 2; overflow: visible; pointer-events: none; }
.horizontal-words__arrow--1 { width: 124px; top: -2.3em; left: 5%; }
.horizontal-words__arrow--2 { width: 120px; bottom: -1.4em; left: 76%; }
@media (prefers-reduced-motion: reduce) {
    .horizontal-words { height: auto; }
    .horizontal-words__content { height: auto; min-height: 0; position: static; padding: 4em 0; }
    .horizontal-words__relative { margin: 0 1.5em; }
    .horizontal-words__h2 { white-space: normal; font-size: clamp(2.5rem, 8vw, 6rem); }
}

/* ========================================
   SERVICES — DECK OF CARDS (truus hover-spotlight)
   ======================================== */
.services-hint { text-align:center; color:#9b948c; font-size:0.95rem; margin:-0.5em 0 2.5em; }
.services__row-cards { display:flex; justify-content:center; align-items:flex-start; padding:1.5em 0 3em; min-height:24em; }
.services-card__wrap { flex:none; width:19.25em; max-width:62vw; margin-left:-4.933em; position:relative; will-change:transform; }
.services-card__wrap.is--1 { margin-left:0; }
.services-card { border-radius:var(--border-radius-l); width:100%; min-height:21em; padding:2em 1.75em; color:#fff;
    box-shadow:0 14px 34px rgba(0,0,0,0.16); position:relative; overflow:hidden; }
.services-card--orange { background:var(--color-orange); }
.services-card--blue   { background:var(--color-darkblue); }
.services-card--green  { background:var(--color-green); }
.services-card--maroon { background:var(--color-maroon); }
.services-card__content { position:relative; will-change:transform; }
.services-card__title { font-family:var(--font-heading); font-weight:800; font-size:1.9rem; margin-bottom:0.8em; }
.services-card__list { display:flex; flex-direction:column; gap:0.45em; }
.services-card__list li { font-size:0.98rem; font-weight:500; opacity:0.92; padding-left:1.1em; position:relative; }
.services-card__list li::before { content:'✦'; position:absolute; left:0; opacity:0.8; }
@media (max-width:760px){
    .services__row-cards { flex-direction:column; align-items:center; gap:1.25em; min-height:0; }
    .services-card__wrap { margin-left:0 !important; width:88vw; transform:none !important; }
}

/* ========================================
   CLIENTS — DOUBLE VERTICAL MARQUEE (truus)
   ======================================== */
.double-marquee { width:27.625em; max-width:90vw; position:relative; margin:0 auto; }
.double-marquee__before { pointer-events:none; display:block; padding-top:120%; }
.double-marquee__single { width:calc(50% - .5em); height:100%; position:absolute; top:0; left:0; overflow:hidden; }
.double-marquee__single.is--flipped { inset:auto 0% 0% auto; transform:scaleY(-1); }
.double-marquee__single-list { display:flex; flex-flow:column; }
.double-marquee__single-item { flex:none; width:100%; margin-bottom:1em; }
.marquee-logo { border-radius:var(--border-radius-m); background:#fff; display:flex; justify-content:center; align-items:center;
    user-select:none; width:100%; aspect-ratio:1/1; position:relative; box-shadow:0 6px 18px rgba(0,0,0,0.06); }
.marquee-logo.is--flipped { transform:scaleY(-1); }
.marquee-logo img { max-width:62%; max-height:50%; width:auto; height:auto; filter:grayscale(1); opacity:0.85; }
.double-marquee__fade { background-image:linear-gradient(180deg, var(--color-offwhite), transparent); width:calc(100% + 2px);
    height:6em; position:absolute; top:-1px; left:-1px; z-index:2; pointer-events:none; }
.double-marquee__fade.is--flipped { top:auto; bottom:-1px; transform:scaleY(-1); }

/* ========================================
   CUSTOM CURSOR (truus)
   ======================================== */
.custom-cursor { z-index:9999; opacity:0; pointer-events:none; position:fixed; top:0; left:0; will-change:transform; }
.custom-cursor__img { width:54px; height:auto; display:block; transform:translate(-26%,-18%); transition:transform 0.12s ease;
    filter:drop-shadow(0 5px 10px rgba(0,0,0,0.28)); }
.custom-cursor.is--press .custom-cursor__img { transform:translate(-26%,-18%) scale(0.8); }
/* on hover-capable devices, the click sticker replaces the system cursor */
@media (hover:hover) and (pointer:fine){
    html, body, a, button, .float-chip, [data-draggable], .btn, .nav-link { cursor:none; }
}
@media (hover:none) and (pointer:coarse){ .custom-cursor { display:none !important; } }

/* ========================================
   ROUND 4 — verticals deck, marquee, headings, lockup, annotations
   ======================================== */

/* Impactful headings: bold Epilogue + italic Lora accent words (truus signature) */
.hero-heading em, .services-title em, .work-header__title em, .about-heading em,
.contact-title em, .team-header__text em, .horizontal-words__h2 em, .clients-label em, .section-em {
    font-family: var(--font-accent); font-style: italic; font-weight: 500; letter-spacing: 0;
}
.services-title {
    font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.03em; line-height: 1;
    font-size: clamp(2.6rem, 6vw, 5rem); text-align: center; margin-bottom: 0.4em;
}
.hero-label__text {
    font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 2.1rem);
    letter-spacing: -0.02em; color: var(--color-black);
}
.hero-label__text em { font-family: var(--font-accent); font-style: italic; font-weight: 500; }
.work-header__title, .contact-title { font-size: clamp(2.4rem, 5vw, 4.2rem); letter-spacing: -0.03em; }
.clients-label {
    font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02;
    font-size: clamp(2.2rem, 4.5vw, 4rem); color: var(--color-black);
}

/* Services vertical cards — sticker peeking + tag + pink card */
.services-card__wrap { overflow: visible; }
.services-card__sticker {
    position: absolute; top: -2.4em; right: -0.6em; width: 92px; height: auto; z-index: 6;
    pointer-events: none; transform: rotate(8deg); filter: drop-shadow(0 6px 12px rgba(26,18,6,0.22));
}
.services-card__wrap:nth-child(even) .services-card__sticker { left: -0.6em; right: auto; transform: rotate(-8deg); }
.services-card__tag { font-size: 0.92rem; font-weight: 500; opacity: 0.85; margin: -0.4em 0 1em; }
.services-card--pink { background: var(--color-pink); color: var(--color-black); }
.services-card--pink .services-card__list li { opacity: 1; }
.services-card--pink .services-card__list li::before { color: var(--color-maroon); opacity: 1; }
.sticker--icon img { filter: drop-shadow(0 8px 13px rgba(26,18,6,0.22)); }

/* Clients — right-aligned layout */
.clients__row { display: flex; align-items: center; justify-content: space-between; gap: 3em; flex-wrap: wrap; }
.clients__intro { flex: 1 1 300px; }
.clients__col-marquee { flex: 0 0 auto; margin-left: auto; }
.double-marquee { width: 24em; max-width: 92vw; }

/* Colored tiles + white inner chip + grayscale→colour on hover */
.marquee-logo { background: transparent; padding: 11%; overflow: visible; box-shadow: none; }
.tile--green  { background: var(--color-green); }
.tile--maroon { background: var(--color-maroon); }
.tile--pink   { background: var(--color-pink); }
.tile--blue   { background: var(--color-darkblue); }
.tile--lime   { background: var(--color-lightgreen); }
.tile--orange { background: var(--color-orange); }
.marquee-logo__inner {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    background: #fff; border-radius: 0.7em;
}
.marquee-logo.is--flipped .marquee-logo__inner { transform: scaleY(-1); }
.marquee-logo__inner img {
    max-width: 70%; max-height: 56%; width: auto; height: auto;
    filter: grayscale(1); opacity: 0.7; transition: filter 0.35s ease, opacity 0.35s ease;
}
.marquee-logo:hover .marquee-logo__inner img { filter: grayscale(0); opacity: 1; }

/* Brand lockup — big bee + 2-line stacked wordmark */
.brand-lockup { display: inline-flex; align-items: center; gap: 1.1rem; }
.brand-lockup__bee { width: 120px; height: auto; display: block; }
.brand-lockup__wm {
    font-family: var(--font-heading); font-weight: 900; letter-spacing: -0.03em; line-height: 0.92;
    font-size: clamp(2.4rem, 4vw, 3.4rem); color: #fff;
}
.brand-lockup__wm .hl { position: relative; z-index: 1; padding: 0 0.08em; }
.brand-lockup__wm .hl::before {
    content: ""; position: absolute; z-index: -1; left: -4%; right: -4%; top: 8%; bottom: 2%;
    background: #FFC400; border-radius: 8px 6px 9px 7px / 6px 9px 7px 8px; transform: rotate(-2deg);
}
@media (max-width: 760px){ .brand-lockup__bee { width: 84px; } }

/* Hand-drawn annotation fallback colour (rough-notation injects SVG) */
[data-annotate] { position: relative; }

/* ========================================
   ROUND 5 — repel sizes, deck colours/stickers/fonts, chips, marquee fade,
   labels, footer
   ======================================== */

/* "call us if you need:" — keep "need:" upright (italics were clipping) */
.services-title em { font-family: var(--font-heading); font-style: normal; font-weight: 800; }

/* Hero stickers — varied sizes (override uniform width) + less rigid feel */
.sticker--bam     { width: 152px !important; }
.sticker--vibes   { width: 116px !important; }
.sticker--cute    { width: 140px !important; }
.sticker--smile   { width: 126px !important; }
.sticker--lets-go { width: 162px !important; }
.sticker--100     { width: 110px !important; }
.hero-stickers img { will-change: transform; }

/* Scroll-text decorations — bigger + varied; bee logo is the star */
.horizontal-words__sticker--1 { top: -4.4em; left: 14%; width: 168px; transform: rotate(-8deg); }
.horizontal-words__sticker--2 { bottom: -3.4em; left: 50%; width: 138px; transform: rotate(6deg); }
.horizontal-words__sticker--3 { top: -3.8em; left: 80%; width: 120px; transform: rotate(9deg); }
.horizontal-words__arrow--1 { width: 150px; top: -2.6em; left: 3%; }
.horizontal-words__arrow--2 { width: 148px; bottom: -1.2em; left: 78%; }

/* Deck — Warm & Bold palette */
.services-card--deeppink { background: #d97ad8; color: #fff; }
.services-card--yellow   { background: #FFC400; color: #1a1a1a; }
.services-card--yellow .services-card__list li { opacity: 1; }
.services-card--yellow .services-card__list li::before { color: #a0325a; opacity: 1; }
.services-card--yellow .services-card__tag { opacity: 1; }

/* Deck card titles — louder + bolder + tighter; sub-tags bolder/bigger */
.services-card__title {
    font-family: var(--font-heading); font-weight: 900; text-transform: uppercase;
    font-size: 1.85rem; letter-spacing: -0.02em; line-height: 0.92; margin-bottom: 0.18em;
}
.services-card__tag {
    font-size: 1.02rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
    opacity: 0.9; margin: 0 0 1.1em;
}

/* Deck stickers — stuck to card top, always above the deck, move with the card */
.services-card__wrap { z-index: 1; }
.services-card__wrap:hover { z-index: 30; }
.services-card__sticker {
    top: -2.7em; left: 50%; right: auto;
    transform: translateX(-50%) rotate(var(--st-rot, -6deg));
    width: var(--st-w, 98px); z-index: 25; filter: drop-shadow(0 6px 12px rgba(26,18,6,0.28));
}
.services-card__wrap:nth-child(1) .services-card__sticker { --st-rot: -9deg; --st-w: 104px; }
.services-card__wrap:nth-child(2) .services-card__sticker { --st-rot: 7deg;  --st-w: 92px;  }
.services-card__wrap:nth-child(3) .services-card__sticker { --st-rot: -5deg; --st-w: 100px; }
.services-card__wrap:nth-child(4) .services-card__sticker { --st-rot: 9deg;  --st-w: 96px;  }
.services-card__wrap:nth-child(5) .services-card__sticker { --st-rot: -7deg; --st-w: 106px; }

/* About / team labels — different font + much bigger */
.about-label {
    font-family: var(--font-heading); font-weight: 800; font-style: normal;
    font-size: clamp(1.5rem, 2.8vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.05;
    color: var(--color-maroon); text-transform: lowercase; margin-bottom: 0.7em;
}
.team-header__sub {
    font-family: var(--font-accent); font-style: italic; font-weight: 600;
    font-size: clamp(1.9rem, 3.6vw, 2.9rem); color: var(--color-orange);
    display: inline-block; transform: rotate(-3deg); margin-top: 0.1em;
}

/* Floating 3D button chips (about cloud) */
.sticker-cloud { position: relative; min-height: 360px; }
.float-chip {
    position: absolute; display: inline-block; padding: 0.46em 0.8em; border-radius: 0.65em;
    color: #fff; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none;
    border: 2.5px solid #1a1a1a; box-shadow: 5px 6px 0 #1a1a1a;
    transform: rotate(var(--r, 0deg)); transition: transform 0.12s ease, box-shadow 0.12s ease;
    max-width: 14em; white-space: normal; text-align: center;
}
.float-chip:hover { transform: rotate(var(--r, 0deg)) translate(4px, 5px); box-shadow: 1px 1px 0 #1a1a1a; }
.float-chip:active { transform: rotate(var(--r, 0deg)) translate(5px, 6px); box-shadow: 0 0 0 #1a1a1a; }
.float-chip--orange { background: var(--color-orange); }
.float-chip--pink   { background: var(--color-pink); color: #1a1a1a; }
.float-chip--blue   { background: var(--color-darkblue); }
.float-chip--lime   { background: var(--color-lightgreen); color: #1a1a1a; }
.float-chip--maroon { background: var(--color-maroon); }
.float-chip--yellow { background: #FFC400; color: #1a1a1a; }
.fc--epi  { font-family: var(--font-heading); font-weight: 900; letter-spacing: -0.01em; }
.fc--lora { font-family: var(--font-accent); font-style: italic; font-weight: 600; }
.fc--dm   { font-family: 'DM Sans', sans-serif; font-weight: 700; }
.fc--sm { font-size: 1rem; }
.fc--md { font-size: 1.25rem; }
.fc--lg { font-size: 1.6rem; }
.fc--xl { font-size: 2.05rem; }

/* Clients marquee — blend into the page so the strip ends are invisible */
.clients { background: var(--color-offwhite); }
.double-marquee__fade {
    height: 9em; background-image: linear-gradient(180deg, var(--color-offwhite) 18%, transparent);
}
.double-marquee__fade.is--flipped { background-image: linear-gradient(180deg, var(--color-offwhite) 18%, transparent); }

/* Footer — fuller layout, tagline, columns, stickers */
.footer { overflow: hidden; }
.footer-tagline {
    font-family: var(--font-heading); font-weight: 900; letter-spacing: -0.03em; line-height: 1.0;
    font-size: clamp(2.2rem, 5.5vw, 4.6rem); color: #fff; margin: 0 0 1.4em; max-width: 16ch;
}
.footer-tagline [data-annotate] { color: #FFC400; }
.footer-grid { grid-template-columns: 1.7fr 1fr 1fr 1.3fr; }
.footer-blurb { font-size: 0.98rem; color: rgba(255,255,255,0.62); max-width: 320px; margin: 1.2em 0 1.4em; line-height: 1.55; }
.footer-col { display: flex; flex-direction: column; gap: 0.7em; }
.footer-col__title { font-family: var(--font-heading); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 0.2em; }
.footer-col a { font-size: 0.98rem; color: rgba(255,255,255,0.78); transition: color 0.25s ease; }
.footer-col a:hover { color: #FFC400; }
.footer-addr { font-size: 0.95rem; color: rgba(255,255,255,0.6); line-height: 1.5; margin: 0; }
.footer-social { display: flex; gap: 1.1em; margin-top: 0.4em; }
.footer-social a { font-size: 0.95rem; color: rgba(255,255,255,0.78); }
.footer-social a:hover { color: #FFC400; }
.footer-sticker { position: absolute; z-index: 1; pointer-events: none; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4)); }
.footer-sticker--1 { width: 120px; top: 8%; right: 6%; transform: rotate(8deg); }
.footer-sticker--2 { width: 132px; bottom: 14%; right: 20%; transform: rotate(-7deg); }
.footer-sticker--3 { width: 104px; top: 38%; right: 32%; transform: rotate(5deg); }
.footer-credits { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 1.5em; }
@media (max-width: 860px){ .footer-grid { grid-template-columns: 1fr 1fr; } .footer-sticker--3 { display:none; } }

/* ========================================
   ROUND 6 — all-beige, 3D cards, chip shapes, triple marquee, marker/circle
   ======================================== */

/* Beige background for the whole site (sections were white) */
.services, .clients, .team, .work, .about, .contact { background: var(--color-offwhite); }

/* Nav links — same font as "mainstream is not a dirty word" (Epilogue 800 lowercase) */
.nav-link { font-family: var(--font-heading); font-weight: 800; text-transform: lowercase; letter-spacing: -0.01em; font-size: 1.06rem; }

/* "not to brag!" — smaller, styled like the about label */
.team-header__sub {
    font-family: var(--font-heading); font-weight: 800; font-style: normal;
    font-size: clamp(1.05rem, 1.7vw, 1.4rem); color: var(--color-maroon);
    text-transform: lowercase; letter-spacing: -0.01em; transform: none;
}

/* Deck cards — 3D look (hard black shadow + outline) */
.services-card { border: 2.5px solid #1a1a1a; box-shadow: 7px 8px 0 #1a1a1a; }

/* Deck stickers — reliably above their own card + peek above the deck, move with card */
.services-card__wrap { z-index: auto; }
.services-card__sticker { top: -3.2em; z-index: 60; }

/* "call us if you need:" — straight underline span (no italics) */
.services-title span[data-annotate] { font-style: normal; }

/* Scroll-text band — good vibes sticker bigger, bee bigger */
.horizontal-words__sticker--1 { width: 176px; }
.horizontal-words__sticker--2 { width: 188px; }

/* Marker-highlight + hand circle on scroll-heading words */
.hw-word { position: relative; display: inline-block; }
.hw-word .letter { position: relative; z-index: 1; }
.hw-mark-bg {
    position: absolute; left: -6%; right: -6%; top: 10%; bottom: 6%; z-index: 0;
    background: #FFC400; border-radius: 13px 9px 14px 8px / 9px 14px 8px 13px;
    transform: rotate(-2deg) scaleX(0); transform-origin: left center;
}
.hw-circle-svg {
    position: absolute; left: -12%; top: -20%; width: 124%; height: 144%;
    overflow: visible; pointer-events: none; z-index: 3;
}

/* Float-chip shapes (about cloud + contact) — different shapes */
.float-chip { text-decoration: none; }
.fc-shape--pill     { border-radius: 999px; }
.fc-shape--rect     { border-radius: 12px; }
.fc-shape--squircle { border-radius: 34px; }
.fc-shape--bubble   { border-radius: 24px 24px 24px 5px; }
.fc-shape--circle {
    border-radius: 50%; aspect-ratio: 1 / 1; width: auto; padding: 1.05em;
    display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.04;
}
.sticker-cloud { min-height: 460px; }
.contact-stickers { position: relative; min-height: 380px; }

/* ---- Triple vertical marquee ---- */
.clients__row { align-items: center; gap: 4vw; }
.clients-label { font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 0.98; text-align: left; margin: 0; }
.clients__intro { flex: 1 1 260px; }
.clients__col-marquee { flex: 0 0 auto; width: min(48vw, 640px); }
.triple-marquee {
    position: relative; display: flex; gap: 0.9em; width: 100%;
    height: 34em; max-height: 82vh; overflow: hidden;
}
.tm-col { flex: 1; overflow: hidden; }
.tm-list { display: flex; flex-direction: column; gap: 0.9em; will-change: transform; }
.tm-item { width: 100%; }
.tm-fade { position: absolute; left: 0; right: 0; height: 7.5em; pointer-events: none; z-index: 4; }
.tm-fade--top    { top: 0;    background: linear-gradient(180deg, var(--color-offwhite) 24%, transparent); }
.tm-fade--bottom { bottom: 0; background: linear-gradient(0deg,   var(--color-offwhite) 24%, transparent); }
.triple-marquee .marquee-logo { box-shadow: none; }
.triple-marquee .marquee-logo__inner img { max-width: 72%; max-height: 60%; }

@media (max-width: 900px){
    .clients__row { flex-direction: column; align-items: flex-start; }
    .clients__col-marquee { width: 100%; }
    .triple-marquee { height: 26em; }
}

/* ========================================
   ROUND 7 — scattered stickers (scroll-pop) + click-sticker cursor
   ======================================== */
.work, .clients, .services, .team, .contact { position: relative; }
.scatter-sticker {
    position: absolute; z-index: 2; pointer-events: none; opacity: 0;
    will-change: transform, opacity; filter: drop-shadow(0 8px 16px rgba(26,18,6,0.18));
}
.ss--l { width: 208px; }
.ss--m { width: 150px; }
.ss--s { width: 106px; }
@media (max-width: 980px){ .scatter-sticker { display: none; } } /* keep mobile uncluttered */

/* ========================================
   ROUND 8 — tighter sections, 3D buttons, random hero stickers, cluster sizing
   ======================================== */

/* Reduce empty space between sections */
:root { --section-padding: 4.2em; }
.hero { padding-top: 6.5em; padding-bottom: 1.5em; }
.team, .contact { padding-top: 3.6em; padding-bottom: 3.6em; }

/* 3D buttons — black depth + click press (black button shows depth on beige) */
.btn--primary, .nav-link--cta {
    border: 2.5px solid #1a1a1a;
    box-shadow: 5px 6px 0 #1a1a1a;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.25s ease;
}
.btn--primary:hover, .nav-link--cta:hover {
    transform: translate(3px, 4px); box-shadow: 1px 1px 0 #1a1a1a; background: var(--color-orange); scale: 1;
}
.btn--primary:active, .nav-link--cta:active {
    transform: translate(5px, 6px); box-shadow: 0 0 0 #1a1a1a;
}

/* Hero stickers — large / big / medium, random (non-aligned) placements */
.sticker--bam     { top: 13%; left: 4%;  width: 190px !important; transform: rotate(-8deg); --rot: -8deg; }
.sticker--vibes   { top: 8%;  right: 6%; width: 150px !important; transform: rotate(7deg);  --rot: 7deg; }
.sticker--100     { top: 53%; left: 8%;  width: 130px !important; transform: rotate(-6deg); --rot: -6deg; }
.sticker--lets-go { top: 39%; right: 3%; width: 168px !important; transform: rotate(5deg);  --rot: 5deg; }
.sticker--cute    { top: 71%; left: 10%; width: 178px !important; transform: rotate(4deg);  --rot: 4deg; }
.sticker--smile   { top: 77%; right: 8%; width: 142px !important; transform: rotate(-7deg); --rot: -7deg; }

/* Cursor — double size, just the click hand (hotspot ~ fingertip) */
.custom-cursor__img { width: 104px; transform: translate(-42%, -12%); }
.custom-cursor.is--press .custom-cursor__img { transform: translate(-42%, -12%) scale(0.82); }

/* Cluster stickers inside about-cloud + contact (icons/die-cut mixed with chips) */
.sticker-cloud { min-height: 520px; }
.contact-stickers { min-height: 440px; }
.cloud-sticker {
    position: absolute; pointer-events: none; z-index: 3; opacity: 0;
    transform: rotate(var(--r, 0deg)); will-change: transform, opacity;
    filter: drop-shadow(0 7px 13px rgba(26,18,6,0.24));
}
.cs--l { width: 156px; }
.cs--m { width: 116px; }
.cs--s { width: 90px; }

/* ========================================
   ROUND 9 — click cursor, doubled clusters, 3x advertising, small-caps card headers
   ======================================== */

/* Cursor = original Click sticker, doubled */
.custom-cursor__img { width: 104px; transform: translate(-32%, -24%); }
.custom-cursor.is--press .custom-cursor__img { transform: translate(-32%, -24%) scale(0.82); }

/* Card headers — nav-bar font (Epilogue), bolder, SMALL CAPS */
.services-card__title {
    font-family: var(--font-heading); font-weight: 900; text-transform: none;
    font-variant-caps: small-caps; font-feature-settings: "smcp" 1;
    font-size: 2.05rem; letter-spacing: 0.01em; line-height: 0.95;
}

/* About + contact clusters — doubled sizes, crowded */
.fc--sm { font-size: 1.85rem; }
.fc--md { font-size: 2.3rem; }
.fc--lg { font-size: 3rem; }
.fc--xl { font-size: 3.8rem; }
.float-chip { max-width: 340px; }
.fc-shape--circle { padding: 1.2em; }
.cs--l { width: 300px; }
.cs--m { width: 224px; }
.cs--s { width: 172px; }
.sticker-cloud { min-height: 860px; }
.contact-stickers { min-height: 780px; }

/* Advertising sticker (footer) — 3x */
.footer-sticker--1 { width: 350px; top: 4%; right: 2%; }

/* ========================================
   ROUND 10 — hero heading 3D perspective tilt on cursor
   ======================================== */
.hero-content { perspective: 1100px; perspective-origin: 50% 45%; }
.hero-heading { transform-style: preserve-3d; will-change: transform; }
.hero-heading__line { transform-style: preserve-3d; }
.hero-heading__line:nth-child(2) { transform: translateZ(18px); }
.hero-heading__line--highlight { transform: translateZ(40px); }
@media (hover: none) { .hero-heading__line:nth-child(2), .hero-heading__line--highlight { transform: none; } }

/* ========================================
   ROUND 11 — glitch on "buzz" + orange CTA button
   ======================================== */

/* "All our work" — orange, 3D, clickable (was black) */
.btn--primary { background: var(--color-orange); color: #fff; }
.btn--primary:hover { background: #df5026; }

/* Glitch effect on the word "buzz" in the hero heading */
.hero-heading .glitch { position: relative; display: inline-block; }
.hero-heading .glitch::before,
.hero-heading .glitch::after {
    content: attr(data-text); position: absolute; inset: 0; z-index: -1;
    pointer-events: none; user-select: none;
}
.hero-heading .glitch::before { color: #f5693c; animation: buzzGlitch 3.2s infinite; }
.hero-heading .glitch::after  { color: #4b69f0; animation: buzzGlitch 3.2s infinite reverse; }
@keyframes buzzGlitch {
    0%, 86%, 100% { clip-path: inset(0 0 0 0); transform: translate(-2px, 0); }
    87% { clip-path: inset(0 0 62% 0);  transform: translate(-6px, -2px); }
    90% { clip-path: inset(52% 0 22% 0); transform: translate(5px, 2px); }
    93% { clip-path: inset(28% 0 46% 0); transform: translate(-5px, 1px); }
    96% { clip-path: inset(74% 0 8% 0);  transform: translate(4px, -1px); }
    98% { clip-path: inset(0 0 0 0);     transform: translate(-2px, 0); }
}
@media (prefers-reduced-motion: reduce){
    .hero-heading .glitch::before, .hero-heading .glitch::after { animation: none; }
}

/* ========================================
   ROUND 12 — real work photos (from company profile) in the work cards
   ======================================== */
.work-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-card__media::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
    background: linear-gradient(transparent, rgba(0,0,0,0.62)); z-index: 1; pointer-events: none;
}
.work-card__client {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    font-size: 1.4rem; line-height: 1.1; text-align: left; padding: 0.7em 0.7em 0.6em;
    color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

/* ========================================
   ROUND 13 — "Accounts we run" social-management section
   ======================================== */
.accounts { padding: var(--section-padding) 0; background: var(--color-offwhite); }
.accounts-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5em; flex-wrap: wrap; margin-bottom: 2.2em; }
.accounts-eyebrow { font-family: var(--font-heading); font-weight: 800; text-transform: lowercase; letter-spacing: -0.01em; color: var(--color-maroon); font-size: 1.05rem; margin-bottom: 0.2em; }
.accounts-title { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1; }
.accounts-stat { font-size: 1.02rem; font-weight: 500; color: #5b554e; max-width: 22ch; }
.accounts-stat strong { font-family: var(--font-heading); font-weight: 900; font-size: 1.5rem; color: var(--color-black); }

.accounts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.1em; }
.account-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.12em;
    background: #fff; border: 2.5px solid #1a1a1a; border-radius: 1.1em; padding: 1.2em;
    box-shadow: 5px 6px 0 #1a1a1a; transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.account-card:hover { transform: translate(3px, 4px); box-shadow: 1px 1px 0 #1a1a1a; }
.account-card__avatar {
    width: 50px; height: 50px; border-radius: 50%; background: var(--c, #1a1a1a); color: #fff;
    font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem;
    display: flex; align-items: center; justify-content: center; margin-bottom: 0.55em;
}
.account-card__name { font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; line-height: 1.1; }
.account-card__handle { font-size: 0.9rem; color: var(--color-darkblue); font-weight: 600; }
.account-card__followers { font-size: 0.95rem; color: #5b554e; margin-top: 0.35em; }
.account-card__followers strong { font-family: var(--font-heading); font-weight: 900; font-size: 1.3rem; color: var(--color-black); }
.account-card__cat { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #9b948c; margin-top: 0.3em; }
@media (max-width: 540px){ .accounts-grid { grid-template-columns: 1fr 1fr; } }

/* ========================================
   ROUND 14 — hover/tap-to-play work videos
   ======================================== */
.work-card__media.has-video { cursor: pointer; }
.work-card__video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 0.35s ease; z-index: 1;
}
.work-card__media.is--playing .work-card__video { opacity: 1; }
.work-card__media::after { z-index: 2; }       /* scrim above video */
.work-card__client { z-index: 3; }
.work-card__playbadge {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4;
    width: 58px; height: 58px; border-radius: 50%; background: rgba(26,26,26,0.66); color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.3s ease, transform 0.25s ease; backdrop-filter: blur(2px);
    border: 2px solid rgba(255,255,255,0.85);
}
.work-card__media:hover .work-card__playbadge { transform: translate(-50%, -50%) scale(1.08); }
.work-card__media.is--playing .work-card__playbadge { opacity: 0; }

/* accounts section clarifier note */
.accounts-note { font-size: 0.95rem; color: #6b655d; margin-top: 0.7em; max-width: 46ch; line-height: 1.5; }

/* account cards that are content-only (no follower count) */
.account-card__role { font-family: var(--font-heading); font-weight: 800; font-size: 1rem; color: var(--color-maroon); margin-top: 0.4em; }

/* ========================================
   ROUND 15 — content reel strip + GECO brand/web band
   ======================================== */
.reel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin: 2.8em 0 1em; }
.reel-head__title { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.reel-head__hint { font-size: 0.85rem; color: #9b948c; white-space: nowrap; }
.reel-strip {
    display: flex; gap: 1em; overflow-x: auto; padding: 0.3em 0.3em 1.2em;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.reel-strip::-webkit-scrollbar { height: 7px; }
.reel-strip::-webkit-scrollbar-thumb { background: rgba(26,26,26,0.18); border-radius: 4px; }
.reel {
    flex: 0 0 auto; width: 172px; aspect-ratio: 9 / 16; border-radius: 1em; padding: 1.1em;
    display: flex; flex-direction: column; color: #fff; text-decoration: none; scroll-snap-align: start;
    background: linear-gradient(155deg, var(--c1, #1a1a1a), var(--c2, #4b69f0));
    border: 2.5px solid #1a1a1a; box-shadow: 4px 5px 0 #1a1a1a;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.reel:hover { transform: translate(3px, 4px); box-shadow: 1px 1px 0 #1a1a1a; }
.reel__brand { font-family: var(--font-heading); font-weight: 800; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.92; }
.reel__title { font-family: var(--font-heading); font-weight: 900; font-size: 1.45rem; line-height: 1; letter-spacing: -0.02em; margin-top: auto; }
.reel__foot { font-size: 0.76rem; font-weight: 600; margin-top: 0.6em; display: flex; align-items: center; gap: 0.4em; opacity: 0.95; }
.reel__play { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.25); align-items: center; justify-content: center; font-size: 0.55rem; }

.geco-band { margin-top: 2.6em; padding: 1.6em 1.8em; background: #fff; border: 2.5px solid #1a1a1a; border-radius: 1.2em; box-shadow: 6px 7px 0 #1a1a1a; }
.geco-band__lead { font-size: 1.05rem; line-height: 1.55; max-width: 64ch; }
.geco-band__lead strong { font-weight: 700; }
.geco-brands { display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: 1em; }
.geco-chip { font-family: var(--font-heading); font-weight: 800; font-size: 0.95rem; padding: 0.4em 0.95em; border-radius: 999px; border: 2px solid #1a1a1a; background: var(--color-offwhite); }
.geco-chip--parent { background: #1a1a1a; color: #fff; }

/* marquee wordmark tiles (clients without a logo image) */
.marquee-logo__wm {
    font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05;
    font-size: clamp(0.8rem, 1.3vw, 1.1rem); color: #1a1a1a; text-align: center; padding: 0 0.4em;
    opacity: 0.5; transition: opacity 0.35s ease;
}
.marquee-logo:hover .marquee-logo__wm { opacity: 1; }

/* ========================================
   ROUND 16 — mobile / responsive pass
   ======================================== */
@media (max-width: 760px) {
    html, body { overflow-x: hidden; max-width: 100%; }

    /* hero scatter stickers off on phones (decorative, were overflowing) */
    .hero-stickers, .hero-drag-hint { display: none; }

    /* deck of cards -> horizontal scroll of separate cards (no hover on touch) */
    .services__row-cards {
        overflow-x: auto; overflow-y: visible; gap: 1em; padding: 3em 1.2em 1.4em;
        scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    }
    .services-card__wrap { margin-left: 0 !important; flex: 0 0 72vw; max-width: 290px; transform: none !important; scroll-snap-align: center; }

    /* about + contact clusters -> tidy centered wrap, scaled down */
    .sticker-cloud, .contact-stickers { position: static; min-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.7em; margin-top: 1.4em; }
    .float-chip { position: static !important; }
    .cloud-sticker { position: static !important; opacity: 1 !important; }
    .fc--sm { font-size: 1rem; } .fc--md { font-size: 1.15rem; } .fc--lg { font-size: 1.35rem; } .fc--xl { font-size: 1.6rem; }
    .fc-shape--circle { padding: 0.9em; }
    .cs--l { width: 116px; } .cs--m { width: 94px; } .cs--s { width: 76px; }

    /* accounts: long handles need room */
    .account-card__handle, .account-card__cat, .account-card__name { overflow-wrap: anywhere; }
    .accounts-head { gap: 0.6em; }
    .geco-band { padding: 1.3em 1.2em; }

    /* sections: a touch less side padding so nothing clips */
    .container { padding: 0 1.25em; }
}
@media (max-width: 460px) {
    .accounts-grid { grid-template-columns: 1fr; }
}