/* =============================================================================
   Balaji Lites — Brand Portfolio
   Design language lifted from BL_Portfolio_draft_06.pdf:
   near-black ground, warm gold hairlines, condensed caps, generous negative space.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
    --bg:          #0d1112;
    --bg-lift:     #121617;
    --panel:       #1a1a1a;
    --panel-2:     #141817;

    --gold:        #ffebac;
    --gold-soft:   #cfbf8c;
    --gold-deep:   #b99a4a;

    --ink:         #e9e9e4;
    --ink-dim:     #a4a9a7;
    --ink-faint:   #6d7472;

    --line:        rgba(255, 235, 172, .13);
    --line-soft:   rgba(255, 235, 172, .07);
    --line-strong: rgba(255, 235, 172, .28);

    --display: "Oswald", "Bahnschrift", "DIN Alternate", "Haettenschweiler", sans-serif;
    --body:    "Inter", "Acumin Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --gutter:  clamp(20px, 5vw, 72px);
    --maxw:    1360px;
    --frame:   clamp(10px, 1.6vw, 26px);

    --ease:      cubic-bezier(.22, 1, .36, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);

    --nav-h: 74px;
}

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

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--body);
    font-size: clamp(13.5px, .35vw + 12px, 15px);
    font-weight: 300;
    line-height: 1.62;
    letter-spacing: .004em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
}
button { cursor: pointer; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1; }
p  { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--gold); color: #0d0d0d; }

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

/* --------------------------------------------------------------- typography */
.display {
    font-family: var(--display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .005em;
    line-height: .92;
}

.h-section {
    font-family: var(--display);
    font-weight: 600;
    text-transform: uppercase;
    line-height: .95;
    letter-spacing: .01em;
    font-size: clamp(1.55rem, 3.2vw, 2.7rem);
    color: var(--gold);
}

.h-sub {
    font-family: var(--display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: clamp(.92rem, 1.25vw, 1.08rem);
    color: var(--ink);
}

.kicker {
    font-family: var(--display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .34em;
    font-size: .7rem;
    color: var(--gold-soft);
    display: flex;
    align-items: center;
    gap: .8em;
}
.kicker::before {
    content: "";
    width: clamp(24px, 4vw, 56px);
    height: 1px;
    background: var(--gold-deep);
    flex: none;
}

.lead {
    font-size: clamp(.92rem, 1.05vw, 1.04rem);
    line-height: 1.66;
    color: var(--ink);
    font-weight: 300;
}

.muted { color: var(--ink-dim); }
.tiny  { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }

/* ------------------------------------------------------------------ layout */
.shell {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    position: relative;
    padding-block: clamp(54px, 7vh, 104px);
}
.section--tight { padding-block: clamp(44px, 5.5vh, 80px); }

.section__head {
    display: grid;
    gap: clamp(18px, 3vw, 34px);
    margin-bottom: clamp(26px, 3.6vw, 48px);
}
@media (min-width: 900px) {
    .section__head--split {
        grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
        align-items: end;
    }
}

/* Oversized ghost numeral, echoing the deck's chapter covers. */
.ghost-no {
    position: absolute;
    right: clamp(-10px, 1vw, 24px);
    top: clamp(10px, 4vw, 46px);
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(5rem, 12vw, 10rem);
    line-height: .74;
    color: rgba(255, 255, 255, .022);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Page frame + edge lettering, straight from the deck's page furniture. */
.frame {
    position: fixed;
    inset: var(--frame);
    border: 1px solid var(--line-soft);
    pointer-events: none;
    z-index: 40;
}
.frame__mark {
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translate(50%, -50%) rotate(90deg);
    transform-origin: center;
    font-family: var(--display);
    font-size: .6rem;
    letter-spacing: .42em;
    color: var(--ink-faint);
    background: var(--bg);
    padding: 0 14px;
    white-space: nowrap;
}
@media (max-width: 900px) { .frame { display: none; } }

/* Film grain + vignette give the flat black some depth. */
.grain {
    position: fixed;
    inset: -80px;
    will-change: transform;
    z-index: 38;
    pointer-events: none;
    opacity: .045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain-drift 6s steps(6) infinite;
}
@keyframes grain-drift {
    0%   { transform: translate(0, 0); }
    16%  { transform: translate(-14px, 8px); }
    33%  { transform: translate(9px, -16px); }
    50%  { transform: translate(-6px, 14px); }
    66%  { transform: translate(16px, 4px); }
    83%  { transform: translate(-11px, -9px); }
    100% { transform: translate(0, 0); }
}

.vignette {
    position: fixed;
    inset: 0;
    z-index: 37;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(0, 0, 0, .55) 100%);
}

/* ----------------------------------------------------- pointer light source */
.cursor-light {
    position: fixed;
    top: 0; left: 0;
    width: 720px; height: 720px;
    margin: -360px 0 0 -360px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: screen;
    background: radial-gradient(circle,
        rgba(255, 224, 150, .11) 0%,
        rgba(255, 214, 130, .055) 34%,
        rgba(255, 210, 120, 0) 66%);
    opacity: 0;
    transition: opacity .5s var(--ease-soft);
    will-change: transform;
}
.cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 7px; height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: var(--gold);
    pointer-events: none;
    z-index: 44;
    opacity: 0;
    transition: opacity .3s, width .25s var(--ease), height .25s var(--ease),
                background .25s, border-color .25s;
    will-change: transform;
}
.cursor-dot.is-hot {
    width: 42px; height: 42px;
    margin: -21px 0 0 -21px;
    background: rgba(255, 235, 172, .08);
    border: 1px solid var(--gold);
}
body.has-cursor .cursor-light,
body.has-cursor .cursor-dot { opacity: 1; }

/* --------------------------------------------------------------- preloader */
.loader {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--bg);
    display: grid;
    place-items: center;
    transition: opacity .6s var(--ease-soft), visibility .6s;
}
.loader.is-done { opacity: 0; visibility: hidden; }

.loader__inner { display: grid; justify-items: center; gap: 26px; text-align: center; }

.loader__filament {
    width: clamp(120px, 30vw, 240px);
    height: 1px;
    background: var(--line);
    position: relative;
    overflow: hidden;
}
.loader__filament span {
    position: absolute;
    inset: 0 100% 0 0;
    background: linear-gradient(90deg, transparent, var(--gold));
    box-shadow: 0 0 18px 2px rgba(255, 235, 172, .55);
    transition: right .25s linear;
}
.loader__word {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .5em;
    font-size: clamp(.85rem, 2.4vw, 1.3rem);
    color: var(--gold);
    text-indent: .5em;
    animation: pulse-glow 2.4s var(--ease-soft) infinite;
}
@keyframes pulse-glow {
    0%, 100% { text-shadow: 0 0 24px rgba(255, 235, 172, .18); }
    50%      { text-shadow: 0 0 40px rgba(255, 235, 172, .5); }
}
.loader__pct {
    font-family: var(--display);
    font-size: .78rem;
    letter-spacing: .3em;
    color: var(--ink-faint);
}

/* --------------------------------------------------------------------- nav */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    transition: background .45s var(--ease-soft), backdrop-filter .45s,
                border-color .45s, height .45s var(--ease-soft);
    border-bottom: 1px solid transparent;
}
.nav.is-stuck {
    height: 62px;
    background: rgba(13, 17, 18, .82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: var(--line-soft);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav { transition-property: background, backdrop-filter, border-color, height, transform; }

.nav__inner {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark {
    width: 30px; height: 30px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    display: grid;
    place-items: center;
    position: relative;
}
.brand__mark::after {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 14px 3px rgba(255, 235, 172, .55);
    animation: pulse-dot 3.2s var(--ease-soft) infinite;
}
@keyframes pulse-dot {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.45); opacity: .65; }
}
.brand__text { display: grid; gap: 3px; line-height: 1.05; min-width: 0; }
.brand__name {
    font-family: var(--display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: .84rem;
    color: var(--gold);
    white-space: nowrap;
}
.brand__sub {
    font-size: .58rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ink-faint);
    white-space: nowrap;
}

.nav__links { display: none; align-items: center; gap: clamp(14px, 1.8vw, 30px); }
@media (min-width: 1080px) { .nav__links { display: flex; } }

.nav__link {
    position: relative;
    font-family: var(--display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .72rem;
    color: var(--ink-dim);
    padding: 6px 0;
    transition: color .3s;
}
.nav__link::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .45s var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--gold); }
.nav__link:hover::after, .nav__link.is-active::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav__right { display: flex; align-items: center; gap: 14px; }
@media (max-width: 560px) { .nav__right > .btn { display: none; } }

.btn {
    --btn-fg: #0d0d0d;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    font-family: var(--display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .72rem;
    color: var(--btn-fg);
    background: var(--gold);
    border-radius: 999px;
    overflow: hidden;
    isolation: isolate;
    transition: color .35s var(--ease-soft), box-shadow .45s var(--ease-soft), transform .35s var(--ease);
}
.btn svg {
    width: 14px; height: 14px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    transition: transform .45s var(--ease);
}
.btn:hover svg { transform: translate(2px, -2px); }
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    transform: translateY(101%);
    transition: transform .5s var(--ease);
    z-index: -1;
}
.btn:hover {
    box-shadow: 0 10px 40px -8px rgba(255, 235, 172, .45);
    transform: translateY(-2px);
}
.btn:hover::before { transform: translateY(0); }

.btn--ghost {
    --btn-fg: var(--gold);
    background: transparent;
    border: 1px solid var(--line-strong);
}
.btn--ghost::before { background: var(--gold); }
.btn--ghost:hover { color: #0d0d0d; box-shadow: none; }

.btn--lg { padding: 17px 38px; font-size: .8rem; }

.nav__toggle {
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 50%;
    align-content: center;
}
@media (min-width: 1080px) { .nav__toggle { display: none; } }
.nav__toggle span {
    display: block;
    width: 17px; height: 1px;
    background: var(--gold);
    transition: transform .4s var(--ease), opacity .3s;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); }

/* scroll progress hairline */
.progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold));
    z-index: 55;
    box-shadow: 0 0 12px rgba(255, 235, 172, .5);
}

/* -------------------------------------------------------------- menu panel */
.menu {
    position: fixed;
    inset: 0;
    z-index: 49;
    background: var(--bg);
    display: grid;
    grid-template-rows: var(--nav-h) 1fr auto;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .8s var(--ease);
    visibility: hidden;
    overflow-y: auto;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }

.menu__list {
    align-self: center;
    padding: clamp(20px, 5vw, 60px) var(--gutter);
    display: grid;
    gap: clamp(4px, 1.2vw, 10px);
}
.menu__item { overflow: hidden; }
.menu__link {
    display: flex;
    align-items: baseline;
    gap: clamp(12px, 3vw, 28px);
    font-family: var(--display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(1.3rem, 5.2vw, 2.3rem);
    line-height: 1.18;
    color: var(--ink);
    transform: translateY(105%);
    transition: transform .8s var(--ease), color .3s;
}
.menu.is-open .menu__link { transform: translateY(0); transition-delay: calc(.06s * var(--i, 0) + .12s); }
.menu__link:hover { color: var(--gold); }
.menu__link em {
    font-style: normal;
    font-size: .34em;
    letter-spacing: .2em;
    color: var(--gold-deep);
}
.menu__foot {
    padding: clamp(18px, 4vw, 34px) var(--gutter) clamp(28px, 6vw, 48px);
    border-top: 1px solid var(--line-soft);
    display: grid;
    gap: 10px;
    font-size: .8rem;
    color: var(--ink-dim);
}
.menu__foot a:hover { color: var(--gold); }

/* -------------------------------------------------------- reveal machinery */
/* Scoped to .js so the page is fully legible when JavaScript never runs. */
.js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition: opacity .9s var(--ease-soft), transform 1s var(--ease);
    transition-delay: calc(var(--d, 0) * 1ms);
}
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal="left"]  { transform: translate3d(-30px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(30px, 0, 0); }
.js [data-reveal="zoom"]  { transform: scale(.94); }
.js [data-reveal].is-in   { opacity: 1; transform: none; }

/* Image reveals slide a gold curtain off the photo. */
.reveal-img {
    position: relative;
    overflow: hidden;
    background: var(--panel-2);
}
.js .reveal-img img { transform: scale(1.12); }
.js .reveal-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg);
    transform-origin: right;
    transition: transform 1.1s var(--ease);
    z-index: 2;
}
.reveal-img.is-in::after { transform: scaleX(0); }
.reveal-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease);
}
.reveal-img.is-in img { transform: scale(1); }

/* Per-character headline reveal (JS splits the text). */
.split { display: inline-block; }
.js .split .ch {
    display: inline-block;
    transform: translateY(105%);
    opacity: 0;
    transition: transform .95s var(--ease), opacity .7s var(--ease-soft);
    transition-delay: calc(var(--i) * 26ms + var(--base, 0ms));
}
.split .ch--space { width: .3em; }
.js .is-in .split .ch, .js .split.is-in .ch { transform: translateY(0); opacity: 1; }
.split-mask { overflow: hidden; display: block; padding-bottom: .06em; }

/* -------------------------------------------------------------------- hero */
.hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    align-items: end;
    padding-top: var(--nav-h);
    padding-bottom: clamp(28px, 6vh, 70px);
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: -12% -4%;
    z-index: 0;
}
.hero__bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .42;
    filter: contrast(1.1) saturate(1.05);
}
.hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(70% 60% at 22% 30%, rgba(255, 214, 130, .10), transparent 62%),
        linear-gradient(180deg, rgba(13, 17, 18, .82) 0%, rgba(13, 17, 18, .58) 42%, var(--bg) 96%);
}

/* Slow sweeping beam behind the title. */
.hero__beam {
    position: absolute;
    top: -30%;
    left: 8%;
    width: 46vw;
    height: 150%;
    z-index: 1;
    pointer-events: none;
    /* A soft conic-free gradient instead of filter: blur() — same look, no per-frame blur pass. */
    background: linear-gradient(180deg,
        rgba(255, 224, 150, .10) 0%,
        rgba(255, 224, 150, .05) 26%,
        rgba(255, 224, 150, .015) 50%,
        rgba(255, 224, 150, 0) 74%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
    transform-origin: top center;
    animation: beam-sway 15s ease-in-out infinite alternate;
    will-change: transform, opacity;
}
@keyframes beam-sway {
    from { transform: rotate(-9deg) scaleX(.85); opacity: .55; }
    to   { transform: rotate(7deg)  scaleX(1.12); opacity: 1; }
}

.hero__dust { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__dust i {
    position: absolute;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: rgba(255, 232, 175, .75);
    box-shadow: 0 0 7px 1px rgba(255, 224, 150, .5);
    animation: mote var(--dur, 18s) linear var(--delay, 0s) infinite;
    opacity: 0;
}
@keyframes mote {
    0%   { opacity: 0;   transform: translate3d(0, 20px, 0) scale(.6); }
    12%  { opacity: .9; }
    88%  { opacity: .55; }
    100% { opacity: 0;   transform: translate3d(var(--dx, 30px), -140px, 0) scale(1.2); }
}

.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: clamp(18px, 3vw, 30px);
}
.hero__chip {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .28em;
    font-size: .66rem;
    color: var(--gold-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 16px;
}

.hero__title {
    font-family: var(--display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(2.3rem, 8.2vw, 6.4rem);
    line-height: .86;
    letter-spacing: -.01em;
    color: var(--ink);
    margin: 0;
}
.hero__title .row { display: block; }
.hero__title .gold { color: var(--gold); }


.hero__meta {
    margin-top: clamp(26px, 4vw, 46px);
    padding-top: clamp(18px, 2.4vw, 28px);
    border-top: 1px solid var(--line-soft);
    display: grid;
    gap: 22px;
}
@media (min-width: 860px) {
    .hero__meta {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}
.hero__meta p { margin: 0; max-width: 46ch; color: var(--ink-dim); }

.scroll-cue {
    position: absolute;
    right: var(--gutter);
    bottom: clamp(24px, 5vh, 54px);
    z-index: 2;
    display: none;
    align-items: center;
    gap: 12px;
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .24em;
    font-size: .62rem;
    color: var(--ink-faint);
}
@media (min-width: 860px) {
    .scroll-cue { display: flex; }
    /* Reserve the bottom strip so the cue never collides with the CTA row. */
    .hero { padding-bottom: 104px; }
}
.scroll-cue__bar {
    width: 1px; height: 54px;
    background: var(--line);
    position: relative;
    overflow: hidden;
}
.scroll-cue__bar::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 40%;
    background: var(--gold);
    animation: cue-run 2.2s var(--ease-soft) infinite;
}
@keyframes cue-run {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(250%); }
}

/* ----------------------------------------------------------------- marquee */
.marquee {
    border-block: 1px solid var(--line-soft);
    padding-block: clamp(12px, 1.6vw, 18px);
    overflow: hidden;
    display: flex;
    gap: 0;
    user-select: none;
    background: rgba(255, 255, 255, .012);
}
.marquee__track {
    display: flex;
    align-items: center;
    gap: clamp(22px, 3vw, 46px);
    padding-right: clamp(22px, 3vw, 46px);
    flex: none;
    animation: marquee 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
.marquee__item {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: clamp(.78rem, 1.4vw, 1.05rem);
    color: var(--ink-dim);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: clamp(22px, 3vw, 46px);
}
.marquee__item::after {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--gold-deep);
    flex: none;
}

/* ------------------------------------------------------------------- about */
.about__grid {
    display: grid;
    gap: clamp(30px, 5vw, 76px);
    align-items: start;
}
@media (min-width: 940px) {
    .about__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
}
.about__media {
    position: relative;
    aspect-ratio: 3 / 4;
    border: 1px solid var(--line-soft);
}
.about__media .reveal-img { position: absolute; inset: 0; }
.about__badge {
    position: absolute;
    right: -1px;
    bottom: -1px;
    z-index: 3;
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 16px 22px;
    display: grid;
    gap: 2px;
}
.about__badge b {
    font-family: var(--display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--gold);
    line-height: 1;
}
.about__badge span { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }

.stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-top: clamp(28px, 4vw, 48px);
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
}
@media (min-width: 1180px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
    background: var(--bg);
    padding: clamp(18px, 2.4vw, 28px);
    display: grid;
    gap: 8px;
    transition: background .4s var(--ease-soft);
}
.stat:hover { background: var(--panel-2); }
.stat__n {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.5vw, 2.05rem);
    line-height: 1;
    color: var(--gold);
}
.stat__l { font-size: .78rem; color: var(--ink-dim); line-height: 1.45; }

/* ---------------------------------------------------------------- contents */
.toc { display: grid; gap: 0; position: relative; z-index: 1; }
.toc__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(14px, 3vw, 34px);
    padding: clamp(18px, 2.6vw, 30px) 0;
    border-top: 1px solid var(--line-soft);
    position: relative;
    text-align: left;
    width: 100%;
    transition: padding-left .5s var(--ease), color .35s;
}
.toc__row:last-child { border-bottom: 1px solid var(--line-soft); }
.toc__row::before {
    content: "";
    position: absolute;
    left: 0; top: -1px;
    height: 1px; width: 100%;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .7s var(--ease);
}
.toc__row:hover::before, .toc__row:focus-visible::before { transform: scaleX(1); }
@media (hover: hover) {
    .toc__row:hover { padding-left: clamp(10px, 2vw, 26px); }
}
.toc__no {
    font-family: var(--display);
    font-size: .8rem;
    letter-spacing: .16em;
    color: var(--gold-deep);
    transition: color .35s;
}
.toc__title {
    font-family: var(--display);
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(1rem, 1.95vw, 1.48rem);
    line-height: 1.05;
    color: var(--ink);
    transition: color .35s;
}
.toc__note {
    display: none;
    font-size: .82rem;
    color: var(--ink-faint);
    max-width: 34ch;
    transition: color .35s;
}
@media (min-width: 1000px) {
    .toc__note { display: block; }
    .toc__row  { grid-template-columns: auto minmax(0, 1fr) 30ch; }
}
.toc__row:hover .toc__title,
.toc__row:hover .toc__no { color: var(--gold); }
.toc__row:hover .toc__note { color: var(--ink-dim); }

/* Thumbnail that trails the pointer across the contents list. */
.toc__peek {
    position: fixed;
    top: 0; left: 0;
    width: 250px; height: 170px;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(.86);
    transition: opacity .4s var(--ease-soft), transform .5s var(--ease);
    border: 1px solid var(--line);
    overflow: hidden;
    background: var(--panel);
}
.toc__peek img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.toc__peek.is-on { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
@media (hover: none), (max-width: 999px) { .toc__peek { display: none; } }

/* -------------------------------------------------------------- apart cards */
.apart__grid {
    display: grid;
    gap: clamp(16px, 2vw, 26px);
}
@media (min-width: 820px) { .apart__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tilt {
    position: relative;
    border: 1px solid var(--line-soft);
    background: var(--panel-2);
    padding: clamp(24px, 3vw, 40px);
    min-height: clamp(240px, 26vw, 320px);
    display: grid;
    align-content: end;
    gap: 14px;
    overflow: hidden;
    isolation: isolate;
    transform-style: preserve-3d;
    transition: border-color .5s, transform .5s var(--ease);
}
.tilt:hover { border-color: var(--line); }
.tilt__img {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.tilt__img img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .42;
    transform: scale(1.06);
    transition: opacity .7s var(--ease-soft), filter .7s, transform 1s var(--ease);
}
.tilt:hover .tilt__img img { opacity: .68; transform: scale(1); }
.tilt::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(13, 17, 18, .3) 0%, rgba(13, 17, 18, .93) 62%);
}
/* pointer-tracked spotlight */
.tilt::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
                rgba(255, 224, 150, .16), transparent 68%);
    transition: opacity .45s var(--ease-soft);
}
.tilt:hover::after { opacity: 1; }
.tilt__n {
    font-family: var(--display);
    font-size: .72rem;
    letter-spacing: .24em;
    color: var(--gold-deep);
}
.tilt h3 {
    font-family: var(--display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(1rem, 1.55vw, 1.24rem);
    color: var(--gold);
    line-height: 1.08;
}
.tilt p { margin: 0; font-size: .88rem; color: var(--ink-dim); }

/* -------------------------------------------------------------- philosophy */
.philo {
    position: relative;
    overflow: hidden;
}
.philo__grid {
    display: grid;
    gap: clamp(30px, 5vw, 72px);
    align-items: center;
}
@media (min-width: 980px) { .philo__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); } }

/* Word-by-word illumination driven by scroll position. */
.lightread {
    font-family: var(--display);
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(1.05rem, 2.05vw, 1.6rem);
    line-height: 1.34;
    letter-spacing: .01em;
    margin: 0 0 clamp(22px, 3vw, 38px);
}
.js .lightread .w {
    color: rgba(233, 233, 228, .16);
    transition: color .5s var(--ease-soft), text-shadow .5s;
}
.lightread .w.lit {
    color: var(--gold);
    text-shadow: 0 0 30px rgba(255, 235, 172, .22);
}

.pillars {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: clamp(20px, 3vw, 32px) 0;
}
.pill {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .72rem;
    padding: 10px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--gold-soft);
    transition: background .4s var(--ease-soft), color .4s, border-color .4s, transform .4s var(--ease);
}
.pill:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #0d0d0d;
    transform: translateY(-2px);
}

.philo__media {
    position: relative;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--line-soft);
}
.philo__media .reveal-img { position: absolute; inset: 0; }
.philo__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgba(255, 224, 150, .10), transparent 55%);
    pointer-events: none;
    z-index: 3;
}

/* ------------------------------------------------------------------ process */
.process__grid { display: grid; gap: clamp(26px, 4vw, 54px); }
@media (min-width: 980px) {
    .process__grid { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); align-items: start; }
}

.steps { display: grid; gap: 0; counter-reset: step; }
.step {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(16px, 3vw, 34px);
    padding: clamp(20px, 3vw, 34px) 0;
    border-top: 1px solid var(--line-soft);
}
.step:last-child { border-bottom: 1px solid var(--line-soft); }
.step__no {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.5vw, 1.95rem);
    line-height: .9;
    color: transparent;
    -webkit-text-stroke: 1px var(--line-strong);
    transition: color .6s var(--ease-soft), -webkit-text-stroke-color .6s;
}
.step.is-in .step__no { color: rgba(255, 235, 172, .1); }
.step:hover .step__no,
.step.is-active .step__no {
    color: var(--gold);
    -webkit-text-stroke-color: transparent;
}
.step h3 {
    font-family: var(--display);
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(.95rem, 1.4vw, 1.14rem);
    color: var(--ink);
    margin-bottom: 8px;
    transition: color .4s;
}
.step:hover h3 { color: var(--gold); }
.step p { margin: 0; font-size: .88rem; color: var(--ink-dim); max-width: 44ch; }

/* the drawn progress rail */
.step::before {
    content: "";
    position: absolute;
    left: 0; top: -1px;
    width: 100%; height: 1px;
    background: var(--gold-deep);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s var(--ease);
    transition-delay: calc(var(--d, 0) * 1ms);
}
.step.is-in::before { transform: scaleX(1); }

.process__media {
    position: relative;
    aspect-ratio: 16 / 11;
    border: 1px solid var(--line-soft);
}
.process__media .reveal-img { position: absolute; inset: 0; }
.process__note {
    margin-top: clamp(18px, 2.4vw, 28px);
    padding: clamp(18px, 2.4vw, 28px);
    border: 1px solid var(--line-soft);
    background: var(--panel-2);
    font-size: .9rem;
    color: var(--ink-dim);
}
.process__note strong { color: var(--gold); font-weight: 500; }

/* ---------------------------------------------------------------- projects */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: clamp(24px, 3vw, 40px);
}
.filter {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .7rem;
    padding: 10px 18px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    color: var(--ink-dim);
    transition: color .35s, border-color .35s, background .35s;
}
.filter:hover { color: var(--gold); border-color: var(--line); }
.filter[aria-pressed="true"] {
    background: var(--gold);
    border-color: var(--gold);
    color: #0d0d0d;
}
.filter span { opacity: .5; margin-left: .5em; font-size: .82em; }

.grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* An explicit row track is what lets 2x2 feature tiles coexist with 1x1 ones
       without the first row collapsing to nothing. */
    grid-auto-rows: clamp(108px, 12vw, 162px);
    gap: clamp(8px, 1vw, 14px);
}
@media (min-width: 760px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    background: var(--panel-2);
    text-align: left;
    isolation: isolate;
    transition: border-color .5s, transform .6s var(--ease), opacity .45s var(--ease-soft);
}
@media (min-width: 760px) {
    .card--feature { grid-column: span 2; grid-row: span 2; }
}
.card.is-out {
    opacity: 0;
    transform: scale(.94);
    pointer-events: none;
}
/* Applied once the fade finishes so filtered-out tiles leave the grid entirely
   instead of lingering as invisible boxes that still claim scroll space. */
.card.is-gone { display: none; }
.card__img { position: absolute; inset: 0; z-index: -2; }
.card__img img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(.9) contrast(1.05) saturate(1.08);
    transform: scale(1.04);
    transition: filter .8s var(--ease-soft), transform 1.1s var(--ease);
}
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(13, 17, 18, 0) 30%, rgba(13, 17, 18, .5) 58%, rgba(13, 17, 18, .96) 100%);
    transition: opacity .5s;
}
.card:hover { border-color: var(--line-strong); }
.card:hover .card__img img,
.card:focus-visible .card__img img {
    filter: brightness(1.05) contrast(1.02) saturate(1.2);
    transform: scale(1.005);
}

.card__body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: clamp(14px, 1.8vw, 24px);
    display: grid;
    gap: 4px;
}
.card__name {
    font-family: var(--display);
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(.8rem, 1.05vw, .98rem);
    line-height: 1.14;
    color: var(--gold);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .75);
}
.card--feature .card__name { font-size: clamp(.95rem, 1.45vw, 1.3rem); }
.card__meta {
    font-size: .72rem;
    letter-spacing: .1em;
    color: var(--ink-dim);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}

.card__open {
    position: absolute;
    top: clamp(10px, 1.4vw, 18px);
    right: clamp(10px, 1.4vw, 18px);
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(13, 17, 18, .55);
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: scale(.7) rotate(-40deg);
    transition: opacity .45s var(--ease-soft), transform .55s var(--ease), background .35s;
}
.card:hover .card__open,
.card:focus-visible .card__open { opacity: 1; transform: scale(1) rotate(0); }
.card__open svg { width: 15px; height: 15px; stroke: var(--gold); fill: none; stroke-width: 1.4; }
.card:hover .card__open { background: rgba(255, 235, 172, .12); }

.card__tag {
    position: absolute;
    top: clamp(10px, 1.4vw, 18px);
    left: clamp(10px, 1.4vw, 18px);
    font-family: var(--display);
    font-size: .58rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-soft);
    border: 1px solid var(--line-soft);
    background: rgba(13, 17, 18, .5);
    padding: 5px 10px;
    border-radius: 999px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .45s var(--ease-soft), transform .5s var(--ease);
}
.card:hover .card__tag, .card:focus-visible .card__tag { opacity: 1; transform: none; }

/* ------------------------------------------------------------ case overlay */
.modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    visibility: hidden;
    pointer-events: none;
}
.modal.is-open { visibility: visible; pointer-events: auto; }

.modal__scrim {
    position: absolute;
    inset: 0;
    background: rgba(6, 8, 9, .86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity .55s var(--ease-soft);
}
.modal.is-open .modal__scrim { opacity: 1; }

.modal__panel {
    position: relative;
    justify-self: center;
    align-self: start;
    width: min(1240px, 100%);
    margin: clamp(50px, 8vh, 90px) 0 clamp(24px, 6vh, 60px);
    background: var(--bg);
    border: 1px solid var(--line);
    max-height: calc(100svh - clamp(70px, 12vh, 140px));
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transform: translateY(46px) scale(.985);
    transition: opacity .55s var(--ease-soft), transform .7s var(--ease);
}
.modal.is-open .modal__panel { opacity: 1; transform: none; }
@media (min-width: 1300px) { .modal__panel { width: 1240px; } }

.modal__close {
    position: sticky;
    top: 0;
    z-index: 5;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(180deg, var(--bg) 60%, transparent);
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .66rem;
    color: var(--ink-dim);
    transition: color .3s;
    width: 100%;
    justify-content: flex-end;
}
.modal__close:hover { color: var(--gold); }
.modal__close i {
    width: 30px; height: 30px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-style: normal;
    transition: transform .5s var(--ease), border-color .3s;
}
.modal__close:hover i { transform: rotate(90deg); border-color: var(--gold); }

.case { padding: 0 clamp(18px, 4vw, 54px) clamp(34px, 6vw, 64px); }
.case__head {
    display: grid;
    gap: clamp(14px, 2vw, 24px);
    padding-bottom: clamp(22px, 3vw, 34px);
    border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 900px) {
    .case__head { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: end; }
}
.case__title {
    font-family: var(--display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(1.4rem, 2.9vw, 2.25rem);
    line-height: .98;
    color: var(--gold);
}
.case__meta {
    font-family: var(--display);
    letter-spacing: .2em;
    text-transform: uppercase;
    font-size: .74rem;
    color: var(--ink-dim);
    margin-top: 10px;
}
.case__headline {
    font-family: var(--display);
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(.92rem, 1.35vw, 1.12rem);
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 12px;
}
.case__story { margin: 0; color: var(--ink-dim); font-size: .92rem; }

.case__cols {
    display: grid;
    gap: clamp(20px, 3vw, 40px);
    padding-block: clamp(22px, 3vw, 36px);
}
@media (min-width: 760px) { .case__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.case__col h4 {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .7rem;
    color: var(--gold-soft);
    margin-bottom: 14px;
}
.case__list { display: grid; gap: 2px; }
.case__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .88rem;
    color: var(--ink);
}
.case__list li::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--gold-deep);
    flex: none;
}

.case__gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 1vw, 14px);
}
@media (min-width: 900px) { .case__gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case__shot {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    background: var(--panel-2);
}
.case__shot:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
.case__shot img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease);
}
.case__shot:hover img { transform: scale(1.05); }

/* --------------------------------------------------------------- solutions */
.sol { border-top: 1px solid var(--line-soft); }
.sol:last-of-type { border-bottom: 1px solid var(--line-soft); }

.sol__head {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(14px, 3vw, 30px);
    padding: clamp(20px, 3vw, 34px) 0;
    text-align: left;
    transition: padding-left .55s var(--ease);
}
@media (hover: hover) { .sol__head:hover { padding-left: clamp(10px, 2vw, 24px); } }

.sol__no {
    font-family: var(--display);
    font-size: .78rem;
    letter-spacing: .18em;
    color: var(--gold-deep);
}
.sol__title {
    font-family: var(--display);
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(1rem, 1.85vw, 1.42rem);
    line-height: 1.05;
    color: var(--ink);
    transition: color .4s;
}
.sol__head:hover .sol__title,
.sol.is-open .sol__title { color: var(--gold); }

.sol__plus {
    width: 42px; height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    position: relative;
    flex: none;
    transition: background .4s, border-color .4s, transform .6s var(--ease);
}
.sol__plus::before, .sol__plus::after {
    content: "";
    position: absolute;
    inset: 50% 12px auto 12px;
    height: 1px;
    background: var(--gold);
    transition: transform .5s var(--ease), opacity .4s;
}
.sol__plus::after { transform: rotate(90deg); }
.sol.is-open .sol__plus { background: rgba(255, 235, 172, .1); transform: rotate(180deg); }
.sol.is-open .sol__plus::after { transform: rotate(90deg) scaleX(0); opacity: 0; }

/* Preview image that slides in from the right on hover. */
.sol__peek {
    position: absolute;
    right: clamp(60px, 8vw, 130px);
    top: 50%;
    width: clamp(150px, 16vw, 230px);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    transform: translate(24px, -50%) scale(.9);
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s var(--ease-soft), transform .7s var(--ease);
    z-index: 2;
}
.sol__peek img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
@media (hover: hover) and (min-width: 1000px) {
    .sol__head:hover .sol__peek { opacity: 1; transform: translate(0, -50%) scale(1); }
}
.sol.is-open .sol__peek { opacity: 0 !important; }

/* grid-template-rows animates cleanly from 0fr to 1fr */
.sol__wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .75s var(--ease);
}
.sol.is-open .sol__wrap { grid-template-rows: 1fr; }
.sol__panel { overflow: hidden; }
.sol__inner {
    padding-bottom: clamp(24px, 4vw, 48px);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s var(--ease-soft) .12s, transform .7s var(--ease) .12s;
}
.sol.is-open .sol__inner { opacity: 1; transform: none; }

.sol__blurb {
    max-width: 62ch;
    color: var(--ink-dim);
    font-size: .92rem;
    margin-bottom: clamp(20px, 3vw, 32px);
}
.sol__groups {
    display: grid;
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
}
@media (min-width: 700px)  { .sol__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .sol__groups { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.solgroup {
    background: var(--bg);
    padding: clamp(16px, 1.8vw, 24px);
    display: grid;
    align-content: start;
    gap: 18px;
    transition: background .45s var(--ease-soft);
}
.solgroup:hover { background: var(--panel-2); }
.solgroup__name {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
    color: #0d0d0d;
    background: var(--gold-soft);
    padding: 8px 12px;
    text-align: center;
}
.solset__name {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    color: var(--gold);
    margin-bottom: 6px;
}
.solset__items { display: grid; gap: 3px; }
.solset__items li {
    font-size: .78rem;
    color: var(--ink-dim);
    line-height: 1.42;
    padding-left: 12px;
    position: relative;
}
.solset__items li::before {
    content: "";
    position: absolute;
    left: 0; top: .62em;
    width: 4px; height: 1px;
    background: var(--gold-deep);
}

/* ------------------------------------------------------------------- power */
.power { position: relative; overflow: hidden; }
.power__bg { position: absolute; inset: -15% 0; z-index: 0; }
.power__bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .34;
}
.power__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--bg) 8%, rgba(13, 17, 18, .55) 55%, var(--bg) 100%);
}
.power__grid { position: relative; z-index: 1; display: grid; gap: clamp(28px, 4vw, 60px); }
@media (min-width: 980px) { .power__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); } }

.power__list { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.power__item {
    background: rgba(13, 17, 18, .82);
    padding: clamp(18px, 2.4vw, 28px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(14px, 2vw, 24px);
    align-items: start;
    position: relative;
    overflow: hidden;
    transition: background .45s var(--ease-soft);
}
.power__item:hover { background: rgba(26, 26, 26, .95); }
.power__item::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--gold);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .6s var(--ease);
}
.power__item:hover::before { transform: scaleY(1); }
.power__item b {
    font-family: var(--display);
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(.88rem, 1.25vw, 1.02rem);
    color: var(--gold);
    display: block;
    margin-bottom: 4px;
}
.power__item p { margin: 0; font-size: .85rem; color: var(--ink-dim); }
.power__idx {
    font-family: var(--display);
    font-size: .72rem;
    letter-spacing: .16em;
    color: var(--gold-deep);
    padding-top: 4px;
}
.power__closing {
    font-family: var(--display);
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(.95rem, 1.6vw, 1.28rem);
    line-height: 1.3;
    color: var(--gold);
    margin-top: clamp(22px, 3vw, 34px);
    padding-top: clamp(18px, 2.4vw, 26px);
    border-top: 1px solid var(--line-soft);
}

/* ------------------------------------------------------------------ brands */
.brands { position: relative; overflow: hidden; }
.brands__bg { position: absolute; inset: -20% -10%; z-index: 0; }
.brands__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.brands__bg::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(80% 70% at 50% 50%, transparent, var(--bg) 88%);
}
.brands__inner { position: relative; z-index: 1; }
.brands__headline {
    font-family: var(--display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(1.7rem, 4vw, 3.1rem);
    line-height: .94;
    color: var(--ink);
}
.brands__headline em { font-style: normal; color: var(--gold); display: block; }

.brands__grid {
    display: grid;
    gap: clamp(10px, 1.4vw, 18px);
    margin-top: clamp(34px, 5vw, 66px);
}
@media (min-width: 700px)  { .brands__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .brands__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.bcard {
    position: relative;
    border: 1px solid var(--line-soft);
    background: rgba(20, 24, 23, .7);
    backdrop-filter: blur(4px);
    padding: clamp(22px, 2.6vw, 34px);
    min-height: clamp(196px, 19vw, 240px);
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 20px;
    overflow: hidden;
    transition: transform .6s var(--ease), border-color .5s, background .5s;
}
.bcard > div { align-self: start; }
.bcard:hover {
    transform: translateY(-8px);
    border-color: var(--line-strong);
    background: rgba(26, 26, 26, .9);
}
.bcard__no {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: .82;
    color: transparent;
    -webkit-text-stroke: 1px var(--line-strong);
    transition: color .55s var(--ease-soft), -webkit-text-stroke-color .55s;
}
.bcard:hover .bcard__no { color: rgba(255, 235, 172, .16); -webkit-text-stroke-color: transparent; }
.bcard h3 {
    font-family: var(--display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: clamp(.92rem, 1.3vw, 1.08rem);
    color: var(--gold);
    margin-bottom: 10px;
}
.bcard p { margin: 0; font-size: .84rem; color: var(--ink-dim); }
.bcard::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .7s var(--ease);
}
.bcard:hover::after { transform: scaleX(1); }

/* ----------------------------------------------------------------- connect */
.connect { position: relative; }
.connect__grid { display: grid; gap: clamp(32px, 5vw, 70px); align-items: start; }
@media (min-width: 1000px) { .connect__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); } }

.connect__title {
    font-family: var(--display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(2.2rem, 6vw, 4.4rem);
    line-height: .88;
    color: var(--gold);
}
.connect__closing {
    font-family: var(--display);
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(.92rem, 1.55vw, 1.2rem);
    color: var(--gold);
    line-height: 1.3;
}

.contacts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
    margin-top: clamp(26px, 4vw, 44px);
}
@media (min-width: 620px) { .contacts { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.contact {
    background: var(--bg);
    padding: clamp(18px, 2.2vw, 26px);
    display: grid;
    gap: 12px;
    justify-items: start;
    align-content: start;
    transition: background .45s var(--ease-soft);
}
.contact:hover { background: var(--panel-2); }
.contact svg {
    width: 22px; height: 22px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 1.3;
    transition: transform .5s var(--ease);
}
.contact:hover svg { transform: translateY(-3px); }
.contact span { font-size: .8rem; color: var(--ink-dim); line-height: 1.5; word-break: break-word; }
.contact b {
    font-family: var(--display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .62rem;
    color: var(--gold-soft);
}

/* --------------------------------------------------------------------- form */
.form {
    border: 1px solid var(--line-soft);
    background: var(--panel-2);
    padding: clamp(22px, 3vw, 40px);
    display: grid;
    gap: clamp(16px, 2vw, 22px);
    position: relative;
}
.form__row { display: grid; gap: clamp(16px, 2vw, 22px); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { position: relative; display: grid; gap: 8px; }
.field > label {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: .64rem;
    color: var(--gold-soft);
}
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font-size: .92rem;
    transition: border-color .4s, box-shadow .4s;
    border-radius: 0;
}
.field textarea { resize: vertical; min-height: 108px; }
.field select { cursor: pointer; }
.field select option { background: var(--panel); color: var(--ink); }
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-bottom-color: var(--gold);
    box-shadow: 0 12px 24px -22px var(--gold);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-bottom-color: #d97b6c; }
.field__err {
    font-size: .72rem;
    color: #e2917f;
    min-height: 1em;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .3s, transform .3s;
}
.field.has-error .field__err { opacity: 1; transform: none; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__note { font-size: .74rem; color: var(--ink-faint); margin: 0; }
.form__status {
    font-size: .86rem;
    padding: 12px 16px;
    border: 1px solid var(--line-soft);
    display: none;
}
.form__status.is-ok  { display: block; border-color: rgba(255, 235, 172, .4); color: var(--gold); }
.form__status.is-bad { display: block; border-color: rgba(217, 123, 108, .45); color: #e2917f; }

.form.is-sending { opacity: .6; pointer-events: none; }

/* ------------------------------------------------------------------ footer */
.footer {
    border-top: 1px solid var(--line-soft);
    padding-block: clamp(34px, 5vw, 62px) clamp(24px, 3vw, 40px);
}
.footer__grid { display: grid; gap: clamp(26px, 4vw, 50px); }
@media (min-width: 860px) { .footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); } }
.footer h4 {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: .66rem;
    color: var(--gold-soft);
    margin-bottom: 16px;
}
.footer__links { display: grid; gap: 9px; }
.footer__links a {
    font-size: .84rem;
    color: var(--ink-dim);
    transition: color .3s, padding-left .4s var(--ease);
}
.footer__links a:hover { color: var(--gold); padding-left: 6px; }
.footer__bottom {
    margin-top: clamp(28px, 4vw, 48px);
    padding-top: 20px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    align-items: center;
    font-size: .74rem;
    color: var(--ink-faint);
}

.to-top {
    position: fixed;
    right: clamp(14px, 2.4vw, 34px);
    bottom: clamp(14px, 2.4vw, 34px);
    z-index: 45;
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(13, 17, 18, .8);
    backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateY(16px) scale(.85);
    pointer-events: none;
    transition: opacity .5s var(--ease-soft), transform .6s var(--ease), background .35s, border-color .35s;
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--gold); border-color: var(--gold); }
.to-top svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; stroke-width: 1.5; transition: stroke .3s; }
.to-top:hover svg { stroke: #0d0d0d; }

/* ------------------------------------------------------------------ misc */
.parallax { will-change: transform; }

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--gold);
    color: #0d0d0d;
    padding: 12px 20px;
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .72rem;
}
.skip:focus { left: 12px; top: 12px; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------- motion / print guards */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    .split .ch { opacity: 1 !important; transform: none !important; }
    .reveal-img::after { display: none; }
    .reveal-img img { transform: none !important; }
    .cursor-light, .cursor-dot, .grain, .hero__dust, .hero__beam { display: none !important; }
    .parallax { transform: none !important; }
}

@media print {
    .nav, .menu, .loader, .frame, .grain, .vignette, .cursor-light,
    .cursor-dot, .to-top, .progress, .scroll-cue { display: none !important; }
    body { background: #fff; color: #111; }
}