@charset "UTF-8";

/* ==========================================================================
   Equinerus — contact page
   --------------------------------------------------------------------------
   Everything is driven by the tokens in :root. Spacing is an 8-point scale
   (--s-1 … --s-20); layout intent gets its own tokens (--eq-hero-overlap,
   --eq-section-gap …) so the breakpoints only ever restate intent, never
   re-derive raw pixels.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Colour — straight from the Figma library */
    --eq-black: #1a1a1a;
    --eq-white: #ffffff;
    --eq-grey: #f5f5f5;
    --eq-grey-light: #e8e8e8;
    --eq-text-light: #979696;
    --eq-cta: #f37022;
    --eq-danger: #d64545;

    /* Spacing — 8-point scale */
    --s-1: 8px;
    --s-2: 16px;
    --s-3: 24px;
    --s-4: 32px;
    --s-5: 40px;
    --s-6: 48px;
    --s-8: 64px;
    --s-10: 80px;
    --s-12: 96px;
    --s-15: 120px;
    --s-20: 160px;

    /* Type */
    --eq-font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fs-h1: 40px;
    --lh-h1: 48px;
    --fs-h2: 32px;
    --lh-h2: 40px;
    --fs-h3: 24px;
    --lh-h3: 32px;
    --fs-body: 14px;
    --lh-body: 24px;
    --fs-mini: 12px;
    --lh-mini: 16px;
    --ls-h5: 0.28px;
    --ls-mini: 0.24px;

    /* Shape */
    --eq-radius: 10px;
    --eq-radius-sm: 5px;

    /* Layout intent */
    --eq-container: 1456px;
    --eq-gutter: var(--s-3);
    /* The header is just the mark, sized and offset per the design; the hero's
       top padding is derived from it so the two can never drift. */
    --eq-logo-top: var(--s-6);
    --eq-logo-h: 96px;
    --eq-header-h: calc(var(--eq-logo-top) + var(--eq-logo-h));
    --eq-hero-top: var(--s-2);
    /* How far the card hangs into the dark band, and how tall the photo layer
       is allowed to get before the band continues in flat black. */
    --eq-hero-overlap: 224px;
    --eq-hero-photo-max: 840px;
    /* The design nudges the feature list left of centre so its longest line
       clears the rider. */
    --eq-features-shift: 85px;
    /* Figma masks the hero photo with a radial gradient centred on the rider
       and fading to nothing at 58.3% of its radius. Expressed as percentages
       it stays proportional at any band size. */
    --eq-hero-focus-x: 63.9%;
    --eq-hero-photo-x: 50%;
    --eq-hero-mask: radial-gradient(
        62.4% 62.4% at var(--eq-hero-focus-x) 27.8%,
        #000 0%,
        rgba(0, 0, 0, 0) 100%
    );
    --eq-card-w: 640px;
    --eq-card-pad: var(--s-6);
    --eq-field-h: 48px;
    --eq-field-lh: 20px;
    /* Where text starts inside a field: 1px border + 16px padding. Labels,
       values and error messages all align to this. */
    --eq-text-inset: calc(1px + var(--s-2));
    --eq-textarea-h: 144px;
    --eq-section-gap: var(--s-20);
    --eq-tile-w: 288px;

    /* Motion */
    --eq-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --eq-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* easeOutQuint — long fluid tail */
    --eq-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */
    --eq-dur-sm: 0.24s;
    --eq-dur-md: 0.36s;
    --eq-dur-lg: 0.72s;
    --eq-dur-xl: 1.4s;
    --eq-stagger: 70ms;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body.eq-page {
    margin: 0;
    overflow-x: hidden;
    background: var(--eq-white);
    color: var(--eq-black);
    font-family: var(--eq-font);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.eq-page img,
.eq-page svg {
    display: block;
    max-width: 100%;
}

/* :where() again — a bare `.eq-page a` outranks every component rule below
   and would silently override their transitions. */
.eq-page :where(a) {
    color: inherit;
    text-decoration: none;
    transition: color var(--eq-dur-sm) var(--eq-ease-out), opacity var(--eq-dur-sm) var(--eq-ease-out);
}

/* :where() keeps this at zero specificity, so any component rule below wins. */
.eq-page :where(h1, h2, h3, h4, p, ul, ol, figure) {
    margin: 0;
}

.eq-page :focus-visible {
    outline: 2px solid var(--eq-cta);
    outline-offset: 3px;
    border-radius: 2px;
}

.eq-container {
    width: 100%;
    max-width: calc(var(--eq-container) + var(--eq-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--eq-gutter);
}

.eq-skip-link {
    position: absolute;
    left: var(--s-2);
    top: -100px;
    z-index: 100;
    padding: var(--s-1) var(--s-2);
    border-radius: var(--eq-radius);
    background: var(--eq-cta);
    color: var(--eq-white);
    font-weight: 600;
    transition: top 0.2s var(--eq-ease);
}

.eq-skip-link:focus {
    top: var(--s-2);
    color: var(--eq-white);
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */

.eq-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 20;
    height: var(--eq-header-h);
}

.eq-header__inner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    padding-top: var(--eq-logo-top);
}

/* Height drives it; width follows the mark's own 147.4:192.1 so it can never
   be squashed by a rounded pixel value. */
.eq-header__logo img {
    width: auto;
    height: var(--eq-logo-h);
    transition: opacity 0.2s var(--eq-ease);
}

.eq-header__logo:hover img {
    opacity: 0.72;
}

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */

.eq-hero {
    position: relative;
}

/* Height comes from the content inside plus room for the card to hang into,
   so the band ends in the right place no matter how the copy wraps. */
.eq-hero__top {
    position: relative;
    isolation: isolate;
    padding-top: calc(var(--eq-header-h) + var(--eq-hero-top));
    padding-bottom: calc(var(--s-3) + var(--eq-hero-overlap));
    background: var(--eq-black);
}

.eq-hero__band {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

/* Mask and opacity live on the wrapper — mirroring Figma's layer stack — so
   the image inside can be zoomed and parallaxed without dragging the mask
   along with it. */
/* Top-anchored and capped: on a tall narrow band, letting the photo cover the
   full height would zoom it to a meaningless crop. Past the cap the mask has
   faded to nothing anyway, so flat black reads identically. */
.eq-hero__masked {
    position: absolute;
    inset: 0 0 auto 0;
    height: min(100%, var(--eq-hero-photo-max));
    opacity: 0.48;
    -webkit-mask-image: var(--eq-hero-mask);
    mask-image: var(--eq-hero-mask);
}

/* scale and translate are separate animatable properties, so the slow load
   zoom can ease while the scroll parallax stays frame-accurate. */
.eq-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--eq-hero-photo-x) top;
    scale: var(--eq-hero-zoom, 1);
    translate: 0 var(--eq-hero-shift, 0px);
    will-change: scale, translate;
}

.js .eq-hero__image {
    --eq-hero-zoom: 1.08;
    transition: scale 1.8s var(--eq-ease-out);
}

.js .eq-page--ready .eq-hero__image {
    --eq-hero-zoom: 1;
}

.eq-hero__title {
    color: var(--eq-white);
    font-size: var(--fs-h1);
    font-weight: 600;
    line-height: var(--lh-h1);
    text-align: center;
    text-wrap: balance;
}

.eq-hero__subtitle {
    max-width: 480px;
    margin: var(--s-1) auto 0;
    color: var(--eq-white);
    text-align: center;
    text-wrap: pretty;
}

.eq-hero__pitch {
    max-width: 480px;
    margin: var(--s-6) auto 0;
    color: var(--eq-white);
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 28px;
    text-align: center;
    text-wrap: balance;
}

.eq-accent {
    color: var(--eq-cta);
}

/* --------------------------------------------------------------------------
   4b. Hero feature list
   -------------------------------------------------------------------------- */

.eq-features__list {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    width: max-content;
    max-width: 100%;
    margin: var(--s-3) auto 0;
    padding: 0;
    list-style: none;
    transform: translateX(calc(-1 * var(--eq-features-shift)));
}

.eq-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--s-1);
    color: var(--eq-white);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.eq-feature i {
    flex: 0 0 var(--s-4);
    width: var(--s-4);
    color: var(--eq-cta);
    font-size: 18px;
    line-height: var(--s-4);
    text-align: center;
}

/* Drops the first text line onto the icon's centre line, and keeps the icon
   pinned to the top once the label wraps on narrow screens. */
.eq-feature span {
    padding-top: 4px;
}

/* --------------------------------------------------------------------------
   5. Card
   -------------------------------------------------------------------------- */

/* Pulled up so it overlaps the dark band by exactly --eq-hero-overlap; the
   band's own bottom padding reserves the space. */
.eq-card {
    position: relative;
    width: 100%;
    max-width: var(--eq-card-w);
    margin: calc(-1 * var(--eq-hero-overlap)) auto 0;
    padding: var(--eq-card-pad);
    border-radius: var(--eq-radius);
    background: var(--eq-grey);
}

.eq-card__title {
    margin-bottom: var(--s-4);
    font-size: var(--fs-h3);
    font-weight: 300;
    line-height: var(--lh-h3);
}

/* --------------------------------------------------------------------------
   6. Form fields — floating labels
   -------------------------------------------------------------------------- */

.eq-field {
    margin-bottom: var(--s-2);
}

.eq-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.eq-honeypot input {
    width: 100%;
}

.eq-form .form-floating {
    position: relative;
}

.eq-form .form-control {
    display: block;
    width: 100%;
    height: var(--eq-field-h);
    min-height: var(--eq-field-h);
    padding: 14px var(--s-2);
    border: 1px solid transparent;
    border-radius: var(--eq-radius);
    background: var(--eq-white);
    background-image: none;
    color: var(--eq-black);
    font-family: var(--eq-font);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--eq-field-lh);
    box-shadow: none;
    transition: border-color 0.2s var(--eq-ease), box-shadow 0.2s var(--eq-ease),
        padding 0.15s var(--eq-ease);
}

/* The field draws its own focus treatment, so the global outline would double
   up — and clash with the red border when the field is also invalid. */
.eq-form .form-control:focus-visible {
    outline: none;
}

/* The field never changes chrome — no ring, no border tint. Hover and focus
   are signalled by the label alone (Bootstrap sets a blue border here, so the
   transparent value has to be stated, not just omitted). */
.eq-form .form-control:focus {
    border-color: transparent;
    background: var(--eq-white);
    color: var(--eq-black);
    box-shadow: none;
}

/* The placeholder is a single space; the label stands in for it. */
.eq-form .form-control::placeholder {
    color: transparent;
    opacity: 0;
}

.eq-form .form-floating > label {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 1;
    max-width: 100%;
    padding: 14px var(--s-2);
    overflow: hidden;
    border: 1px solid transparent;
    /* Figma sets the resting field text in Zwart, not the light grey. */
    color: var(--eq-black);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--eq-field-lh);
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    /* Pivot on the text's own left edge (border + padding), not the box corner.
       Scaling about 0 0 would shrink that inset too and pull the floated label
       ~3px left of the value it labels. */
    transform-origin: var(--eq-text-inset) 0;
    transition: transform 0.15s var(--eq-ease), color 0.15s var(--eq-ease);
}

/* Filled or focused: value drops, label shrinks and rises into the gap. */
.eq-form .form-floating > .form-control:focus,
.eq-form .form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 22px;
    padding-bottom: 6px;
}

/* Once shrunk it is a caption above the value, so it steps back to grey. */
.eq-form .form-floating > .form-control:focus ~ label,
.eq-form .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--eq-text-light);
    transform: scale(0.8) translateY(-8px);
}

/* Hover and focus tint the label only, in either the resting or shrunk state.
   Since the field itself shows nothing, this is also the focus indicator for
   keyboard users, so focus has to be included here — not just hover. */
.eq-form .form-floating > .form-control:hover ~ label,
.eq-form .form-floating > .form-control:focus ~ label {
    color: var(--eq-cta);
}

/* Textarea keeps the same mechanism, just taller and top-aligned. */
.eq-form .eq-field--textarea > .form-control {
    height: var(--eq-textarea-h);
    min-height: var(--eq-textarea-h);
    max-height: 320px;
    line-height: var(--lh-body);
    resize: vertical;
}

.eq-form .eq-field--textarea > .form-control:focus,
.eq-form .eq-field--textarea > .form-control:not(:placeholder-shown) {
    padding-top: var(--s-3);
    padding-bottom: var(--s-1);
}

/* Invalid — border only, to stay consistent with the ring-free focus state. */
.eq-form .form-control.is-invalid,
.eq-form .form-control.is-invalid:focus {
    border-color: var(--eq-danger);
    background-image: none;
    box-shadow: none;
}

.eq-form .form-floating > .form-control.is-invalid ~ label {
    color: var(--eq-danger);
}

.eq-error {
    margin-top: var(--s-1);
    /* Line up under the field's text, not its outer edge. */
    padding-inline-start: var(--eq-text-inset);
    color: var(--eq-danger);
    font-size: var(--fs-mini);
    letter-spacing: var(--ls-mini);
    line-height: var(--lh-mini);
}

/* Announced by assistive tech, shown visually as a red label instead. */
.eq-error--sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.eq-error:empty {
    display: none;
}

/* --------------------------------------------------------------------------
   7. Consent checkbox
   -------------------------------------------------------------------------- */

.eq-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
}

.eq-consent__input {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid transparent;
    border-radius: var(--eq-radius-sm);
    background: var(--eq-white);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    cursor: pointer;
    transition: background-color 0.15s var(--eq-ease), border-color 0.15s var(--eq-ease);
}

.eq-consent__input:checked {
    border-color: var(--eq-cta);
    background-color: var(--eq-cta);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E");
}

.eq-consent__input.is-invalid {
    border-color: var(--eq-danger);
}

.eq-consent__label {
    margin: 0;
    cursor: pointer;
    line-height: var(--lh-body);
    transition: color var(--eq-dur-md) var(--eq-ease-out);
}

/* The consent error shows as red label text rather than a message line. The
   message itself still exists for screen readers — see .eq-error--sr. */
.eq-consent__input.is-invalid ~ .eq-consent__label {
    color: var(--eq-danger);
}

.eq-consent__label a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.eq-consent__label a:hover {
    color: var(--eq-cta);
}

/* --------------------------------------------------------------------------
   8. Button + form footer
   -------------------------------------------------------------------------- */

.eq-form__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-2);
    margin-top: var(--s-6);
}

/* Sits beside the button, not under a field — so no field inset. */
.eq-error--form {
    flex: 1 1 200px;
    margin-top: 0;
    padding-inline-start: 0;
    text-align: left;
}

.eq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    min-width: 152px;
    height: var(--eq-field-h);
    padding: 0 var(--s-3);
    border: 1px solid transparent;
    border-radius: var(--eq-radius);
    background: var(--eq-cta);
    color: var(--eq-white);
    font-family: var(--eq-font);
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: var(--ls-h5);
    line-height: 1;
    cursor: pointer;
    /* Opacity only — no lift, no shadow. Matches how the logos behave. */
    transition: opacity var(--eq-dur-sm) var(--eq-ease);
}

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

.eq-btn:hover {
    opacity: 0.8;
}

.eq-btn:active {
    opacity: 0.68;
}

.eq-btn:disabled,
.eq-btn.is-loading {
    opacity: 0.64;
    cursor: progress;
}

.eq-btn__spinner {
    display: none;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--eq-white);
    border-radius: 50%;
    animation: eq-spin 0.6s linear infinite;
}

.eq-btn.is-loading .eq-btn__spinner {
    display: block;
}

@keyframes eq-spin {
    to {
        transform: rotate(360deg);
    }
}

.eq-recaptcha-notice {
    margin-top: var(--s-2);
    color: var(--eq-text-light);
    font-size: var(--fs-mini);
    letter-spacing: var(--ls-mini);
    line-height: var(--lh-mini);
    text-align: right;
}

.eq-recaptcha-notice a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.eq-recaptcha-notice a:hover {
    color: var(--eq-cta);
}

/* --------------------------------------------------------------------------
   9. Result panel — success and failure share one layout
   -------------------------------------------------------------------------- */

.eq-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: var(--s-4);
    text-align: center;
    animation: eq-fade-up 0.4s var(--eq-ease) both;
}

.eq-result:focus {
    outline: none;
}

/* 80px circle, 24px glyph, 8px down to the title. */
.eq-result__icon {
    display: flex;
    flex: 0 0 var(--s-10);
    align-items: center;
    justify-content: center;
    width: var(--s-10);
    height: var(--s-10);
    margin-bottom: var(--s-1);
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
}

/* 8px from the title down to the description. */
.eq-result__title {
    margin-bottom: var(--s-1);
    font-size: var(--fs-h3);
    font-weight: 300;
    line-height: var(--lh-h3);
}

/* Last element in the panel — its bottom spacing is the panel's own padding. */
.eq-result__text {
    max-width: 400px;
    color: var(--eq-text-light);
    text-wrap: pretty;
}

.eq-result--success .eq-result__icon {
    background: rgba(243, 112, 34, 0.12);
    color: var(--eq-cta);
}

.eq-result--error .eq-result__icon {
    background: rgba(214, 69, 69, 0.12);
    color: var(--eq-danger);
}

@keyframes eq-fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

/* --------------------------------------------------------------------------
   10. "How can we assist you?"
   -------------------------------------------------------------------------- */

.eq-assist {
    padding-block: var(--eq-section-gap);
}

.eq-assist__title {
    font-size: var(--fs-h2);
    font-weight: 300;
    line-height: var(--lh-h2);
    text-align: center;
    text-wrap: balance;
}

.eq-assist__intro {
    max-width: 712px;
    margin: var(--s-2) auto 0;
    text-align: center;
    text-wrap: pretty;
}

.eq-assist__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3);
    max-width: 912px;
    margin: var(--s-6) auto 0;
    padding: 0;
    list-style: none;
}

.eq-assist__list > li {
    flex: 0 1 var(--eq-tile-w);
    max-width: 100%;
}

.eq-tile {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    height: var(--s-6);
}

.eq-tile__icon {
    display: flex;
    flex: 0 0 var(--s-6);
    align-items: center;
    justify-content: center;
    width: var(--s-6);
    height: var(--s-6);
    border-radius: var(--eq-radius);
    background: var(--eq-grey-light);
    color: var(--eq-black);
    font-size: 20px;
    /* Colour fades need an even curve. easeOutQuint front-loads ~90% of the
       change into the first quarter of its duration, which on a crossfade
       reads as an instant snap rather than a fade. */
    transition: background-color var(--eq-dur-md) var(--eq-ease),
        color var(--eq-dur-md) var(--eq-ease);
}

/* Plain colour crossfade — the icon fills, the glyph flips to white. Nothing
   moves, scales or casts a shadow. */
a.eq-tile:hover .eq-tile__icon,
a.eq-tile:focus-visible .eq-tile__icon {
    background: var(--eq-cta);
    color: var(--eq-white);
}

.eq-tile__body {
    min-width: 0;
}

.eq-tile__title {
    display: block;
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: var(--ls-h5);
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Must match the icon's timing exactly, or the two halves of the hover
       drift apart — that mismatch is what read as "not smooth" originally. */
    transition: color var(--eq-dur-md) var(--eq-ease);
}

.eq-tile__meta {
    display: block;
    margin-top: 4px;
    color: var(--eq-text-light);
    font-size: var(--fs-mini);
    letter-spacing: var(--ls-mini);
    line-height: var(--lh-mini);
    transition: color var(--eq-dur-md) var(--eq-ease-out);
}

a.eq-tile:hover .eq-tile__title {
    color: var(--eq-cta);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.eq-footer {
    padding-block: var(--s-6);
    background: var(--eq-black);
    color: var(--eq-white);
}

.eq-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
}

.eq-footer__text {
    max-width: 696px;
}

.eq-footer__copy {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.eq-footer__legal {
    margin-top: var(--s-2);
    opacity: 0.64;
    font-size: var(--fs-mini);
    letter-spacing: var(--ls-mini);
    line-height: var(--lh-mini);
}

.eq-footer__logo {
    flex: 0 0 auto;
}

.eq-footer__logo img {
    width: 106px;
    height: 33px;
    transition: opacity 0.2s var(--eq-ease);
}

.eq-footer__logo:hover img {
    opacity: 0.72;
}

/* --------------------------------------------------------------------------
   13. Motion — entrance reveals
   --------------------------------------------------------------------------
   Elements are only hidden when the `js` class is present, so if the script
   never runs the page renders fully visible instead of blank. js/motion.js
   adds .is-visible and sets --eq-delay for staggering.
   -------------------------------------------------------------------------- */

.js [data-animate] {
    opacity: 0;
    transition: opacity var(--eq-dur-lg) var(--eq-ease-out),
        translate var(--eq-dur-lg) var(--eq-ease-out),
        scale var(--eq-dur-lg) var(--eq-spring),
        filter var(--eq-dur-lg) var(--eq-ease-out);
    transition-delay: var(--eq-delay, 0ms);
    will-change: opacity, translate;
}

.js [data-animate="rise"] {
    translate: 0 32px;
}

.js [data-animate="lift"] {
    translate: 0 56px;
    scale: 0.97;
}

/* Blur costs a layer, so it is reserved for the two big headings. */
.js [data-animate="reveal"] {
    translate: 0 24px;
    filter: blur(12px);
}

.js [data-animate="pop"] {
    scale: 0.6;
}

.js [data-animate="left"] {
    translate: -24px 0;
}

.js [data-animate].is-visible {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: blur(0);
    will-change: auto;
}

/* --------------------------------------------------------------------------
   14. Responsive — layout intent only
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    :root {
        --eq-section-gap: var(--s-15);
        --eq-features-shift: 40px;
    }
}

@media (max-width: 991.98px) {
    :root {
        --fs-h1: 36px;
        --lh-h1: 44px;
        --eq-hero-overlap: 176px;
        --eq-hero-photo-max: 720px;
        /* Below this width there is no rider to clear — centre the list. */
        --eq-features-shift: 0px;
    }
}

@media (max-width: 767.98px) {
    :root {
        --eq-gutter: var(--s-2);
        --eq-logo-top: var(--s-4);
        --eq-logo-h: 72px;
        --eq-hero-top: var(--s-2);
        --eq-hero-overlap: 120px;
        --eq-hero-photo-max: 560px;
        --eq-card-pad: var(--s-3);
        --eq-section-gap: var(--s-12);
        --fs-h1: 32px;
        --lh-h1: 40px;
        --fs-h2: 28px;
        --lh-h2: 36px;
        --fs-h3: 20px;
        --lh-h3: 28px;
        /* Narrow crop: keep the rider in frame and re-centre the mask on it. */
        --eq-hero-focus-x: 50%;
        --eq-hero-photo-x: 66%;
    }

    .eq-hero__pitch {
        line-height: 26px;
    }

    .eq-footer__inner {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: var(--s-3);
    }

    /* Full width and flush left — max-content would centre a ragged block,
       and the longest label has to wrap at this size anyway. */
    .eq-features__list {
        width: 100%;
        margin-inline: 0;
    }

    .eq-assist__list {
        gap: var(--s-4);
    }

    .eq-assist__list > li {
        flex: 1 1 100%;
        display: flex;
        justify-content: center;
    }

    .eq-tile {
        width: 100%;
        max-width: var(--eq-tile-w);
    }
}

@media (max-width: 575.98px) {
    :root {
        --fs-h1: 28px;
        --lh-h1: 36px;
        --eq-logo-top: var(--s-3);
        --eq-logo-h: 64px;
        --eq-hero-overlap: 96px;
        --eq-hero-photo-max: 480px;
    }

    .eq-form__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .eq-error--form {
        flex: 0 0 auto;
        text-align: center;
    }

    .eq-btn {
        width: 100%;
    }

    .eq-recaptcha-notice {
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   15. Preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .eq-page *,
    .eq-page *::before,
    .eq-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Show everything outright — no reveal, no zoom, no parallax. */
    .js [data-animate] {
        opacity: 1;
        translate: 0 0;
        scale: 1;
        filter: none;
        transition-delay: 0ms;
    }

    .js .eq-hero__image,
    .js .eq-page--ready .eq-hero__image {
        --eq-hero-zoom: 1;
        --eq-hero-shift: 0px;
    }
}