/* =====================================================================
   SHANEXWEBCO — Contact Us page
   File: assets/css/contact.css · Mobile-first · Logo colours: navy, steel silver, gold
   01 Base · 02 Hero · 03 Form card · 04 Contact cards · 05 Next steps · 06 Map + FAQ · 07 Admin list · 08 Toast · 09 Safety
   ===================================================================== */

/* 01 — Base */
.ct {
    --navy: #0F2F55; --navy-deep: #0A2342; --navy-ink: #071A30;
    --steel: #6E8199; --steel-soft: #A7B4C4;
    --gold: #D9A94E; --gold-soft: #F3D99C; --gold-grad: linear-gradient(135deg, #F7DFA5, #D9A94E);
    --ink: #0B2340; --body: #55657A; --muted: #8291A4; --line: #E3E8EF; --soft: #F5F7FA;
    --err: #C5432F; --ok: #1E8E3E;
    --font-h: var(--font-heading, 'Poppins', sans-serif);
    --hh: var(--sx-hh, 0px);
    --ease: cubic-bezier(.2, .8, .2, 1);
    position: relative; background: #fff; color: var(--body);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    overflow-x: clip; -webkit-font-smoothing: antialiased;
}
.ct *, .ct *::before, .ct *::after { box-sizing: border-box; }
.ct :where(h1, h2, h3, p, ul, ol, fieldset, legend) { margin: 0; padding: 0; }
.ct :where(fieldset) { border: 0; min-width: 0; }
.ct :where(ul, ol) { list-style: none; }
.ct :where(a) { color: inherit; }
.ct [hidden] { display: none !important; }
.ct :where(a, button, summary):focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.ct-wrap { width: min(calc(100% - 32px), 1200px); margin-inline: auto; }
.ct-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.ct-w__i { display: inline-block; }
.ct-eyebrow { display: inline-block; color: var(--steel); font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; line-height: 1.5; }
.ct h1 em, .ct h1 em .ct-w__i, .ct .ct-hero__title em, .ct .ct-hero__title em .ct-w__i { font-style: normal; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ct h2 em, .ct h2 em .ct-w__i { font-style: normal; background: linear-gradient(90deg, #C99238, #E2B867); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.ct-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border-radius: 14px; border: 1.5px solid transparent; font: 600 15.5px/1 var(--font-h); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .3s, box-shadow .3s, border-color .3s, opacity .3s; will-change: transform; }
.ct-btn svg { width: 18px; height: 18px; }
.ct-btn--gold { background: var(--gold-grad); color: var(--navy-ink) !important; box-shadow: 0 14px 30px -14px rgba(201,146,56,.95); }
.ct-btn--gold:hover { box-shadow: 0 20px 38px -14px rgba(201,146,56,1); }
.ct-btn--line { border-color: #CBD4DF; color: var(--navy) !important; background: #fff; }
.ct-btn--line:hover { border-color: var(--navy); }

/* 02 — Hero */
.ct-hero { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 80px) 0 clamp(70px, 9vw, 110px); background: radial-gradient(ellipse 80% 90% at 15% 0%, #1A4373 0%, var(--navy) 45%, var(--navy-ink) 100%); color: #fff; }
.ct-hero__sky { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 3vw, 34px); opacity: .18; pointer-events: none; }
.ct-hero__sky i { width: clamp(16px, 3.4vw, 40px); height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--steel-soft), transparent); transform-origin: 50% 100%; }
.ct-hero__sky i:nth-child(4n) { background: linear-gradient(180deg, var(--gold), transparent); }
.ct-hero__glow { position: absolute; right: -160px; top: 10%; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(217,169,78,.22), transparent 65%); filter: blur(30px); pointer-events: none; }
.ct-hero__in { position: relative; display: grid; gap: 40px; align-items: start; }
.ct-crumb { margin-bottom: 16px; font-size: 13px; color: rgba(255,255,255,.6); }
.ct-crumb ol { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-crumb li + li::before { content: '/'; margin-right: 8px; opacity: .5; }
.ct-crumb a { text-decoration: none; }
.ct-crumb a:hover { color: var(--gold-soft); }
.ct-hero .ct-eyebrow { color: var(--steel-soft); }
.ct .ct-hero h1.ct-hero__h1 { display: block; max-width: 520px; margin: 0; font-family: var(--font-h); font-size: clamp(11.5px, 3vw, 13px); font-weight: 700; letter-spacing: .16em; line-height: 1.6; color: var(--gold-soft); }
.ct .ct-hero__title { margin-top: 12px; font: 800 clamp(40px, 10vw, 72px)/1.04 var(--font-h); letter-spacing: -.045em; color: #fff; }
.ct-hero__title em { display: block; }
.ct .ct-hero__lead { max-width: 520px; margin-top: 18px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.7; color: rgba(255,255,255,.78); }
.ct-quick { display: grid; gap: 10px; margin-top: 26px; max-width: 520px; }
.ct-quick__btn { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #fff !important; text-decoration: none; transition: background .3s, border-color .3s, transform .35s var(--ease); }
.ct-quick__btn:hover { background: rgba(255,255,255,.1); border-color: var(--gold); transform: translateY(-2px); }
.ct-quick__btn > svg { flex: 0 0 44px; width: 44px; height: 44px; padding: 11px; border-radius: 13px; background: rgba(243,217,156,.14); color: var(--gold-soft); }
.ct-quick__btn.is-gold { background: var(--gold-grad); border-color: transparent; color: var(--navy-ink) !important; }
.ct-quick__btn.is-gold > svg { background: rgba(7,26,48,.12); color: var(--navy-ink); }
.ct-quick__btn span { display: grid; gap: 3px; }
.ct-quick__btn small { font-size: 12.5px; opacity: .75; }
.ct-quick__btn b { font: 700 18px/1.1 var(--font-h); letter-spacing: -.01em; }
.ct-hero__trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; }
.ct-hero__trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: rgba(255,255,255,.8); }
.ct-hero__trust svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--gold-grad); color: var(--navy-ink); stroke-width: 2.6; }
@media (min-width: 640px) { .ct-quick { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ct-hero__in { grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; } .ct-hero__copy { padding-top: 20px; } }

/* 03 — Form card */
.ct-formcard { position: relative; padding: 24px 20px; border-radius: 26px; background: #fff; color: var(--body); box-shadow: 0 50px 100px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06); scroll-margin-top: calc(var(--hh) + 20px); }
.ct-form { display: grid; gap: 14px; }
.ct-formcard { max-width: 480px; width: 100%; justify-self: center; }
.ct-form__head h2, .ct-done h2 { font: 800 clamp(22px, 4vw, 28px)/1.15 var(--font-h); letter-spacing: -.03em; color: var(--ink); }
.ct-form__head p { margin-top: 6px; font-size: 14px; color: var(--muted); }
.ct-alert { padding: 12px 14px; border-radius: 12px; background: #FDF1EF; border: 1px solid #F3C9C2; color: #8E2E1F; font-size: 14px; line-height: 1.5; }
.ct-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-grid2 { display: grid; gap: 16px; }
.ct-field { display: grid; gap: 7px; }
.ct-field > label, .ct-field > legend { font: 600 13.5px/1.3 var(--font-h); color: var(--ink); }
.ct-field > legend { margin-bottom: 8px; }
.ct-field label span, .ct-field legend span { font-weight: 500; color: var(--muted); }
.ct-field input, .ct-field select, .ct-field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--soft); font: 500 16px/1.4 var(--font-body, sans-serif); color: var(--ink); transition: border-color .25s, background .25s, box-shadow .25s; -webkit-appearance: none; appearance: none; }
.ct-field textarea { resize: vertical; min-height: 110px; }
.ct-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E8199' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: #A6B1BF; }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { outline: none; border-color: var(--navy); background: #fff; box-shadow: 0 0 0 4px rgba(15,47,85,.08); }
.ct-phone { display: flex; align-items: stretch; }
.ct-phone span { display: grid; place-items: center; padding: 0 12px; border-radius: 12px 0 0 12px; border: 1.5px solid var(--line); border-right: 0; background: #EDF1F6; font: 600 15px/1 var(--font-h); color: var(--steel); }
.ct-phone input { border-radius: 0 12px 12px 0; }
.ct-field select:invalid, .ct-field select option[value=""] { color: #8291A4; }
.ct-field.has-err input, .ct-field.has-err textarea { border-color: var(--err); background: #FFF8F6; }
.ct-field.has-err .ct-phone span { border-color: var(--err); }
.ct-err { font-size: 12.5px; font-weight: 600; color: var(--err); }
.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-chip { position: relative; cursor: pointer; }
.ct-chip input, .ct-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ct-chip span { display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px; border-radius: 11px; border: 1.5px solid var(--line); background: var(--soft); font: 600 13.5px/1.2 var(--font-h); color: var(--ink); transition: background .25s, border-color .25s, color .25s; }
.ct-chip span::before { content: ''; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--steel-soft); background: #fff; transition: background .25s, border-color .25s; }
.ct-chip:hover span { border-color: var(--steel-soft); }
.ct-chip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.ct-chip input:checked + span::before { border-color: var(--gold-soft); background: var(--gold-grad) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23071A30' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center/11px no-repeat; }
.ct-chip input:focus-visible + span, .ct-seg input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.ct-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 13px; background: var(--soft); border: 1.5px solid var(--line); }
.ct-seg label { position: relative; cursor: pointer; }
.ct-seg span { display: block; padding: 11px 6px; border-radius: 10px; text-align: center; font: 600 13.5px/1 var(--font-h); color: var(--steel); transition: background .25s, color .25s, box-shadow .25s; }
.ct-seg input:checked + span { background: #fff; color: var(--navy); box-shadow: 0 6px 14px -8px rgba(15,47,85,.45); }
.ct-submit { width: 100%; min-height: 58px; font-size: 16px; }
.ct-submit .ct-spin { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(7,26,48,.25); border-top-color: var(--navy-ink); animation: ctSpin .8s linear infinite; }
.ct-submit.is-busy { opacity: .85; cursor: progress; }
.ct-submit.is-busy svg { display: none; }
.ct-submit.is-busy .ct-spin { display: block; }
.ct-submit.is-busy .ct-submit__t::after { content: '…'; }
@keyframes ctSpin { to { transform: rotate(360deg); } }
.ct-form__note a { color: var(--navy); font-weight: 600; }
.ct-form__note { flex-wrap: wrap; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; color: var(--muted); text-align: center; }
.ct-form__note svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--gold); }
.ct-done { display: grid; justify-items: center; gap: 12px; padding: 30px 10px; text-align: center; }
.ct-done__ic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--gold-grad); color: var(--navy-ink); box-shadow: 0 0 0 10px rgba(243,217,156,.25); }
.ct-done__ic svg { width: 34px; height: 34px; stroke-width: 2.6; }
.ct-done p { max-width: 400px; font-size: 15.5px; line-height: 1.65; }
@media (min-width: 560px) { .ct-grid2 { grid-template-columns: 1fr 1fr; } .ct-formcard { padding: 30px 28px; } }

/* Sections + heads */
.ct-sec { position: relative; padding: clamp(60px, 8vw, 100px) 0; }
.ct-head { max-width: 700px; margin-bottom: clamp(26px, 4vw, 44px); }
.ct-head h2 { margin-top: 10px; font: 800 clamp(30px, 7vw, 48px)/1.1 var(--font-h); letter-spacing: -.04em; color: var(--ink); }
.ct-head--center { margin-inline: auto; text-align: center; }

/* 04 — Contact cards */
.ct-cards { background: #fff; }
.ct-cards__grid { display: grid; gap: 14px; }
.ct-card { display: flex; flex-direction: column; padding: 24px 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px -40px rgba(15,47,85,.55); transition: transform .4s var(--ease), border-color .3s; }
.ct-card:hover { transform: translateY(-5px); border-color: var(--gold); }
.ct-card__ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: var(--navy); color: var(--gold-soft); }
.ct-card__ic svg { width: 24px; height: 24px; }
.ct-card h3 { margin-top: 16px; font: 700 18px/1.2 var(--font-h); color: var(--ink); }
.ct-card__v { margin-top: 4px; font-size: 14.5px; color: var(--muted); word-break: break-word; }
.ct-card__acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; }
.ct-card__acts a { display: inline-flex; align-items: center; gap: 6px; font: 600 14.5px/1 var(--font-h); color: var(--navy); text-decoration: none; }
.ct-card__acts a svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.ct-card__acts a:hover svg { transform: translateX(4px); }
.ct-card__acts button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 10px; border: 1px solid var(--line); background: var(--soft); color: var(--steel); cursor: pointer; }
.ct-card__acts button svg { width: 16px; height: 16px; }
.ct-card__acts button:hover { color: var(--navy); border-color: var(--steel-soft); }
.ct-card.is-navy { background: linear-gradient(170deg, var(--navy), var(--navy-ink)); border-color: var(--navy); }
.ct-card.is-navy .ct-card__ic { background: var(--gold-grad); color: var(--navy-ink); }
.ct-card.is-navy h3 { color: #fff; } .ct-card.is-navy .ct-card__v { color: var(--steel-soft); } .ct-card.is-navy .ct-card__acts a { color: var(--gold-soft); }
@media (min-width: 640px) { .ct-cards__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ct-cards__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

/* 05 — Next steps */
.ct-next { background: var(--soft); border-block: 1px solid var(--line); }
.ct .ct-next__list { position: relative; display: grid; gap: 14px; max-width: 1000px; margin: 0 auto; padding-left: 62px; }
.ct-next__line { position: absolute; left: 24px; top: 24px; bottom: 24px; width: 3px; border-radius: 3px; background: var(--line); }
.ct-next__line i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, var(--navy), var(--gold)); transform: scaleY(0); transform-origin: 50% 0; }
.ct-step { position: relative; padding: 20px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: border-color .5s, box-shadow .5s; }
.ct-step > span { position: absolute; left: -62px; top: 18px; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #fff; border: 2px solid var(--line); color: var(--steel); transition: background .5s, color .5s, border-color .5s; }
.ct-step > span svg { width: 22px; height: 22px; }
.ct-step > b { position: absolute; right: 18px; top: 16px; font: 800 26px/1 var(--font-h); color: #E3E8EF; }
.ct-step h3 { font: 700 18px/1.25 var(--font-h); color: var(--ink); }
.ct-step p { margin-top: 5px; font-size: 14.5px; line-height: 1.55; padding-right: 30px; }
.ct-step.is-on, html:not(.ct-gsap) .ct-step { border-color: rgba(217,169,78,.5); box-shadow: 0 20px 40px -30px rgba(15,47,85,.55); }
.ct-step.is-on > span, html:not(.ct-gsap) .ct-step > span { background: var(--navy); border-color: var(--navy); color: var(--gold-soft); }
html:not(.ct-gsap) .ct-next__line i { transform: none; }
@media (min-width: 900px) {
    .ct .ct-next__list { grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 76px 0 0; }
    .ct-next__line { left: 16%; right: 16%; top: 25px; bottom: auto; width: auto; height: 3px; }
    .ct-next__line i { background: linear-gradient(90deg, var(--navy), var(--gold)); transform: scaleX(0); transform-origin: 0 50%; }
    .ct-step { text-align: center; }
    .ct-step > span { left: 50%; top: -76px; margin-left: -25px; }
    .ct-step p { padding-right: 0; }
}

/* 06 — Map + FAQ */
.ct-map { background: #fff; }
.ct-map__in { display: grid; gap: 34px; align-items: start; }
.ct-map__frame { position: relative; overflow: hidden; border-radius: 24px; border: 1px solid var(--line); box-shadow: 0 40px 80px -45px rgba(15,47,85,.6); aspect-ratio: 4 / 3; background: var(--soft); }
.ct-map__frame iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.85); }
.ct-map__tag { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 12px; background: var(--navy); color: #fff; font: 600 13.5px/1 var(--font-h); box-shadow: 0 14px 28px -12px rgba(7,26,48,.8); }
.ct-map__tag svg { width: 16px; height: 16px; color: var(--gold-soft); }
.ct-faq__item { margin-bottom: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.ct-faq__item[open] { border-color: var(--steel-soft); box-shadow: 0 18px 36px -28px rgba(15,47,85,.55); }
.ct-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 20px; }
.ct-faq__item summary::-webkit-details-marker { display: none; }
.ct-faq__item h3 { font: 600 16px/1.4 var(--font-h); color: var(--ink); }
.ct-faq__item i { position: relative; flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--soft); border: 1px solid var(--line); color: var(--navy); }
.ct-faq__item i::before, .ct-faq__item i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; margin: -1px 0 0 -5.5px; border-radius: 2px; background: currentColor; }
.ct-faq__item i::after { transform: rotate(90deg); transition: transform .35s var(--ease); }
.ct-faq__item[open] i { background: var(--navy); border-color: var(--navy); color: var(--gold-soft); }
.ct-faq__item[open] i::after { transform: rotate(0); }
.ct-faq__item p { padding: 0 20px 18px; font-size: 15px; line-height: 1.7; }
.ct-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font: 600 14.5px/1 var(--font-h); color: var(--navy); text-decoration: none; border-bottom: 1.5px solid var(--gold); padding-bottom: 3px; }
.ct-more svg { width: 16px; height: 16px; }
@media (min-width: 1000px) { .ct-map__in { grid-template-columns: 1fr 1fr; gap: 60px; } .ct-map__frame { position: sticky; top: calc(var(--hh) + 40px); aspect-ratio: 1 / 1; } }

/* 07 — Admin list */
.ct-admin { padding-top: 0; }
.ct-admin__box { padding: 20px; border-radius: 20px; background: #FBF5E8; border: 1.5px dashed #E4C987; }
.ct-admin__head { display: grid; gap: 4px; margin-bottom: 14px; }
.ct-admin__head b { font: 700 17px/1.2 var(--font-h); color: var(--ink); }
.ct-admin__head small { font-size: 12.5px; color: #8A6420; }
.ct-admin__empty { font-size: 14px; }
.ct-admin__scroll { overflow-x: auto; border-radius: 14px; background: #fff; border: 1px solid #EEDDB6; }
.ct-admin table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 620px; }
.ct-admin th, .ct-admin td { padding: 11px 14px; border-bottom: 1px solid #F3E6C8; text-align: left; vertical-align: top; color: var(--ink); }
.ct-admin th { font: 600 12px/1 var(--font-h); letter-spacing: .06em; text-transform: uppercase; color: #8A6420; background: #FDF9EF; }
.ct-admin td small { display: block; color: var(--muted); }
.ct-admin td a { color: var(--navy); font-weight: 600; text-decoration: none; }
.ct-admin .is-ok { color: var(--ok); font-weight: 700; }
.ct-admin .is-no { color: var(--err); font-weight: 700; }

/* 08 — Toast */
.ct-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; padding: 12px 18px; border-radius: 12px; background: var(--navy-ink); color: var(--gold-soft); font: 600 14px/1 var(--font-h); box-shadow: 0 20px 40px -16px rgba(0,0,0,.6); transform: translate(-50%, 140%); opacity: 0; transition: transform .4s var(--ease), opacity .3s; pointer-events: none; }
.ct-toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* 09 — Motion safety */
.shx-js:not(.ct-safe):not(.ct-run) .ct-hero [data-ct-in],
.shx-js:not(.ct-safe):not(.ct-run) .ct-hero__title { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .ct *, .ct *::before, .ct *::after { transition-duration: .01ms !important; animation: none !important; }
}