/* =========================================================================
   ZQ Portfolio — Design system + page styles
   Single-file stylesheet. Replaces Bootstrap, Font Awesome, Owl, FancyBox,
   AOS, Animate.css, Nice Select, Odometer CSS, Elpath, Color-2, Darkmode,
   the entire module-css/ tree, plus Potu's style.css / custom.css / responsive.css.
   ========================================================================= */

/* === 1. Fonts ===========================================================
   Satoshi: self-hosted in assets/fonts/. Five weights, woff2 only.
   JetBrains Mono: self-hosted (Latin subset from @fontsource).
   ====================================================================== */

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* === 2. Design tokens =================================================== */

:root {
    color-scheme: light;

    /* Color — light theme. OKLCH for perceptual uniformity. Neutrals tinted
       toward the brand amber hue (75°). No pure #fff or #000 anywhere. */
    --bg:               oklch(0.978 0.008 80);     /* warm paper          */
    --bg-elev:          oklch(0.955 0.010 80);     /* slight elevation    */
    --bg-sunk:          oklch(0.935 0.012 78);     /* sunken: form bg     */
    --ink:              oklch(0.205 0.025 250);    /* near #0F172A, tinted*/
    --ink-2:            oklch(0.355 0.020 250);    /* secondary text      */
    --ink-3:            oklch(0.520 0.015 250);    /* tertiary, meta      */
    --line:             oklch(0.870 0.012 75);     /* hairline border     */
    --line-2:           oklch(0.795 0.014 75);     /* stronger border     */

    --accent:           oklch(0.760 0.155 75);     /* signal amber        */
    --accent-2:         oklch(0.715 0.175 70);     /* hover, stronger     */
    --accent-soft:      oklch(0.940 0.060 80);     /* tinted bg use       */
    --accent-ink:       oklch(0.270 0.080 75);     /* accessible on accent*/

    --success:          oklch(0.660 0.150 145);
    --error:            oklch(0.580 0.190 25);

    /* CTA-section tokens — stay dark in both themes so the section
       always reads as a deliberate pause/callout, not an inverted block. */
    --cta-bg:           oklch(0.155 0.020 250);   /* deep ink, both themes */
    --cta-fg:           oklch(0.945 0.010 78);    /* cream, both themes */
    --cta-line:         oklch(0.270 0.018 250);   /* faint border in both themes */

    /* Type stack */
    --font-sans: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, monospace;

    /* Fluid type scale. 1.333 perfect-fourth-ish on display, calmer on body. */
    --fs-xs:   0.75rem;                                              /* 12 */
    --fs-sm:   0.8125rem;                                            /* 13 */
    --fs-base: 1rem;                                                 /* 16 */
    --fs-md:   1.0625rem;                                            /* 17 */
    --fs-lg:   clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem);           /* 18-20 */
    --fs-xl:   clamp(1.375rem, 1.2rem + 0.85vw, 1.625rem);           /* 22-26 */
    --fs-2xl:  clamp(1.625rem, 1.35rem + 1.35vw, 2.125rem);          /* 26-34 */
    --fs-3xl:  clamp(2rem, 1.45rem + 2.7vw, 3rem);                   /* 32-48 */
    --fs-4xl:  clamp(2.5rem, 1.5rem + 5vw, 4.25rem);                 /* 40-68 */
    --fs-5xl:  clamp(2.875rem, 1.2rem + 8.2vw, 5.5rem);              /* 46-88, hero */

    /* Spacing — 4pt base, semantic names */
    --s-3xs:  0.25rem;   /* 4  */
    --s-2xs:  0.5rem;    /* 8  */
    --s-xs:   0.75rem;   /* 12 */
    --s-sm:   1rem;      /* 16 */
    --s-md:   1.5rem;    /* 24 */
    --s-lg:   2rem;      /* 32 */
    --s-xl:   3rem;      /* 48 */
    --s-2xl:  4rem;      /* 64 */
    --s-3xl:  6rem;      /* 96 */
    --s-4xl:  8rem;      /* 128 */

    /* Section vertical padding, fluid */
    --section-py: clamp(4rem, 4rem + 4vw, 8rem);
    --section-py-tight: clamp(3rem, 2rem + 3vw, 5.5rem);

    /* Layout */
    --container-max: 1280px;
    --container-px: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
    --measure: 68ch;

    /* Radii */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-pill: 999px;

    /* Motion */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 150ms;
    --dur-base: 250ms;
    --dur-medium: 400ms;
    --dur-slow: 600ms;

    /* Elevation — used sparingly. Shadows in light, lighter surfaces in dark. */
    --shadow-sm: 0 1px 2px oklch(0.205 0.025 250 / 0.06);
    --shadow-md: 0 4px 14px oklch(0.205 0.025 250 / 0.08);
    --shadow-lg: 0 12px 36px oklch(0.205 0.025 250 / 0.10);

    /* Z-index scale, semantic */
    --z-header: 60;
    --z-mobile-menu: 80;
    --z-scroll-top: 50;
    --z-theme-switch: 70;
    --z-skip: 100;
}

[data-theme="dark"] {
    color-scheme: dark;

    --bg:               oklch(0.165 0.018 250);
    --bg-elev:          oklch(0.205 0.020 250);
    --bg-sunk:          oklch(0.145 0.015 250);
    --ink:              oklch(0.940 0.012 78);
    --ink-2:            oklch(0.770 0.012 78);
    --ink-3:            oklch(0.605 0.012 78);
    --line:             oklch(0.290 0.020 250);
    --line-2:           oklch(0.370 0.022 250);

    --accent:           oklch(0.790 0.160 75);
    --accent-2:         oklch(0.835 0.140 75);
    --accent-soft:      oklch(0.290 0.060 75);
    --accent-ink:       oklch(0.180 0.020 75);

    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.40);
    --shadow-md: 0 4px 14px oklch(0 0 0 / 0.50);
    --shadow-lg: 0 12px 36px oklch(0 0 0 / 0.60);
}

/* === 3. Reset / base ==================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    scroll-behavior: smooth;
}

html, body { margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.6;
    font-weight: 400;
    min-height: 100dvh;
    transition: background-color var(--dur-base) var(--ease-out-quart),
                color var(--dur-base) var(--ease-out-quart);
}

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

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--ink);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.022em;
    text-wrap: balance;
}

h1 {
    font-size: var(--fs-5xl);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.03em;
}
h2 { font-size: var(--fs-3xl); letter-spacing: -0.025em; line-height: 1.08; }
h3 { font-size: var(--fs-xl); letter-spacing: -0.015em; line-height: 1.2; }
h4 { font-size: var(--fs-md); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
h5, h6 { font-size: var(--fs-base); font-weight: 600; }

p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
p + p { margin-top: var(--s-sm); }

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out-quart),
                opacity var(--dur-fast) var(--ease-out-quart);
}
a:hover { color: var(--accent-2); }

/* Disable the 300ms double-tap zoom delay on interactive elements.
   Doesn't affect scrolling or pinch-zoom; just makes taps feel
   instant on touch devices. */
a, button, input[type="submit"], [role="button"], .demo-switch button,
.mobile-nav-toggler, .scroll-to-top {
    touch-action: manipulation;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

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

input, textarea, select {
    font: inherit;
    color: inherit;
    background: none;
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* Focus — visible but not noisy */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

/* === 4. Skip link ======================================================= */

.zq-skip {
    position: absolute;
    inset-block-start: var(--s-2xs);
    inset-inline-start: var(--s-2xs);
    z-index: var(--z-skip);
    padding: var(--s-2xs) var(--s-sm);
    background: var(--ink);
    color: var(--bg);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    border-radius: var(--r-sm);
    transform: translateY(-150%);
    transition: transform var(--dur-base) var(--ease-out-quart);
}
.zq-skip:focus-visible {
    transform: translateY(0);
    outline-offset: 4px;
}

/* === 5. Layout primitives =============================================== */

.outer-container,
.large-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-px);
}

.boxed_wrapper { background: var(--bg); }
.zq-framed { display: block; }

section { padding-block: var(--section-py); position: relative; }

/* Kill Potu's "pattern-layer" decorative shape images — pure noise that
   adds requests for nothing. The new layouts breathe on their own. */
.pattern-layer { display: none !important; }

/* Kill the legacy Potu "mouse-pointer" custom cursor, and the preloader
   spinner (loading should feel instant, not theatrical). The demo-switch
   (theme toggle) stays per stated preference: keep Potu's default
   floating switch, just restyled. */
.mouse-pointer,
.loader-wrap {
    display: none !important;
}

/* === Theme switch (Potu's floating right-side panel, restyled) ===
   Mobile-first: pill sits at bottom-right corner on phones.
   At >=640px it becomes a vertical floater on the right edge. */
.demo-switch {
    position: fixed;
    inset-block-end: var(--s-md);
    inset-inline-end: var(--s-md);
    z-index: var(--z-theme-switch);
    display: flex;
    flex-direction: row;
    gap: 3px;
    padding: 3px;
    background: color-mix(in oklch, var(--bg-elev), transparent 8%);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.demo-switch .demo_switch { display: contents; }
.demo-switch button {
    inline-size: 2rem;
    block-size: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill);
    color: var(--ink-3);
    transition: background var(--dur-fast) var(--ease-out-quart),
                color var(--dur-fast) var(--ease-out-quart);
    position: relative;
}
/* Extend the hit area to 44x44 while keeping the visual 32x32 circle.
   Pseudo-element is invisible; pointer events propagate to the button. */
.demo-switch button::before {
    content: '';
    position: absolute;
    inset: -6px;
}
.demo-switch button:hover { color: var(--ink); }
.demo-switch button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--bg);
}
.demo-switch button svg { inline-size: 14px; block-size: 14px; }
.demo-switch button i { display: none; }   /* hide Font Awesome <i>; we use SVG */
@media (min-width: 640px) {
    .demo-switch {
        inset-block-start: 50%;
        inset-block-end: auto;
        inset-inline-end: var(--s-sm);
        transform: translateY(-50%);
        flex-direction: column;
    }
}

/* === 6. Wordmark / logo ================================================= */

.zq-wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2xs);
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}
.zq-wordmark:hover { color: var(--ink); }
.zq-wordmark .zq-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    background: var(--ink);
    color: var(--bg);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: var(--r-xs);
    transition: background var(--dur-fast) var(--ease-out-quart);
}
.zq-wordmark:hover .zq-mark { background: var(--accent); color: var(--accent-ink); }
.zq-wordmark .zq-name { font-size: var(--fs-md); line-height: 1; }

/* === 7. Header / nav ==================================================== */

.main-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background: color-mix(in oklch, var(--bg), transparent 8%);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-block-end: 1px solid color-mix(in oklch, var(--line), transparent 50%);
    transition: background var(--dur-base) var(--ease-out-quart);
}
.header-lower .outer-box,
.sticky-header .outer-box {
    display: flex;
    align-items: center;
    gap: var(--s-md);
    padding-block: var(--s-sm);
    justify-content: space-between;
}
.sticky-header { display: none; }

.main-menu .navigation {
    display: flex;
    align-items: center;
    gap: clamp(var(--s-sm), 2.5vw, var(--s-lg));
}
.main-menu .navigation > li > a {
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: -0.005em;
    padding-block: var(--s-2xs);
    position: relative;
}
.main-menu .navigation > li > a:hover { color: var(--ink); }
.main-menu .navigation > li.current > a { color: var(--ink); }
.main-menu .navigation > li.current > a::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 1px;
    background: var(--accent);
}

.menu-right-content .btn-box a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2xs);
    padding: var(--s-2xs) var(--s-md);
    background: var(--ink);
    color: var(--bg);
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--r-sm);
    transition: background var(--dur-fast) var(--ease-out-quart),
                color var(--dur-fast) var(--ease-out-quart),
                transform var(--dur-fast) var(--ease-out-quart);
}
.menu-right-content .btn-box a:hover {
    background: var(--accent);
    color: var(--accent-ink);
}
.menu-right-content .btn-box a:active { transform: scale(0.97); }

/* Mobile-first: hamburger + hidden desktop nav + hidden header CTA.
   The mobile menu (slide-in panel) carries the CTA on small screens.
   At >=880px the desktop nav + header CTA show, hamburger hides. */
.main-menu { display: none; }
.header-lower .menu-right-content { display: none; }
.mobile-nav-toggler {
    display: flex;
    width: 2.75rem;
    height: 2.75rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
}
.mobile-nav-toggler .icon-bar {
    display: block;
    inline-size: 18px;
    block-size: 1.5px;
    background: var(--ink);
    transition: transform var(--dur-base) var(--ease-out-quart);
}

@media (min-width: 880px) {
    .main-menu { display: block; }
    .mobile-nav-toggler { display: none; }
    .header-lower .menu-right-content { display: flex; }
}

/* === 8. Theme switch (in header) ======================================== */

.zq-theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    margin-inline-end: var(--s-2xs);
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
}
.zq-theme-switch button {
    inline-size: 1.625rem;
    block-size: 1.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill);
    color: var(--ink-3);
    transition: background var(--dur-fast) var(--ease-out-quart),
                color var(--dur-fast) var(--ease-out-quart);
}
.zq-theme-switch button:hover { color: var(--ink); }
.zq-theme-switch button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--bg);
}
.zq-theme-switch svg { width: 14px; height: 14px; }

/* === 9. Buttons ========================================================= */

.theme-btn,
.theme-btn-three {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2xs);
    padding: var(--s-xs) var(--s-md);
    background: var(--ink);
    color: var(--bg);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: -0.005em;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out-quart),
                transform var(--dur-fast) var(--ease-out-quart);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.theme-btn::after,
.theme-btn-three::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-base) var(--ease-out-expo);
    z-index: -1;
}
.theme-btn:hover,
.theme-btn-three:hover { color: var(--accent-ink); }
.theme-btn:hover::after,
.theme-btn-three:hover::after { transform: scaleX(1); }
.theme-btn:active,
.theme-btn-three:active { transform: scale(0.97); }
.theme-btn span,
.theme-btn-three span:first-child { position: relative; }
/* Hide Potu's 4-span decorative bits inside theme-btn-three */
.theme-btn-three span:nth-child(n+2) { display: none; }

/* Secondary text-link CTA (used in hero) */
.zq-hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    padding-block: var(--s-xs);
    position: relative;
}
.zq-hero-cta-secondary::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0.5rem;
    inline-size: 1.5rem;
    block-size: 1px;
    background: var(--accent);
    transform-origin: left center;
    transform: scaleX(0.4);
    transition: transform var(--dur-base) var(--ease-out-expo);
}
.zq-hero-cta-secondary:hover { color: var(--ink); }
.zq-hero-cta-secondary:hover::after { transform: scaleX(1); inline-size: 100%; }

/* === 10. Hero =========================================================== */

.banner-style-two {
    padding-block: clamp(3rem, 3rem + 5vw, 7rem) clamp(3rem, 3rem + 4vw, 6rem);
}
.banner-style-two .outer-container { position: relative; }

.zq-hero-availability {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.85rem 0.4rem 0.65rem;
    margin-block-end: var(--s-lg);
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--ink-2);
}
.zq-hero-availability a { color: var(--ink); border-bottom: 1px solid var(--line); }
.zq-hero-availability a:hover { color: var(--accent-2); border-color: var(--accent); }
/* Availability dot — fires a single ring "ping" when the hero enters
   the viewport, then sits as a static amber dot. The ping is the
   deliberate "Available for Q3 2026" brand signal, not a perpetual
   pulse. JS adds .is-pinged when the hero intersects; reduced-motion
   and ?noanim opt out by JS never adding the class. */
.zq-hero-availability-dot {
    inline-size: 0.55rem;
    block-size: 0.55rem;
    background: var(--accent);
    border-radius: var(--r-pill);
}
.zq-hero-availability-dot.is-pinged {
    animation: zq-ping 900ms var(--ease-out-quart) 1 forwards;
}
@keyframes zq-ping {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent), transparent 40%); }
    70%  { box-shadow: 0 0 0 10px color-mix(in oklch, var(--accent), transparent 100%); }
    100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent), transparent 100%); }
}

.banner-style-two .content-box {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(var(--s-lg), 5vw, var(--s-3xl));
    align-items: start;
}
@media (min-width: 1024px) {
    .banner-style-two .content-box {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    }
}

.zq-hero-text h1,
.zq-hero-text h2 {
    font-size: var(--fs-5xl);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--ink);
    max-inline-size: 14ch;
}
.zq-hero-text h1 span,
.zq-hero-text h2 span {
    color: var(--accent-2);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.04em;
}
.zq-hero-text .zq-hero-sub {
    margin-block-start: var(--s-md);
    font-size: var(--fs-lg);
    line-height: 1.55;
    color: var(--ink-2);
    max-inline-size: 48ch;
    font-weight: 400;
}
.zq-hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-md);
    margin-block-start: var(--s-xl);
}

/* The signature hero visual — the "system running" stack */
.zq-hero-visual {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--s-md) var(--s-md) var(--s-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-2);
    position: relative;
    overflow: hidden;
}
.zq-hero-visual::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--accent) 30%,
        var(--accent) 60%,
        transparent);
    opacity: 0.4;
}
.zq-hero-visual-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block-end: var(--s-sm);
    margin-block-end: var(--s-sm);
    border-block-end: 1px dashed var(--line);
    color: var(--ink-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.6875rem;
}
.zq-hero-visual-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--ink);
}
.zq-hero-visual-status::before {
    content: '';
    inline-size: 0.45rem;
    block-size: 0.45rem;
    background: var(--accent);
    border-radius: var(--r-pill);
}
.zq-hero-visual-stack {
    display: flex;
    flex-direction: column;
    gap: var(--s-2xs);
}
.zq-stack-row {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--s-2xs);
    align-items: center;
    padding-block: 0.35rem;
    color: var(--ink);
}
.zq-stack-num {
    color: var(--ink-3);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
}
.zq-stack-name {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zq-stack-conn {
    color: var(--accent);
    font-weight: 500;
    transform: translateZ(0);
    text-shadow: 0 0 0 transparent;
    transition: transform var(--dur-base) var(--ease-out-quart),
                text-shadow var(--dur-base) var(--ease-out-quart);
}
/* Active row highlight, advanced by JS while the cycle runs. The
   text-shadow glow appears on the active arrow and fades when the
   next row activates — gives the "system breathing" feel without a
   separate keyframe. */
.zq-stack-row.is-active .zq-stack-conn {
    transform: translateX(3px);
    text-shadow: 0 0 12px color-mix(in oklch, var(--accent), transparent 50%);
}
.zq-stack-row.is-active .zq-stack-name {
    color: var(--accent-2);
}
.zq-hero-visual-foot {
    margin-block-start: var(--s-sm);
    padding-block-start: var(--s-sm);
    border-block-start: 1px dashed var(--line);
    color: var(--ink-3);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: end;
}

/* === 11. About ========================================================== */

.about-section {
    padding-block: var(--section-py);
    background: var(--bg);
    border-block-start: 1px solid var(--line);
}
.about-section .content-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-lg);
}
.about-section .text-inner {
    max-inline-size: 56ch;
}
.about-section h3 {
    font-size: var(--fs-xl);
    font-weight: 500;
    color: var(--ink-3);
    letter-spacing: -0.01em;
    margin-block-end: 0.25rem;
}
/* Wave 👋 — fires a single hand-wave when the About section enters
   the viewport, then sits static. Same first-impression posture as
   the availability dot ping above. JS toggles .is-waved; reduced-
   motion and ?noanim opt out at the JS layer. */
.about-section .zq-wave {
    display: inline-block;
    transform-origin: 70% 70%;
}
.about-section .zq-wave.is-waved {
    animation: zq-wave 2.8s var(--ease-in-out) 1 forwards;
}
@keyframes zq-wave {
    0%, 60%, 100% { transform: rotate(0); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
}
.zq-name-treatment {
    display: block;
    font-size: var(--fs-3xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ink);
    line-height: 1.05;
    margin-block-end: var(--s-md);
}
.zq-about-lede {
    font-size: var(--fs-lg);
    line-height: 1.55;
    color: var(--ink-2);
    max-inline-size: 56ch;
}
.zq-about-lede span {
    color: var(--ink);
    font-weight: 500;
    background: linear-gradient(transparent 75%, color-mix(in oklch, var(--accent), transparent 70%) 75%);
}

.zq-about-stamp {
    grid-row: 1;
    justify-self: end;
    align-self: end;
}
.zq-about-stamp .shape { display: none; }
.zq-about-stamp .inner {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-sm);
    padding: var(--s-md);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-elev);
    max-inline-size: 18rem;
    white-space: nowrap;
}
.zq-about-stamp .inner span {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}
.zq-about-stamp .inner a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 3rem;
    block-size: 3rem;
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--r-pill);
    transition: background var(--dur-fast) var(--ease-out-quart),
                transform var(--dur-fast) var(--ease-out-quart);
}
.zq-about-stamp .inner a:hover { background: var(--accent); color: var(--accent-ink); }
.zq-about-stamp .inner a:active { transform: scale(0.93); }
.zq-about-stamp .inner a::after {
    content: '↗';
    font-size: 1.125rem;
    line-height: 1;
}
.zq-about-stamp .inner a i { display: none; }

@media (min-width: 880px) {
    .about-section .content-box {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }
    .zq-about-stamp { grid-row: auto; align-self: end; }
}

.about-section .lower-box {
    grid-column: 1 / -1;
    margin-block-start: var(--s-xl);
    padding-block-start: var(--s-lg);
    border-block-start: 1px solid var(--line);
}
.social-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-md);
}
.social-inner h6 {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
}
.social-links {
    display: flex;
    gap: var(--s-2xs);
    flex-wrap: wrap;
}
.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: background var(--dur-fast) var(--ease-out-quart),
                border-color var(--dur-fast) var(--ease-out-quart),
                color var(--dur-fast) var(--ease-out-quart);
}
.social-links a:hover {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}

/* === 12. Stats ========================================================== */

.funfact-section {
    padding-block: var(--section-py-tight);
    border-block-start: 1px solid var(--line);
    border-block-end: 1px solid var(--line);
    background: var(--bg-sunk);
}
.funfact-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-lg);
}
@media (min-width: 640px) {
    .funfact-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .funfact-inner { grid-template-columns: repeat(4, 1fr); }
}
.funfact-block-one .inner-box {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-block: var(--s-md);
    border-inline-start: 0;
    position: relative;
}
.funfact-block-one .count-outer {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
    font-family: var(--font-sans);
    font-size: var(--fs-4xl);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.funfact-block-one .count-outer .odometer { display: inline; }
.funfact-block-one .count-outer > span:last-child { color: var(--accent); }
.funfact-block-one p {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
}
.centred { text-align: start; }   /* override Potu's centring on this section */

/* === 13. Services ======================================================= */

.pricing-section {
    padding-block: var(--section-py);
}
.pricing-section .title-box {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--s-md);
    margin-block-end: var(--s-2xl);
}
.pricing-section .title-box h2 {
    font-size: var(--fs-3xl);
    line-height: 1.08;
    letter-spacing: -0.028em;
    max-inline-size: 18ch;
}
.pricing-section .title-box h2 br { display: none; }

/* Services — spec-sheet feel, NOT a card grid. Reset the counter on
   the row, number each block 01-06 via CSS counter as a mono kicker.
   Drop the original Font Awesome icon-box. */
.pricing-section .row {
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
    counter-reset: zq-service;
    border-block-start: 1px solid var(--line);
}
@media (min-width: 640px) {
    .pricing-section .row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .pricing-section .row { grid-template-columns: repeat(3, 1fr); }
}
.pricing-section .pricing-block { display: contents; }

.pricing-block-one .inner-box {
    counter-increment: zq-service;
    display: flex;
    flex-direction: column;
    gap: var(--s-sm);
    padding: var(--s-lg) var(--s-md);
    background: transparent;
    border-block-end: 1px solid var(--line);
    block-size: 100%;
    position: relative;
    transition: background var(--dur-base) var(--ease-out-quart);
}
/* Inter-column border-trim is layout-dependent:
   - Mobile (1-col): no right border, no trim needed (base above).
   - Tablet 2-col (>=640): add right border, trim every 2nd.
   - Desktop 3-col (>=1024): restore the 2nd's right border, trim every 3rd. */
@media (min-width: 640px) {
    .pricing-block-one .inner-box { border-inline-end: 1px solid var(--line); }
    .pricing-block:nth-child(2n) .inner-box { border-inline-end: 0; }
}
@media (min-width: 1024px) {
    .pricing-block:nth-child(2n) .inner-box { border-inline-end: 1px solid var(--line); }
    .pricing-block:nth-child(3n) .inner-box { border-inline-end: 0; }
}
.pricing-block-one .inner-box:hover {
    background: var(--bg-elev);
}
.pricing-block-one .inner-box::before {
    content: counter(zq-service, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--accent);
    letter-spacing: 0.08em;
}
.pricing-block-one .icon-box { display: none; }   /* drop FA icon, use number */
.pricing-block-one .inner-box h3 {
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--ink);
    margin: 0;
}
.pricing-block-one .inner-box p {
    color: var(--ink-2);
    font-size: var(--fs-md);
    line-height: 1.55;
}
.list-style-one {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-block-start: var(--s-2xs);
    padding-block-start: var(--s-sm);
    border-block-start: 1px solid var(--line);
}
.list-style-one li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--fs-sm);
    color: var(--ink-2);
}
.list-style-one li::before {
    content: '';
    inline-size: 4px;
    block-size: 4px;
    background: var(--accent);
    border-radius: var(--r-pill);
    flex-shrink: 0;
    transform: translateY(-2px);
}

/* === 14. Skills ========================================================= */

.zq-skills-section {
    padding-block: var(--section-py);
    background: var(--bg-elev);
    border-block-start: 1px solid var(--line);
    border-block-end: 1px solid var(--line);
}
.zq-skills-head {
    display: grid;
    gap: var(--s-sm);
    margin-block-end: var(--s-2xl);
    max-inline-size: 56ch;
}
.zq-skills-head h2 {
    font-size: var(--fs-3xl);
    line-height: 1.08;
    letter-spacing: -0.028em;
}
.zq-skills-head p {
    color: var(--ink-2);
    font-size: var(--fs-md);
    line-height: 1.55;
}

.zq-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--s-md);
}
.zq-skills-card {
    padding: var(--s-md);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color var(--dur-base) var(--ease-out-quart),
                transform var(--dur-base) var(--ease-out-quart);
}
.zq-skills-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.zq-skills-card-head {
    display: flex;
    align-items: baseline;
    gap: var(--s-2xs);
    margin-block-end: var(--s-sm);
    padding-block-end: var(--s-sm);
    border-block-end: 1px dashed var(--line);
}
.zq-skills-card-num {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--accent);
    letter-spacing: 0.04em;
}
.zq-skills-card-head h3 {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}
.zq-skills-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.zq-skills-chips li {
    padding: 0.3rem 0.65rem;
    background: var(--bg-sunk);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-2);
    line-height: 1.3;
}

/* === 15. Work =========================================================== */

.portfolio-style-two { padding-block: var(--section-py); }
.portfolio-style-two .title-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--s-md);
    margin-block-end: var(--s-2xl);
}
.portfolio-style-two .title-inner h2 {
    font-size: var(--fs-3xl);
    line-height: 1.08;
    letter-spacing: -0.028em;
    max-inline-size: 18ch;
}
.portfolio-style-two .title-inner h2 br { display: none; }

.portfolio-block-two {
    margin-block-end: var(--s-2xl);
}
.portfolio-block-two .inner-box .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-lg);
    align-items: center;
}
@media (min-width: 880px) {
    .portfolio-block-two .inner-box .row {
        grid-template-columns: 5fr 7fr;
        gap: clamp(var(--s-lg), 4vw, var(--s-2xl));
    }
    /* Reverse layout where image-column is first in DOM */
    .portfolio-block-two .inner-box .row > .image-column:first-child { grid-column: 1; }
    .portfolio-block-two .inner-box .row > .content-column:last-child { grid-column: 2; }
}

.portfolio-block-two .content-box {
    display: flex;
    flex-direction: column;
    gap: var(--s-sm);
}
.portfolio-block-two .content-box > span:first-of-type {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}
.portfolio-block-two .content-box h3 {
    font-size: var(--fs-2xl);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.02em;
}
.portfolio-block-two .content-box h3 a {
    color: var(--ink);
    background-image: linear-gradient(currentColor 0 0);
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size var(--dur-base) var(--ease-out-expo),
                color var(--dur-fast) var(--ease-out-quart);
}
.portfolio-block-two .content-box h3 a:hover {
    color: var(--accent-2);
    background-size: 100% 1px;
}
.portfolio-block-two .content-box p {
    color: var(--ink-2);
    font-size: var(--fs-md);
    line-height: 1.6;
    max-inline-size: 50ch;
}
.zq-work-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-block-start: var(--s-2xs);
}
.zq-work-stack li {
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--ink-2);
    letter-spacing: 0.01em;
}
.portfolio-block-two .link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    margin-block-start: var(--s-sm);
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--r-pill);
    transition: background var(--dur-fast) var(--ease-out-quart);
}
.portfolio-block-two .link a:hover { background: var(--accent); color: var(--accent-ink); }
.portfolio-block-two .link a::after { content: '↗'; font-size: 1.125rem; }
.portfolio-block-two .link a i { display: none; }

/* Work cards — image columns. Old version showed background images;
   new version shows a clean "platform × platform" composition. */
.portfolio-block-two .image-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s-lg);
    aspect-ratio: 7 / 5;
    padding: clamp(var(--s-md), 4vw, var(--s-xl));
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease-out-quart),
                background var(--dur-base) var(--ease-out-quart);
}
.portfolio-block-two .image-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, color-mix(in oklch, var(--line), transparent 70%) 0 1px, transparent 1px 32px),
        repeating-linear-gradient(90deg, color-mix(in oklch, var(--line), transparent 70%) 0 1px, transparent 1px 32px);
    opacity: 0.7;
    z-index: 0;
    pointer-events: none;
}
.portfolio-block-two .image-box:hover {
    border-color: var(--accent);
    background: var(--bg);
}
/* Subtle dotted-grid drift on hover — atmospheric "system coming
   online" feel under each work card. Animation runs only while
   hovered; the global prefers-reduced-motion guard collapses it
   to a no-op when needed. */
.portfolio-block-two .image-box:hover::before {
    animation: zq-grid-drift 8s linear infinite;
}
@keyframes zq-grid-drift {
    to { background-position: 32px 32px; }
}
.zq-card-marks {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-sm);
}
.zq-card-mark {
    font-family: var(--font-sans);
    font-size: var(--fs-xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.05;
}
.zq-card-mark-secondary { color: var(--accent-2); font-style: italic; font-weight: 500; }
.zq-card-cross {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    color: var(--ink-3);
    font-weight: 400;
}
.zq-card-meta {
    position: relative;
    z-index: 1;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3);
    align-self: end;
}

.zq-work-bookend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-md);
    margin-block-start: var(--s-xl);
    padding: var(--s-lg);
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--ink);
    transition: border-color var(--dur-base) var(--ease-out-quart),
                background var(--dur-base) var(--ease-out-quart);
}
.zq-work-bookend:hover {
    border-color: var(--accent);
    color: var(--ink);
}
.zq-work-bookend h3 {
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.015em;
}
.zq-work-bookend-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent-2);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
}

/* === 16. Resume ========================================================= */

.zq-resume-section {
    padding-block: var(--section-py);
    border-block-start: 1px solid var(--line);
    border-block-end: 1px solid var(--line);
}
.zq-resume-head {
    margin-block-end: var(--s-2xl);
    max-inline-size: 56ch;
}
.zq-resume-head h2 {
    font-size: var(--fs-3xl);
    line-height: 1.08;
    letter-spacing: -0.028em;
}
.zq-resume-head p {
    margin-block-start: var(--s-sm);
    font-size: var(--fs-md);
    color: var(--ink-2);
    line-height: 1.55;
}
.zq-resume-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-xl);
}
@media (min-width: 880px) {
    .zq-resume-grid { grid-template-columns: 1fr 1.3fr; gap: var(--s-2xl); }
}
.zq-resume-col h3 {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-block-end: var(--s-md);
    padding-block-end: var(--s-2xs);
    border-block-end: 1px solid var(--line);
}
.zq-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--s-lg);
}
.zq-timeline-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
}
.zq-timeline-item .zq-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    color: var(--ink-3);
}
.zq-timeline-item h4 {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.zq-timeline-item .zq-org {
    font-size: var(--fs-sm);
    color: var(--ink-2);
    font-weight: 500;
}
.zq-timeline-item p {
    margin-block-start: 0.4rem;
    color: var(--ink-2);
    font-size: var(--fs-sm);
    line-height: 1.55;
}
.zq-timeline-item > ul {
    margin-block-start: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.zq-timeline-item > ul li {
    position: relative;
    padding-inline-start: 1rem;
    color: var(--ink-2);
    font-size: var(--fs-sm);
    line-height: 1.55;
}
.zq-timeline-item > ul li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.55em;
    inline-size: 6px;
    block-size: 1px;
    background: var(--accent);
}

/* === 17. Testimonials =================================================== */

.testimonial-style-two {
    padding-block: var(--section-py);
}
.testimonial-style-two .title-inner {
    margin-block-end: var(--s-2xl);
}
.testimonial-style-two .title-inner h2 {
    font-size: var(--fs-3xl);
    line-height: 1.08;
    letter-spacing: -0.028em;
    max-inline-size: 18ch;
}

/* Replace Owl carousel with a CSS grid; markup stays the same */
.testimonial-carousel {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: var(--s-md);
}
/* Owl runtime would otherwise inject inline transform — nuke it */
.testimonial-carousel .owl-stage-outer,
.testimonial-carousel .owl-stage,
.testimonial-carousel .owl-item { all: unset; display: contents; }

.testimonial-block-one .inner-box {
    display: flex;
    flex-direction: column;
    gap: var(--s-md);
    padding: var(--s-lg);
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    block-size: 100%;
}
.testimonial-block-one .icon-box {
    inline-size: 2rem;
    block-size: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.5rem;
}
.testimonial-block-one .icon-box i { display: none; }
.testimonial-block-one .icon-box::after { content: '“'; font-family: 'Georgia', serif; font-weight: 700; font-size: 2.5rem; line-height: 0.8; color: var(--accent); }
.testimonial-block-one p {
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--ink);
}
.testimonial-block-one .author-info h3 {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--ink);
}
.testimonial-block-one .author-info .designation {
    display: block;
    margin-block-start: 0.2rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-3);
    letter-spacing: 0.04em;
}

/* === 18. CTA ============================================================ */

.cta-section {
    padding-block: var(--section-py);
    background: var(--cta-bg);
    color: var(--cta-fg);
    text-align: start;
}
.cta-section .content-box {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-lg);
    align-items: center;
}
@media (min-width: 880px) {
    .cta-section .content-box { grid-template-columns: 1fr auto; }
}
.cta-section h2 {
    color: var(--cta-fg);
    font-size: var(--fs-3xl);
    line-height: 1.1;
    letter-spacing: -0.028em;
    max-inline-size: 18ch;
}
.cta-section h2 br { display: none; }
.cta-section .content-box > a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-sm);
    padding: var(--s-md) var(--s-lg);
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--r-sm);
    font-weight: 500;
    font-size: var(--fs-md);
    transition: background var(--dur-fast) var(--ease-out-quart);
}
.cta-section .content-box > a:hover { background: var(--accent-2); color: var(--accent-ink); }
.cta-section .content-box > a span { display: inline; }
.cta-section .content-box > a br { display: none; }
.cta-section .content-box > a i { display: none; }
.cta-section .content-box > a::after { content: '↗'; font-size: 1.125rem; }
.cta-section .anim-icons { display: none; }

/* === 19. Contact ======================================================== */

.contact-style-five { padding-block: var(--section-py); }
.contact-style-five .title-text {
    margin-block-end: var(--s-2xl);
    max-inline-size: 56ch;
}
.contact-style-five .title-text h2 {
    font-size: var(--fs-3xl);
    line-height: 1.08;
    letter-spacing: -0.028em;
}
.contact-style-five .title-text h2 br { display: none; }
.contact-style-five .title-text p {
    margin-block-start: var(--s-sm);
    font-size: var(--fs-md);
    color: var(--ink-2);
    line-height: 1.55;
}

.zq-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-xl);
    align-items: start;
}
.zq-contact-grid > * { min-inline-size: 0; }
@media (min-width: 880px) {
    .zq-contact-grid { grid-template-columns: 1fr 1.6fr; gap: var(--s-2xl); }
}

.zq-contact-info h3 {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-block-end: var(--s-md);
    padding-block-end: var(--s-2xs);
    border-block-end: 1px solid var(--line);
}
.zq-contact-info-list {
    display: grid;
    gap: var(--s-sm);
    margin-block-end: var(--s-lg);
}
.zq-contact-info-list li {
    display: grid;
    grid-template-columns: 5rem 1fr;
    align-items: baseline;
    gap: var(--s-sm);
    font-size: var(--fs-sm);
    color: var(--ink);
}
.zq-info-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.zq-contact-info-list a { color: var(--ink); overflow-wrap: anywhere; }
.zq-contact-info-list a:hover { color: var(--accent-2); }
.zq-contact-socials {
    display: flex;
    gap: var(--s-2xs);
    padding-block-start: var(--s-md);
    border-block-start: 1px solid var(--line);
}
.zq-contact-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    transition: background var(--dur-fast) var(--ease-out-quart),
                border-color var(--dur-fast) var(--ease-out-quart),
                color var(--dur-fast) var(--ease-out-quart);
}
.zq-contact-socials a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.form-inner {
    padding: var(--s-md);
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: clip;
}
@media (min-width: 640px) {
    .form-inner { padding: var(--s-lg); }
}
.default-form .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-sm);
}
/* Force form-group grid items to honor the grid track even when a
   fixed-width child (Turnstile's 300px iframe) would otherwise widen them.
   Without this, the form-group widens to 300px, the inputs follow, and the
   right edge gets clipped by form-inner. */
.default-form .row > * { min-inline-size: 0; }
@media (min-width: 640px) {
    .default-form .row { grid-template-columns: 1fr 1fr; gap: var(--s-md); }
    .default-form .row > .col-lg-12,
    .default-form .row > .message-btn,
    .default-form .row > [class*="col-lg-12"] { grid-column: 1 / -1; }
}
.default-form .form-group { display: flex; flex-direction: column; gap: var(--s-2xs); }
.default-form label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.default-form input[type="text"],
.default-form input[type="email"],
.default-form textarea {
    inline-size: 100%;
    padding: var(--s-xs) var(--s-sm);
    background: var(--bg);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: 1.5;
    transition: border-color var(--dur-fast) var(--ease-out-quart),
                background var(--dur-fast) var(--ease-out-quart);
}
.default-form textarea { min-block-size: 9rem; resize: vertical; }
.default-form input:hover,
.default-form textarea:hover { border-color: var(--line-2); }
.default-form input:focus-visible,
.default-form textarea:focus-visible {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent), transparent 75%);
}
.default-form ::placeholder { color: var(--ink-3); opacity: 1; }

.message-btn { display: flex; align-items: center; gap: var(--s-md); flex-wrap: wrap; }
.message-btn .theme-btn-three { padding: var(--s-xs) var(--s-lg); }
.zq-form-status {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-2);
    letter-spacing: 0.02em;
}
.zq-form-status.is-success { color: var(--success); }
.zq-form-status.is-error   { color: var(--error); }
.zq-form-status.is-sending { color: var(--ink-2); }

/* Turnstile iframe — keep it from looking foreign */
/* Cloudflare Turnstile renders at a fixed 300x65 (flexible mode's minimum).
   On narrow phones the form-card content area is below 300px, so the widget
   visually overflows form-inner. Scale it down on mobile to fit comfortably,
   and pull the next sibling up to absorb the freed vertical space so the
   form rhythm stays right. Above 480px the natural 300px widget fits, so we
   drop the transform. */
.cf-turnstile {
    margin-block-start: var(--s-2xs);
    max-inline-size: 100%;
    min-inline-size: 0;
    transform: scale(0.78);
    transform-origin: top left;
    margin-block-end: calc(65px * -0.22);
}
@media (min-width: 480px) {
    .cf-turnstile {
        transform: none;
        margin-block-end: 0;
    }
}

/* === 20. Footer ========================================================= */

.zq-footer {
    padding-block: var(--section-py) 0;
    background: var(--bg-sunk);
    border-block-start: 1px solid var(--line);
}
.zq-footer .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-xl);
}
@media (min-width: 880px) {
    .zq-footer .row { grid-template-columns: 1fr 1fr; gap: var(--s-2xl); }
}
.zq-footer .logo-widget .zq-footer-tagline {
    margin-block-start: var(--s-md);
    font-size: var(--fs-xl);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: -0.015em;
    max-inline-size: 24ch;
}
.zq-footer .logo-widget p {
    margin-block-start: var(--s-md);
    font-size: var(--fs-sm);
    color: var(--ink-2);
    line-height: 1.5;
}
.zq-footer .logo-widget a { color: var(--ink); }
.zq-footer .logo-widget a:hover { color: var(--accent-2); }
.zq-footer-right h3 {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-block-end: var(--s-sm);
}
.zq-footer-right > p {
    color: var(--ink-2);
    font-size: var(--fs-md);
    line-height: 1.55;
    margin-block-end: var(--s-md);
    max-inline-size: 42ch;
}
.zq-footer-cta { margin-block-end: var(--s-md); }
.zq-social { display: flex; gap: var(--s-2xs); flex-wrap: wrap; }
.zq-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
}
.zq-social a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.footer-bottom-two {
    margin-block-start: var(--s-2xl);
    padding-block: var(--s-md);
    border-block-start: 1px solid var(--line);
}
.bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-sm);
}
.copyright p,
.footer-menu {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-3);
    letter-spacing: 0.02em;
}
.footer-menu { display: flex; gap: var(--s-md); flex-wrap: wrap; }
.footer-menu a { color: var(--ink-3); }
.footer-menu a:hover { color: var(--ink); }

/* === 21. Mobile menu ==================================================== */

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-mobile-menu);
    display: none;
    pointer-events: none;
}
.mobile-menu.is-open { display: block; pointer-events: auto; }
.mobile-menu .menu-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in oklch, var(--ink), transparent 30%);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out-quart);
}
.mobile-menu.is-open .menu-backdrop { opacity: 1; }
.mobile-menu .menu-box {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: min(360px, 88vw);
    padding: var(--s-lg);
    background: var(--bg);
    border-inline-start: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform var(--dur-medium) var(--ease-out-expo);
    display: flex;
    flex-direction: column;
    gap: var(--s-lg);
    overflow-y: auto;
}
.mobile-menu.is-open .menu-box { transform: translateX(0); }
.mobile-menu .close-btn {
    position: absolute;
    inset-block-start: var(--s-md);
    inset-inline-end: var(--s-md);
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink);
    cursor: pointer;
    font-size: 1rem;
}
.mobile-menu .nav-logo { margin-block-end: var(--s-md); }
.mobile-menu .menu-outer ul {
    display: flex;
    flex-direction: column;
    gap: var(--s-sm);
}
.mobile-menu .menu-outer a {
    display: block;
    padding-block: var(--s-2xs);
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--ink);
}
.mobile-menu .contact-info {
    padding-block-start: var(--s-md);
    border-block-start: 1px solid var(--line);
}
.mobile-menu .contact-info h4 {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-block-end: var(--s-sm);
}
.mobile-menu .contact-info ul { display: flex; flex-direction: column; gap: 0.4rem; }
.mobile-menu .contact-info li { font-size: var(--fs-sm); color: var(--ink); }

/* === 22. Scroll-to-top ================================================== */

.scroll-to-top {
    position: fixed;
    inset-block-end: var(--s-md);
    inset-inline-end: var(--s-md);
    z-index: var(--z-scroll-top);
    inline-size: 2.75rem;
    block-size: 2.75rem;
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity var(--dur-base) var(--ease-out-quart),
                transform var(--dur-base) var(--ease-out-quart),
                background var(--dur-fast) var(--ease-out-quart);
}
.scroll-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scroll-to-top.is-visible:active { transform: translateY(0) scale(0.93); }
.scroll-to-top:hover { background: var(--accent); color: var(--accent-ink); }
/* On mobile (<640px) the demo-switch (theme toggle) lives at the same
   bottom-right corner as the scroll-to-top. Stack the scroll-to-top above
   the switch so they don't collide. At 640+ the demo-switch moves to a
   vertically-centred right-edge floater and no offset is needed. */
@media (max-width: 639px) {
    .scroll-to-top {
        inset-block-end: calc(var(--s-md) + 2.5rem + var(--s-2xs));
    }
}
.scroll-to-top svg { inline-size: 1.125rem; block-size: 1.125rem; }
.scroll-to-top .scroll-top-inner { stroke: var(--accent); stroke-width: 2; fill: none; }
.scroll-to-top::before {
    content: '↑';
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    line-height: 1;
}

/* === 23. Scroll reveal (JS-driven via .zq-reveal class) =================
   Set the initial state; .is-in is added by IntersectionObserver. */

.zq-reveal {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
    transition: opacity var(--dur-slow) var(--ease-out-expo),
                transform var(--dur-slow) var(--ease-out-expo),
                filter var(--dur-slow) var(--ease-out-expo);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform, filter;
}
.zq-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* === 24. Hide legacy Potu animation classes that no longer have a driver */
.title-animation { opacity: 1; transform: none; }
.sec-title-animation { opacity: 1; transform: none; }
[data-aos] {
    /* Prevent AOS-initial-state from showing through if AOS isn't loaded.
       We use our own .zq-reveal instead. */
    opacity: 1 !important;
    transform: none !important;
}

/* === 25. Reduced motion ================================================= */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .zq-reveal { opacity: 1; transform: none; filter: none; }
    .zq-hero-availability-dot { animation: none; }
    .zq-wave { animation: none; }
}

/* The site's own ?noanim toggle (existing inline script) sets html.zq-no-anim.
   Apply the same disable rules. */
html.zq-no-anim *,
html.zq-no-anim *::before,
html.zq-no-anim *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}
html.zq-no-anim .zq-reveal { opacity: 1; transform: none; filter: none; }
html.zq-no-anim .zq-hero-availability-dot { animation: none; }
html.zq-no-anim .zq-wave { animation: none; }

/* === 26. Work / Case study pages ======================================= */

/* Section eyebrow (mono kicker label, used on both work-index and case
   study pages). Same vocabulary as the resume-col h3 / contact-info h3. */
.zq-section-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-block-end: var(--s-sm);
}

/* --- work/index.html --- */

.zq-work-index { padding-block: var(--section-py); }

.zq-work-head {
    max-inline-size: 64ch;
    margin-block-end: var(--s-2xl);
}
.zq-work-head h1 {
    font-size: var(--fs-4xl);
    line-height: 1.06;
    letter-spacing: -0.03em;
    margin-block-start: var(--s-2xs);
}
.zq-work-head p {
    margin-block-start: var(--s-md);
    font-size: var(--fs-md);
    color: var(--ink-2);
    line-height: 1.55;
}

.zq-work-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-block-end: var(--s-xl);
    padding-block-end: var(--s-md);
    border-block-end: 1px solid var(--line);
}
.zq-work-filters li {
    padding: 0.4rem 0.85rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-2);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out-quart),
                color var(--dur-fast) var(--ease-out-quart),
                border-color var(--dur-fast) var(--ease-out-quart);
    letter-spacing: 0.02em;
}
.zq-work-filters li:hover { color: var(--ink); border-color: var(--line-2); }
.zq-work-filters li.active {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}

.zq-work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: var(--s-lg);
}

.zq-work-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    color: var(--ink);
    transition: border-color var(--dur-base) var(--ease-out-quart),
                transform var(--dur-base) var(--ease-out-quart),
                background var(--dur-base) var(--ease-out-quart);
}
.zq-work-card:hover {
    border-color: var(--accent);
    color: var(--ink);
    transform: translateY(-2px);
}
.zq-work-card-thumb {
    position: relative;
    padding: clamp(var(--s-md), 2.5vw, var(--s-lg));
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s-md);
    background:
        repeating-linear-gradient(0deg, color-mix(in oklch, var(--line), transparent 70%) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(90deg, color-mix(in oklch, var(--line), transparent 70%) 0 1px, transparent 1px 28px),
        var(--bg);
    border-block-end: 1px solid var(--line);
}
.zq-work-card-thumb .zq-card-marks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2xs);
}
.zq-work-card-thumb .zq-card-mark {
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.1;
}
.zq-work-card-thumb .zq-card-mark-secondary { color: var(--accent-2); font-style: italic; font-weight: 500; }
.zq-work-card-thumb .zq-card-cross {
    font-family: var(--font-mono);
    color: var(--ink-3);
    font-size: var(--fs-base);
}
.zq-work-card-thumb .zq-card-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.zq-work-card-body {
    padding: var(--s-md);
    display: flex;
    flex-direction: column;
    gap: var(--s-2xs);
    background: var(--bg);
}
.zq-work-card-body .zq-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    color: var(--ink-3);
    margin-block-end: 0.15rem;
}
.zq-work-card-body h3 {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0;
}
.zq-work-card-body p {
    font-size: var(--fs-sm);
    color: var(--ink-2);
    line-height: 1.55;
    margin-block-start: 0.2rem;
}
.zq-work-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-block-start: var(--s-2xs);
}
.zq-work-card-tags li {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--ink-2);
}

/* --- case study pages --- */

.zq-case-hero {
    padding-block: clamp(3rem, 3rem + 4vw, 6rem) clamp(2rem, 2rem + 3vw, 4rem);
}
.zq-case-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(var(--s-lg), 4vw, var(--s-2xl));
    align-items: start;
}
@media (min-width: 880px) {
    .zq-case-hero-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    }
}
.zq-case-hero-text .zq-meta {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-block-end: var(--s-sm);
}
.zq-case-hero-text h1 {
    font-size: clamp(2rem, 1.4rem + 2.5vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    max-inline-size: 22ch;
}
.zq-case-hero-summary {
    margin-block-start: var(--s-md);
    font-size: var(--fs-lg);
    line-height: 1.55;
    color: var(--ink-2);
    max-inline-size: 56ch;
}
.zq-case-client-frame {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin-block-start: var(--s-lg);
    padding: var(--s-sm) var(--s-md);
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.zq-case-client-frame .zq-info-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.zq-case-client-frame > span:last-child {
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--ink);
}

.zq-case-hero-card {
    align-self: start;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--s-lg) var(--s-md);
    display: flex;
    flex-direction: column;
    gap: var(--s-md);
    position: relative;
    overflow: hidden;
}
.zq-case-hero-card::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
    opacity: 0.6;
}
.zq-case-hero-card .zq-card-marks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-sm);
}
.zq-case-hero-card .zq-card-mark {
    font-size: var(--fs-xl);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.1;
}
.zq-case-hero-card .zq-card-mark-secondary { color: var(--accent-2); font-style: italic; font-weight: 500; }
.zq-case-hero-card .zq-card-cross { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--fs-md); }
.zq-case-hero-card .zq-card-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.zq-case-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-md);
    margin-block-start: var(--s-2xl);
    padding-block: var(--s-md);
    border-block: 1px solid var(--line);
}
.zq-case-meta div { display: flex; flex-direction: column; gap: 0.25rem; }
.zq-case-meta dt {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
}
.zq-case-meta dd {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--ink);
}

.zq-case-section {
    padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem);
}
.zq-case-section.zq-case-soft {
    background: var(--bg-elev);
    border-block: 1px solid var(--line);
}
.outer-container.zq-case-narrow {
    max-inline-size: calc(900px + 2 * var(--container-px));
}
.zq-case-section h2 {
    font-size: var(--fs-2xl);
    line-height: 1.15;
    letter-spacing: -0.022em;
    margin-block-end: var(--s-md);
    max-inline-size: 28ch;
}
.zq-case-section > .outer-container > p {
    font-size: var(--fs-md);
    line-height: 1.7;
    color: var(--ink);
    max-inline-size: 68ch;
}
.zq-case-section > .outer-container > p + p { margin-block-start: var(--s-sm); }

.zq-case-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-sm);
    max-inline-size: 72ch;
}
.zq-case-list li {
    position: relative;
    padding-inline-start: 1.6rem;
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--ink);
}
.zq-case-list li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.7em;
    inline-size: 0.85rem;
    block-size: 1px;
    background: var(--accent);
}

.zq-case-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-inline-size: 72ch;
}
.zq-case-stack li {
    padding: 0.35rem 0.7rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.zq-case-cta {
    padding-block: var(--section-py);
    background: var(--cta-bg);
    color: var(--cta-fg);
}
.zq-case-cta-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-lg);
    align-items: center;
}
@media (min-width: 640px) {
    .zq-case-cta-inner { grid-template-columns: 1fr auto; }
}
.zq-case-cta-inner h2 {
    font-size: var(--fs-2xl);
    line-height: 1.15;
    letter-spacing: -0.022em;
    color: var(--cta-fg);
    max-inline-size: 22ch;
}
.zq-case-cta-inner p {
    margin-block-start: var(--s-sm);
    font-size: var(--fs-md);
    color: color-mix(in oklch, var(--cta-fg), transparent 25%);
    max-inline-size: 56ch;
    grid-column: 1;
}
.zq-case-cta-inner .theme-btn {
    background: var(--accent);
    color: var(--accent-ink);
    align-self: start;
}
.zq-case-cta-inner .theme-btn::after { display: none; }
.zq-case-cta-inner .theme-btn:hover { background: var(--accent-2); color: var(--accent-ink); }

.zq-case-nav {
    padding-block: var(--section-py-tight);
    border-block-start: 1px solid var(--line);
}
.zq-case-nav-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-md);
    align-items: center;
}
@media (min-width: 640px) {
    .zq-case-nav-inner { grid-template-columns: 1fr auto 1fr; }
    .zq-case-nav-prev { justify-self: start; }
    .zq-case-nav-all  { justify-self: center; }
    .zq-case-nav-next { justify-self: end; text-align: end; }
}
.zq-case-nav-link {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: var(--ink);
    max-inline-size: 24rem;
}
.zq-case-nav-link .zq-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.05em;
    color: var(--ink-3);
}
.zq-case-nav-link strong {
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}
.zq-case-nav-link:hover strong { color: var(--accent-2); }
.zq-case-nav-all {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--accent-2);
    letter-spacing: 0.02em;
    text-decoration: none;
}
.zq-case-nav-all:hover { color: var(--accent); }

/* === 27. Print ========================================================== */

@media print {
    .main-header, .scroll-to-top, .mobile-menu,
    .zq-theme-switch, .zq-hero-cta-row, .menu-right-content,
    .cta-section, .zq-case-cta, .zq-case-nav, .contact-style-five, .zq-footer,
    .demo-switch, .zq-work-filters { display: none; }
    body { background: white; color: black; }
    section { padding-block: 1rem; break-inside: avoid; }
}