/*
 * /about-2/ — About Mythiq.net.
 *
 * THIS PAGE HAS ITS OWN DESIGN SYSTEM AND ITS OWN CHOREOGRAPHY. Filip's brief:
 * super advanced, beautiful, eye-catching, with moving elements and transitions
 * that leave a first-time visitor breathless. Everything below is local to the
 * page, scoped under `.mq`, and only about.php loads this file — the site chrome
 * and every other page are untouched.
 *
 * THE MATERIAL
 *   the beam      `--beam`, brand blue run out into cyan, painted INTO text via
 *                 background-clip. The accent is never a box or a chip.
 *   the outline   `-webkit-text-stroke` on the rail year, which is what gives
 *                 the page depth without adding colour.
 *   the hairline  one 1px rule at 12% white, the only divider on the page.
 *   the void      #08090b, with two drifting aurora blooms and fixed film grain
 *                 over the whole thing.
 *
 * THE CHOREOGRAPHY, AND WHERE EACH PIECE IS DRIVEN FROM
 *   masks     `.mq-mask i` rises out of a clipping span. CSS animation with a
 *             per-word delay off `--i`; runs once, on load, for the headline.
 *   reveals   `[data-reveal]` / `[data-unmask]`, released by IntersectionObserver
 *             (about.js) and never re-hidden.
 *   creed     `.mq-cw` words light in sequence — about.js maps the band's travel
 *             through the viewport onto a word index.
 *   figures   counters + a meter that fills; both fire once, on arrival.
 *   rail      the story pins (`position: sticky`) and its track is translated in
 *             X off the same scroll progress that fills its progress line.
 *   stack     the value tiles are sticky at stepped offsets, so each rides up
 *             over the last; about.js sets `--out` on the ones underneath so
 *             they scale and dim as they go.
 *
 * THREE RULES THIS FILE IS BUILT ON
 *   0. THE TYPE AND THE MEASURE ARE THE SITE'S, not this page's own. Headings
 *      come from the `--t-*` steps in `.mq` below (ceiling 59px, the largest
 *      heading anywhere on the site), body is 19px, and `.mq-wrap` restates
 *      `.container`. The choreography is this page's licence; the type is not.
 *   1. Nothing that carries meaning is animated INTO existence unless JS is
 *      present: every hidden state lives under `.mq-js`, which an inline script
 *      sets during parse. JS blocked ⇒ a plain, complete, readable page.
 *   2. `overflow: hidden` is never used on an ancestor of a sticky element — it
 *      makes a scroll container and silently kills the sticky. `.mq` uses
 *      `overflow-x: clip`, which cuts without creating one. That bug cost the
 *      story its pin once already.
 */

.mq {
    /* Stage */
    --void: #08090b;
    --void-2: #0d0f12;
    --ink: #f4f6f8;
    --ink-soft: rgba(244, 246, 248, 0.64);
    --ink-faint: rgba(244, 246, 248, 0.34);
    --hair: rgba(255, 255, 255, 0.12);
    --beam: linear-gradient(115deg, var(--mythiq-blue) 0%, var(--mythiq-hover-blue) 42%, #7fe6ff 100%);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* THE CARD SURFACE, SHARED BY EVERY CARDED SECTION (2026-08-21). The story
       cards, the value cards and the offer panel were three flat washes of white
       at 1–4% on black, edged with one hairline — at desktop width that is a lot
       of near-invisible rectangle. They carry a corner light now: a blue radial
       pinned to the top-left over the same vertical wash, so a card has a lit
       edge and a shaded one instead of one even tone. `--radius` is the site's
       own card radius (aliased to --radius-lg in ui.css) rather than the
       3px this page had picked for itself. */
    --card-light: radial-gradient(115% 85% at 0% 0%, color-mix(in srgb, var(--mythiq-hover-blue) 9%, transparent) 0%, color-mix(in srgb, var(--mythiq-hover-blue) 0%, transparent) 58%);
    --card-wash: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.012) 100%);
    /* Where a pinned section's content has to start to clear the header pill. */
    --top: calc(var(--header-offset) + var(--header-height));

    /* THE TYPE SCALE IS THE SITE'S, NOT THIS PAGE'S OWN (2026-08-21).
       Filip: "make consistent Heading — max size must be as same as H1 on other
       pages or H2 on other pages." The page had been running display sizes
       nothing else on the site uses — an 84px h1 and an 88px rail year, against
       a site whose LARGEST heading anywhere is 59px (`.esoc-title`,
       `.wow-hero-title`, `.story-title`, `.moretools-title`). So every heading
       below now lands on one of style.css's own steps —
       59 / 53 / 48 / 39 / 30 / 24 — and 59px is the page's ceiling.

       The clamps survive because this page still has to be fluid, but each one
       is pinned at BOTH ends to the site: the top is the site's desktop value
       and is reached at exactly 1600px (the width the whole site is measured
       at), the bottom is what style.css gives the same heading at 480px. The
       page therefore matches the rest of the site exactly at both ends and only
       interpolates between them. DO NOT raise a top end past 3.6875rem. */
    --t-h1:      clamp(2rem,      3.70vw, 3.6875rem);  /* 32 → 59, site h1  */
    --t-display: clamp(1.875rem,  3.32vw, 3.3125rem);  /* 30 → 53           */
    --t-quote:   clamp(1.75rem,   3.00vw, 3rem);       /* 28 → 48           */
    --t-h2:      clamp(1.5rem,    2.44vw, 2.4375rem);  /* 24 → 39, site h2  */
    --t-h3:      clamp(1.375rem,  1.88vw, 1.875rem);   /* 22 → 30           */
    --t-h4:      clamp(1.25rem,   1.50vw, 1.5rem);     /* 20 → 24           */

    /* `.container`'s gutter, as one value. It lives here rather than in each
       rule because the full-bleed rail track has to reach it too, and a media
       query on this property beats source order everywhere it is used. */
    --gutter: 75px;

    position: relative;
    z-index: 0;          /* own stacking context: the fixed grain cannot cover
                            the site header, which sits at z-index 1000 */
    isolation: isolate;
    background: var(--void);
    color: var(--ink);
    /* CLIP, NEVER HIDDEN — see rule 2 in the file header. */
    overflow-x: clip;
    /* The site reads at 19px (style.css sets 19px/28px on body, and every other
       page inherits it). This page was the only one at 17px. Same size now, but
       the generous leading stays — these are long paragraphs on a black field,
       not the homepage's two-line blurbs, and 1.7 lands the line box within a
       pixel of where 17/1.8 already had it, so nothing below reflows. */
    font-size: 19px;
    line-height: 1.7;
}

.mq p {
    color: var(--ink-soft);
    font-size: 19px;
    line-height: 1.7;
}

.mq a { color: inherit; }

/* THE ACCENT IS A COLOUR, NOT A GRADIENT. Gradient-filled words in every
   heading is the single most generated-looking thing a page can do, and Filip
   called it: solid brand blue, the same accent the rest of the site uses. The
   `--beam` gradient survives only where it is not text — the progress bars, the
   meters, the play button and the CTA fill. */
.mq em,
.mq .mq-beam {
    font-style: normal;
    color: var(--mythiq-hover-blue);
}

/* THE SAME MEASURE AS `.container`, restated rather than approximated, so this
   page's left edge lines up with the header, the footer and every other page
   instead of sitting 25px inside them. style.css: `max-width: 1710px;
   padding: 0 75px`, dropping to 20px at 768. The old fluid clamp landed content
   on x=100 at 1600 and on x=48 at 1024 — neither of which is a measure anything
   else on the site uses. */
.mq-wrap {
    width: 100%;
    max-width: 1710px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

@media (max-width: 768px) {
    .mq { --gutter: 20px; }
}

/* Film grain. Fixed, so it sits still while the page moves under it — which is
   what makes it read as grain rather than as texture printed on the page. */
.mq-grain {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0.055;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The scroll beam: 3px of gradient across the top of the window. Above the
   header pill (z-index 1000), below anything modal. */
.mq-beam-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1001;
    pointer-events: none;
}

.mq-beam-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--beam);
    box-shadow: 0 0 18px color-mix(in srgb, var(--mythiq-hover-blue) 70%, transparent);
}

/* Shared headings ---------------------------------------------------------- */

/* THE SITE'S TYPOGRAPHY, NOT THE SITE'S FURNITURE. Weight, family and size are
   `.section-title`'s — 700, Catamaran, the same measure — because 800 with tight
   negative tracking was the "too bold" Filip was seeing. What is deliberately
   NOT borrowed is the homepage's chrome: no all-caps, no 3px blue rule down the
   left. This page is not the front page and should not wear its badge. */
.mq-h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--t-h2);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}

/* Wide enough that the section ledes hold one line on a desktop — 34em left
   "them." stranded on a line of its own under the values heading. */
.mq-lede {
    max-width: 48em;
    margin: 22px 0 0;
    font-size: 1.1875rem !important;
}

/* ================================ the sky ===============================
   ONE LIGHT SOURCE FOR THE WHOLE PAGE (2026-08-21). The aurora blooms used to
   live inside `.mq-hero`, which clips them, so everything below the fold sat on
   dead flat #08090b — eight sections of black with hairline boxes on it. This
   layer is fixed behind ALL of them, and about.js drifts it against the scroll,
   so no two screenfuls of this page are lit the same way.

   `z-index: -1` is what makes it safe: `.mq` is an isolated stacking context,
   so a negative child paints above `.mq`'s own background and below every word
   on the page. Never give it a positive z-index — it would wash over the copy.
   Fixed rather than absolute so it costs one composited layer instead of a
   9500px-tall one, and `contain: strict` keeps its repaints to itself. */
.mq-sky {
    position: fixed;
    inset: -20vh -10vw;
    z-index: -1;
    pointer-events: none;
    contain: strict;
    will-change: transform;
}

.mq-sky-bloom {
    position: absolute;
    border-radius: 50%;
}

.mq-sky-a {
    top: -6vh;
    left: -8vw;
    width: 62vw;
    height: 62vw;
    background: radial-gradient(circle, color-mix(in srgb, var(--mythiq-hover-blue) 15%, transparent) 0%, color-mix(in srgb, var(--mythiq-hover-blue) 0%, transparent) 63%);
    animation: mq-drift-a 34s ease-in-out infinite;
}

.mq-sky-b {
    top: 34vh;
    right: -14vw;
    width: 58vw;
    height: 58vw;
    background: radial-gradient(circle, rgba(127, 230, 255, 0.10) 0%, rgba(127, 230, 255, 0) 62%);
    animation: mq-drift-b 44s ease-in-out infinite;
}

/* The deep one. Violet rather than blue, at half the strength of the others —
   two blooms of the same hue read as one badly-cut gradient; a third in a
   neighbouring hue is what makes the field look like light instead of a wash. */
.mq-sky-c {
    bottom: -18vh;
    left: 22vw;
    width: 54vw;
    height: 54vw;
    background: radial-gradient(circle, rgba(96, 116, 255, 0.085) 0%, rgba(96, 116, 255, 0) 60%);
    animation: mq-drift-a 52s ease-in-out infinite reverse;
}

/* The hero's own blooms. Two of them, drifting on long offset loops — slow
   enough that the movement is felt rather than watched. These are the close
   ones, over the starfield; the sky above is the far one, behind everything. */
.mq-bloom {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(10px);
}

.mq-bloom-a {
    top: -26vw;
    left: -18vw;
    width: 68vw;
    height: 68vw;
    background: radial-gradient(circle, color-mix(in srgb, var(--mythiq-hover-blue) 34%, transparent) 0%, color-mix(in srgb, var(--mythiq-hover-blue) 0%, transparent) 62%);
    animation: mq-drift-a 26s ease-in-out infinite;
}

.mq-bloom-b {
    right: -24vw;
    bottom: -30vw;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(127, 230, 255, 0.20) 0%, rgba(127, 230, 255, 0) 60%);
    animation: mq-drift-b 34s ease-in-out infinite;
}

@keyframes mq-drift-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(6vw, 4vw, 0) scale(1.12); }
}

@keyframes mq-drift-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
    50%      { transform: translate3d(-7vw, -3vw, 0) scale(1); }
}

/* ================================= 1. hero =============================== */

.mq-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    padding: calc(var(--top) + 70px) 0 34px;
}

/* The nebula plate: colour and depth under the stars. On its own it was a flat
   picture; under a live starfield it is a sky. */
/* OVERSIZED ON PURPOSE. about.js parallaxes this plate against the hero, and a
   layer inset to 0 would drag its own edge into shot the moment it moved. 16%
   of the hero's height at each end is more room than the factor can ever use. */
.mq-hero-art {
    position: absolute;
    inset: -16% 0;
    background-image: url('../img/uploads/2021/01/Mythiqnet_bg3-min.jpg');
    background-size: cover;
    background-position: center 28%;
    opacity: 0.55;
    will-change: transform;
}

/* The starfield. A canvas rather than more pictures because it drifts, twinkles
   and throws the occasional comet — and because at this size a JPEG of stars is
   heavier than the code that draws them. */
.mq-stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* THE HORIZON. One hairline of brand blue along the hero's bottom edge, brightest
   under the headline and gone by two-thirds across. The hero used to dissolve
   into the quote with no edge at all — the same seam the publish band draws at
   its own top, so the page has one way of marking where a surface ends. */
.mq-hero::after {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, color-mix(in srgb, var(--mythiq-hover-blue) 60%, transparent) 0%, color-mix(in srgb, var(--mythiq-hover-blue) 14%, transparent) 34%, color-mix(in srgb, var(--mythiq-hover-blue) 0%, transparent) 66%);
}

.mq-hero-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 85% at 18% 12%, rgba(8, 9, 11, 0.05) 0%, rgba(8, 9, 11, 0.42) 55%, rgba(8, 9, 11, 0.86) 100%),
        linear-gradient(180deg, rgba(8, 9, 11, 0.22) 0%, rgba(8, 9, 11, 0) 45%, var(--void) 98%);
}

.mq-hero-inner {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mq-hero-logo {
    width: 168px;
    height: auto;
    margin-bottom: clamp(26px, 4vw, 48px);
}

/* 59px at 1600 — the same h1 `.esoc-title` and `.wow-hero-title` set, and the
   largest type on the page. Leading is 1.1 rather than the old 1: at 59px a
   1.0 line closes the three lines up into a slab. */
.mq-hero-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--t-h1);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
}

/* Each line clips its own words, so the rise reads as the letters coming up
   from behind an edge rather than sliding over the line above. */
.mq-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.06em; /* room for descenders inside the clip */
}

.mq-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.mq-mask i {
    display: inline-block;
    font-style: normal;
}

/* The reveal itself is opt-in: without .mq-js the words are simply in place. */
.mq-js .mq-hero-title .mq-mask i {
    transform: translateY(110%);
    animation: mq-rise 1s var(--ease) forwards;
    animation-delay: calc(var(--i) * 85ms + 250ms);
}

@keyframes mq-rise {
    to { transform: translateY(0); }
}

.mq-js .mq-hero-logo,
.mq-js .mq-hero-lead,
.mq-js .mq-hero-foot {
    opacity: 0;
    animation: mq-fade 1.1s var(--ease) forwards;
}

.mq-js .mq-hero-logo  { animation-delay: 120ms; }
.mq-js .mq-hero-lead  { animation-delay: 850ms; }
.mq-js .mq-hero-foot  { animation-delay: 1050ms; }

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

.mq-hero-lead {
    max-width: 40em;
    margin: clamp(26px, 3vw, 40px) 0 0;
    font-size: 1.1875rem !important;
}

.mq-hero-lead a {
    color: var(--ink);
    box-shadow: inset 0 -1px 0 0 color-mix(in srgb, var(--mythiq-hover-blue) 90%, transparent);
    transition: color var(--transition-speed), box-shadow var(--transition-speed);
}

.mq-hero-lead a:hover {
    color: #7fe6ff;
    box-shadow: inset 0 -2px 0 0 #7fe6ff;
}

.mq-hero-foot {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.mq-hero-live {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 0.9375rem !important;
}

/* tabular-nums so a changing figure never shifts the words beside it. */
.mq-hero-live strong {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    transition: color 0.5s ease;
}

.mq-hero-live strong.is-tick { color: #7fe6ff; }

.mq-dot {
    flex: none;
    margin-top: 0.42em; /* onto the first line, whatever it wraps to */
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mythiq-hover-blue);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mythiq-hover-blue) 55%, transparent);
    animation: mq-pulse 2.6s ease-out infinite;
}

@keyframes mq-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mythiq-hover-blue) 55%, transparent); }
    70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--mythiq-hover-blue) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mythiq-hover-blue) 0%, transparent); }
}

/* A hairline that fills downward on a loop: a scroll cue that is a line rather
   than a bouncing arrow. */
.mq-scroll {
    position: relative;
    width: 1px;
    height: 74px;
    background: rgba(255, 255, 255, 0.16);
    flex: none;
    overflow: hidden;
}

.mq-scroll span {
    position: absolute;
    inset: 0 0 auto;
    height: 34px;
    background: linear-gradient(180deg, var(--mythiq-hover-blue), color-mix(in srgb, var(--mythiq-hover-blue) 0%, transparent));
    animation: mq-drop 2.4s var(--ease) infinite;
}

@keyframes mq-drop {
    0%   { transform: translateY(-100%); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translateY(220%); opacity: 0; }
}

/* ================================ 3. creed ===============================
   The quote is dim until the band crosses the middle of the screen, then each
   word lights in turn. Colour, not opacity, so the layout never reflows. */

/* The page's lighting is the fixed sky now (see `.mq-sky`), not a wash per
   band — a per-section gradient could not drift and could not cross a seam. */
.mq-creed {
    position: relative;
    padding: clamp(80px, 11vw, 150px) 0 clamp(60px, 7vw, 100px);
}

.mq-creed-quote {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: var(--t-quote) !important;
    line-height: 1.28 !important;
    letter-spacing: -0.02em;
    color: var(--ink) !important;
    max-width: 24em;
    margin: 0;
}

.mq-creed-quote::before { content: '\201C'; }
.mq-creed-quote::after  { content: '\201D'; }

.mq-cw {
    transition: color 0.45s var(--ease), text-shadow 0.45s var(--ease);
}

.mq-js .mq-cw {
    color: rgba(244, 246, 248, 0.16);
}

/* Lit. The glow is faint on purpose: it reads as the words coming up to
   temperature rather than as a highlighter. */
.mq-js .mq-cw.is-lit {
    color: var(--ink);
    text-shadow: 0 0 32px color-mix(in srgb, var(--mythiq-hover-blue) 28%, transparent);
}

/* A gradient word cannot change colour — its fill is a clipped background — so
   it fades its whole self instead. */
.mq-js .mq-cw.mq-beam {
    opacity: 0.22;
    transition: opacity 0.45s var(--ease);
}

.mq-js .mq-cw.mq-beam.is-lit {
    opacity: 1;
}

.mq-creed-note {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 60px);
    max-width: 1100px;
    margin: clamp(40px, 5vw, 70px) 0 0;
    padding-top: clamp(30px, 4vw, 46px);
    border-top: 1px solid var(--hair);
}

/* A rule between the columns, not just air. Two paragraphs of grey side by side
   with nothing between them read as one paragraph that wrapped badly. */
.mq-creed-note p + p {
    padding-left: clamp(24px, 4vw, 60px);
    border-left: 1px solid var(--hair);
}

/* =============================== 4. figures ============================== */

/* A BAND, NOT FOUR LOOSE COLUMNS. The counters were text floating on black with
   a short rule over each one; ruled top and bottom and divided by vertical
   hairlines, the same four numbers read as an instrument panel. The dividers are
   borders on the cells rather than a background trick, so they survive the grid
   reflowing to 2×2 and to 1 column. */
.mq-figures {
    padding-bottom: clamp(70px, 8vw, 115px);
}

.mq-figures-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
}

.mq-figure {
    position: relative;
    padding: clamp(30px, 3vw, 44px) clamp(20px, 2.4vw, 40px);
    border-left: 1px solid var(--hair);
}

/* The outer edges belong to the band's own rules, not to a cell. */
.mq-figure:first-child { border-left: 0; padding-left: 0; }
.mq-figure:last-child  { padding-right: 0; }

/* The meter sits ON the band's top rule — `top: -1px` over a 1px border — so the
   four of them butt together into one line that fills left to right across the
   whole band as the counters run. Cut per column, not one bar: each figure
   arrives on its own. */
.mq-figure-meter {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    overflow: hidden;
}

.mq-figure-meter span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--beam);
    box-shadow: 0 0 12px color-mix(in srgb, var(--mythiq-hover-blue) 55%, transparent);
    transition: width 1.5s var(--ease);
}

.mq-figure.is-in .mq-figure-meter span { width: 100%; }

.mq-figure-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--t-h2) !important;
    line-height: 1 !important;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    /* !important because `.mq p` (0,1,1) outranks this class on its own (0,1,0)
       and was quietly serving the counters at --ink-soft — the figure ended up
       the same 64% grey as the caption under it, which is the one contrast this
       band exists to make. */
    color: var(--ink) !important;
    margin: 0;
}

.mq-figure-value.is-tick {
    color: #7fe6ff !important;
}

/* flex-start, not center: this label wraps to two lines, and a dot centred
   across both sits opposite the gap between them. */
.mq-figure-label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 16px 0 0;
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
    max-width: 15em;
}

/* ================================= 5. rail ===============================
   The set piece. The section reserves `--panels` screens of scroll; the stage
   pins inside it and about.js translates the track in X off the progress. */

/* --panels screens of scroll, at 70vh each. Enough that the track glides
   rather than lurches, short enough that nobody feels trapped in it. */
.mq-rail {
    position: relative;
    height: calc(var(--panels) * 70vh);
}

/* NO FLEX `gap` HERE — the spacing is per child, on purpose. A gap applies
   between EVERY pair, so it silently inserted a third space between the spine
   and the track and put every milestone dot 54px below the line it is supposed
   to sit on. The head's space is its own margin; the track's is `--spine-gap`,
   which the dots and connectors are also positioned from. */
.mq-rail-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    overflow: hidden;
    padding-top: var(--top);
}

/* A plain block since the progress line moved out of it and onto the spine. */
.mq-rail-head {
    display: block;
}

/* Outlined, and the largest thing in the rail — but no longer the largest on
   the page: it sits a step under the h1 now (53px against 59px), which is the
   order it should always have been in. Filled it would compete with the card
   beside it; hollow it reads as a watermark behind the heading. */
.mq-rail-year {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--t-display) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.02em;
    color: transparent !important;
    /* 1.5px, not 2px: the stroke is a fixed width against type that is now a
       step smaller, and at 2px it stopped reading as an outline and started
       reading as a thin bold. */
    -webkit-text-stroke: 1.5px rgba(244, 246, 248, 0.32);
    margin: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

@supports not ((-webkit-text-stroke: 1px white)) {
    .mq-rail-year { color: var(--ink-faint) !important; }
}

.mq-rail-year.is-swap {
    opacity: 0;
    transform: translateY(-12px);
}

/* Size, weight and family come from .mq-h2, which the markup also carries —
   every section heading on the page is the same object. All this adds is the
   space under the year above it. */
.mq-rail-title {
    margin: 18px 0 0;
}

/* THE SPINE — the rail's timeline, full bleed across the stage. It does NOT
   travel: the track slides under it and every card's dot rides along it, which
   is the whole illusion. Its fill is the same `[data-rail-progress]` element the
   320px stub used to be, so about.js is untouched.

   `--spine-gap` is the distance from the spine down to the top of the cards, and
   the cards' dots and connectors are positioned off the same value — change it
   here and the three stay together. */
.mq-rail {
    --spine-gap: clamp(30px, 3.4vw, 52px);
}

.mq-rail-spine {
    position: relative;
    height: 1px;
    margin-top: clamp(24px, 4vw, 54px);   /* what the stage's flex gap used to give */
    background: var(--hair);
}

.mq-rail-spine span {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    height: 100%;
    width: 0;
    background: var(--beam);
    box-shadow: 0 0 14px color-mix(in srgb, var(--mythiq-hover-blue) 80%, transparent);
}

/* The track. Padded to the container gutter so the first card lines up with the
   heading above it, and given the gutter again on the right so the last card
   does not stop flush against the edge.

   The track is full-bleed, so it cannot just sit in a `.mq-wrap` — it has to
   RECOMPUTE where that wrap's content edge is. The percentage resolves against
   the stage, which is the full width, so this is `.mq-wrap`'s own centring plus
   its 75px gutter, and the first card lands on the same x as the heading at
   every width. (The old fixed 90px was 20px adrift of the heading at 1600.) */
.mq-rail-track {
    display: flex;
    align-items: stretch;
    gap: clamp(16px, 2vw, 30px);
    list-style: none;
    margin: var(--spine-gap) 0 0;
    padding: 0 calc(max(0px, (100% - 1710px) / 2) + var(--gutter));
    width: max-content;
    will-change: transform;
}

/* NO `overflow: hidden` HERE, unlike the value cards: this card hangs a dot and
   a connector ABOVE its own top edge, onto the spine, and a clip would eat both. */
.mq-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: clamp(300px, 38vw, 560px);
    padding: clamp(28px, 3vw, 44px);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    background: var(--card-light), var(--card-wash);
    transition: border-color 0.5s var(--ease), transform 0.5s var(--ease),
                background-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

/* about.js marks whichever card is nearest the left edge.
   NO `translateY` LIFT ANY MORE. The card hangs a dot on the spine above it, and
   lifting the card lifts the dot off the line — the one thing the spine exists
   to show. Depth comes from the shadow and the lit marker instead. */
.mq-card.is-near {
    border-color: color-mix(in srgb, var(--mythiq-hover-blue) 55%, transparent);
    background-color: color-mix(in srgb, var(--mythiq-hover-blue) 5%, transparent);
    box-shadow: 0 16px 70px -42px color-mix(in srgb, var(--mythiq-hover-blue) 75%, transparent);
}

/* The connector and the dot: a hairline up to the spine, and a marker sitting on
   it. Both are positioned off `--spine-gap`, so the three pieces cannot drift
   apart, and both ride with the card as the track travels — which is what turns
   a row of sliding boxes into years going past. `--n` (the card's index, set in
   the markup) staggers nothing here; it is the milestone's own number. */
.mq-card::before {
    content: '';
    position: absolute;
    left: clamp(28px, 3vw, 44px);
    top: calc(var(--spine-gap) * -1);
    width: 1px;
    height: var(--spine-gap);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.06) 100%);
    transition: background 0.5s var(--ease);
}

.mq-card::after {
    content: '';
    position: absolute;
    left: clamp(28px, 3vw, 44px);
    top: calc(var(--spine-gap) * -1);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    /* The spine's MIDDLE is `--spine-gap` + 0.5px above the card's top edge (the
       gap is measured off the spine's 1px-tall bottom edge), so centring the dot
       on the line is a half-dot up plus that half pixel — minus, not plus. */
    transform: translate(-4px, calc(-50% - 0.5px));
    background: var(--void);
    border: 1px solid rgba(255, 255, 255, 0.34);
    transition: background 0.5s var(--ease), border-color 0.5s var(--ease),
                box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}

.mq-card.is-near::before {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mythiq-hover-blue) 85%, transparent) 0%, color-mix(in srgb, var(--mythiq-hover-blue) 15%, transparent) 100%);
}

/* The lit marker. It is the only thing on the spine that is filled, so the eye
   finds "where am I in the story" without reading anything. */
.mq-card.is-near::after {
    background: var(--mythiq-hover-blue);
    border-color: #7fe6ff;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--mythiq-hover-blue) 16%, transparent);
    transform: translate(-4px, calc(-50% - 0.5px)) scale(1.15);
}

.mq-card-index {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8125rem;
    color: transparent;
    -webkit-text-stroke: 1px var(--ink-faint);
}

@supports not ((-webkit-text-stroke: 1px white)) {
    .mq-card-index { color: var(--ink-faint); }
}

.mq-card-year {
    margin: clamp(20px, 2.5vw, 34px) 0 0 !important;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9375rem !important;
    color: var(--mythiq-hover-blue) !important;
}

.mq-card-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--t-h4);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 10px 0 14px;
}

.mq-card-text {
    font-size: 1.0625rem !important;
    line-height: 1.7 !important;
}

/* ================================= 6. film ==============================
   Full bleed, and the only place on the page with no gutter: the film is the
   pause between the story and what we stand for. */

/* NO TOP PADDING. The film runs straight off the bottom of the pinned rail —
   it is the story's last frame, not a section of its own, and a gap above it
   would make it one. */
.mq-film-band {
    position: relative;
    padding: 0 0 clamp(70px, 8vw, 115px);
}

/* THE SPILL. The plate's own light, thrown onto the page under it — the frame
   used to stop dead at a hard edge and the black below it was the flattest part
   of the page. Under the content (`z-index: -1`, see `.mq-sky`) so it can never
   sit over the section that follows. */
.mq-film-band::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: 0;
    width: min(1200px, 86vw);
    height: clamp(180px, 20vw, 300px);
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(50% 50% at 50% 0%, color-mix(in srgb, var(--mythiq-hover-blue) 16%, transparent) 0%, color-mix(in srgb, var(--mythiq-hover-blue) 0%, transparent) 70%);
}

.mq-film {
    position: relative;
    display: block;
    height: clamp(420px, 74vh, 880px);
    overflow: hidden;
}

/* The plate parallaxes, the still inside it scales — one transform each. Same
   oversizing as the hero plate, for the same reason. */
.mq-film-plate {
    position: absolute;
    inset: -14% 0;
    display: block;
    will-change: transform;
}

.mq-film-still {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    transition: transform 1.6s var(--ease);
}

.mq-film.is-in .mq-film-still { transform: scale(1); }
.mq-film.is-in:hover .mq-film-still { transform: scale(1.04); }

/* The ramp to black at the top was 30% deep, which ate the sky the still opens
   on and left the plate looking like a hole in the page rather than a frame of
   the film. It is 20% now, the bottom ramp does the heavier work (the section
   below it is black anyway), and the vignette is tighter so the middle — where
   the control sits — stays the darkest part of the picture. */
.mq-film-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(46% 56% at 50% 50%, rgba(8, 9, 11, 0.62) 0%, rgba(8, 9, 11, 0.34) 55%, rgba(8, 9, 11, 0.5) 100%),
        linear-gradient(180deg, var(--void) 0%, rgba(8, 9, 11, 0) 20%, rgba(8, 9, 11, 0) 72%, var(--void) 100%);
}

/* The control. Button and its label as ONE centred stack — which is what lets
   the label be static type instead of a ring of it. */
.mq-film-control {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 2vw, 28px);
}

.mq-film-play {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(88px, 8.5vw, 116px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--beam);
    color: #04121a;
    font-size: clamp(1.25rem, 1.7vw, 1.625rem);
    padding-left: 5px; /* optical centring of the triangle */
    box-shadow: 0 22px 64px -16px color-mix(in srgb, var(--mythiq-hover-blue) 90%, transparent);
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

/* THE HALO — what the rotating type was replaced with. Two hairline rings
   breathing outward on one long offset loop: it points at the button, which is
   all the ring ever did, and it does it without asking anyone to read sideways.
   On the pseudo-elements so the markup stays two spans. */
.mq-film-play::before,
.mq-film-play::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid rgba(127, 230, 255, 0.55);
    animation: mq-halo 3.6s var(--ease) infinite;
    pointer-events: none;
}

.mq-film-play::after { animation-delay: 1.8s; }

@keyframes mq-halo {
    0%   { transform: scale(1);    opacity: 0; }
    18%  { opacity: 0.7; }
    100% { transform: scale(1.85); opacity: 0; }
}

/* The ring's own words, standing still. This is the film's only label — it is
   not the caption that was deleted from this section, it is the type off the
   ring that replaced it. */
.mq-film-label {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1;
    color: var(--ink);
    text-shadow: 0 2px 26px rgba(8, 9, 11, 0.95);
    transition: color var(--transition-speed);
}

/* A hairline that draws itself under the label on hover — the same device the
   value cards use along their top edge, so the page has one hover language. */
.mq-film-label::after {
    content: '';
    display: block;
    height: 1px;
    margin-top: 9px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform 0.5s var(--ease);
}

.mq-film:hover .mq-film-play {
    transform: scale(1.07);
    box-shadow: 0 28px 74px -14px color-mix(in srgb, var(--mythiq-hover-blue) 100%, transparent);
}

.mq-film:hover .mq-film-label { color: #7fe6ff; }
.mq-film:hover .mq-film-label::after { transform: scaleX(1); }

.mq-film iframe {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    border: 0;
}

.mq-film.is-playing .mq-film-plate,
.mq-film.is-playing .mq-film-veil,
.mq-film.is-playing .mq-film-control {
    display: none;
}

/* =============================== 7. values ==============================
   Four cards in a grid. This was a stack of art tiles that rode over one
   another on scroll — a nice trick that made four short claims take four
   screens to read. Cards say the same thing at a glance, and the section reads
   as a specification rather than as a slideshow. */

.mq-values {
    position: relative;
    padding-bottom: clamp(80px, 9vw, 130px);
}

.mq-vgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 26px);
    margin-top: clamp(40px, 5vw, 66px);
}

.mq-vcard {
    position: relative;
    overflow: hidden;      /* clips the top rule to the radius */
    padding: clamp(28px, 2.8vw, 42px);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    background: var(--card-light), var(--card-wash);
    transition: border-color var(--transition-speed), transform var(--transition-speed),
                background-color var(--transition-speed), box-shadow var(--transition-speed);
}

/* The blue edge is the site's own device — the rule off .section-header, turned
   along the top of a card. It draws itself in on hover rather than sitting
   there, which is the only movement in the section. */
/* Inset to 0, not -1px: the card clips to its radius now, so an overhang would
   simply be cut off at the curve. */
.mq-vcard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--mythiq-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease);
}

.mq-vcard:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background-color: rgba(255, 255, 255, 0.02);
    transform: translateY(-3px);
    box-shadow: 0 26px 60px -38px rgba(0, 0, 0, 1);
}

.mq-vcard:hover::before {
    transform: scaleX(1);
}

/* THE NUMERAL IS THE ARTWORK. It was a 13px blue label above the title — a
   caption on a card that had nothing else on it. Hollowed out and blown up into
   the top-right corner it gives each card a subject without adding a picture,
   and it uses the device this page already owns (`-webkit-text-stroke`, same as
   the rail year and the milestone index) rather than importing a new one.
   Clipped by the card's own `overflow: hidden`, which is why it can sit half
   off the corner. */
.mq-vcard-no {
    position: absolute;
    top: -0.16em;
    right: 0.12em;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(4rem, 6.2vw, 6.25rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--mythiq-hover-blue) 30%, transparent);
    transition: -webkit-text-stroke-color var(--transition-speed);
    pointer-events: none;
}

.mq-vcard:hover .mq-vcard-no {
    -webkit-text-stroke-color: color-mix(in srgb, var(--mythiq-hover-blue) 62%, transparent);
}

@supports not ((-webkit-text-stroke: 1px white)) {
    .mq-vcard-no { color: color-mix(in srgb, var(--mythiq-hover-blue) 22%, transparent); }
}

/* Clear of the numeral, so a long title never runs under it. */
.mq-vcard-title {
    position: relative;
    max-width: 12em;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--t-h4);
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 12px;
}

.mq-vcard-text {
    margin: 0;
    max-width: 34em;
}

/* ================================= 8. work ===============================
   Ruled rows: art, what it is, what it amounts to, and a way in. The shape is
   the news archive's own row on this site (thumb | copy | control), which is
   why it reads as part of Mythiq.net rather than as a landing-page module. It
   replaced two decorative plates that carried three words between them. */

/* ITS OWN SURFACE, ON PURPOSE. Back to back on the same black with the same
   heading treatment, "what we stand for" and "what we publish" read as one
   long section. Lifting this one onto --void-2 between two hairlines is what
   separates them — the page already uses that step for the Hall of Fame, at
   the other end of the scale. */
.mq-work {
    position: relative;
    background: var(--void-2);
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    padding: clamp(70px, 8vw, 115px) 0;
}

/* ITS OWN LIGHT, because it cannot borrow the page's. `--void-2` is opaque, so
   this is the one band the fixed sky does not reach — and lifting a surface
   above a lit page only works if the lifted surface is lit too. A wide, very
   soft wash off the top edge, plus a hairline of brand blue fading out along it,
   so the seam reads as an edge catching light rather than as a border. */
.mq-work::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: clamp(260px, 32vw, 460px);
    pointer-events: none;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--mythiq-hover-blue) 55%, transparent) 0%, color-mix(in srgb, var(--mythiq-hover-blue) 0%, transparent) 62%) top / 100% 1px no-repeat,
        radial-gradient(72% 100% at 22% 0%, color-mix(in srgb, var(--mythiq-hover-blue) 10%, transparent) 0%, color-mix(in srgb, var(--mythiq-hover-blue) 0%, transparent) 68%);
}

.mq-work > * {
    position: relative;
}

/* On the lifted surface the list's own top rule would double up with the band's
   edge, so it goes. THE FIRST ROW KEEPS ITS PADDING: zeroing it (an earlier
   attempt at the same problem) left the Mods image flush against the top of its
   row with 0px above and 43px below, while the Tools row had 42/43 — the two
   rows were different heights and the first one's art read as misaligned. */
.mq-pub {
    border-top: 0;
}

.mq-pub {
    margin-top: clamp(36px, 4vw, 56px);
    border-top: 1px solid var(--hair);
}

.mq-pub-row {
    display: grid;
    grid-template-columns: clamp(240px, 24vw, 380px) minmax(0, 1fr) auto;
    gap: clamp(24px, 3vw, 54px);
    align-items: center;
    padding: clamp(26px, 3vw, 42px) 0;
    border-bottom: 1px solid var(--hair);
    transition: background-color var(--transition-speed);
}

/* The wash bleeds past the container edges, so a hovered row reads as a full
   band rather than as a box that stops at the text. */
.mq-pub-row:hover {
    background-color: rgba(255, 255, 255, 0.022);
    box-shadow: 0 0 0 100vmax rgba(255, 255, 255, 0.022);
    clip-path: inset(0 -100vmax);
}

/* The art carries a hairline of its own and a scrim, so it sits ON the band
   rather than floating as a bright rectangle over it, and it lights up when the
   row is hovered. */
.mq-pub-media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 16 / 9;
    box-shadow: inset 0 0 0 1px var(--hair);
    transition: box-shadow var(--transition-speed);
}

.mq-pub-media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(160deg, rgba(8, 9, 11, 0) 30%, rgba(8, 9, 11, 0.55) 100%);
    transition: opacity var(--transition-speed);
}

.mq-pub-media span {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    transition: transform 1s var(--ease);
}

.mq-pub-row:hover .mq-pub-media {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mythiq-hover-blue) 50%, transparent),
                0 22px 50px -30px color-mix(in srgb, var(--mythiq-hover-blue) 90%, transparent);
}

.mq-pub-row:hover .mq-pub-media::after { opacity: 0.4; }

.mq-pub-row:hover .mq-pub-media span {
    transform: scale(1.06);
}

.mq-pub-name {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--t-h3);
    line-height: 1.1;
    color: var(--ink);
}

.mq-pub-text {
    display: block;
    margin-top: 12px;
    max-width: 44em;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink-soft);
}

.mq-pub-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--mythiq-hover-blue);
}

.mq-pub-cta i {
    font-size: 0.75rem;
    transition: transform var(--transition-speed);
}

.mq-pub-row:hover .mq-pub-cta i {
    transform: translateX(4px);
}

/* The figures. Two per row, on a hairline, so the claim is measurable rather
   than adjectival. */
.mq-pub-facts {
    display: flex;
    gap: clamp(24px, 2.6vw, 46px);
}

.mq-pub-fact {
    display: block;
    min-width: 5.5em;
    padding-top: 14px;
    border-top: 2px solid color-mix(in srgb, var(--mythiq-hover-blue) 45%, transparent);
}

.mq-pub-fact b {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--t-h4);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.mq-pub-fact em {
    display: block;
    margin-top: 7px;
    font-style: normal;
    font-size: 0.875rem;
    color: var(--ink-faint);
}

/* ================================ the offer ==============================
   Inside "what we publish", not after it. Two columns: the ask and its button
   on the left, the three terms as ruled rows on the right. No decoration —
   there was a pointer-tracking light behind this panel and Filip had it out. */

.mq-offer {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    /* No column gap: the divider between the halves is the list's own left rule,
       and the space either side of it is padding on each half — that is what
       puts the rule exactly midway instead of hard against one column. */
    gap: 0;
    margin-top: clamp(50px, 6vw, 86px);
    padding: clamp(34px, 4vw, 60px);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    background: var(--card-light), var(--card-wash);
}

.mq-offer-head {
    padding-right: clamp(30px, 4vw, 70px);
}

.mq-offer-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--t-h3);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}

.mq-offer-lead {
    margin: 16px 0 0;
    max-width: 34em;
}

.mq-offer-note {
    margin: 20px 0 0;
    font-size: 0.875rem !important;
    color: var(--ink-faint);
}

/* The button's fill sweeps on hover — the gradient is twice the button's width
   and its position animates. */
.mq-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: clamp(24px, 3vw, 34px);
    padding: 19px 34px;
    border-radius: var(--radius-sm);
    background: linear-gradient(115deg, var(--mythiq-blue) 0%, var(--mythiq-hover-blue) 30%, #7fe6ff 55%, var(--mythiq-hover-blue) 80%, var(--mythiq-blue) 100%);
    background-size: 220% 100%;
    background-position: 0% 0;
    color: #04121a;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    box-shadow: 0 18px 50px -22px color-mix(in srgb, var(--mythiq-hover-blue) 85%, transparent);
    transition: background-position 0.8s var(--ease), transform var(--transition-speed),
                box-shadow var(--transition-speed);
}

.mq-btn:hover {
    color: #04121a;
    background-position: 100% 0;
    transform: translateY(-2px);
    box-shadow: 0 26px 60px -22px color-mix(in srgb, var(--mythiq-hover-blue) 100%, transparent);
}

.mq-btn i {
    font-size: 0.8125rem;
    transition: transform var(--transition-speed);
}

.mq-btn:hover i { transform: translateX(4px); }

/* Ruled off the ask beside it, on the same hairline the terms use between
   themselves — the two halves of this panel are one argument, not two panels. */
.mq-offer-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 clamp(30px, 4vw, 70px);
    border-left: 1px solid var(--hair);
}

.mq-offer-item {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 0 clamp(12px, 1.4vw, 22px);
    padding: clamp(18px, 2vw, 26px) 0;
    border-top: 1px solid var(--hair);
}

.mq-offer-item:first-child { padding-top: 0; border-top: 0; }
.mq-offer-item:last-child  { padding-bottom: 0; }

/* The same hollow numeral the value cards use, at the size this column has room
   for — one counting device for the whole page rather than a 13px blue label
   here and a display numeral there. */
.mq-offer-no {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: transparent;
    -webkit-text-stroke: 1.25px color-mix(in srgb, var(--mythiq-hover-blue) 45%, transparent);
}

@supports not ((-webkit-text-stroke: 1px white)) {
    .mq-offer-no { color: color-mix(in srgb, var(--mythiq-hover-blue) 40%, transparent); }
}

.mq-offer-item-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1875rem;
    line-height: 1.3;
    color: var(--ink);
    margin: 0 0 8px;
}

.mq-offer-item-text {
    margin: 0;
    max-width: 40em;
    font-size: 1.0625rem !important;
    line-height: 1.7 !important;
}

/* =============================== 9. sign-off ============================ */

/* The page used to end on a light band; without it the sign-off follows the
   lifted publish surface directly, so it needs its own room rather than the
   thin strip it was. */
.mq-signoff {
    padding: clamp(60px, 7vw, 100px) 0 clamp(70px, 8vw, 110px);
}

/* Stacked and centred, with the mark given room to be a mark. Side by side at
   20px it read as a footer line that had drifted up into the page. */
.mq-signoff-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
}

.mq-signoff-inner img {
    height: 30px;
    width: auto;
    opacity: 0.55;
    transition: opacity var(--transition-speed), filter var(--transition-speed);
}

.mq-signoff-inner:hover img {
    filter: drop-shadow(0 0 22px color-mix(in srgb, var(--mythiq-hover-blue) 50%, transparent));
}

.mq-signoff-inner span {
    font-size: 0.9375rem;
    color: var(--ink-faint);
    transition: color var(--transition-speed);
}

.mq-signoff-inner:hover img  { opacity: 1; }
.mq-signoff-inner:hover span { color: var(--ink-soft); }

/* ============================== the reveals =============================
   Two entrances, both released by IntersectionObserver and never re-hidden:
   a rise, and an unmask that wipes the plate open from the bottom. */

.mq-js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    transition-delay: var(--d, 0ms);
}

.mq-js [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

.mq-js [data-unmask] {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.1s var(--ease);
    transition-delay: var(--d, 0ms);
}

.mq-js [data-unmask].is-in {
    clip-path: inset(0 0 0 0);
}

/* ================================= layout =============================== */

@media (max-width: 1200px) {
    /* 2×2. The ruled band has to be re-cut: the left edge of each ROW belongs to
       the band, and the second row needs the rule that the wrapping took away. */
    .mq-figures-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mq-figure:nth-child(odd) {
        border-left: 0;
        padding-left: 0;
    }

    .mq-figure:nth-child(even) { padding-right: 0; }
    .mq-figure:nth-child(n + 3) { border-top: 1px solid var(--hair); }

    .mq-creed-note {
        grid-template-columns: 1fr;
    }

    .mq-creed-note p + p {
        padding-top: clamp(20px, 3vw, 30px);
        border-top: 1px solid var(--hair);
        border-left: 0;
        padding-left: 0;
    }
}

/* One column: every cell is its own row, so every cell but the first is ruled
   off the one above and none of them carries a left edge. */
@media (max-width: 620px) {
    .mq-figures-grid { grid-template-columns: 1fr; }

    .mq-figure {
        border-left: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .mq-figure + .mq-figure { border-top: 1px solid var(--hair); }
}

/* Below this the rail stops being horizontal: a pinned track needs width to
   travel through, and a phone has none. It becomes what the markup already is,
   a list — and about.js checks the same number before it pins anything. */
@media (max-width: 1000px) {
    .mq-rail {
        height: auto;
        padding-bottom: clamp(70px, 8vw, 115px);
    }

    .mq-rail-stage {
        position: static;
        height: auto;
        padding-top: clamp(70px, 8vw, 115px);
        overflow: visible;
    }

    /* The spine is a horizontal timeline; stacked, there is nothing for a dot
       to ride along, so the spine, its markers and the swapping year all go. */
    .mq-rail-spine,
    .mq-rail-year { display: none; }

    .mq-card::before,
    .mq-card::after { display: none; }

    /* Stacked, the track is just a list of cards — so it takes the page gutter
       like every other card grid here. Full-bleed it read as a run of bands
       with their side borders cut off at the viewport edge. */
    .mq-rail-track {
        flex-direction: column;
        width: auto;
        padding: 0 var(--gutter);
        margin-top: clamp(30px, 4vw, 50px);
        transform: none !important;
    }

    .mq-card { width: auto; }
}

@media (max-width: 760px) {
    .mq-hero {
        min-height: 88vh;
        padding-top: calc(var(--top) + 40px);
    }

    .mq-hero-logo { width: 128px; }

    .mq-vgrid { grid-template-columns: 1fr; }

    /* Stacked, the divider turns from a left rule into a top one. */
    .mq-offer { grid-template-columns: 1fr; }

    .mq-offer-head { padding-right: 0; }

    .mq-offer-list {
        margin-top: clamp(30px, 5vw, 44px);
        padding: clamp(30px, 5vw, 44px) 0 0;
        border-left: 0;
        border-top: 1px solid var(--hair);
    }

    /* The row stacks: art on top, copy under it, figures on their own line. */
    .mq-pub-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .mq-pub-media { max-width: 340px; }

    .mq-film { height: 62vh; }

}

/* ============================ reduced motion ============================
   Everything that moves on its own stops. Nothing that carries meaning is
   hidden, and the pinned rail is released — about.js reads the same query. */

@media (prefers-reduced-motion: reduce) {
    .mq-js [data-reveal],
    .mq-js [data-unmask] {
        opacity: 1;
        transform: none;
        clip-path: none;
        transition: none;
    }

    .mq-js .mq-hero-title .mq-mask i,
    .mq-js .mq-hero-logo,
    .mq-js .mq-hero-lead,
    .mq-js .mq-hero-foot {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .mq-js .mq-cw,
    .mq-js .mq-cw.mq-beam {
        color: var(--ink);
        opacity: 1;
    }

    .mq-dot,
    .mq-scroll span,
    .mq-bloom {
        animation: none;
    }

    /* One still ring, not two breathing ones — and standing off the button,
       since at inset -1px with nothing to expand it is just a second edge. */
    .mq-film-play::before {
        inset: -13px;
        animation: none;
        opacity: 0.45;
        transform: none;
    }

    .mq-film-play::after { display: none; }

    .mq-scroll span { opacity: 0.5; }

    .mq-rail { height: auto; }

    .mq-rail-stage {
        position: static;
        height: auto;
        overflow: visible;
    }

    .mq-rail-track {
        flex-direction: column;
        width: auto;
        padding: 0;
        margin-top: clamp(30px, 4vw, 50px);
        transform: none !important;
    }

    .mq-card { width: auto; }

    /* Same reason as the ≤1000px stack: nothing travels, so there is no spine
       to ride and the markers would hang in empty space above each card. */
    .mq-rail-spine,
    .mq-card::before,
    .mq-card::after { display: none; }

    /* The page's light holds still. */
    .mq-sky-bloom { animation: none; }

    .mq-sky,
    .mq-hero-art,
    .mq-film-plate {
        transform: none !important;
        will-change: auto;
    }

    .mq-film-still,
    .mq-pub-media span {
        transform: none !important;
        transition: none;
    }
}