/* ==========================================================================
   JK Dent – digital business card
   1. Variables
   2. Reset / global
   3. Main wrapper
   4. Hero
   5. Profile
   6. Social / contact actions
   7. About
   8. Domains (services)
   9. Why JK Dent
   10. Contact form
   11. Share section
   12. Back to top
   13. Footer
   14. Accessibility
   15. Language switcher
   16. Responsive breakpoints
   17. Scroll reveal
   ========================================================================== */

/* ============ 1. VARIABLES ============ */
:root {
    /* Brand palette sampled straight from the JK Dent logo */
    --color-brand:        #00b5ee;   /* logo cyan – buttons, icons, accents */
    --color-brand-deep:   #0090c4;   /* darker cyan for hovers */
    --color-brand-light:  #38c8f5;
    --color-navy:         #002d3a;   /* logo dark petrol – headings, cards */
    --color-navy-2:       #0a4257;   /* lighter navy for gradients */
    --color-heading:      #002d3a;
    --color-text:         #2e4a55;   /* body copy */
    --color-muted:        #6b8591;

    --color-white:        #ffffff;
    --color-cream:        #fdf8f2;   /* page background – matches the logo card */
    --color-surface:      #ffffff;   /* raised light panels (about, footer) */
    --color-cream-2:      #f3ede5;   /* alternating tinted sections */
    --color-line:         #e2d9cd;   /* hairlines & input borders */

    --wrapper-max: 520px;
    --pad-x: 26px;

    /* height of the curve that closes the hero */
    --hero-curve: 44px;
    /* logo medallion diameter – raised so its centre sits on the curve line,
       i.e. the upper half overlaps the hero cover */
    --avatar-size: 150px;

    --radius-sm: 6px;
    --radius-md: 14px;

    --font-base: "Assistant", "Segoe UI", "Noto Sans Hebrew", Arial, sans-serif;
    --fs-root: 16px;

    --ease: .25s ease;
}

/* ============ 2. RESET / GLOBAL ============ */
* { box-sizing: border-box; }

html {
    font-size: var(--fs-root);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--color-white);
    font-family: var(--font-base);
    color: var(--color-text);
    line-height: 1.7;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3 { margin: 0; line-height: 1.25; }
p { margin: 0 0 .85em; }
ul { list-style: none; margin: 0; padding: 0; }

a { text-decoration: none; color: inherit; }

:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.section-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-heading);
    text-align: center;
    letter-spacing: .01em;
    margin-bottom: 18px;
}
.section-title--lg { font-size: 2rem; margin-bottom: 22px; }

/* Shared brand button */
.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--color-brand);
    color: var(--color-white);
    font-weight: 700;
    font-size: .95rem;
    border: 0;
    border-radius: 999px;
    padding: 11px 26px;
    cursor: pointer;
    transition: background var(--ease), transform var(--ease), opacity var(--ease);
}
.btn-gold:hover { background: var(--color-brand-deep); transform: translateY(-2px); }
.btn-gold--sm { font-size: .88rem; padding: 9px 22px; }
.btn-gold--block { width: 100%; border-radius: var(--radius-sm); padding: 13px 20px; }

/* ============ 3. MAIN WRAPPER ============ */
.site-wrapper {
    position: relative;
    width: 100%;
    max-width: var(--wrapper-max);
    margin-inline: auto;
    background: var(--color-cream);
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0, 45, 58, .12);
}

/* ============ 4. HERO ============ */
/* The clinic panorama is the cover – it already carries the JK Dent logo
   on the wall, so nothing is overlaid on top of it. The logo medallion
   below overlaps it, exactly like the original card layout. */
.hero {
    position: relative;
    background: var(--color-navy);
    overflow: hidden;
    line-height: 0; /* kill the inline-image gap under .hero__img */
    min-height: 290px;
}

.hero__img {
    width: 100%;
    height: auto;
    min-height: 310px;
    aspect-ratio: 2523 / 1069;
    object-fit: cover;
    object-position: center;
}

.hero__curve {
    position: absolute;
    inset-inline: -6%;
    bottom: 0px;
    height: var(--hero-curve, 44px);
    background: #fdf8f2;
    border-start-start-radius: 60% 100%;
    border-start-end-radius: 60% 100%;
}

/* ============ 5. PROFILE ============ */
.profile {
    position: relative;
    /* background: var(--color-white); */
    padding: 0 var(--pad-x) 34px;
    text-align: center;
}

.profile__avatar {
    position: relative;
    z-index: 2;
    width: var(--avatar-size);
    height: var(--avatar-size);
    margin: calc(-1 * (var(--hero-curve) + var(--avatar-size) / 2)) auto 14px;
    border-radius: 50%;
    background: var(--color-white);
    border: 3px solid rgba(0, 181, 238, .55);
    box-shadow: 0 10px 26px rgba(0, 45, 58, .25);
    display: grid;
    place-items: center;
}
.profile__avatar img {
    width: 68%;
    height: 68%;
    object-fit: contain;
}

.profile__name {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--color-heading);
    margin-bottom: 4px;
}
.profile__role {
    margin: 0 0 10px;
    font-size: .98rem;
    font-weight: 600;
    color: var(--color-text);
}
.profile__accent {
    display: inline-block;
    margin: 0 0 22px;
    font-size: .86rem;
    font-weight: 700;
    color: var(--color-navy);
    border: 1px solid rgba(0, 181, 238, .45);
    border-radius: 999px;
    padding: 4px 16px;
    background: rgba(0, 181, 238, .08);
}

/* ============ 6. SOCIAL / CONTACT ACTIONS ============ */
.actions {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px 4px;
}

.actions__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.actions__circle {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    color: var(--color-navy);
    font-size: 1.15rem;
    box-shadow: 0 3px 10px rgba(0, 45, 58, .10);
    transition: transform var(--ease), background var(--ease), color var(--ease), border-color var(--ease);
}
.actions__link:hover .actions__circle {
    transform: translateY(-3px);
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-white);
}

.actions__label {
    font-size: .66rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
}

/* Save-to-contacts – full-width bar on its own row under the icon strip */
.save-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-top: 22px;
    padding: 13px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-navy-2) 0%, var(--color-navy) 60%, #001d26 100%);
    box-shadow: 0 8px 22px rgba(0, 45, 58, .32);
    transition: transform var(--ease), box-shadow var(--ease), filter var(--ease);
}
.save-contact:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
    box-shadow: 0 12px 26px rgba(0, 45, 58, .40);
}
.save-contact:active { transform: translateY(0); }

.save-contact__circle {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 181, 238, .30);
    color: var(--color-white);
    font-size: 1.05rem;
}

.save-contact__label {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.3;
}

/* ============ 7. ABOUT ============ */
.about {
    position: relative;
    background: var(--color-surface);
    padding: 0;
}

.about__curve-top,
.about__curve-bottom {
    height: 39px;
    background: var(--color-cream);
}
.about__curve-top {
    border-end-start-radius: 55% 100%;
    border-end-end-radius: 55% 100%;
    margin-inline: -6%;
}
.about__curve-bottom {
    border-start-start-radius: 55% 100%;
    border-start-end-radius: 55% 100%;
    margin-inline: -6%;
    background: var(--color-cream-2);
}

.about__inner {
    padding: 8px var(--pad-x) 26px;
    text-align: center;
    font-size: .9rem;
    line-height: 1.95;
    color: var(--color-text);
}

.about__subtitle {
    margin: 22px 0 10px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-heading);
}
.about__subtitle::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    border-radius: 2px;
    margin: 8px auto 0;
    background: linear-gradient(90deg, var(--color-brand) 50%, var(--color-navy) 50%);
}

.about__quote {
    margin: 18px 0 0;
    font-weight: 700;
    font-size: .95rem;
    color: var(--color-brand-deep);
    padding-top: 14px;
    border-top: 1px solid var(--color-line);
}

/* ============ 8. DOMAINS (SERVICES) ============ */
.services {
    background: var(--color-cream-2);
    padding: 30px var(--pad-x) 36px;
}

.services__head {
    text-align: center;
    margin-bottom: 20px;
}
.services__ornament {
    display: block;
    font-size: 1.05rem;
    color: var(--color-brand);
    margin-bottom: 6px;
}
.services__ornament::before,
.services__ornament::after {
    content: "";
    display: inline-block;
    width: 46px;
    height: 1px;
    background: var(--color-line);
    vertical-align: middle;
    margin-inline: 8px;
}

.domains {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.domain-card {
    background: linear-gradient(160deg, var(--color-navy-2) 0%, var(--color-navy) 100%);
    border-radius: var(--radius-md);
    padding: 24px 20px 22px;
    text-align: center;
    box-shadow: 0 6px 16px rgba(0, 45, 58, .20);
    transition: transform var(--ease), filter var(--ease);
}
.domain-card:hover { transform: translateY(-3px); filter: brightness(1.08); }

.domain-card__icon {
    font-size: 1.8rem;
    color: var(--color-brand);
    display: block;
    margin-bottom: 10px;
}
.domain-card__title {
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: 14px;
}
.domain-card__sub {
    margin: -6px 0 12px;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}

.domain-card__list {
    display: grid;
    gap: 7px;
    text-align: start;
    max-width: 320px;
    margin-inline: auto;
}
.domain-card__list li {
    position: relative;
    padding-inline-start: 20px;
    font-size: .84rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .92);
}
.domain-card__list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .52em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--color-brand);
    transform: rotate(45deg);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}
.chips li {
    font-size: .76rem;
    font-weight: 600;
    color: var(--color-white);
    background: rgba(0, 181, 238, .16);
    border: 1px solid rgba(0, 181, 238, .45);
    border-radius: 999px;
    padding: 4px 13px;
    line-height: 1.5;
}

.domain-card__note {
    margin: 14px 0 0;
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--color-brand);
}

/* ============ 9. WHY JK DENT ============ */
.why {
    background: var(--color-cream);
    padding: 34px var(--pad-x) 38px;
    text-align: center;
}

.checklist {
    display: grid;
    gap: 9px;
    max-width: 340px;
    margin: 0 auto 26px;
    text-align: start;
}
.checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    padding: 9px 13px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--color-navy);
    box-shadow: 0 3px 8px rgba(0, 45, 58, .06);
}
.checklist li i {
    color: var(--color-brand);
    font-size: 1rem;
    margin-top: .1em;
}

.why__subtitle {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-heading);
    margin-bottom: 8px;
}
.why__text {
    font-size: .88rem;
    margin-bottom: 14px;
}

.pick-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 26px;
}
.pick-list li {
    font-size: .82rem;
    font-weight: 700;
    color: var(--color-navy);
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    padding: 6px 16px;
}
.pick-list__full {
    background: var(--color-navy) !important;
    border-color: var(--color-navy) !important;
    color: var(--color-white) !important;
}

.value-box {
    background: linear-gradient(160deg, var(--color-navy-2) 0%, var(--color-navy) 100%);
    border-radius: var(--radius-md);
    padding: 24px 20px;
    box-shadow: 0 8px 20px rgba(0, 45, 58, .24);
}
.value-box__icon {
    font-size: 1.7rem;
    color: var(--color-brand);
    display: block;
    margin-bottom: 8px;
}
.value-box__title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: 8px;
}
.value-box__text {
    font-size: .85rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, .92);
    margin-bottom: 12px;
}
.value-box__note {
    margin: 0;
    font-size: .82rem;
    font-weight: 700;
    color: var(--color-brand);
    border-top: 1px solid rgba(0, 181, 238, .35);
    padding-top: 12px;
}

/* ============ 10. CONTACT FORM ============ */
.contact {
    background: var(--color-cream-2);
    padding: 34px var(--pad-x) 38px;
}

.contact__form { display: block; }

.field {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    font-size: .88rem;
    color: var(--color-text);
    margin-bottom: 8px;
    text-align: right;
}
.field::placeholder { color: #9db0b8; }
.field:focus {
    box-shadow: none;
    border-color: var(--color-brand);
}
.field--area { resize: vertical; min-height: 110px; }
.field.is-invalid { border-color: #d4646b; }

.row.g-2 .field { margin-bottom: 8px; }

.field-error {
    display: none;
    font-size: .72rem;
    color: #b33f47;
    margin: -4px 0 6px;
}
.field-error.is-visible { display: block; }

.contact__consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .74rem;
    line-height: 1.5;
    color: var(--color-muted);
    margin: 6px 0 14px;
    cursor: pointer;
}
.contact__consent input { margin-top: 3px; accent-color: var(--color-brand); }

.hp {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact__failure {
    margin: 14px 0 0;
    text-align: center;
    font-size: .85rem;
    font-weight: 700;
    color: #a8323b;
    background: rgba(180, 60, 70, .10);
    border: 1px solid rgba(180, 60, 70, .30);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}
.contact__failure a { text-decoration: underline; }

.contact__success {
    margin: 14px 0 0;
    text-align: center;
    font-size: .88rem;
    font-weight: 700;
    color: #2f7a4a;
    background: rgba(60, 160, 90, .12);
    border: 1px solid rgba(60, 160, 90, .30);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

/* ============ 11. SHARE SECTION ============ */
.share {
    background: var(--color-cream);
    padding: 30px var(--pad-x) 26px;
    text-align: center;
}
.share__list {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.share__btn {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--color-navy);
    color: var(--color-white);
    font-size: 1.1rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 45, 58, .22);
    transition: transform var(--ease), background var(--ease);
}
.share__btn:hover { transform: translateY(-3px); background: var(--color-brand); }

.share__toast {
    margin: 14px 0 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-brand-deep);
}

/* ============ 12. BACK TO TOP ============ */
.backtop {
    background: var(--color-cream);
    padding: 4px var(--pad-x) 30px;
    text-align: center;
}
.backtop__btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--color-line);
    background: var(--color-surface);
    color: var(--color-navy);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background var(--ease), color var(--ease), transform var(--ease);
}
.backtop__btn:hover {
    background: var(--color-brand);
    color: var(--color-white);
    transform: translateY(-3px);
}
.backtop__label {
    display: block;
    margin-top: 8px;
    font-size: .74rem;
    color: var(--color-muted);
}

/* ============ 13. FOOTER ============ */
.footer {
    background: var(--color-navy);
    color: rgba(255, 255, 255, .75);
    text-align: center;
    padding: 20px var(--pad-x) 22px;
}
.footer p { margin: 0; font-size: .74rem; }
.footer__tagline {
    font-size: .72rem !important;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-brand);
    margin-bottom: 6px !important;
}
.footer__credit { margin-top: 4px; }
.footer__studio {
    font-weight: 800;
    color: var(--color-brand);
    letter-spacing: .05em;
}
.footer__studio:hover { text-decoration: underline; }

/* ============ 14. ACCESSIBILITY ============ */
.a11y-fab {
    position: fixed;
    inset-inline-start: 14px;
    bottom: 18px;
    z-index: 1050;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--color-navy);
    color: #fff;
    font-size: 1.25rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 45, 58, .35);
    transition: transform var(--ease);
}
.a11y-fab:hover { transform: translateY(-3px); }

.a11y-panel {
    position: fixed;
    inset-inline-start: 14px;
    bottom: 74px;
    z-index: 1050;
    width: 200px;
    background: #fff;
    color: var(--color-text);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 12px;
    box-shadow: 0 12px 30px rgba(0, 45, 58, .20);
}
.a11y-panel__title {
    margin: 0 0 8px;
    font-size: .8rem;
    font-weight: 800;
    color: var(--color-heading);
}
.a11y-panel__btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-cream);
    border: 0;
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin-bottom: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--ease);
}
.a11y-panel__btn:last-child { margin-bottom: 0; }
.a11y-panel__btn:hover { background: var(--color-cream-2); }

/* High contrast mode */
body.hc {
    --color-brand: #000000;
    --color-brand-deep: #000000;
    --color-brand-light: #000000;
    --color-navy: #000000;
    --color-navy-2: #000000;
    --color-heading: #000000;
    --color-text: #000000;
    --color-muted: #000000;
    --color-cream: #ffffff;
    --color-cream-2: #ffffff;
    --color-surface: #ffffff;
    --color-line: #000000;
}
body.hc .domain-card,
body.hc .value-box,
body.hc .save-contact,
body.hc .footer { background: #000; border: 1px solid #ffe600; }
body.hc .domain-card__title,
body.hc .domain-card__list li,
body.hc .domain-card__icon,
body.hc .domain-card__sub,
body.hc .domain-card__note,
body.hc .chips li,
body.hc .value-box__title,
body.hc .value-box__text,
body.hc .value-box__note,
body.hc .value-box__icon,
body.hc .footer p,
body.hc .footer__tagline,
body.hc .save-contact__label { color: #ffe600; }
body.hc .actions__circle,
body.hc .share__btn,
body.hc .btn-gold { background: #000; border: 1px solid #ffe600; color: #ffe600; }

/* ============ 15. LANGUAGE SWITCHER ============ */
.lang-switch {
    position: absolute;
    inset-inline-end: var(--pad-x);
    top: 14px;
    z-index: 5;
    display: inline-flex;
    background: rgba(255, 255, 255, .85);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    padding: 3px;
    backdrop-filter: blur(4px);
}
.lang-switch__btn {
    border: 0;
    background: transparent;
    color: var(--color-navy);
    font-family: inherit;
    font-size: .72rem;
    font-weight: 700;
    padding: 10px 11px;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.lang-switch__btn.is-active {
    background: var(--color-navy);
    color: #fff;
}

/* ============ 16. RESPONSIVE ============ */
@media (max-width: 575.98px) {
    :root { --pad-x: 20px; --hero-curve: 38px; --avatar-size: 132px; }
    .site-wrapper { max-width: 100%; box-shadow: none; }
    .profile__name { font-size: 1.7rem; }
    .section-title { font-size: 1.42rem; }
    .section-title--lg { font-size: 1.75rem; }
    .actions { gap: 10px 2px; }
    .actions__circle { width: 42px; height: 42px; font-size: 1.05rem; }
    .actions__label { font-size: .6rem; }
    .hero {/* padding-top: 64px; */}
    .hero__brandname { font-size: 2.1rem; }
}

@media (max-width: 360px) {
    :root { --pad-x: 15px; --hero-curve: 34px; --avatar-size: 120px; }
    .hero__brandname { font-size: 1.85rem; }
    .actions__circle { width: 38px; height: 38px; font-size: .95rem; }
    .actions__label { font-size: .55rem; }
    .domain-card__title { font-size: .98rem; }
    .domain-card__list li { font-size: .8rem; }
    .chips li { font-size: .72rem; }
}

/* ============ 17. SCROLL REVEAL ============ */
/* Elements ease in as they enter the viewport. The travel direction follows
   the scroll direction, so going back up feels just as intentional as
   going down. Everything is opt-in via [data-reveal], added by main.js,
   so the page stays fully visible if JS never runs. */
[data-reveal] {
    opacity: 0;
    transform: translateY(var(--reveal-shift, 22px)) scale(.985);
    transition:
        opacity .75s cubic-bezier(.22, .68, .3, 1),
        transform .75s cubic-bezier(.22, .68, .3, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

/* scrolling up → elements drift down into place instead of up */
:root[data-scroll-dir="up"] [data-reveal] { --reveal-shift: -22px; }

[data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* the logo medallion gets a softer, rounder entrance of its own */
.profile__avatar[data-reveal] {
    transform: translateY(var(--reveal-shift, 22px)) scale(.9);
    transition-duration: .9s;
}

/* Domain cards slide in alternating from each side. */
.domain-card[data-reveal] {
    --card-x: 52px;
    transform:
        translateX(var(--card-x))
        translateY(calc(var(--reveal-shift, 22px) * .35))
        scale(.97);
}
.domains .domain-card:nth-child(even)[data-reveal] { --card-x: -52px; }

/* must repeat the reset here – same specificity as the rule above, and it
   has to come later to win */
.domain-card[data-reveal].is-revealed { transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
}