/* ============================================================
   SWISS LAYER
   Editorial-Swiss restyle applied on top of the base sheet
   (styleRedesign.css) and the components (styleComponents.css):
   white ground, one grotesque, a mono for labels,
   a single ultramarine accent, square corners, no film grade.

   Tokens first, overrides second: the palette, type and motion
   live in :root below, and the rules after it only restyle what the
   two sheets underneath already lay out.
   ============================================================ */

:root {
    /* ---- palette ------------------------------------------------
       Black and white carry the page; colour arrives as soft pastel
       blocks, the way figma.com uses it, so no single hue dominates.
       The ultramarine (#1F3FD1) read as too loud at that saturation.

       Measured on #FFFFFF: ink 19.6:1, ink-soft 15.1:1, ink-muted
       8.86:1, accent 5.05:1. The accent is #6B4EFF rather than the
       brighter #7B61FF: that one is 4.0:1 on white, under AA for the
       links and labels the accent paints. Ink on every pastel and
       every tint below is above 13:1.
       ------------------------------------------------------------ */
    --color-bg: #FFFFFF;
    --color-bg-alt: #F5F5F7;
    --color-ink: #0E0E0E;
    --color-ink-soft: #262626;
    --color-ink-muted: #4A4A4A;
    --color-line: color-mix(in srgb, var(--color-ink) 10%, transparent);
    --color-line-strong: color-mix(in srgb, var(--color-ink) 22%, transparent);
    --color-raised: #FFFFFF;
    --color-sunken: #F5F5F7;
    --color-ink-faint: #9A9A9A;
    --color-focus: #6B4EFF;
    --color-focus-halo: #E4DCFF;
    --color-on-accent: #FFFFFF;

    /* One accent for interaction — links, focus, the cursor, the
       emphasised word in a heading. The seal collapses onto it. */
    --color-accent: #6B4EFF;
    --color-seal: #6B4EFF;

    /* Apparent 3D. A card is a white face drawn in ink lines (a
       1.5px edge) standing on a solid block: its side is an extrusion
       to the lower right, built from one hard shadow per pixel of
       depth so the corners mitre at 45deg like a real slab. Nothing
       blurs, spreads or fades. Hover raises the face and deepens the
       side by the same amount, so the block's back edge never moves;
       a press drives the face down into it. --tint-lilac marks a
       "current" item. */
    /* The palette, shown only on hover: the side of the block a card
       stands on fills with its hue and takes an ink outline. Cards
       rotate through the four in order, so neighbours never match. */
    --hue-lilac: #C7B8FF;
    --hue-mint:  #B8F0D8;
    --hue-peach: #FFD8C2;
    --hue-sky:   #BFE6FF;
    --tint-lilac: #F4F1FF;
    --edge-neutral: #E5E5E5;
    --edge-line: 1.5px solid var(--color-ink);
    --extrude: var(--color-ink);
    --extrude-6: 1px 1px 0 var(--extrude), 2px 2px 0 var(--extrude), 3px 3px 0 var(--extrude), 4px 4px 0 var(--extrude), 5px 5px 0 var(--extrude), 6px 6px 0 var(--extrude);
    --extrude-9: 1px 1px 0 var(--extrude), 2px 2px 0 var(--extrude), 3px 3px 0 var(--extrude), 4px 4px 0 var(--extrude), 5px 5px 0 var(--extrude), 6px 6px 0 var(--extrude), 7px 7px 0 var(--extrude), 8px 8px 0 var(--extrude), 9px 9px 0 var(--extrude);
    --extrude-4: 1px 1px 0 var(--extrude), 2px 2px 0 var(--extrude), 3px 3px 0 var(--extrude), 4px 4px 0 var(--extrude);
    --extrude-6s: 1px 1px 0 var(--extrude), 2px 2px 0 var(--extrude), 3px 3px 0 var(--extrude), 4px 4px 0 var(--extrude), 5px 5px 0 var(--extrude), 6px 6px 0 var(--extrude);
    --extrude-1: 1px 1px 0 var(--extrude);

    /* Contribution scale, a lilac ramp ending on the accent. */
    --gh-l1: #E4DCFF;
    --gh-l2: #C7B8FF;
    --gh-l3: #9C86FF;
    --gh-l4: #6B4EFF;

    /* ---- shape --------------------------------------------------
       Rounded, after the Figma login: firm cards, tight fields. */
    --r-card: 16px;     /* project cards, panels, the form sheet */
    --r-tile: 12px;     /* skill tiles, role cards, inner wells */
    --r-field: 8px;     /* inputs */
    --r-pill: 999px;    /* buttons, tags, toggles */

    /* ---- type ---------------------------------------------------
       Both families point at the grotesque: every rule in the two
       layers below reads --font-serif or --font-sans, so this is the
       whole switch. The Fraunces axis settings become no-ops. */
    --font-serif: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --font-sans: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --serif-display: normal;
    --serif-text: normal;

    --swiss-gap: 20px;

    /* ---- motion -------------------------------------------------
       Three durations and two curves for everything this layer moves.
       The hero's entrance is one timeline, written down here, so the
       order things arrive in is a single list to read and tune. Times
       count from the moment the loader starts to lift. swissMotion.js
       reads --t-figures, so the count-up starts with its rules.
       ------------------------------------------------------------ */
    --dur-quick: 0.3s;      /* hovers, colour */
    --dur-move: 0.7s;       /* things that travel: reveals, fades */
    --dur-draw: 1.1s;       /* rules and letters drawing in */
    --ease-swiss: cubic-bezier(0.2, 0.8, 0.15, 1);   /* arrives, settles */
    --ease-draw: cubic-bezier(0.6, 0, 0.2, 1);       /* starts slow, ends crisp */

    --t-name: 0.35s;        /* first letter of the name; then +45ms each */
    --t-meta: 0.7s;
    --t-intro: 1.1s;
    --t-figures: 1.2s;      /* the rules over the figures, and the count */
    --t-marquee: 1.5s;
}

/* ------------------------------------------------------------
   1. Ground and texture
   ------------------------------------------------------------ */

/* Upright everywhere. Emphasis is carried by weight and the accent,
   the way it is in a Swiss layout, not by a slanted cut. */
body.redesign,
body.redesign *,
body.redesign .accordion,
body.redesign .option,
body.redesign footer,
body.redesign .contactLink {
    font-style: normal !important;
}

body.redesign .accordion {
    font-weight: 700 !important;
    letter-spacing: -0.045em !important;
}

/* .hh100 pins a page's <main> to exactly one viewport. With the wider
   grotesque the contact column runs past it and the footer printed on
   top of the last items. A floor, not a fixed height. */
body.redesign main.hh100 {
    height: auto;
    min-height: 100dvh;
}

body.redesign ::selection {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

body.redesign a:focus-visible,
body.redesign button:focus-visible,
body.redesign .accordion:focus-visible,
body.redesign input:focus-visible,
body.redesign textarea:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* ------------------------------------------------------------
   2. Headings
   ------------------------------------------------------------ */

body.redesign .sectionHeading {
    font-weight: 800 !important;
    letter-spacing: -0.055em;
    line-height: 0.9;
}

body.redesign .sectionHeadingSmall {
    font-weight: 700;
    letter-spacing: -0.04em;
}

body.redesign .sectionHeading em,
body.redesign .sectionHeadingSmall em,
body.redesign .heroRole em {
    color: var(--color-accent);
}

/* Section labels in the mono, led by a dot instead of a rule. */
body.redesign .sectionLabel {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--color-ink);
}

body.redesign .sectionLabel::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
}

/* Sections are separated by space and by their own coloured blocks,
   not by a rule across the page. */
body.redesign .sectionBlock + .sectionBlock {
    border-top: 0;
}

/* ------------------------------------------------------------
   3. Menu bar, logo, toggle
   ------------------------------------------------------------ */

body.redesign .menu {
    background: color-mix(in srgb, var(--color-bg) 82%, transparent);
    border-bottom: 1px solid var(--color-line);
}

body.redesign .menuLogo:hover { transform: none; }

/* styleComponents.css pins this button's fill to --color-sunken with
   !important, and its hover only changed the text to white — white on
   a near-white fill, 1.1:1. A pill like the buttons: paper at rest,
   ink on hover. */
body.redesign .langToggle {
    font-family: var(--font-mono);
    border-radius: var(--r-pill);
    border-color: var(--color-ink) !important;
    background-color: var(--color-raised) !important;
    color: var(--color-ink);
    transition: background-color var(--dur-quick) var(--ease-soft),
                color var(--dur-quick) var(--ease-soft);
}

body.redesign .langToggle:hover,
body.redesign .langToggle:focus-visible {
    transform: none;
    background-color: var(--color-ink) !important;
    color: var(--color-bg);
}

body.redesign .option {
    font-weight: 800;
    letter-spacing: -0.05em;
}

/* ------------------------------------------------------------
   4. Buttons — black pills, the figma.com primary
   ------------------------------------------------------------ */

body.redesign .btnPrimary,
body.redesign .btnSecondary {
    border-radius: var(--r-pill) !important;
    transform: none !important;
}

body.redesign .btnPrimary {
    background-color: var(--color-ink) !important;
    border-color: var(--color-ink) !important;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: background-color var(--dur-quick) var(--ease-soft), border-color var(--dur-quick) var(--ease-soft) !important;
}

/* Hover stays in the neutrals: the black pill darkens a step and the
   magnet and the cursor do the rest. */
body.redesign .btnPrimary:hover {
    background-color: var(--color-ink-soft) !important;
    border-color: var(--color-ink-soft) !important;
}

body.redesign .btnPrimary span,
body.redesign .btnSecondary span {
    font-weight: 700 !important;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--t-md) !important;
}

body.redesign .btnPrimary span { color: var(--color-on-accent) !important; }

/* The arrow that slides on hover. Drawn in CSS so the markup and the
   i18n string stay exactly as they were. */
body.redesign .btnPrimary::after {
    content: '→';
    color: var(--color-on-accent);
    font-size: 1.8rem;
    line-height: 1;
    transition: transform var(--dur-quick) var(--ease-swiss);
}

body.redesign .btnPrimary:hover::after { transform: translateX(5px); }

body.redesign .btnSecondary {
    background-color: var(--color-raised) !important;
}

/* The résumé buttons stacked three hover effects from three layers: a
   rounded blob from styleForms swelling over a full second, the label
   jumping 5px up, and an instant ink fill on top of both — so the fill
   arrived before the blob had started and the text moved on its own.
   One gesture now: ink rises from the bottom edge, the label stays put,
   and the arrow drops into the tray once. A press confirms the download
   by turning the fill to the accent (swissMotion.js sets .isDone). */
body.redesign .btnSecondary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: color var(--dur-quick) var(--ease-soft) !important;
}

body.redesign .btnSecondary::before {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    z-index: -1;
    background-color: var(--color-ink) !important;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--dur-quick) var(--ease-swiss),
                background-color var(--dur-quick) var(--ease-soft) !important;
}

body.redesign .btnSecondary:hover::before,
body.redesign .btnSecondary:focus-visible::before,
body.redesign .btnSecondary.isDone::before {
    transform: scaleY(1);
}

body.redesign .btnSecondary.isDone::before {
    background-color: var(--color-accent) !important;
}

body.redesign .btnSecondary:hover,
body.redesign .btnSecondary:focus-visible,
body.redesign .btnSecondary.isDone {
    color: var(--color-bg) !important;
}

body.redesign .btnSecondary span,
body.redesign .btnSecondary:hover span,
body.redesign .btnSecondary:active span {
    transform: none !important;
    transition: color var(--dur-quick) var(--ease-soft) !important;
}

body.redesign .btnSecondary:hover span,
body.redesign .btnSecondary:focus-visible span,
body.redesign .btnSecondary.isDone span {
    color: var(--color-bg) !important;
}

body.redesign .btnSecondary:active { scale: 0.98; }

body.redesign .btnDownload .iconDownload {
    transition: stroke var(--dur-quick) var(--ease-soft) !important;
}

body.redesign .btnDownload:hover .iconDownload,
body.redesign .btnDownload:focus-visible .iconDownload,
body.redesign .btnDownload.isDone .iconDownload {
    transform: none;
    stroke: var(--color-bg);
    animation: swissDrop 0.55s var(--ease-swiss);
}

body.redesign .btnDownload.isDone .iconDownload {
    animation: swissDrop 0.55s var(--ease-swiss) 2;
}

/* The arrow falls out through the tray and comes back in from above. */
@keyframes swissDrop {
    0%   { transform: translateY(0);    opacity: 1; }
    45%  { transform: translateY(7px);  opacity: 0; }
    46%  { transform: translateY(-7px); opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}

/* ------------------------------------------------------------
   5. Surfaces — rounded, and coloured by block
   ------------------------------------------------------------ */

body.redesign .projectCard,
body.redesign .casePanel,
body.redesign .confirmModalCard,
body.redesign .ghPanel,
body.redesign .nowGrid {
    border-radius: var(--r-card) !important;
}

body.redesign .projectShot,
body.redesign .projectShot img,
body.redesign .bggb,
body.redesign .panel .bggb,
body.redesign .caseShots img,
body.redesign .ghFeed,
body.redesign .ghChartWrap,
body.redesign .roleCard,
body.redesign .certCard,
body.redesign .hobbyBody .multiContent img {
    border-radius: var(--r-tile) !important;
}

body.redesign .inputNormal {
    border-radius: var(--r-field) !important;
}

body.redesign .projectOpen,
body.redesign .projectVisit,
body.redesign .item,
body.redesign .ghStat,
body.redesign .confirmModalClose {
    border-radius: var(--r-pill) !important;
}

body.redesign .accordion,
body.redesign .panel {
    border-radius: 0 !important;
}

body.redesign .projectOpen {
    background-color: var(--color-ink);
}

body.redesign .projectOpen:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

/* ---- apparent 3D ---------------------------------------------------
   See --extrude-* above. The face moves with `translate` (no layer
   rule owns it) while the side grows or shrinks to match, so the back
   of the block stays where it is: lifting is the face rising out of
   the slab, pressing is the face sinking into it. */
body.redesign .projectCard,
body.redesign .stepItem,
body.redesign .ghPanel,
body.redesign .nowItem {
    background-color: var(--color-raised) !important;
    border: var(--edge-line) !important;
    box-shadow: var(--extrude-6) !important;
    transform: none !important;
    transition: translate 0.22s var(--ease-swiss),
                box-shadow 0.22s var(--ease-swiss) !important;
}

@media (hover: hover) and (pointer: fine) {
    body.redesign .projectCard:hover,
    body.redesign .stepItem:hover,
    body.redesign .nowItem:hover {
        translate: -3px -3px;
        box-shadow: var(--extrude-9) !important;
    }
}

body.redesign .projectCard:active,
body.redesign .stepItem:active,
body.redesign .nowItem:active {
    translate: 5px 5px;
    box-shadow: var(--extrude-1) !important;
    transition-duration: 0.08s !important;
}

/* The GitHub panels are large and hold their own controls; they keep
   the depth but do not lift. */
body.redesign .ghPanel:hover { translate: none; }

/* Hover: the side fills with the card's hue and is outlined in ink.
   Generated: one rule per hue, the fills over the outline rings. */
@media (hover: hover) and (pointer: fine) {
    body.redesign .projectCard:nth-child(4n+1):hover,
    body.redesign .stepItem:nth-child(4n+1):hover,
    body.redesign .nowItem:nth-child(1):hover,
    body.redesign .contactPanel:hover {
        box-shadow: 1px 1px 0 var(--hue-lilac), 2px 2px 0 var(--hue-lilac), 3px 3px 0 var(--hue-lilac), 4px 4px 0 var(--hue-lilac), 5px 5px 0 var(--hue-lilac), 6px 6px 0 var(--hue-lilac), 7px 7px 0 var(--hue-lilac), 8px 8px 0 var(--hue-lilac), 9px 9px 0 var(--hue-lilac), 1px 1px 0 1.5px var(--color-ink), 2px 2px 0 1.5px var(--color-ink), 3px 3px 0 1.5px var(--color-ink), 4px 4px 0 1.5px var(--color-ink), 5px 5px 0 1.5px var(--color-ink), 6px 6px 0 1.5px var(--color-ink), 7px 7px 0 1.5px var(--color-ink), 8px 8px 0 1.5px var(--color-ink), 9px 9px 0 1.5px var(--color-ink) !important;
    }
    body.redesign .projectCard:nth-child(4n+2):hover,
    body.redesign .stepItem:nth-child(4n+2):hover,
    body.redesign .nowItem:nth-child(2):hover {
        box-shadow: 1px 1px 0 var(--hue-mint), 2px 2px 0 var(--hue-mint), 3px 3px 0 var(--hue-mint), 4px 4px 0 var(--hue-mint), 5px 5px 0 var(--hue-mint), 6px 6px 0 var(--hue-mint), 7px 7px 0 var(--hue-mint), 8px 8px 0 var(--hue-mint), 9px 9px 0 var(--hue-mint), 1px 1px 0 1.5px var(--color-ink), 2px 2px 0 1.5px var(--color-ink), 3px 3px 0 1.5px var(--color-ink), 4px 4px 0 1.5px var(--color-ink), 5px 5px 0 1.5px var(--color-ink), 6px 6px 0 1.5px var(--color-ink), 7px 7px 0 1.5px var(--color-ink), 8px 8px 0 1.5px var(--color-ink), 9px 9px 0 1.5px var(--color-ink) !important;
    }
    body.redesign .projectCard:nth-child(4n+3):hover,
    body.redesign .stepItem:nth-child(4n+3):hover,
    body.redesign .nowItem:nth-child(3):hover {
        box-shadow: 1px 1px 0 var(--hue-peach), 2px 2px 0 var(--hue-peach), 3px 3px 0 var(--hue-peach), 4px 4px 0 var(--hue-peach), 5px 5px 0 var(--hue-peach), 6px 6px 0 var(--hue-peach), 7px 7px 0 var(--hue-peach), 8px 8px 0 var(--hue-peach), 9px 9px 0 var(--hue-peach), 1px 1px 0 1.5px var(--color-ink), 2px 2px 0 1.5px var(--color-ink), 3px 3px 0 1.5px var(--color-ink), 4px 4px 0 1.5px var(--color-ink), 5px 5px 0 1.5px var(--color-ink), 6px 6px 0 1.5px var(--color-ink), 7px 7px 0 1.5px var(--color-ink), 8px 8px 0 1.5px var(--color-ink), 9px 9px 0 1.5px var(--color-ink) !important;
    }
    body.redesign .projectCard:nth-child(4n+4):hover,
    body.redesign .stepItem:nth-child(4n+4):hover {
        box-shadow: 1px 1px 0 var(--hue-sky), 2px 2px 0 var(--hue-sky), 3px 3px 0 var(--hue-sky), 4px 4px 0 var(--hue-sky), 5px 5px 0 var(--hue-sky), 6px 6px 0 var(--hue-sky), 7px 7px 0 var(--hue-sky), 8px 8px 0 var(--hue-sky), 9px 9px 0 var(--hue-sky), 1px 1px 0 1.5px var(--color-ink), 2px 2px 0 1.5px var(--color-ink), 3px 3px 0 1.5px var(--color-ink), 4px 4px 0 1.5px var(--color-ink), 5px 5px 0 1.5px var(--color-ink), 6px 6px 0 1.5px var(--color-ink), 7px 7px 0 1.5px var(--color-ink), 8px 8px 0 1.5px var(--color-ink), 9px 9px 0 1.5px var(--color-ink) !important;
    }
}


/* Line complements inside the cards: the screenshot is framed in the
   same ink line as the card, tags are outlined rather than filled, and
   the secondary action is an outlined pill. */
body.redesign .projectCard .projectShot {
    border: var(--edge-line);
}

body.redesign .projectCard .item,
body.redesign .ghPanel .ghStat {
    background-color: var(--color-raised) !important;
    border: 1px solid var(--color-ink) !important;
}

body.redesign .projectCard .projectVisit {
    background-color: var(--color-raised) !important;
    border: 1.5px solid var(--color-ink) !important;
    color: var(--color-ink) !important;
}

body.redesign .stepItem {
    padding: 22px 22px 24px !important;
    border-radius: var(--r-tile);
}

/* A rule under the step's phase label, drawn to the card's padding. */
body.redesign .stepItem .stepPhase {
    display: block;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-ink);
}

/* GitHub: the chart and the feed are wells, outlined in ink. */
body.redesign .ghChartWrap,
body.redesign .ghFeed {
    background-color: var(--color-sunken) !important;
    border: 1px solid var(--color-ink) !important;
}

/* Skills, roles and certificates: the same slab, shallower. */
body.redesign .panel .bggb,
body.redesign .roleCard,
body.redesign .certCard {
    background-color: var(--color-raised) !important;
    border: var(--edge-line) !important;
    box-shadow: var(--extrude-4) !important;
    transition: translate 0.22s var(--ease-swiss),
                box-shadow 0.22s var(--ease-swiss) !important;
}
@media (hover: hover) and (pointer: fine) {
    body.redesign .panel .bggb:hover,
    body.redesign .roleCard:hover,
    body.redesign .certCard:hover {
        translate: -2px -2px;
        box-shadow: var(--extrude-6s) !important;
    }
}
body.redesign .roleCard.is-current,
body.redesign .certCard.is-key {
    background-color: var(--tint-lilac) !important;
}

/* The shallow slabs do the same at their own depth. */
@media (hover: hover) and (pointer: fine) {
    body.redesign .skillRow .bggb:nth-child(4n+1):hover,
    body.redesign .roleCard:nth-child(4n+1):hover,
    body.redesign .certCard:nth-child(4n+1):hover {
        box-shadow: 1px 1px 0 var(--hue-lilac), 2px 2px 0 var(--hue-lilac), 3px 3px 0 var(--hue-lilac), 4px 4px 0 var(--hue-lilac), 5px 5px 0 var(--hue-lilac), 6px 6px 0 var(--hue-lilac), 1px 1px 0 1.5px var(--color-ink), 2px 2px 0 1.5px var(--color-ink), 3px 3px 0 1.5px var(--color-ink), 4px 4px 0 1.5px var(--color-ink), 5px 5px 0 1.5px var(--color-ink), 6px 6px 0 1.5px var(--color-ink) !important;
    }
    body.redesign .skillRow .bggb:nth-child(4n+2):hover,
    body.redesign .roleCard:nth-child(4n+2):hover,
    body.redesign .certCard:nth-child(4n+2):hover {
        box-shadow: 1px 1px 0 var(--hue-mint), 2px 2px 0 var(--hue-mint), 3px 3px 0 var(--hue-mint), 4px 4px 0 var(--hue-mint), 5px 5px 0 var(--hue-mint), 6px 6px 0 var(--hue-mint), 1px 1px 0 1.5px var(--color-ink), 2px 2px 0 1.5px var(--color-ink), 3px 3px 0 1.5px var(--color-ink), 4px 4px 0 1.5px var(--color-ink), 5px 5px 0 1.5px var(--color-ink), 6px 6px 0 1.5px var(--color-ink) !important;
    }
    body.redesign .skillRow .bggb:nth-child(4n+3):hover,
    body.redesign .roleCard:nth-child(4n+3):hover,
    body.redesign .certCard:nth-child(4n+3):hover {
        box-shadow: 1px 1px 0 var(--hue-peach), 2px 2px 0 var(--hue-peach), 3px 3px 0 var(--hue-peach), 4px 4px 0 var(--hue-peach), 5px 5px 0 var(--hue-peach), 6px 6px 0 var(--hue-peach), 1px 1px 0 1.5px var(--color-ink), 2px 2px 0 1.5px var(--color-ink), 3px 3px 0 1.5px var(--color-ink), 4px 4px 0 1.5px var(--color-ink), 5px 5px 0 1.5px var(--color-ink), 6px 6px 0 1.5px var(--color-ink) !important;
    }
    body.redesign .skillRow .bggb:nth-child(4n+4):hover,
    body.redesign .roleCard:nth-child(4n+4):hover,
    body.redesign .certCard:nth-child(4n+4):hover {
        box-shadow: 1px 1px 0 var(--hue-sky), 2px 2px 0 var(--hue-sky), 3px 3px 0 var(--hue-sky), 4px 4px 0 var(--hue-sky), 5px 5px 0 var(--hue-sky), 6px 6px 0 var(--hue-sky), 1px 1px 0 1.5px var(--color-ink), 2px 2px 0 1.5px var(--color-ink), 3px 3px 0 1.5px var(--color-ink), 4px 4px 0 1.5px var(--color-ink), 5px 5px 0 1.5px var(--color-ink), 6px 6px 0 1.5px var(--color-ink) !important;
    }
}



/* About, "right now": three separate sheets rather than one strip. */
body.redesign .nowGrid {
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible;
    gap: 16px;
    background: none !important;
}
body.redesign .nowItem { border-radius: var(--r-tile); }

/* Skill tiles. They were a centred flex row with the icon first, so a
   tile with an icon started its text 40px further right than one
   without, and the icon sat on the tile's left border. Now the name
   always starts at the padding edge, the icon (when there is one) is a
   24px mark in a column of its own on the right, and the level bar
   drops under its label so INTERMEDIATE never pushes it out of the
   tile. */
body.redesign .skillRow .bggb {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    padding: 16px 18px !important;
    text-align: left;
}

body.redesign .skillRow .bggb > .VerticalLayout {
    order: 1;
    min-width: 0;
    align-items: flex-start;
}

body.redesign .skillRow .skillIcon {
    order: 2;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

body.redesign .skillRow .skillLevel {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
    margin-top: 6px;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
}

@media (hover: hover) and (pointer: fine) {
    body.redesign .panel .bggb:hover {
        transform: none;
        border-color: var(--color-ink) !important;
    }
}

/* ------------------------------------------------------------
   5b. Type roles across the sections
   The two families collapsed onto one grotesque, but the rules kept
   the weights they had in Fraunces — 400/500, which a serif carries at
   display size and a grotesque does not. Every title that was a serif
   display face becomes a bold grotesque; every tracked uppercase
   label becomes the mono. Body copy is untouched.
   ------------------------------------------------------------ */

body.redesign .projectName,
body.redesign .roleName,
body.redesign .certTitle,
body.redesign h2.caseTitle,
body.redesign h3.stepTitle,
body.redesign .ghHandle,
body.redesign .fact dt,
body.redesign .contactLink {
    font-weight: 700 !important;
    letter-spacing: -0.03em;
}

/* Figures: the step numbers, the pledge values, contribution counts. */
body.redesign .stepNo,
body.redesign .pledgeValue,
body.redesign .ghContrib b {
    font-weight: 700;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

/* Statements: large reading lines, a step heavier than body. */
body.redesign .aboutBio,
body.redesign .nowCopy {
    font-weight: 500;
    letter-spacing: -0.025em;
}

body.redesign .item,
body.redesign .typeGS,
body.redesign .projectRole,
body.redesign .projectHost,
body.redesign .caseHost,
body.redesign .caseRole,
body.redesign .caseShotsLabel,
body.redesign .rolePeriod,
body.redesign .certYear,
body.redesign .stepPhase,
body.redesign .pledgeUnit,
body.redesign .nowLabel,
body.redesign .fieldLabel,
body.redesign .ghKind,
body.redesign .ghLegend,
body.redesign .ghEventWhen,
body.redesign .ghHeatmap .ghMonth,
body.redesign .ghHeatmap .ghWeekday {
    font-family: var(--font-mono) !important;
    font-weight: 400;
    letter-spacing: 0.04em !important;
}

/* The card actions read like the hero's buttons: bold, sentence case. */
body.redesign .projectOpen,
body.redesign .projectVisit {
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

/* Close buttons: round, inked. */
body.redesign .caseClose,
body.redesign .confirmModalClose {
    border-radius: 50% !important;
    border-color: var(--color-ink) !important;
}

body.redesign .caseClose:hover,
body.redesign .confirmModalClose:hover {
    background-color: var(--color-ink);
    color: var(--color-bg);
}

/* Footer: a mono colophon on the measure, under an ink rule. */
body.redesign footer[class] {
    font-family: var(--font-mono) !important;
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    align-items: flex-start !important;
    padding: 28px var(--hero-gutter) !important;
    border-top: 1px solid var(--color-line);
    color: var(--color-ink-muted);
}

/* ------------------------------------------------------------
   5c. Contact form
   Was three underlines: a field was a rule with a placeholder on it,
   and the message "box" was the same single rule — a long message ran
   down the page with nothing around it. Now each field is a box on the
   grid: name and email side by side, the message full width and tall.
   The markup is a flat run of label/control pairs, so the grid places
   them by id rather than needing wrappers.
   ------------------------------------------------------------ */

body.redesign #contactForm {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--swiss-gap);
    row-gap: 0;
    align-items: end;
}

body.redesign #contactForm > .sectionHeadingSmall {
    grid-column: 1 / -1;
    line-height: 0.98;
    margin-bottom: 36px !important;
}

/* The big title on the left is sized to the viewport, but its column is
   not: in Spanish it is one word, "Contáctame.", and at 1366 it ran
   154px past the column into the form. Sized to the column instead —
   cqi is 1% of the container — so it fits however long the word is. */
body.redesign .contactIntro {
    container-type: inline-size;
}

body.redesign .contactIntro .sectionHeading {
    font-size: min(clamp(5rem, 9vw, 12rem), 14.5cqi);
}

body.redesign #contactForm label[for="cName"] { grid-column: 1; grid-row: 2; }
body.redesign #contactForm #cName             { grid-column: 1; grid-row: 3; }
body.redesign #contactForm label[for="cMail"] { grid-column: 2; grid-row: 2; }
body.redesign #contactForm #cMail             { grid-column: 2; grid-row: 3; }
body.redesign #contactForm label[for="cMsg"]  { grid-column: 1 / -1; grid-row: 4; margin-top: 22px; }
body.redesign #contactForm #cMsg              { grid-column: 1 / -1; grid-row: 5; }
body.redesign #contactForm > button[type="submit"] {
    grid-column: 1 / -1;
    grid-row: 6;
    justify-self: start;
    margin-top: 22px;
}

body.redesign #contactForm .fieldLabel {
    margin-bottom: 8px;
    color: var(--color-ink);
}

/* The form is the Figma login's sheet: white, a 1px neutral edge, a
   soft shadow, and fields that are grey-edged boxes until focus rings
   them in the accent. */
body.redesign .contactPanel {
    background-color: var(--color-raised);
    border: var(--edge-line);
    border-radius: var(--r-card);
    box-shadow: var(--extrude-6);
    transition: translate 0.22s var(--ease-swiss), box-shadow 0.22s var(--ease-swiss);
    padding: 36px;
}

@media (hover: hover) and (pointer: fine) {
    body.redesign .contactPanel:hover { translate: -3px -3px; }
}

@media (max-width: 600px) {
    body.redesign .contactPanel { padding: 24px 18px; margin: 0 -2vw; }
}

body.redesign .inputNormal {
    display: block !important;
    box-sizing: border-box;
    border: 1.5px solid var(--color-ink) !important;
    background: var(--color-raised) !important;
    padding: 12px 14px !important;
    line-height: 1.5;
    transition: box-shadow var(--dur-quick) var(--ease-soft),
                border-color var(--dur-quick) var(--ease-soft);
}

body.redesign .inputNormal::placeholder {
    color: var(--color-ink-faint);
    letter-spacing: 0;
}

body.redesign .inputNormal:hover { box-shadow: var(--extrude-1); }

/* Focus is the login's ring: the edge turns accent and a soft halo
   sits outside it, so the text never moves. */
body.redesign .inputNormal:focus,
body.redesign .inputNormal:focus-visible {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px var(--color-focus-halo) !important;
    outline: none;
}

body.redesign textarea.inputNormal {
    min-height: 180px;
    resize: vertical;
}

@media (max-width: 600px) {
    body.redesign #contactForm { grid-template-columns: 1fr; }
    body.redesign #contactForm label[for="cMail"] { grid-column: 1; grid-row: 4; margin-top: 22px; }
    body.redesign #contactForm #cMail             { grid-column: 1; grid-row: 5; }
    body.redesign #contactForm label[for="cMsg"]  { grid-row: 6; }
    body.redesign #contactForm #cMsg              { grid-row: 7; }
    body.redesign #contactForm > button[type="submit"] { grid-row: 8; justify-self: stretch; }
}

/* swissMotion.js splits these headings' <em> into per-letter inline
   blocks for the hop, and at this weight and tracking the browser
   was free to break between any two of them: "the r / equirements".
   Keep the emphasised word whole. */
body.redesign .sectionHeading em,
body.redesign .sectionHeadingSmall em {
    white-space: nowrap;
}

/* ------------------------------------------------------------
   6. Home hero
   ------------------------------------------------------------ */

body.redesign .swissHero {
    min-height: 100vh;
    padding: 104px var(--hero-gutter) 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

/* Meta row: four cells on the grid, in the mono. */
body.redesign .swissMeta {
    display: grid;
    /* The location line is the longest of the four, so it gets the
       widest cell instead of wrapping; the clock only needs its own. */
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr) auto;
    column-gap: var(--swiss-gap);
    align-items: center;
    padding-top: 8px;
}

body.redesign .swissMeta > * {
    font-family: var(--font-mono) !important;
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--color-ink) !important;
    margin: 0 !important;
    gap: 0 !important;
}

body.redesign .swissMeta .heroLabel::before,
body.redesign .swissMeta .heroFounder::before {
    display: none;
}

body.redesign .swissClock {
    justify-self: end;
    font-variant-numeric: tabular-nums;
    color: var(--color-ink-muted) !important;
}

/* The name. Was an absolutely positioned italic signature; now it
   is in flow, upright, and it sets the measure for everything else. */
body.redesign .swissHero .diagonalTitle {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 28px;
    font-family: var(--font-sans);
    font-size: clamp(6.4rem, 11.6vw, 19rem);
    font-weight: 800;
    line-height: 0.86;
    letter-spacing: -0.06em;
    gap: 0;
    pointer-events: auto;
}

body.redesign .swissHero .diagonalTitle .firstName,
body.redesign .swissHero .diagonalTitle .lastName {
    font-family: var(--font-sans) !important;
    font-weight: inherit !important;
    margin-left: 0;
    display: block;
    line-height: 0.92;
    overflow: hidden;
    /* Room for the rise to start below the line without clipping the
       bottom of the glyphs once they land. */
    padding-bottom: 0.02em;
}

body.redesign .swissHero .diagonalTitle .ch {
    font-family: var(--font-sans) !important;
    font-weight: 800;
    opacity: 1;
    transform: none;
    animation: swissRise var(--dur-draw) var(--ease-swiss) both !important;
    transition: font-weight 0.45s var(--ease-soft);
    will-change: auto;
}

/* Each letter carries --i in the markup, so the stagger is one rule.
   The full stop's index is set a few steps past the last letter, so
   it lands a beat after the name. */
body.redesign .swissHero .diagonalTitle .ch {
    animation-delay: calc(var(--t-name) + var(--i, 0) * 45ms) !important;
}

body.redesign .swissHero .diagonalTitle .swissDot {
    color: var(--color-accent);
}

@keyframes swissRise {
    from { transform: translateY(108%); }
    to   { transform: translateY(0); }
}

@keyframes swissFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

body.redesign .swissMeta,
body.redesign .swissHero .heroIntroWrap,
body.redesign .swissMarquee {
    animation: swissFadeUp var(--dur-move) var(--ease-swiss) both;
}

body.redesign .swissMeta { animation-delay: var(--t-meta); }
body.redesign .swissHero .heroIntroWrap { animation-delay: var(--t-intro); }
body.redesign .swissMarquee { animation-delay: var(--t-marquee); }

/* Intro row: lead, figures, actions on one 12-column grid. */
body.redesign .swissHero .heroIntroWrap {
    margin-top: auto;
    padding: 48px 0 36px;
    display: block;
}

body.redesign .swissHero .heroIntro {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--swiss-gap);
    row-gap: 32px;
    align-items: end;
}

/* 4 / 5 / 3 rather than 5 / 4 / 3: the third figure is "10,000+",
   seven characters, and at four columns its cell was narrower than the
   number, which printed over the Contact button. */
body.redesign .swissLead {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.redesign .swissHero .heroRole {
    font-family: var(--font-sans);
    font-size: clamp(3.4rem, 3.2vw, 5rem);
    font-weight: 800 !important;
    line-height: 0.95;
    letter-spacing: -0.045em;
}

body.redesign .swissHero .heroCopy {
    font-size: var(--t-lg);
    line-height: 1.5;
    color: var(--color-ink);
    max-width: 46ch;
}

body.redesign .swissHero .heroStats {
    grid-column: 5 / span 5;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--swiss-gap);
    margin: 0;
    padding: 0;
    border: 0;
}

body.redesign .swissHero .heroStat {
    position: relative;
    padding-top: 12px;
    font-size: 1.3rem;
    letter-spacing: 0;
    color: var(--color-ink-muted);
}

/* The rule on top of each figure draws itself in. */
body.redesign .swissHero .heroStat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-ink);
    transform-origin: left;
    animation: swissDraw var(--dur-draw) var(--ease-draw) both;
    animation-delay: var(--t-figures);
}

body.redesign .swissHero .heroStat:nth-child(2)::before { animation-delay: calc(var(--t-figures) + 0.1s); }
body.redesign .swissHero .heroStat:nth-child(3)::before { animation-delay: calc(var(--t-figures) + 0.2s); }

@keyframes swissDraw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

body.redesign .swissHero .heroStat b {
    font-family: var(--font-sans);
    font-size: clamp(3rem, 2.4vw, 4.2rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-bottom: 4px;
}

body.redesign .swissActions {
    grid-column: 10 / span 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.redesign .swissActions .btnPrimary {
    grid-column: 1 / -1;
    padding: 16px 20px !important;
}

body.redesign .swissActions .btnSecondary {
    justify-content: center;
    padding: 12px 10px !important;
}

body.redesign .swissHero .scrollCue { display: none; }

/* Project marquee along the foot of the hero. */
body.redesign .swissMarquee {
    margin: 0 calc(-1 * var(--hero-gutter));
    height: 52px;
    border-top: 1px solid var(--color-line);
    overflow: hidden;
    display: flex;
    align-items: center;
}

body.redesign .swissMarqueeTrack {
    display: flex;
    flex-shrink: 0;
    width: max-content;
    animation: swissMarquee 40s linear infinite;
}

body.redesign .swissMarquee:hover .swissMarqueeTrack,
body.redesign .swissMarquee:focus-within .swissMarqueeTrack {
    animation-play-state: paused;
}

body.redesign .swissMarqueeSet {
    display: flex;
    flex-shrink: 0;
}

body.redesign .swissMarqueeItem {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 28px;
    white-space: nowrap;
    font-size: var(--t-md);
    font-weight: 500;
    color: var(--color-ink);
    text-decoration: none;
    transition: color var(--dur-quick) var(--ease-soft);
}

body.redesign .swissMarqueeItem:hover { color: var(--color-accent); }

body.redesign .swissMarqueeNo {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--color-ink-muted);
}

@keyframes swissMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* While the loader is up the whole entrance waits, delays included —
   a paused animation does not run down its delay either — so it plays
   to the reveal instead of behind the curtain. */
html.isLoading body.redesign .swissHero,
html.isLoading body.redesign .swissHero *,
html.isLoading body.redesign .swissHero *::before,
html.isLoading body.redesign .swissHero .diagonalTitle .ch {
    animation-play-state: paused !important;
}

/* Entrances outside the hero. swissMotion.js adds .swissPending only
   when it is going to animate, so without JS (or with reduced motion)
   nothing here applies and every block is simply visible. */
/* `translate`, not `transform`, so the offset never fights a hover
   or a layer rule that owns transform. The transition is !important
   because the buttons pin theirs; swissMotion.js drops both classes
   once the entrance is over, and the element's own transitions are
   back for its hovers. */
body.redesign .swissPending {
    opacity: 0;
    translate: 0 28px;
}

body.redesign .swissPending.swissIn {
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--dur-move) var(--ease-swiss),
                translate var(--dur-draw) var(--ease-swiss) !important;
    transition-delay: var(--swiss-stagger, 0ms) !important;
}

/* Anchor jumps glide, and land below the fixed menu bar rather than
   under it. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
html { scroll-padding-top: 88px; }

/* Language switch: i18n.js adds .isSwitching for 180ms, swaps every
   string while the page is out, then removes it. */
body.redesign main,
body.redesign footer,
body.redesign .menuOptions {
    transition: opacity 0.35s var(--ease-swiss), translate 0.35s var(--ease-swiss);
}

html.isSwitching body.redesign main,
html.isSwitching body.redesign footer,
html.isSwitching body.redesign .menuOptions {
    opacity: 0;
    translate: 0 8px;
    transition-duration: 0.18s;
}

/* Reading progress: a hairline of accent along the very top edge,
   driven by swissMotion.js as a scaleX so it never triggers layout. */
.swissProgress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-accent);
    transform-origin: left;
    transform: scaleX(0);
    z-index: 2001;
    pointer-events: none;
}

/* Cursor (swissMotion.js, section 8). html.hasCursor is set only once
   the element exists, so the system pointer is never hidden without a
   replacement on screen, and never over a text field. */
html.hasCursor,
html.hasCursor * {
    cursor: none !important;
}

html.hasCursor input:not([type="submit"]):not([type="button"]),
html.hasCursor textarea,
html.hasCursor select,
html.hasCursor [contenteditable] {
    cursor: text !important;
}

.swissCursor,
.swissCursorDot {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483646;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-quick) var(--ease-soft);
}

.swissCursor.is-live,
.swissCursorDot.is-live { opacity: 1; }
.swissCursor.is-text,
.swissCursorDot.is-text { opacity: 0; }

/* The pointer itself: a 6px paper dot with an ink ring, so it reads
   on the white page and in the middle of the black bubble alike. It
   sits above the bubble. */
.swissCursorDot { z-index: 2147483647; }
.swissCursorDot::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 6px;
    translate: -50% -50%;
    border-radius: 50%;
    background: var(--color-bg);
    box-shadow: 0 0 0 1.5px var(--color-ink);
    transition: scale var(--dur-quick) var(--ease-swiss);
}
.swissCursorDot.is-label::before { scale: 0; }

/* The bubble: solid ink, flat — no gradient, no rim, no blur. Its
   character is all in the motion: the spring in swissMotion.js and
   the stretch along its path. Size changes overshoot slightly, so it
   swells like something with a surface rather than snapping. */
.swissCursorDisc {
    position: absolute;
    left: 0;
    top: 0;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    background: var(--color-ink);
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                margin 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.swissCursor.is-link .swissCursorDisc {
    width: 96px;
    height: 96px;
    margin: -48px 0 0 -48px;
}

.swissCursor.is-label .swissCursorDisc {
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
}

/* Pressed, the bubble squashes; released, the overshooting curve
   gives it the pop back. */
.swissCursor.is-down .swissCursorDisc { scale: 0.8; }

.swissCursorLabel {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    translate: -50% -50%;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 1.05rem;
    line-height: 1.25;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-on-accent);
    opacity: 0;
    scale: 0.6;
    transition: opacity 0.2s var(--ease-soft),
                scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.swissCursor.is-label .swissCursorLabel {
    opacity: 1;
    scale: 1;
    transition-delay: 0.06s;
}

/* ------------------------------------------------------------
   7. Scroll reveals
   The .box-* blocks used to slide 100px in from the side over 0.5s,
   a cartoon's entrance. Here they rise a short way and settle, on
   the same curve as the hero.
   ------------------------------------------------------------ */

body.redesign .box-left,
body.redesign .box-right,
body.redesign .box-bottom {
    transform: translateY(24px);
    transition: opacity var(--dur-move) var(--ease-swiss),
                transform var(--dur-move) var(--ease-swiss);
}

body.redesign .box-left.show,
body.redesign .box-right.show,
body.redesign .box-bottom.show {
    transform: none;
}

/* ------------------------------------------------------------
   8. Smaller screens
   ------------------------------------------------------------ */

@media (max-width: 1100px) {
    body.redesign .swissLead { grid-column: 1 / -1; }
    body.redesign .swissHero .heroStats { grid-column: 1 / span 7; }
    body.redesign .swissActions { grid-column: 8 / -1; }
}

/* The redesign's phone rules centre the hero and lift the name above
   everything with order:-1, all !important. Swiss is flush-left and in
   source order, so each of those is answered here. The one thing kept
   from them is the order of actions before figures: the résumé buttons
   stay on the opening screen of a 390x844. */
@media (max-width: 768px) {
    body.redesign .swissHero {
        padding: 92px 6vw 0 !important;
        min-height: 0 !important;
    }
    body.redesign .swissMeta { grid-template-columns: 1fr 1fr; row-gap: 6px; }
    body.redesign .swissMeta > * { font-size: 1.05rem !important; }
    body.redesign .swissHero .diagonalTitle {
        order: 0 !important;
        align-self: stretch !important;
        margin: 24px 0 0 !important;
        font-size: 20vw !important;
        align-items: flex-start !important;
        text-align: left;
    }
    body.redesign .swissHero .heroIntroWrap { margin-top: 32px; padding: 0 0 32px !important; }
    body.redesign .swissHero .heroIntro {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        text-align: left !important;
        max-width: none !important;
        gap: 24px;
    }
    body.redesign .swissHero .heroIntro * { text-align: left !important; }
    body.redesign .swissActions { order: 1; }
    body.redesign .swissHero .heroStats {
        order: 2;
        margin-top: 4px !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    body.redesign .swissHero .heroStat { font-size: 1.15rem; }
    body.redesign .swissHero .heroStat b { font-size: clamp(1.8rem, 6vw, 2.4rem); }
    body.redesign .swissMarquee { margin: 0 -6vw; }
}

/* ------------------------------------------------------------
   9. Reduced motion: everything is already where it lands
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    body.redesign .swissHero .diagonalTitle .ch,
    body.redesign .swissMeta,
    body.redesign .swissHero .heroIntroWrap,
    body.redesign .swissMarquee,
    body.redesign .swissHero .heroStat::before,
    body.redesign .box-left,
    body.redesign .box-right,
    body.redesign .box-bottom {
        animation: none !important;
        transition: none !important;
    }
    body.redesign .box-left,
    body.redesign .box-right,
    body.redesign .box-bottom {
        opacity: 1;
        transform: none;
    }
    body.redesign .swissMarqueeTrack { animation: none; }
    body.redesign .btnDownload .iconDownload { animation: none !important; }
    .swissProgress { display: none; }
    body.redesign .swissMarquee { overflow-x: auto; }
}