/* components.css — nav, buttons, cards (reps/svc/value/state/acard/step),
   pull, band, form, footer, reveal utility. Component states per uiux.md §5. */

/* nav */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(24, 2, 40, .82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line)
}

.nav .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--s2)
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px
}

.brand img {
    height: 26px;
    width: auto
}

.brand .wordmark {
    font-family: var(--fd);
    font-size: 1.32rem;
    letter-spacing: -.02em;
    color: var(--pearl)
}

.navlinks {
    display: flex;
    align-items: center;
    gap: var(--s5);
    list-style: none
}

.navlinks a {
    font-size: .92rem;
    color: var(--ash);
    transition: color .3s var(--ease);
    position: relative
}

.navlinks a:hover,
.navlinks a[aria-current="page"] {
    color: var(--pearl)
}

/* champagne underline that wipes in L→R on hover; the current page stays drawn */
.navlinks a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1px;
    background: var(--champagne);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease)
}

.navlinks a:hover::after,
.navlinks a[aria-current="page"]::after {
    transform: scaleX(1)
}

.navcta {
    display: inline-flex
}

.burger {
    display: none;
    background: none;
    border: 0;
    color: var(--pearl);
    cursor: pointer;
    padding: 8px
}

.burger svg {
    width: 26px;
    height: 26px
}

/* buttons — the foil system (pressed champagne metal + sheen sweep + magnetic via main.js) */
.btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fb);
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .03em;
    padding: 14px 26px;
    border-radius: var(--r);
    color: var(--void);
    border: 0;
    background: linear-gradient(145deg, #E8D4A8, #DCC49B 40%, #C9AE82);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(0, 0, 0, .15) inset, 0 12px 28px -12px rgba(220, 196, 155, .5);
    cursor: pointer;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease)
}

/* the sheen — a light bar that sweeps across on hover (foil buttons only) */
.btn:not(.btn--ghost)::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform: translateX(-120%);
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    transition: transform .7s var(--ease)
}

.btn:not(.btn--ghost):hover::after {
    transform: translateX(120%)
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 -1px 0 rgba(0, 0, 0, .18) inset, 0 16px 34px -12px rgba(220, 196, 155, .6)
}

.btn:active {
    transform: translateY(0) scale(.985)
}

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

.btn[disabled],
.btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none
}

.btn[disabled]:hover {
    transform: none;
    box-shadow: none
}

.btn[disabled]::after {
    display: none
}

.btn .arw {
    position: relative;
    z-index: 1;
    transition: transform .3s var(--ease)
}

.btn:hover .arw {
    transform: translateX(4px)
}

.btn--ghost {
    background: transparent;
    color: var(--champagne);
    border: 1px solid var(--line);
    box-shadow: none
}

.btn--ghost:hover {
    background: rgba(220, 196, 155, .08);
    color: var(--champagne-2);
    box-shadow: none;
    transform: translateY(-2px)
}

.section--cream .btn--ghost {
    color: var(--bronze);
    border-color: var(--line-ink)
}

/* two-col before/after */
.cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
    margin-top: var(--s6)
}

.state {
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--s5);
    background: rgba(255, 255, 255, .015)
}

.state h3 {
    font-size: 1.4rem;
    margin-bottom: var(--s2)
}

.state.before {
    opacity: .74
}

.state.before .tag {
    color: var(--ash)
}

.state.after {
    border-color: var(--line);
    background: linear-gradient(180deg, rgba(220, 196, 155, .06), transparent)
}

.state.after .tag {
    color: var(--champagne)
}

.tag {
    font-family: var(--fb);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: .68rem;
    font-weight: 600;
    display: block;
    margin-bottom: var(--s2)
}

.state ul {
    list-style: none;
    margin-top: var(--s3)
}

.state li {
    padding: 10px 0;
    border-top: 1px solid var(--line);
    color: var(--ash);
    font-size: .98rem
}

.state.after li {
    color: var(--pearl)
}

/* REPS */
.reps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s3);
    margin-top: var(--s6)
}

.rep {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--s4);
    background: rgba(255, 255, 255, .015);
    transition: transform .4s var(--ease), border-color .4s var(--ease)
}

.rep:hover {
    transform: translateY(-4px);
    border-color: rgba(220, 196, 155, .4)
}

.rep .glyph {
    font-family: var(--fd);
    font-size: 2.6rem;
    color: var(--champagne);
    line-height: 1;
    margin-bottom: var(--s2)
}

.rep h3 {
    font-size: 1.18rem;
    margin-bottom: var(--s1)
}

.rep p {
    color: var(--ash);
    font-size: .94rem;
    line-height: 1.55
}

/* sameness signature */
.signature {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: var(--s6);
    align-items: center;
    margin-top: var(--s5)
}

.grid-same {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px
}

.acard {
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 18px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 118px
}

.acard .av {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ash)
}

.acard .ln {
    height: 7px;
    border-radius: 4px;
    background: var(--ash)
}

.acard .ln.s {
    width: 62%
}

.acard.dim {
    opacity: .34;
    filter: blur(1.4px) saturate(.4);
    transition: opacity .9s var(--ease), filter .9s var(--ease)
}

.acard.obvious {
    opacity: 1;
    filter: none;
    background: var(--surface-2);
    border-color: rgba(220, 196, 155, .55);
    transform: scale(1.04);
    position: relative;
    z-index: 2;
    box-shadow: 0 22px 50px -22px rgba(220, 196, 155, .55);
    transition: transform .9s var(--ease), box-shadow .9s var(--ease)
}

.acard.obvious .av {
    background: var(--champagne)
}

.acard.obvious .ln {
    background: var(--pearl)
}

.acard.obvious .badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--champagne);
    color: var(--void);
    font-family: var(--fb);
    font-weight: 600;
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 2px
}

.acard.obvious .arw {
    position: absolute;
    bottom: 14px;
    right: 14px;
    color: var(--champagne)
}

.in .grid-same .acard.dim {
    opacity: .22;
    filter: blur(2px) saturate(.3)
}

@media (prefers-reduced-motion:reduce) {
    .acard.dim {
        opacity: .3;
        filter: blur(1px) saturate(.4)
    }

    .acard.obvious {
        transform: none
    }

    .in .grid-same .acard.dim {
        opacity: .3
    }
}

/* steps */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
    margin-top: var(--s6)
}

.step {
    padding-top: var(--s3);
    border-top: 1px solid var(--line-ink)
}

.section--cream .step {
    border-top-color: var(--line-ink)
}

.step .num {
    font-family: var(--fd);
    font-size: 1rem;
    color: var(--bronze);
    letter-spacing: .1em;
    display: block;
    margin-bottom: var(--s2)
}

.step h3 {
    font-size: 1.32rem;
    margin-bottom: var(--s1)
}

.step p {
    color: #4a3a55;
    font-size: .96rem
}

/* services list */
.svc {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s3);
    margin-top: var(--s6)
}

.svc-item {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--s5);
    background: rgba(255, 255, 255, .015);
    transition: border-color .4s var(--ease), transform .4s var(--ease)
}

.svc-item:hover {
    border-color: rgba(220, 196, 155, .4);
    transform: translateY(-4px)
}

/* card tactile hover — top hairline draws in L→R + a faint inner sheen (no glow) */
.rep::before,
.svc-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--champagne);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease)
}

.rep::after,
.svc-item::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(180deg, rgba(220, 196, 155, .06), transparent 60%);
    transition: opacity .5s var(--ease)
}

.rep:hover::before,
.svc-item:hover::before {
    transform: scaleX(1)
}

.rep:hover::after,
.svc-item:hover::after {
    opacity: 1
}

.svc-item h3 {
    font-size: 1.5rem;
    margin-bottom: var(--s2)
}

.svc-item p {
    color: var(--ash);
    font-size: .98rem
}

.svc-item .idx {
    font-family: var(--fd);
    color: var(--champagne);
    font-size: .95rem;
    letter-spacing: .08em;
    display: block;
    margin-bottom: var(--s3)
}

/* values */
.values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
    margin-top: var(--s6)
}

.value h3 {
    font-size: 1.22rem;
    margin-bottom: var(--s1)
}

.value p {
    color: var(--ash);
    font-size: .95rem
}

.value .vbar {
    width: 34px;
    height: 2px;
    background: var(--champagne);
    margin-bottom: var(--s3)
}

/* pull statement */
.pull {
    font-family: var(--fd);
    font-weight: 340;
    font-size: clamp(1.6rem, 3.8vw, 2.7rem);
    line-height: 1.22;
    max-width: 20ch;
    margin-block: var(--s4)
}

.pull .hl {
    color: var(--champagne);
    font-style: italic
}

/* CTA band */
.band {
    text-align: center
}

.band .wrap {
    max-width: 760px
}

.band h2 {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 340;
    margin-bottom: var(--s4)
}

/* form */
.contact-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: var(--s7);
    margin-top: var(--s6);
    align-items: start
}

.field {
    margin-bottom: var(--s4)
}

.field label {
    display: block;
    font-family: var(--fb);
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ash);
    margin-bottom: 10px
}

.field input,
.field textarea {
    width: 100%;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--pearl);
    font-family: var(--fb);
    font-size: 1rem;
    padding: 14px 16px;
    transition: border-color .3s var(--ease), background .3s var(--ease)
}

.field input::placeholder,
.field textarea::placeholder {
    color: rgba(157, 144, 180, .55)
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--champagne);
    background: rgba(255, 255, 255, .05)
}

.field textarea {
    min-height: 128px;
    resize: vertical
}

.form-note {
    color: var(--ash);
    font-size: .86rem;
    margin-top: var(--s2)
}

.success {
    display: none;
    border: 1px solid rgba(220, 196, 155, .5);
    background: rgba(220, 196, 155, .07);
    border-radius: var(--r);
    padding: var(--s5)
}

.success.show {
    display: block;
    animation: fade .6s var(--ease)
}

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.success h3 {
    font-size: 1.5rem;
    color: var(--champagne);
    margin-bottom: var(--s2)
}

.contact-aside .line {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--s3) 0;
    border-top: 1px solid var(--line)
}

.contact-aside .line span {
    color: var(--ash);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .16em
}

.contact-aside .line a,
.contact-aside .line b {
    font-family: var(--fd);
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--pearl)
}

/* footer */
.foot {
    border-top: 1px solid var(--line);
    padding-block: var(--s6) var(--s5)
}

.foot .top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s5);
    flex-wrap: wrap
}

.foot .brand img {
    height: 24px
}

.foot .studio {
    color: var(--ash);
    font-size: .9rem;
    margin-top: var(--s2);
    max-width: 34ch
}

.foot nav {
    display: flex;
    align-items: flex-start;
    gap: var(--s4);
    flex-wrap: wrap
}

.foot nav a {
    position: relative;
    display: inline-block;
    line-height: 1.25;
    color: var(--ash);
    font-size: .9rem;
    transition: color .3s
}

.foot nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--champagne);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease)
}

.foot nav a:hover {
    color: var(--pearl)
}

.foot nav a:hover::after {
    transform: scaleX(1)
}

.foot .bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--s3);
    flex-wrap: wrap;
    margin-top: var(--s6);
    padding-top: var(--s4);
    border-top: 1px solid var(--line);
    color: var(--ash);
    font-size: .8rem
}

.foot .bottom a {
    color: var(--champagne)
}

/* reveal — visible by default; only hidden when JS is on, so no-JS never blanks
   content. GSAP drives the reveal (main.js); no CSS transition here. */
.reveal {
    opacity: 1;
    transform: none
}

html.js .reveal {
    opacity: 0;
    transform: translateY(20px)
}

/* Headings are MASK-UP: revealed by clipped per-line spans, so the container
   itself must not be transform-shifted (only pre-hidden via opacity). */
html.js h1.reveal,
html.js h2.reveal {
    transform: none
}

/* MASK-UP line clip (SplitType lines get wrapped in .line-mask by main.js).
   The padding/negative-margin pair gives descenders room without adding space. */
.line-mask {
    display: block;
    overflow: hidden;
    padding-bottom: .12em;
    margin-bottom: -.12em
}

.line-mask .line {
    display: block
}

@media (prefers-reduced-motion:reduce) {

    html.js .reveal,
    html.js h1.reveal,
    html.js h2.reveal {
        opacity: 1;
        transform: none
    }

    html {
        scroll-behavior: auto
    }

    /* tactile language: no sheen sweep, no lifts, instant (non-animated) accents */
    .btn:not(.btn--ghost)::after {
        display: none
    }

    .btn:hover,
    .btn--ghost:hover,
    .rep:hover,
    .svc-item:hover {
        transform: none
    }

    .rep::before,
    .svc-item::before,
    .rep::after,
    .svc-item::after,
    .navlinks a::after,
    .foot nav a::after {
        transition: none
    }
}

/* ───────── Phase 4 — atmosphere ───────── */

/* film grain — dark surfaces only (never on cream). isolation + z-index:-1 keep
   it behind content, contained within each section. (trd §3, blueprint §2) */
.hero,
.section:not(.section--cream),
.foot {
    position: relative;
    isolation: isolate
}

.hero::after,
.section:not(.section--cream)::after,
.foot::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .045;
    background-image: url("../assets/grain.svg");
    background-size: 160px 160px
}

/* cursor spotlight — a faint champagne glow that follows the pointer across any
   dark surface and lights the grain. Augments the real cursor, never replaces it.
   main.js enables .spot only on fine pointers (and not under reduced-motion).
   z-index:-1 keeps the glow behind content (text stays fully readable). */
.hero::before,
.section:not(.section--cream)::before,
.foot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s var(--ease);
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 30%), rgba(220, 196, 155, .10), transparent 60%)
}

.hero.spot::before,
.section.spot::before,
.foot.spot::before {
    opacity: 1
}

/* ───────── Phase 6 — chapter index (home, fixed right edge) ───────── */
.chapter-index {
    position: fixed;
    right: clamp(16px, 2.4vw, 34px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    pointer-events: none
}

.chapter-index ol {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px
}

.chapter-index a {
    pointer-events: auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--ash);
    transition: color .35s var(--ease)
}

.chapter-index .ci-num {
    font-family: var(--fd);
    font-size: .82rem;
    letter-spacing: .06em
}

/* label floats to the left of the number (absolute → no layout shift),
   revealed on hover only so passive scrolling never extends into content */
.chapter-index .ci-label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    white-space: nowrap;
    font-family: var(--fb);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .62rem;
    opacity: 0;
    transform: translateY(-50%) translateX(8px);
    transition: opacity .35s var(--ease), transform .35s var(--ease)
}

.chapter-index a:hover {
    color: var(--pearl)
}

.chapter-index a:hover .ci-label {
    opacity: .85;
    transform: translateY(-50%)
}

.chapter-index .active a {
    color: var(--champagne)
}

.chapter-index .active a .ci-label {
    opacity: 1;
    transform: translateY(-50%)
}

/* over cream sections the light tones go illegible — flip to dark/bronze */
.chapter-index.on-light a {
    color: rgba(27, 10, 43, .5)
}

.chapter-index.on-light a:hover {
    color: var(--ink)
}

.chapter-index.on-light .active a {
    color: var(--bronze)
}

@media (max-width: 980px) {
    .chapter-index {
        display: none
    }
}

/* ───────── Phase 7 — loader overlay + SR announce ───────── */
/* Gated on html.js so no-JS never sees a covering overlay. */
.loader {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: none;
    place-items: center;
    background: var(--void);
    will-change: clip-path
}

html.js .loader {
    display: grid
}

.loader-mark {
    width: clamp(84px, 13vw, 124px);
    height: auto
}

.lm-fill {
    opacity: 0
}

.lm-draw {
    opacity: 0
}

/* reduced motion → instant cut: never show the overlay at all */
@media (prefers-reduced-motion: reduce) {
    html.js .loader {
        display: none
    }
}

.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
}

/* ───────── Phase 8 — REPS marquee (Method section) ───────── */
/* A slow champagne-hairline ticker drifting R→L. Pure CSS ambient loop;
   pauses under reduced-motion. Sits below the REPS cards. */
.marquee {
    margin-top: var(--s6);
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding-block: var(--s3);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)
}

.marquee__track {
    display: flex;
    width: max-content;
    animation: nm-marquee 34s linear infinite
}

.marquee__group {
    flex: none;
    font-family: var(--fd);
    font-weight: 340;
    font-size: clamp(1.3rem, 3vw, 2.3rem);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--champagne);
    white-space: nowrap
}

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

@media (prefers-reduced-motion: reduce) {
    .marquee__track {
        animation: none
    }
}
/* ───────── consent banner (GA4 Consent Mode) ───────── */
.consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    flex-wrap: wrap;
    padding: 16px clamp(20px, 5vw, 44px);
    background: rgba(24, 2, 40, .92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line)
}

.consent__text {
    margin: 0;
    max-width: 60ch;
    color: var(--ash);
    font-size: .85rem;
    line-height: 1.5
}

.consent__actions {
    display: flex;
    align-items: center;
    gap: 12px
}

.consent__decline {
    background: none;
    border: 0;
    color: var(--ash);
    font-family: var(--fb);
    font-size: .85rem;
    cursor: pointer;
    padding: 10px 14px;
    transition: color .3s var(--ease)
}

.consent__decline:hover {
    color: var(--pearl)
}

.consent__accept {
    font-family: var(--fb);
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .03em;
    color: var(--void);
    border: 0;
    border-radius: var(--r);
    padding: 11px 22px;
    cursor: pointer;
    background: linear-gradient(145deg, #E8D4A8, #DCC49B 40%, #C9AE82);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(0, 0, 0, .15) inset;
    transition: transform .3s var(--ease)
}

.consent__accept:hover {
    transform: translateY(-2px)
}

.consent__accept:focus-visible,
.consent__decline:focus-visible {
    outline: 2px solid var(--champagne-2);
    outline-offset: 2px
}

@media (max-width: 560px) {
    .consent {
        flex-direction: column;
        align-items: flex-start
    }
}

.consent__text a {
    color: var(--champagne);
    text-decoration: underline
}

/* skip-to-content link (keyboard a11y) — hidden until focused */
.skip-link {
    position: fixed;
    left: 12px;
    top: -64px;
    z-index: 1000;
    padding: 11px 18px;
    border-radius: var(--r);
    background: var(--champagne);
    color: var(--void);
    font-family: var(--fb);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: top .2s var(--ease)
}

.skip-link:focus {
    top: 12px;
    outline: 2px solid var(--void);
    outline-offset: 2px
}