/* =========================================================
   quirk.bar — Memphis Bold Shapes
   Palette:
     #1A1A2E deep midnight   #FFF5E1 cream soda
     #FF6B35 electric tangerine   #3D1C7F deep violet
     #00A878 memphis teal   #FFD23F bright yellow
     #FF1493 hot magenta   #E8E8E8 concrete gray
   Fonts: Bungee, Rubik 700, Rubik Mono One, Space Grotesk
   ========================================================= */

:root {
    --midnight: #1A1A2E;
    --cream: #FFF5E1;
    --tangerine: #FF6B35;
    --violet: #3D1C7F;
    --teal: #00A878;
    --yellow: #FFD23F;
    --magenta: #FF1493;
    --concrete: #E8E8E8;

    --display: "Bungee", "Space Grotesk", system-ui, sans-serif;
    --secondary: "Rubik", "Space Grotesk", system-ui, sans-serif;
    --body: "Space Grotesk", system-ui, sans-serif;
    --label: "Rubik Mono One", "Space Grotesk", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--midnight);
    background: var(--cream);
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* Background dot pattern body-wide */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle, rgba(61, 28, 127, 0.08) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

/* =========================================================
   GRID DECORATIVE LAYER
   ========================================================= */
.grid-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.42;
}
.grid-line {
    position: absolute;
    background: var(--c, var(--tangerine));
}
.grid-line.v {
    top: 0;
    bottom: 0;
    left: var(--x);
    width: 3px;
}
.grid-line.h {
    left: 0;
    right: 0;
    top: var(--y);
    height: 3px;
}

/* =========================================================
   CONFETTI CANVAS
   ========================================================= */
.confetti {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
}

/* =========================================================
   ZIGZAG NAV
   ========================================================= */
.zigzag-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 92px;
    z-index: 60;
    background: var(--cream);
    border-bottom: 4px solid var(--midnight);
}
.zigzag-path {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
}
.nav-list {
    list-style: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}
.nav-item a {
    font-family: var(--label);
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--midnight);
    text-decoration: none;
    padding: 6px 10px;
    background: var(--cream);
    display: inline-block;
    transition: transform 220ms cubic-bezier(.34,1.56,.64,1), color 220ms;
    transform-origin: center;
}
.nav-item.peak a {
    transform: translateY(-14px) rotate(-6deg);
    color: var(--tangerine);
}
.nav-item.valley a {
    transform: translateY(14px) rotate(6deg);
    color: var(--violet);
}
.nav-item a:hover {
    color: var(--magenta);
}
.nav-item.bounce a {
    animation: navBounce 480ms cubic-bezier(.34,1.56,.64,1);
}
@keyframes navBounce {
    0%   { transform: translateY(var(--ny, 0)) rotate(var(--nr, 0deg)) scale(1); }
    40%  { transform: translateY(calc(var(--ny, 0px) - 18px)) rotate(calc(var(--nr, 0deg) + 6deg)) scale(1.18); }
    70%  { transform: translateY(calc(var(--ny, 0px) + 6px)) rotate(calc(var(--nr, 0deg) - 4deg)) scale(0.96); }
    100% { transform: translateY(var(--ny, 0)) rotate(var(--nr, 0deg)) scale(1); }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
    position: relative;
    min-height: 100vh;
    padding: 140px 6vw 120px;
    overflow: hidden;
    z-index: 2;
}
.hero-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.bshape {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--d, 200px);
    height: var(--d, 200px);
    background: var(--bg, var(--tangerine));
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
    opacity: 0;
    will-change: transform;
}
.bshape.show {
    animation: shapeBurst 720ms cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes shapeBurst {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(-30deg); opacity: 0; }
    60%  { transform: translate(0, 0) scale(1.12) rotate(8deg); opacity: 1; }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
}
.bshape.circle { border-radius: 50%; }
.bshape.circle.small { width: var(--d); height: var(--d); }
.bshape.triangle {
    background: transparent;
    width: 0;
    height: 0;
    border-left: calc(var(--d) / 2) solid transparent;
    border-right: calc(var(--d) / 2) solid transparent;
    border-bottom: var(--d) solid var(--bg);
}
.bshape.diamond {
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
}
.bshape.diamond.show {
    animation: diamondBurst 720ms cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes diamondBurst {
    0%   { transform: translate(-50%, -50%) rotate(15deg) scale(0); opacity: 0; }
    60%  { transform: translate(0,0) rotate(50deg) scale(1.12); opacity: 1; }
    100% { transform: translate(0,0) rotate(45deg) scale(1); opacity: 1; }
}
.bshape.ring {
    background: transparent;
    border: 14px solid var(--bg);
    border-radius: 50%;
}
.bshape.blob {
    border-radius: 62% 38% 50% 50% / 45% 60% 40% 55%;
}
.bshape.star {
    background: var(--bg);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    width: var(--d);
    height: var(--d);
}
.bshape.dotpanel {
    width: 220px;
    height: 140px;
    background:
        radial-gradient(circle, var(--violet) 4px, transparent 5px) 0 0/18px 18px,
        var(--cream);
    border: 3px solid var(--midnight);
    transform: translate(-50%, -50%) rotate(-8deg) scale(0);
}
.bshape.dotpanel.show {
    animation: dotBurst 720ms cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes dotBurst {
    0%   { transform: translate(-50%, -50%) rotate(20deg) scale(0); opacity: 0; }
    60%  { transform: translate(0,0) rotate(-12deg) scale(1.1); opacity: 1; }
    100% { transform: translate(0,0) rotate(-8deg) scale(1); opacity: 1; }
}
.bshape.squiggle, .bshape.zig {
    background: transparent;
    width: auto;
    height: auto;
}

.hero-content {
    position: relative;
    z-index: 5;
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 24px;
    transform: rotate(-1deg);
}
.kicker {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 24px;
}
.kicker-text {
    font-family: var(--label);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--tangerine);
    text-transform: uppercase;
    background: var(--midnight);
    padding: 8px 14px;
    transform: rotate(-2deg);
}
.dot-row {
    width: 64px;
    height: 8px;
    background-image: radial-gradient(circle, var(--violet) 3px, transparent 3.5px);
    background-size: 14px 8px;
    background-repeat: repeat-x;
}

.hero-title {
    font-family: var(--display);
    font-size: clamp(72px, 14vw, 200px);
    line-height: 0.92;
    letter-spacing: -0.02em;
    margin: 18px 0 28px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 28px;
    align-items: baseline;
}
.hero-title .word {
    display: inline-block;
    transform-origin: 50% 60%;
    transition: transform 320ms cubic-bezier(.34,1.56,.64,1), color 220ms;
}
.hero-title .w1 { color: var(--tangerine); transform: rotate(-3deg); }
.hero-title .w2 { color: var(--violet); transform: rotate(4deg); }
.hero-title .w-dot {
    color: var(--magenta);
    font-size: 0.6em;
    transform: translateY(-0.18em) rotate(0deg);
    animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse {
    0%, 100% { transform: translateY(-0.18em) scale(1) rotate(0deg); color: var(--magenta); }
    50%      { transform: translateY(-0.22em) scale(1.18) rotate(20deg); color: var(--yellow); }
}
.hero-title:hover .w1 { transform: rotate(-6deg) translateY(-6px); }
.hero-title:hover .w2 { transform: rotate(7deg) translateY(-4px); }

.hero-tag {
    font-family: var(--secondary);
    font-weight: 700;
    font-size: clamp(18px, 2.2vw, 26px);
    color: var(--midnight);
    max-width: 720px;
    margin: 0 auto 36px;
    line-height: 1.4;
}
.hero-tag em {
    font-style: normal;
    color: var(--magenta);
    background: var(--yellow);
    padding: 0 8px;
    transform: rotate(-2deg);
    display: inline-block;
}

.hero-actions {
    display: inline-flex;
    gap: 22px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.quirk-btn {
    font-family: var(--label);
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--cream);
    background: var(--midnight);
    border: 4px solid var(--tangerine);
    padding: 18px 28px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 8px 8px 0 var(--yellow);
    transform: rotate(-2deg);
    transition: transform 220ms cubic-bezier(.34,1.56,.64,1), box-shadow 220ms, background 220ms;
}
.quirk-btn:hover {
    transform: rotate(2deg) translateY(-4px) scale(1.04);
    box-shadow: 12px 12px 0 var(--magenta);
    background: var(--violet);
}
.quirk-btn.pink {
    background: var(--magenta);
    border-color: var(--yellow);
    box-shadow: 8px 8px 0 var(--violet);
    color: var(--cream);
}
.quirk-btn.pink:hover {
    background: var(--tangerine);
    box-shadow: 12px 12px 0 var(--teal);
}

.quirk-link {
    font-family: var(--secondary);
    font-weight: 700;
    font-size: 18px;
    color: var(--violet);
    text-decoration: none;
    border-bottom: 4px solid var(--teal);
    padding-bottom: 4px;
    transition: color 220ms, border-color 220ms, transform 220ms;
}
.quirk-link:hover {
    color: var(--magenta);
    border-color: var(--magenta);
    transform: translateY(-3px) rotate(-1deg);
}

/* Decorative corner labels */
.label-tag {
    font-family: var(--label);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--tangerine);
    text-transform: uppercase;
    display: inline-block;
}
.hero .label-tag {
    position: absolute;
    z-index: 4;
    background: var(--cream);
    padding: 6px 10px;
    border: 2px solid var(--midnight);
}
.hero .label-tag.tl { top: 110px; left: 4vw; transform: rotate(-6deg); }
.hero .label-tag.tr { top: 120px; right: 4vw; transform: rotate(5deg); color: var(--violet); border-color: var(--violet); }
.hero .label-tag.bl { bottom: 60px; left: 4vw; transform: rotate(4deg); color: var(--teal); border-color: var(--teal); }
.hero .label-tag.br { bottom: 80px; right: 4vw; transform: rotate(-5deg); color: var(--magenta); border-color: var(--magenta); }

.label-tag.dark { color: var(--midnight); }
.label-tag.light { color: var(--cream); }

/* =========================================================
   LIGHTNING BOLT DIVIDER
   ========================================================= */
.bolt-divider {
    width: 100%;
    height: 60px;
    position: relative;
    z-index: 3;
}
.bolt-divider svg {
    width: 100%;
    height: 100%;
    display: block;
}
.bolt-divider.flip svg {
    transform: scaleY(-1);
}

/* =========================================================
   SECTIONS BASE
   ========================================================= */
.section-light {
    background: var(--cream);
    color: var(--midnight);
    position: relative;
    z-index: 2;
    padding: 100px 6vw;
}
.section-dark {
    background: var(--midnight);
    color: var(--cream);
    position: relative;
    z-index: 2;
    padding: 110px 6vw;
}

.sec-head {
    max-width: 900px;
    margin: 0 auto 80px;
    text-align: center;
    transform: rotate(-1deg);
}
.sec-head .label-tag {
    background: var(--midnight);
    color: var(--yellow);
    padding: 8px 14px;
    transform: rotate(2deg);
    margin-bottom: 18px;
}
.sec-head.dark .label-tag {
    background: var(--yellow);
    color: var(--midnight);
}
.sec-title {
    font-family: var(--display);
    font-size: clamp(48px, 9vw, 110px);
    letter-spacing: -0.02em;
    line-height: 0.96;
    color: var(--tangerine);
    text-transform: uppercase;
}
.sec-title.light { color: var(--yellow); }
.sec-title .alt {
    color: var(--violet);
    display: inline-block;
    transform: rotate(3deg);
}
.sec-title .alt.teal { color: var(--teal); }
.sec-title .alt.magenta { color: var(--magenta); }
.sec-lede {
    margin-top: 22px;
    font-family: var(--secondary);
    font-weight: 700;
    font-size: clamp(16px, 1.8vw, 22px);
    line-height: 1.5;
    color: var(--midnight);
}
.sec-lede.light { color: var(--concrete); }

/* =========================================================
   SHAPES — BROKEN GRID
   ========================================================= */
.broken-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 90px;
    gap: 14px;
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
}

.block {
    color: var(--midnight);
    padding: 36px 32px;
    background: var(--bg);
    transition: transform 320ms cubic-bezier(.34,1.56,.64,1), box-shadow 320ms;
    will-change: transform;
    position: relative;
    transform-origin: center center;
}
.block h3 {
    font-family: var(--secondary);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.02em;
    margin: 12px 0 10px;
    color: var(--midnight);
}
.block p {
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--midnight);
    max-width: 340px;
}
.block .label-tag {
    margin-bottom: 6px;
}
.block.tilt-a { transform: rotate(-4deg); }
.block.tilt-b { transform: rotate(5deg); }
.block.tilt-c { transform: rotate(-2deg); }
.block.tilt-d { transform: rotate(7deg); }
.block.tilt-e { transform: rotate(-6deg); }
.block.tilt-f { transform: rotate(3deg); }
.hover-tilt:hover {
    transform: rotate(2deg) scale(1.05) !important;
    box-shadow: 14px 14px 0 var(--violet);
    z-index: 4;
}

/* circle block */
.circle-block {
    grid-column: 1 / span 4;
    grid-row: 1 / span 5;
    border-radius: 50%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 44px;
    color: var(--midnight);
    box-shadow: 10px 10px 0 var(--violet);
}
.circle-block p { color: var(--midnight); max-width: 80%; }

/* triangle block — large polygon */
.tri-block {
    grid-column: 5 / span 4;
    grid-row: 1 / span 5;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    padding: 0 36px 40px;
    color: var(--cream);
    background: var(--bg);
    aspect-ratio: 1.05;
}
.tri-block h3 { color: var(--cream); }
.tri-block p { color: var(--cream); max-width: 88%; }

/* polygon block (irregular pentagon-ish) */
.poly-block {
    grid-column: 9 / span 4;
    grid-row: 1 / span 4;
    clip-path: polygon(0% 18%, 16% 0%, 100% 8%, 92% 78%, 76% 100%, 6% 92%);
    color: var(--cream);
    padding: 56px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.poly-block h3, .poly-block p { color: var(--cream); }

/* ring block */
.ring-block {
    grid-column: 9 / span 4;
    grid-row: 5 / span 5;
    border-radius: 50%;
    aspect-ratio: 1;
    background: transparent;
    border: 18px solid var(--bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 50px;
    color: var(--midnight);
}
.ring-block h3, .ring-block p { color: var(--midnight); }
.ring-block .label-tag { color: var(--midnight); }

/* diamond block */
.diamond-block {
    grid-column: 1 / span 5;
    grid-row: 6 / span 5;
    aspect-ratio: 1;
    transform: rotate(-6deg);
    background: var(--bg);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 4px solid var(--midnight);
    box-shadow: 12px 12px 0 var(--magenta);
    background-image:
        radial-gradient(circle, rgba(61, 28, 127, 0.18) 2.5px, transparent 3px);
    background-size: 18px 18px;
    background-color: var(--bg);
}
.diamond-block h3, .diamond-block p { color: var(--midnight); }

/* hex block */
.hex-block {
    grid-column: 6 / span 4;
    grid-row: 6 / span 4;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    padding: 44px 56px;
    color: var(--cream);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hex-block h3, .hex-block p { color: var(--cream); }

@media (max-width: 900px) {
    .broken-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 80px;
    }
    .circle-block { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 1; }
    .tri-block    { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 1.1; }
    .poly-block   { grid-column: 1 / -1; grid-row: auto; padding: 50px 36px; min-height: 320px; }
    .ring-block   { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 1; }
    .diamond-block{ grid-column: 1 / -1; grid-row: auto; aspect-ratio: 1; }
    .hex-block    { grid-column: 1 / -1; grid-row: auto; min-height: 280px; }
}

/* =========================================================
   WORKS — STRIP
   ========================================================= */
.works-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 32px;
    max-width: 1280px;
    margin: 0 auto;
}
.work-card {
    position: relative;
    text-align: left;
    padding: 30px 28px 28px;
    background: var(--bg-card, var(--yellow));
    border: 4px solid var(--midnight);
    color: var(--midnight);
    cursor: pointer;
    box-shadow: 10px 10px 0 var(--tangerine);
    font-family: var(--body);
    transition: transform 320ms cubic-bezier(.34,1.56,.64,1), box-shadow 320ms, background 220ms;
    transform-origin: center;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.work-card .num {
    font-family: var(--display);
    font-size: 56px;
    line-height: 1;
    color: var(--violet);
    display: block;
    transform: rotate(-4deg);
    margin-bottom: 14px;
}
.work-card h3 {
    font-family: var(--secondary);
    font-weight: 700;
    font-size: 24px;
    color: var(--midnight);
    margin-bottom: 8px;
}
.work-card p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--midnight);
    margin-bottom: 18px;
}
.work-card .meta {
    font-family: var(--label);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--tangerine);
    text-transform: uppercase;
}
.work-card.tilt-a { transform: rotate(-3deg); }
.work-card.tilt-b { transform: rotate(2deg); }
.work-card.tilt-c { transform: rotate(-5deg); }
.work-card.tilt-d { transform: rotate(4deg); }
.work-card.tilt-e { transform: rotate(-2deg); }
.work-card.tilt-f { transform: rotate(6deg); }

.work-card:hover {
    transform: rotate(2deg) scale(1.05) !important;
    box-shadow: 16px 16px 0 var(--magenta);
    z-index: 5;
}

@media (max-width: 1024px) {
    .works-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .works-strip { grid-template-columns: 1fr; }
}

/* =========================================================
   MARQUEE / ZIGZAG TYPE
   ========================================================= */
.marquee-section {
    position: relative;
    z-index: 2;
    padding: 60px 0;
    background: var(--tangerine);
    border-top: 6px solid var(--midnight);
    border-bottom: 6px solid var(--midnight);
    overflow: hidden;
}
.marquee-row {
    overflow: hidden;
    white-space: nowrap;
}
.marquee-row.a { transform: rotate(-1.5deg); margin-bottom: 12px; }
.marquee-row.b { transform: rotate(1.5deg); background: var(--violet); padding: 10px 0; }

.marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 32px;
    font-family: var(--display);
    font-size: clamp(40px, 7vw, 96px);
    color: var(--midnight);
    letter-spacing: -0.02em;
    animation: marqueeScroll 32s linear infinite;
    padding: 6px 0;
}
.marquee-row.b .marquee-track {
    color: var(--yellow);
}
.marquee-track.reverse {
    animation-direction: reverse;
}
.marquee-track .bullet {
    color: var(--cream);
    font-size: 0.7em;
}
.marquee-row.a .marquee-track .bullet { color: var(--violet); }
.marquee-row.b .marquee-track .bullet { color: var(--magenta); }

@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* =========================================================
   MANIFESTO + TERRAZZO
   ========================================================= */
.manifesto {
    position: relative;
    overflow: hidden;
}
.terrazzo-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.55;
    z-index: 0;
}
.terr {
    position: absolute;
    display: block;
}
.terr.t1 { top: 6%; left: 4%; width: 90px; height: 60px; background: var(--magenta); clip-path: polygon(0 30%, 30% 0, 100% 20%, 80% 100%, 10% 90%); transform: rotate(12deg); }
.terr.t2 { top: 14%; right: 6%; width: 110px; height: 70px; background: var(--teal); clip-path: polygon(20% 0, 100% 10%, 90% 80%, 0 100%); transform: rotate(-18deg); }
.terr.t3 { top: 30%; left: 12%; width: 70px; height: 70px; background: var(--yellow); border-radius: 50%; }
.terr.t4 { top: 38%; right: 14%; width: 80px; height: 80px; background: var(--violet); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.terr.t5 { top: 56%; left: 8%; width: 130px; height: 50px; background: var(--tangerine); clip-path: polygon(0 0, 100% 30%, 90% 100%, 10% 80%); transform: rotate(7deg); }
.terr.t6 { top: 64%; right: 10%; width: 90px; height: 90px; background: var(--magenta); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); transform: rotate(-12deg); }
.terr.t7 { top: 80%; left: 20%; width: 70px; height: 70px; background: var(--teal); border-radius: 50%; }
.terr.t8 { top: 84%; right: 22%; width: 100px; height: 60px; background: var(--violet); clip-path: polygon(0 30%, 40% 0, 100% 30%, 80% 100%, 20% 100%); transform: rotate(20deg); }
.terr.t9 { top: 24%; left: 48%; width: 60px; height: 60px; background: var(--yellow); transform: rotate(35deg); }
.terr.t10 { top: 70%; left: 52%; width: 80px; height: 40px; background: var(--tangerine); border-radius: 30px; transform: rotate(-25deg); }

.manifesto-list {
    list-style: none;
    max-width: 980px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 36px;
}
.man-item {
    display: flex;
    gap: 28px;
    align-items: center;
    background: var(--cream);
    border: 4px solid var(--midnight);
    padding: 28px 32px;
    box-shadow: 10px 10px 0 var(--tangerine);
    transition: transform 320ms cubic-bezier(.34,1.56,.64,1), box-shadow 320ms;
}
.man-item p {
    font-family: var(--secondary);
    font-weight: 700;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.4;
    color: var(--midnight);
}
.num-shape {
    flex: none;
    width: 84px;
    height: 84px;
    background: var(--bg);
    color: var(--midnight);
    font-family: var(--display);
    font-size: 28px;
    display: grid;
    place-items: center;
    border: 4px solid var(--midnight);
    box-shadow: 6px 6px 0 var(--violet);
}
.m-tilt-a { transform: rotate(-2deg); }
.m-tilt-b { transform: rotate(1.5deg); }
.m-tilt-c { transform: rotate(-1deg); }
.m-tilt-d { transform: rotate(2.5deg); }
.m-tilt-e { transform: rotate(-1.5deg); }
.man-item:hover {
    transform: rotate(0deg) scale(1.03);
    box-shadow: 14px 14px 0 var(--magenta);
}
.m-tilt-a .num-shape { border-radius: 50%; }
.m-tilt-b .num-shape { clip-path: polygon(50% 0, 100% 100%, 0 100%); box-shadow: none; border: none; background: transparent; color: var(--midnight); position: relative; }
.m-tilt-b .num-shape::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    z-index: -1;
}
.m-tilt-c .num-shape { border-radius: 24px; }
.m-tilt-d .num-shape { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); border: none; box-shadow: none; }
.m-tilt-e .num-shape { transform: rotate(45deg); }
.m-tilt-e .num-shape > * { transform: rotate(-45deg); display: inline-block; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact {
    position: relative;
    overflow: hidden;
}
.contact-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.cshape {
    position: absolute;
    display: block;
}
.cshape.c1 { top: 8%; left: 5%; width: 200px; height: 200px; background: var(--magenta); border-radius: 50%; opacity: 0.85; }
.cshape.c2 { top: 12%; right: 8%; width: 0; height: 0; border-left: 90px solid transparent; border-right: 90px solid transparent; border-bottom: 160px solid var(--yellow); transform: rotate(18deg); }
.cshape.c3 { bottom: 12%; left: 10%; width: 160px; height: 160px; background: var(--teal); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); transform: rotate(-14deg); }
.cshape.c4 { bottom: 8%; right: 12%; width: 180px; height: 180px; background: transparent; border: 16px solid var(--tangerine); border-radius: 50%; }
.cshape.c5 { top: 46%; left: 2%; width: 80px; height: 80px; background: var(--yellow); transform: rotate(45deg); }
.cshape.c6 { top: 50%; right: 4%; width: 110px; height: 50px; background: var(--magenta); border-radius: 30px; transform: rotate(-22deg); }

.contact-inner {
    position: relative;
    z-index: 2;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.contact-inner .label-tag {
    background: var(--yellow);
    color: var(--midnight);
    padding: 8px 14px;
    transform: rotate(-3deg);
    margin-bottom: 18px;
}
.contact-title { color: var(--yellow); }

.quirk-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 50px;
    text-align: left;
    background: var(--cream);
    color: var(--midnight);
    border: 4px solid var(--yellow);
    padding: 36px 32px;
    box-shadow: 14px 14px 0 var(--magenta);
    transform: rotate(-1.5deg);
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.lbl {
    font-family: var(--label);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--violet);
    text-transform: uppercase;
}
.field input,
.field textarea {
    font-family: var(--body);
    font-size: 16px;
    padding: 14px 16px;
    background: var(--concrete);
    border: 3px solid var(--midnight);
    color: var(--midnight);
    outline: none;
    resize: vertical;
    transition: background 220ms, border-color 220ms, transform 220ms;
}
.field input:focus,
.field textarea:focus {
    background: var(--yellow);
    border-color: var(--magenta);
    transform: translateY(-2px);
}
.quirk-form .quirk-btn {
    grid-column: 1 / 2;
    justify-self: start;
}
.form-status {
    grid-column: 2 / -1;
    align-self: center;
    font-family: var(--label);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--teal);
    text-align: right;
    text-transform: uppercase;
}

@media (max-width: 700px) {
    .quirk-form { grid-template-columns: 1fr; transform: rotate(-1deg); padding: 28px 22px; }
    .quirk-form .quirk-btn { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
    .form-status { grid-column: 1 / -1; text-align: left; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
    background: var(--midnight);
    color: var(--cream);
    padding: 60px 6vw 24px;
    position: relative;
    z-index: 2;
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    padding-bottom: 30px;
}
.logo-mark {
    font-family: var(--display);
    font-size: 56px;
    color: var(--tangerine);
    background: var(--yellow);
    padding: 6px 16px;
    transform: rotate(-4deg);
    border: 4px solid var(--cream);
    line-height: 1;
}
.footer p {
    font-family: var(--secondary);
    font-weight: 700;
    font-size: 15px;
    color: var(--concrete);
    max-width: 420px;
    line-height: 1.5;
}
.foot-links {
    list-style: none;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.foot-links a {
    font-family: var(--label);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--yellow);
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 3px solid transparent;
    transition: color 220ms, border-color 220ms;
    padding-bottom: 4px;
}
.foot-links a:hover {
    color: var(--magenta);
    border-bottom-color: var(--magenta);
}
.foot-zig {
    width: 100%;
    height: 30px;
    display: block;
    margin-top: 16px;
}

/* =========================================================
   SCROLL PARALLAX (applied via JS using --tx,--ty,--tr)
   ========================================================= */
.bshape.parallax {
    transform: translate(calc(var(--tx, 0px)), calc(var(--ty, 0px))) rotate(var(--tr, 0deg));
}

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