/* Reset margins and default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-snap-type: none;
}

body {
    background-color: #000;
    overflow-x: hidden;
    /* Enable extremely smooth scrolling */
    scroll-behavior: smooth;
    /* Hide scrollbar for a cleaner look, optional */
    /* -ms-overflow-style: none;
    scrollbar-width: none; */
}

/* body::-webkit-scrollbar {
    display: none;
} */

/* Boot loader — full-screen white panel with the logo and a thin
   red progress bar driven by the canvas-frame preload progress. */
.site-loader {
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
}
.site-loader.is-done {
    opacity: 0;
    pointer-events: none;
}
.site-loader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: min(320px, 70vw);
}
.site-loader__logo {
    width: 160px;
    max-width: 70%;
    height: auto;
    display: block;
}
.site-loader__shapes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}
.site-loader__bar {
    width: 100%;
    height: 2px;
    background: #e8e8e8;
    overflow: hidden;
}
.site-loader__fill {
    width: 0%;
    height: 100%;
    background: #ff1e3c;
    transition: width 0.15s ease;
}
body.is-loading { overflow: hidden; }

.site-loader .loader {
    --path: #000;
    --dot: #ff1e3c;
    --duration: 3s;
    width: 36px;
    height: 36px;
    position: relative;
}
.site-loader .loader::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    display: block;
    background: var(--dot);
    top: 30px;
    left: 15px;
    transform: translate(-18px, -18px);
    animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.150, 0.860) infinite;
}
.site-loader .loader svg { display: block; width: 100%; height: 100%; }
.site-loader .loader svg rect,
.site-loader .loader svg polygon,
.site-loader .loader svg circle {
    fill: none;
    stroke: var(--path);
    stroke-width: 10px;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.site-loader .loader svg polygon {
    stroke-dasharray: 145 76 145 76;
    stroke-dashoffset: 0;
    animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.150, 0.860) infinite;
}
.site-loader .loader.triangle { width: 40px; }
.site-loader .loader.triangle::before {
    left: 17px;
    transform: translate(0, 0);
    animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.150, 0.860) infinite;
}
.site-loader .loader svg rect {
    stroke-dasharray: 192 64 192 64;
    stroke-dashoffset: 0;
    animation: pathRect var(--duration) cubic-bezier(0.785, 0.135, 0.150, 0.860) infinite;
}
.site-loader .loader svg circle {
    stroke-dasharray: 150 50 150 50;
    stroke-dashoffset: 75;
    animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.150, 0.860) infinite;
}

@keyframes pathTriangle {
    33% { stroke-dashoffset: 74; }
    66% { stroke-dashoffset: 147; }
    100% { stroke-dashoffset: 221; }
}
@keyframes dotTriangle {
    33% { transform: translate(0, 0); }
    66% { transform: translate(10px, -18px); }
    100% { transform: translate(-10px, -18px); }
}
@keyframes pathRect {
    25% { stroke-dashoffset: 64; }
    50% { stroke-dashoffset: 128; }
    75% { stroke-dashoffset: 192; }
    100% { stroke-dashoffset: 256; }
}
@keyframes dotRect {
    25% { transform: translate(0, 0); }
    50% { transform: translate(18px, -18px); }
    75% { transform: translate(0, -36px); }
    100% { transform: translate(-18px, -18px); }
}
@keyframes pathCircle {
    25% { stroke-dashoffset: 125; }
    50% { stroke-dashoffset: 175; }
    75% { stroke-dashoffset: 225; }
    100% { stroke-dashoffset: 275; }
}

.canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Keep it in the background */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#video-canvas {
    /* We want the canvas to act like object-fit: cover */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Intro video — full-screen overlay shown on first boot, fades out when done */
.intro-video {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    background: #000000;
    z-index: 100;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.intro-video.done {
    opacity: 0;
}
.intro-video.removed {
    display: none;
}

/* While the intro is playing, lock scroll and hide chrome */
body.intro-playing {
    overflow: hidden;
    height: 100vh;
}
body.intro-playing .site-header,
body.intro-playing .hero-bottom {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* Fixed header — visible on all frames */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 60px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-link {
    font-family: 'Teko', sans-serif;
    font-weight: 300;
    font-size: 30px;
    color: #252525;
    letter-spacing: -0.03em;
    line-height: 110%;
    text-decoration: none;
    transition: color 0.2s ease;
}

.header-link:hover {
    color: #ff1e3c;
}

.header-logo-link {
    display: flex;
    align-items: center;
}

.header-logo-img {
    height: 30px;
    width: auto;
}

/* Hamburger — hidden until the header collapses (desktop) or on mobile.
   Same look in both states: 72px red square, black bars, white on hover. */
.hamburger {
    display: none;
    cursor: pointer;
    padding: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    position: fixed;
    top: max(18px, env(safe-area-inset-top, 18px));
    right: max(18px, env(safe-area-inset-right, 18px));
    width: 72px;
    height: 72px;
    background: #ff1e3c;
    border: 1.5px solid #000000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    z-index: 200;
    transition: background-color 0.2s ease;
}

.hamburger:hover,
.hamburger:focus-visible { background: #ffffff; }

.hamburger span {
    display: block;
    width: 32px;
    height: 3px;
    background: #000000;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger X animation when open */
.hamburger.open span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
    opacity: 0;
}
.hamburger.open span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* Nav dropdown menu — opens directly below the floating hamburger button.
   Geometry tracks the 72px hamburger at top:18/right:18 with a 12px gap. */
.nav-menu {
    display: none;
    position: fixed;
    top: 102px;
    right: max(18px, env(safe-area-inset-right, 18px));
    min-width: 165px;
    background: #ffffff;
    border: 1.5px solid #000000;
    padding: 16px 24px;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 200;
}

.nav-menu.open {
    display: flex;
}

.nav-menu-link {
    font-family: 'Teko', sans-serif;
    font-weight: 300;
    font-size: 27px;
    color: #252525;
    letter-spacing: -0.03em;
    line-height: 110%;
    text-decoration: none;
    transition: color 0.2s ease;
}

.nav-menu-link:hover {
    color: #ff1e3c;
}

/* Collapsed state — hide full nav, show hamburger only */
.site-header.collapsed .header-link {
    display: none;
}

.site-header.collapsed .header-logo-link {
    display: none;
}

.site-header.collapsed .hamburger {
    display: flex;
}

.site-header.collapsed {
    justify-content: flex-end;
}
/* Hero bottom wordmark — fixed at viewport bottom, fades out on scroll */
.hero-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    display: flex;
    justify-content: flex-start;
    padding: 0 2vw 2vh;
    box-sizing: border-box;
}

.hero-bottom.hidden {
    opacity: 0;
}

.hero-bottom-text {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(80px, 17vw, 320px);
    line-height: 0.78;
    letter-spacing: -0.03em;
    color: #ff1e3c;
    text-transform: none;
    white-space: nowrap;
    display: block;
}
/* This container creates the scroll height to map to the video frames */
.scroll-container {
    /* Height is now driven by canvas spacers + the pinned process stack inside. */
    position: relative;
    z-index: 1;
}

/* Canvas-progressing spacers — equal so the 4 frames land at 25/50/75/100%
   of the video. canvas-post is 1 viewport to absorb the -100vh range offset
   so About enters exactly when the video reaches its final frame.
   Lower the segment height to make the background video advance faster
   per unit of scroll (frame positions stay at 25/50/75/100% regardless). */
/* canvas-pre bumped by ~40vh ≈ one second of video scroll (711 frames /
   ~24fps over the 900vh canvas-progressing total) so the services frame
   begins one second of video later than its previous entry point. */
.canvas-pre  { height: 240vh; }
.canvas-mid  { height: 200vh; }
.canvas-post { height: 100vh; }

.white-frame {
    position: absolute;
    /* Floating panel: 80vh tall, centered horizontally + vertically in viewport.
       Top offset by +10vh so the panel sits centered when the matching scrollY snaps. */
    top: calc(var(--fraction) * (100% - 100vh) + 10vh);
    left: 50%;
    transform: translateX(-50%);
    width: min(1400px, 92vw);
    height: 80vh;
    background-color: white;
    overflow: hidden;
    z-index: 2;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

/* Empty viewport-sized snap frames placed every 4.5s of scroll-video time.
   Transparent so the canvas animation stays visible. */
.empty-frame {
    position: absolute;
    top: calc(var(--fraction) * (100% - 100vh));
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    pointer-events: none;
    z-index: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* ===========================================================
   SERVICES — vertical card stack (frame 1)
   Wrapper drives 500vh of scroll; the inner UI pins via
   position: sticky and JS swaps the active card index based
   on scroll progress through the wrapper.
   =========================================================== */

/* ===========================================================
   SERVICES — CARD DRAWER (top-edge Rolodex)
   - 500vh wrapper keeps the canvas-freeze math intact.
   - 100vh sticky stack hosts a 3D perspective stage.
   - Scroll inside the wrapper drives `focusedPos` (0..4); each
     card interpolates rest tilt (-74°) → focus tilt (-50°) via
     smoothstep, with a small Z-lift at focus.
   - Tap focused card → SELECTED (lift + untilt, dim others).
   - Tap again → OPEN (full-frame detail panel).
   =========================================================== */

.services-stack-wrapper {
    position: relative;
    width: 100%;
    height: 200vh;
    z-index: 5;
}

/* ===========================================================
   SCROLL-TILTED GRID — paired title + content tiles that rise
   tilted from below, settle into focus, then tilt away above.
   Ported from a framer-motion editorial component.
   =========================================================== */

.services-grid {
    position: relative;
    width: 100%;
    background: transparent;
    padding: 12vh 0 6vh;
}

.services-grid-eyebrow {
    position: relative;
    margin: 0 auto;
    max-width: 1400px;
    padding: 0 6vw;
    font-family: 'Teko', sans-serif;
    font-size: 12px;
    letter-spacing: 0.28em;
    color: #000000;
    text-transform: uppercase;
}

.services-grid-inner {
    margin: 8vh auto 6vh;
    padding: 18vh 6vw;
    width: 100%;
    max-width: 1500px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: clamp(40px, 5vw, 80px);
    box-sizing: border-box;
}

.svc-tile {
    position: relative;
    margin: 0;
    perspective: 900px;
    will-change: transform;
    z-index: 10;
}

.svc-tile__inner {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: 50% 50%;
    will-change: filter, transform;
    backface-visibility: hidden;
    border: 2px solid #000000;
}

/* Title tile — equal column width, content pinned to the TOP, oversize Teko name. */
.svc-tile--title .svc-tile__inner {
    background: #000000;
    color: #ffffff;
    justify-content: flex-start;
    aspect-ratio: 5 / 6;
    padding: clamp(28px, 3vw, 52px);
    gap: clamp(20px, 2vw, 36px);
}

/* Content tile — same aspect / size as title; packed with the three items. */
.svc-tile--content .svc-tile__inner {
    background: #ff1e3c;
    color: #000000;
    justify-content: space-between;
    aspect-ratio: 5 / 6;
    padding: clamp(28px, 3vw, 52px);
    gap: clamp(18px, 2.2vw, 32px);
}

.svc-tile__num {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(16px, 1.1vw, 22px);
    letter-spacing: 0.22em;
    line-height: 1;
    margin: 0;
    opacity: 0.85;
}

.svc-tile__title {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(64px, 8vw, 168px);
    line-height: 0.88;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0;
    color: inherit;
}

.svc-tile__item {
    border-top: 1px solid currentColor;
    padding-top: clamp(14px, 1.4vw, 22px);
}

.svc-tile__item-name {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(30px, 3vw, 54px);
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.svc-tile__item-sub {
    font-family: 'Teko', sans-serif;
    font-weight: 400;
    font-size: clamp(15px, 1.15vw, 22px);
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 12px;
    opacity: 0.9;
}

.svc-tile__item-desc {
    font-family: 'Calibri', 'Helvetica Neue', sans-serif;
    font-size: clamp(15px, 1.15vw, 19px);
    line-height: 1.45;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .svc-tile__inner { transform: none !important; filter: none !important; }
}

@media (max-width: 760px) {
    .services-grid { padding: 8vh 0 4vh; }
    .services-grid-inner {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 10vh 5vw;
    }
    .svc-tile--title .svc-tile__inner { aspect-ratio: 4 / 5; padding: 26px; }
    .svc-tile--content .svc-tile__inner { aspect-ratio: 4 / 5; padding: 26px; }
    .svc-tile__title { font-size: clamp(48px, 14vw, 96px); }
    .svc-tile__item-name { font-size: clamp(26px, 7vw, 40px); }
    .svc-tile__item-desc { font-size: clamp(14px, 4vw, 17px); }
}

/* ===========================================================
   DYN-GRID — 3×3 video grid that expands the hovered row/col.
   Port of the React DynamicFrameLayout component.
   =========================================================== */
.dyn-services {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 4vh 4vw 4vh;
    box-sizing: border-box;
    background: transparent;
    gap: 2vh;
}
.dyn-services__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4vw;
    border-bottom: 2px solid #000000;
    padding-bottom: 1.4vh;
    flex: 0 0 auto;
}
.dyn-services__eyebrow {
    font-family: 'Teko', sans-serif;
    font-size: clamp(12px, 1vw, 16px);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #000000;
    margin: 0;
}
.dyn-services__title {
    font-family: 'Teko', sans-serif;
    font-weight: 600;
    font-size: clamp(56px, 8vw, 140px);
    line-height: 0.85;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: #000000;
    margin: 0;
}
.dyn-services__accent { color: #ff1e3c; }

.dyn-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-rows: 4fr 4fr 4fr;
    grid-template-columns: 4fr 4fr 4fr;
    gap: 0;
    min-height: 0;
    transition: grid-template-rows 0.4s ease, grid-template-columns 0.4s ease, border-color 0.175s ease 0.025s;
    background: transparent;
    border: 2px solid #000000;
}
.dyn-tile {
    position: relative;
    overflow: hidden;
    background: transparent;
    cursor: pointer;
    padding: clamp(18px, 1.8vw, 32px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(10px, 1.2vw, 18px);
    color: #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    transition: background-color 0.175s ease 0.025s, color 0.175s ease 0.025s, border-color 0.175s ease 0.025s, padding 0.4s ease;
}
.dyn-tile[data-col="2"] { border-right: none; }
.dyn-tile[data-row="2"] { border-bottom: none; }

.dyn-grid.is-snapped {
    border-color: #000000;
}
.dyn-grid.is-snapped .dyn-tile {
    background: #ffffff;
    color: #000000;
    border-right-color: #000000;
    border-bottom-color: #000000;
}
.dyn-grid.is-snapped .dyn-tile__num { color: #ff1e3c; }

.dyn-tile:hover {
    background: #ff1e3c;
    color: #ffffff;
    padding: clamp(28px, 2.6vw, 48px);
}
.dyn-grid.is-snapped .dyn-tile:hover {
    background: #ff1e3c;
    color: #ffffff;
}
.dyn-tile__num {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 0.95vw, 14px);
    letter-spacing: 0.32em;
    color: #ff1e3c;
    align-self: flex-start;
    transition: color 0.175s ease 0.025s;
}
.dyn-tile:hover .dyn-tile__num,
.dyn-grid.is-snapped .dyn-tile:hover .dyn-tile__num { color: #000000; }
.dyn-tile__name {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(28px, 2.6vw, 48px);
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0;
    color: inherit;
}
.dyn-tile__info {
    margin-top: clamp(14px, 1.6vw, 24px);
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.2vw, 20px);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease 0.05s, transform 0.35s ease 0.05s;
    pointer-events: none;
}
.dyn-tile:hover .dyn-tile__info {
    opacity: 1;
    transform: translateY(0);
}
.dyn-tile__sub {
    font-family: 'Teko', sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 1.25vw, 22px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0;
    opacity: 0.92;
    color: inherit;
}
.dyn-tile__desc {
    font-family: 'Calibri', 'Helvetica Neue', sans-serif;
    font-size: clamp(14px, 1.05vw, 18px);
    line-height: 1.55;
    margin: 0;
    color: inherit;
    max-width: 44ch;
}
.dyn-tile__list {
    list-style: none;
    margin: 0;
    padding: clamp(12px, 1.2vw, 18px) 0 0;
    border-top: 1px solid currentColor;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 0.8vw, 14px);
}
.dyn-tile__list li {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(16px, 1.3vw, 24px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.05;
    color: inherit;
}

@media (max-width: 760px) {
    .services-stack-wrapper { height: auto; }
    .services-stack { position: relative; height: auto; }
    .dyn-services { height: auto; padding: 6vh 5vw; }
    .dyn-grid {
        grid-template-rows: repeat(9, 30vh) !important;
        grid-template-columns: 1fr !important;
    }
}

.services-stack {
    position: sticky;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: transparent;
}

/* HUD ---------------------------------------------------------- */

.drawer-eyebrow {
    position: absolute;
    top: 4vh;
    left: 4vw;
    margin: 0;
    font-family: 'Teko', sans-serif;
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #000000;
    z-index: 5;
}

.drawer-counter {
    position: absolute;
    top: 4vh;
    right: 4vw;
    display: flex;
    align-items: baseline;
    gap: 8px;
    z-index: 5;
    pointer-events: none;
}

.drawer-counter-num {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(36px, 3vw, 52px);
    line-height: 1;
    color: #ff1e3c;
    font-variant-numeric: tabular-nums;
}

.drawer-counter-sep {
    font-family: 'Teko', sans-serif;
    font-size: 14px;
    color: #000000;
}

.drawer-counter-total {
    font-family: 'Teko', sans-serif;
    font-size: 13px;
    letter-spacing: 0.1em;
    color: #000000;
    font-variant-numeric: tabular-nums;
}

/* 3D stage ----------------------------------------------------- */

.drawer-stage {
    position: absolute;
    inset: 0;
    perspective: 1100px;
    perspective-origin: 50% 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.drawer-cards {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    pointer-events: none;
}

.drawer-card {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Sized once to hold both the top-edge title AND the full detail grid.
       The Rolodex effect comes from the tilt — when tilted at REST_TILT (~ -74°)
       only the top "lip" reads; when rotated to 0° the whole face is revealed. */
    width: min(82vw, 1080px);
    height: min(58vh, 520px);
    background: #ff1e3c;
    border: 2px solid #000000;
    padding: 26px 44px 28px;
    margin: 0;
    cursor: pointer;
    pointer-events: auto;
    will-change: transform, opacity;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    overflow: hidden;
    box-sizing: border-box;
    transition: opacity 0.35s ease;
}

/* When open, let the close button extend outside the card if it needs to. */
.drawer-card.is-open { overflow: visible; }

.drawer-card__edge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: #000000;
}

.drawer-card__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.drawer-card__eyebrow {
    font-family: 'Teko', sans-serif;
    font-size: 11px;
    letter-spacing: 0.24em;
    color: #000000;
    margin: 0;
}

.drawer-card__title {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 56px);
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #000000;
    margin: 0;
    white-space: nowrap;
}

/* In-card detail — always part of the card. When the card is tilted in the
   stack the grid is foreshortened by the rotation, when it untilts to face-on
   the grid reads normally. No opacity gating. */
.drawer-card__detail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vw;
    margin-top: 4vh;
}

.drawer-card__detail .svc-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid #000000;
    padding-top: 14px;
}

.drawer-card__detail .svc-name {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 1.8vw, 34px);
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #000000;
    margin: 0;
}

.drawer-card__detail .svc-sub {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(15px, 1.1vw, 20px);
    line-height: 1.1;
    text-transform: uppercase;
    color: #000000;
    margin: 0;
}

.drawer-card__detail .svc-desc {
    font-family: 'Calibri', 'Helvetica Neue', sans-serif;
    font-size: clamp(11px, 0.9vw, 14px);
    line-height: 1.5;
    color: #000000;
    margin: 4px 0 0;
    font-style: italic;
    opacity: 0.9;
}

/* × close button — only visible on the opened card.
   Sized & laid out so the ENTIRE painted square is the hit area:
   box-sizing border-box keeps the 56×56 box exact, flex centers the
   glyph so it can't visually overflow the click target, and a very
   high z-index plus isolation guarantees nothing else intercepts. */
.drawer-card__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 56px;
    height: 56px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: #000000;
    border: 2px solid #000000;
    color: #ff1e3c;
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, background 0.15s ease, color 0.15s ease;
    z-index: 9999;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.drawer-card__close:hover {
    background: #ff1e3c;
    color: #000000;
}

.drawer-card.is-open .drawer-card__close {
    opacity: 1;
    pointer-events: auto;
}

/* Opened card — no resize; the card simply rotates to face-on and lifts forward.
   The grid was always inside; tilt made it unreadable, untilting reveals it. */
.drawer-card.is-open {
    z-index: 30;
    cursor: default;
}

@media (max-width: 900px) {
    .drawer-card {
        width: 90vw;
        height: min(72vh, 540px);
        padding: 20px 24px 24px;
    }
    .drawer-card__title { font-size: clamp(24px, 6vw, 38px); }
    .drawer-card__detail { grid-template-columns: 1fr; gap: 1.4vh; margin-top: 2.5vh; }
}

/* ===========================================================
   PROCESS / SERVICES — stacked rotating panels
   Each .proc-section pins at the bottom of the viewport while
   the next slides up over it with a 30° → 0° rotation.
   =========================================================== */

.process-stack {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    background: transparent;
    z-index: 5;
}

.proc-accent { color: #ff1e3c; }

.proc-section[data-proc-bg="red"]   .proc-accent { color: #000000; }
.proc-section[data-proc-bg="black"] .proc-accent { color: #ff1e3c; }

.proc-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 5vh 4vw;
}

.proc-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.2vw;
    width: 100%;
    max-width: 1200px;
    height: auto;
    min-height: 0;
    padding: clamp(2rem, 4vw, 4vw);
    transform-origin: bottom left;
    will-change: transform;
    box-sizing: border-box;
}

.proc-section[data-proc-bg="white"] .proc-inner { background: #ffffff; color: #000000; }
.proc-section[data-proc-bg="red"]   .proc-inner { background: #ff1e3c; color: #ffffff; }
.proc-section[data-proc-bg="black"] .proc-inner { background: #000000; color: #ffffff; }

.proc-eyebrow {
    font-family: 'Teko', sans-serif;
    font-size: clamp(22px, 2.4vw, 38px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0;
}

.proc-rule {
    border: 0;
    border-top: 1px solid currentColor;
    margin: 1.2vw 0;
    width: 100%;
    opacity: 1;
}

.proc-section[data-proc-bg="red"] .proc-rule,
.proc-section[data-proc-bg="black"] .proc-rule { border-top-color: rgba(255,255,255,0.6); }

.proc-title {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(40px, 6.5vw, 110px);
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin: 0;
}

.proc-section[data-proc-bg="white"] .proc-title { color: #000000; }

.proc-lead {
    max-width: 60ch;
    font-family: 'Calibri', 'Helvetica Neue', sans-serif;
    font-size: clamp(1rem, 1.6vw, 1.5rem);
    line-height: 1.5;
    margin: 0;
}

.proc-lead-alt {
    margin-top: auto;
    max-width: 50ch;
    opacity: 0.85;
}

@media (max-width: 900px) {
    .proc-section { padding: 4vh 4vw; }
    .proc-inner { padding: 8vw 6vw 6vw; gap: 3vw; max-width: 100%; }
    .proc-eyebrow { font-size: clamp(18px, 4vw, 26px); }
    .proc-title { font-size: clamp(36px, 8vw, 72px); }
}

/* --- Services Frame Specific Styles --- */
.services-frame {
    background-color: #ff1e3c !important;
    color: #ffffff;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
}

.services-frame-title {
    position: absolute;
    bottom: 100%;
    left: 0;
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 56px;
    color: #ff1e3c;
    padding: 20px 40px;
    line-height: 1;
    pointer-events: none;
}

.services-header {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    padding: 32px 40px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
}

.services-eyebrow {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 64px;
    line-height: 0.85;
    color: #ffffff;
    flex: 0 0 260px;
    letter-spacing: -0.02em;
    margin-top: -8px;
}

.services-eyebrow .eyebrow-accent {
    display: block;
    font-family: 'Calibri', 'Helvetica Neue', 'Arial', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.services-intro {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
}

.services-intro p {
    font-family: 'Calibri', 'Helvetica Neue', 'Arial', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #ffffff;
    line-height: 160%;
    letter-spacing: 0;
}

.services-body {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.services-nav {
    flex: 0 0 320px;
    padding: 28px 24px 28px 40px;
    display: flex;
    flex-direction: column;
    background-color: #fefefe;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.services-nav-heading {
    font-family: 'Calibri', 'Helvetica Neue', 'Arial', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #ff1e3c;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 26px;
}

.services-nav-list {
    display: flex;
    flex-direction: column;
}

.services-nav-item {
    background: none;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.14);
    text-align: left;
    cursor: pointer;
    padding: 18px 4px 18px 0;
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 100%;
    color: rgba(0, 0, 0, 0.45);
    letter-spacing: -0.01em;
    transition: color 0.25s ease, padding-left 0.25s ease;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}

.services-nav-item:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}

.services-nav-item::before {
    content: '';
    width: 8px;
    height: 8px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    transition: background 0.25s ease, border-color 0.25s ease;
    flex-shrink: 0;
}

.services-nav-item:hover {
    color: #000000;
    padding-left: 8px;
}

.services-nav-item:hover::before {
    border-color: #ff1e3c;
}

.services-nav-item.active {
    color: #ff1e3c;
    padding-left: 8px;
}

.services-nav-item.active::before {
    background: #ff1e3c;
    border-color: #ff1e3c;
}

.services-nav-count {
    margin-left: auto;
    font-family: 'Calibri', 'Helvetica Neue', 'Arial', sans-serif;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.4);
    letter-spacing: 0.08em;
}

.services-nav-item.active .services-nav-count {
    color: #ff1e3c;
}

.services-nav-item.active .services-nav-count {
    color: #ffffff;
}

.services-content {
    flex: 1;
    padding: 28px 40px 28px 40px;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.services-panel {
    display: none;
    flex: 1;
}

.services-panel.active {
    display: flex;
    flex-direction: column;
    animation: fadePanel 0.45s ease;
}

@keyframes fadePanel {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.services-panel-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-shrink: 0;
}

.services-panel-title {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 48px;
    line-height: 100%;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.services-panel-meta {
    font-family: 'Calibri', 'Helvetica Neue', 'Arial', sans-serif;
    font-size: 12px;
    color: #000000;
    background: #ffffff;
    padding: 6px 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.services-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 32px;
    flex: 1;
    align-content: start;
    min-height: 0;
    overflow: hidden;
}

.service-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.service-card:hover {
    border-top-color: #ffffff;
    transform: translateY(-2px);
}

.service-card-index {
    font-family: 'Calibri', 'Helvetica Neue', 'Arial', sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.18em;
}

.service-card-title {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 100%;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.service-card-tagline {
    font-family: 'Calibri', 'Helvetica Neue', 'Arial', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: #ffffff;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.service-card-desc {
    font-family: 'Calibri', 'Helvetica Neue', 'Arial', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 150%;
    letter-spacing: 0;
}

/* --- Process Frame: Classic Image Layout --- */
.process-frame {
    background-color: #ffffff !important;
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;
    padding: 0;
}

.process-frame-title {
    position: absolute;
    bottom: 100%;
    left: 0;
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 56px;
    color: #ff1e3c;
    padding: 20px 40px;
    line-height: 1;
    pointer-events: none;
}

.process-evo {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Header — title only, minimal */
.process-evo-header {
    padding: 50px 50px 18px;
}

.process-evo-title {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 64px;
    line-height: 0.85;
    color: #ff1e3c;
    letter-spacing: -0.02em;
    margin-top: -8px;
}

/* Image cards row */
.process-cards {
    display: flex;
    gap: 22px;
    padding: 36px 50px 18px;
    flex: 1;
    min-height: 0;
}

.process-figure {
    background: none;
    border: none;
    cursor: pointer;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    text-align: left;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
    min-width: 0;
}

.card-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #eeeeee;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(0.92);
    transform: scale(1);
    transition: filter 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
    display: block;
}

.card-number {
    position: absolute;
    top: 14px;
    left: 14px;
    font-family: 'Calibri', 'Helvetica Neue', 'Arial', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.18em;
    transition: color 0.4s ease;
}

.card-label {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 100%;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: rgba(0, 0, 0, 0.5);
    padding: 16px 0 0;
    transition: color 0.3s ease;
}

.process-figure:hover,
.process-figure.active {
    transform: translateY(-6px);
}

.process-figure:hover .card-image,
.process-figure.active .card-image {
    filter: grayscale(0%) contrast(1);
    transform: scale(1.05);
}

.process-figure:hover .card-number,
.process-figure.active .card-number {
    color: #ff1e3c;
}

.process-figure:hover .card-label,
.process-figure.active .card-label {
    color: #ff1e3c;
}

/* Bottom row: details on left, quote pushed to far right */
.process-bottom {
    display: flex;
    gap: 60px;
    align-items: flex-end;
    padding: 22px 50px 50px;
}

.process-details {
    flex: 0 1 540px;
    min-height: 130px;
    position: relative;
}

.process-detail {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    position: absolute;
    inset: 0;
}

.process-detail.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.detail-eyebrow {
    font-family: 'Calibri', 'Helvetica Neue', 'Arial', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: #ff1e3c;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.detail-tagline {
    font-family: 'Calibri', 'Helvetica Neue', 'Arial', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #000000;
    line-height: 130%;
    margin-bottom: 10px;
}

.detail-desc {
    font-family: 'Calibri', 'Helvetica Neue', 'Arial', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.78);
    line-height: 160%;
}

.process-evo-quote {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
    margin-left: auto;
    flex: 0 0 auto;
}

.process-evo-quote .quote-block {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 56px;
    line-height: 92%;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.process-evo-quote .quote-accent {
    color: #ff1e3c;
}

/* --- Accordion Component --- */
.accordion {
    width: 100%;
}

.accordion-item {
    position: relative;
    margin: 0 24px; /* Inset content by 24px */
}

/* Border line extends 24px beyond content on each side */
.accordion-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -24px;
    right: -24px;
    height: 1px;
    background-color: #ff1e3c;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 0; /* More breathing room */
    cursor: pointer;
    user-select: none;
}

.accordion-heading {
    font-family: 'Teko', sans-serif;
    font-weight: 400;
    font-size: 24px;
    color: #ff1e3c;
    line-height: 110%;
    letter-spacing: -0.03em;
}

.accordion-chevron {
    transition: transform 0.3s ease;
    transform: rotate(180deg); /* Default: points down (collapsed) */
    flex-shrink: 0;
}

.accordion-chevron path {
    stroke: #ffffff; /* White chevrons */
}

.accordion-item.active .accordion-chevron {
    transform: rotate(0deg); /* Points up when active */
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0;
}

.accordion-item.active .accordion-body {
    max-height: 600px; /* Large enough to fit text + image */
    padding: 0 0 28px 0;
}

.accordion-body p {
    font-family: 'Teko', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #ebebeb;
    line-height: 165%;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
}

.accordion-image-placeholder {
    width: 100%;
    height: 260px;
    border-radius: 4px;
    margin-top: 24px;
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
}

/* --- Projects / Glory Frame Styles --- */
.projects-frame {
    background-color: #ffffff !important;
    display: flex !important;
    flex-direction: row;
    overflow: hidden !important;
    position: relative;
}

/* Heading on the far left */
.projects-heading {
    position: absolute;
    top: 40px;
    left: 40px;
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 56px;
    color: #ff1e3c;
    line-height: 110%;
    z-index: 5;
}

/* Main 3-column grid: peek-left | center | peek-right */
.projects-grid {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 12px;
    padding: 40px 0;
}

/* Side peek images */
.peek-left,
.peek-right {
    flex: 0 0 12%;
    display: flex;
    align-items: stretch;
    padding-top: 160px; /* Align with center image top */
}

.peek-left .project-img,
.peek-right .project-img {
    width: 100%;
    flex: 1;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
}

/* Center column: text + image + project info */
.projects-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Top text: two columns aligned above the center image */
.projects-top-text {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 20px;
    padding-left: 160px; /* Offset to clear the heading area */
}

.projects-desc-left {
    width: 193px;
    flex-shrink: 0;
}

.projects-desc-right {
    width: 339px;
    flex-shrink: 0;
}

.projects-desc-left,
.projects-desc-right {
    font-family: 'Calibri', 'Helvetica Neue', 'Arial', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #ff1e3c;
    line-height: 160%;
    letter-spacing: 0;
    text-align: justify;
}

.projects-desc-left p,
.projects-desc-right p {
    margin-bottom: 8px;
}

/* Center project image */
.center-img {
    flex: 1;
    width: 100%;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    min-height: 0;
}

/* Bottom row: arrow | project info | arrow */
.project-bottom {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-top: 20px;
    flex-shrink: 0;
}

.project-info {
    flex: 1;
    min-width: 0;
}

.project-name {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 32px;
    color: #000000;
    line-height: 110%;
    margin-bottom: 10px;
}

.project-info p {
    font-family: 'Calibri', 'Helvetica Neue', 'Arial', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    line-height: 160%;
    letter-spacing: 0;
    margin-bottom: 6px;
}

/* Navigation arrows — inline with project text */
.carousel-arrow {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    opacity: 0.5;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
    margin-top: 4px;
}

.carousel-arrow:hover {
    opacity: 1;
}

/* --- Quote Frame --- */
.quote-frame {
    background-color: transparent !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
}

.quote-content {
    text-align: right;
    padding: 40px;
}

.quote-line-1 {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 128px;
    color: #ff1e3c;
    line-height: 110%;
    margin-bottom: 20px;
}

.quote-line-2 {
    font-family: 'Teko', sans-serif;
    font-weight: 400;
    font-size: 28px;
    color: #000000;
    line-height: 120%;
}

/* --- Footer / About Frame --- FLAT 2D INDIAN EDITION --- */
/* Footer sits AFTER the scroll-container as a normal full-size block */
.footer-frame {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 3;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.footer-creative {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #ffffff;
    color: #000000;
    font-family: 'Calibri', 'Helvetica Neue', Arial, sans-serif;
}

/* === Truck art marquee === */
.truck-stripe {
    position: relative;
    height: 30px;
    overflow: hidden;
    background: #ff1e3c;
    color: #ffffff;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
    flex-shrink: 0;
}

.truck-stripe-top {
    border-top: none;
}

.truck-stripe-bottom {
    border-bottom: none;
    background: #000000;
    color: #ffffff;
}

.truck-stripe-track {
    display: flex;
    gap: 24px;
    white-space: nowrap;
    align-items: center;
    height: 100%;
    width: max-content;
    animation: marquee 38s linear infinite;
    font-family: 'Calibri', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0 24px;
}

.truck-stripe-bottom .truck-stripe-track {
    animation-direction: reverse;
    animation-duration: 46s;
}

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

/* === Body wrap === */
.footer-body {
    flex: 1;
    padding: 60px 72px 48px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* === Mega title === */
.footer-hero {
    margin-top: 0;
    margin-bottom: 28px;
    padding-bottom: 14px;
    border-bottom: 2px solid #000000;
}

.footer-mega-title {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(70px, 10vw, 144px);
    line-height: 0.85;
    letter-spacing: -0.015em;
    color: #000000;
    margin: 0;
    text-transform: none;
}

.footer-title-dot {
    color: #ff1e3c;
}

.footer-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 8px;
}

.footer-mega-subtitle {
    font-family: 'Teko', sans-serif;
    font-weight: 300;
    font-size: clamp(28px, 4vw, 60px);
    line-height: 1;
    color: #ff1e3c;
    letter-spacing: 0.01em;
}

/* === Made in Bharat stamp (flat 2D rectangle) === */
.india-stamp {
    position: relative;
    width: 130px;
    height: 110px;
    background: #ffffff;
    border: 2px solid #ff1e3c;
    cursor: pointer;
    flex-shrink: 0;
    transform: rotate(-6deg);
    transition: transform 0.4s ease;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    outline: 2px solid #ff1e3c;
    outline-offset: -8px;
}

.india-stamp:hover {
    transform: rotate(0deg);
}

.india-stamp.spinning {
    animation: stamp-spin 1.2s ease;
}

@keyframes stamp-spin {
    from { transform: rotate(-6deg); }
    to   { transform: rotate(354deg); }
}

.stamp-arc {
    font-family: 'Calibri', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 8px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ff1e3c;
    line-height: 1;
}

.stamp-arc-bot {
    text-transform: none;
    letter-spacing: 0.06em;
}

.stamp-big {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 36px;
    line-height: 0.9;
    color: #000000;
    letter-spacing: 0.02em;
}

/* === Grid === */
.footer-grid {
    display: grid;
    grid-template-columns: 1.15fr 1.15fr 0.7fr;
    gap: 36px;
    flex: 1;
    align-items: start;
    min-height: 0;
    overflow: hidden;
}

.footer-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.footer-col-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: 'Calibri', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #000000;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #000000;
}

.col-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #ff1e3c;
    color: #ffffff;
    font-size: 10px;
    letter-spacing: 0.02em;
}

.footer-col-text,
.footer-col p {
    font-family: 'Calibri', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.5;
    color: #000000;
    margin: 0 0 10px 0;
}

.footer-col em {
    font-style: italic;
    color: #ff1e3c;
    font-weight: 600;
}

.masala-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid #000000;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #000000;
    background: #ffffff;
    transition: background 0.2s ease, color 0.2s ease;
}

.tag:hover {
    background: #000000;
    color: #ffffff;
}

.tag-red {
    background: #ff1e3c;
    border-color: #ff1e3c;
    color: #ffffff;
}

.tag-red:hover {
    background: #000000;
    border-color: #000000;
}

/* === Designer cards (simple rectangle with stick figure) === */
.designer-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.designer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1.5px solid #000000;
    background: #ffffff;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.designer:hover {
    border-color: #ff1e3c;
    color: #ff1e3c;
}

.stick-figure {
    width: 28px;
    height: 42px;
    flex-shrink: 0;
    color: #000000;
    transition: color 0.2s ease;
}

.designer:hover .stick-figure {
    color: #ff1e3c;
}

.designer-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.designer-name {
    font-family: 'Calibri', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #000000;
    transition: color 0.2s ease;
}

.designer:hover .designer-name {
    color: #ff1e3c;
}

.designer-role {
    font-family: 'Calibri', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: #000000;
    letter-spacing: 0.04em;
}

.designer-arrow {
    font-size: 13px;
    color: #ff1e3c;
    transition: transform 0.2s ease;
}

.designer:hover .designer-arrow {
    transform: translate(3px, -3px);
}

.designer-fact {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 10px 16px 10px 56px;
    background: #ff1e3c;
    color: #ffffff;
    font-family: 'Calibri', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.02em;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    pointer-events: none;
}

.designer:hover .designer-fact {
    transform: translateY(0);
}

/* === Socials === */
.social-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #000000;
    text-decoration: none;
    color: #000000;
    font-family: 'Calibri', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    font-size: 13px;
    transition: color 0.2s ease, padding 0.2s ease;
}

.social-link:hover {
    color: #ff1e3c;
    padding-left: 6px;
}

.social-arrow {
    font-size: 15px;
    transition: transform 0.2s ease;
}

.social-link:hover .social-arrow {
    transform: translateX(5px);
}


/* ==========================================================
   BRUTALIST PANELS — minimal, flat, white/black/red only
   ========================================================== */

/* Panel shells share the .white-frame floating box */
.b-intro, .b-services, .b-process, .b-work {
    background: #ffffff !important;
    border: 2px solid #000000 !important;
    overflow: hidden !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
}

.b-frame {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Panel head strip — mono captions */
.b-head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 24px;
    border-bottom: 2px solid #000000;
    flex: 0 0 auto;
    background: #ffffff;
}

.b-mono {
    font-family: 'Teko', sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #000000;
    text-transform: uppercase;
}

.b-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.b-accent { color: #ff1e3c; }

.b-tag {
    font-family: 'Teko', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #ff1e3c;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    display: block;
    margin-bottom: 14px;
}

/* ============ 01 INTRO ============ */
.b-intro-body {
    padding: 48px 48px 36px;
    justify-content: space-between;
    gap: 32px;
}

.b-headline {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(48px, 7vw, 116px);
    line-height: 0.92;
    letter-spacing: -0.02em;
    color: #000000;
    text-transform: uppercase;
    max-width: 18ch;
    margin: 0;
}

.b-intro-foot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    padding-top: 28px;
    border-top: 1px solid #000000;
}

.b-col p {
    font-family: 'Calibri', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

/* ============ 02 SERVICES ============ */
.svc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.svc-row {
    flex: 1;
    display: grid;
    grid-template-columns: 80px 1fr 360px 40px;
    align-items: center;
    gap: 32px;
    padding: 0 32px;
    border-bottom: 1px solid #000000;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
    min-height: 0;
}

.svc-row:last-child { border-bottom: none; }

.svc-row:hover {
    background-color: #ff1e3c;
    color: #ffffff;
}

.svc-num {
    font-family: 'Teko', sans-serif;
    font-size: 13px;
    color: #ff1e3c;
    letter-spacing: 0.12em;
    transition: color 0.25s ease;
}

.svc-row:hover .svc-num { color: #ffffff; }

.svc-name {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(28px, 4.5vw, 64px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    color: inherit;
}

.svc-desc {
    font-family: 'Calibri', 'Helvetica Neue', sans-serif;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.45;
    transition: color 0.25s ease;
}

.svc-row:hover .svc-desc { color: rgba(255, 255, 255, 0.92); }

.svc-arrow {
    text-align: right;
    font-size: 22px;
    color: inherit;
    transition: transform 0.25s ease;
}

.svc-row:hover .svc-arrow { transform: translateX(6px); }

/* ============ 03 PROCESS ============ */
.b-process-body {
    padding: 32px 32px 28px;
    gap: 22px;
}

.proc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    flex: 1;
    min-height: 0;
}

.proc-tile {
    padding: 26px 22px;
    border: 1px solid #000000;
    border-right: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: background-color 0.25s ease, color 0.25s ease;
    cursor: pointer;
}

.proc-tile:last-child { border-right: 1px solid #000000; }

.proc-tile:hover {
    background-color: #000000;
    color: #ffffff;
}

.proc-num {
    font-family: 'Teko', sans-serif;
    font-size: 12px;
    color: #ff1e3c;
    letter-spacing: 0.18em;
}

.proc-name {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(32px, 4vw, 56px);
    line-height: 0.95;
    text-transform: uppercase;
    color: inherit;
}

.proc-desc {
    font-family: 'Calibri', 'Helvetica Neue', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: inherit;
    opacity: 0.82;
    margin: auto 0 0;
}

.proc-quote {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(20px, 2.4vw, 36px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    color: #000000;
    padding-top: 16px;
    border-top: 1px solid #000000;
    text-align: right;
}

/* ============ 04 WORK ============ */
.b-work-body {
    padding: 28px;
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    height: 100%;
}

.work-tile {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border: 1px solid #000000;
    min-height: 0;
}

.work-thumb {
    flex: 1;
    min-height: 0;
    transition: filter 0.25s ease;
}

.work-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 16px;
    border-top: 1px solid #000000;
    background: #ffffff;
}

.work-name {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 26px;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    color: #000000;
}

.work-meta {
    font-family: 'Teko', sans-serif;
    font-size: 10px;
    color: #ff1e3c;
    letter-spacing: 0.14em;
}

.work-tile:hover .work-thumb { filter: invert(1); }

/* ============ 05 FOOTER ============ */
.b-footer { border-top: 2px solid #000000; }

.b-footer-inner {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: #000000;
    box-sizing: border-box;
}

.b-footer-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
}

.b-footer-col {
    padding: 48px 40px;
    border-right: 1px solid #000000;
    display: flex;
    flex-direction: column;
}

.b-footer-col:last-child { border-right: none; }

.b-footer-mega { justify-content: space-between; }

.b-mega {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(80px, 12vw, 200px);
    line-height: 0.82;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #000000;
    margin: 0;
}

.b-email {
    font-family: 'Teko', sans-serif;
    font-size: 13px;
    color: #ff1e3c;
    text-decoration: none;
    letter-spacing: 0.10em;
    border-bottom: 1px solid #ff1e3c;
    padding-bottom: 6px;
    display: inline-block;
    margin-top: 24px;
    width: fit-content;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.b-email:hover {
    background: #ff1e3c;
    color: #ffffff;
}

.b-team, .b-social {
    list-style: none;
    margin: 0;
    padding: 0;
}

.b-team li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid #000000;
    gap: 16px;
}

.b-team li:first-child { border-top: 1px solid #000000; }

.b-team li > span:first-child {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 22px;
    text-transform: uppercase;
    color: #000000;
}

.b-social { margin-bottom: 28px; }

.b-social li { border-top: 1px solid #000000; }
.b-social li:last-child { border-bottom: 1px solid #000000; }

.b-social a {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 22px;
    text-transform: uppercase;
    text-decoration: none;
    color: #000000;
    transition: color 0.2s ease;
}

.b-social a:hover { color: #ff1e3c; }
.b-social a > span { color: #ff1e3c; }

.b-tag-bottom { margin-top: 12px; }

.b-foot-loc {
    font-family: 'Calibri', 'Helvetica Neue', sans-serif;
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
    color: #000000;
}

.b-footer-bottom {
    display: flex;
    justify-content: space-between;
    padding: 16px 40px;
    background: #ffffff;
}

/* Responsive trim */
@media (max-width: 900px) {
    .b-intro-foot { grid-template-columns: 1fr; gap: 16px; }
    .svc-row { grid-template-columns: 50px 1fr 40px; }
    .svc-desc { display: none; }
    .proc-grid { grid-template-columns: repeat(2, 1fr); }
    .proc-tile:nth-child(2) { border-right: 1px solid #000000; }
    .proc-tile:nth-child(3) { border-right: none; border-top: none; }
    .work-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); }
    .b-footer-grid { grid-template-columns: 1fr; }
    .b-footer-col { border-right: none; border-bottom: 1px solid #000000; }
    .b-footer-col:last-child { border-bottom: none; }
}

/* ==========================================================
   BRUTALIST V2 — FULL-SCREEN, CREATIVE OVERRIDES
   ========================================================== */

/* Make each panel a full-bleed page */
.b-intro, .b-services, .b-process, .b-work {
    width: 100vw !important;
    left: 0 !important;
    transform: none !important;
    height: 100vh !important;
    top: calc(var(--fraction) * (100% - 100vh)) !important;
    border: none !important;
    padding: 0 !important;
    display: block !important;
    position: absolute;
    background: #ffffff !important;
    scroll-snap-align: start !important;
}

/* Common chrome inside each full panel */
.b-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 80px 14px 80px;
    border-bottom: 2px solid #000000;
    background: #ffffff;
    position: relative;
    z-index: 5;
}
.b-strip-top { border-top: 2px solid #000000; }

.b-mono-accent { color: #ff1e3c; }

/* Vertical side label on left edge */
.b-side-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 100%;
    border-right: 2px solid #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Teko', sans-serif;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #000000;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    background: #ffffff;
    z-index: 5;
}

.b-side-label-light { color: #000000; }

/* Ghost number floating in the background */
.b-bignum {
    position: absolute;
    right: -2vw;
    bottom: -8vh;
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 78vh;
    line-height: 0.8;
    letter-spacing: -0.05em;
    color: transparent;
    -webkit-text-stroke: 2px #000000;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

/* Marquee strip — runs along bottom of each panel */
.b-marquee {
    position: absolute;
    left: 48px;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: #ff1e3c;
    color: #ffffff;
    border-top: 2px solid #000000;
    height: 36px;
    display: flex;
    align-items: center;
    z-index: 5;
}

.b-marquee-track {
    display: flex;
    gap: 64px;
    white-space: nowrap;
    animation: bmarquee 35s linear infinite;
    font-family: 'Teko', sans-serif;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding-left: 32px;
}

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

/* ============ 01 INTRO V2 ============ */
.b-intro .b-strip-top { padding-left: 80px; }

.b-intro-stage {
    position: relative;
    z-index: 3;
    padding: 60px 80px 24px 80px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 64px;
    align-items: flex-end;
}

.b-mega-headline {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(80px, 14vw, 240px);
    line-height: 0.82;
    letter-spacing: -0.03em;
    color: #000000;
    text-transform: uppercase;
    margin: 0;
}

.b-mega-headline .line {
    display: block;
}

.b-mega-headline .line em {
    font-style: italic;
    font-weight: 300;
    color: #ff1e3c;
}

.b-mega-headline .line-accent { color: #ff1e3c; }

.b-intro-side {
    position: relative;
    padding-top: 18px;
    border-top: 2px solid #000000;
}

.b-intro-side p {
    font-family: 'Calibri', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #000000;
    margin: 0 0 16px;
}

.b-stamp {
    font-family: 'Teko', sans-serif;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: #ff1e3c;
    border-top: 1px solid #000000;
    padding-top: 12px;
    margin-top: 8px !important;
}

.b-intro-foot {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 24px 80px 60px 80px;
    border-top: 2px solid #000000;
    background: #ffffff;
}

.b-intro-foot .b-col {
    padding: 0 24px 0 0;
    border-right: 1px solid #000000;
}
.b-intro-foot .b-col:first-child { padding-left: 0; }
.b-intro-foot .b-col:last-child { border-right: none; padding-right: 0; }

.b-intro-foot .b-col p {
    font-family: 'Calibri', 'Helvetica Neue', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

/* ============ 02 SERVICES V2 ============ */
.b-services .svc-list {
    position: relative;
    z-index: 3;
    list-style: none;
    margin: 0;
    padding-left: 48px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px - 36px);
}

.b-services .svc-row {
    flex: 1;
    display: grid;
    grid-template-columns: 110px 1fr 420px 80px;
    align-items: center;
    gap: 40px;
    padding: 0 80px;
    border-bottom: 1px solid #000000;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
    min-height: 0;
    background: #ffffff;
}

.b-services .svc-row:last-child { border-bottom: 2px solid #000000; }

.b-services .svc-row:hover { background-color: #ff1e3c; color: #ffffff; }

.b-services .svc-num {
    font-family: 'Teko', sans-serif;
    font-size: 14px;
    color: #ff1e3c;
    letter-spacing: 0.18em;
}
.b-services .svc-row:hover .svc-num { color: #ffffff; }

.b-services .svc-name {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(40px, 6vw, 96px);
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: inherit;
}

.b-services .svc-desc {
    font-family: 'Calibri', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.72);
    line-height: 1.45;
}
.b-services .svc-row:hover .svc-desc { color: rgba(255, 255, 255, 0.92); }

.b-services .svc-arrow {
    text-align: right;
    font-size: 40px;
    color: inherit;
    transition: transform 0.25s ease;
}
.b-services .svc-row:hover .svc-arrow { transform: translateX(8px); }

/* ============ 03 PROCESS V2 ============ */
.proc-massive {
    position: relative;
    z-index: 3;
    padding: 36px 80px 24px 128px;
    height: calc(100vh - 56px - 36px);
    display: flex;
    flex-direction: column;
}

.proc-bigtitle {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(56px, 8vw, 132px);
    line-height: 0.85;
    letter-spacing: -0.02em;
    color: #000000;
    text-transform: uppercase;
    margin: 0 0 18px;
}

.proc-row {
    flex: 1;
    display: grid;
    grid-template-columns: 140px 1fr 380px 60px;
    align-items: center;
    gap: 40px;
    padding: 16px 0;
    border-top: 1px solid #000000;
    transition: background-color 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
    cursor: pointer;
    min-height: 0;
}

.proc-row-last { border-bottom: 2px solid #000000; }

.proc-row:hover {
    background-color: #000000;
    color: #ffffff;
    padding-left: 20px;
}

.proc-pillar-num {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 96px;
    line-height: 0.85;
    color: #ff1e3c;
    letter-spacing: -0.03em;
}

.proc-pillar-mid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.proc-pillar-name {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(36px, 4.5vw, 68px);
    line-height: 0.95;
    text-transform: uppercase;
    color: inherit;
}

.proc-pillar-mid .b-mono { color: inherit; opacity: 0.7; }

.proc-pillar-desc {
    font-family: 'Calibri', 'Helvetica Neue', sans-serif;
    font-size: 13px;
    line-height: 1.55;
    color: inherit;
    opacity: 0.85;
    margin: 0;
}

.proc-arrow-big {
    font-family: 'Teko', sans-serif;
    font-size: 56px;
    text-align: right;
    color: inherit;
    transition: transform 0.25s ease;
}

.proc-row:hover .proc-arrow-big { transform: translateX(8px); }

/* ============ 04 WORK V2 ============ */
.b-work .work-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0;
    height: calc(100vh - 56px - 36px);
    margin-left: 48px;
    border-top: 2px solid #000000;
}

.b-work .work-tile {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    position: relative;
    background: #ffffff;
    min-height: 0;
}

.b-work .work-tile:nth-child(3) { border-right: none; }
.b-work .work-tile:nth-child(4) { grid-column: span 2; border-right: none; border-bottom: none; }
.b-work .work-tile:nth-child(2) { border-bottom: none; }
.b-work .work-tile-tall { grid-row: span 2; border-bottom: none; }

.work-tile-num {
    position: absolute;
    top: 14px;
    left: 16px;
    font-family: 'Teko', sans-serif;
    font-size: 12px;
    letter-spacing: 0.22em;
    color: #ff1e3c;
    z-index: 3;
    background: #ffffff;
    padding: 4px 8px;
    border: 1px solid #000000;
}

.b-work .work-thumb {
    flex: 1;
    min-height: 0;
    transition: filter 0.25s ease;
}

.b-work .work-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 20px;
    border-top: 2px solid #000000;
    background: #ffffff;
}

.b-work .work-name {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(24px, 2.6vw, 38px);
    text-transform: uppercase;
    letter-spacing: -0.005em;
    color: #000000;
}

.b-work .work-meta {
    font-family: 'Teko', sans-serif;
    font-size: 11px;
    color: #ff1e3c;
    letter-spacing: 0.16em;
}

.b-work .work-tile:hover .work-thumb { filter: invert(1); }

/* ============ 05 FOOTER V2 ============ */
.b-footer { border-top: 2px solid #000000; }

.b-footer-inner { display: none; }

.b-footer {
    width: 100%;
    min-height: 100vh;
    background: #ffffff;
    color: #000000;
    box-sizing: border-box;
    position: relative;
    padding-left: 48px;
    overflow: hidden;
}

.b-footer .b-side-label {
    border-right: 2px solid #000000;
}

.b-footer-hero {
    padding: 56px 80px 32px;
    border-bottom: 2px solid #000000;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
}

.b-mega {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(80px, 14vw, 240px);
    line-height: 0.82;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #000000;
    margin: 0;
}

.b-mega .line { display: block; }

.b-email {
    font-family: 'Teko', sans-serif;
    font-size: 14px;
    color: #ff1e3c;
    text-decoration: none;
    letter-spacing: 0.12em;
    border: 2px solid #000000;
    padding: 14px 22px;
    display: inline-block;
    background: #ffffff;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.b-email:hover {
    background: #ff1e3c;
    color: #ffffff;
}

.b-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    border-bottom: 2px solid #000000;
}

.b-footer-col {
    padding: 40px;
    border-right: 1px solid #000000;
    display: flex;
    flex-direction: column;
}

.b-footer-col:last-child { border-right: none; }

.b-team, .b-social {
    list-style: none;
    margin: 0;
    padding: 0;
}

.b-team li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid #000000;
    gap: 16px;
}

.b-team li:first-child { border-top: 1px solid #000000; }

.b-team li > span:first-child {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 26px;
    text-transform: uppercase;
    color: #000000;
}

.b-social li { border-top: 1px solid #000000; }
.b-social li:last-child { border-bottom: 1px solid #000000; }

.b-social a {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 26px;
    text-transform: uppercase;
    text-decoration: none;
    color: #000000;
    transition: color 0.2s ease;
}

.b-social a:hover { color: #ff1e3c; }
.b-social a > span { color: #ff1e3c; }

.b-foot-loc {
    font-family: 'Calibri', 'Helvetica Neue', sans-serif;
    font-size: 13px;
    margin: 0;
    line-height: 1.6;
    color: #000000;
}

.b-footer-bottom {
    display: flex;
    justify-content: space-between;
    padding: 16px 40px;
    background: #ffffff;
    border-top: 2px solid #000000;
}

/* Make sure footer marquee sits above bottom strip */
.b-footer .b-marquee {
    bottom: 40px;
    left: 48px;
}

/* ============ Responsive ============ */
@media (max-width: 1100px) {
    .b-mega-headline { font-size: clamp(56px, 12vw, 160px); }
    .b-mega { font-size: clamp(64px, 14vw, 180px); }
    .b-intro-stage { grid-template-columns: 1fr; gap: 24px; padding: 32px 32px 16px 60px; }
    .b-intro-foot { padding: 20px 32px 60px 60px; }
    .b-services .svc-list, .b-work .work-grid, .proc-massive { padding-left: 60px; }
    .b-services .svc-row { grid-template-columns: 70px 1fr 60px; padding: 0 32px; }
    .b-services .svc-desc { display: none; }
    .proc-massive { padding: 24px 32px 24px 60px; }
    .proc-row { grid-template-columns: 90px 1fr 40px; padding: 12px 0; }
    .proc-pillar-desc { display: none; }
    .b-work .work-grid { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); }
    .b-work .work-tile:nth-child(4) { grid-column: span 2; }
    .b-footer-grid { grid-template-columns: 1fr; }
    .b-footer-col { border-right: none; border-bottom: 1px solid #000000; }
    .b-footer-hero { flex-direction: column; align-items: flex-start; padding: 32px 32px 24px; }
    .b-bignum { font-size: 60vh; }
}

/* ===========================================================
   BRUTALIST V3 — FLOATING CARDS / NEGATIVE SPACE
   Panels become invisible 100vw/100vh containers.
   Each .b-card is an absolutely-positioned white tile so the
   scroll video shows through the gaps between cards.
   =========================================================== */

.b-intro, .b-services, .b-process, .b-work {
    top: calc(var(--fraction) * (100% - 100vh)) !important;
    left: 0 !important;
    transform: none !important;
    width: 100vw !important;
    height: 100vh !important;
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
    padding: 0 !important;
    display: block !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.b-intro > *, .b-services > *, .b-process > *, .b-work > * {
    pointer-events: auto;
}

.b-card {
    position: absolute;
    background: #ffffff;
    border: 2px solid #000000;
    overflow: hidden;
    color: #000000;
    z-index: 3;
}

/* — shared card primitives — */
.card-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    gap: 24px;
    font-family: 'Teko', sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.card-tag .b-mono-accent { color: #ff1e3c; }

.card-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: 28px 10px;
    background: #000000;
    color: #ffffff;
    border-color: #000000;
}

.card-vertical .b-vert-text {
    font-family: 'Teko', sans-serif;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.card-stamp {
    background: #ff1e3c;
    border-color: #000000;
    color: #ffffff;
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

.card-stamp .b-mono { font-family: 'Teko', sans-serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.card-stamp .b-mono-accent { color: #000000; }
.card-stamp .b-stamp-big {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 44px;
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: -0.01em;
}

.card-bignum {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-color: #ff1e3c;
    color: #ff1e3c;
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    line-height: 0.8;
    letter-spacing: -0.04em;
}

.card-bignum span {
    font-size: clamp(160px, 22vw, 320px);
}

.b-accent { color: #ff1e3c; }

/* === INTRO panel === */
.card-intro-tag {
    top: 14vh;
    left: 5vw;
    width: 26vw;
    height: 44px;
}

.card-intro-hero {
    top: 22vh;
    left: 5vw;
    width: 64vw;
    padding: 36px 40px 44px;
    background: #ffffff;
}

.card-headline {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(72px, 11vw, 168px);
    line-height: 0.86;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #000000;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-headline em {
    font-style: italic;
    font-weight: 500;
    color: #ff1e3c;
}

.card-headline .line-accent { letter-spacing: -0.02em; }

.card-intro-side {
    top: 14vh;
    right: 3vw;
    width: 44px;
    height: 68vh;
}

.card-intro-meta {
    bottom: 8vh;
    left: 5vw;
    width: 58vw;
    padding: 22px 28px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.card-intro-meta .b-col {
    padding: 4px 18px;
    border-right: 1px solid #000000;
}
.card-intro-meta .b-col:last-child { border-right: 0; }
.card-intro-meta .b-tag {
    font-family: 'Teko', sans-serif;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ff1e3c;
    display: block;
    margin-bottom: 8px;
}
.card-intro-meta p {
    font-family: 'Calibri', 'Helvetica Neue', sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: #000000;
}

.card-intro-stamp {
    bottom: 8vh;
    right: 7vw;
    width: 22vw;
    height: 18vh;
}

/* === SERVICES panel === */
.card-svc-tag {
    top: 14vh;
    left: 6vw;
    width: 22vw;
    height: 38px;
}

.card-svc-title {
    top: 22vh;
    left: 6vw;
    width: 40vw;
    padding: 22px 26px 26px;
}

.card-subhead {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(48px, 5.8vw, 96px);
    line-height: 0.9;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #000000;
}

.card-svc-list {
    top: 22vh;
    right: 6vw;
    width: 36vw;
    height: 56vh;
    padding: 0;
}

.svc-list { list-style: none; margin: 0; padding: 0; }

.svc-row {
    display: grid;
    grid-template-columns: 80px 1fr 60px;
    align-items: center;
    padding: 14px 24px;
    border-top: 1px solid #000000;
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    color: #000000;
    transition: background 0.18s ease, color 0.18s ease;
    cursor: pointer;
}

.svc-row:hover { background: #000000; color: #ffffff; }
.svc-row:hover .svc-num { color: #ff1e3c; }
.svc-row:hover .svc-arrow { color: #ff1e3c; }
.svc-row:last-child { border-bottom: 1px solid #000000; }

.svc-num {
    font-family: 'Teko', sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: #ff1e3c;
}
.svc-name { font-size: 32px; letter-spacing: -0.01em; line-height: 1; }
.svc-arrow { text-align: right; font-size: 22px; color: #000000; }

/* === PROCESS panel === */
.card-proc-tag {
    top: 14vh;
    left: 6vw;
    width: 22vw;
    height: 38px;
}

.card-proc-title {
    top: 22vh;
    left: 6vw;
    width: 60vw;
    padding: 22px 26px 26px;
}

.card-mega {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(56px, 7vw, 120px);
    line-height: 0.88;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #000000;
}

.card-step {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background 0.2s ease, color 0.2s ease;
    cursor: default;
    height: 22vh;
    width: 20vw;
    bottom: 14vh;
}

.card-step:hover { background: #ff1e3c; }
.card-step:hover .step-num,
.card-step:hover .step-name { color: #ffffff; }

.step-num {
    font-family: 'Teko', sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: #ff1e3c;
}
.step-name {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(32px, 2.6vw, 44px);
    text-transform: uppercase;
    line-height: 0.95;
    color: #000000;
    letter-spacing: -0.01em;
}

.card-step-1 { left: 6vw; }
.card-step-2 { left: 28vw; }
.card-step-3 { left: 50vw; }
.card-step-4 { left: 72vw; width: 22vw; }

/* === WORK panel === */
.card-work-tag {
    top: 14vh;
    left: 6vw;
    width: 22vw;
    height: 38px;
}

.card-work-title {
    top: 22vh;
    left: 6vw;
    width: 36vw;
    padding: 22px 26px 26px;
}

.card-work {
    text-decoration: none;
    color: #000000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.work-thumb { flex: 1; width: 100%; }

.work-info {
    border-top: 2px solid #000000;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    background: #ffffff;
}

.work-name {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.work-meta {
    font-family: 'Teko', sans-serif;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: #ff1e3c;
}

.card-work:hover .work-info { background: #ff1e3c; color: #ffffff; }
.card-work:hover .work-meta { color: #000000; }

.card-work-1 { top: 22vh; right: 30vw; width: 22vw; height: 30vh; }
.card-work-2 { top: 22vh; right: 6vw; width: 22vw; height: 38vh; }
.card-work-3 { bottom: 10vh; left: 6vw; width: 22vw; height: 30vh; }
.card-work-4 { bottom: 10vh; right: 6vw; width: 26vw; height: 22vh; }

/* === FOOTER panel — independent scroll snap target === */
.b-footer {
    background: #ffffff !important;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    border-top: 2px solid #000000;
}

.footer-cards-wrap {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.card-footer-tag {
    top: 6vh;
    left: 5vw;
    width: 28vw;
    height: 44px;
}

.card-footer-hero {
    top: 13vh;
    left: 5vw;
    width: 78vw;
    padding: 32px 40px 40px;
    background: #ffffff;
}

.card-mega-foot {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(72px, 10vw, 180px);
    line-height: 0.86;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    color: #000000;
    display: flex;
    flex-direction: column;
}

.card-email {
    top: 13vh;
    right: 4vw;
    width: 26vw;
    height: 18vh;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ff1e3c;
    border-color: #000000;
    color: #ffffff;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.card-email:hover { background: #000000; }
.card-email .b-mono {
    font-family: 'Teko', sans-serif;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.card-email-addr {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(28px, 2.6vw, 44px);
    letter-spacing: -0.01em;
    line-height: 0.95;
}

.card-team {
    bottom: 12vh;
    left: 5vw;
    width: 30vw;
    padding: 18px 22px 20px;
}

.card-team .b-tag,
.card-socials .b-tag,
.card-location .b-tag {
    display: block;
    font-family: 'Teko', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: #ff1e3c;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.card-team .b-team li,
.card-team .b-team li:first-child { border-color: #000000; padding: 10px 0; }
.card-team .b-team li > span:first-child { font-size: 22px; }

.card-socials {
    bottom: 12vh;
    left: 37vw;
    width: 24vw;
    padding: 18px 22px 20px;
}

.card-socials .b-social a { font-size: 22px; padding: 10px 0; }

.card-location {
    bottom: 12vh;
    right: 4vw;
    width: 26vw;
    padding: 18px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-location p {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #000000;
}

.card-marquee {
    bottom: 2vh;
    left: 2vw;
    width: 96vw;
    height: 5vh;
    background: #000000;
    border-color: #000000;
    color: #ffffff;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.card-marquee .b-marquee-track {
    display: flex;
    gap: 60px;
    white-space: nowrap;
    animation: marquee-scroll 30s linear infinite;
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: 28px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Responsive: collapse cards on narrow viewports */
@media (max-width: 900px) {
    .card-intro-hero { width: 88vw; left: 3vw; }
    .card-intro-side { display: none; }
    .card-intro-meta { width: 88vw; left: 3vw; grid-template-columns: 1fr; }
    .card-intro-meta .b-col { border-right: 0; border-bottom: 1px solid #000000; padding: 12px 0; }
    .card-intro-meta .b-col:last-child { border-bottom: 0; }
    .card-intro-stamp { right: 3vw; width: 50vw; }

    .card-svc-title, .card-svc-list { width: 88vw; left: 3vw; right: auto; }
    .card-svc-list { top: 50vh; height: 42vh; }
    .card-svc-num { display: none; }
    .svc-name { font-size: 28px; }

    .card-proc-title { width: 88vw; left: 3vw; }
    .card-step-1, .card-step-2, .card-step-3, .card-step-4 {
        width: 44vw; height: 22vh;
    }
    .card-step-1 { top: 36vh; left: 3vw; right: auto; }
    .card-step-2 { top: 36vh; right: 3vw; }
    .card-step-3 { top: 60vh; left: 3vw; right: auto; }
    .card-step-4 { top: 60vh; right: 3vw; left: auto; }
    .card-proc-stamp { width: 60vw; right: 3vw; }

    .card-work-title { width: 88vw; left: 3vw; }
    .card-work-1, .card-work-2, .card-work-3, .card-work-4 {
        width: 44vw; height: 26vh;
    }
    .card-work-1 { top: 42vh; left: 3vw; right: auto; }
    .card-work-2 { top: 42vh; right: 3vw; height: 26vh; }
    .card-work-3 { bottom: 6vh; left: 3vw; }
    .card-work-4 { bottom: 6vh; right: 3vw; width: 44vw; }

    .card-footer-hero { width: 92vw; left: 3vw; }
    .card-email { right: 3vw; width: 50vw; top: auto; bottom: 38vh; }
    .card-team, .card-socials, .card-location {
        width: 92vw; left: 3vw; right: auto;
    }
    .card-socials { bottom: 22vh; }
    .card-location { bottom: 8vh; }
}

/* ===========================================================
   Spacers between pinned frames (work / about) — same as
   canvas-pre / canvas-mid so all 4 frames land equally spaced.
   =========================================================== */
/* Each spacer trimmed below the versionD 200vh baseline so the Work and
   About frames sit lower in the canvas progression. */
.canvas-after-process { height: 120vh; }
.canvas-after-work    { height: 200vh; }

/* ===========================================================
   WORK — scroll-driven 3D parallax (frame 3)
   The wrapper is tall (300vh) to provide scroll-time; `.work-stack`
   is sticky-pinned inside it. Three horizontal rows drift in
   alternating directions while the row-stack tilts in from
   rotateX / rotateZ on entry. Solid fills, 2px black borders,
   no shadows, no rounded corners — same card language as before.
   =========================================================== */
.work-stack-wrapper {
    position: relative;
    width: 100%;
    height: 300vh;
    background: transparent;
    z-index: 5;
}
.work-stack {
    position: sticky;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: transparent;
}

.work-gallery {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
}
.work-gallery__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: transparent;
    z-index: 1;
}

.work-head {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2vh;
    pointer-events: none;
    text-align: center;
    width: min(92vw, 1200px);
}
.work-eyebrow {
    font-family: 'Teko', sans-serif;
    font-size: clamp(12px, 1vw, 16px);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #ff1e3c;
    margin: 0;
}
.work-title {
    font-family: 'Teko', sans-serif;
    font-weight: 600;
    font-size: clamp(56px, 9vw, 168px);
    line-height: 0.85;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: #ff1e3c;
    margin: 0;
    text-align: center;
}
.work-accent { color: #ff1e3c; }

.work-gallery__hint {
    position: absolute;
    left: 50%;
    bottom: 3vh;
    transform: translateX(-50%);
    font-family: 'Teko', sans-serif;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #000000;
    opacity: 0.5;
    pointer-events: none;
    z-index: 3;
}

.work-gallery__sr-list {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.work-gallery.is-fallback .work-gallery__sr-list {
    position: relative;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.4vh 1.2vw;
    padding: 12vh 2vw 2vh;
    list-style: none;
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(20px, 2vw, 32px);
    text-transform: uppercase;
    color: #000000;
    text-align: center;
}
.work-gallery.is-fallback .work-gallery__canvas { display: none; }

@media (max-width: 768px) {
    .work-stack-wrapper { height: 200vh; }
    .work-title { font-size: clamp(48px, 12vw, 96px); }
    .work-eyebrow { font-size: 11px; letter-spacing: 0.28em; }
}

/* ===========================================================
   ABOUT US — pinned manifesto + team (frame 4)
   =========================================================== */
.about-stack-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 5;
}
.about-stack {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
    background: transparent;
    display: flex;
    flex-direction: column;
    padding: 5vh 4vw 3vh;
    box-sizing: border-box;
    gap: 2vh;
    color: #000000;
}

/* Oversize ghost wordmark sits behind everything. */
.about-ghost {
    position: absolute;
    left: 50%;
    top: 56%;
    transform: translate(-50%, -50%);
    font-family: 'Teko', sans-serif;
    font-weight: 600;
    font-size: clamp(180px, 24vw, 460px);
    letter-spacing: -0.04em;
    line-height: 0.85;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px #000000;
    text-stroke: 1px #000000;
    opacity: 0.16;
    user-select: none;
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
}

.about-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4vw;
    border-bottom: 2px solid #000000;
    padding-bottom: 1.2vh;
    flex: 0 0 auto;
}
.about-eyebrow {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(11px, 0.95vw, 14px);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #ff1e3c;
    margin: 0;
}
.about-stamp {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(11px, 0.95vw, 14px);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #000000;
    margin: 0;
}

.about-headline {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    align-items: end;
    gap: 4vw;
    flex: 0 0 auto;
    padding: 1vh 0 0.5vh;
}
.about-title {
    grid-column: 2;
    font-family: 'Teko', sans-serif;
    font-weight: 600;
    font-size: clamp(64px, 10vw, 184px);
    line-height: 0.84;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #000000;
    margin: 0;
    text-align: right;
    justify-self: end;
}
.about-accent { color: #ff1e3c; }
.about-lede {
    grid-column: 1;
    grid-row: 1;
    font-family: 'Calibri', 'Helvetica Neue', sans-serif;
    font-size: clamp(15px, 1.15vw, 20px);
    line-height: 1.5;
    color: #000000;
    margin: 0;
    max-width: 46ch;
    justify-self: start;
    border-left: 2px solid #ff1e3c;
    padding-left: 1.2vw;
}

.about-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4vw;
    flex: 0 0 auto;
    padding-top: 1.4vh;
}
.about-col {
    border-top: 1px solid #000000;
    padding-top: 1.4vh;
    display: flex;
    flex-direction: column;
    gap: 1vh;
}
.about-col-label {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(11px, 0.9vw, 13px);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #ff1e3c;
    margin: 0;
}
.about-col-body {
    font-family: 'Calibri', 'Helvetica Neue', sans-serif;
    font-size: clamp(13px, 0.95vw, 17px);
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

/* Marquee — full-width red ribbon with continuous scroll. */
.about-marquee {
    position: relative;
    z-index: 2;
    width: calc(100% + 8vw);
    margin-left: -4vw;
    background: #ff1e3c;
    color: #ffffff;
    overflow: hidden;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
    flex: 0 0 auto;
}
.about-marquee__track {
    display: flex;
    width: max-content;
    animation: about-marquee 28s linear infinite;
}
.about-marquee__track span {
    flex: 0 0 auto;
    padding: 0.9vh 0;
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(18px, 1.7vw, 30px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
}
.about-marquee__track em {
    font-style: normal;
    color: #000000;
    padding: 0 0.7em;
}
@keyframes about-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Legal / registered information — print-style data sheet. */
.about-legal {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1.2vh;
    flex: 0 0 auto;
    padding-top: 0.6vh;
}
.about-legal__label {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(11px, 0.9vw, 13px);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #ff1e3c;
    margin: 0;
}
.about-legal__grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 1vw;
    margin: 0;
    padding-top: 0.6vh;
}
.about-legal__row {
    display: flex;
    flex-direction: column;
    gap: 0.8vh;
    padding: 1.6vh 1.4vw;
    color: #ffffff;
}
.about-legal__row--gst { background: #ff1e3c; }
.about-legal__row--addr { background: #000000; }
.about-legal__row dt {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(10px, 0.85vw, 12px);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 0.7;
}
.about-legal__row dd {
    margin: 0;
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(16px, 1.35vw, 24px);
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-transform: uppercase;
    color: #ffffff;
}

.about-headline__right {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2vh;
    justify-self: end;
}
.about-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.9em;
    padding: 1.3vh 2vw;
    background: #ff1e3c;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(18px, 1.6vw, 28px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 2px solid #000000;
    transition: background 0.25s ease, color 0.25s ease;
}
.about-cta:hover { background: #000000; color: #ffffff; }
.about-cta-arrow { display: inline-block; transition: transform 0.25s ease; }
.about-cta:hover .about-cta-arrow { transform: translateX(0.3em); }

@media (prefers-reduced-motion: reduce) {
    .about-marquee__track { animation: none; }
}

@media (max-width: 900px) {
    .about-stack-wrapper { height: auto; }
    .about-stack {
        position: relative;
        height: auto;
        padding: 8vh 6vw 4vh;
        gap: 3vh;
    }
    .about-ghost { font-size: clamp(120px, 36vw, 240px); top: 30%; }
    .about-top { flex-direction: column; align-items: flex-start; gap: 1vh; }
    .about-headline { grid-template-columns: 1fr; gap: 2vh; }
    .about-headline__right { grid-column: 1; align-items: stretch; }
    .about-title { font-size: clamp(56px, 14vw, 110px); text-align: right; }
    .about-lede { grid-column: 1; grid-row: auto; justify-self: start; }
    .about-grid { grid-template-columns: 1fr; gap: 2vh; }
    .about-marquee { width: calc(100% + 12vw); margin-left: -6vw; }
    .about-legal__grid { grid-template-columns: 1fr; gap: 1.4vh; }
}

/* ===========================================================
   MOBILE / NARROW VIEWPORT — version2.0 responsive layer
   - Hero canvas: scale 16:9 to cover the viewport, sides cropped
   - Wordmark "Polymorph / Studio" stacks on two lines
   - Header collapses to a fixed bottom-right hamburger
   - Services 3x3 grid → single column, all info visible, no snap
   - Process / work / about: reduced typography, shorter pinned heights
   =========================================================== */
@media (max-width: 900px) {
    /* Hero canvas cover */
    #video-canvas {
        width: max(100vw, calc(100vh * 16 / 9));
        height: max(100vh, calc(100vw * 9 / 16));
        max-width: none;
        object-fit: cover;
    }

    /* Hero wordmark wraps to two lines, pushed up so What We Do peeks below */
    .hero-bottom { padding: 0 5vw 22vh; }
    .hero-bottom-text {
        white-space: normal;
        font-size: clamp(64px, 26vw, 220px);
        line-height: 0.86;
    }
    .hero-bottom-word { display: block; }

    /* Header: hide inline nav + logo, floating hamburger bottom-right */
    .site-header { padding: 0; pointer-events: none; background: transparent; }
    .site-header .header-link,
    .site-header .header-logo-link { display: none; }
    /* Mobile: hamburger is the sole nav — show it always (base styles do
       both the button and the opened dropdown). */
    .hamburger { display: flex !important; pointer-events: auto; }
    .nav-menu { pointer-events: auto; }

    /* Services: 9 tiles stacked, all info visible, no snap behavior */
    .services-stack-wrapper { height: auto !important; }
    .services-stack { position: relative !important; height: auto; }
    .dyn-services { height: auto; padding: 6vh 6vw 4vh; }
    .dyn-grid,
    .dyn-grid.is-snapped {
        grid-template-rows: repeat(9, auto) !important;
        grid-template-columns: 1fr !important;
        background: #ffffff;
        border: 1px solid #000000;
        gap: 0;
    }
    .dyn-tile,
    .dyn-grid.is-snapped .dyn-tile {
        background: #ffffff;
        color: #000000;
        padding: 3.2vh 4vw;
        border: none;
        border-bottom: 1px solid #000000;
    }
    .dyn-tile:last-child { border-bottom: none; }
    .dyn-tile__info {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto;
        margin-top: 1.6vh;
        gap: 1.2vh;
    }
    .dyn-tile__num,
    .dyn-grid.is-snapped .dyn-tile__num { color: #ff1e3c; }
    .dyn-tile__name { font-size: clamp(36px, 9vw, 64px); }

    /* Process: scale type, normalise rotation pinning */
    .proc-title { font-size: clamp(40px, 11vw, 80px) !important; }
    .proc-eyebrow { font-size: 11px !important; }

    /* Work / partners gallery: shorter pin, smaller title, lift type
       off the 3D canvas so brand wordmarks don't visually merge with it. */
    .work-stack-wrapper { height: 180vh; }
    .work-title {
        font-size: clamp(40px, 11vw, 80px) !important;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.85);
    }
    .work-eyebrow {
        font-size: 11px !important;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
    }

    /* Canvas spacers shrink so the long pinned stacks aren't 3+ screens */
    .canvas-pre  { height: 82vh; }
    .canvas-mid  { height: 140vh; }
    .canvas-after-process { height: 80vh; }
    .canvas-after-work    { height: 120vh; }

    /* About: re-tighten the now-collapsed flow. Top-pad enough that the
       eyebrow doesn't slide under the floating 48px hamburger button. */
    .about-stack { padding: max(6vh, 78px) 6vw 4vh; }
    .about-cta { font-size: clamp(18px, 4.5vw, 22px); padding: 1.4vh 5vw; }
}

/* ===========================================================
   SITE FOOTER — black surround, red CTA block, meta strip.
   Mirrors the reference: oversize ghost "STUDIO" wordmark
   behind the headline, black "GET IN TOUCH" pill at the right.
   =========================================================== */

.site-footer {
    background: #ff1e3c;
    color: #ffffff;
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 50;
}

.footer-cta {
    position: relative;
    background: transparent;
    padding: clamp(44px, 6vw, 96px) clamp(32px, 6vw, 96px);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: clamp(24px, 4vw, 60px);
    min-height: clamp(280px, 38vh, 380px);
}

.footer-cta-text {
    position: relative;
    z-index: 2;
    max-width: 60ch;
}

.footer-cta-title {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(36px, 5.4vw, 80px);
    line-height: 0.95;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 16px;
    color: #ffffff;
}

.footer-cta-sub {
    font-family: 'Calibri', 'Helvetica Neue', sans-serif;
    font-size: clamp(1rem, 1.3vw, 1.25rem);
    line-height: 1.4;
    margin: 0;
    color: #ffffff;
}

.footer-cta-bg {
    position: absolute;
    top: 50%;
    right: -2vw;
    transform: translateY(-50%);
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(180px, 24vw, 380px);
    line-height: 0.85;
    color: rgba(0, 0, 0, 0.18);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.footer-cta-btn {
    position: relative;
    z-index: 2;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #000000;
    color: #ffffff;
    padding: 18px 30px;
    font-family: 'Teko', sans-serif;
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid #000000;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.footer-cta-btn:hover {
    background: #ffffff;
    color: #000000;
}

.footer-cta-arrow {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    transform: translateY(-1px);
}

.footer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 2.6vh clamp(32px, 6vw, 96px);
    border-top: 1px solid rgba(0, 0, 0, 0.35);
    font-family: 'Teko', sans-serif;
    font-size: 16px;
    letter-spacing: 0.06em;
    color: #000000;
}

.footer-url {
    margin: 0;
    opacity: 0.9;
}

.footer-legal {
    display: flex;
    gap: clamp(20px, 3vw, 40px);
}

.footer-legal a {
    color: #000000;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.footer-legal a:hover { opacity: 1; }

@media (max-width: 760px) {
    .site-footer { padding: 0; }
    .footer-cta {
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 28px;
        padding: 36px 26px;
        min-height: 240px;
    }
    .footer-cta-btn { justify-self: flex-start; padding: 14px 22px; }
    .footer-cta-bg { font-size: 40vw; right: -8vw; opacity: 0.9; }
    .footer-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 22px 26px;
    }
    .footer-legal { gap: 20px; }
}