/* Services — v2 · "The Deck"  (built on option A; B's rolling step number + C's self-drawing timeline + C's see-through letters) */
:root { --hdr: 84px; }
@media (max-width: 1023px) { :root { --hdr: 70px; } }
body { background: var(--paper); }

/* ============================================================ HERO: the deck of cards */
.hx { position: relative; padding: calc(var(--hdr) + clamp(2.5rem, 7vw, 5.5rem)) 0 clamp(3rem, 6vw, 4.5rem); overflow: hidden; }
.hx__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hx .h-1 { margin: 1.5rem 0 1.6rem; max-width: 9.5em; }
.hx .lede { max-width: 30em; }
.hx__ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.2rem; }
.hx__ctas .btn--ghost .ic { color: var(--red); }
.hx__call { display: none; }

.deck { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1 / 1.02; justify-self: end; margin-right: clamp(0px, 3vw, 40px); }
.deck__c {
  --x: 0%; --y: 8%; --r: 0deg; --s: .92;
  position: absolute; left: 17%; top: 4%; width: 66%; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: var(--bone);
  box-shadow: 0 50px 80px -46px rgba(12,12,13,.55), 0 0 0 1px rgba(12,12,13,.06);
  transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)) scale(var(--s)); opacity: 0; z-index: var(--z, 0);
  transition: transform .7s var(--e-out), opacity .45s var(--e-out);
}
.deck.is-in .deck__c { opacity: 1; }
.deck__c.is-lift { transform: translate3d(calc(var(--x) + 38%), calc(var(--y) - 6%), 0) rotate(calc(var(--r) + 14deg)) scale(.96); transition-duration: .32s; }
.deck__c img, .deck__c video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.deck__c video { opacity: 0; transition: opacity .6s; }
.deck__c.is-playing video { opacity: 1; }
.deck__c::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,12,13,0) 55%, rgba(12,12,13,.55)); pointer-events: none; }
.deck__lbl { opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .5s var(--e-out); }
.deck__c.is-front .deck__lbl { opacity: 1; transform: none; transition-delay: .25s; }
.deck__c::after { opacity: 0; transition: opacity .4s; }
.deck__c.is-front::after { opacity: 1; }
.deck__lbl { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: space-between; align-items: baseline; color: #fff; font: 700 .95rem/1.1 var(--f-sans); letter-spacing: -.01em; }
.deck__lbl small { font: 600 .68rem/1 var(--f-sans); letter-spacing: .14em; opacity: .75; }

/* jump index */
.hx__ix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(3rem, 6vw, 5rem); }
.hx__ix a { position: relative; display: grid; gap: .8rem; padding: 1.25rem 1.2rem 0 0; color: var(--mute); transition: color .4s; }
.hx__ix a + a { padding-left: 1.2rem; border-left: 1px solid var(--line); }
.hx__ix a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); }
.hx__ix a i { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; }
.hx__ix a.is-on { color: var(--ink); }
.hx__ix a.is-on i { animation: ixfill var(--tick, 2.2s) linear forwards; }
.hx__ix.is-paused a.is-on i { animation: none; transform: scaleX(1); }
@keyframes ixfill { to { transform: scaleX(1); } }
.hx__ix small { font: 600 .72rem/1 var(--f-sans); letter-spacing: .14em; color: var(--red); }
.hx__ix b { display: flex; justify-content: space-between; align-items: center; gap: .6rem; font: 700 clamp(1rem, 1.4vw, 1.25rem)/1.15 var(--f-sans); letter-spacing: -.02em; }
.hx__ix .ic { width: 17px; height: 17px; flex: none; transition: transform .5s var(--e-out); }
.hx__ix a:hover { color: var(--ink); }
.hx__ix a:hover .ic { transform: translateY(4px); }

/* ============================================================ THE STACK */
.stk { position: relative; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(5rem, 10vw, 8rem); }
.stk__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .55fr); gap: 2rem; align-items: end; margin-bottom: clamp(2.2rem, 5vh, 3.5rem); }
.stk__head h2 { margin-top: 1rem; }
.stk__deck { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

.card {
  --bg: var(--ink); --fg: #fff; --sub: rgba(255,255,255,.58); --hl: rgba(255,255,255,.13); --acc: #ff3a33;
  --top: calc(var(--hdr) + 14px + var(--i) * 12px);
  position: sticky; top: var(--top); height: min(calc(100svh - var(--hdr) - 64px), 730px); min-height: 540px; margin-bottom: 12vh;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); border-radius: 30px; overflow: hidden; isolation: isolate;
  background: var(--bg); color: var(--fg); transform-origin: 50% 0; transition: transform .7s var(--e-out);
  box-shadow: 0 -24px 60px -36px rgba(12,12,13,.55), inset 0 1px 0 rgba(255,255,255,.07);
}
.card:last-child { margin-bottom: 0; }
.card::after { content: ""; position: absolute; inset: 0; z-index: 9; background: #0c0c0d; opacity: 0; pointer-events: none; transition: opacity .7s var(--e-out); }
.card.is-under { transform: scale(.95); }
.card.is-under::after { opacity: .4; }
.card--white { --bg: #fff; --fg: var(--ink); --sub: var(--mute); --hl: var(--line); --acc: var(--red); box-shadow: 0 -24px 60px -36px rgba(12,12,13,.45), inset 0 0 0 1px var(--line); }
.card--red { --bg: var(--red); --fg: #fff; --sub: rgba(255,255,255,.78); --hl: rgba(255,255,255,.28); --acc: #fff; }

.card__txt { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: clamp(1.8rem, 3.2vw, 3.2rem); min-height: 0; }
.card__meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font: 600 .72rem/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sub); }
.card__meta b { color: var(--acc); font-weight: 700; }
.card__name { font: 700 clamp(2.5rem, 4.3vw, 4.4rem)/.95 var(--f-sans); letter-spacing: -.055em; }
.card__promise { margin: .9rem 0 1.6rem; font: italic 400 clamp(1.35rem, 1.9vw, 1.8rem)/1.15 var(--f-it); color: var(--sub); }
.card__list { border-top: 1px solid var(--hl); }
.card__list li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--hl); font-size: .98rem; font-weight: 600; line-height: 1.35; }
.card__list li span { font: 600 .68rem/1 var(--f-sans); letter-spacing: .1em; color: var(--acc); }
.card__go { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 1.8rem; }
.card--red .btn--white:hover { --hov: var(--ink); }
.card--red .card__list li span { color: #fff; opacity: .7; }

.card__media { position: relative; margin: 12px 12px 12px 0; border-radius: 20px; overflow: hidden; background: rgba(0,0,0,.25); }
.card__media img, .card__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__media video { opacity: 0; transition: opacity .6s; }
.card__media.is-playing video { opacity: 1; }
.card__media > img { transform: scale(1.1); transition: transform 6s var(--e-out); }
.card.is-in .card__media > img { transform: scale(1); }
.card__cap { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: .8rem; padding: .55rem .9rem; border-radius: 999px; background: rgba(12,12,13,.5); color: #fff; font: 600 .74rem/1 var(--f-sans); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); width: max-content; max-width: calc(100% - 28px); }
.card__cap i { position: relative; width: 64px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; flex: none; }
.card__cap i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.card__cap i:only-child { display: none; }
.card__media:not(.is-video) .card__cap i { display: none; }

/* card content plays in when the card arrives */
.card [data-a] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .55s var(--e-out), transform .7s var(--e-out); transition-delay: calc(.05s + var(--k, 0) * 60ms); }
.card.is-in [data-a] { opacity: 1; transform: none; }

/* ============================================================ ROOF TYPES: words cut out of photos */
.rt { position: relative; background: var(--ink); color: #fff; padding: clamp(5rem, 10vw, 8rem) 0; overflow: hidden; }
.rt__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.2rem 3rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.rt__head h2 { margin-top: 1rem; }
.rt__list { border-top: 1px solid var(--line-dark); }
.rt__row { border-bottom: 1px solid var(--line-dark); }
.rt__btn { width: 100%; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) minmax(0, 18rem); align-items: center; gap: 1.2rem; padding: clamp(.5rem, 1vw, .9rem) 0; text-align: left; }
.rt__n { font: 600 .74rem/1 var(--f-sans); letter-spacing: .14em; color: var(--on-dark-50); transition: color .4s; }
.rt__word {
  position: relative; display: block; font: 800 var(--fs, 8rem)/.9 var(--f-disp); text-transform: uppercase; letter-spacing: -.04em; padding: .04em 0 .02em; white-space: nowrap;
  background-image: var(--src); background-size: 150% auto; background-position: 0% var(--py, 50%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: saturate(1.1) brightness(var(--b, 1.15)) contrast(1.05);
}
/* a solid copy of the word sits on top and fades away when the word is "on" (fill-colour transitions repaint badly with clipped text) */
.rt__word::after { content: attr(data-w); position: absolute; inset: 0; padding: inherit; color: #18181a; -webkit-text-fill-color: #18181a; transition: opacity .5s var(--e-out); }
.rt__row.is-on .rt__word { animation: drift 6s linear infinite alternate; }
.rt__row.is-on .rt__word::after { opacity: 0; }
@keyframes drift { to { background-position-x: 100%; } }
.rt__row.is-on .rt__n { color: #ff3a33; }
.rt__cap { font-size: 1rem; line-height: 1.45; color: var(--on-dark-70); opacity: 0; transform: translateX(-12px); transition: opacity .5s var(--e-out), transform .6s var(--e-out); }
.rt__row.is-on .rt__cap { opacity: 1; transform: none; }
.rt__note { display: none; }
@media (hover: hover) and (pointer: fine) { .rt__row:not(.is-on) .rt__btn:hover .rt__word::after { opacity: .7; } }

/* ============================================================ PROCESS: pinned number + self-drawing line */
.flow { position: relative; background: #fff; padding: clamp(5rem, 11vw, 9rem) 0; }
.flow__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.flow__pin { position: sticky; top: calc(var(--hdr) + 3rem); }
.flow__head h2 { margin: 1rem 0 1.2rem; }
.flow__count { display: flex; align-items: flex-end; margin-top: clamp(1.4rem, 4vh, 2.6rem); font-family: var(--f-disp); font-weight: 800; color: var(--red); }
.flow__digs { display: flex; }
.flow__dig { position: relative; display: block; height: 1em; overflow: hidden; font-size: clamp(6rem, 11vw, 11rem); line-height: 1; letter-spacing: -.07em; }
.flow__dig > span { display: block; transform: translate3d(0, calc(var(--s, 0) * -1em), 0); transition: transform .6s var(--e-io); }
.flow__dig i { display: block; height: 1em; font-style: normal; }
.flow__of { margin: 0 0 1.3em .2rem; font: 600 .8rem/1 var(--f-sans); letter-spacing: .16em; color: var(--mute-2); }
.flow__now { margin-top: .4rem; font: italic 400 clamp(1.4rem, 2vw, 1.8rem)/1.1 var(--f-it); color: var(--ink); min-height: 1.2em; }

.flow__track { position: relative; }
.flow__rail { position: absolute; left: 11px; top: var(--r0, 2.6rem); height: var(--rh, 80%); width: 2px; background: var(--line); }
.flow__rail i { position: absolute; inset: 0; background: var(--red); transform: scaleY(var(--p, 0)); transform-origin: 50% 0; transition: transform var(--lt, 1.5s) cubic-bezier(.45, .05, .55, .95); }
.flow__s { position: relative; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); gap: 0 1.2rem; padding: clamp(1.6rem, 3vw, 2.3rem) 0 clamp(1.6rem, 3vw, 2.3rem) 3.4rem; border-top: 1px solid var(--line); }
.flow__s:last-child { border-bottom: 1px solid var(--line); }
.flow__dot { position: absolute; left: 0; top: clamp(1.6rem, 3vw, 2.3rem); width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--line-2); display: grid; place-items: center; transition: box-shadow .4s; }
.flow__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); transition: background .35s, transform .5s var(--e-out); }
.flow__n { font: 600 .74rem/1.9 var(--f-sans); letter-spacing: .14em; color: var(--mute-2); transition: color .4s; }
.flow__s h3 { font: 700 clamp(1.4rem, 2.3vw, 2.1rem)/1.05 var(--f-sans); letter-spacing: -.04em; }
.flow__s p { margin-top: .45rem; color: var(--mute); font-size: 1rem; max-width: 34ch; }
.flow__s > div { opacity: .28; transform: translateX(-6px); transition: opacity .5s var(--e-out), transform .6s var(--e-out); }
.flow__s.is-lit > div { opacity: 1; transform: none; }
.flow__s.is-lit .flow__n { color: var(--red); }
.flow__s.is-lit .flow__dot { box-shadow: inset 0 0 0 2px var(--red), 0 0 0 6px rgba(225,6,0,.1); }
.flow__s.is-lit .flow__dot::after { background: var(--red); transform: scale(1.15); }
.flow__s.is-now .flow__dot { animation: ping 1s var(--e-out); }
@keyframes ping { 0% { box-shadow: inset 0 0 0 2px var(--red), 0 0 0 0 rgba(225,6,0,.45); } 100% { box-shadow: inset 0 0 0 2px var(--red), 0 0 0 16px rgba(225,6,0,0); } }

/* ============================================================ 24/7 */
.sos { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.sos__rule { height: 2px; background: var(--red); }
.sos__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2.5rem 4rem; align-items: end; padding-top: clamp(3.5rem, 7vw, 5.5rem); padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.sos__live { display: inline-flex; align-items: center; gap: .65rem; font: 600 .74rem/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-70); }
.sos__live i { width: 9px; height: 9px; border-radius: 50%; background: #1ec96b; box-shadow: 0 0 0 0 rgba(30,201,107,.6); animation: livep 1.6s infinite; }
.sos__live b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes livep { 80%, 100% { box-shadow: 0 0 0 12px rgba(30,201,107,0); } }
.sos h2 { margin: 1.2rem 0 1rem; }
.sos p.sos__txt { color: var(--on-dark-70); max-width: 32em; font-size: 1.05rem; }
.sos__call { display: grid; gap: 1.2rem; justify-items: end; text-align: right; }
.sos__tel { font: 600 clamp(2.2rem, 4.4vw, 3.9rem)/1 var(--f-sans); letter-spacing: -.045em; white-space: nowrap; transition: color .3s; }
.sos__tel:hover { color: #ff3a33; }
.sos__btns { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }

/* ============================================================ CLOSING: "which one do I need?" */
.fit { padding: clamp(5rem, 11vw, 9rem) 0; }
.fit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.fit h2 { margin: 1rem 0 1.2rem; }
.fit__chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2rem; }
.fit__chips button { position: relative; overflow: hidden; padding: .85rem 1.2rem; border-radius: 999px; font-weight: 700; font-size: .95rem; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background .35s, color .35s, box-shadow .35s; }
.fit__chips button:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.fit__chips button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.fit__chips button i { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 7px; height: 1.5px; background: rgba(255,255,255,.5); transform: scaleX(0); transform-origin: 0 50%; }
.fit__chips.is-auto button[aria-pressed="true"] i { animation: ixfill var(--tick, 2.4s) linear forwards; }

.fit__card { position: relative; border-radius: 26px; overflow: hidden; background: var(--ink); color: #fff; box-shadow: var(--shadow); }
.fit__ph { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.fit__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .55s var(--e-out), transform 1.2s var(--e-out); }
.fit__ph img.is-on { opacity: 1; transform: none; }
.fit__body { padding: clamp(1.4rem, 2.6vw, 2.2rem); }
.fit__body small { display: block; font: 600 .7rem/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-50); }
.fit__svc { display: block; margin-top: .7rem; font: 700 clamp(1.9rem, 3vw, 2.7rem)/1 var(--f-sans); letter-spacing: -.05em; }
.fit__why { margin-top: .7rem; color: var(--on-dark-70); min-height: 3.1em; }
.fit__svc, .fit__why { transition: opacity .3s, transform .45s var(--e-out); }
.fit__card.is-swap .fit__svc, .fit__card.is-swap .fit__why { opacity: 0; transform: translateY(8px); }
.fit__go { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 1.6rem; }

/* ============================================================ responsive */
@media (max-width: 1023px) {
  .hx__grid { grid-template-columns: 1fr; }
  .deck { justify-self: center; max-width: 420px; margin: .5rem auto 0; }
  .hx__ix { grid-template-columns: 1fr 1fr; }
  .hx__ix a:nth-child(3) { border-left: 0; padding-left: 0; }
  .hx__ix a:nth-child(n+3) { margin-top: 1.4rem; }
  .stk__head { grid-template-columns: 1fr; }
  .rt__btn { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .rt__cap { display: none; }
  .rt__note { display: block; margin-top: 1.4rem; min-height: 3em; color: var(--on-dark-70); font-size: 1.02rem; }
  .sos__in, .fit__grid { grid-template-columns: 1fr; }
  .sos__call { justify-items: start; text-align: left; }
  .sos__btns { justify-content: flex-start; }
}
@media (max-width: 860px) {
  .flow__grid { grid-template-columns: 4.6rem minmax(0, 1fr); column-gap: .9rem; }
  .flow__pin { display: contents; }
  .flow__head { grid-column: 1 / -1; margin-bottom: 2.4rem; }
  .flow__count { grid-column: 1; grid-row: 2; position: sticky; top: calc(var(--hdr) + 1.2rem); align-self: start; flex-direction: column; align-items: flex-start; margin-top: 1.2rem; }
  .flow__dig { font-size: 2.6rem; }
  .flow__of { margin: .5rem 0 0; font-size: .66rem; }
  .flow__now { display: none; }
  .flow__track { grid-column: 2; grid-row: 2; }
  .flow__s { grid-template-columns: 1fr; padding-left: 2.6rem; }
  .flow__s .flow__n { display: none; }
  .flow__s h3 { font-size: 1.3rem; }
  .flow__s p { font-size: .95rem; }
}
@media (max-width: 760px) {
  .hx { padding-top: calc(var(--hdr) + 2.2rem); }
  .hx .h-1 { margin: 1.1rem 0 1.1rem; }
  .hx .lede { font-size: 1rem; }
  .hx__ctas { flex-wrap: nowrap; gap: .5rem; margin-top: 1.6rem; }
  .hx__ctas .btn { flex: 1 1 0; padding: 0 .8rem; white-space: nowrap; }
  .hx__num { display: none; } .hx__call { display: inline; }
  .deck { max-width: 280px; margin-top: 0; }
  .deck__lbl { font-size: .82rem; left: 11px; right: 11px; bottom: 11px; }
  .stk__deck { padding: 0 10px; }
  .card {
    --top: calc(var(--hdr) + 8px + var(--i) * 8px);
    height: calc(100svh - var(--hdr) - var(--callbar) - 26px); min-height: 0; max-height: 720px; margin-bottom: 8vh;
    grid-template-columns: 1fr; grid-template-rows: minmax(150px, 1fr) auto; border-radius: 24px;
  }
  .card__media { order: -1; margin: 8px 8px 0; border-radius: 17px; }
  .card__txt { padding: 1.1rem 1.15rem 1.15rem; gap: .7rem; justify-content: flex-start; }
  .card__meta span:last-child { display: none; }
  .card__name { font-size: clamp(2rem, 9vw, 2.5rem); }
  .card__promise { font-size: 1.18rem; margin: .35rem 0 .8rem; }
  .card__list li { padding: .42rem 0; font-size: .86rem; grid-template-columns: 1.8rem minmax(0, 1fr); }
  .card__go { margin-top: .9rem; }
  .card__go .btn { width: 100%; min-height: 48px; }
  .card__go .link-arrow { display: none; }
  .card__cap { left: 10px; bottom: 10px; font-size: .68rem; padding: .45rem .7rem; }
  .rt__btn { grid-template-columns: 1.9rem minmax(0, 1fr); gap: .5rem; padding: .35rem 0; }
  .rt__n { font-size: .64rem; }
  .sos__btns .btn { flex: 1 1 auto; }
  .fit__chips button { padding: .75rem 1rem; font-size: .9rem; }
  .fit__go .btn { width: 100%; padding: 0 1rem; white-space: nowrap; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .card__list li:nth-child(4) { display: none; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .card__list li { padding: .5rem 0; font-size: .92rem; }
  .card__promise { margin: .5rem 0 1rem; }
  .card__go { margin-top: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .deck__c { opacity: 1 !important; }
  .card [data-a] { opacity: 1; transform: none; }
  .card.is-under { transform: none; }
  .rt__row.is-on .rt__word { animation: none; }
  .flow__s > div { opacity: 1; transform: none; }
}

/* no pulsing green "live" dots anywhere (Alex 2026-10-21: reads as an AI-template site) */
.sos__live i { display: none !important; }

/* Diamond Membership teaser -> /diamond-membership/ */
.dmx { padding: 0 0 clamp(4rem, 8vw, 6rem); }
.dmx__card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(1.4rem, 3vw, 2rem); border-radius: 26px;
  background: radial-gradient(120% 160% at 0% 0%, #2a0c0b 0%, var(--ink) 55%); color: #fff; box-shadow: 0 40px 70px -40px rgba(12,12,13,.7); transition: transform .6s var(--e-out); }
.dmx__card:hover { transform: translateY(-3px); }
.dmx__badge { display: grid; justify-items: center; align-content: center; width: clamp(120px, 14vw, 160px); aspect-ratio: 5 / 6; border-radius: 18px; background: linear-gradient(155deg, #1d1d20, #0b0b0c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.dmx__badge svg { width: 46%; filter: drop-shadow(0 4px 14px rgba(225,6,0,.5)); }
.dmx__badge b { margin-top: .7rem; font: 800 1.05rem/1 var(--f-disp); letter-spacing: -.01em; text-transform: uppercase; }
.dmx__badge small { margin-top: .35rem; font: 600 .5rem/1 var(--f-sans); letter-spacing: .36em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.dmx__txt { display: grid; gap: .7rem; }
.dmx .eyebrow { color: var(--on-dark-50); }
.dmx__h { font: 700 clamp(1.6rem, 3vw, 2.5rem)/1.02 var(--f-sans); letter-spacing: -.04em; }
.dmx__h .soft { color: rgba(255,255,255,.45); }
.dmx__p { max-width: 52ch; color: var(--on-dark-70); line-height: 1.55; }
.dmx__go { display: inline-flex; align-items: center; gap: .55rem; padding: 0 1.3rem; min-height: 50px; border-radius: 999px; background: var(--red); font-weight: 700; font-size: .9rem; white-space: nowrap; }
.dmx__go .ic { width: 16px; height: 16px; transition: transform .4s var(--e-out); }
.dmx__card:hover .dmx__go .ic { transform: translateX(4px); }
@media (max-width: 860px) { .dmx__card { grid-template-columns: auto minmax(0, 1fr); } .dmx__go { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 560px) { .dmx__card { grid-template-columns: 1fr; } .dmx__badge { width: 112px; } }