/* ============================================================
   / : Homepage
   Self-contained. Loads nothing from /assets/css/.

   Look: pure black. Two materials only. A slate metal blended
   from dark to light carries the structure (borders, surfaces,
   eyebrows, headings). One signal orange carries the action
   (the brush, the scroll cue, the call to action). Cards are
   flat: one surface, one hairline, no glows. The video and the
   form are the two jobs this page has to do, so everything else
   is quiet.

   Type: this page deliberately leaves the shared Montserrat rule.
   PT Serif carries every title, Open Sans does the reading. There
   is no header and no logo mark on this page.

   Rule: the gradients are ambient, never the message. No gradient
   ever sits under small body text. Display type only.
   ============================================================ */

:root {
    --bg: #000000;
    --white: #ffffff;
    --body: #9ba3ab;
    --dim: #6b727a;
    --line: rgba(200, 208, 216, 0.10);
    --surface: rgba(255, 255, 255, 0.025);

    /* Type: serif for display, sans for interface. */
    --serif: 'PT Serif', Georgia, 'Times New Roman', serif;
    --sans: 'Open Sans', system-ui, -apple-system, sans-serif;

    /* slate: the structural metal, a blend of darker and lighter cool grey */
    --slate-1: #d6dade;
    --slate-2: #b0b7be;
    --slate-3: #7e868e;
    --slate-4: #4b5158;
    --slate-5: #24282d;

    /* accent: signal orange, the action colour */
    --accent: #ff5a2c;
    --accent-2: #ff8a5c;
    --accent-3: #e63f14;
    --accent-glow: rgba(255, 90, 44, 0.28);

    /* A rough marker stroke, drawn as SVG so the edges stay uneven at any width */
    --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 26' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ffb089'/%3E%3Cstop offset='.55' stop-color='%23ff5a2c'/%3E%3Cstop offset='1' stop-color='%23e63f14'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 15c22-7 46 4 70-2 25-6 50 6 76 0 24-6 48 5 72-1 18-4 32 2 42-3l-4 12c-12 6-26 0-42 4-26 7-52-4-76 2-24 6-50-5-74 1-22 6-42-3-62 3z' fill='url(%23g)'/%3E%3C/svg%3E");

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--white);
    font-family: var(--sans);
    font-weight: 400;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
.wrap--narrow { max-width: 780px; }

/* ============================================================
   1. Background
   Pure black. No page-level wash. Only a faint neutral lift
   behind the hero, and one warm glow behind the close, so the
   eye lands on the call to action and nowhere else.
   ============================================================ */

/* ============================================================
   2. Intake bar
   A slim strip that sticks to the top of the screen. One live dot,
   one line of fact, one way to act.
   ============================================================ */
.intake-bar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 11px 16px;
    /* the same solid orange as the button, so the two read as one action */
    background: #d9390f;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--white);
    transition: background 0.3s ease;
}
.intake-bar:hover { background: #c2320c; }
.intake-dot {
    flex: none; width: 7px; height: 7px; border-radius: 50%;
    background: var(--white);
    animation: intake-pulse 2.2s ease-out infinite;
}
@keyframes intake-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}
.intake-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.35);
}
.intake-cta svg { width: 11px; height: 11px; fill: currentColor; transition: transform 0.3s var(--ease); }
.intake-bar:hover .intake-cta svg { transform: translateX(3px); }

/* ============================================================
   3. Hero
   ============================================================ */
.hero {
    position: relative;
    /* The glow below spills past the sides. Clip it, or phones zoom out to fit it. */
    overflow-x: clip;
    padding: clamp(32px, calc(15vh - 24px), 96px) 0 clamp(32px, 5vh, 52px);
    text-align: center;
}
.hero::before {
    content: ''; position: absolute; inset: -12% -20% 0;
    pointer-events: none;
    background: radial-gradient(46% 58% at 50% 28%, rgba(150, 165, 180, 0.09), transparent 72%);
}
.hero .wrap { position: relative; z-index: 1; }

/* A light that travels the border. Three layers, clipped by the pill:
   the pill itself is the resting border colour, ::before is an orange
   arc spinning behind everything, and ::after is the solid fill, inset
   by the border width so only a 1.5px ring of the spin shows through. */
.eyebrow {
    position: relative; overflow: hidden; isolation: isolate;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 16px; border-radius: 999px;
    background: rgba(200, 208, 216, 0.16);
    font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: #d2d7dc;
}
.eyebrow::before {
    /* a square, wider than the pill's diagonal, so the arc reaches every edge */
    content: ''; position: absolute; z-index: -2;
    left: 50%; top: 50%; width: 150%; aspect-ratio: 1;
    background: conic-gradient(transparent 0 70%, rgba(255, 90, 44, 0.9) 86%, #ffb089 92%, transparent 100%);
    transform: translate(-50%, -50%);
    animation: eyebrow-spin 5s linear infinite;
}
.eyebrow::after {
    content: ''; position: absolute; z-index: -1;
    inset: 1.5px; border-radius: inherit;
    background: #0d0e10;
}
@keyframes eyebrow-spin { to { transform: translate(-50%, -50%) rotate(1turn); } }

h1 {
    margin: clamp(24px, 4vh, 36px) auto 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.3rem, 6vw, 4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}
h1 .grad, .sec-title .grad {
    background: linear-gradient(96deg, #f2f5f7 0%, #aab2ba 48%, #e2e6ea 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #e2e6ea;
}

/* Brush underline: an uneven marker stroke instead of a straight rule.
   Sized in em so it scales with the word it sits under. */
.brush { position: relative; display: inline-block; }
.brush::after {
    content: ''; position: absolute; left: -4%; right: -4%; bottom: -0.06em;
    height: 0.16em;
    background: var(--brush) no-repeat center / 100% 100%;
    transform: rotate(-0.7deg);
    pointer-events: none;
}
/* Inside a reveal, the stroke draws itself once the words have landed */
.r .brush::after {
    transform: rotate(-0.7deg) scaleX(0); transform-origin: left center;
    transition: transform 0.9s var(--ease) 0.55s;
}
.r.in .brush::after { transform: rotate(-0.7deg) scaleX(1); }

.deck {
    margin: clamp(20px, 3.2vh, 28px) auto 0; max-width: 60ch;
    font-size: clamp(1rem, 1.45vw, 1.18rem); font-weight: 400;
    line-height: 1.72; color: var(--body);
}
.deck b { color: #dfe3e7; font-weight: 600; }
.deck-end { display: block; margin-top: 10px; color: #dfe3e7; font-weight: 600; text-wrap: balance; }

/* Line breaks that only exist on phones (.br-m) or only on wider screens (.br-d) */
.br-m { display: none; }

/* ============================================================
   4. VSL
   ============================================================ */
.vsl-sec { padding: 0 0 clamp(16px, 3vh, 28px); }
.vsl { max-width: 940px; margin: 0 auto; }
.vsl-frame {
    position: relative; border-radius: 22px; padding: 1px;
    background: linear-gradient(150deg, rgba(214, 218, 222, 0.3), rgba(126, 134, 142, 0.05) 40%, rgba(126, 134, 142, 0.2));
    box-shadow: 0 40px 110px -34px rgba(126, 134, 142, 0.22), 0 20px 60px -30px rgba(0, 0, 0, 0.9);
}
.vsl-inner {
    position: relative; border-radius: 21px; overflow: hidden;
    aspect-ratio: 16 / 9;
    background: radial-gradient(120% 120% at 30% 20%, #171a1d, #0a0b0c 70%);
}
.vsl-inner video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A gradient scrim keeps the play button legible whatever frame is showing */
.vsl-inner::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(6, 7, 10, 0.32), transparent 30%, transparent 62%, rgba(6, 7, 10, 0.55));
    transition: opacity 0.5s ease;
}
.vsl.is-playing .vsl-inner::after { opacity: 0; }

.vsl-play {
    position: absolute; inset: 0; z-index: 2; cursor: pointer;
    display: grid; place-items: center; border: 0; background: none;
    transition: opacity 0.35s ease, visibility 0.35s;
}
.vsl.is-playing .vsl-play { opacity: 0; visibility: hidden; }
.vsl-btn {
    position: relative;
    width: clamp(74px, 9vw, 96px); height: clamp(74px, 9vw, 96px);
    border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(150deg, #f2f5f7, var(--slate-2));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(214, 218, 222, 0.45);
    transition: transform 0.45s var(--ease);
}
.vsl-play:hover .vsl-btn { transform: scale(1.06); }
/* The path is the Material play triangle, whose bounding box already
   sits right of centre (x 8..19 of 24) so it reads as optically centred.
   No margin nudge here: one was added on top once and it read crooked. */
.vsl-btn svg { width: 30%; height: 30%; fill: #111315; }
/* One slow pulse, on the ring only */
.vsl-btn::before {
    content: ''; position: absolute; inset: -12px; border-radius: 50%;
    border: 1px solid rgba(214, 218, 222, 0.4);
    animation: pulse 3s var(--ease) infinite;
}
@keyframes pulse {
    0% { transform: scale(0.9); opacity: 0.7; }
    70%, 100% { transform: scale(1.35); opacity: 0; }
}

.vsl-tag {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 20px; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em;
    color: #e7eaf0; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
    transition: opacity 0.4s ease;
}
.vsl.is-playing .vsl-tag { opacity: 0; }

/* ============================================================
   5. Section furniture
   ============================================================ */
.sec { position: relative; padding: clamp(52px, 8vh, 88px) 0; }

.kicker {
    display: block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: #9aa3ac; margin-bottom: 18px;
}
.sec-title {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(1.85rem, 4.4vw, 3.3rem);
    line-height: 1.15; letter-spacing: -0.02em; max-width: 20ch;
}
.sec-lede {
    margin-top: 20px; max-width: 58ch;
    font-size: clamp(0.98rem, 1.3vw, 1.1rem); line-height: 1.74; color: var(--body);
}
.sec-head--center { text-align: center; }
.sec-head--center .sec-title, .sec-head--center .sec-lede { margin-left: auto; margin-right: auto; }
/* The form heading is short, so let it hold one line. */
.sec-head--center .sec-title { max-width: none; }
/* The sticky intake bar would cover the form heading on a jump. */
#qualify { scroll-margin-top: 44px; }

/* The cost-of-waiting line: the emotional peak of the page, so it is
   set as a statement in the display serif, not as more description. */
.warn {
    margin: clamp(40px, 6vh, 64px) auto 0; text-align: center;
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.3; letter-spacing: -0.01em;
    color: var(--white); text-wrap: balance;
}

/* The Omnio embed is a cross-origin iframe, so round the frame itself. */
.qual-embed { margin-top: clamp(28px, 4vh, 40px); }
[data-omnio-form] iframe { border-radius: 12px; overflow: hidden; }

/* The numbers row sits straight under the form, so it carries less air. */
.sec--tight { padding-top: clamp(12px, 2vh, 24px); }

/* ============================================================
   6. Micro-qualifier
   One question, four answers, then straight to the call. Reads as
   a card so it holds the same weight the form used to.
   ============================================================ */
.qual {
    position: relative; overflow: hidden;
    margin: clamp(30px, 4.5vh, 42px) auto 0;
    padding: clamp(22px, 3vw, 32px);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(214, 218, 222, 0.05), rgba(126, 134, 142, 0.012));
    border: 1px solid rgba(200, 208, 216, 0.14);
    box-shadow: 0 30px 80px -44px rgba(126, 134, 142, 0.24), inset 0 1px 0 rgba(214, 218, 222, 0.06);
}
.qual::before {
    /* a soft lift in the corner, so the card reads as the centre of gravity */
    content: ''; position: absolute; top: -50%; right: -20%; width: 70%; height: 160%;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 90, 44, 0.07), transparent 70%);
}
.qual-opts {
    position: relative;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.qual-opt {
    font-family: var(--sans); cursor: pointer;
    padding: clamp(15px, 2.2vw, 20px) 10px;
    border-radius: 14px;
    border: 1px solid rgba(200, 208, 216, 0.16);
    background: linear-gradient(180deg, rgba(214, 218, 222, 0.05), rgba(126, 134, 142, 0.012));
    color: #dfe3e7;
    font-size: clamp(0.95rem, 1.35vw, 1.1rem); font-weight: 600; letter-spacing: -0.01em;
    white-space: nowrap;
    transition: border-color 0.35s var(--ease), background 0.35s var(--ease),
        transform 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.qual-opt:hover {
    border-color: rgba(200, 208, 216, 0.34);
    background: rgba(214, 218, 222, 0.08);
    transform: translateY(-2px);
}
.qual-opt.is-on {
    border-color: rgba(255, 138, 92, 0.85);
    background: linear-gradient(180deg, rgba(255, 90, 44, 0.18), rgba(230, 63, 20, 0.07));
    color: var(--white);
    box-shadow: 0 14px 34px -18px var(--accent-glow), inset 0 1px 0 rgba(255, 191, 164, 0.18);
}
.qual-result { position: relative; margin-top: clamp(20px, 3vh, 28px); text-align: center; }
.qual-result[hidden] { display: none; }
.qual-result.is-in { animation: qualIn 0.5s var(--ease) both; }
@keyframes qualIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.qual-say {
    max-width: 46ch; margin: 0 auto 20px;
    font-size: clamp(0.98rem, 1.3vw, 1.1rem); line-height: 1.7; color: var(--body);
}
.qual-result .cta-note { display: block; margin-top: 14px; }

/* ============================================================
   7. How it works
   Horizontal cards, one step each, number carried in the accent.
   ============================================================ */
.steps {
    margin-top: clamp(36px, 5vh, 52px); list-style: none;
    display: grid; grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
    background: var(--surface);
}
.steps li {
    position: relative; overflow: hidden;
    padding: clamp(26px, 3vw, 34px);
}
.steps li:hover { background: rgba(214, 218, 222, 0.03); }
.steps li + li { border-left: 1px solid var(--line); }

/* The step number is a quiet label, not a feature. */
.step-n {
    display: block; margin-bottom: 18px;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em;
    color: var(--dim);
}
.steps h3 { font-family: var(--serif); font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 400; letter-spacing: -0.01em; margin-bottom: 10px; }
.steps p { font-size: clamp(0.92rem, 1.1vw, 1rem); line-height: 1.7; color: var(--body); }

/* ============================================================
   8. Numbers
   Outcome cards. Each holds one metric and one line. Only real
   figures go here.
   ============================================================ */
.proof-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.tcard {
    position: relative; overflow: hidden;
    padding: clamp(24px, 3vw, 32px);
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--surface);
}
.tcard-metric {
    font-family: var(--serif); font-size: clamp(2.2rem, 3.6vw, 2.9rem);
    font-weight: 400; line-height: 1; letter-spacing: -0.02em;
    color: var(--white);
}
.tcard-say { margin-top: 14px; font-size: 0.98rem; line-height: 1.7; color: #c7cdd3; }

/* ============================================================
   9. FAQs
   ============================================================ */
.faq { margin-top: clamp(32px, 5vh, 48px); display: grid; gap: 12px; }
.faq details {
    border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
    background: var(--surface);
    transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.faq details:hover { border-color: rgba(200, 208, 216, 0.24); }
.faq details[open] { border-color: rgba(200, 208, 216, 0.28); }
.faq summary {
    cursor: pointer; list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 20px 22px; font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 500;
    color: #e2e6ea; transition: color 0.3s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--white); }
.faq summary::after {
    content: ''; flex: none; width: 11px; height: 11px;
    border-right: 1.5px solid var(--dim); border-bottom: 1.5px solid var(--dim);
    transform: rotate(45deg) translateY(-3px);
    transition: transform 0.35s var(--ease), border-color 0.3s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); border-color: var(--accent); }
.faq .ans { padding: 0 22px 22px; font-size: 0.96rem; line-height: 1.72; color: var(--body); }

/* ============================================================
   10. Close
   ============================================================ */
.close {
    position: relative; overflow: hidden;
    padding: clamp(64px, 10vh, 110px) 0; text-align: center;
}
.close::before {
    /* one warm glow, so the eye lands on the call to action */
    content: ''; position: absolute; left: 50%; top: 46%; width: 120%; height: 100%;
    transform: translate(-50%, -50%); pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 90, 44, 0.12), transparent 72%);
}
.close .wrap { position: relative; z-index: 1; }
.close .sec-title { font-size: clamp(2rem, 5.2vw, 3.9rem); max-width: 24ch; margin: 0 auto; }
.close .sec-lede { margin-left: auto; margin-right: auto; }

.cta-row {
    margin: clamp(32px, 5vh, 44px) auto 0;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
/* Under the video: sits close, the video is what it answers */
.cta-row--vsl { margin: clamp(22px, 3.5vh, 32px) auto 0; padding: 0 clamp(20px, 5vw, 48px); }
/* Under the cost-of-waiting line, centred with it and sitting close */
.cta-row--warn { margin-top: clamp(24px, 3.5vh, 32px); }
/* Solid, no gradient. A shade deeper than --accent-3 so white text
   clears 4.5:1 contrast. */
.btn {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 19px 34px; border-radius: 999px;
    font-family: var(--sans);
    font-size: clamp(0.96rem, 1.2vw, 1.06rem); font-weight: 600; letter-spacing: -0.005em;
    color: var(--white);
    background: #d9390f;
    transition: background 0.3s ease;
}
.btn:hover { background: #c2320c; }
.btn svg { width: 15px; height: 15px; fill: currentColor; }
.btn--sm { padding: 13px 24px; font-size: 0.9rem; }
.cta-note { font-size: 0.82rem; font-weight: 400; color: var(--dim); }

/* ============================================================
   11. Footer
   ============================================================ */
.foot {
    padding: clamp(40px, 6vh, 60px) clamp(20px, 5vw, 48px);
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    text-align: center;
}
.foot-note { font-size: 0.78rem; color: #6b727a; }

/* ============================================================
   12. Reveal: each piece rises out of a blur and comes into focus
   as it enters, like a lens finding its subject.
   ============================================================ */
:root { --reveal: opacity 1s var(--ease), transform 1s var(--ease), filter 1.1s var(--ease); }
.r { opacity: 0; transform: translateY(24px); filter: blur(12px); transition: var(--reveal); }
.r.in { opacity: 1; transform: none; filter: none; }

/* Cards carry their own transition for hover, so give them the reveal
   properties too, or the reveal would snap instead of move. */
.faq details { transition: border-color 0.4s var(--ease), background 0.4s var(--ease), var(--reveal); }
.tcard { transition: border-color 0.4s var(--ease), var(--reveal); }
.steps li { transition: background 0.4s var(--ease), var(--reveal); }

/* Stagger: the hero settles in on load, groups fan out as they arrive. */
.hero .wrap > .r:nth-child(2) { transition-delay: 0.12s; }
.hero .wrap > .r:nth-child(3) { transition-delay: 0.24s; }
.steps .r:nth-child(2) { transition-delay: 0.1s; }
.steps .r:nth-child(3) { transition-delay: 0.2s; }
.faq .r:nth-child(2) { transition-delay: 0.06s; }
.faq .r:nth-child(3) { transition-delay: 0.12s; }
.faq .r:nth-child(4) { transition-delay: 0.18s; }
.faq .r:nth-child(5) { transition-delay: 0.24s; }
.proof-grid .r:nth-child(2) { transition-delay: 0.08s; }
.proof-grid .r:nth-child(3) { transition-delay: 0.16s; }

/* ============================================================
   13. Responsive
   ============================================================ */
@media (max-width: 900px) {
    .steps { grid-template-columns: 1fr; }
    .steps li + li { border-left: 0; border-top: 1px solid var(--line); }
    .proof-grid { grid-template-columns: 1fr; gap: 14px; }
    .qual-opts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .btn { width: 100%; justify-content: center; }
}

/* Phones: the headline goes big and stacks in four short lines, set by
   hand so no word is ever left on a line alone. */
@media (max-width: 560px) {
    h1 { font-size: clamp(2.1rem, 10.6vw, 2.75rem); line-height: 1.06; }
    .br-m { display: inline; }
    .br-d { display: none; }
}

/* On small phones the fact carries the bar alone; the whole bar is the link. */
@media (max-width: 440px) {
    .intake-cta { display: none; }
}

/* ============================================================
   14. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .vsl-btn::before { animation: none; }
    .intake-dot { animation: none; }
    .r { opacity: 1; transform: none; filter: none; }
    .r .brush::after { transform: rotate(-0.7deg); transition: none; }
    .eyebrow::before { animation: none; transform: translate(-50%, -50%) rotate(0.6turn); }
    .qual-opt:hover { transform: none; }
    .qual-result.is-in { animation: none; }
}