/* ============================================================
   TOKENS
============================================================ */
:root {
    --ink:        #15120d;
    --ink-soft:   #221d16;
    --paper:      #faf7f1;
    --panel:      #f0e9de;
    --cream:      #ffffff;
    --mist:       #6b6259;
    --mist-2:     #9c9186;

    --ember:      #b69064;
    --ember-deep: #92734f;
    --ember-glow: rgba(182,144,100,.28);

    --f-display: 'Kanit', -apple-system, 'Segoe UI', sans-serif;
    --f-body:    'Kanit', -apple-system, 'Segoe UI', sans-serif;
    --f-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    --w-regular: 400;
    --w-medium:  500;
    --w-bold:    600;
    --w-black:   700;

    --t-xs:  0.75rem;
    --t-sm:  0.9rem;
    --t-md:  1.05rem;
    --t-lg:  1.3rem;
    --t-xl:  1.75rem;
    --t-2xl: 2.4rem;
    --t-3xl: 3.4rem;
    --t-4xl: 4.6rem;
    --t-5xl: 6.2rem;

    --r-sm:   0;
    --r-md:   0;
    --r-lg:   0;
    --r-xl:   0;
    --r-pill: 0;

    --sp-3xs: .35rem;
    --sp-2xs: .6rem;
    --sp-xs:  1rem;
    --sp-sm:  1.6rem;
    --sp-md:  2.6rem;
    --sp-lg:  4.5rem;
    --sp-xl:  7rem;
    --sp-2xl: 11rem;

    --ease: 0.3s cubic-bezier(.2,.7,.2,1);
    --shadow-card: 6px 6px 0 var(--ink);
    --shadow-deep: 10px 10px 0 var(--ink);

    --wrap-max: 1320px;
    --wrap-pad: clamp(1.25rem, 5vw, 4rem);
    --edge: clamp(1.5rem, 6vw, 6rem);
    /* Outer shell width shared by .hero, .plate and the section rail. These
       three must agree or the rail's vertical line steps sideways between
       section types — keep it here rather than repeating the number. */
    --shell-max: 1520px;
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
    font-family: var(--f-body);
    font-size: var(--t-md);
    font-weight: var(--w-regular);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; border: none; background: none; outline: none; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: var(--w-black);
    line-height: 1.08;
    letter-spacing: -0.01em;
}

::selection { background: var(--ember); color: var(--cream); }

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

/* ============================================================
   LAYOUT
============================================================ */
.wrap { width: 100%; max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--wrap-pad); }

.band     { position: relative; padding-block: var(--sp-xl); }
.band-lg  { padding-block: var(--sp-2xl); }
.band-tight { padding-block: var(--sp-md); }

/* A floating rounded card that spans the same inset width as the header/hero —
   the one recurring "featured" surface shape used for hero, works, team, CTA. */
.plate {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: calc(100% - var(--edge));
    max-width: var(--shell-max);
    margin-inline: auto;
    border-radius: var(--r-xl);
}

.plate--dark {
    background: var(--ink);
    color: var(--cream);
    box-shadow: var(--shadow-deep);
}

/* ============================================================
   TYPE UTILITIES
============================================================ */
.kicker {
    display: inline-flex;
    align-items: center;
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    font-weight: var(--w-medium);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ember);
}

.kicker::before { content: "[ "; }
.kicker::after  { content: " ]"; }

.display-hero { font-size: clamp(var(--t-3xl), 7.5vw, var(--t-5xl)); }
.display-1    { font-size: clamp(var(--t-2xl), 5.5vw, var(--t-4xl)); }
.display-2    { font-size: clamp(var(--t-xl), 4vw, var(--t-3xl)); }

.text-mist  { color: var(--mist); }
.text-cream { color: var(--cream); }
.text-ember { color: var(--ember); }

.balance { text-wrap: balance; }

/* ============================================================
   BUTTONS
============================================================ */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.9rem;
    border-radius: var(--r-pill);
    font-size: var(--t-sm);
    font-weight: var(--w-bold);
    letter-spacing: .01em;
    transition: transform var(--ease), background var(--ease), color var(--ease), box-shadow var(--ease);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-fill {
    background: var(--ink);
    color: var(--cream);
}
.btn-fill:hover { background: var(--ember); }

.btn-ember {
    background: var(--ember);
    color: var(--cream);
    box-shadow: 0 10px 30px var(--ember-glow);
}
.btn-ember:hover { background: var(--ink); }

.btn-line {
    background: transparent;
    color: var(--cream);
    border: 1.5px solid rgba(255,255,255,.35);
}
.btn-line:hover { border-color: var(--ember); color: var(--ember); }

.btn-ghost {
    background: var(--cream);
    color: var(--ink);
    border: 1.5px solid rgba(21,18,13,.12);
}
.btn-ghost:hover { border-color: var(--ember); color: var(--ember); }

.btn__arrow {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    flex-shrink: 0;
    animation: arrow-nudge 1.6s ease-in-out infinite;
}

@keyframes arrow-nudge {
    0%, 100% { transform: rotate(45deg) translate(0,0); opacity: 1; }
    50%      { transform: rotate(45deg) translate(3px,-3px); opacity: .55; }
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: var(--w-medium);
    transition: color var(--ease);
}
.text-link:hover { color: var(--ember); }
.text-link span { transition: transform var(--ease); }
.text-link:hover span { transform: translate(3px,-3px); }

/* ============================================================
   SITE HEADER
============================================================ */
.site-head {
    position: sticky;
    top: 0;
    z-index: 100;
    padding-block: 1rem;
    background: rgba(250,247,241,.82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(21,18,13,.07);
    box-shadow: 0 0 0 rgba(21,18,13,0);
    transition: box-shadow var(--ease), background var(--ease);
}

.site-head__row { display: flex; align-items: center; gap: var(--sp-sm); }

.site-head__progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 100%;
    background: var(--ember);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

.brand-mark {
    font-family: var(--f-display);
    font-size: var(--t-lg);
    font-weight: var(--w-black);
    color: var(--ink);
    display: flex;
    align-items: center;
}

.custom-logo-link { display: flex; align-items: center; }
.custom-logo { height: 38px; width: auto; max-width: 180px; object-fit: contain; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.custom-logo-link:hover .custom-logo { transform: scale(1.04); }

.menu-primary {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    margin-left: auto;
}

.menu-primary a {
    position: relative;
    font-size: var(--t-sm);
    font-weight: var(--w-medium);
    color: var(--mist);
    transition: color var(--ease);
}

.menu-primary a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -5px;
    height: 2px;
    background: var(--ember);

    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s ease;
}

.menu-primary a:hover { color: var(--ink); }
.menu-primary a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 26px; padding: 4px; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; background: var(--ink); transition: transform var(--ease), opacity var(--ease); }

@media (max-width: 860px) {
    .nav-toggle { display: flex; margin-left: auto; position: relative; z-index: 101; }

    .menu-primary {
        position: fixed;
        inset: 0;
        z-index: 100;
        background: var(--ink);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--sp-md);
        transform: translateX(100%);
        transition: transform var(--ease);
    }
    .menu-primary.is-open { transform: translateX(0); }
    .menu-primary a { font-size: var(--t-xl); color: var(--cream); opacity: 0; }
    .menu-primary a::after { background: var(--ember); }
    .nav-cta { display: none; }

    .menu-primary.is-open a {
        animation: nav-link-in .6s cubic-bezier(.16,1,.3,1) both;
    }
    .menu-primary.is-open a:nth-child(1) { animation-delay: .08s; }
    .menu-primary.is-open a:nth-child(2) { animation-delay: .14s; }
    .menu-primary.is-open a:nth-child(3) { animation-delay: .2s; }
    .menu-primary.is-open a:nth-child(4) { animation-delay: .26s; }
    .menu-primary.is-open a:nth-child(5) { animation-delay: .32s; }
    .menu-primary.is-open a:nth-child(6) { animation-delay: .38s; }

    @keyframes nav-link-in {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .menu-primary.is-open ~ .nav-toggle { position: fixed; top: 1.1rem; right: var(--wrap-pad); }
    .menu-primary.is-open ~ .nav-toggle span { background: var(--cream); }
    .menu-primary.is-open ~ .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-primary.is-open ~ .nav-toggle span:nth-child(2) { opacity: 0; }
    .menu-primary.is-open ~ .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   SITE FOOTER
============================================================ */
.site-foot {
    background: var(--ink);
    color: rgba(255,255,255,.6);
    padding-block: var(--sp-lg);
}

.foot-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    flex-wrap: wrap;
    padding-bottom: var(--sp-lg);
}

.foot-cta__heading { color: var(--cream); font-size: clamp(var(--t-xl), 3.6vw, var(--t-2xl)); max-width: 18ch; }

.foot-rule { border: none; border-top: 1px solid rgba(255,255,255,.12); }

.foot-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--sp-md);
    padding-block: var(--sp-lg);
}

.foot-brand__desc { max-width: 42ch; margin-top: var(--sp-xs); line-height: 1.7; }

.foot-social { display: flex; gap: .6rem; margin-top: var(--sp-sm); }
.foot-social__link {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border: 1px solid rgba(255,255,255,.18);
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.foot-social__link:hover { background: var(--ember); border-color: var(--ember); color: var(--cream); }

.foot-col__title {
    color: var(--cream);
    font-size: var(--t-xs);
    font-weight: var(--w-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: var(--sp-sm);
}

.foot-links { display: flex; flex-direction: column; gap: .8rem; }
.foot-links a { transition: color var(--ease); }
.foot-links a:hover { color: var(--ember); }

.foot-contact { display: flex; flex-direction: column; gap: .8rem; }
.foot-contact__item { display: flex; align-items: flex-start; gap: .6rem; }
.foot-contact__item svg { flex-shrink: 0; margin-top: .2rem; color: var(--ember); }
.foot-contact__item a { transition: color var(--ease); }
.foot-contact__item a:hover { color: var(--ember); }

.foot-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-xs);
    padding-top: var(--sp-lg);
    font-size: var(--t-xs);
}

.foot-legal { display: flex; gap: var(--sp-sm); }
.foot-legal a:hover { color: var(--ember); }

@media (max-width: 900px) {
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .foot-grid { grid-template-columns: 1fr; }
    .foot-cta { flex-direction: column; align-items: flex-start; }
    .foot-bottom { flex-direction: column; text-align: center; }
}

/* ============================================================
   HERO
============================================================ */
.hero {
    position: relative;
    width: calc(100% - var(--edge));
    max-width: var(--shell-max);
    margin-inline: auto;
    background: var(--paper);
}

/* Shared animated backdrop for the chat row and the intro row below it —
   one continuous background, two visually separate rows (divided by
   .hero__top's border-bottom). */
.hero__bg-wrap {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hero__bg-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.hero__top {
    position: relative;
    z-index: 1;
    padding: clamp(2rem, 5vw, var(--sp-xl)) var(--wrap-pad);
    border-bottom: 2px solid var(--ink);
}

.hero__top-content { position: relative; z-index: 1; }

.hero__meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-sm);
    margin-bottom: clamp(1.75rem, 5vw, 3.5rem);
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    overflow: hidden;
}

.hero__eyebrow { color: var(--ember-deep); font-weight: 500; white-space: nowrap; }
.hero__eyebrow::before { content: "[ "; }
.hero__eyebrow::after { content: " ]"; }


.hero__title {
    font-family: var(--f-body);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(3.2rem, 9.5vw, 9.4rem);
    line-height: .92;
    letter-spacing: -.03em;
    color: var(--ink);
    max-width: 15ch;
}
.hero__title-accent { color: var(--ember-deep); border-bottom: .07em solid var(--ember); padding-bottom: .02em; }

.hero__title[data-reveal] {
    opacity: 1;
    transform: none;
    transition: clip-path .9s cubic-bezier(.16,1,.3,1);
    clip-path: inset(0 100% 0 0);
}
.hero__title[data-reveal].is-revealed { clip-path: inset(0 0 0 0); }

.hero__foot-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-md);
    margin-top: clamp(var(--sp-md), 5vw, var(--sp-lg));
}

.hero__sub { max-width: 42ch; color: var(--mist); font-size: clamp(var(--t-md), 1.4vw, var(--t-lg)); line-height: 1.6; }

.hero__actions { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; }

.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ------------------------------------------------------------------ *
   Hero AI chat
------------------------------------------------------------------ */
.hero__top-content--chat {
    display: flex;
    justify-content: center;
    padding-block: clamp(1.5rem, 4vw, var(--sp-md));
}

.hero__ai-chat {
    width: 100%;
    max-width: 560px;
    background: var(--cream);
    border: 2px solid var(--ink);
    box-shadow: var(--shadow-card);
}

.ai-chat__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem var(--sp-xs);
    border-bottom: 2px solid var(--ink);
}

.ai-chat__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ember);
    box-shadow: 0 0 0 3px var(--ember-glow);
}

.ai-chat__label {
    font-family: var(--f-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mist);
}

.ai-chat__log {
    max-height: 260px;
    overflow-y: auto;
    padding: var(--sp-xs);
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.ai-chat__msg {
    font-size: var(--t-sm);
    line-height: 1.55;
    max-width: 90%;
    padding: .55rem .8rem;
}

.ai-chat__msg--bot {
    align-self: flex-start;
    background: var(--panel);
    color: var(--ink);
}

.ai-chat__msg--user {
    align-self: flex-end;
    background: var(--ink);
    color: var(--paper);
}

.ai-chat__msg--typing { display: flex; align-items: center; gap: .3rem; }
.ai-chat__msg--typing span {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--mist);
    animation: ai-chat-blink 1.2s ease-in-out infinite;
}
.ai-chat__msg--typing span:nth-child(2) { animation-delay: .2s; }
.ai-chat__msg--typing span:nth-child(3) { animation-delay: .4s; }
@keyframes ai-chat-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.ai-chat__msg--error { color: var(--ember-deep); background: transparent; align-self: stretch; }

.ai-chat__form {
    display: flex;
    border-top: 2px solid var(--ink);
    /* Resting fill. Without it the input is transparent on cream and only
       becomes a visible field once focused — so the one element whose whole
       job is "type here" looks like a caption until you've already clicked it. */
    background: var(--panel);
}

/* Terminal prompt. The most widely understood "type here" signal there is,
   and it speaks the same blueprint language as the mono chrome elsewhere
   rather than importing a generic chat-bubble look. */
.ai-chat__form::before {
    content: '>';
    display: flex;
    align-items: center;
    padding-left: var(--sp-xs);
    font-family: var(--f-mono);
    font-size: var(--t-sm);
    line-height: 1;
    color: var(--ember);
}

/* Blink only while the field is empty and unfocused: once the visitor is
   typing, the browser's own caret takes over and a second blinking glyph is
   just noise. */
.ai-chat__form:not(:focus-within):has(.ai-chat__input:placeholder-shown)::before {
    animation: ai-chat-caret 1.1s steps(1, end) infinite;
}

@keyframes ai-chat-caret {
    0%, 55%   { opacity: 1; }
    56%, 100% { opacity: 0; }
}

.ai-chat__input {
    flex: 1;
    border: none;
    background: transparent;
    /* Tight to the prompt glyph on the left; normal gutter on the right. */
    padding: .8rem var(--sp-xs) .8rem .45rem;
    font-family: var(--f-body);
    font-size: var(--t-sm);
    color: var(--ink);
}
.ai-chat__input:focus { outline: none; }
/* One step darker than the disclaimer below, which stays --mist-2 — the
   invitation and the fine print shouldn't carry the same weight. The explicit
   opacity is for Firefox, which dims placeholders by default. */
.ai-chat__input::placeholder { color: var(--mist); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .ai-chat__form::before { animation: none; }
}

.ai-chat__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.ai-chat__send {
    width: 48px;
    border: none;
    border-left: 2px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    font-size: var(--t-md);
    cursor: pointer;
    transition: background var(--ease);
}
.ai-chat__send:hover { background: var(--ember-deep); }
.ai-chat__send:disabled { opacity: .5; cursor: default; }

.ai-chat__hint {
    padding: .5rem var(--sp-xs) .7rem;
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .06em;
    color: var(--mist-2);
}

@media (max-width: 860px) {
    .hero__ai-chat { max-width: none; }
}

/* ------------------------------------------------------------------ *
   Hero AI chat — docked state
   Once the hero has scrolled past, ai-chat.js adds .is-docked and the
   same element (not a copy — one history, one form, no state to keep
   in sync) detaches from the hero row and pins to the viewport corner.
   Collapsed by default (.is-docked alone): head + one-line peek only,
   the whole head acting as the expand control. Add .is-open to show
   the full log/form/hint as a floating panel instead.
------------------------------------------------------------------ */
.hero__ai-chat.is-docked {
    position: fixed;
    right: var(--wrap-pad);
    bottom: var(--wrap-pad);
    left: auto;
    z-index: 95; /* below .site-head (100), above ordinary page content */
    width: min(360px, calc(100vw - (var(--wrap-pad) * 2)));
    max-width: 360px;
    box-shadow: var(--shadow-deep);
    animation: ai-chat-dock-in .35s cubic-bezier(.16,1,.3,1);
}

.hero__ai-chat.is-docked.is-open {
    /* Safety net for short viewports (landscape mobile) — the log's own
       260px max-height + overflow handles the common case on its own. */
    max-height: calc(100vh - (var(--wrap-pad) * 2));
    overflow: hidden;
}

@keyframes ai-chat-dock-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero__ai-chat.is-docked:not(.is-open) .ai-chat__log,
.hero__ai-chat.is-docked:not(.is-open) .ai-chat__form,
.hero__ai-chat.is-docked:not(.is-open) .ai-chat__hint {
    display: none;
}

/* Cursor/hover on the whole box, not just the head strip — the JS click
   handler is on the box itself, and collapsed-docked shows nothing but
   the head and the peek line anyway, so this is the entire clickable area. */
.hero__ai-chat.is-docked:not(.is-open) {
    cursor: pointer;
}
.hero__ai-chat.is-docked:not(.is-open):hover {
    background: var(--panel);
    /* Keeps the peek's fade-out (below) matching the hover background
       instead of fading to the un-hovered cream and leaving a visible seam. */
    --peek-fade-bg: var(--panel);
}

/* Pulses only while collapsed — once the full card isn't visible, this
   is what says "still here" instead. */
.hero__ai-chat.is-docked:not(.is-open) .ai-chat__dot {
    animation: ai-chat-pulse 2s ease-in-out infinite;
}
@keyframes ai-chat-pulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--ember-glow); }
    50%      { box-shadow: 0 0 0 6px transparent; }
}

.ai-chat__peek {
    display: none;
    position: relative;
    padding: .6rem var(--sp-xs) .8rem;
    font-size: var(--t-sm);
    line-height: 1.4;
    color: var(--mist);
    /* Hard-capped at two lines; the ::after below softens the cutoff with a
       fade instead of clipping mid-line when a reply runs longer than that. */
    max-height: calc(1.4em * 2 + .6rem);
    overflow: hidden;
}
.hero__ai-chat.is-docked:not(.is-open) .ai-chat__peek {
    display: block;
}
/* Only shown when JS finds the text actually taller than the box (see
   updatePeekOverflow in ai-chat.js) — a short reply that already fits
   shouldn't have its last line dimmed for no reason. */
.ai-chat__peek::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.4em;
    background: linear-gradient(to bottom, transparent, var(--peek-fade-bg, var(--cream)));
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}
.ai-chat__peek.is-overflowing::after {
    opacity: 1;
}

.ai-chat__dock-toggle {
    display: none;
    margin-left: auto;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--t-md);
    line-height: 1;
    color: var(--mist);
    transition: color var(--ease);
}
.ai-chat__dock-toggle:hover { color: var(--ink); }
.hero__ai-chat.is-docked.is-open .ai-chat__dock-toggle { display: flex; }

@media (prefers-reduced-motion: reduce) {
    .hero__ai-chat.is-docked { animation: none; }
}

.hero__skills {
    margin-top: var(--sp-md);
    padding-top: var(--sp-sm);
    border-top: 1px solid rgba(21,18,13,.14);
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mist);
}

/* ------------------------------------------------------------------ *
   Hero intro — editorial statement between the chat and the showreel.
------------------------------------------------------------------ */
.hero__intro {
    position: relative;
    z-index: 1;
    padding: clamp(2.5rem, 6vw, var(--sp-xl)) var(--wrap-pad);
    text-align: center;
}

.hero__intro-inner { position: relative; z-index: 2; max-width: 760px; margin-inline: auto; }

/* ------------------------------------------------------------------ *
   Floating service pills — decorative-but-functional nav scattered
   around the intro copy, drifting on their own. Two transform layers:
   .hero__floater-inner runs the idle wobble (CSS keyframes), while
   .hero__floater-pill handles the hover zoom independently — nested one
   level deeper, so the two transforms never fight over the same element.
------------------------------------------------------------------ */
.hero__floaters {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.hero__floater {
    position: absolute;
}

.hero__floater-inner {
    animation: hero-floater-wobble 9s ease-in-out infinite;
}

.hero__floater-pill {
    display: inline-flex;
    pointer-events: auto;
    padding: .55rem 1.1rem;
    border: 1.5px solid var(--ink);
    background: var(--ink);
    border-radius: var(--r-pill);
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    letter-spacing: .04em;
    color: var(--cream);
    white-space: nowrap;
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
}

.hero__floater-pill:hover,
.hero__floater-pill:focus-visible {
    transform: scale(1.22);
}

.hero__floater--1 { left: 4%;  top: 8%; }
.hero__floater--2 { right: 5%; top: 16%; }
.hero__floater--3 { left: 2%;  top: 36%; }
.hero__floater--4 { right: 3%; top: 46%; }
.hero__floater--5 { left: 6%;  top: 62%; }
.hero__floater--6 { right: 7%; top: 70%; }
.hero__floater--7 { left: 3%;  top: 86%; }
.hero__floater--8 { right: 4%; top: 90%; }

/* Distinct duration/delay/direction per pill so eight elements running
   the same keyframe still read as independently, randomly drifting
   rather than moving in unison. */
.hero__floater--1 .hero__floater-inner { animation-duration: 8.5s;  animation-delay: -1.2s; }
.hero__floater--2 .hero__floater-inner { animation-duration: 10.5s; animation-delay: -5.6s; animation-direction: reverse; }
.hero__floater--3 .hero__floater-inner { animation-duration: 9.5s;  animation-delay: -3.1s; }
.hero__floater--4 .hero__floater-inner { animation-duration: 7.5s;  animation-delay: -6.4s; animation-direction: reverse; }
.hero__floater--5 .hero__floater-inner { animation-duration: 11s;   animation-delay: -0.6s; }
.hero__floater--6 .hero__floater-inner { animation-duration: 8s;    animation-delay: -4.3s; animation-direction: reverse; }
.hero__floater--7 .hero__floater-inner { animation-duration: 9s;    animation-delay: -2.5s; }
.hero__floater--8 .hero__floater-inner { animation-duration: 10s;   animation-delay: -7.2s; animation-direction: reverse; }

@keyframes hero-floater-wobble {
    0%   { transform: translate(0, 0) rotate(0deg); }
    18%  { transform: translate(-7px, 8px) rotate(4deg); }
    38%  { transform: translate(8px, 3px) rotate(-3deg); }
    56%  { transform: translate(4px, -10px) rotate(2deg); }
    75%  { transform: translate(-9px, -4px) rotate(-4deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@media (max-width: 1100px) {
    .hero__floaters { display: none; }
}

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

.hero__intro-meta {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--sp-sm);
    margin-bottom: var(--sp-sm);
}

.hero__intro-title {
    font-family: var(--f-body);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(2.1rem, 5vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ink);
}

.hero__intro-sub {
    max-width: 56ch;
    margin: var(--sp-sm) auto 0;
    color: var(--mist);
    font-size: clamp(var(--t-md), 1.2vw, var(--t-lg));
    line-height: 1.6;
}

.hero__intro-actions {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-md);
}

.hero__intro-skills {
    margin-top: var(--sp-lg);
    padding-top: var(--sp-sm);
    border-top: 1px solid rgba(21,18,13,.14);
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mist);
}

/* ------------------------------------------------------------------ *
   Reel — brief cinematic beat between the hero and the rest of the page.
   Deliberately no copy: the showreel is the entire point of this section.
------------------------------------------------------------------ */
.reel-band {
    width: calc(100% - var(--edge));
    max-width: var(--shell-max);
    margin: clamp(2rem, 5vw, var(--sp-xl)) auto;
}

.reel-band .hero__media-frame { margin-top: 0; }

.hero__media-frame {
    position: relative;
    width: 100%;
    margin: clamp(1.5rem, 4vw, var(--sp-lg)) auto 0;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--ink);
}

.hero__media-frame video { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero__media-frame video { transform: scale(1.02); animation: hero-breathe 18s ease-in-out infinite alternate; }
@keyframes hero-breathe { to { transform: scale(1.06); } }

.hero__tick {
    position: absolute;
    z-index: 2;
    width: 20px;
    height: 20px;
    border: 2px solid var(--ember);
    pointer-events: none;
}
.hero__tick--tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.hero__tick--tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.hero__tick--bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.hero__tick--br { bottom: -2px; right: -2px; border-left: none; border-top: none; }

.hero__media-tag {
    position: absolute;
    z-index: 2;
    font-family: var(--f-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.hero__media-tag--tl { top: 18px; left: 22px; }
.hero__media-tag--br { bottom: 18px; right: 22px; }

@media (max-width: 860px) {
    .hero__meta-row { flex-direction: column; align-items: flex-start; gap: .4rem; }
    .hero__media-frame { aspect-ratio: 4/5; max-height: 60vh; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__media-frame video { animation: none; transform: none; }
}

/* ============================================================
   ABOUT / SPLIT
============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); align-items: center; }
.split--rev > *:first-child { order: 2; }
.split--rev > *:last-child  { order: 1; }

.split__media { position: relative; aspect-ratio: 4/5; }
.split__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    transform: translate(-18px, 18px);
    background: var(--ember);
    opacity: .18;
    border-radius: var(--r-lg);
}
.split__media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); }

.split__title { margin-block: var(--sp-sm); }
.split__body { color: var(--mist); line-height: 1.8; margin-bottom: var(--sp-md); max-width: 46ch; }

@media (max-width: 860px) {
    .split { grid-template-columns: 1fr; row-gap: var(--sp-md); }
    .split--rev > * { order: unset; }
}

/* ============================================================
   SERVICES
============================================================ */
.svc-header { margin-bottom: var(--sp-lg); max-width: 60ch; }
.svc-header__title { margin-top: .5rem; }

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(21,18,13,.08); border-radius: var(--r-lg); overflow: hidden; }

.svc-tile {
    position: relative;
    overflow: hidden;
    display: block;
    background: var(--paper);
    padding: var(--sp-md);
}

.svc-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: translateY(104%);
    transition: transform .5s cubic-bezier(.16,1,.3,1);
    z-index: 0;
}
.svc-tile--link:hover::before { transform: translateY(0); }

.svc-tile__num { position: relative; z-index: 1; display: block; font-size: var(--t-xs); font-weight: var(--w-bold); letter-spacing: .1em; color: var(--ember); margin-bottom: var(--sp-sm); transition: color var(--ease); }

.svc-tile__title { position: relative; z-index: 1; font-size: var(--t-lg); margin-bottom: var(--sp-2xs); transition: color var(--ease); }
.svc-tile--link:hover .svc-tile__title { color: var(--cream); }

.svc-tile__desc { position: relative; z-index: 1; color: var(--mist); font-size: var(--t-sm); line-height: 1.6; margin-bottom: var(--sp-sm); transition: color var(--ease); }
.svc-tile--link:hover .svc-tile__desc { color: rgba(255,255,255,.62); }

.svc-tile__list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .4rem; }
.svc-tile__list li { position: relative; padding-left: .95rem; font-size: var(--t-sm); color: var(--mist); transition: color var(--ease); }
.svc-tile__list li::before { content: "—"; position: absolute; left: 0; color: var(--ember); font-size: var(--t-xs); }
.svc-tile--link:hover .svc-tile__list li { color: rgba(255,255,255,.6); }

.svc-tile__more {
    position: relative; z-index: 1;
    display: inline-block;
    margin-top: var(--sp-sm);
    font-size: var(--t-sm);
    color: var(--ember);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--ease), transform var(--ease);
}
.svc-tile--link:hover .svc-tile__more { opacity: 1; transform: translateX(0); }

@media (max-width: 920px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .svc-grid { grid-template-columns: 1fr; } }

/* ============================================================
   STAT STRIP
============================================================ */
.stat-band { background: var(--panel); }

.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(21,18,13,.12);
    border-bottom: 1px solid rgba(21,18,13,.12);
}

.stat-item { position: relative; padding: var(--sp-md) var(--sp-md) var(--sp-md) 0; transition: transform var(--ease); }
.stat-item + .stat-item { padding-left: var(--sp-md); border-left: 1px solid rgba(21,18,13,.12); }
.stat-item:hover { transform: translateY(-4px); }

.stat-item__index { display: block; font-size: var(--t-xs); font-weight: var(--w-bold); letter-spacing: .1em; color: var(--mist-2); margin-bottom: var(--sp-sm); }
.stat-item__num { font-family: var(--f-display); font-size: clamp(var(--t-2xl), 4vw, var(--t-4xl)); font-weight: var(--w-black); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ember); line-height: 1; transition: color var(--ease); }
.stat-item:hover .stat-item__num { color: var(--ember-deep); }
.stat-item__label { font-size: var(--t-sm); color: var(--mist); margin-top: .5rem; max-width: 20ch; }

@media (max-width: 760px) {
    .stat-strip { grid-template-columns: 1fr 1fr; }
    .stat-item:nth-child(2n) { padding-left: var(--sp-md); border-left: 1px solid rgba(21,18,13,.12); }
    .stat-item:nth-child(n+3) { padding-top: var(--sp-md); border-top: 1px solid rgba(21,18,13,.12); }
    .stat-item:nth-child(3) { border-left: none; padding-left: 0; }
}

/* ============================================================
   PROOF / CLIENTS
============================================================ */
.proof { overflow: hidden; }
.proof__head { display: grid; grid-template-columns: minmax(200px,.35fr) minmax(0,1fr); gap: var(--sp-md); align-items: start; margin-bottom: var(--sp-lg); }
.proof__title { max-width: 15ch; }

.marquee { position: relative; overflow: hidden; padding-block: var(--sp-md); border-block: 1px solid rgba(21,18,13,.12); }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: min(12vw, 160px); pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(to right, var(--paper), transparent); }
.marquee::after  { right: 0; background: linear-gradient(to left, var(--paper), transparent); }

.marquee__track { display: flex; width: max-content; animation: marquee-scroll 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee--static .marquee__track { width: auto; justify-content: center; padding-inline: var(--wrap-pad); animation: none; }
.marquee--static .marquee__group { flex-wrap: wrap; justify-content: center; padding-right: 0; }

.marquee__group { display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 6rem); padding-right: clamp(2.5rem, 6vw, 6rem); }
.marquee__item { flex: 0 0 auto; font-size: clamp(1.3rem, 2.6vw, 2.2rem); font-weight: var(--w-bold); letter-spacing: -.02em; opacity: .42; white-space: nowrap; transition: opacity var(--ease), color var(--ease); }
.marquee__item:hover { opacity: 1; color: var(--ember-deep); }

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

.proof__feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,.4fr); gap: var(--sp-md); margin-top: var(--sp-lg); align-items: stretch; }

.proof__quote { background: var(--cream); border-radius: var(--r-lg); padding: clamp(var(--sp-md), 5vw, var(--sp-lg)); position: relative; }
.proof__quote::before { content: "“"; font-family: var(--f-display); font-size: 5rem; color: var(--ember-glow); position: absolute; top: .5rem; left: 1.5rem; line-height: 1; }
.proof__quote blockquote { position: relative; max-width: 30ch; font-size: clamp(var(--t-xl), 3vw, var(--t-2xl)); font-weight: var(--w-medium); line-height: 1.3; letter-spacing: -.01em; }
.proof__quote figcaption { display: flex; flex-direction: column; gap: .2rem; margin-top: var(--sp-md); }
.proof__quote figcaption strong { font-size: var(--t-sm); }
.proof__quote figcaption span { color: var(--mist); font-size: var(--t-xs); }

.proof__metric { display: flex; flex-direction: column; justify-content: flex-end; padding: var(--sp-md); background: var(--ember); color: var(--cream); border-radius: var(--r-lg); }
.proof__metric strong { font-family: var(--f-display); font-size: clamp(var(--t-3xl), 6vw, var(--t-5xl)); line-height: .88; letter-spacing: -.04em; }
.proof__metric span { display: block; max-width: 18ch; margin-top: var(--sp-sm); font-size: var(--t-sm); font-weight: var(--w-medium); }

@media (max-width: 860px) {
    .proof__head, .proof__feature { grid-template-columns: 1fr; }
    .proof__metric { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; flex-wrap: wrap; width: auto; padding-inline: var(--wrap-pad); }
    .marquee__group[aria-hidden="true"] { display: none; }
}

/* ============================================================
   WORKS — HORIZONTAL SCROLL PLATE
============================================================ */
.works-plate {
    height: min(calc(100vh - 2 * var(--sp-md)), 780px);
    height: min(calc(100dvh - 2 * var(--sp-md)), 780px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-md);
}

.works-plate__head { padding: 0 var(--wrap-pad); flex-shrink: 0; }
.works-plate__title { color: var(--cream); margin-top: .5rem; }

.works-track { display: flex; gap: var(--sp-md); padding-inline: var(--wrap-pad); will-change: transform; flex-shrink: 0; }

.work-card { flex-shrink: 0; width: min(74vw, 620px); height: 62vh; max-height: 560px; border-radius: var(--r-lg); overflow: hidden; position: relative; background: #0e0c09; }
.work-card__link { position: absolute; inset: 0; display: block; }
.work-card__media { position: absolute; inset: 0; }
.work-card__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); transition: transform .6s ease, filter .6s ease; }
.work-card:hover .work-card__media img { transform: scale(1.06); filter: brightness(.4); }

.work-card__info { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.5rem, 3vw, var(--sp-md)); background: linear-gradient(to top, rgba(14,12,9,.95) 0%, rgba(14,12,9,.5) 55%, transparent 100%); }

.work-card__pill { align-self: flex-start; padding: .3rem .8rem; border-radius: var(--r-pill); background: rgba(255,255,255,.12); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--cream); margin-bottom: var(--sp-sm); }
.work-card__title { max-width: 20ch; font-size: clamp(var(--t-xl), 2.8vw, var(--t-2xl)); color: var(--cream); line-height: 1.08; margin-bottom: var(--sp-2xs); }
.work-card__meta { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-sm); }
.work-card__client { color: rgba(255,255,255,.5); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; margin-bottom: .2rem; }
.work-card__result { color: var(--cream); font-size: var(--t-sm); font-weight: var(--w-medium); }
.work-card__cta { flex: 0 0 auto; color: rgba(255,255,255,.7); font-size: var(--t-sm); opacity: 0; transform: translateX(-8px); transition: opacity var(--ease), transform var(--ease), color var(--ease); }
.work-card:hover .work-card__cta { opacity: 1; transform: translateX(0); color: var(--ember); }

.works-progress { margin-inline: var(--wrap-pad); height: 1px; background: rgba(255,255,255,.15); flex-shrink: 0; }
.works-progress__bar { height: 100%; background: var(--ember); transform-origin: left; transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
    .works-plate { height: auto; padding-block: var(--sp-lg); }
    .works-track { overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--sp-sm); -webkit-overflow-scrolling: touch; }
    .work-card { scroll-snap-align: start; }
    .works-progress { display: none; }
}
@media (max-width: 760px) {
    .work-card { width: 84vw; height: 52vh; }
    .work-card__cta { display: none; }
}

/* ============================================================
   TEAM STORY PLATE
============================================================ */
.team-plate { padding: clamp(var(--sp-lg), 6vw, var(--sp-xl)) var(--wrap-pad); margin-top: var(--sp-lg); }

.team-plate::before {
    content: "";
    position: absolute;
    width: min(40vw, 600px);
    aspect-ratio: 1;
    right: -14%;
    bottom: -50%;
    border: 1px solid rgba(182,144,100,.25);
    box-shadow: 0 0 0 70px rgba(182,144,100,.05);
    pointer-events: none;
}

.team-plate__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(var(--sp-lg), 5vw, var(--sp-xl)); }
.team-plate__copy { max-width: 640px; }
.team-plate__title { margin-bottom: var(--sp-md); }
.team-plate__body { max-width: 56ch; color: rgba(255,255,255,.68); font-size: clamp(var(--t-md), 1.4vw, var(--t-lg)); line-height: 1.8; }

.team-collage { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(10, 48px); gap: var(--sp-sm); }
.team-photo { overflow: hidden; border-radius: var(--r-md); background: #201a12; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.team-photo:hover img { transform: scale(1.035); }
.team-photo--1 { grid-column: 1/5; grid-row: 1/11; }
.team-photo--2 { grid-column: 5/9; grid-row: 6/11; }
.team-photo--3 { grid-column: 5/13; grid-row: 1/6; }
.team-photo--4 { grid-column: 9/13; grid-row: 6/11; }

@media (max-width: 1000px) { .team-collage { grid-template-rows: repeat(10, 32px); } }
@media (max-width: 620px) {
    .team-collage { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 190px; gap: .7rem; }
    .team-photo--1, .team-photo--2, .team-photo--3, .team-photo--4 { grid-column: auto; grid-row: auto; }
}

/* ============================================================
   CTA PLATE
============================================================ */
.cta-plate { padding: clamp(var(--sp-lg), 10vw, var(--sp-2xl)) var(--wrap-pad); margin-block: var(--sp-xl) var(--sp-lg); }

.cta-plate__aurora {
    position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 0%, var(--ember-glow) 0%, rgba(182,144,100,.06) 42%, transparent 72%);
    pointer-events: none;
}

.cta-plate__grain {
    position: absolute; inset: 0; z-index: 0;
    opacity: .05; mix-blend-mode: overlay; pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.cta-plate__ring { position: absolute; z-index: 0; border: 1px solid rgba(182,144,100,.18); pointer-events: none; }
.cta-plate__ring--a { width: min(56vw, 780px); aspect-ratio: 1; left: 50%; top: -10%; transform: translateX(-50%); animation: plate-spin 60s linear infinite; }
.cta-plate__ring--b { width: min(38vw, 540px); aspect-ratio: 1; left: 50%; top: 6%; transform: translateX(-50%); border-style: dashed; opacity: .6; animation: plate-spin 44s linear infinite reverse; }
@keyframes plate-spin { to { transform: translateX(-50%) rotate(360deg); } }

.cta-plate__inner { position: relative; z-index: 1; max-width: 780px; margin-inline: auto; text-align: center; }
.cta-plate__kicker { justify-content: center; margin-bottom: var(--sp-sm); }
.cta-plate__title { color: var(--cream); font-size: clamp(var(--t-3xl), 6vw, var(--t-5xl)); letter-spacing: -.02em; line-height: 1.06; margin-bottom: var(--sp-lg); }
.cta-plate__actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--sp-md); }
.cta-plate__email { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.7); font-weight: var(--w-medium); transition: color var(--ease); }
.cta-plate__email:hover { color: var(--ember); }
.cta-plate__email span { transition: transform var(--ease); }
.cta-plate__email:hover span { transform: translate(2px,-2px); }

@media (max-width: 760px) {
    .cta-plate { padding-block: var(--sp-lg); }
    .cta-plate__actions { flex-direction: column; gap: var(--sp-sm); }
}

/* ============================================================
   FORMS
============================================================ */
.field { margin-bottom: var(--sp-sm); }
.field label { display: block; font-size: var(--t-xs); font-weight: var(--w-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--mist); margin-bottom: .4rem; }
.field input, .field textarea, .field select {
    width: 100%;
    background: var(--cream);
    border: 1.5px solid rgba(21,18,13,.14);
    border-radius: var(--r-sm);
    padding: .85rem 1rem;
    font-size: var(--t-md);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-glow); }
.field textarea { resize: vertical; min-height: 130px; }
.field--honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-notice { border-radius: var(--r-sm); padding: .9rem 1.1rem; font-size: var(--t-sm); margin-bottom: var(--sp-sm); }
.form-notice--ok  { background: rgba(88,140,90,.14); color: #2f5c33; }
.form-notice--err { background: rgba(182,144,100,.14); color: var(--ember-deep); }


/* ============================================================
   SERVICE / PROJECT SINGLE
============================================================ */
.crumbs { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: var(--t-xs); color: var(--mist); margin-bottom: var(--sp-md); }
.crumbs a { transition: color var(--ease); }
.crumbs a:hover { color: var(--ember); }

.svc-hero__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-lg); flex-wrap: wrap; }
.svc-hero__sub { font-size: var(--t-lg); color: var(--mist); max-width: 48ch; margin-top: var(--sp-sm); line-height: 1.6; }

.prose { max-width: 72ch; }
.prose p { margin-bottom: 1.2em; color: var(--mist); line-height: 1.8; }
.prose h2, .prose h3 { margin-top: 1.8em; margin-bottom: .6em; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.4em; margin-bottom: 1.2em; color: var(--mist); }
.prose li { margin-bottom: .4em; }
.prose strong { color: var(--ink); font-weight: var(--w-bold); }

@media (max-width: 760px) {
    .svc-hero__inner { flex-direction: column; }
}

.proj-hero { padding-bottom: var(--sp-md); background: var(--ink); color: var(--cream); }
.proj-hero .crumbs, .proj-hero .crumbs a { color: rgba(255,255,255,.5); }
.proj-hero .crumbs a:hover { color: var(--ember); }
.proj-hero__heading { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: var(--sp-lg); align-items: end; }
.proj-hero__title { max-width: 13ch; margin-top: var(--sp-sm); color: var(--cream); }
.proj-hero__intro { max-width: 42ch; color: rgba(255,255,255,.65); font-size: clamp(var(--t-md), 1.8vw, var(--t-xl)); line-height: 1.6; }

.proj-facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-md); margin-top: var(--sp-lg); padding-top: var(--sp-md); border-top: 1px solid rgba(255,255,255,.16); }
.proj-facts dt { margin-bottom: .4rem; color: rgba(255,255,255,.42); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; }
.proj-facts dd { color: var(--cream); font-weight: var(--w-medium); }
.proj-facts__result dd { color: var(--ember); }

.proj-cover { width: calc(100% - var(--edge)); max-width: var(--shell-max); height: min(72vw, 820px); margin: calc(var(--sp-md) * -1) auto 0; overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--shadow-deep); }
.proj-cover img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 760px) {
    .proj-hero__heading { grid-template-columns: 1fr; }
    .proj-facts { grid-template-columns: 1fr 1fr; }
    .proj-cover { width: 100%; height: 60vh; min-height: 400px; border-radius: 0 0 var(--r-xl) var(--r-xl); }
}

/* ============================================================
   ARCHIVE / GENERIC LOOP
============================================================ */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-sm); }
.post-card { border-radius: var(--r-md); overflow: hidden; background: var(--cream); border: 1px solid rgba(21,18,13,.08); transition: transform var(--ease), box-shadow var(--ease); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.post-card__media { aspect-ratio: 4/3; background: var(--panel); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: var(--sp-sm); }
.post-card__date { font-size: var(--t-xs); color: var(--mist-2); text-transform: uppercase; letter-spacing: .06em; }
.post-card__title { font-size: var(--t-lg); margin-top: .3rem; }
.post-card__excerpt { color: var(--mist); font-size: var(--t-sm); margin-top: .5rem; line-height: 1.6; }

@media (max-width: 920px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .post-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SCROLL REVEAL
============================================================ */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .btn__arrow { animation: none; }
    .hero__title[data-reveal] { clip-path: none; transition: none; }
    .menu-primary.is-open a { animation: none; opacity: 1; }
    .scroll-trace { display: none; }
}

/* ============================================================
   SCROLL TRACE (full-page section connector)
============================================================ */
.scroll-trace {
    position: fixed;
    z-index: 40;
    left: 22px;
    top: 0;
    bottom: 0;
    width: 3px;
    pointer-events: none;
}

.scroll-trace__track { position: absolute; inset: 0; background: rgba(182,144,100,.18); }

.scroll-trace__fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    background: var(--ember);
    transform-origin: top;
}

.scroll-trace__node {
    position: absolute;
    left: 50%;
    display: flex;
    align-items: center;
    gap: .55rem;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    text-decoration: none;
}

.scroll-trace__tick {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    background: var(--paper);
    border: 2px solid var(--ink);
    transition: background var(--ease), border-color var(--ease), transform var(--ease);
}

.scroll-trace__label {
    font-family: var(--f-mono);
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mist);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .3s ease, transform .3s ease, color .3s ease;
}

.scroll-trace__node:hover .scroll-trace__label,
.scroll-trace__node.is-active .scroll-trace__label { opacity: 1; transform: translateX(0); }

.scroll-trace__node.is-active .scroll-trace__tick { background: var(--ember); border-color: var(--ember); transform: scale(1.3); }

@media (max-width: 1000px) { .scroll-trace { display: none; } }

/* ============================================================
   SECTION RAIL (blueprint boundary markers, repeated per section)
============================================================ */
.section-rail {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.section-rail__v {
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--rail-right, var(--wrap-pad));
    width: 1px;
    background: var(--ink-soft);
    opacity: .15;
}

.section-rail__h { position: absolute; left: 0; width: 100%; height: 1px; background: var(--ink-soft); opacity: .15; }
.section-rail__h--top    { top: 0; }
.section-rail__h--bottom { bottom: 0; }

.section-rail__tick {
    /* Sits fully inside the section (never straddles the edge) so it
       survives ancestors with overflow:hidden — its outer corner still
       lands exactly on the line crossing. */
    position: absolute;
    right: var(--rail-right, var(--wrap-pad));
    width: 16px;
    height: 16px;
    border: 2px solid var(--ember);
}
.section-rail__tick--top    { top: 0;    border-left: none; border-bottom: none; }
.section-rail__tick--bottom { bottom: 0; border-left: none; border-top: none; }

.section-rail--dark .section-rail__v,
.section-rail--dark .section-rail__h { background: var(--cream); opacity: .12; }

/* Every rail draws inside the same shell box, so the vertical line reads as
   one continuous run down the page. .hero and .plate already are that box, so
   their rail gets it from inset:0. Bands are full-bleed, so theirs needs the
   box applied explicitly — without it the rail follows the viewport and steps
   outward at every band. (The previous approach nudged the hero rail inward to
   meet a viewport-anchored band rail instead; that only held below the
   --shell-max cap, past which the two drifted apart by half the extra gutter.) */
.band > .section-rail {
    width: calc(100% - var(--edge));
    max-width: var(--shell-max);
    margin-inline: auto;
}

@media (max-width: 640px) {
    .section-rail__v, .section-rail__tick { display: none; }
}

/* ============================================================
   ACCESSIBILITY
============================================================ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    background: var(--ink);
    color: var(--cream);
    padding: .8rem 1.4rem;
    border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }