/* ==========================================================================
   Version 5: the rendered box, the facts row, the theses band, the reel,
   and the cost cuts. Loaded last; it overrides home.css and sheets.css.
   ========================================================================== */

/* ── Hero: a rendered object, in place ───────────────────────────────── */
.hero__stage { min-height: 0; }
.hero__box { width: min(112%, 760px); max-width: none; height: auto; justify-self: center; }

/* ── Facts ───────────────────────────────────────────────────────────── */
.facts { padding: 0 var(--pad) clamp(3rem, 8vh, 5rem); }
.facts dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rdw-paper-border-2); }
.facts dl > div { padding: 1.6rem 1.5rem 0 0; }
.facts dl > div + div { padding-left: 1.5rem; border-left: 1px solid var(--rdw-paper-border-2); }
.facts dt { font: 700 clamp(1.25rem, 1.9vw, 1.7rem)/1.15 var(--rdw-font-heading); letter-spacing: -.01em; }
.facts dd { margin: .5rem 0 0; color: var(--rdw-ink-3); font-size: .95rem; max-width: 22em; }

/* ── Unbox: the box opens over one screen of scroll ──────────────────── */
.unbox { background: var(--rdw-paper); }
.unbox__pin { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: var(--pad); align-items: center; padding: clamp(3rem, 8vh, 6rem) var(--pad); }
.unbox__copy h2 { font-size: clamp(1.9rem, 3.6vw, 3.25rem); }
.unbox .steps { margin-top: 2.5rem; }
.unbox .step h3 { color: var(--rdw-ink); }
.unbox .step p { color: var(--rdw-ink-2); }
.unbox .step::before { color: var(--rdw-gold-deep); }
.unbox__stage { position: relative; aspect-ratio: 16 / 9; }
.unbox__canvas, .unbox__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.unbox__canvas { display: none; }
.js-scroll .unbox { height: 200vh; }
.js-scroll .unbox__pin { position: sticky; top: 0; height: 100vh; padding-block: 0; }
.js-scroll .unbox__canvas { display: block; }
.js-scroll .unbox__still { display: none; }
.js-scroll .unbox .steps { display: block; position: relative; min-height: 11rem; }

/* ── Theses (black) ──────────────────────────────────────────────────── */
.theses { background: #000; color: var(--rdw-text); padding: clamp(5rem, 14vh, 9rem) var(--pad); }
.theses h2 { font-size: clamp(2.2rem, 5vw, 4.5rem); color: var(--rdw-text-strong); max-width: 18em; }
.theses ol { list-style: none; margin: clamp(3rem, 8vh, 5rem) 0 0; padding: 0; counter-reset: th; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); }
.theses li { counter-increment: th; border-top: 1px solid rgba(201, 168, 76, .45); padding-top: 1.4rem; }
.theses li::before { content: "0" counter(th); display: block; font: 700 clamp(2.6rem, 4.6vw, 4.2rem)/1 var(--rdw-font-heading); color: transparent; -webkit-text-stroke: 1.5px var(--rdw-gold); margin-bottom: 1.4rem; }
.theses h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); color: var(--rdw-text-strong); }
.theses p { margin-top: .8rem; color: var(--rdw-text-2); max-width: 30em; }

/* ── Reel: working methods trading places ────────────────────────────── */
.reel { overflow: hidden; }
.reel img, .reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel video { opacity: 0; transition: opacity 1s linear; }
.reel video.is-on { opacity: 1; }
.sheet__bg.reel { opacity: .6; }

/* ── About: two portraits trading places ─────────────────────────────── */
.about__alt { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
    .about__portrait img { animation: swap-a 9s ease-in-out infinite; }
    .about__portrait .about__alt { animation-name: swap-b; }
    @keyframes swap-a { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
    @keyframes swap-b { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
}

/* ── Contact: the bracelet, render dissolving into wireframe ─────────── */
.contact__bg { inset: 0; background: url(../media/bg-bracelet-wire.webp) 60% 50% / cover no-repeat; opacity: .8; -webkit-mask-image: none; mask-image: none; translate: none; }
.contact::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 0, 0, .88) 0, rgba(0, 0, 0, .55) 45%, transparent 75%); pointer-events: none; }
.contact__copy { z-index: 2; }

/* ── Cost cuts ───────────────────────────────────────────────────────── */
/* the wipe: a clipping box slides in while its picture slides back, so nothing repaints */
.wipe__clip { position: absolute; inset: 0; overflow: hidden; transform: translate3d(calc((var(--p) - 1) * 100%), 0, 0); will-change: transform; }
.wipe__clip img { transform: translate3d(calc((1 - var(--p)) * 100%), 0, 0); will-change: transform; }
/* everything that moves with the scroll gets its own layer */
.sheet__word, .sheet__person, .sheet__window, .sheet__card, .hero__words, .hero__ghost, .sheet--soft .logos a { will-change: transform; }
.sheet::after { will-change: opacity; }
@media (min-width: 861px) {
    .js-scroll .slot { height: 212vh; }
    .js-scroll .slot--last { height: 122vh; }
}

@media (max-width: 860px) {
    .facts dl { grid-template-columns: 1fr 1fr; }
    .facts dl > div { padding: 1.2rem 1rem 1.2rem 0; border-bottom: 1px solid var(--rdw-paper-border-2); }
    .facts dl > div + div { padding-left: 0; border-left: 0; }
    .unbox__pin { grid-template-columns: 1fr; align-content: center; }
    .unbox__stage { order: -1; }
    .theses ol { grid-template-columns: 1fr; }
    .hero__box { width: 86%; }
}

/* ── Design automation: a diagram that can be read from across the room ── */
.auto__show { grid-column: 2; position: relative; z-index: 2; display: grid; gap: clamp(1rem, 3vh, 2rem); align-content: center; }
.auto__show .graph { position: static; translate: none; width: 100%; height: auto; overflow: visible; }
.graph path { fill: none; stroke: var(--rdw-gold-deep); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: clamp(0, calc(1 - (var(--p) - var(--d)) * 2.4), 1); }
.graph .nodes g { opacity: clamp(0, calc((var(--p) - var(--d)) * 7), 1); }
.graph .nodes rect { fill: #000; stroke: var(--rdw-gold); stroke-width: 1.5; }
.graph .nodes rect.hub { fill: var(--rdw-gold); stroke: none; }
.graph .nodes text { fill: var(--rdw-gold); font: 700 30px var(--rdw-font-heading); text-anchor: middle; }
.graph .nodes text.sub { fill: rgba(245, 240, 232, .72); font: 500 17px var(--rdw-font-body); }
.graph .nodes rect.hub ~ text { fill: #000; }
.graph .nodes rect.hub ~ text.sub { fill: rgba(0, 0, 0, .7); }
.sheet--auto .sheet__window { grid-column: 1; justify-self: end; width: min(78%, 560px); }

/* ── Products: sharp material in a tray, the logo as a signature not a poster ── */
.shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2.5rem, 7vh, 4.5rem); }
.shelf .prod { display: block; padding: 0; border: 0; margin: 0; }
.shelf .prod--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.frame { padding: 10px; border-radius: calc(var(--r-panel) + 6px); background: rgba(10, 10, 10, .05); box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .08); }
.frame > * { display: block; width: 100%; height: auto; border-radius: var(--r-panel); background: #9aa0a6; box-shadow: 0 30px 60px -30px rgba(20, 14, 2, .6); }
.frame video { aspect-ratio: 16 / 9; object-fit: cover; }
.frame--dark > * { background: #0b0b0b; }
.shelf .prod__copy { margin-top: 1.6rem; }
.shelf .prod--wide .prod__copy { margin-top: 0; }
.prod__id { display: flex; align-items: center; gap: .9rem; color: var(--rdw-gold-deep); font-weight: 600; font-size: .95rem; }
.prod__id img { width: 56px; height: 56px; border-radius: 22%; box-shadow: 0 8px 18px -8px rgba(20, 14, 2, .6); }
.shelf h3 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); margin-top: 1rem; }
.shelf .prod__copy > p:not([class]) { margin-top: .9rem; max-width: 34em; color: var(--rdw-ink-2); }

@media (max-width: 860px) {
    .auto__show { grid-column: 1; }
    .graph .nodes text { font-size: 34px; } .graph .nodes text.sub { font-size: 20px; }
    .sheet--auto .sheet__window { justify-self: stretch; width: 100%; }
    .shelf, .shelf .prod--wide { grid-template-columns: 1fr; }
    .shelf .prod--wide .prod__copy { margin-top: 1.6rem; }
}

/* ── Hero: moving water under the paper, the first thing that is alive ── */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .34; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(90deg, var(--rdw-paper) 0, rgba(245, 240, 232, .82) 34%, rgba(245, 240, 232, 0) 70%), linear-gradient(0deg, var(--rdw-paper) 0, rgba(245, 240, 232, 0) 26%); }
.hero__words { z-index: 1; }
@media (max-width: 860px) {
    .hero__video { opacity: .4; }
    .hero::after { background: linear-gradient(180deg, var(--rdw-paper) 0, rgba(245, 240, 232, .8) 38%, rgba(245, 240, 232, 0) 62%, rgba(245, 240, 232, 0) 86%, var(--rdw-paper) 100%); }
}

/* ── Final sizing ─────────────────────────────────────────────────────── */
.sheet--auto { grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); }
.graph .nodes text { font-size: 38px; }
.graph .nodes text.sub { font-size: 21px; }
.unbox__pin { grid-template-columns: minmax(0, .7fr) minmax(0, 1.6fr); gap: 0; }
.unbox__stage { scale: 1.08; transform-origin: 60% 50%; }
@media (max-width: 860px) {
    .sheet--auto { grid-template-columns: 1fr; }
    .unbox__pin { grid-template-columns: 1fr; gap: 1.5rem; }
    .unbox__stage { scale: 1.22; transform-origin: 50% 60%; margin-block: 1.5rem 1rem; }
}

.unbox { overflow-x: clip; }

/* ==========================================================================
   Version 6: the box lives in the hero and opens there. No second box section.
   --u  0..1  how far the pinned hero has been scrolled (set by home.js)
   ========================================================================== */
.hero.unbox { display: block; min-height: 0; padding: 0; overflow: visible; background: var(--rdw-paper); }
.hero.unbox::after { content: none; }
.hero__pin {
    --u: 0;
    position: relative; overflow: clip; min-height: 100dvh;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: var(--pad);
    padding: 96px var(--pad) clamp(2rem, 6vh, 4rem);
}
.hero__pin::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(90deg, var(--rdw-paper) 0, rgba(245, 240, 232, .85) 32%, rgba(245, 240, 232, 0) 66%), linear-gradient(0deg, var(--rdw-paper) 0, rgba(245, 240, 232, 0) 24%); }
.hero__col { position: relative; z-index: 2; display: grid; gap: 3rem; }
.hero__pin .unbox__stage { position: relative; z-index: 1; aspect-ratio: 16 / 9; scale: 1; margin: 0; }
.hero__pin .unbox__canvas, .hero__pin .unbox__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.hero__pin .unbox__canvas { display: none; }
.unbox__copy h2 { font-size: clamp(1.9rem, 3.6vw, 3.25rem); }

.js-scroll .hero.unbox { height: 215vh; }
.js-scroll .hero__pin { position: sticky; top: 0; height: 100vh; min-height: 0; }
.js-scroll .hero__col > * { grid-area: 1 / 1; align-self: center; }
/* the introduction gives way to the three steps as the box begins to open */
.js-scroll .hero__copy { opacity: clamp(0, calc(1 - (var(--u) - .06) * 9), 1); translate: 0 calc(var(--u) * -70px); will-change: opacity, transform; }
.js-scroll .unbox__copy { opacity: clamp(0, calc((var(--u) - .2) * 9), 1); translate: 0 calc((1 - clamp(0, (var(--u) - .2) * 5, 1)) * 60px); will-change: opacity, transform; pointer-events: none; }
.js-scroll .hero__pin.is-open .hero__copy { pointer-events: none; }
.js-scroll .hero__pin .unbox__canvas { display: block; }
.js-scroll .hero__pin.has-frames .unbox__still { visibility: hidden; }
/* large while closed, easing back as the net spreads so the whole pattern stays in view */
.js-scroll .hero__pin .unbox__stage { scale: calc(1.62 - var(--u) * .5); transform-origin: 46% 52%; will-change: transform; }
.js-scroll .hero__pin .steps { display: block; position: relative; min-height: 11rem; }
.hero__pin .step h3 { color: var(--rdw-ink); } .hero__pin .step p { color: var(--rdw-ink-2); } .hero__pin .step::before { color: var(--rdw-gold-deep); }

@media (max-width: 860px) {
    .hero__pin { grid-template-columns: 1fr; align-content: start; gap: 1rem; padding-top: 92px; }
    .hero__pin::after { background: linear-gradient(180deg, var(--rdw-paper) 0, rgba(245, 240, 232, .82) 40%, rgba(245, 240, 232, 0) 64%, rgba(245, 240, 232, 0) 86%, var(--rdw-paper) 100%); }
    .js-scroll .hero__pin .unbox__stage { scale: calc(1.9 - var(--u) * .62); transform-origin: 50% 40%; margin-top: 2.5rem; }
    .hero__pin .unbox__stage { order: 0; }
}

/* ── Products as three equal tiles: same frame, same structure, buttons on one line ── */
.shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); align-items: stretch; }
.shelf .prod, .shelf .prod--wide { display: flex; flex-direction: column; grid-column: auto; background: #fff; border-radius: calc(var(--r-panel) + 8px); padding: 10px 10px 1.6rem; box-shadow: 0 0 0 1px rgba(10, 10, 10, .07), 0 30px 60px -36px rgba(20, 14, 2, .45); }
.shelf .frame { padding: 0; background: none; box-shadow: none; border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 16 / 10; }
.shelf .frame > * { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; border-radius: 0; box-shadow: none; aspect-ratio: auto; }
.shelf .frame video { object-position: 50% 50%; }
.shelf .prod__copy, .shelf .prod--wide .prod__copy { margin-top: 1.4rem; padding: 0 clamp(.6rem, 1vw, 1rem); display: flex; flex-direction: column; flex: 1; }
.shelf h3 { font-size: clamp(1.6rem, 2.2vw, 2.1rem); }
.shelf .prod__go { margin-top: auto; padding-top: 1.6rem; }
@media (max-width: 1080px) { .shelf { grid-template-columns: 1fr; } .shelf .frame { aspect-ratio: 16 / 9; } }

.shelf .prod, .shelf .prod--wide { gap: 0; align-items: stretch; }
.shelf .prod__go { flex-direction: column; align-items: flex-start; gap: .7rem; }

/* the frames are on white; multiplied over the hero they keep their shadows and let the water through */
.hero__pin .unbox__stage { mix-blend-mode: multiply; }

/* ==========================================================================
   The helix. The five sheets stand on the faces of a five-sided column.
   Scrolling turns the column and lifts it at the same time, like a corkscrew:
   the next sheet rises from below as it swings round to the front.
   --d  how many places a sheet is from the front (set per sheet by home.js)
   ========================================================================== */
@media (min-width: 861px) {
    .js-scroll .helix { height: calc(100vh + 4 * 120vh + 30vh); background: #000; position: relative; }
    .js-scroll .helix__view {
        --W: min(86vw, 1380px); --H: min(78vh, 800px); --R: calc(var(--W) * .6882);
        position: sticky; top: 0; height: 100vh; overflow: clip;
        perspective: 2400px; perspective-origin: 50% 46%;
        background:
            radial-gradient(ellipse at 50% 55%, #1b1810 0, #050505 62%, #000 100%);
    }
    /* a faint floor grid so the turning has something to turn against */
    .js-scroll .helix__view::before {
        content: ""; position: absolute; left: -20%; right: -20%; bottom: -34%; height: 70%;
        background: linear-gradient(rgba(201, 168, 76, .16) 1px, transparent 1px) 0 0 / 100% 70px, linear-gradient(90deg, rgba(201, 168, 76, .16) 1px, transparent 1px) 0 0 / 70px 100%;
        transform: rotateX(74deg); transform-origin: 50% 0;
        -webkit-mask-image: linear-gradient(transparent, #000 30%, transparent 92%); mask-image: linear-gradient(transparent, #000 30%, transparent 92%);
    }
    .js-scroll .helix .slot, .js-scroll .helix .slot--last {
        --d: 0;
        position: absolute; left: 50%; top: 53%; width: var(--W); height: var(--H); margin: calc(var(--H) / -2) 0 0 calc(var(--W) / -2);
        transform:
            translateZ(calc(var(--R) * -1))
            translateY(calc(var(--d) * 46vh))
            rotateY(calc(var(--d) * 72deg))
            rotateZ(calc(var(--d) * -5deg))
            translateZ(var(--R));
        backface-visibility: hidden; will-change: transform;
    }
    .js-scroll .helix .sheet {
        position: relative; top: auto; height: 100%; min-height: 0; contain: paint;
        border-radius: 28px; padding: clamp(2rem, 5vh, 3.5rem) clamp(2rem, 4vw, 4rem);
        box-shadow: 0 0 0 1px rgba(201, 168, 76, .35), 0 60px 120px -40px #000;
    }
    .js-scroll .helix .sheet::after { opacity: calc(var(--cover) * .78); border-radius: inherit; }
}

/* ── Hero background: the wireframe model turning slowly, drawn in ink on the paper ── */
.hero__video { filter: invert(1); opacity: 0; transition: opacity 1.2s; object-position: 68% 50%; }
.hero__video.is-on { opacity: .5; }
.hero__pin { background: var(--rdw-paper) url(../media/hero-wire-poster.webp) 68% 50% / cover no-repeat; background-blend-mode: multiply; }
.hero__pin::after { background: linear-gradient(90deg, var(--rdw-paper) 0, rgba(245, 240, 232, .9) 30%, rgba(245, 240, 232, .35) 62%, rgba(245, 240, 232, .1) 100%), linear-gradient(0deg, var(--rdw-paper) 0, rgba(245, 240, 232, 0) 22%); }
@media (max-width: 860px) {
    .hero__video { object-position: 50% 50%; }
    .hero__pin::after { background: linear-gradient(180deg, var(--rdw-paper) 0, rgba(245, 240, 232, .86) 42%, rgba(245, 240, 232, .3) 70%, var(--rdw-paper) 100%); }
}
/* a clearing in the drawing where the box stands, so the object reads on clean paper */
.hero__video.is-on { opacity: .4; }
.hero__pin::after { background:
    radial-gradient(ellipse 36% 50% at 72% 53%, var(--rdw-paper) 0, var(--rdw-paper) 52%, rgba(245, 240, 232, 0) 100%),
    linear-gradient(90deg, var(--rdw-paper) 0, rgba(245, 240, 232, .9) 30%, rgba(245, 240, 232, .35) 62%, rgba(245, 240, 232, .1) 100%),
    linear-gradient(0deg, var(--rdw-paper) 0, rgba(245, 240, 232, 0) 22%); }
@media (max-width: 860px) {
    .hero__pin::after { background:
        radial-gradient(ellipse 70% 30% at 50% 70%, var(--rdw-paper) 0, var(--rdw-paper) 50%, rgba(245, 240, 232, 0) 100%),
        linear-gradient(180deg, var(--rdw-paper) 0, rgba(245, 240, 232, .86) 42%, rgba(245, 240, 232, .3) 70%, var(--rdw-paper) 100%); }
}

/* inside the helix the portrait is sized to its panel, so the head is never cut by the panel edge */
@media (min-width: 861px) {
    .js-scroll .helix .sheet__person { height: 97%; bottom: -3%; right: 2%; }
    .js-scroll .helix .sheet__draw.sketch { width: min(58%, 820px); }
}

/* ==========================================================================
   The helix on narrow screens: same turn, smaller column, panels trimmed
   to what fits one card (the secondary media steps aside).
   ========================================================================== */
@media (max-width: 860px) {
    .js-scroll .helix { height: calc(100vh + 4 * 110vh + 30vh); background: #000; position: relative; }
    .js-scroll .helix__view {
        --W: 88vw; --H: min(76vh, 640px); --R: calc(var(--W) * .6882);
        position: sticky; top: 0; height: 100vh; overflow: clip;
        perspective: 1100px; perspective-origin: 50% 46%;
        background: radial-gradient(ellipse at 50% 55%, #1b1810 0, #050505 62%, #000 100%);
    }
    .js-scroll .helix .slot, .js-scroll .helix .slot--last {
        --d: 0;
        position: absolute; left: 50%; top: 54%; width: var(--W); height: var(--H); margin: calc(var(--H) / -2) 0 0 calc(var(--W) / -2);
        transform: translateZ(calc(var(--R) * -1)) translateY(calc(var(--d) * 44vh)) rotateY(calc(var(--d) * 72deg)) rotateZ(calc(var(--d) * -5deg)) translateZ(var(--R));
        backface-visibility: hidden; will-change: transform;
    }
    .js-scroll .helix .sheet {
        position: relative; height: 100%; min-height: 0; contain: paint;
        display: flex; flex-direction: column; justify-content: flex-start; gap: .9rem;
        border-radius: 22px; padding: 1.4rem 1.25rem;
        box-shadow: 0 0 0 1px rgba(201, 168, 76, .35), 0 40px 80px -30px #000;
    }
    .js-scroll .helix .sheet::after { opacity: calc(var(--cover) * .78); border-radius: inherit; }
    .js-scroll .helix .sheet__text h3 { font-size: 1.55rem; }
    .js-scroll .helix .sheet__text p { font-size: .96rem; line-height: 1.5; margin-top: .7rem; }
    .js-scroll .helix .sheet__text ul { margin-top: .9rem; }
    .js-scroll .helix .sheet__text li { padding: .42rem 0 .42rem 1.3rem; font-size: .9rem; }
    .js-scroll .helix .sheet__text li::before { top: .95rem; }
    .js-scroll .helix .sheet__card { padding: 1.1rem; margin-top: auto; translate: none; }
    .js-scroll .helix .sheet__word { font-size: 5.2rem; bottom: -.1em; }
    /* panel by panel */
    .js-scroll .helix .sheet__draw.sketch { display: none; }
    .js-scroll .helix .sheet__person { position: absolute; right: -6%; bottom: -2%; width: auto; height: 50%; margin: 0; order: 0; translate: none; }
    .js-scroll .helix .sheet--design .sheet__text ul { max-width: 62%; }
    .js-scroll .helix .auto__show { margin-top: auto; }
    .js-scroll .helix .sheet--auto .sheet__window, .js-scroll .helix .sheet__window--small { display: none; }
    .js-scroll .helix .sheet--soft .logos { margin-top: auto; justify-self: start; }
    .js-scroll .helix .sheet--soft .logos img { width: 76px; }
}

.facts dt { font-size: clamp(1.7rem, 2.6vw, 2.4rem); color: var(--rdw-gold-deep); }

/* ── Hero background: a gear pair as a technical drawing, turning slowly ── */
.hero__pin { background: var(--rdw-paper); }
.hero__draw { position: absolute; right: -4%; top: 50%; translate: 0 -50%; width: min(74vw, 1050px); z-index: 0; overflow: visible; }
.hero__draw * { fill: none; stroke: rgba(10, 10, 10, .2); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.hd-axes path { stroke-dasharray: 26 8 4 8; stroke: rgba(10, 10, 10, .16); }
.hd-axes circle { stroke-dasharray: 3 9; }
.hd-gear .teeth { stroke-width: 22; stroke-dasharray: 13 14.4; stroke: rgba(10, 10, 10, .13); vector-effect: none; }
.hd-gear--b .teeth { stroke-dasharray: 12 13.7; }
.hd-dim * { stroke: var(--rdw-gold-deep); stroke-width: 2; }
.hd-gear { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
    .hd-gear--a { animation: hd-spin 120s linear infinite; }
    .hd-gear--b { animation: hd-spin 62.4s linear infinite reverse; }
    @keyframes hd-spin { to { transform: rotate(360deg); } }
}
.sheet__more { margin-top: 1.4rem; font-size: 1rem; }
@media (max-width: 860px) {
    .hero__draw { width: 150vw; right: -52vw; top: 62%; }
    .js-scroll .helix .sheet__more { margin-top: .8rem; font-size: .9rem; }
}

/* ── The helix panels fill a large screen ─────────────────────────────── */
@media (min-width: 861px) {
    .js-scroll .helix__view { --W: min(93vw, 1800px); --H: min(84vh, 1000px); perspective: 3000px; }
    .js-scroll .helix .slot, .js-scroll .helix .slot--last { top: 54%; }
    .js-scroll .helix .sheet { padding: clamp(2.5rem, 6vh, 4.5rem) clamp(2.5rem, 5vw, 5.5rem); }
    .js-scroll .helix .sheet__text { max-width: 40rem; }
    .js-scroll .helix .sheet__text h3 { font-size: clamp(2.4rem, 4vw, 4rem); }
    .js-scroll .helix .sheet__text p { font-size: clamp(1.1rem, 1.25vw, 1.3rem); }
    .js-scroll .helix .sheet__text li { font-size: 1.08rem; }
}

/* ── The person, central: straight after the first screen ─────────────── */
.about { background: var(--rdw-paper); grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; padding-block: clamp(3rem, 9vh, 7rem); }
.about__portrait { min-height: min(78vh, 760px); }
.about__name { font: 700 clamp(1.1rem, 1.5vw, 1.4rem) var(--rdw-font-heading); color: var(--rdw-gold-deep); margin: 0 0 1rem; }
.about__copy h2 { font-size: clamp(2.2rem, 4.4vw, 4.2rem); }
.about__copy p:not(.about__name) { font-size: 1.125rem; }
[hidden] { display: none !important; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } .about__portrait { min-height: 110vw; } }

/* ── Degree block: programme, school, EQF level, school mark ──────────── */
.degree { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 2.2rem; padding: 1.6rem 1.8rem; background: #fff; border-radius: var(--r-panel); box-shadow: 0 0 0 1px rgba(10, 10, 10, .07), 0 24px 50px -34px rgba(20, 14, 2, .45); max-width: 44rem; }
.degree p { margin: 0 !important; max-width: none !important; }
.degree__years { font-size: .9rem !important; color: var(--rdw-ink-3) !important; }
.degree__name { font: 700 clamp(1.5rem, 2.3vw, 2.1rem)/1.1 var(--rdw-font-heading) !important; color: var(--rdw-ink) !important; margin-top: .35rem !important; }
.degree__prog { font-weight: 600; color: var(--rdw-gold-deep) !important; margin-top: .4rem !important; font-size: 1rem !important; }
.degree__school { margin-top: .5rem !important; font-size: 1rem !important; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.degree__eqf { font: 700 .82rem var(--rdw-font-heading); letter-spacing: .04em; background: #000; color: var(--rdw-gold); padding: .28rem .6rem; border-radius: 999px; }
.degree__prev { margin-top: 1rem !important; padding-top: .9rem; border-top: 1px solid var(--rdw-paper-border-2); font-size: .95rem !important; color: var(--rdw-ink-3) !important; }
.degree img { width: clamp(110px, 12vw, 180px); height: auto; flex: none; }
@media (max-width: 600px) { .degree { flex-direction: column-reverse; align-items: flex-start; gap: 1rem; } }

/* the intro portrait stands alone; the design panel shows the work, not the person again */
.about__portrait img { animation: none !important; opacity: 1 !important; left: 4%; width: 96%; }
.sheet--design::before { background: linear-gradient(90deg, var(--rdw-paper) 26%, rgba(245, 240, 232, .35) 62%, transparent 86%); }
.sheet--design .sheet__photo { opacity: 1; object-position: 70% 50%; }

/* ── Intro portrait on light: the fair photograph pressed into paper, sketch lines, the whole figure uncropped ── */
.about__portrait { position: relative; aspect-ratio: 4 / 5; min-height: 0; align-self: center; border-radius: calc(var(--r-panel) + 8px); overflow: hidden;
    background: var(--rdw-paper-2) url(../media/bg-fair2-paper.webp) 45% 50% / cover no-repeat; box-shadow: 0 0 0 1px rgba(10, 10, 10, .07), 0 40px 80px -44px rgba(20, 14, 2, .5); }
.about__portrait::before, .about__portrait::after { content: none; }
.about__sketch { position: absolute; inset: 0; width: 100%; height: 100%; }
.about__sketch * { fill: none; stroke: rgba(10, 10, 10, .28); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.about__sketch .gold { stroke: var(--rdw-gold-deep); stroke-width: 2.6; }
.about__portrait img { position: absolute; inset: 0; left: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
@media (max-width: 860px) { .about__portrait { min-height: 0; } }

/* degree block: text stacked, EQF badge and school mark in one row at the bottom right */
.degree { display: block; }
.degree__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--rdw-paper-border-2); }
.degree__prev { margin-top: 0 !important; padding-top: 0; border-top: 0; }
.degree__marks { display: flex; align-items: center; gap: .9rem; flex: none; }
.degree img, .degree__marks img { width: 96px; height: auto; }
@media (max-width: 600px) { .degree__foot { flex-direction: column; align-items: flex-start; } .degree__marks { align-self: flex-end; } }

/* ==========================================================================
   Hero, static. The opening box and the three scroll steps are gone:
   one ordinary screen, the box closed as the studio's object.
   ========================================================================== */
.hero.hero--static { display: block; min-height: 0; padding: 0; overflow: visible; height: auto; background: var(--rdw-paper); }
.hero.hero--static::after { content: none; }
.js-scroll .hero--static .hero__pin { position: relative; top: auto; height: auto; min-height: 100dvh; }
.js-scroll .hero--static .hero__col > * { grid-area: auto; }
.js-scroll .hero--static .hero__copy { opacity: 1; translate: none; pointer-events: auto; }
.hero--static .unbox__stage, .js-scroll .hero--static .hero__pin .unbox__stage { scale: 1.55; transform-origin: 46% 52%; }
.hero--static .unbox__still { visibility: visible !important; }
@media (max-width: 860px) {
    .hero--static .unbox__stage, .js-scroll .hero--static .hero__pin .unbox__stage { scale: 1.8; transform-origin: 50% 40%; margin-top: 2.5rem; }
}

/* ── Bar: the full-width header of the current site, not a floating pill ───────────── */
.bar {
    top: 0; left: 0; right: 0; translate: none; width: auto; max-width: none; height: 72px;
    padding: 0 clamp(1.25rem, 4vw, 3rem); gap: 2rem; border-radius: 0;
    background: color-mix(in srgb, var(--rdw-paper) 95%, transparent);
    border-bottom: 1px solid rgba(10, 10, 10, .06);
    box-shadow: inset 0 1px 0 rgba(255, 251, 242, .9), 0 8px 24px -12px rgba(58, 42, 14, .12);
}
.bar__logo {
    width: 44px; height: 44px; padding: 0; border-radius: 8px; display: grid; place-items: center;
    font-size: .78rem; letter-spacing: .08em; color: #c9a84c;
    background: linear-gradient(170deg, #1a1608 0%, #000 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 8px 18px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.bar__nav { margin: 0 auto; gap: 2rem; }
.bar__nav a { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--rdw-ink-2); padding: 6px 2px; transition: color .3s; }
.bar__lang { padding: 0; gap: 6px; font-size: .78rem; letter-spacing: .1em; }
.bar__lang a { padding: 4px 8px; border-radius: 4px; font-weight: 600; font-size: .78rem; color: var(--rdw-ink-3); }
.bar__lang a[aria-current] { border-bottom: 0; color: var(--rdw-ink); background: var(--rdw-paper-2); }
.bar__cta { min-height: 0; padding: .6rem 1.1rem; font-size: .85rem; }
@media (max-width: 860px) {
    .bar { height: 60px; gap: 1rem; }
    .bar__logo { width: 38px; height: 38px; }
    .bar__nav { gap: 1.1rem; margin: 0 0 0 auto; }
    .bar__nav a { font-size: .72rem; letter-spacing: .1em; }
    .bar__cta { display: none; }
}

/* ── 3D sheet: the watch runs as film behind the text ───────────────────────────── */
.watchfilm { overflow: hidden; background: #000; }
.watchfilm video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; translate: 15% 0; }   /* the film is on black, so the watch can sit clear of the text card */
@media (max-width: 860px) { .watchfilm video { translate: 0 0; } }
.watchfilm::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .8) 0, transparent 50%); }

/* ── Sheets on a phone: nothing left empty, and the word at the foot stays readable ─── */
.logos__name { display: none; }
@media (max-width: 860px) {
    /* the outlined word gets its own strip at the foot of the card; content stops above it */
    .js-scroll .helix .sheet { padding-bottom: 4.4rem; }
    .js-scroll .helix .sheet__word { font-size: clamp(2.6rem, 14.5vw, 3.6rem); left: 1.15rem; bottom: .7rem; line-height: 1; translate: none; -webkit-text-stroke: 1.2px rgba(10, 10, 10, .3); }
    .js-scroll .helix .sheet--black .sheet__word { -webkit-text-stroke-color: rgba(201, 168, 76, .75); }
    /* software: the three products as named rows, filling the card */
    .js-scroll .helix .sheet--soft .logos { margin-top: .6rem; flex-direction: column; gap: .7rem; width: 100%; }
    .js-scroll .helix .sheet--soft .logos a { display: flex; align-items: center; gap: 1rem; padding: .75rem; border-radius: 18px; text-decoration: none; color: inherit;
        background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(10, 10, 10, .07), 0 14px 26px -18px rgba(20, 14, 2, .5); rotate: none; }
    .js-scroll .helix .sheet--soft .logos img { width: 68px; flex: none; box-shadow: 0 12px 20px -10px rgba(20, 14, 2, .6); }
    .logos__name { display: grid; gap: .15rem; }
    .logos__name b { font: 700 1.12rem var(--rdw-font-heading); }
    .logos__name small { font-size: .86rem; line-height: 1.35; color: var(--rdw-ink-3); }
    /* design automation: the diagram sits right under the list instead of at the far end of the card */
    .js-scroll .helix .auto__show { margin-top: 1.4rem; }
}

/* ── Design automation: the diagram as real boxes of text, wires drawn behind them ──── */
.flowmap { position: relative; display: grid; grid-template-columns: 1fr .9fr 1fr; column-gap: clamp(1.4rem, 4vw, 3.6rem); align-items: center; }
.flowmap__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flowmap__wires path { fill: none; stroke: var(--rdw-gold-deep); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.flowmap__col { position: relative; z-index: 1; display: grid; gap: clamp(.9rem, 2.6vh, 1.7rem); }
.node { background: #000; color: var(--rdw-gold); border: 1.5px solid var(--rdw-gold); border-radius: 16px; padding: 1rem 1.25rem 1.05rem; text-align: center; box-shadow: 0 18px 30px -18px rgba(20, 14, 2, .6); }
.node b { display: block; font: 700 clamp(1.05rem, 1.45vw, 1.5rem)/1.15 var(--rdw-font-heading); }
.node small { display: block; margin-top: .35rem; font-size: clamp(.78rem, .95vw, .92rem); line-height: 1.3; color: rgba(245, 240, 232, .74); }
.node--hub { background: var(--rdw-gold); color: #000; border-color: transparent; padding-block: 1.7rem; }
.node--hub small { color: rgba(0, 0, 0, .72); }

/* ── ...and three automations in turn instead of a single clip ─────────────────────── */
.autoreel__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-radius: calc(var(--r-panel) - 8px);
    outline: 8px solid rgba(10, 10, 10, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 46px 80px -28px rgba(20, 14, 2, .7); }
.sheet__window.autoreel .autoreel__stage > * { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; outline: 0; box-shadow: none;
    opacity: 0; transition: opacity .7s cubic-bezier(.32, .72, 0, 1); }
.sheet__window.autoreel .autoreel__stage > .is-shown { opacity: 1; }
.autoreel figcaption { display: grid; margin-top: .9rem; }
.autoreel__tabs { display: flex; gap: 1.4rem; border-bottom: 1px solid rgba(10, 10, 10, .12); }
.autoreel__tabs button { appearance: none; background: none; border: 0; padding: .1rem 0 .55rem; margin-bottom: -1px; cursor: pointer;
    font: 600 .92rem var(--rdw-font-heading); color: var(--rdw-ink-3); border-bottom: 2px solid transparent; transition: color .3s, border-color .3s; }
.autoreel__tabs button:hover { color: var(--rdw-ink); }
.autoreel__tabs button.is-shown { color: var(--rdw-ink); border-bottom-color: var(--rdw-gold-deep); }
.autoreel figcaption p { grid-area: 2 / 1; margin: .7rem 0 0; font-size: .9rem; line-height: 1.45; color: var(--rdw-ink-2); opacity: 0; visibility: hidden; transition: opacity .5s; }
.autoreel figcaption p.is-shown { opacity: 1; visibility: visible; }
@media (max-width: 860px) {
    .flowmap { column-gap: 1rem; }
    .node { padding: .6rem .35rem .65rem; border-radius: 12px; }
    .node b { font-size: .84rem; }
    .node small { font-size: .66rem; margin-top: .2rem; }
    .node--hub { padding-block: 1rem; }
}

/* ── Contact form: the topic select ─────────────────────────────────────────────── */
.contact__form select { font: inherit; color: var(--rdw-text-strong); background: var(--rdw-bg-elevated); border: 1px solid var(--rdw-border-hover); border-radius: var(--rdw-radius-md); padding: .7rem .8rem; }
.contact__form select:invalid { color: var(--rdw-text-2); }

/* ── Dock: a small floating control for moving through the page ─────────────────── */
.dock { display: none; }
.js-scroll .dock { position: fixed; right: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2.4vw, 28px); z-index: 25; display: grid; gap: 2px; padding: 5px;
    background: #000; border-radius: 16px; box-shadow: 0 0 0 1px rgba(201, 168, 76, .32), 0 18px 36px -14px rgba(20, 14, 2, .55);
    opacity: 0; translate: 0 12px; transition: opacity .5s, translate .5s cubic-bezier(.32, .72, 0, 1); }
.js-scroll .dock.is-ready { opacity: 1; translate: 0 0; }
.dock button { appearance: none; position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 12px; cursor: pointer;
    background: transparent; color: #c9a84c; transition: background-color .3s, color .3s, opacity .3s, scale .2s; }
.dock button:hover { background: rgba(201, 168, 76, .18); color: #e6cd84; }
.dock button:active { scale: .94; }
.dock button:focus-visible { outline: 2px solid #c9a84c; outline-offset: 1px; }
.dock button:disabled { opacity: .28; cursor: default; background: transparent; }
.dock [data-dock="top"] { margin-top: 3px; }
.dock [data-dock="top"]::before { content: ""; position: absolute; left: 9px; right: 9px; top: -3px; height: 1px; background: rgba(201, 168, 76, .28); }
/* when the carton has emptied, the page goes on: the down button says so */
.dock__hint { position: absolute; right: calc(100% + 14px); top: 50%; translate: 8px -50%; white-space: nowrap; pointer-events: none;
    font: 600 .82rem var(--rdw-font-heading); color: var(--rdw-ink); opacity: 0; transition: opacity .4s, translate .4s cubic-bezier(.32, .72, 0, 1); }
.dock.is-hint .dock__hint { opacity: 1; translate: 0 -50%; }
.dock.is-hint [data-dock="next"] { background: #c9a84c; color: #000; }
.dock.is-hint [data-dock="next"] svg { animation: dock-nudge 1.5s cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes dock-nudge { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 3px; } }
@media (max-width: 860px) {
    .dock button { width: 38px; height: 38px; }
}

/* ── Contact: required marks, LinkedIn as its own button; the business line lives in the footer ── */
.req { color: var(--rdw-gold); font-weight: 700; margin-left: .15em; }
.contact__note { margin: 0; font-size: .85rem; color: var(--rdw-text-2); }
.contact__links { margin-top: 1.2rem; }
.btn--linkedin { background: transparent; color: var(--rdw-paper); border-color: rgba(245, 240, 232, .45); padding-left: .55rem; }
.btn--linkedin b { width: 2.1rem; height: 2.1rem; border-radius: 8px; display: grid; place-items: center; background: var(--rdw-paper); color: #000; font: 700 1.05rem var(--rdw-font-heading); letter-spacing: -.02em; }
.btn--linkedin:hover { background: var(--rdw-paper); color: #000; border-color: var(--rdw-paper); }
.btn--linkedin:hover b { background: #000; color: var(--rdw-paper); }
.btn--linkedin:hover i { background: rgba(0, 0, 0, .1); }
.foot__meta { margin-right: auto; }

/* ── Release details: the title's descender clears the gold block; form helpers ── */
.hero__title { line-height: 1.04; }
.hero__title .rdw-mark-gold { display: inline-block; margin-top: .14em; line-height: 1; }
.contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact__sent { margin-top: 1.4rem; padding: .9rem 1.1rem; border-radius: 12px; font-weight: 500; }
.contact__sent.is-ok { background: rgba(201, 168, 76, .16); color: var(--rdw-gold); box-shadow: 0 0 0 1px rgba(201, 168, 76, .45); }
.contact__sent.is-fail { background: rgba(190, 60, 40, .16); color: #f0b8a8; box-shadow: 0 0 0 1px rgba(190, 60, 40, .5); }

/* software logos on a wide screen: each icon carries its name, so it reads as a link to the product page */
@media (min-width: 861px) {
    .sheet--soft .logos a { display: grid; justify-items: center; gap: .8rem; text-decoration: none; color: var(--rdw-ink); }
    .logos__name { display: block; text-align: center; }
    .logos__name b { font: 700 1.05rem var(--rdw-font-heading); }
    .logos__name small { display: none; }
    .sheet--soft .logos a:hover .logos__name b { color: var(--rdw-gold-deep); }
}

/* ── Header: the software drop-down, each product selectable on its own ────────── */
.bar__nav { align-items: center; }
.bar__drop { position: relative; }
.bar__dropbtn { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; padding: 6px 2px;
    font: 600 .78rem var(--rdw-font-body); text-transform: uppercase; letter-spacing: .14em; color: var(--rdw-ink-2); transition: color .3s; }
.bar__dropbtn svg { width: 12px; height: 12px; transition: rotate .3s; }
.bar__dropbtn:hover, .bar__drop:focus-within .bar__dropbtn, .bar__drop.is-open .bar__dropbtn { color: var(--rdw-gold-deep); }
.bar__dropbtn.is-current { color: var(--rdw-ink); border-bottom-color: var(--rdw-gold); }
.bar__drop.is-open .bar__dropbtn svg, .bar__drop:hover .bar__dropbtn svg { rotate: 180deg; }
.bar__menu { position: absolute; top: 100%; left: 50%; translate: -50% 8px; z-index: 40; width: max-content; min-width: 320px; display: grid; gap: 2px; padding: 8px;
    background: var(--rdw-paper); border-radius: 18px; box-shadow: 0 0 0 1px rgba(10, 10, 10, .08), 0 30px 50px -20px rgba(20, 14, 2, .45);
    opacity: 0; visibility: hidden; transition: opacity .25s, translate .25s cubic-bezier(.32, .72, 0, 1), visibility 0s .25s; }
.bar__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }      /* keeps the hover alive across the gap */
.bar__drop:hover .bar__menu, .bar__drop:focus-within .bar__menu, .bar__drop.is-open .bar__menu { opacity: 1; visibility: visible; translate: -50% 14px; transition-delay: 0s; }
.bar .bar__menu a { display: flex; align-items: center; gap: .85rem; padding: .6rem .9rem .6rem .6rem; border: 0; border-radius: 12px; text-decoration: none; text-transform: none; letter-spacing: 0; color: var(--rdw-ink); transition: background-color .2s; }
.bar .bar__menu a:hover, .bar .bar__menu a:focus-visible { background: rgba(201, 168, 76, .16); color: var(--rdw-ink); }
.bar .bar__menu a[aria-current] { background: rgba(10, 10, 10, .06); border: 0; }
.bar__menu img { border-radius: 24%; object-fit: cover; background: #000; flex: none; }
.bar__menu span { display: grid; gap: .1rem; }
.bar__menu b { font: 700 1rem var(--rdw-font-heading); letter-spacing: -.01em; }
.bar__menu small { font: 400 .82rem var(--rdw-font-body); color: var(--rdw-ink-3); }
.bar .bar__menu a.bar__menu-all { justify-content: center; margin-top: 4px; padding: .7rem; border-top: 1px solid rgba(10, 10, 10, .1); border-radius: 0 0 12px 12px; font: 600 .86rem var(--rdw-font-body); color: var(--rdw-ink-2); }
@media (max-width: 860px) {
    .bar__dropbtn { font-size: .72rem; letter-spacing: .1em; }
    .bar__drop { position: static; }
    .bar__menu { position: fixed; top: 60px; left: 10px; right: 10px; width: auto; min-width: 0; translate: 0 -6px; }
    .bar__drop:hover .bar__menu, .bar__drop:focus-within .bar__menu, .bar__drop.is-open .bar__menu { translate: 0 4px; }
}

/* the menu on a phone: its rows stay icon-beside-text, and the bar keeps to Software and Contact */
@media (max-width: 860px) { .bar .bar__nav .bar__menu a { display: flex; white-space: normal; } }
@media (max-width: 480px) { .bar .bar__nav > a:nth-of-type(1), .bar .bar__nav > a:nth-of-type(2) { display: none; } }

/* ── About: the professional side opens under the short text ─────────────────── */
.career { margin-top: 1.8rem; border-top: 1px solid rgba(10, 10, 10, .14); border-bottom: 1px solid rgba(10, 10, 10, .14); }
.career summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 0;
    font: 700 clamp(1.15rem, 1.6vw, 1.4rem) var(--rdw-font-heading); letter-spacing: -.01em; color: var(--rdw-ink); }
.career summary::-webkit-details-marker { display: none; }
.career summary i { width: 2.3rem; height: 2.3rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: #000; color: var(--rdw-paper); transition: rotate .4s cubic-bezier(.32, .72, 0, 1), background-color .3s; }
.career summary:hover i { background: var(--rdw-gold-deep); }
.career[open] summary i { rotate: 45deg; }
.career summary:focus-visible { outline: 2px solid var(--rdw-gold-deep); outline-offset: 4px; }
.career__body { padding: .2rem 0 1.6rem; }
.career__body h3 { margin: 1.2rem 0 0; font: 700 1.05rem var(--rdw-font-heading); color: var(--rdw-gold-deep); }
.career__body h3:first-child { margin-top: 0; }
.career__body p { margin-top: .7rem; }
.career__body ul { margin: .8rem 0 0; padding: 0; list-style: none; }
.career__body li { position: relative; padding: .5rem 0 .5rem 1.4rem; border-top: 1px solid rgba(10, 10, 10, .08); font-size: .97rem; line-height: 1.45; }
.career__body li:first-child { border-top: 0; }
.career__body li::before { content: ""; position: absolute; left: 0; top: 1.1rem; width: .8rem; height: 2px; background: var(--rdw-gold); }

/* a phone bar that fits: Finnish labels are long, so the bar tightens and the language pair stays whole */
@media (max-width: 480px) {
    .bar { padding: 0 12px; gap: .55rem; }
    .bar .bar__nav { gap: .75rem; }
    .bar .bar__nav > a, .bar__dropbtn { font-size: .66rem; letter-spacing: .08em; }
    .bar__lang { gap: 2px; flex: none; }
    .bar__lang a { padding: 4px 5px; font-size: .7rem; }
    .bar__logo { width: 34px; height: 34px; font-size: .68rem; }
}
@media (max-width: 860px) { .dock__hint { display: none; } }

/* LinkedIn button, second pass: the mark is a round chip with the same inset as the arrow chip on the right */
.btn.btn--linkedin { padding: .45rem .45rem .45rem .45rem; gap: .8rem; }
.btn--linkedin b { width: 2.3rem; height: 2.3rem; border-radius: 50%; font-size: 1rem; }
.btn--linkedin i { width: 2.3rem; height: 2.3rem; }

/* ── Sheets on a real phone (about 700 px of visible height) ─────────────────────────
   Media sheets show their picture or film in the upper part and the text below it;
   everything is sized from the screen height so nothing runs under the card's edge. */
@media (max-width: 860px) {
    .js-scroll .helix .sheet { padding: 1.05rem 1.05rem 3.1rem; gap: .55rem; }
    .js-scroll .helix .sheet__word { font-size: clamp(2rem, 11vw, 2.8rem); bottom: .45rem; }
    .js-scroll .helix .sheet__text h3 { font-size: clamp(1.2rem, 3.2vh, 1.55rem); }
    .js-scroll .helix .sheet__text p { font-size: clamp(.82rem, 2vh, .96rem); line-height: 1.4; margin-top: .45rem; }
    .js-scroll .helix .sheet__text ul { margin-top: .5rem; }
    .js-scroll .helix .sheet__text li { padding: .3rem 0 .3rem 1.2rem; font-size: clamp(.8rem, 1.9vh, .9rem); }
    .js-scroll .helix .sheet__text li::before { top: .8rem; }
    /* 3D and consulting: film on top, text card underneath */
    .js-scroll .helix .sheet--3d .sheet__bg, .js-scroll .helix .sheet--consult .sheet__bg { inset: 0 0 auto 0; height: 42%; border-radius: 22px 22px 0 0; overflow: hidden; }
    .js-scroll .helix .sheet--3d .sheet__card, .js-scroll .helix .sheet--consult .sheet__card { margin-top: auto; max-height: 55%; overflow: hidden; padding: .85rem 1rem .95rem; border-radius: 16px; }
    .js-scroll .helix .sheet__card ul { display: none; }
    .js-scroll .helix .sheet__card > p:first-of-type { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
    .js-scroll .helix .sheet__card .sheet__more { margin-top: .6rem; font-size: .9rem; }
    .watchfilm::after { background: linear-gradient(0deg, rgba(0, 0, 0, .55) 0, transparent 40%); }
    /* design automation: the diagram keeps its names and drops the small print */
    .js-scroll .helix .auto__show { margin-top: .7rem; }
    .js-scroll .helix .flowmap { column-gap: .8rem; }
    .js-scroll .helix .flowmap__col { gap: .55rem; }
    .js-scroll .helix .node { padding: .55rem .3rem; border-radius: 10px; }
    .js-scroll .helix .node--hub { padding-block: .9rem; }
    .js-scroll .helix .node small { display: none; }
    /* software: three compact rows */
    .js-scroll .helix .sheet--soft .logos { gap: .45rem; margin-top: .25rem; }
    .js-scroll .helix .sheet--soft .logos a { padding: .5rem .7rem .5rem .5rem; gap: .75rem; border-radius: 14px; }
    .js-scroll .helix .sheet--soft .logos img { width: 48px; }
    .logos__name b { font-size: 1rem; }
    .logos__name small { font-size: .8rem; line-height: 1.25; }
}

/* the dock on a phone: a low row centred at the foot of the screen, in the gap under the cards, not on top of them */
@media (max-width: 860px) {
    .dock, .js-scroll .dock { grid-auto-flow: column; right: 50%; bottom: 6px; translate: 50% 12px; padding: 4px; border-radius: 14px; }
    .dock.is-ready, .js-scroll .dock.is-ready { translate: 50% 0; }
    .dock button { width: 44px; height: 36px; border-radius: 10px; }
    .dock [data-dock="top"] { margin-top: 0; margin-left: 3px; }
    .dock [data-dock="top"]::before { left: -3px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
}

/* ── Sheets on a phone with the address bar showing ──────────────────────────────────
   The card is sized from the small viewport (svh), sits right under the header and leaves a strip
   at the foot for the dock, so nothing is cut at the bottom whether the browser bar is in or out. */
@media (max-width: 860px) {
    .js-scroll .helix__view { height: 100svh; --H: min(calc(100svh - 136px), 640px); }
    .js-scroll .helix .slot, .js-scroll .helix .slot--last { top: calc(70px + var(--H) / 2); }
    /* film sheets: the film runs down behind the top of the text card, so no black band is left between them */
    .js-scroll .helix .sheet--3d .sheet__bg, .js-scroll .helix .sheet--consult .sheet__bg { height: 62%; }
    .js-scroll .helix .sheet--3d .sheet__card, .js-scroll .helix .sheet--consult .sheet__card { max-height: 58%; margin: auto .1rem 0; }
    .js-scroll .helix .sheet__card > p:first-of-type { -webkit-line-clamp: 7; }
    .js-scroll .helix .sheet__card .sheet__more { margin-top: .45rem; font-size: .86rem; }
    /* design automation: the diagram sits in the middle of the space the text leaves, at a readable size */
    .js-scroll .helix .sheet--auto .auto__show { margin-block: auto; }
    .js-scroll .helix .node { padding: .75rem .35rem; }
    .js-scroll .helix .node b { font-size: .9rem; }
    .js-scroll .helix .node--hub { padding-block: 1.25rem; }
    .js-scroll .helix .flowmap__col { gap: .7rem; }
}

/* ── Degree: EQF 7 explains itself on hover, focus or tap; the Savonia mark is a link ── */
.degree__eqf { position: relative; cursor: help; }
.degree__eqf:focus-visible { outline: 2px solid var(--rdw-gold-deep); outline-offset: 3px; }
.degree__eqf .tip { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 5; width: min(17rem, 72vw); padding: .7rem .85rem; border-radius: 12px;
    background: #000; color: var(--rdw-paper); font: 400 .82rem/1.4 var(--rdw-font-body); letter-spacing: 0; text-align: left; white-space: normal;
    box-shadow: 0 0 0 1px rgba(201, 168, 76, .4), 0 18px 30px -14px rgba(20, 14, 2, .6);
    opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity .25s, translate .25s cubic-bezier(.32, .72, 0, 1), visibility 0s .25s; pointer-events: none; }
.degree__eqf .tip::after { content: ""; position: absolute; right: 1.1rem; top: 100%; border: 6px solid transparent; border-top-color: #000; }
.degree__eqf:hover .tip, .degree__eqf:focus .tip, .degree__eqf:focus-within .tip { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.degree__school-link { display: block; border-radius: 6px; transition: opacity .3s; }
.degree__school-link:hover { opacity: .75; }
.degree__school-link:focus-visible { outline: 2px solid var(--rdw-gold-deep); outline-offset: 3px; }

/* ── The CV, opened separately inside Career and experience ──────────────────── */
.cv { margin-top: 1.4rem; border-radius: 16px; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(10, 10, 10, .08); }
.cv summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem .85rem 1.2rem; font: 700 1.05rem var(--rdw-font-heading); color: var(--rdw-ink); }
.cv summary::-webkit-details-marker { display: none; }
.cv summary i { width: 2rem; height: 2rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: #000; color: var(--rdw-paper); transition: rotate .4s cubic-bezier(.32, .72, 0, 1), background-color .3s; }
.cv summary:hover i { background: var(--rdw-gold-deep); }
.cv[open] summary i { rotate: 45deg; }
.cv summary:focus-visible { outline: 2px solid var(--rdw-gold-deep); outline-offset: 3px; border-radius: 16px; }
.cv__body { padding: 0 1.2rem 1.3rem; font-size: .93rem; line-height: 1.5; }
.cv__body h4 { margin: 1.5rem 0 .5rem; padding-bottom: .35rem; border-bottom: 1px solid rgba(10, 10, 10, .14); font: 700 .8rem var(--rdw-font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--rdw-gold-deep); }
.cv__body h4:first-child { margin-top: .3rem; }
.cv__body h5 { margin: 1.1rem 0 0; font: 700 1rem var(--rdw-font-heading); color: var(--rdw-ink); }
.cv__body p { margin: .45rem 0 0; }
.cv__body .meta { margin-top: .1rem; font-size: .86rem; color: var(--rdw-ink-3); }
.cv__body .job ul, .cv__body > ul { margin: .5rem 0 0; padding: 0; list-style: none; }
.cv__body li, .career__body .cv__body li { position: relative; padding: .22rem 0 .22rem 1.1rem; border: 0; font-size: .93rem; }
.cv__body li::before, .career__body .cv__body li::before { content: ""; position: absolute; left: 0; top: .82rem; width: .55rem; height: 2px; background: var(--rdw-gold); }
.cv__get { margin-top: 1.5rem !important; }
/* the cv keeps to a compact text size whatever the section around it sets, and the portrait stays at the top beside it */
.about .cv__body p, .about .cv__body li { font-size: .93rem; line-height: 1.5; }
.about .cv__body .meta { font-size: .86rem; }
.about:has(.career[open]) { align-items: start; }
.about:has(.career[open]) .about__portrait { position: sticky; top: 96px; }
@media (max-width: 860px) { .about:has(.career[open]) .about__portrait { position: static; } }

/* phone: the footer leaves room for the floating row of buttons, so its links are never underneath it */
@media (max-width: 860px) { .foot, .v5 .footer { padding-bottom: 5rem; } }
/* phone: the EQF note opens inside the card, measured from the card's right edge */
@media (max-width: 860px) {
    .degree__marks { position: relative; }
    .degree__eqf { position: static; }
    .degree__eqf .tip { right: 0; left: auto; width: min(17rem, 74vw); bottom: calc(100% + 8px); }
    .degree__eqf .tip::after { content: none; }
}