/* =========================================================================
   CreatorLab Studios — global stylesheet
   Editorial poster system: warm paper, ink typography, the brand gradient
   (magenta → violet → cyan) used as a scalpel, never as wallpaper.
   No frameworks. No build step.
   ========================================================================= */

/* ---- Fonts (self-hosted, variable) -------------------------------------- */
@font-face {
    font-family: 'Archivo';
    src: url('/assets/fonts/archivo-var.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('/assets/fonts/spacegrotesk-var.woff2') format('woff2');
    font-weight: 300 700;
    font-display: swap;
}
@font-face {
    font-family: 'Permanent Marker';
    src: url('/assets/fonts/permanentmarker-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

/* ---- Tokens -------------------------------------------------------------- */
:root {
    --ink:      #0B0B10;
    --ink-soft: #1A1A22;
    --paper:    #FAF9F6;
    --paper-2:  #F1EEE7;
    --tint:     #EFEAF9;   /* pale lavender — lab tint */
    --pink:     #E9349C;
    --violet:   #8B3DF0;
    --blue:     #27B3F0;
    --grad:     linear-gradient(100deg, var(--pink) 0%, var(--violet) 52%, var(--blue) 100%);
    --muted:    #5A5A66;
    --muted-light: #B9B9C6;
    --focus:    #8B3DF0;   /* focus ring — >=3:1 on every surface token (WCAG 1.4.11) */

    --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --font-marker: 'Permanent Marker', 'Comic Sans MS', cursive;

    --container: 1200px;
    --gutter: clamp(20px, 4vw, 48px);
    --radius: 14px;
    --shadow-hard: 6px 6px 0 var(--ink);
    --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---- Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.04; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--violet); color: #fff; }

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ---- Custom scrollbar ----------------------------------------------------- */
/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--violet) var(--paper-2);
}
/* WebKit (Chrome, Safari, Edge) — an inky rail with a gradient grip */
::-webkit-scrollbar {
    width: 13px;
}
::-webkit-scrollbar-track {
    background: var(--paper-2);
    border-left: 1.5px solid rgba(11, 11, 16, .18);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--pink), var(--violet), var(--blue));
    border: 2.5px solid var(--paper-2);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    border-width: 1.5px;
}

.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 300;
    background: var(--ink); color: #fff; padding: 10px 18px;
    border-radius: 8px; text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 12px; }

.container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ---- Type utilities ------------------------------------------------------ */
.eyebrow {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .22em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
}
.eyebrow::before {
    content: '';
    width: 34px; height: 3px;
    background: var(--grad);
    border-radius: 2px;
}
.eyebrow--light { color: var(--muted-light); }

.display {
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.015em;
    line-height: .95;
}

.marker {
    font-family: var(--font-marker);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.grad-text {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Brush-style gradient underline swash (echoes the "LAB" brush mark). */
.swash {
    position: relative;
    white-space: nowrap;
}
.swash > svg {
    position: absolute;
    left: -2%; right: -2%; bottom: -.18em;
    width: 104%; height: .28em;
    pointer-events: none;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.1;
    text-decoration: none;
    padding: 15px 28px;
    border-radius: 10px;
    border: 2px solid var(--ink);
    transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s;
    white-space: nowrap;
}
.btn--primary {
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow-hard);
    box-shadow: 4px 4px 0 rgba(11, 11, 16, .22);
}
.btn--primary:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 rgba(11,11,16,.28); }
.btn--gradient {
    background: var(--grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 4px 4px 0 rgba(11, 11, 16, .35);
}
.btn--gradient:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 rgba(11,11,16,.4); }
.btn--ghost {
    background: transparent;
    color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--ghost-light {
    background: transparent;
    color: #fff;
    border-color: #fff;
}
.btn--ghost-light:hover { background: #fff; color: var(--ink); }
.btn--big { font-size: 18px; padding: 19px 38px; }
.btn--nav { padding: 11px 20px; font-size: 15px; border-radius: 9px; }

/* ---- Animated link underline --------------------------------------------- */
.nav-link, .util-link, .footer-col a, .inline-link {
    position: relative;
    text-decoration: none;
}
.nav-link::after, .util-link::after, .footer-col a::after, .inline-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: -3px;
    width: 100%; height: 2px;
    background: var(--grad);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .28s var(--ease-out);
}
.nav-link:hover::after, .nav-link.is-active::after,
.util-link:hover::after, .util-link.is-active::after,
.footer-col a:hover::after, .inline-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}
.inline-link { font-weight: 700; }
.inline-link::after { transform: scaleX(1); opacity: .45; }
.inline-link:hover::after { opacity: 1; }

/* ---- Scroll progress ------------------------------------------------------ */
.scroll-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 250;
    pointer-events: none;
}
.scroll-progress span {
    display: block;
    height: 100%;
    background: var(--grad);
    transform-origin: left;
    transform: scaleX(0);
}

/* ---- Header --------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--paper);
}
.util-strip {
    background: var(--ink);
    color: #E8E8EF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 7px var(--gutter);
    font-size: 12.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
}
.util-strip__tag { margin: 0; display: flex; align-items: center; gap: 9px; }
.util-strip__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--grad);
    animation: pulse 2.4s infinite;
}
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.6); opacity: .6; } }
.util-strip__links { display: flex; gap: 22px; }
.util-link { color: #fff; font-weight: 700; }
.util-link--lang { color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; }

.main-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    padding: 0 var(--gutter);
    border-bottom: 1px solid rgba(11, 11, 16, .12);
    position: relative;
}
/* gradient hairline that grows on scroll */
.main-nav::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--grad);
    transform: scaleX(0);
    transition: transform .5s var(--ease-out);
}
.is-scrolled .main-nav::after { transform: scaleX(1); }

.main-nav__side { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }
.main-nav__side--left { justify-content: flex-end; }
.main-nav__side--right { justify-content: flex-start; }
.main-nav__side--right nav { display: flex; gap: clamp(16px, 2.4vw, 34px); align-items: center; }
.main-nav__side--right .btn { margin-left: clamp(8px, 1.5vw, 22px); }
.nav-link {
    font-weight: 700;
    font-size: 15.5px;
    color: var(--ink);
    padding: 26px 0;
}
.main-nav__mark {
    display: block;
    padding: 16px 18px;
}
.main-nav__mark img {
    width: 196px; height: auto;
    transition: transform .3s var(--ease-out);
}
.main-nav__mark:hover img { transform: scale(1.05); }

.nav-burger {
    display: none;
    background: none;
    border: 2px solid var(--ink);
    border-radius: 9px;
    padding: 8px 14px;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.nav-burger__lines { display: inline-flex; flex-direction: column; gap: 4px; }
.nav-burger__lines i { width: 20px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .25s; }
.nav-burger[aria-expanded="true"] .nav-burger__lines i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger__lines i:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .nav-burger__lines i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---- Mobile poster menu --------------------------------------------------- */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: var(--ink);
    color: #fff;
    overflow-y: auto;
    padding: 130px var(--gutter) 40px;
}
.mobile-menu__inner { max-width: 560px; margin-inline: auto; }
.mobile-menu__nav { display: flex; flex-direction: column; }
.mobile-menu__nav a {
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(30px, 7.5vw, 44px);
    line-height: 1.12;
    color: #fff;
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
    display: flex;
    align-items: baseline;
    gap: 16px;
    transition: color .2s, padding-left .25s var(--ease-out);
}
.mobile-menu__nav a:hover { padding-left: 10px; }
.mobile-menu__nav a:hover,
.mobile-menu__nav a:focus-visible { color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.mobile-menu__nav em {
    font-family: var(--font-marker);
    font-style: normal;
    font-size: 15px;
    color: var(--muted-light);
    min-width: 34px;
    -webkit-text-fill-color: var(--muted-light);
}
.mobile-menu .btn { margin-top: 34px; width: 100%; }
.mobile-menu__foot {
    margin-top: 40px;
    font-size: 12px;
    letter-spacing: .3em;
    color: var(--muted-light);
    text-align: center;
}
body.menu-open { overflow: hidden; }

/* ---- Section scaffolding --------------------------------------------------- */
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section--flush-top { padding-top: clamp(30px, 4vw, 56px); }
.section--ink { background: var(--ink); color: #fff; }
.section--paper2 { background: var(--paper-2); }
.section--tint { background: var(--tint); }

.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head h2 {
    font-size: clamp(34px, 5vw, 58px);
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: -.015em;
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.lede { font-size: clamp(17px, 2vw, 20px); color: var(--muted); }
.section--ink .lede { color: var(--muted-light); }

/* ---- Textures -------------------------------------------------------------- */
/* Graph-paper grid (single full-frame background) */
.tex-grid {
    background-color: var(--paper);
    background-image:
        repeating-linear-gradient(0deg, rgba(11,11,16,.05) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(90deg, rgba(11,11,16,.05) 0 1px, transparent 1px 48px);
}

/* Dot-matrix field */
.tex-dots {
    background-color: var(--paper-2);
    background-image: radial-gradient(rgba(11,11,16,.13) 1.1px, transparent 1.6px);
    background-size: 22px 22px;
}

/* Dot-matrix on the lavender tint — violet dots, lab-notebook feel */
.tex-dots-tint {
    background-color: var(--tint);
    background-image: radial-gradient(rgba(139, 61, 240, .16) 1.2px, transparent 1.7px);
    background-size: 24px 24px;
}

/* Graph grid on the lavender tint — violet ruling, distinct from the hero's ink grid */
.tex-grid-tint {
    background-color: var(--tint);
    background-image:
        repeating-linear-gradient(0deg, rgba(139, 61, 240, .12) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, rgba(139, 61, 240, .12) 0 1px, transparent 1px 40px);
}

/* Film noise on dark sections */
.tex-noise-dark { position: relative; }
.tex-noise-dark::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: .14;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Full-frame image backdrop for a section (single image, never tiled) */
.section--bgimg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Dark diagonal-stripe section (Creator Club surfaces) */
.section--stripes-club {
    background-image: url('/assets/img/bg-club.webp');
    background-size: cover;
    background-position: center;
    position: relative;
}
.section--stripes-club::before,
.section--stripes-club::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 120px;
    pointer-events: none;
}
.section--stripes-club::before { top: 0; background: linear-gradient(to bottom, var(--ink), transparent); }
.section--stripes-club::after { bottom: 0; background: linear-gradient(to top, var(--ink), transparent); }
.section--stripes-club > .container { position: relative; z-index: 1; }

/* Dark faceted-polygon section (same backdrop as the footer scene) */
.section--poly-dark {
    background-image:
        linear-gradient(rgba(11, 11, 16, .45), rgba(11, 11, 16, .45)),
        url('/assets/img/bg-footer.webp');
    background-size: cover;
    background-position: center;
    position: relative;
}
.section--poly-dark::before,
.section--poly-dark::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 130px;
    pointer-events: none;
}
.section--poly-dark::before { top: 0; background: linear-gradient(to bottom, var(--ink), transparent); }
.section--poly-dark::after { bottom: 0; background: linear-gradient(to top, var(--ink), transparent); }
.section--poly-dark > .container { position: relative; z-index: 1; }

/* Divider smoothing: fade a patterned section into its top/bottom edge color */
.tex-fade-top::after, .tex-fade-bottom::after { content: none; }
.tex-fade-top { position: relative; }
.tex-fade-top::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0;
    height: 110px;
    background: linear-gradient(to bottom, var(--fade-color, var(--paper)), transparent);
    pointer-events: none;
}
.tex-fade-bottom { position: relative; }
.tex-fade-bottom::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 110px;
    background: linear-gradient(to top, var(--fade-color, var(--paper)), transparent);
    pointer-events: none;
}

/* ---- Dividers --------------------------------------------------------------
   Container background = LOWER section color; SVG fill = UPPER section color.
   -1px overlap + paths starting at y=-2 kill sub-pixel seams (incl. iOS). */
.cl-divider {
    line-height: 0;
    margin-top: -1px;
    position: relative;
    z-index: 2;
}
.cl-divider svg {
    display: block;
    width: 100%;
    height: clamp(34px, 6vw, 80px);
}
.cl-divider--scribble, .cl-divider--ribbon { height: clamp(56px, 8vw, 96px); }
.cl-divider__half {
    position: absolute;
    left: 0; right: 0; top: -1px;
    height: 50%;
}
.cl-divider__stroke {
    position: absolute;
    inset: 0;
    height: 100% !important;
}
.cl-ribbon {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--ink);
    border-block: 2px solid rgba(255,255,255,.18);
    overflow: hidden;
    padding: 10px 0;
}
.cl-ribbon__track {
    display: flex;
    white-space: nowrap;
    animation: marquee 26s linear infinite;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .34em;
    color: #fff;
}
.cl-ribbon__track span { flex: 0 0 auto; }
@keyframes marquee { to { transform: translateX(-33.333%); } }
@media (prefers-reduced-motion: reduce) {
    .cl-ribbon__track, .footer-marquee__track, .hero-marquee__track { animation: none !important; }
    html { scroll-behavior: auto; }
}

/* ---- Cards / lift-tilt ------------------------------------------------------ */
.lift {
    transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.lift:hover {
    transform: translateY(-7px) rotate(-.5deg);
    box-shadow: 10px 14px 0 rgba(11, 11, 16, .12);
}

/* ---- FAQ (details/summary) -------------------------------------------------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq details {
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--paper);
    margin-bottom: 14px;
    overflow: hidden;
}
.faq summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    font-weight: 700;
    font-size: 17px;
    cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .faq-x {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    display: grid;
    place-items: center;
    font-weight: 900;
    transition: transform .3s var(--ease-out), background .2s, color .2s;
}
.faq details[open] .faq-x { transform: rotate(45deg); background: var(--ink); color: #fff; }
.faq details[open] summary { border-bottom: 1px dashed rgba(11,11,16,.25); }
.faq .faq-a { padding: 16px 22px 20px; color: var(--muted); }
.faq .faq-a p:last-child { margin-bottom: 0; }
.section--ink .faq details { background: var(--ink-soft); border-color: rgba(255,255,255,.25); }
.section--ink .faq summary .faq-x { border-color: #fff; }
.section--ink .faq details[open] .faq-x { background: #fff; color: var(--ink); }
.section--ink .faq .faq-a { color: var(--muted-light); }

/* ---- Forms ------------------------------------------------------------------ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form-grid .form-field--full { grid-column: 1 / -1; }
.form-field label {
    display: block;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: .04em;
    margin-bottom: 7px;
}
.form-field label .req { color: var(--pink); }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field select,
.form-field textarea {
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 10px;
    padding: 13px 15px;
    transition: box-shadow .15s;
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}
.form-hint { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.form-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--muted); }
.form-consent input { width: 24px; height: 24px; flex: 0 0 auto; margin-top: 0; accent-color: var(--violet); }
.form-msg {
    display: none;
    border: 2px solid var(--ink);
    border-radius: 10px;
    padding: 14px 18px;
    font-weight: 600;
    margin-bottom: 18px;
}
.form-msg.is-show { display: block; }
.form-msg--ok { background: #E7F8EE; border-color: #14804A; color: #0D5C34; }
.form-msg--err { background: #FDEBEF; border-color: #C0244B; color: #8F1737; }
.field-err { border-color: #C0244B !important; }
.field-err-note { color: #C0244B; font-size: 13.5px; font-weight: 600; margin-top: 5px; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none !important; }

/* Honeypot — visually removed, still in the accessibility-hidden DOM for bots */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* ---- Footer ------------------------------------------------------------------ */
.site-footer { background: var(--paper); }
.footer-scene {
    background: var(--ink);
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-top: -1px;
}
/* Faceted black-polygon backdrop; an ink veil keeps type contrast high and
   the top edge fades from flat ink so the torn divider stays seamless. */
.footer-scene--poly {
    background-image:
        linear-gradient(rgba(11, 11, 16, .45), rgba(11, 11, 16, .45)),
        url('/assets/img/bg-footer.webp');
    background-size: cover;
    background-position: center;
}
.footer-scene--poly::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 150px;
    background: linear-gradient(to bottom, var(--ink), transparent);
    pointer-events: none;
}

.footer-scene__grain {
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: .13;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.footer-cta { padding: clamp(60px, 8vw, 110px) var(--gutter) clamp(40px, 5vw, 70px); position: relative; }
.footer-cta__display {
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    line-height: .92;
    font-size: clamp(44px, 9.2vw, 128px);
    letter-spacing: -.02em;
    margin: 0 0 34px;
    display: flex;
    flex-direction: column;
}
.footer-cta__display span { display: block; }
.outline-l1, .outline-l3 {
    color: transparent;
    -webkit-text-stroke: 2px rgba(255,255,255,.85);
}
.outline-l2 {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-left: .8em;
}
.outline-l3 { padding-left: .35em; }
.footer-cta__actions { display: flex; gap: 16px; flex-wrap: wrap; }

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    padding-top: clamp(30px, 4vw, 50px);
    padding-bottom: clamp(40px, 5vw, 60px);
    border-top: 1px solid rgba(255,255,255,.16);
    position: relative;
}
.footer-brand img { width: 230px; margin-bottom: 18px; }
.footer-brand p { color: var(--muted-light); font-size: 15.5px; max-width: 300px; }
.footer-brand__mail {
    display: inline-block;
    color: #fff; font-weight: 700; text-decoration: none;
    border-bottom: 2px solid var(--violet);
    margin-right: 18px;
}
.footer-col h3 {
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted-light);
    margin-bottom: 16px;
}
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer-col a { color: #fff; font-weight: 500; font-size: 15.5px; }

.footer-marquee {
    border-block: 1px solid rgba(255,255,255,.16);
    overflow: hidden;
    padding: 14px 0;
    position: relative;
}
.footer-marquee__track {
    display: flex;
    white-space: nowrap;
    animation: marquee 30s linear infinite;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(18px, 2.4vw, 26px);
    letter-spacing: .3em;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.footer-marquee__track span { flex: 0 0 auto; }
.footer-legal {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 22px;
    padding-bottom: 26px;
    font-size: 13.5px;
    color: var(--muted-light);
    position: relative;
}
.footer-legal p { margin: 0; }
.footer-legal__note { font-family: var(--font-marker); font-size: 14px; color: #8F8FA3; }

/* =========================================================================
   PAGE SECTIONS
   ========================================================================= */

/* ---- Home hero: the poster ------------------------------------------------ */
.hero {
    position: relative;
    padding: clamp(40px, 6vw, 90px) 0 clamp(120px, 13vw, 170px);
    overflow: hidden;
}
.hero .container { position: relative; }
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    border: 2px solid var(--ink);
    border-radius: 999px;
    padding: 8px 18px;
    background: #fff;
    box-shadow: 3px 3px 0 rgba(11,11,16,.15);
    margin-bottom: clamp(24px, 3vw, 40px);
}
.hero-kicker i {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--grad);
}
.hero h1 {
    /* Sized so the longest line clears the hero side column at every width. */
    font-size: clamp(52px, 7.2vw, 108px);
    letter-spacing: -.025em;
    line-height: .9;
    text-transform: uppercase;
    font-weight: 900;
    margin: 0 0 clamp(22px, 3vw, 36px);
    position: relative;
    z-index: 2;
}
.hero h1 .h1-l2 { display: block; padding-left: clamp(24px, 5vw, 84px); }
.hero h1 .h1-l3 { display: block; }
/* Poster rhythm: solid / outline / solid+swash */
.hero h1 .h1-outline {
    color: transparent;
    -webkit-text-stroke: 3px var(--ink);
    text-stroke: 3px var(--ink);
}
@supports not ((-webkit-text-stroke: 1px black) or (text-stroke: 1px black)) {
    .hero h1 .h1-outline { color: var(--ink); }
}
.hero-sub {
    max-width: 520px;
    font-size: clamp(17px, 2vw, 20px);
    color: var(--muted);
    position: relative;
    z-index: 2;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 30px; position: relative; z-index: 2; }
.hero-side {
    position: absolute;
    right: var(--gutter);
    top: 0;
    width: min(430px, 31vw);
    z-index: 3; /* collage: the cluster sits over the type, never under it */
}

/* Layered collage cluster: artwork + spinning badge + note card overlap. */
.hero-cluster {
    position: relative;
    transition: transform .35s var(--ease-out);
}
.hero-art {
    width: 100%;
    height: auto;
    /* Artwork ships with real alpha — it sits directly on the paper grid. */
    transform: rotate(3deg);
    animation: heroFloat 7s ease-in-out infinite;
}
@keyframes heroFloat {
    0%, 100% { transform: rotate(3deg) translateY(0); }
    50% { transform: rotate(1.5deg) translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) { .hero-art { animation: none; } }
.hero-cluster .hero-badge {
    position: absolute;
    top: -30px;
    left: -38px;
    width: clamp(104px, 9.5vw, 138px);
}
.hero-cluster .hero-card {
    margin: -40px 0 0 auto;
    position: relative;
    max-width: 310px;
}

/* Line-art ornaments */
.hero-orn {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}
.hero-orn--arc {
    width: clamp(80px, 9vw, 130px);
    left: calc(var(--gutter) * -0.4);
    top: 40px;
}
.hero-orn--plus {
    width: 26px;
    left: 58%;
    top: 84px;
    animation: spin 14s linear infinite;
}
.hero-orn--tri {
    width: clamp(30px, 3vw, 44px);
    right: 8%;
    bottom: -30px;
    transform: rotate(-12deg);
}
@media (prefers-reduced-motion: reduce) { .hero-orn--plus { animation: none; } }

.hero-badge {
    position: relative;
    width: clamp(130px, 12vw, 170px);
    aspect-ratio: 1;
}
.hero-badge__spin {
    position: absolute; inset: 0;
    animation: spin 22s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .hero-badge__spin { animation: none; } }
.hero-badge__core {
    position: absolute;
    inset: 24%;
    display: grid;
    place-items: center;
}
.hero-badge__core img { width: 100%; }
.hero-card {
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hard);
    padding: 20px 22px;
    transform: rotate(2.4deg);
    max-width: 280px;
}
.hero-card .marker { font-size: 15px; color: var(--violet); margin: 0 0 4px; }
.hero-card p:last-child { margin: 0; font-weight: 600; font-size: 15.5px; }
.hero-scrawl {
    display: inline-block;
    margin: 18px 0 0 6px;
    font-family: var(--font-marker);
    font-size: clamp(15px, 1.6vw, 19px);
    color: var(--muted);
    transform: rotate(-2deg);
    position: relative;
    z-index: 2;
}

/* ---- Hero v2: the type monument ------------------------------------------- */
.hero--monument .container { text-align: center; position: static; }
.hero--monument { padding-bottom: clamp(130px, 14vw, 190px); }
.hero-mono {
    font-size: clamp(46px, 8.6vw, 136px) !important;
    margin-inline: auto;
}
.hero--monument .hero-mono .h1-l2 {
    padding-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .05em;
}
.h1-art {
    display: inline-block;
    height: 1.34em;
    width: auto;
    transform: rotate(-5deg);
    animation: heroFloat 7s ease-in-out infinite;
    /* Oversized on purpose: the artwork overlaps its own line's cap height
       and the negative margins keep the letter spacing tight around it. */
    margin: -.24em -.06em;
}
@keyframes heroFloat {
    0%, 100% { transform: rotate(-5deg) translateY(0); }
    50% { transform: rotate(-2deg) translateY(-6%); }
}
@media (prefers-reduced-motion: reduce) { .h1-art { animation: none; } }
.h1-art--fallback { height: .8em; }
.hero--monument .hero-sub {
    max-width: 620px;
    margin-inline: auto;
}
.hero--monument .hero-ctas { justify-content: center; }
.hero--monument .hero-scrawl { margin-left: 0; }

/* Corner pins */
.hero-pin { position: absolute; z-index: 3; }
.hero-pin--badge {
    top: clamp(20px, 3vw, 44px);
    right: clamp(20px, 5vw, 84px);
    width: clamp(104px, 9vw, 136px);
}
.hero-pin--card {
    left: var(--gutter);
    bottom: clamp(100px, 11vw, 150px);
    max-width: 285px;
    text-align: left;
    transform: rotate(-2.5deg);
}

/* marquee under hero */
.hero-marquee {
    position: absolute;
    left: 0; right: 0; bottom: clamp(28px, 4.5vw, 54px);
    overflow: hidden;
    border-block: 2px solid var(--ink);
    background: #fff;
    padding: 10px 0;
    transform: rotate(-1.2deg) scale(1.02);
    z-index: 3;
}
.hero-marquee__track {
    display: flex;
    white-space: nowrap;
    animation: marquee 24s linear infinite;
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(14px, 1.8vw, 19px);
    letter-spacing: .22em;
}
.hero-marquee__track span { flex: 0 0 auto; }
.hero-marquee__track b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- Service diptych (home): two poster panels, one framed pair ----------- */
.duo {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 2.5px solid var(--ink);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 10px 12px 0 rgba(11, 11, 16, .13);
}
.duo__panel {
    position: relative;
    padding: clamp(30px, 4.2vw, 60px);
    overflow: hidden;
}
.duo__panel--light {
    background: #fff;
    /* White chevron ridges (inverted from the supplied texture) —
       forward-motion texture behind the Websites pitch. */
    background-image: url('/assets/img/bg-stripes.webp');
    background-size: cover;
    background-position: center;
}
.duo__panel--dark {
    background: var(--ink);
    color: #fff;
    border-left: 2.5px solid var(--ink);
    /* Same chevron texture as the light panel, kept in a deep ink band —
       the two halves mirror each other. */
    background-image: url('/assets/img/bg-stripes-dark.webp');
    background-size: cover;
    background-position: center;
}
.duo__tag {
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    display: inline-block;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    padding: 6px 14px;
    margin: 0 0 20px;
}
.duo__panel--dark .duo__tag { color: var(--blue); }
.duo__title {
    font-size: clamp(26px, 2.9vw, 40px);
    text-transform: uppercase;
    letter-spacing: -.01em;
    position: relative;
    z-index: 1;
}
.duo__lede { color: var(--muted); position: relative; z-index: 1; }
.duo__panel--dark .duo__lede { color: var(--muted-light); }
.duo__panel .svc-row__list { position: relative; z-index: 1; margin-bottom: 26px; }
.duo__panel--dark .svc-row__list li { border-bottom-color: rgba(255, 255, 255, .2); }
.duo__actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
/* Giant watermark numeral */
.duo__num {
    position: absolute;
    right: -8px;
    bottom: -42px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(140px, 14vw, 210px);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2.5px rgba(11, 11, 16, .13);
    pointer-events: none;
}
.duo__panel--dark .duo__num { -webkit-text-stroke: 2.5px rgba(255, 255, 255, .16); }

/* The sticker bridging the seam */
.duo__bridge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-7deg);
    z-index: 4;
    width: 148px;
    height: 148px;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    border: 3px solid var(--ink);
    box-shadow: 5px 6px 0 rgba(11, 11, 16, .3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    transition: transform .25s var(--ease-out);
}
.duo__bridge:hover { transform: translate(-50%, -50%) rotate(0deg) scale(1.07); }
.duo__bridge-plus {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 34px;
    line-height: 1;
}
.duo__bridge-label {
    font-family: var(--font-marker);
    font-size: 17px;
    line-height: 1.2;
    margin-top: 2px;
}

/* ---- Services section: drafting-tools accent ------------------------------- */
.section--tools { position: relative; overflow: hidden; }
.svc-tools {
    position: absolute;
    right: clamp(-40px, 2vw, 120px);
    top: -30px;
    width: clamp(240px, 21vw, 330px);
    height: auto;
    z-index: 1;
    pointer-events: none;
    transform: rotate(4deg);
    filter: drop-shadow(0 20px 30px rgba(11, 11, 16, .16));
    animation: toolsFloat 9s ease-in-out infinite;
}
@keyframes toolsFloat {
    0%, 100% { transform: rotate(4deg) translateY(0); }
    50% { transform: rotate(6deg) translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) { .svc-tools { animation: none; } }
.section--tools .container { position: relative; z-index: 2; }
@media (max-width: 1100px) { .svc-tools { display: none; } }

/* ---- Work section: wireframe-phone accent ---------------------------------- */
.section--workphone { position: relative; overflow: hidden; }
.work-phone {
    position: absolute;
    right: clamp(-30px, 3vw, 140px);
    top: 30px;
    width: clamp(200px, 17vw, 270px);
    height: auto;
    z-index: 1;
    pointer-events: none;
    transform: rotate(-3deg);
    filter: drop-shadow(0 20px 30px rgba(11, 11, 16, .18));
    animation: workPhoneFloat 10s ease-in-out infinite;
}
@keyframes workPhoneFloat {
    0%, 100% { transform: rotate(-3deg) translateY(0); }
    50% { transform: rotate(-5deg) translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) { .work-phone { animation: none; } }
.section--workphone .container { position: relative; z-index: 2; }
@media (max-width: 1100px) { .work-phone { display: none; } }

/* ---- Editorial service rows (01 / 02) ------------------------------------- */
.svc-row {
    display: grid;
    grid-template-columns: minmax(90px, 170px) 1.2fr 1fr;
    gap: clamp(20px, 4vw, 60px);
    align-items: start;
    padding: clamp(40px, 6vw, 72px) 0;
}
.svc-row + .svc-row { border-top: 2px solid var(--ink); }
.svc-row__num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(56px, 8vw, 110px);
    line-height: .9;
    color: transparent;
    -webkit-text-stroke: 2.5px var(--ink);
    transform: translateY(-6px);
}
.svc-row:hover .svc-row__num { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; }
.svc-row h3 {
    font-size: clamp(30px, 4vw, 46px);
    text-transform: uppercase;
    letter-spacing: -.01em;
}
.svc-row__body p { color: var(--muted); }
.svc-row__list { list-style: none; margin: 0 0 22px; padding: 0; }
.svc-row__list li {
    padding: 11px 0 11px 34px;
    position: relative;
    border-bottom: 1px dashed rgba(11,11,16,.22);
    font-weight: 500;
}
.svc-row__list li::before {
    content: '';
    position: absolute;
    left: 2px; top: 17px;
    width: 16px; height: 16px;
    background: var(--grad);
    clip-path: polygon(20% 0, 100% 50%, 20% 100%, 20% 65%, 0 65%, 0 35%, 20% 35%);
    /* little play-button arrows echoing the logo mark */
}

/* ---- Pricing tickets -------------------------------------------------------- */
.tickets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 2.6vw, 30px);
    align-items: stretch;
}
.ticket {
    position: relative;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 18px;
    padding: 30px 28px 28px;
    display: flex;
    flex-direction: column;
    /* perforated ticket notches */
}
.ticket::before, .ticket::after {
    content: '';
    position: absolute;
    top: 92px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--paper-2);
    border: 2px solid var(--ink);
}
.ticket::before { left: -15px; clip-path: inset(0 0 0 46%); border-left-color: transparent; }
.ticket::after { right: -15px; clip-path: inset(0 46% 0 0); border-right-color: transparent; }
.section--paper .ticket::before, .section--paper .ticket::after { background: var(--paper); }
.ticket--featured {
    background: var(--ink);
    color: #fff;
    transform: rotate(0deg);
    box-shadow: 8px 10px 0 rgba(139, 61, 240, .35);
}
.ticket__tag {
    font-family: var(--font-marker);
    font-size: 15px;
    color: var(--violet);
    margin: 0 0 6px;
}
.ticket--featured .ticket__tag { color: var(--blue); }
.ticket h3 {
    font-size: 27px;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.ticket__price {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(40px, 4.4vw, 54px);
    letter-spacing: -.02em;
    margin: 6px 0 2px;
}
.ticket__price sup { font-size: .45em; top: -.75em; }
.ticket__dash {
    border: none;
    border-top: 2px dashed rgba(11,11,16,.3);
    margin: 18px -28px;
}
.ticket--featured .ticket__dash { border-top-color: rgba(255,255,255,.3); }
.ticket__best { font-size: 15px; color: var(--muted); min-height: 3.4em; }
.ticket--featured .ticket__best { color: var(--muted-light); }
.ticket ul { list-style: none; margin: 0 0 18px; padding: 0; flex: 1; }
.ticket ul li {
    padding: 8px 0 8px 28px;
    position: relative;
    font-size: 15.5px;
    font-weight: 500;
}
.ticket ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 13px;
    width: 14px; height: 14px;
    background: var(--grad);
    clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 16%, 84% 0, 39% 68%);
}
.ticket__todo {
    font-size: 13.5px;
    color: var(--muted);
    background: var(--tint);
    border-radius: 9px;
    padding: 10px 13px;
    margin-bottom: 18px;
}
.ticket--featured .ticket__todo { background: rgba(255,255,255,.1); color: var(--muted-light); }
.ticket .btn { width: 100%; }
.ticket__ribbon {
    position: absolute;
    top: -14px; right: 22px;
    background: var(--grad);
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    box-shadow: 2px 3px 0 rgba(11,11,16,.3);
}

/* ---- Process steps ----------------------------------------------------------- */
.process {
    counter-reset: step;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2.4vw, 28px);
}
.process--3 { grid-template-columns: repeat(3, 1fr); }
.process__step {
    counter-increment: step;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    padding: 26px 22px 22px;
    position: relative;
}
.process__step::before {
    content: '0' counter(step);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 15px;
    letter-spacing: .1em;
    display: inline-block;
    background: var(--ink);
    color: #fff;
    border-radius: 8px;
    padding: 5px 11px;
    margin-bottom: 16px;
}
.process__step:nth-child(2)::before { background: var(--pink); }
.process__step:nth-child(3)::before { background: var(--violet); }
.process__step:nth-child(4)::before { background: var(--blue); }
.process__step h3 { font-size: 20px; text-transform: uppercase; }
.process__step p { font-size: 15px; color: var(--muted); margin: 0; }
.process__step { box-shadow: 4px 5px 0 rgba(11,11,16,.1); }
.process__step:nth-child(odd) { transform: rotate(-.6deg); }
.process__step:nth-child(even) { transform: rotate(.6deg) translateY(10px); }

/* ---- Lab board (Our Work editorial spread) ------------------------------------ */
.board { position: relative; }
.board-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(16px, 2.2vw, 26px);
}
.board-item {
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: #fff;
    padding: 52px 26px 26px; /* top clearance keeps headings clear of the corner label */
    position: relative;
    overflow: hidden;
}
.board-item__label {
    position: absolute;
    top: 14px; right: 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1.5px solid var(--ink);
    background: var(--paper);
}
.board-item--a { grid-column: span 7; min-height: 300px; }
.board-item--b { grid-column: span 5; min-height: 300px; }

/* Screenshot cards: live-site entries with edge-to-edge browser shots */
.board-item--shot { padding: 0; display: flex; flex-direction: column; }
.board-shot {
    display: block;
    border-bottom: 2px solid var(--ink);
    overflow: hidden;
    flex: 1;
}
.board-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform .5s var(--ease-out);
}
.board-item--shot:hover .board-shot img { transform: scale(1.035); }
.board-item--shot .board-item__label--live {
    background: var(--grad);
    color: #fff;
    border-color: var(--ink);
}
.board-shot__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    background: #fff;
}
.board-shot__meta h3 { font-size: 20px; margin: 0; text-transform: uppercase; }
.board-shot__meta p { margin: 0; font-size: 13.5px; color: var(--muted); }
.board-shot__meta .inline-link { white-space: nowrap; }
.board-shot__note {
    margin: 0;
    padding: 0 20px 18px;
    background: #fff;
    font-size: 14.5px;
    color: var(--muted);
}
.board-item--c { grid-column: span 4; }
.board-item--d { grid-column: span 4; }
.board-item--e { grid-column: span 4; }
.board-item--f { grid-column: span 4; }
.board-item--g { grid-column: span 7; min-height: 300px; }
.board-item--side { grid-column: span 5; }

/* Full-width closing strip ("this spot is open") */
.board-item--strip {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 18px;
    flex-wrap: wrap;
    padding: 24px 26px;
}
.board-item--strip h3 { margin: 0; }
.board-item--strip p { margin: 0; }
.board-item--strip .board-item__label { position: static; order: 3; margin-left: auto; }
.board-item h3 { font-size: clamp(22px, 2.6vw, 30px); text-transform: uppercase; }
.board-item p { color: var(--muted); font-size: 15.5px; }
.board-item .marker { color: var(--violet); font-size: 15px; }

/* ---- Creator Club dark section ------------------------------------------------ */
.club-panel {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
}
.club-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.club-stat {
    border: 2px solid rgba(255,255,255,.25);
    border-radius: var(--radius);
    background: var(--ink-soft);
    padding: 20px;
    position: relative;
    overflow: hidden;
}
.club-stat--wide { grid-column: 1 / -1; }
.club-stat h3 {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted-light);
    margin: 0 0 10px;
}
.club-stat__concept {
    display: block;
    text-align: right;
    margin: -4px 0 10px;
    font-family: var(--font-marker);
    font-size: 12.5px;
    color: var(--blue);
}
.club-bars { display: flex; align-items: flex-end; gap: 8px; height: 74px; }
.club-bars i {
    flex: 1;
    border-radius: 5px 5px 2px 2px;
    background: var(--grad);
    opacity: .85;
    animation: grow 1.2s var(--ease-out) both;
}
@keyframes grow { from { transform: scaleY(.1); transform-origin: bottom; } }
.club-line { width: 100%; height: 70px; }
.club-score {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 44px;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---- Español band -------------------------------------------------------------- */
.es-band {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(24px, 4vw, 60px);
    align-items: center;
}
.es-band h2 { font-size: clamp(32px, 4.6vw, 52px); text-transform: uppercase; }
.es-band .marker { color: var(--pink); font-size: clamp(17px, 2vw, 21px); }

/* ---- CTA banner ------------------------------------------------------------------ */
.cta-banner {
    border: 2.5px solid var(--ink);
    border-radius: 22px;
    background: #fff;
    box-shadow: 10px 12px 0 rgba(11,11,16,.14);
    padding: clamp(34px, 5vw, 64px);
    display: grid;
    grid-template-columns: 1.4fr auto;
    gap: 30px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.cta-banner::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 7px;
    background: var(--grad);
}
.cta-banner h2 { font-size: clamp(28px, 4vw, 46px); text-transform: uppercase; margin-bottom: 8px; }
.cta-banner p { margin: 0; color: var(--muted); }

/* Storefront banner: artwork pinned flush into the card's bottom-right
   corner (absolute — immune to row-height quirks), text column keeps clear. */
.cta-banner--storefront {
    grid-template-columns: 1fr;
    padding-right: clamp(360px, 46%, 640px);
    min-height: 400px;
}
.cta-storefront {
    position: absolute;
    right: clamp(-90px, -5vw, -50px); /* bleeds past the card edge — clipped like a photo crop */
    bottom: 85px;
    width: clamp(400px, 52%, 760px);
    height: auto;
    filter: drop-shadow(0 16px 26px rgba(11, 11, 16, .18));
}
@media (max-width: 760px) {
    .cta-banner--storefront { padding-right: clamp(20px, 4vw, 48px); min-height: 0; }
    .cta-storefront {
        position: static;
        width: min(92%, 420px);
        margin: 18px auto calc(clamp(34px, 5vw, 64px) * -0.9);
        display: block;
    }
}

/* ---- Page hero (interior pages) --------------------------------------------------- */
.page-hero {
    padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 100px);
    position: relative;
    overflow: hidden;
}
.page-hero h1 {
    font-size: clamp(42px, 8vw, 104px);
    text-transform: uppercase;
    letter-spacing: -.02em;
    line-height: .93;
    margin: 0 0 20px;
}
.page-hero .lede { max-width: 640px; }
.page-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* ---- Client preview gate --------------------------------------------------------------- */
.preview-gate {
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 18px;
    box-shadow: var(--shadow-hard);
    padding: clamp(24px, 4vw, 40px);
    margin-top: 30px;
}
.preview-gate input { text-align: center; font-size: 20px; }
.preview-gate .btn { margin-top: 18px; }

/* ---- Contact hero plane -------------------------------------------------------------- */
.page-hero--plane { overflow: visible; }
.contact-plane {
    position: absolute;
    right: clamp(20px, 8vw, 150px);
    top: 24px;
    width: clamp(230px, 22vw, 320px);
    height: auto;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 18px 28px rgba(11, 11, 16, .18));
    animation: planeFloat 8s ease-in-out infinite;
}
@keyframes planeFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) { .contact-plane { animation: none; } }
@media (max-width: 1100px) { .contact-plane { display: none; } }

/* ---- Split feature rows ------------------------------------------------------------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}
.split h2 { font-size: clamp(30px, 4.4vw, 50px); text-transform: uppercase; }
.split p { color: var(--muted); }
.section--ink .split p { color: var(--muted-light); }

/* ---- Checklist ("problems we fix") --------------------------------------------------- */
.xlist { list-style: none; margin: 0; padding: 0; }
.xlist li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 13px 0;
    border-bottom: 1px dashed rgba(11,11,16,.22);
    font-weight: 500;
}
.xlist li::before {
    content: '✕';
    font-weight: 900;
    color: var(--pink);
    line-height: 1.5;
}
.xlist--check li::before { content: '✓'; color: var(--violet); }
.section--ink .xlist li { border-color: rgba(255,255,255,.18); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1100px) {
    .main-nav__side { display: none; }
    .main-nav {
        grid-template-columns: auto 1fr auto;
        padding-block: 10px;
    }
    .main-nav__mark { padding-left: 0; }
    .main-nav__mark img { width: 158px; }
    .nav-burger { display: inline-flex; justify-self: end; }
    .hero-orn--arc, .hero-orn--plus { display: none; }
    /* Diptych stacks: sticker becomes a flow item pinned to the joint,
       with extra panel padding so it never covers content. */
    .duo { grid-template-columns: 1fr; }
    .duo__panel--light { padding-bottom: 84px; }
    .duo__panel--dark { border-left: none; border-top: 2.5px solid var(--ink); padding-top: 84px; }
    .duo__bridge {
        position: static;
        transform: rotate(-7deg);
        margin: -66px auto;
        width: 132px;
        height: 132px;
    }
    .duo__bridge:hover { transform: rotate(0deg) scale(1.07); }
    .duo__num { font-size: 120px; bottom: -26px; }
    .hero-pin--badge { width: 92px; }
    .hero-pin--card {
        position: static;
        margin: 44px auto 0;
        transform: rotate(-1.5deg);
    }
    .tickets { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
    .ticket--featured { transform: none; }
    .process, .process--3 { grid-template-columns: 1fr 1fr; }
    .process__step:nth-child(even) { transform: rotate(.6deg); }
    .club-panel, .split { grid-template-columns: 1fr; }
    .board-item--a, .board-item--b { grid-column: span 12; min-height: 0; }
    .board-item--c, .board-item--d, .board-item--e, .board-item--f,
    .board-item--g, .board-item--side { grid-column: span 12; min-height: 0; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .svc-row { grid-template-columns: minmax(70px, 110px) 1fr; }
    .svc-row__side { grid-column: 2; }
}

@media (max-width: 760px) {
    body { font-size: 16px; }
    .util-strip { font-size: 11px; padding-block: 6px; }
    .util-strip__links { gap: 14px; }
    .util-strip__links a { white-space: nowrap; }
    .hero h1 .h1-l2 { padding-left: 8vw; }
    .hero { padding-bottom: 130px; }
    .hero-pin--badge { display: none; }
    .hero-pin--card { transform: rotate(1.2deg); }
    .form-grid { grid-template-columns: 1fr; }
    .process, .process--3 { grid-template-columns: 1fr; }
    .process__step { transform: none !important; }
    .es-band, .cta-banner { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-cta__actions .btn { width: 100%; }
    .svc-row { grid-template-columns: 1fr; }
    .svc-row__num { -webkit-text-stroke: 2px var(--ink); font-size: 52px; transform: none; }
    .club-stats { grid-template-columns: 1fr; }
    .board-item { padding: 50px 18px 20px; }
}

@media (max-width: 640px) {
    /* One clean row: drop the tagline, keep the two utility links. */
    .util-strip__tag { display: none; }
    .util-strip__links { width: 100%; justify-content: space-between; }
}

@media (max-width: 480px) {
    .btn { padding: 14px 20px; font-size: 15px; }
    .btn--big { padding: 16px 24px; font-size: 16px; }
    .hero-kicker { font-size: 11.5px; letter-spacing: .12em; }
}

/* ---- Offer hero: prospect website screenshot ---------------------------------- */
.offer-hero--shot {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}
.offer-shot {
    display: block;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-hard);
    transform: rotate(1.4deg);
    transition: transform .4s var(--ease-out);
}
a.offer-shot:hover { transform: rotate(0deg) translateY(-4px); }
.offer-shot__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #f3f0ea;
    border-bottom: 2px solid var(--ink);
}
.offer-shot__bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid var(--ink);
    flex: none;
}
.offer-shot__bar i:nth-child(1) { background: #ff5f57; }
.offer-shot__bar i:nth-child(2) { background: #febc2e; }
.offer-shot__bar i:nth-child(3) { background: #28c840; }
.offer-shot__bar b {
    margin-left: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.offer-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    object-position: top;
}
@media (max-width: 900px) {
    .offer-hero--shot { grid-template-columns: 1fr; }
    .offer-shot { max-width: 520px; transform: rotate(0deg); }
}
.offer-hero--shot h1 { font-size: clamp(36px, 5vw, 68px); overflow-wrap: anywhere; }

/* =========================================================================
   ACCESSIBILITY (WCAG 2.1 AA)
   Kept in one block so the rules that exist purely for conformance are easy
   to find, review and defend. Everything above is the design system; this is
   the safety net under it.
   ========================================================================= */

/* ---- Visually-hidden text -------------------------------------------------
   For headings and labels that the document outline needs but the poster
   layout does not show. Still read by screen readers, still focusable. */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- 1.4.10 Reflow: no loss of content at 320px ---------------------------
   Grid and flex children default to min-width:auto, so a long word or a wide
   inline child can push a track past the viewport even when the layout has
   already collapsed to one column. Zeroing the floor lets the track shrink,
   and the wrap rules break the offending word instead of the page. */
.club-panel > *, .club-stats > *, .es-band > *, .svc-row > *,
.split > *, .duo > *, .footer-grid > *, .process > *,
.tickets > *, .form-grid > * {
    min-width: 0;
}
p, li, dd, dt, figcaption, blockquote, .lede, .eyebrow {
    overflow-wrap: break-word;
}
/* Headlines keep their shape: they never hyphenate and never break mid-word
   at the sizes the layout was drawn for. */
h1, h2, h3, h4 { overflow-wrap: normal; word-break: normal; }

/* The copy joins phrases with typographic   ("change the 
   verdict") to control widows. Each run is one unbreakable word, and at phone
   widths those runs were wider than the viewport — the whole page scrolled
   sideways, losing content (WCAG 1.4.10). Bringing the display sizes down on
   phones lets every run fit on its own line: no hyphens, no broken words, no
   sideways scroll. */
@media (max-width: 480px) {
    /* !important is deliberate and scoped to phone widths: several headings
       carry an inline font-size (index.php, creator-club.php, pricing.php),
       and an inline style beats any selector without it. */
    h1 { font-size: clamp(22px, 8vw, 40px) !important; }
    h2 { font-size: clamp(20px, 6.6vw, 34px) !important; }
}
/* Safety net only. Headline copy is editable from the admin content editor,
   so a future long word must degrade to a break rather than to a broken page.
   With the sizes above this never fires for the current copy. */
@media (max-width: 360px) {
    h1, h2, h3, h4 { overflow-wrap: break-word; }
}

@media (max-width: 400px) {
    /* Below ~400px the poster's oversize display type is the last thing that
       still overhangs; collapse the remaining two-up grids so it can wrap.
       Deliberately NOT hyphens:auto — that split words like ONLINE into
       "ONLI-NE" on the Spanish hero. Long words wrap whole, or not at all. */
    .svc-row, .club-panel, .club-stats, .es-band { grid-template-columns: 1fr; }
    .svc-row__side { grid-column: auto; }
}

/* ---- 2.5.5 / 2.5.8 Target size --------------------------------------------
   The utility-strip links sat at 18px tall. Padding brings the hit area to
   24px+ without moving the text or changing the strip's height. */
.util-strip__links a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding-block: 3px;
}

/* ---- 2.3.3 / 2.2.2 Motion -------------------------------------------------
   The per-component reduced-motion rules above cover the named animations;
   this catch-all also stops anything added later, plus smooth scrolling and
   the marquees, which are the only content that moves for longer than 5s. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto; }
    .scroll-progress { display: none; }
}

/* ---- 3.3.1 Error identification -------------------------------------------
   The inline note the form script injects after an invalid field. Red alone
   never carries the message — the note is real text, tied to the input with
   aria-describedby, and the field is marked aria-invalid. */
.field-err-note {
    margin: 6px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #B3106A;            /* 5.1:1 on --paper, 4.6:1 on --paper-2 */
    display: flex;
    gap: 7px;
    align-items: flex-start;
}
.field-err-note::before {
    content: '!';
    flex: 0 0 auto;
    width: 17px; height: 17px;
    margin-top: 2px;
    border-radius: 50%;
    background: #B3106A;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
}
.form-field input.field-err,
.form-field select.field-err,
.form-field textarea.field-err {
    border-color: #B3106A;
    box-shadow: 0 0 0 1px #B3106A;
}

/* ---- 2.4.3 Focus order: modal mobile menu ---------------------------------
   The script marks the page behind the menu inert while it is open; this
   makes the state visible to sighted mouse users too. */
[inert], [inert] * { pointer-events: none; }

/* ---- 1.4.11 Focus visibility on dark panels -------------------------------
   Ink sections invert the ring's neighbours, so give the violet ring a thin
   light halo there — it keeps 3:1 against both the panel and the ring. */
.section--ink :focus-visible,
.footer-scene :focus-visible,
.mobile-menu :focus-visible {
    outline-color: var(--focus);
    box-shadow: 0 0 0 6px rgba(250, 249, 246, .35);
}