/* Site layout, shared by every page.
   Add a page: link this file, put the rays div in the body,
   then write sections inside <main>. No page defines its own layout. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background-color: #0a0a0a; }

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #f0f0f0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Rays behind the page, at full strength. The teal matches the artwork, so a slow
   or failed load never shows black.
   The SVG is embedded with <object>, not with background-image or <img>: those two
   freeze it on its first frame in Chrome. <object> gives the artwork a document of
   its own, so the sweep runs and the prefers-reduced-motion rule inside rays.svg
   is honoured. */
.rays {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: #4196a6;
}

.rays object {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Wordmark at the top of every page, a link back to the home page. */
.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.5rem;
    padding: 0 1.5rem;
}

.brand a {
    display: inline-block;
    color: #f0f0f0;
    font-family: 'Signika', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: opacity 0.15s;
}

.brand a:hover { opacity: 0.75; }

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-width: 860px;
    margin: 0 auto 3rem;
    padding: 4rem 3rem;
    gap: 5rem;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(28px) saturate(130%);
    -webkit-backdrop-filter: blur(28px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* Without a backdrop filter the panel is only a tint, so make it carry more. */
@supports not (backdrop-filter: blur(1px)) {
    main { background: rgba(0, 0, 0, 0.55); }
}

/* The first screen of the home page: the headline fills what the panel shows of the viewport
   (brand 3.5rem + panel padding 4rem × 2). */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: calc(100svh - 11.5rem);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.hero h1 {
    color: #f0f0f0;
    font-size: clamp(1.5rem, calc((100vw - 5rem) / 11.5), 4.25rem); /* keeps "Brouillard technologique?" (about 11em wide) on one line: 5rem is the phone gutter plus panel padding */
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.hero .sub {
    margin-top: 3rem;
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    font-weight: 300;
    line-height: 1.3;
}

/* The scroll hint belongs to the fog: it sits outside <main>, whose isolation would keep it
   under the clouds, and shows only while fog.js runs. */
.scroll { display: none; }

/* The fog (fog.js). All vars run 0 to 1 with the scroll: --h sharpens the headline,
   --s clears the subheading, --p parts the clouds. Nothing applies before fog.js sets
   .fogged, so the page stays clear without JS or with reduced motion. */
.fogged { --h: 0; --p: 0; --s: 0; }
/* The panel starts invisible and appears as the fog clears. The whole glass (tint, blur,
   border, shadow) sits on ::before, so only its opacity changes per frame and the tall panel
   is never repainted. Moving clouds above a backdrop filter make the browser redraw the blur
   every frame, so the fog leaves the page once it is fully clear (fog.js sets .clear). */
.fogged main { position: relative; isolation: isolate; backdrop-filter: none; -webkit-backdrop-filter: none; background: none; border-color: transparent; box-shadow: none; }
.fogged main::before { content: ''; position: absolute; inset: -1px; z-index: -1; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: inherit; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(28px) saturate(130%); -webkit-backdrop-filter: blur(28px) saturate(130%); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); opacity: var(--p); pointer-events: none; }
.clear .fog { display: none; }
.fogged .hero h1 { filter: blur(calc(3px - var(--h) * 3px)); opacity: calc(0.75 + var(--h) * 0.25); }
.fogged .hero .sub { filter: blur(calc(7px - var(--s) * 7px)); opacity: calc(0.55 + var(--s) * 0.45); animation: emerge 2.4s ease-out 1.1s both; }
.fogged .scroll { display: block; position: fixed; z-index: 6; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: #0a0a0a; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-shadow: none; pointer-events: none; opacity: calc(0.8 - var(--h) * 0.8); }

/* Under the fog the rays are dark and grey, so the background is hard to make out; colour and light come back as the fog clears. */
.fogged .rays { filter: grayscale(calc(1 - var(--p))) brightness(calc(0.45 + var(--p) * 0.55)); }

.fog { display: none; }
.fogged .fog { display: block; position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; opacity: calc(1 - var(--p)); }
.fog div { position: absolute; border-radius: 50%; }
/* The veil also fades on its own, so it clears faster than the clouds. */
.fog .veil { inset: 0; border-radius: 0; background: rgba(215, 215, 210, 0.22); opacity: calc(1 - var(--p)); }
/* Each cloud drifts forever and, on `translate` so it composes with the drift, leaves the screen its own way. */
.fog .c1 { left: -20%; top: -30%; width: 90vw; height: 90vw; background: radial-gradient(circle, rgba(235, 235, 230, 0.75) 0%, rgba(235, 235, 230, 0) 65%); filter: blur(30px); animation: drift1 26s ease-in-out infinite alternate; translate: calc(var(--p) * -34vw) calc(var(--p) * -14vh); }
.fog .c2 { right: -25%; top: 10%; width: 80vw; height: 80vw; background: radial-gradient(circle, rgba(220, 220, 215, 0.7) 0%, rgba(220, 220, 215, 0) 65%); filter: blur(40px); animation: drift2 32s ease-in-out infinite alternate; translate: calc(var(--p) * 40vw) calc(var(--p) * -8vh); }
.fog .c3 { left: 10%; bottom: -40%; width: 100vw; height: 80vw; background: radial-gradient(circle, rgba(240, 240, 236, 0.8) 0%, rgba(240, 240, 236, 0) 65%); filter: blur(40px); animation: drift3 38s ease-in-out infinite alternate; translate: calc(var(--p) * -12vw) calc(var(--p) * 42vh); }
.fog .c4 { left: 25%; top: 20%; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(200, 200, 196, 0.6) 0%, rgba(200, 200, 196, 0) 65%); filter: blur(50px); animation: drift4 22s ease-in-out infinite alternate; translate: calc(var(--p) * 30vw) calc(var(--p) * 30vh); }

@keyframes drift1 { from { transform: translate(-8%, -4%) scale(1); } to { transform: translate(10%, 6%) scale(1.15); } }
@keyframes drift2 { from { transform: translate(6%, 8%) scale(1.1); } to { transform: translate(-10%, -6%) scale(0.95); } }
@keyframes drift3 { from { transform: translate(-4%, 10%) scale(1); } to { transform: translate(8%, -8%) scale(1.2); } }
@keyframes drift4 { from { transform: translate(10%, -2%) scale(1.05); } to { transform: translate(-6%, 4%) scale(0.9); } }
@keyframes emerge { from { opacity: 0; } to { opacity: 1; } }

.hero .eyebrow {
    color: rgba(240, 240, 240, 0.75);
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero .cta { margin-top: 2.25rem; }

/* Button. The primary is light on dark; the secondary is an outline. */
.cta {
    display: inline-block;
    padding: 0.9rem 1.75rem;
    border: 1px solid #f0f0f0;
    border-radius: 999px;
    background: #f0f0f0;
    color: #0a0a0a;
    font: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    text-shadow: none;
    cursor: pointer;
    transition: opacity 0.15s;
}

.cta:hover { opacity: 0.85; }
.cta:disabled { opacity: 0.5; cursor: default; }

.cta.secondary {
    background: transparent;
    color: #f0f0f0;
    border-color: rgba(240, 240, 240, 0.45);
}

.prose {
    text-align: left;
    /* Full width, so a one-line paragraph keeps the same left edge as a long one
       instead of shrinking to its text and centring. */
    width: 100%;
    max-width: 700px;
    color: #f0f0f0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.45;
    text-wrap: pretty;
}

.prose > * + * { margin-top: 2.25rem; }

.prose h2, .quotes h2 {
    color: #f0f0f0;
    font-size: 1.25rem;
    font-weight: 700;
}

.prose h2 + * { margin-top: 1rem; }

.price {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.price small { font-size: 1.1rem; font-weight: 400; margin-left: 0.5rem; }

/* The offer card: the button on the left, the price and the refund terms on the right.
   It wraps to one column on a phone. */
.offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid rgba(240, 240, 240, 0.25);
    border-radius: 1rem;
    background: rgba(240, 240, 240, 0.06);
}

.offer .price { font-size: 1.5rem; }
.offer .price small { font-size: 1rem; }
.offer .price + p { margin-top: 0.25rem; font-size: 1rem; }

.prose ul { padding-left: 1.25rem; }

.prose li + li { margin-top: 0.75rem; }

.prose a {
    color: #f0f0f0;
    text-decoration: none;
    border-bottom: 1px solid rgba(240, 240, 240, 0.4);
    transition: border-color 0.15s;
}

.prose a:hover { border-bottom-color: #f0f0f0; }

/* .book a and .prose a both beat .cta on specificity, so the button would render its own
   light link colour on its light background. Name the button in both. */
.prose .cta, .book .cta { color: #0a0a0a; border-bottom: 0; }

.quote {
    text-align: left;
    width: 100%;
    max-width: 700px;
}

.quote p {
    color: #f0f0f0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.45;
    text-wrap: pretty;
}

.quote .qm {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2.5rem;
    line-height: 0;
    vertical-align: -0.10em;
}

/* The booking form: one step visible at a time (site.js toggles the hidden attribute). */
.book {
    width: 100%;
    max-width: 700px;
    color: #f0f0f0;
    font-size: 1.15rem;
    line-height: 1.5;
    text-wrap: pretty;
}

.book h1 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.book h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.book p + p, .book ul + p, .book p + ul, .book ul + .price { margin-top: 1rem; }
.book .price + .guarantee { margin-top: 1rem; }
.book ul { padding-left: 1.25rem; }
.book li + li { margin-top: 0.5rem; }
.book a { color: #f0f0f0; }

/* Link to the privacy page under a hint: smaller and dimmer than the text above it. */
.book .field + .hint { margin-top: 1.75rem; }
.book .privacy-link { margin-top: 0.5rem; font-size: 0.9rem; }
.book .privacy-link a { color: rgba(240, 240, 240, 0.55); text-decoration-color: rgba(240, 240, 240, 0.35); }
.book .privacy-link a:hover { color: rgba(240, 240, 240, 0.85); }

.field { margin-top: 1.75rem; }

.field > label, .field > .legend {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.field .hint {
    display: block;
    color: rgba(240, 240, 240, 0.7);
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 0.6rem;
}

.field > input, .field > textarea, .field > select {
    width: 100%;
    padding: 0.8rem 1rem;
    font: inherit;
    color: #f0f0f0;
    text-shadow: none;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
}

.field textarea { min-height: 8rem; resize: vertical; }

.field > input:focus-visible, .field > textarea:focus-visible, .field > select:focus-visible, .choices label:focus-within {
    outline: 2px solid rgba(240, 240, 240, 0.7);
    outline-offset: 2px;
}

.choices { display: grid; gap: 0.5rem; }

.choices label {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.choices label:has(:checked) {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.55);
}

.choices input { flex: none; margin-top: 0.4rem; accent-color: #f0f0f0; }

/* Progress across the steps of the form: a numeral over a rule, one per step.
   A finished step is a button back to it. site.js toggles .done / .current. */
.progress {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    list-style: none;
    width: 100%;
    max-width: 700px;
    margin-bottom: 2.5rem;
}

.progress li { position: relative; flex: 1 1 12rem; min-width: 0; }
.book .progress li + li { margin-top: 0; } /* outranks the .book li + li spacing */

/* the rule under each step — the progress indicator itself */
.progress li::before {
    content: '';
    display: block;
    height: 3px;
    border-radius: 999px;
    background: rgba(240, 240, 240, 0.18);
    transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.progress li.done::before    { background: rgba(240, 240, 240, 0.7); }
.progress li.current::before { background: #f0f0f0; }

.progress button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 0 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: #f0f0f0;
    cursor: default;
}

/* the numeral */
.progress .num {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: rgba(240, 240, 240, 0.5);
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* the label is the button's text node — lay it out beside the numeral */
.progress button {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: baseline;
    column-gap: 0.875rem;
    row-gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(240, 240, 240, 0.6);
}

.progress .num { grid-row: 1; grid-column: 1; }

/* status line */
.progress button::after {
    content: 'à venir';
    grid-row: 2;
    grid-column: 1 / -1;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(240, 240, 240, 0.6);
}

.progress .done button            { color: rgba(240, 240, 240, 0.85); cursor: pointer; }
.progress .done button:hover      { color: #f0f0f0; }
.progress .done .num              { color: #f0f0f0; }
.progress .done button::after     { content: 'complétée'; }

.progress .reached button         { color: rgba(240, 240, 240, 0.85); cursor: pointer; }
.progress .reached button:hover   { color: #f0f0f0; }
.progress .reached .num           { color: #f0f0f0; }
.progress .reached button::after  { content: 'commencée'; }
.progress li.reached::before      { background: rgba(240, 240, 240, 0.7); }

.progress .current button         { color: #f0f0f0; }
.progress .current .num           { color: #f0f0f0; }
.progress .current button::after  { content: 'en cours'; color: rgba(240, 240, 240, 0.8); }

.progress button:focus-visible {
    outline: 2px solid rgba(240, 240, 240, 0.7);
    outline-offset: 4px;
    border-radius: 6px;
}

@media (max-width: 30rem) {
    .progress { gap: 1rem; }
    .progress .num { font-size: 2rem; }
}

.book h3 { font-size: 1.1rem; font-weight: 600; margin-top: 2rem; }

/* Headings take focus on a step change for screen readers; no ring needed. */
.book h1:focus, .book h2:focus { outline: 0; }

.devfill { position: fixed; right: 1rem; bottom: 1rem; z-index: 10; }

/* The assistant chat in step 2. */
.chat { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }

.bubble {
    max-width: 85%;
    padding: 0.8rem 1rem;
    border-radius: 14px;
    white-space: pre-wrap;
    text-wrap: pretty;
}

.bubble.assistant { align-self: flex-start; background: rgba(255, 255, 255, 0.1); border-bottom-left-radius: 4px; }
.bubble.user { align-self: flex-end; background: rgba(240, 240, 240, 0.9); color: #0a0a0a; text-shadow: none; border-bottom-right-radius: 4px; }
.bubble.pending { color: rgba(240, 240, 240, 0.6); }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.chips:empty { display: none; }
.chips .cta { padding: 0.5rem 1rem; font-size: 1rem; font-weight: 500; }

.composer { margin-top: 1rem; }
.composer[hidden] { display: none; }

.composer textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    font: inherit;
    color: #f0f0f0;
    text-shadow: none;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    resize: vertical;
}

.composer textarea:focus-visible { outline: 2px solid rgba(240, 240, 240, 0.7); outline-offset: 2px; }
.composer-actions { display: flex; justify-content: flex-end; margin-top: 0.75rem; }

.card {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
}

.card[hidden] { display: none; }
.card h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }
.card .actions { margin-top: 0.5rem; }
.card .edit[hidden], .card .view[hidden] { display: none; }
.card .edit .field:first-child { margin-top: 0; }
.field > select option { color: #0a0a0a; }

.link-button {
    background: none;
    border: 0;
    padding: 0;
    color: rgba(240, 240, 240, 0.7);
    font: inherit;
    font-size: 1rem;
    text-decoration: underline;
    cursor: pointer;
}

.link-button:hover { color: #f0f0f0; }
.cancel { margin-top: 1rem; text-align: left; }
.cancel[hidden] { display: none; }

/* Confirmation before wiping the form. */
.confirm {
    margin: auto; /* the global reset removes the browser's centring */
    max-width: 24rem;
    padding: 1.5rem;
    color: #f0f0f0;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    font-size: 1.1rem;
    line-height: 1.5;
}

.confirm::backdrop { background: rgba(0, 0, 0, 0.6); }
.confirm h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; }
.confirm .actions { margin-top: 1.5rem; }

.book h2 { margin-top: 2rem; }
.book h1 + p, .book h2 + ul, .book h2 + p { margin-top: 0; }
.book h1 + ul { margin-top: 1rem; }
.book ul + h2, .book p + h2 { margin-top: 2rem; }

.turnstile { margin-top: 1.5rem; }
.turnstile:empty { display: none; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.summary dt {
    color: rgba(240, 240, 240, 0.7);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.summary dd { margin: 0.25rem 0 1.25rem; white-space: pre-wrap; }

.guarantee {
    margin-top: 1.75rem;
    padding: 1rem 1.25rem;
    border-left: 3px solid rgba(240, 240, 240, 0.6);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 2.5rem;
}

.actions .cta:only-child { margin-left: auto; }
.actions.start { justify-content: flex-start; }
.actions.start .cta:only-child { margin-left: 0; }

.book ::placeholder { color: rgba(240, 240, 240, 0.5); opacity: 1; }

.form-error { color: #ffc2b8; margin-top: 1.25rem; }
.test-note { margin-top: 1rem; padding: 0.75rem 1rem; border: 1px dashed rgba(255, 194, 184, 0.7); border-radius: 10px; color: #ffc2b8; font-size: 1rem; }
.test-note[hidden] { display: none; }

/* Outside the panel, on the background with the brand. */
.contact {
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #f0f0f0;
    font-size: 1rem;
    font-weight: 400;
}

.contact a {
    color: #f0f0f0;
    text-decoration: none;
}

.contact a:hover { opacity: 0.7; }

.obf { unicode-bidi: bidi-override; direction: rtl; }
.obf-hide { display: none; }

@media (max-width: 720px) {
    main {
        margin: 0 1rem 1rem;
        padding: 3rem 1.5rem;
        border-radius: 14px;
    }

    .hero { min-height: calc(100svh - 9rem); } /* brand 3rem + panel padding 3rem × 2 */
    .book h1 { font-size: 1.6rem; }
    .book h2 { font-size: 1.3rem; }
    .book, .field > input, .field > textarea, .field > select { font-size: 1.05rem; }
    .brand { height: 3rem; }
    .brand a { font-size: 1.35rem; }
    .actions .cta { flex: 1; text-align: center; }
    .prose { font-size: 1.15rem; }
    .quote p { font-size: 1.15rem; }
    .quote .qm { font-size: 1.9rem; }
}

/* Quotes that slide sideways. The dots stretch into pills for the current one.
   quotes.js moves the track and keeps the dots in sync; without JS the first
   quote shows and the nav does nothing. */
.quotes {
    width: 100%;
    max-width: 700px;
    margin: 0; /* main already spaces its sections */
}

.quotes h2 { margin-bottom: 1rem; }

.quotes-viewport { overflow: hidden; }

.quotes-track {
    display: flex;
    transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.quote {
    flex: 0 0 100%;
    min-width: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.quote blockquote {
    margin: 0;
    font-size: 1.5rem; /* same text as .prose */
    font-weight: 400;
    line-height: 1.45;
    text-wrap: pretty;
}

/* nav */
.quotes-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 2.25rem;
}

.quotes-dots {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.quotes-dots button {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(240, 240, 240, 0.28);
    cursor: pointer;
    transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms linear;
}

.quotes-dots button[aria-selected='true'] {
    width: 44px;
    background: #f0f0f0;
}

.quotes-arrows {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.quotes-arrows button {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border-style: solid;
    border-width: 1px;
    border-color: #f0f0f0;
    border-radius: 999px;
    background: none;
    font: inherit;
    font-size: 1.375rem;
    line-height: 1;
    color: #f0f0f0;
    cursor: pointer;
    transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.quotes-arrows button:hover { background: rgba(240, 240, 240, 0.1); }

.quotes-dots button:focus-visible,
.quotes-arrows button:focus-visible {
    outline: 2px solid rgba(240, 240, 240, 0.7);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .quotes-track { transition: none; }
    .quotes-dots button { transition: background 200ms linear; }
}

@media (max-width: 30rem) {
    .quote blockquote { font-size: 1.15rem; }
    .quotes-nav { margin-top: 1.75rem; }
}