@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;
    /* 20% under the Figma's 40px — a deliberate deviation, not a rounding. */
    --fs-h1: 32px;
    --lh-h1: 40px;
    --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-logo-lift: 1.25;
    --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;
    --eq-assist-logo-w: 256px;

    /* 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;
}

/* No border-radius here: outlines already follow the element's own corners,
   and setting one overrides the radius of anything with a lower-specificity
   rule of its own — it was squashing the dropdown's 10px corners to 2px. */
.eq-page :focus-visible {
    outline: 2px solid var(--eq-cta);
    outline-offset: 3px;
}

.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.

   The mark sits over a dark photograph, where the bronze reads dimmer than it
   does on white. Lifting it with a filter keeps one shared brand asset rather
   than forking a brighter copy of the SVG. */
.eq-header__logo img {
    width: auto;
    height: var(--eq-logo-h);
    filter: brightness(var(--eq-logo-lift));
    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);
    font-weight: 600;
    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-hero__terms {
    margin-top: var(--s-1);
    color: var(--eq-white);
    opacity: 0.64;
    font-size: var(--fs-mini);
    letter-spacing: var(--ls-mini);
    line-height: var(--lh-mini);
    text-align: center;
}

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

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

.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);
    font-weight: 600;
    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);
}

/* --- Dropdown -----------------------------------------------------------
   A custom listbox, not a native <select>: the open panel has to sit flush
   against the field and share one rounded shape, which no browser allows on
   a real select. Geometry mirrors the text inputs exactly. */
.eq-dropdown {
    position: relative;
}

.eq-dropdown__toggle {
    display: block;
    width: 100%;
    height: var(--eq-field-h);
    padding: 14px var(--s-6) 14px var(--s-2);
    border: 1px solid transparent;
    border-radius: var(--eq-radius);
    background: var(--eq-white);
    color: var(--eq-black);
    font-family: var(--eq-font);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--eq-field-lh);
    text-align: left;
    cursor: pointer;
    transition: padding 0.15s var(--eq-ease), border-radius 0.15s var(--eq-ease);
}

/* Keyboard focus needs a marker — a mouse click will not trigger
   :focus-visible, so this only shows when tabbing to it. */
/* The chosen value starts where the label still is, so it waits for the label
   to clear before fading in. Without this the two are drawn over each other
   for the first ~90ms — which a text input never does, because you focus an
   empty field and the label moves before any text exists. */
.eq-dropdown__value {
    display: block;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: opacity 0.12s var(--eq-ease) 0.08s;
}

.eq-dropdown.is-filled .eq-dropdown__value {
    opacity: 1;
}

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

/* Chevron, matching the design's 18px light glyph. */
.eq-dropdown__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: no-repeat center / 18px 18px
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23979696' stroke-opacity='0.64' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
    transition: transform 0.2s var(--eq-ease);
    pointer-events: none;
}

.eq-dropdown.is-open .eq-dropdown__toggle::after {
    transform: rotate(180deg);
}

/* Open: square off the bottom so the field and panel read as one shape. */
.eq-dropdown.is-open .eq-dropdown__toggle {
    border-radius: var(--eq-radius) var(--eq-radius) 0 0;
}

.eq-dropdown__label {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 1;
    max-width: 100%;
    margin: 0;
    padding: 14px var(--s-2);
    overflow: hidden;
    border: 1px solid transparent;
    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;
    transform-origin: var(--eq-text-inset) 0;
    transition: transform 0.15s var(--eq-ease), color 0.15s var(--eq-ease);
}

/* Only a chosen value moves the label — opening the panel leaves it sitting as
   a placeholder, so nothing shifts while the list is being read. */
.eq-dropdown.is-filled .eq-dropdown__toggle {
    padding-top: 22px;
    padding-bottom: 6px;
}

.eq-dropdown.is-filled .eq-dropdown__label {
    color: var(--eq-text-light);
    transform: scale(0.8) translateY(-8px);
}

.eq-dropdown__toggle:hover ~ .eq-dropdown__label {
    color: var(--eq-cta);
}

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

.eq-dropdown.is-invalid .eq-dropdown__label {
    color: var(--eq-danger);
}

/* The panel: attached, rounded only at the bottom. */
.eq-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    max-height: 264px;
    margin: 0;
    padding: var(--s-1) 0;
    overflow-y: auto;
    list-style: none;
    background: var(--eq-white);
    border-radius: 0 0 var(--eq-radius) var(--eq-radius);
    box-shadow: 0 16px 32px -16px rgba(26, 26, 26, 0.24);
    overscroll-behavior: contain;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--eq-grey-light) transparent;
}

/* WebKit: a thin, rounded thumb on an invisible track. The track margin keeps
   it clear of the panel's rounded bottom corner. */
.eq-dropdown__menu::-webkit-scrollbar {
    width: 6px;
}

.eq-dropdown__menu::-webkit-scrollbar-track {
    margin: var(--s-1) 0;
    background: transparent;
}

.eq-dropdown__menu::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--eq-grey-light);
    transition: background-color var(--eq-dur-sm) var(--eq-ease);
}

.eq-dropdown__menu::-webkit-scrollbar-thumb:hover {
    background: var(--eq-text-light);
}

.eq-dropdown__option {
    /* Extra right padding keeps the label clear of the scrollbar thumb. */
    padding: 10px var(--s-3) 10px var(--s-2);
    color: var(--eq-black);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    cursor: pointer;
    transition: background-color var(--eq-dur-sm) var(--eq-ease),
        color var(--eq-dur-sm) var(--eq-ease);
}

.eq-dropdown__option:hover,
.eq-dropdown__option.is-active {
    background: var(--eq-grey);
}

.eq-dropdown__option[aria-selected="true"] {
    color: var(--eq-cta);
    font-weight: 600;
}

/* 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;
}

/* Height follows the mark's own 617.7:192, so it can never be squashed. */
.eq-assist__title img {
    width: 100%;
    max-width: var(--eq-assist-logo-w);
    height: auto;
    margin-inline: auto;
}

.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 {
        --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: 28px;
        --lh-h1: 36px;
        --fs-h2: 28px;
        --lh-h2: 36px;
        --eq-assist-logo-w: 200px;
        --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: 24px;
        --lh-h1: 32px;
        --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;
    }
}