/* ==== blogposts.css ==== */
/* ---- blog article pages (recipes/blogposts.cjs) ---- */
main article { display: block; }
/* hero */
main article section.blog-hero-band { padding: clamp(7.5rem, 11vw, 9.5rem) 0 clamp(2rem, 3vw, 2.75rem); }
main article .blog-hero-inner { margin: 0 auto; max-width: 80rem; padding: 0 1rem; }
@media (min-width: 768px) { main article .blog-hero-inner { padding: 0 2rem; } }
main article .blog-hero-inner .blog-crumb { font-size: 0.8125rem; color: var(--color-lyd-secondary); margin-bottom: 1.5rem; }
main article .blog-hero-inner .blog-crumb a { color: var(--color-lyd-secondary); }
main article .blog-hero-inner .td-kicker { color: var(--color-lyd-gold-ink); }
main article .blog-hero-inner h1.blog-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-display-interior); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; max-width: 22ch; text-align: left; color: var(--color-lyd-ink); }
main article .blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.625rem; margin-top: 1.5rem; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-lyd-gold-ink); }
main article .blog-meta__dot { color: var(--color-lyd-line-strong); font-weight: 400; }
/* posts without a side rail read as one centred 48rem column */
main article.blog-centred .blog-hero-inner, main article.blog-centred section.blog-article { max-width: calc(48rem + 2rem); }
@media (min-width: 768px) { main article.blog-centred .blog-hero-inner, main article.blog-centred section.blog-article { max-width: calc(48rem + 4rem); } }
main article.blog-centred .blog-hero-inner h1.blog-title { max-width: none; }
/* lead photo (site's own article image) */
main article section.blog-lead { margin: 0 auto; max-width: 80rem; padding: 0 1rem 1rem; }
@media (min-width: 768px) { main article section.blog-lead { padding: 0 2rem 1.5rem; } }
main article .blog-lead-photo { margin: 0; position: relative; border-radius: 1.5rem; overflow: hidden; isolation: isolate; box-shadow: 0 40px 90px -40px rgba(6, 22, 28, 0.55); }
main article .blog-lead-photo::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(241, 210, 124, 0.35); }
main article .blog-lead-photo img.blog-hero { border-radius: 0; aspect-ratio: 4 / 3; filter: saturate(0.88) contrast(1.04); }
@media (min-width: 768px) { main article .blog-lead-photo img.blog-hero { aspect-ratio: 21 / 9; } }
/* article body */
main article section.blog-article { margin: 0 auto; max-width: 80rem; padding: 1rem 1rem clamp(4rem, 6vw, 5.5rem); }
@media (min-width: 768px) { main article section.blog-article { padding-left: 2rem; padding-right: 2rem; } }
main article .blog-prose { max-width: none; min-width: 0; }
main article .blog-prose > p, main article .blog-prose > ul, main article .blog-prose > ol, main article .blog-prose li { font-family: var(--font-sans); font-size: 1.125rem; line-height: 1.72; color: rgba(20, 38, 45, 0.86); }
main article .blog-prose p.blog-standfirst { font-size: 1.3125rem; line-height: 1.5; color: var(--color-lyd-ink); font-weight: 500; margin-top: 0; }
main article .blog-prose > ul { padding-left: 1.25rem; }
main article .blog-prose li::marker { color: var(--color-lyd-gold-ink); }
main article .blog-prose strong { color: var(--color-lyd-ink); font-weight: 600; }
main article .blog-prose a:not(.btn) { color: var(--color-lyd-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-lyd-yellow-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; }
main article .blog-prose a:not(.btn):hover { text-decoration-color: var(--color-lyd-ink); }
main article .blog-prose h2.blog-h2:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { position: relative; margin-top: 3.5rem; padding-top: 1.25rem; font-family: var(--font-display); font-weight: 700 !important; font-size: clamp(1.5rem, 2.4vw, 1.9375rem) !important; line-height: 1.18 !important; letter-spacing: -0.02em !important; color: var(--color-lyd-ink) !important; text-wrap: balance; text-align: left; }
main article .blog-prose h2.blog-h2::before { content: ""; position: absolute; top: 0; left: 0; width: 2rem; height: 2px; border-radius: 1px; background: var(--color-lyd-yellow-deep); }
main article .blog-prose h3.blog-h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-lyd-ink); margin-top: 0; }
main article .blog-prose .faq h2.blog-h2 { margin-top: 4rem; }
/* callouts and in-article CTAs: tinted cards */
main article .blog-callout, main article .blog-cta { margin-top: 2.5rem; padding: 1.75rem 1.75rem 1.875rem; border-radius: 1.5rem; border: 1px solid rgba(20, 38, 45, 0.1); }
@media (min-width: 768px) { main article .blog-callout, main article .blog-cta { padding: 2rem 2.25rem 2.25rem; } }
main article .blog-callout.tint-sky:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--sky-tint) !important; border-color: rgba(34, 58, 102, 0.14) !important; }
main article .blog-callout.tint-mint:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--mint-tint) !important; border-color: rgba(15, 92, 99, 0.16) !important; }
main article .blog-cta.tint-peach:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--peach-tint) !important; border-color: rgba(184, 66, 46, 0.14) !important; }
main article .blog-callout .h { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-2); }
main article .blog-callout.tint-mint .h { color: var(--teal-2); }
main article .blog-callout .h::before { content: ""; width: 1.75rem; height: 2px; border-radius: 1px; background: currentColor; }
main article .blog-callout p, main article .blog-cta p { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.65; color: rgba(20, 38, 45, 0.86); }
main article .blog-cta h3 { margin-top: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.015em; color: var(--color-lyd-ink); }
main article .blog-cta > div > h3 { margin-top: 0; }
main article .blog-cta .btns { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
main article .blog-cta a.btn-ghost-light { border-color: rgba(20, 38, 45, 0.28); }
/* tables: white frame that scrolls at narrow widths */
main article .blog-table-frame { margin-top: 1.75rem; background: #fff; border: 1px solid rgba(20, 38, 45, 0.1); border-radius: 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 1px 2px rgba(20, 38, 45, 0.04), 0 24px 48px -32px rgba(20, 38, 45, 0.25); }
main article .blog-table-frame:focus-visible { outline: 2px solid var(--color-lyd-yellow-deep); outline-offset: 2px; }
main article .blog-table-frame table { width: 100%; min-width: 36rem; margin: 0; border-collapse: collapse; font-size: 1rem; }
main article .blog-table-frame th { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.01em; color: var(--color-lyd-ink); background: var(--ivory, #f3f1ec); padding: 1rem 1.5rem; border-bottom: 1px solid rgba(20, 38, 45, 0.12); }
main article .blog-table-frame td { padding: 1rem 1.5rem; line-height: 1.55; color: rgba(20, 38, 45, 0.86); border-bottom: 1px solid rgba(20, 38, 45, 0.08); vertical-align: top; }
main article .blog-table-frame tr:last-child td { border-bottom: 0; }
main article .blog-table-frame td:first-child { font-weight: 600; color: var(--color-lyd-ink); }
/* FAQ */
main article .blog-faq-item { margin-top: 0.75rem; background: #fff; border: 1px solid rgba(20, 38, 45, 0.1); border-radius: 1.25rem; padding: 0 1.5rem; }
main article .blog-faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.125rem 0; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; color: var(--color-lyd-ink); }
main article .blog-faq-item summary::-webkit-details-marker { display: none; }
main article .blog-faq-item summary::after { content: "+"; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 999px; display: grid; place-items: center; font-family: var(--font-sans); font-weight: 500; color: var(--color-lyd-ink); background: var(--color-lyd-yellow); }
main article .blog-faq-item[open] summary::after { content: "–"; }
main article .blog-faq-item .a, main article .blog-faq-item .faq-a { padding: 0 0 1.375rem; font-size: 1rem; line-height: 1.7; color: var(--color-lyd-secondary); }
/* author */
main article .blog-author { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.125rem; align-items: start; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgba(20, 38, 45, 0.12); }
main article .blog-author .av { width: 3.5rem; height: 3.5rem; border-radius: 999px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 0.9375rem; letter-spacing: 0.04em; color: #fff; background: var(--color-lyd-deep); }
main article .blog-author .n { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--color-lyd-ink); }
main article .blog-author .r { margin-top: 0.375rem; font-size: 0.9375rem; line-height: 1.6; color: var(--color-lyd-secondary); }
/* rail (growth guide) */
main article .blog-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 0; }
main article .blog-rail-row { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(20, 38, 45, 0.12); }
@media (min-width: 768px) { main article .blog-rail-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } main article .blog-rail-row > .rail-cta { grid-column: 1 / -1; } }
@media (min-width: 1024px) { main article .blog-rail-row { grid-template-columns: 1fr 1fr 1.25fr; } main article .blog-rail-row > .rail-cta { grid-column: auto; } }
main article .blog-rail-row > * { margin: 0; }
main article .rail-card { background: #fff; border: 1px solid rgba(20, 38, 45, 0.1); border-radius: 1.5rem; padding: 1.5rem; }
main article .rail-card--tint { background: var(--sky-tint); border-color: rgba(34, 58, 102, 0.14); }
main article h2.rail-card__h:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main article .rail-cta h2:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { font-family: var(--font-display); font-weight: 700 !important; font-size: 1.0625rem !important; line-height: 1.3 !important; letter-spacing: -0.01em !important; color: var(--color-lyd-ink) !important; }
main article .rail-cta h2:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: #fff !important; font-size: 1.25rem !important; }
main article .rail-cats a { border-radius: 0.875rem; border: 1px solid rgba(34, 58, 102, 0.12); color: var(--color-lyd-ink); }
main article .rail-cats a:hover { border-color: var(--navy-2); }
main article .rail-tags a.chip:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { height: 1.75rem; padding: 0 0.75rem; background: #fff !important; border: 1px solid rgba(20, 38, 45, 0.14) !important; color: var(--color-lyd-secondary) !important; font-size: 0.75rem; font-weight: 600; }
main article .rail-tags a.chip:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):hover { border-color: var(--color-lyd-ink) !important; color: var(--color-lyd-ink) !important; }
main article .rail-cta { background: var(--color-lyd-deep); border-radius: 1.5rem; padding: 1.75rem 1.5rem; color: #fff; }
main article .rail-cta p { color: var(--color-lyd-dark-body, #dfe7ea); }
main article .rail-cta a.rail-cta__btn { margin-top: 1.25rem; width: 100%; }
/* related articles */
main section.blog-related { --band-y: clamp(4rem, 6vw, 5.5rem); }
main section.blog-related > .band-inner { padding-top: var(--band-y); padding-bottom: var(--band-y); }
main section.blog-related h2.blog-related__h:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { font-family: var(--font-display); font-weight: 700 !important; font-size: clamp(1.75rem, 3vw, 2.5rem) !important; line-height: 1.1 !important; letter-spacing: -0.025em !important; color: var(--color-lyd-ink) !important; }
main section.blog-related .blog-rel-grid { display: grid; gap: 1.25rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { main section.blog-related .blog-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } main section.blog-related .blog-rel-grid > a:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1024px) { main section.blog-related .blog-rel-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } main section.blog-related .blog-rel-grid > a { grid-column: span 2; } main section.blog-related .blog-rel-grid > a:last-child:nth-child(odd), main section.blog-related .blog-rel-grid > a:nth-child(3n+1):nth-last-child(2), main section.blog-related .blog-rel-grid > a:nth-child(3n+2):last-child { grid-column: span 3; } }
main section.blog-related a.blog-rel-card { display: flex; flex-direction: column; gap: 0.875rem; min-height: 11rem; padding: 1.5rem; border-radius: 1.5rem; background: #fff; border: 1px solid rgba(20, 38, 45, 0.1); color: var(--color-lyd-ink); text-decoration: none; box-shadow: 0 1px 2px rgba(20, 38, 45, 0.04), 0 24px 48px -32px rgba(20, 38, 45, 0.25); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s, border-color 0.35s; }
main section.blog-related a.blog-rel-card:hover { transform: translateY(-4px); border-color: rgba(212, 167, 44, 0.5); box-shadow: 0 2px 4px rgba(20, 38, 45, 0.05), 0 40px 70px -30px rgba(20, 38, 45, 0.35); }
main section.blog-related a.blog-rel-card:focus-visible { outline: 2px solid var(--color-lyd-yellow-deep); outline-offset: 3px; }
main section.blog-related .blog-rel-card__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
main section.blog-related .blog-rel-card__date { font-size: 0.8125rem; font-weight: 500; color: var(--color-lyd-secondary); }
main section.blog-related .blog-rel-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; line-height: 1.28; letter-spacing: -0.015em; text-wrap: balance; }
main section.blog-related .blog-rel-card__more { margin-top: auto; padding-top: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--color-lyd-gold-ink); }
main section.blog-related .chip.chip-tint { height: 1.625rem; padding: 0 0.75rem; font-weight: 600; }
main section.blog-related .tint-sky .chip-tint { background: var(--sky-tint); color: var(--navy-2); }
main section.blog-related .tint-lilac .chip-tint { background: var(--plum-tint, #ece6f5); color: var(--plum-2); }
main section.blog-related .tint-mint .chip-tint { background: var(--mint-tint); color: var(--teal-2); }
main section.blog-related .tint-peach .chip-tint { background: var(--peach-tint); color: var(--rose, #b8422e); }
main section.blog-related a.blog-rel-card.tint-sky:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section.blog-related a.blog-rel-card.tint-lilac:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section.blog-related a.blog-rel-card.tint-mint:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section.blog-related a.blog-rel-card.tint-peach:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #fff !important; border-color: rgba(20, 38, 45, 0.1) !important; }
/* closing band */
main section.blog-closing > .band-inner { padding-top: clamp(4rem, 6vw, 5.5rem); padding-bottom: clamp(4rem, 6vw, 5.5rem); }
main section.blog-closing .blog-closing__inner { max-width: 40rem; margin: 0; padding: 0; background: transparent; }
main section.blog-closing .blog-closing__inner > div:last-child a + a { margin-left: 0; }
main section.blog-closing h2:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: #fff !important; font-family: var(--font-display); font-weight: 700 !important; font-size: clamp(2rem, 3.6vw, 3rem) !important; letter-spacing: -0.03em !important; line-height: 1.04 !important; max-width: 20ch; text-wrap: balance; }
main section.blog-closing .contact-card p, main section.blog-closing .contact-card li { color: var(--color-lyd-dark-body, #dfe7ea); }
main section.blog-closing .contact-card a:not(.text-white) { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 3px; }
main section.blog-closing p { color: var(--color-lyd-dark-body, #dfe7ea); font-size: 1.125rem; line-height: 1.65; max-width: 40rem; }
main article .rail-cta { display: flex; flex-direction: column; }
main article .rail-cta p { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.6; }
main article .rail-cta a.rail-cta__btn { margin-top: auto; padding-top: 0.875rem; padding-bottom: 0.875rem; }
main article .rail-cats { display: grid; gap: 0.5rem; margin-top: 1rem; }
main article .rail-cats a { display: block; padding: 0.625rem 0.875rem; font-size: 0.9375rem; font-weight: 500; text-decoration: none; background: rgba(255, 255, 255, 0.6); }
main article .rail-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
/* ==== company.css ==== */
/* ===== company pages (/about /team /careers /awards /outcomes) ===== */
main[data-page="company"] > section.hero-interior p.text-lede.co-lede { margin-left: 0 !important; margin-right: 0 !important; }
main[data-page="company"] > section.hero-interior { padding-bottom: clamp(3rem, 5vw, 4.5rem); }
main[data-page="company"] .hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { main[data-page="company"] .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; } }
main[data-page="company"] .hero-photo { aspect-ratio: 4 / 3; }
main section.co-band > .band-inner > .td-kicker, main .co-split__text > .td-kicker, main .co-ledger > .td-kicker, main .co-founder > .td-kicker, main .co-story__layout .td-kicker, main .co-team__card > .td-kicker { display: inline-flex; align-items: center; margin-bottom: 1.25rem; text-transform: uppercase; }
main .co-founder > .td-kicker + h2 { margin-top: 0 !important; }
/* numbered discs */
main .co-disc { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.04em; background: var(--color-lyd-deep); color: #fff; flex: none; }
/* card set */
main .co-cards { display: grid; gap: 1rem; }
@media (min-width: 768px) { main .co-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
main .co-card { padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
main .co-card > p, main .co-card--outcome > p { margin-top: 0 !important; font-size: 1rem !important; line-height: 1.6 !important; color: var(--color-lyd-secondary) !important; }
main .co-card--outcome > h2 { font-size: 1.35rem !important; line-height: 1.2; margin-top: 0.25rem; }
main .co-card--outcome > p { margin-top: -0.25rem !important; }
main .co-note { margin-top: 1.75rem !important; color: var(--color-lyd-secondary) !important; }
/* about: founder + story */
main .co-founder__name { font-size: clamp(1.9rem, 3vw, 2.6rem) !important; font-weight: 700; }
main .co-founder__role { color: var(--color-lyd-secondary) !important; }
main .co-founder__intro { font-size: clamp(1.15rem, 1.7vw, 1.45rem) !important; line-height: 1.5 !important; color: var(--color-lyd-ink) !important; }
main .co-story__layout { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { main .co-story__layout { grid-template-columns: 0.78fr 1.22fr; gap: 4rem; } main .co-story__layout .co-photo { position: sticky; top: 7rem; } }
main .co-photo { aspect-ratio: 4 / 5; }
main .co-photo img { object-position: 50% 40%; }
@media (max-width: 1023px) { main .co-photo { aspect-ratio: 16 / 10; max-height: 24rem; } }
/* team */
main .co-team { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { main .co-team { grid-template-columns: 0.8fr 1.2fr; gap: 4rem; } }
main .co-team__card { padding: 2.25rem; gap: 0.25rem; }
main .co-team__card .co-founder__name { margin-top: 0.5rem; }
main .co-team__body > p:first-of-type { margin-top: 0 !important; font-size: clamp(1.15rem, 1.7vw, 1.45rem) !important; line-height: 1.5 !important; color: var(--color-lyd-ink) !important; }
main .co-team__body > p + p { font-size: 1.125rem !important; color: var(--color-lyd-secondary) !important; }
/* careers / awards: text + hairline ledger */
main .co-split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { main .co-split { grid-template-columns: 1.15fr 0.85fr; gap: 5rem; } }
main .co-split__text > p:first-of-type { margin-top: 0 !important; }
main .co-split__text > p { font-size: 1.15rem !important; line-height: 1.6 !important; color: var(--color-lyd-ink) !important; }
main .co-split__text > p + p { color: var(--color-lyd-secondary) !important; }
main .co-ledger__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-lyd-line-strong); }
main .co-ledger__list > li { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--color-lyd-line-strong); font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--color-lyd-ink); }
main .co-ledger__list > li .co-disc { background: transparent; border: 1px solid var(--color-lyd-line-strong); color: var(--color-lyd-gold-ink); }
main .co-aside { display: grid; gap: 2rem; }
main .co-fact { padding: 1.75rem 2rem; display: flex; flex-direction: column; gap: 0.35rem; }
main .co-fact__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -0.03em; color: #8a2f20; }
main .co-fact__label { font-size: 0.875rem; font-weight: 500; color: var(--color-lyd-secondary); }
/* overrides that must beat the luxe layer */
main[data-page="company"] .co-team__card, main[data-page="company"] .co-team__card * { text-align: left !important; }
main[data-page="company"] .co-team__card .co-founder__name { margin-left: 0 !important; margin-right: 0 !important; }
main[data-page="company"] .co-cards .co-card--outcome > h2.font-display:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { font-size: 1.4rem !important; line-height: 1.2 !important; letter-spacing: -0.015em; margin-top: 0.25rem !important; }
/* ---- fix round ---- */
/* about: keep the highlighted phrase and its comma on one line */
main[data-page="company"] .co-nowrap { white-space: nowrap; }
main[data-page="company"] .co-nowrap .marker { margin-right: 0; }
/* tighter hero (matches the /pricing rhythm) */
main[data-page="company"] > section.hero-interior { padding-top: clamp(5.5rem, 9vw, 7.5rem) !important; }
main[data-page="company"] > section.hero-interior:not(:has(.hero-grid)) { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
/* team: body column carries its own kicker */
main .co-team__body > .td-kicker { display: inline-flex; align-items: center; margin-bottom: 1.25rem; text-transform: uppercase; }
main .co-team__body > .td-kicker + p { margin-top: 0 !important; }
/* careers: inline text link in place of a button the mirror never had */
main[data-page="company"] a.co-text-link:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: var(--color-lyd-gold-ink, #7d5f14) !important; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(125, 95, 20, 0.35); }
main[data-page="company"] a.co-text-link:hover { border-bottom-color: #7d5f14; }
/* outcomes footnote must read as secondary text, not link navy */
main[data-page="company"] p.co-note:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: #4e565b !important; font-size: 0.9375rem !important; }
/* --- polish pass: company --- */
/* the team card was the page's only anchor and it was off-palette pale sky.
The luxe white-card rule carries 8 classes of specificity, so the boost idiom is needed to beat it. */
html.luxe main[data-page="company"] .co-team__card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h) { background: var(--color-lyd-deep) !important; border: 1px solid rgba(241, 210, 124, 0.28) !important; padding: 2.25rem !important; box-shadow: var(--lift-3) !important; }
html.luxe main[data-page="company"] .co-team__card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h) :is(h1, h2, h3, strong, .font-display) { color: #fff !important; }
html.luxe main[data-page="company"] .co-team__card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h) :is(p, li, span, div) { color: #dfe7ea !important; }
html.luxe main[data-page="company"] .co-team__card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h) .td-kicker { color: #f1d27c !important; }
html.luxe main[data-page="company"] .co-team__card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h) .td-kicker::before { background: #dcb13a !important; }
/* the luxe layer re-filled a panel premium.css had deliberately cleared: an empty glass box */
main[data-page="company"] section.closing-band > .band-inner > [class*="bg-lyd-blue"],
main[data-page="company"] section.closing-band > .band-inner > [class*="bg-lyd-yellow"] { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
/* hero was 592px tall to hold a 119px text block */
main[data-page="company"] > section.hero-interior { padding-top: clamp(3rem, 6vw, 5rem) !important; padding-bottom: clamp(3rem, 5vw, 4.5rem) !important; }
@media (min-width: 1024px) { main[data-page="company"] .hero-photo { aspect-ratio: 4 / 3; max-height: 24rem; } }
/* ==== content.css ==== */
/* content group: resources, blog index, blog topics, faq */
:root { --c-line: rgba(20, 38, 45, 0.1); --c-gold: #dcb13a; --c-gold-ink: #7d5f14; --c-sec: #4e565b; }
/* ---- hue chips (shared by the group) ---- */
main .chip.hue-sky:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #e3ecf7 !important; color: #223a66 !important; }
main .chip.hue-lilac:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #ece6f5 !important; color: #4a2d7a !important; }
main .chip.hue-mint:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #e2f2ea !important; color: #0f5c63 !important; }
main .chip.hue-peach:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #fbe8d6 !important; color: #b8422e !important; }
main .chip[class*="hue-"] { height: 1.625rem; padding: 0 0.75rem; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; text-decoration: none; }
main .chip[class*="hue-"]::before { display: none !important; }
main .hue-sky .disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #223a66 !important; color: #fff !important; }
main .hue-lilac .disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #4a2d7a !important; color: #fff !important; }
main .hue-mint .disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #0f5c63 !important; color: #fff !important; }
main .hue-peach .disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #b8422e !important; color: #fff !important; }
main .disc.res-card__num { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
main a.text-link { color: var(--c-gold-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(125, 95, 20, 0.35); }
main a.text-link:hover { border-bottom-color: var(--c-gold-ink); }
/* =============================== /resources =============================== */
main section.res-hub { padding-top: 0.5rem; padding-bottom: clamp(3rem, 5vw, 4.5rem); }
main section.res-hub > .grid { gap: 1.25rem; }
@media (min-width: 1024px) { main section.res-hub > .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
main .res-card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), .luxe main .res-card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) {
background: #fff !important; border: 1px solid var(--c-line) !important; border-radius: 1.5rem !important; padding: 1.75rem !important; position: relative; overflow: hidden;
}
main .res-card--download::before { content: ""; position: absolute; left: 1.75rem; right: 1.75rem; top: 0; height: 3px; background: var(--c-gold); border-radius: 0 0 2px 2px; }
main .res-card--download .disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--c-gold) !important; color: #20282d !important; }
main .res-card .res-card__num { margin-bottom: 1.25rem; }
main .res-card h2.font-display:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { font-size: clamp(1.25rem, 1.6vw, 1.5rem) !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -0.015em !important; color: #20282d; text-wrap: balance; }
main .res-card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { display: flex !important; flex-direction: column !important; }
main .res-card > div { flex: 1 1 auto; }
main .res-card a.btn.btn-ghost-light { border: 1px solid rgba(20, 38, 45, 0.3) !important; color: #20282d !important; background: transparent !important; }
main .res-card a.btn.btn-ghost-light:hover { border-color: var(--c-gold-ink) !important; color: var(--c-gold-ink) !important; }
main .res-card p { color: var(--c-sec) !important; opacity: 1 !important; font-size: 0.9375rem; line-height: 1.6; }
main .res-card a.btn { margin-top: 1.5rem; align-self: flex-start; }
main section.res-index .band-inner > .mx-auto.text-center { text-align: left; margin-bottom: 2rem; }
main section.res-index .band-inner > .mx-auto.text-center h2 { text-align: left !important; }
main .index-list { display: grid; gap: 0; border: 1px solid var(--c-line); border-radius: 1.5rem; background: #fff; overflow: hidden; }
main .index-list > a.index-row { display: grid !important; grid-template-columns: 2rem minmax(0, 1fr) 1.5rem; justify-items: start; text-align: left; align-items: center; border-radius: 0 !important; gap: 1.25rem; padding: 1.25rem 1.5rem; border: 0; border-top: 1px solid var(--c-line); background: #fff; text-decoration: none; transition: background-color 0.18s; }
main .index-list > .index-row:first-child { border-top: 0; }
main .index-list > .index-row:hover { background: #f8f6f1; }
main .index-row__num { font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--c-gold-ink); font-variant-numeric: tabular-nums; }
main .index-row__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
main .index-row__title { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.01em; color: #20282d; }
main .index-row__desc { font-size: 0.9rem; color: var(--c-sec); line-height: 1.5; }
main .index-row__arrow { color: var(--c-gold-ink); font-size: 1.125rem; transition: transform 0.2s; }
main .index-row:hover .index-row__arrow { transform: translateX(4px); }
@media (min-width: 900px) { main .index-list > .index-row { padding: 1.35rem 1.75rem; } main .index-row__body { flex-direction: row; align-items: baseline; gap: 1rem; } main .index-row__title { flex: 0 0 24rem; } main .index-row__desc { flex: 1 1 auto; } }
/* ============================ /blog + topics ============================== */
main > section.topic-hero .topic-hero__inner { max-width: 56rem; }
main > section.topic-hero .topic-chip { margin: 0 0 1rem; display: inline-flex; }
main > section.topic-hero .td-kicker { display: inline-flex; }
main > section.topic-hero.hero-interior { padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important; }
main section.post-index--few[data-band="cream"] { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 768px) { main section.post-index--few .grid { grid-template-columns: repeat(auto-fit, minmax(320px, 420px)) !important; justify-content: start; } }
main section.post-index a.post-card[hidden] { display: none !important; }
/* blog + faq heroes now use the reference hero-interior grid */
main > section.blog-hero-band.hero-interior, main > section.faq-hero-band.hero-interior { padding-top: clamp(2rem, 4vw, 3.5rem) !important; padding-bottom: clamp(2.5rem, 4vw, 3.5rem) !important; }
main > section.faq-hero-band h1.faq-hero { font-size: var(--text-display-interior) !important; font-weight: 800 !important; line-height: 1.04 !important; letter-spacing: -0.03em !important; }
main > section.faq-hero-band h1.faq-hero > span { display: inline; padding: 0 !important; }
main > section.faq-hero-band a.faq-start .faq-hero__arrow { display: inline-flex; width: 1.75rem; height: 1.75rem; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(125, 95, 20, 0.45); color: var(--c-gold-ink); margin-left: 0.5rem; }
main > section.faq-hero-band a.faq-start .faq-hero__arrow svg { width: 0.9rem; height: 0.9rem; }
main > section.topic-hero p.text-lede { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; }
main section.post-index[data-band="cream"] { padding-top: clamp(3rem, 5vw, 4.5rem); padding-bottom: clamp(3.5rem, 6vw, 6rem); }
main section.post-index .post-card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #fff !important; border: 1px solid var(--c-line) !important; border-radius: 1.5rem !important; box-shadow: var(--lift-1); overflow: hidden; }
main section.post-index .post-card:hover { box-shadow: var(--lift-3); transform: translateY(-3px); }
main section.post-index .post-card__media img { filter: saturate(0.85) contrast(1.04); }
main section.post-index .post-card__body { padding: 1.5rem 1.5rem 1.75rem; }
main section.post-index .post-card__meta { gap: 0.6rem 0.9rem; align-items: center; }
main section.post-index .post-card__cat.chip::before { display: none; }
main section.post-index .post-card__date { position: static; background: transparent; padding: 0; border-radius: 0; font-size: 0.78rem; color: var(--c-sec); margin-left: auto; }
main section.post-index .post-card__by { color: var(--c-sec); font-size: 0.78rem; }
main section.post-index .post-card__title { font-family: var(--font-display); font-weight: 600 !important; font-size: 1.3rem; line-height: 1.22; letter-spacing: -0.015em; color: #20282d !important; margin-top: 1rem; }
main section.post-index .post-card__excerpt { color: var(--c-sec) !important; font-size: 0.9375rem; }
main section.post-index .post-card__more { border-color: var(--c-line); color: #20282d; }
main section.post-index .post-card__arrow { background: var(--c-gold); color: #20282d; }
main section.post-index .post-card:hover .post-card__more { background: var(--c-gold); border-color: var(--c-gold); }
main section.post-index .post-card .word { color: inherit !important; }
/* ================================= /faq ================================== */
main section.faq-list { padding-top: clamp(3rem, 5vw, 4.5rem); }
main .faq-topics { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
main .faq-topics ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
main .faq-topics .chip { height: 2.25rem; padding: 0 1rem; font-size: 0.8125rem; border: 1px solid transparent; transition: box-shadow 0.18s; }
main .faq-topics .chip:hover { box-shadow: 0 0 0 1px currentColor inset; }
main .faq-topics .chip:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
main .faq-group { display: grid; gap: 1.5rem; padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 4vw, 3.5rem); border-top: 1px solid var(--c-line); scroll-margin-top: 7rem; }
@media (min-width: 1024px) { main .faq-group { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 3.5rem; align-items: start; } main .faq-group > h2 { position: sticky; top: 7rem; } }
main .faq-group h2.faq-group__title.font-display { font-size: clamp(1.5rem, 2.4vw, 2rem) !important; font-weight: 600 !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; color: #20282d; display: block; text-wrap: balance; }
main .faq-group h2.faq-group__title .word, main .faq-group h2.faq-group__title span { display: inline !important; }
main .faq-group h2.faq-group__title::before { content: attr(data-num); display: grid; margin-bottom: 1rem; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; color: #fff; background: #223a66; }
main .faq-group.hue-lilac h2.faq-group__title::before { background: #4a2d7a; }
main .faq-group.hue-mint h2.faq-group__title::before { background: #0f5c63; }
main .faq-group.hue-peach h2.faq-group__title::before { background: #b8422e; }
/* hairline accordion: undo the card treatment the shared layer gives .faq-item */
main .faq-list details.faq-row:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), .luxe main .faq-list details.faq-row:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) {
background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--c-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; transform: none !important;
}
main .faq-list details.faq-row:first-of-type { border-top: 1px solid var(--c-line) !important; }
main .faq-list details.faq-row[open] { border-bottom-color: rgba(220, 177, 58, 0.7) !important; }
main .faq-list details.faq-row > summary { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.15rem 0.25rem 1.15rem 0; cursor: pointer; list-style: none; }
main .faq-list details.faq-row > summary::-webkit-details-marker { display: none; }
main .faq-list details.faq-row > summary h3 { font-family: var(--font-display); font-weight: 600 !important; font-size: 1.0625rem; line-height: 1.4; letter-spacing: -0.01em; color: #20282d; margin: 0; }
main .faq-list details.faq-row > summary:hover h3 { color: #0f2e38; }
main .faq-list details.faq-row > summary:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 4px; border-radius: 0.4rem; }
main .faq-list .faq-item__sign { flex: none; width: 1.75rem; height: 1.75rem; border: 1px solid rgba(220, 177, 58, 0.55) !important; border-radius: 50%; background: transparent !important; position: relative; transition: background-color 0.24s ease, border-color 0.24s ease; }
main .faq-list .faq-item__sign::before, main .faq-list .faq-item__sign::after { content: ""; position: absolute; inset: 50% 0.45rem; border-top: 2px solid var(--c-gold-ink); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
main .faq-list .faq-item__sign::after { transform: rotate(90deg); }
main .faq-list details.faq-row[open] .faq-item__sign { background: var(--c-gold) !important; border-color: var(--c-gold) !important; }
main .faq-list details.faq-row[open] .faq-item__sign::before, main .faq-list details.faq-row[open] .faq-item__sign::after { border-top-color: #20282d; }
main .faq-list details.faq-row[open] .faq-item__sign::after { transform: rotate(0); }
main .faq-list details.faq-row > p { margin: 0; padding: 0 3.25rem 1.4rem 0; max-width: 46rem; font-size: 1rem; line-height: 1.7; color: var(--c-sec) !important; }
@media (max-width: 767px) {
main .res-card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { padding: 1.5rem !important; }
main .index-list > .index-row { grid-template-columns: auto 1fr; padding: 1.1rem 1.1rem; }
main .index-row__arrow { display: none; }
main .faq-list details.faq-row > p { padding-right: 0; }
}
/* ==== conversion.css ==== */
/* ===== Conversion pages: /contact, /quote, /locations, /how-it-works, /for-business ===== */
:root { --conv-ink: #20282d; --conv-secondary: #4e565b; --conv-gold: #dcb13a; --conv-gold-2: #f1d27c; --conv-line: rgba(20, 38, 45, 0.1); }
/* --- hero: lede sits under the h1, never centred --- */
main.conv-page > section.hero-interior p.conv-lede { margin-left: 0 !important; margin-right: 0 !important; text-align: left; max-width: 40rem; }
main.conv-page > section.hero-interior .conv-hero-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { main.conv-page > section.hero-interior .conv-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: 4rem; } }
main.conv-page > section.hero-interior .conv-hero-grid > div:first-child { min-width: 0; }
main.conv-page h2.conv-h2 { font-weight: 600 !important; letter-spacing: -0.015em; color: var(--conv-ink); }
/* --- deep "talk to a real person" panel --- */
main.conv-page .conv-talk.contact-card { margin-top: 2.25rem; padding: 2rem; border-radius: 1.5rem; background: var(--color-lyd-deep) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: 0 30px 60px -30px rgba(15, 46, 56, 0.55) !important; }
main.conv-page .conv-talk .td-kicker { color: var(--conv-gold-2) !important; }
main.conv-page .conv-talk .td-kicker::before { background: linear-gradient(90deg, var(--conv-gold), var(--conv-gold-2)) !important; }
main.conv-page .conv-talk .conv-talk__label { margin: 1.25rem 0 0.25rem; font-family: var(--font-sans); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: rgba(223, 231, 234, 0.72) !important; }
main.conv-page .conv-talk .conv-talk__label:first-of-type { margin-top: 0; }
main.conv-page .conv-talk a.conv-phone { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.2vw, 2.75rem); letter-spacing: -0.03em; line-height: 1.05; color: var(--conv-gold) !important; text-decoration: none; }
main.conv-page .conv-talk a.conv-phone:hover { color: var(--conv-gold-2) !important; }
main.conv-page .conv-talk a.conv-mail, main.conv-page .conv-talk a.conv-talk__mail { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.125rem; font-weight: 500; color: #fff !important; text-decoration: underline; text-decoration-color: rgba(241, 210, 124, 0.5); text-underline-offset: 4px; }
main.conv-page .conv-talk a.conv-talk__mail:hover { text-decoration-color: var(--conv-gold-2); }
main.conv-page .conv-talk .conv-talk__val, main.conv-page .conv-talk .conv-talk__val span { color: #dfe7ea !important; font-size: 1rem; line-height: 1.6; margin: 0; }
main.conv-page .conv-talk a.conv-talk__mail-inline { color: #fff !important; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(241, 210, 124, 0.5); }
/* --- white form card: iframe height capped so the card never reads as a white void --- */
main.conv-page .conv-form.card-lyd { overflow: visible; }
main.conv-page .conv-form iframe.conv-form__frame { height: 920px !important; min-height: 920px !important; }
main.conv-page .conv-form p.conv-form__fallback { margin: 0 0 1.25rem; padding: 0; font-size: 0.875rem; line-height: 1.55; color: var(--conv-secondary) !important; }
main.conv-page .conv-form p.conv-form__fallback a { color: var(--conv-ink) !important; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(125, 95, 20, 0.45); }
main.conv-page .conv-form iframe.conv-form__frame + noscript, main.conv-page .conv-form noscript { display: none; }
@media (max-width: 1023px) { main.conv-page .conv-form--sticky { position: static !important; top: auto !important; } }
/* /contact hero grid: text | form, then talk panel under the text at desktop; text, form, talk on small screens */
main[data-conv="contact"] > section.hero-interior .conv-hero-grid { grid-template-areas: "text" "form" "talk"; }
main[data-conv="contact"] > section.hero-interior .conv-hero-grid > .conv-hero-text { grid-area: text; }
main[data-conv="contact"] > section.hero-interior .conv-hero-grid > .conv-hero-form { grid-area: form; }
main[data-conv="contact"] > section.hero-interior .conv-hero-grid > .conv-hero-talk { grid-area: talk; margin-top: 0; }
@media (min-width: 1024px) { main[data-conv="contact"] > section.hero-interior .conv-hero-grid { grid-template-areas: "text form" "talk form"; grid-template-rows: auto 1fr; } main[data-conv="contact"] > section.hero-interior .conv-hero-grid > .conv-hero-talk { align-self: start; margin-top: 0.5rem; } }
main.conv-page .conv-form.card-lyd { background: #fff !important; border: 1px solid var(--conv-line) !important; border-radius: 1.5rem; padding: 1.75rem 1.5rem 1.5rem; }
@media (min-width: 640px) { main.conv-page .conv-form.card-lyd { padding: 2rem; } }
main.conv-page .conv-form h2.conv-form__h { padding: 0 0 1rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
main.conv-page .conv-form iframe { display: block; width: 100%; max-width: 100%; border: 0; }
main.conv-page .conv-form p { padding-left: 0; padding-right: 0; color: var(--conv-secondary); }
main.conv-page .conv-form p a { color: var(--conv-ink); }
main.conv-page .conv-form--sticky { align-self: start; }
/* --- tinted card sets --- */
main.conv-page .conv-card.card-lyd { border-radius: 1.5rem; border: 1px solid var(--conv-line); padding: 1.75rem; display: flex; flex-direction: column; background-image: none !important; }
main.conv-page .conv-card .conv-card__h { margin-top: 0; font-size: 1.375rem !important; font-weight: 600 !important; letter-spacing: -0.02em; line-height: 1.2; color: var(--conv-ink) !important; }
main.conv-page .conv-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--conv-ink); }
main.conv-page .conv-card p { color: var(--conv-secondary) !important; opacity: 1 !important; }
main.conv-page .conv-card .btn { align-self: flex-start; margin-top: auto; padding-top: 0.875rem; }
main.conv-page .conv-card .btn.mt-5 { margin-top: 1.5rem; }
main.conv-page .conv-disc { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; margin-bottom: 1.25rem; font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.02em; flex: none; }
/* disc colour follows the tint (beats the luxe gold-disc rule) */
main.conv-page .tint-sky .conv-disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #223a66 !important; color: #fff !important; }
main.conv-page .tint-lilac .conv-disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #4a2d7a !important; color: #fff !important; }
main.conv-page .tint-mint .conv-disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #0f5c63 !important; color: #fff !important; }
main.conv-page .tint-peach .conv-disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #b8422e !important; color: #fff !important; }
/* --- /contact: ways to reach us --- */
main.conv-page section.conv-ways .conv-ways__grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { main.conv-page section.conv-ways .conv-ways__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { main.conv-page section.conv-ways .conv-ways__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
main.conv-page section.conv-ways .conv-ways__grid > .conv-card { min-width: 0; }
main.conv-page section.conv-loc .band-inner > div > .td-kicker, main.conv-page section.conv-features .mb-10 > .td-kicker { margin-bottom: 1.25rem; }
main.conv-page section.conv-ways { padding-top: clamp(3rem, 5vw, 4.5rem); padding-bottom: clamp(3rem, 5vw, 4.5rem); }
main.conv-page > section.hero-interior[data-conv] { padding-bottom: 0; }
main[data-conv="contact"] > section.hero-interior, main[data-conv="quote"] > section.hero-interior { padding-bottom: clamp(3rem, 5vw, 4.5rem) !important; }
/* --- /quote: trust cards --- */
main.conv-page .conv-trust { display: grid; gap: 1rem; margin-top: 2.25rem; }
@media (min-width: 640px) { main.conv-page .conv-trust { grid-template-columns: repeat(3, 1fr); } }
main.conv-page .conv-trust .conv-card.card-lyd { padding: 1.375rem; }
main.conv-page .conv-trust .conv-card p { font-size: 0.9375rem; margin-top: 0.5rem; }
main[data-conv="quote"] .conv-hero-grid > div:first-child > h2.conv-h2 { margin-top: 2.5rem; }
/* --- /locations --- */
main.conv-page section.conv-loc .conv-loc__grid { display: grid; gap: 2rem; margin-top: 2rem; align-items: stretch; }
@media (min-width: 1024px) { main.conv-page section.conv-loc .conv-loc__grid { grid-template-columns: 0.85fr 1.15fr; gap: 3rem; } }
main.conv-page section.conv-loc .conv-loc__photo { aspect-ratio: 4 / 5; max-height: 34rem; }
@media (max-width: 1023px) { main.conv-page section.conv-loc .conv-loc__photo { aspect-ratio: 16 / 10; max-height: 24rem; } }
main.conv-page section.conv-loc .conv-loc__cards { display: grid; gap: 1.25rem; align-content: center; }
main.conv-page section.conv-loc .conv-loc__card.card-lyd { padding: 2rem; }
main.conv-page section.conv-loc .conv-loc__card p.conv-loc__p { margin: 0; font-size: 1.125rem !important; line-height: 1.6; color: var(--conv-ink) !important; }
main.conv-page section.conv-loc .conv-loc__card .conv-disc { margin-bottom: 1rem; }
/* --- /how-it-works: a real four-step sequence --- */
main.conv-page section.conv-steps .conv-steps__grid { display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 640px) { main.conv-page section.conv-steps .conv-steps__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { main.conv-page section.conv-steps .conv-steps__grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
main.conv-page section.conv-steps .conv-step.card-lyd { position: relative; padding: 2rem 1.75rem; min-height: 18rem; }
main.conv-page section.conv-steps .conv-step .conv-disc { width: 3.25rem; height: 3.25rem; font-size: 1.0625rem; margin-bottom: 1.5rem; }
/* connector line between steps at desktop */
@media (min-width: 1024px) {
main.conv-page section.conv-steps .conv-step:not(:last-child)::after { content: ""; position: absolute; top: 3.625rem; right: -1.5rem; width: 1.5rem; height: 2px; background: linear-gradient(90deg, rgba(20, 38, 45, 0.25), rgba(20, 38, 45, 0.08)); }
}
main.conv-page section.conv-steps .band-inner > .td-kicker { margin-bottom: 1.5rem; }
/* --- /for-business --- */
main.conv-page section.conv-features .conv-features__grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { main.conv-page section.conv-features .conv-features__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { main.conv-page section.conv-features .conv-features__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
main.conv-page section.conv-features .conv-card.card-lyd { padding: 2rem 1.75rem; }
main.conv-page section.conv-features .mb-10 { max-width: 48rem; }
main.conv-page section.conv-features .mb-10 p { max-width: 40rem; }
/* --- closing band: light panel inside the deep band reads as a deep card, headings white --- */
main.conv-page section.closing-band .band-inner > [class*="bg-lyd-blue"], main.conv-page section.closing-band .band-inner > [data-slot="card"] { border-radius: 1.5rem; }
main.conv-page section.closing-band h2, main.conv-page section.closing-band h2.font-display { color: #fff !important; font-weight: 600 !important; }
main.conv-page section.closing-band .band-inner > [class*="bg-lyd-blue"] p, main.conv-page section.closing-band [data-slot="card"] p { color: #dfe7ea !important; }
main.conv-page section.closing-band .contact-card .text-4xl { color: var(--conv-gold) !important; font-weight: 800; }
main.conv-page section.closing-band .contact-card .text-4xl span { color: #dfe7ea !important; font-weight: 500; }
main.conv-page section.closing-band .contact-card .text-sm { color: rgba(223, 231, 234, 0.85) !important; }
main.conv-page section.closing-band .contact-card .conv-phone, main.conv-page section.closing-band .contact-card a.text-white { color: var(--conv-gold) !important; font-weight: 800; }
/* surface band spacing */
main.conv-page section[data-band="surface"].conv-loc, main.conv-page section[data-band="surface"].conv-steps, main.conv-page section[data-band="surface"].conv-features { padding-top: clamp(3.5rem, 6vw, 5.5rem); padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }
/* card headings: beat the display-size h2 rules from premium/luxe */
html main.conv-page section[class] .conv-card h2.conv-card__h, html .luxe main.conv-page section[class] .conv-card h2.conv-card__h, html main.conv-page section[class] .conv-card h3.conv-card__h { font-size: 1.375rem !important; line-height: 1.2 !important; font-weight: 600 !important; letter-spacing: -0.02em !important; text-align: left !important; text-wrap: pretty; }
html main.conv-page section[class] .conv-form h2.conv-form__h, html .luxe main.conv-page section[class] .conv-form h2.conv-form__h { font-size: 1.375rem !important; line-height: 1.2 !important; font-weight: 600 !important; text-align: left !important; }
main.conv-page .conv-card, main.conv-page .conv-card p, main.conv-page .conv-form { text-align: left; }
main.conv-page .conv-card p { margin-top: 0.75rem; }
html main.conv-page section[class] h2.conv-h2, html .luxe main.conv-page section[class] h2.conv-h2 { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; }
main.conv-page section.conv-features .mb-10 p, main.conv-page section.conv-loc .band-inner > div > p { text-align: left; margin-left: 0; }
main.conv-page .conv-talk .td-kicker { display: flex; width: 100%; }
/* --- form iframe: shorter on phones so a slow GHL load never leaves a screen-tall white void --- */
@media (max-width: 639px) { main.conv-page .conv-form iframe.conv-form__frame { height: clamp(440px, 62vh, 560px) !important; } }
/* --- polish pass: contact --- */
/* cards share a CTA baseline so the grid reads as one row, not four ragged ones */
main.conv-page section.conv-ways .conv-ways__grid > .conv-card { display: flex; flex-direction: column; }
main.conv-page section.conv-ways .conv-ways__grid > .conv-card > .btn { margin-top: auto !important; align-self: flex-start; }
/* no CTA may outgrow its card */
main.conv-page section.conv-ways .conv-ways__grid .btn { max-width: 100%; white-space: normal; }
/* ==== home-human.css ==== */
/* home-human: layout that does not march in step.
`html.luxe main` prefixes are deliberate - premium-compact.css loads after this file,
so the hscroll rules here need (0,3,2) to win rather than a !important that would
also stamp on the mobile fallbacks. */
/* ---------- section headers: left-aligned split instead of a sixth centred stack ---------- */
main .sec-head-split { display: grid; gap: 1.25rem 3.5rem; margin-bottom: clamp(2.5rem, 4vw, 3.25rem); text-align: left; max-width: none; }
main .sec-head-split > p { margin-top: 0; }
main .sec-head-split h2 { max-width: 22ch; }
@media (min-width: 900px) {
main .sec-head-split { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: end; }
main .sec-head-split > p { padding-bottom: 0.45rem; max-width: 46ch; }
}
/* the kicker centring helper keys off .text-center, which is gone; keep it flush left */
main .sec-head-split .td-kicker { margin-left: 0; margin-right: 0; }
/* ---------- why now: uneven columns, staggered baseline ---------- */
@media (min-width: 900px) {
html.luxe main .whynow-grid { grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 1.5rem; }
html.luxe main .whynow-grid > *:nth-child(2) { margin-top: 1.75rem; }
html.luxe main .whynow-grid > *:nth-child(3) { margin-top: 3.5rem; }
/* the wider lead card carries slightly larger body copy, so the three stop reading as clones */
html.luxe main .whynow-grid > *:first-child p { font-size: 1.0625rem; line-height: 1.6; }
}
/* ---------- why now: the closing line stops being a card ---------- */
main .home-pull { margin-top: clamp(2.5rem, 4vw, 3.5rem); padding: 1.5rem 0 0; background: none; border: 0; border-top: 2px solid var(--color-lyd-yellow); max-width: 46rem; }
main .home-pull p { font-family: var(--font-display); font-size: clamp(1.35rem, 2.3vw, 1.9rem) !important; line-height: 1.28 !important; letter-spacing: -0.015em; color: #fff !important; }
main .home-pull p strong { font-weight: 700; color: #f1d27c !important; }
/* ---------- ecosystem: four panels out of lockstep ---------- */
@media (min-width: 1024px) {
html.luxe main .eco-stagger { align-items: start; }
html.luxe main .eco-stagger > .hscroll__panel:nth-of-type(2n) { margin-top: 2.75rem; }
}
/* ==== rich-00-primitives.css ==== */
/* rich-00-primitives: shared motion primitives. Read-only for other areas.
Consumers wrap text in …, set --rd-d on the
outer span (or an ancestor) for the delay, and reveal by having a .pm-in (premium.js) or .rd-in ancestor.
Nothing here sets colour, background, border or size: the wrapped text inherits everything from its parent. */
.rd-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.rd-mask__in { display: inline-block; color: inherit; }
/* The hidden state must SNAP and the revealed state must own the transition: html.pm is added by premium.js after
the Astro bundle has already flushed style, so a transition declared on the hidden state would merely schedule a
slide towards hidden that the reveal class (80ms later in the hero) cancels - and nothing would ever play. */
.pm .rd-mask__in { transform: translateY(112%); transition: none; will-change: transform; }
.pm :is(.pm-in, .rd-in) .rd-mask__in { transform: none; transition: transform .9s cubic-bezier(.16, 1, .3, 1) var(--rd-d, 0s); }
@keyframes rd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rd-breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.015); } }
@media (prefers-reduced-motion: reduce) { .rd-mask__in { transform: none !important; transition: none !important; } }
/* ==== rich-aeo.css ==== */
/* ==== rich-aeo: AI-assistant panel (home, [data-section="aeo"]) ====
R5 pre-rendered chat + Pause/Resume; R6 Copy-the-question. Petrol/plum band, gold only as hairline/tick.
Motion is transform/opacity only and gated on html.pm; under pm-static everything appears instantly. */
/* -- chat body ----------------------------------------------------------------------------- */
/* premium.js never stamps #aeo-chat today (no space-y-* body), but if it ever does, `.pm .pm-stagger > *`
(0,2,0) would hide the pre-rendered bubbles. (0,3,0) wins; rich-aeo.js also strips the classes. */
.pm .rd-aeo-chat.pm-stagger > * { opacity: 1; transform: none; transition: none; }
.rd-aeo-chat > .rd-aeo-msg { flex: none; }
@keyframes rd-aeo-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pm .rd-aeo-chat > .rd-aeo-msg { animation: rd-aeo-rise .45s cubic-bezier(.16, 1, .3, 1) both; }
/* -- phone chrome: dots + name | chip | toggle ----------------------------------------------- */
.rd-aeo-chrome { justify-content: flex-start; gap: .5rem; }
.rd-aeo-chrome > .rd-aeo-chrome__id { flex: none; }
.rd-aeo-chrome > .rd-aeo-chip { flex: 0 1 auto; min-width: 0; margin-left: auto; text-align: center; }
.rd-aeo-toggle {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 2.75rem; height: 2.75rem; margin: -.5625rem 0; /* 44px target inside the row's 14px paddings: the 55px chrome does not grow */
border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: transparent; color: #fff;
padding: 0; cursor: pointer; touch-action: manipulation; transition: border-color .2s;
}
.rd-aeo-toggle:hover { border-color: rgba(241, 210, 124, .7); }
.rd-aeo-toggle:focus-visible { border-radius: 999px; } /* outline itself comes from `main button:focus-visible` (2px #dcb13a, offset 3px) */
.rd-aeo-toggle .ico-play { display: none; }
.rd-aeo-toggle[aria-pressed="true"] .ico-pause { display: none; }
.rd-aeo-toggle[aria-pressed="true"] .ico-play { display: inline; }
@media (max-width: 479px) { /* 292px phone: name (82) + chip (~120) + toggle (44) must share 268px */
.rd-aeo-chrome { padding-left: .75rem; padding-right: .75rem; gap: .375rem; }
.rd-aeo-chrome__id > span.rounded-full { display: none; }
.rd-aeo-chrome__id > span.ml-2 { margin-left: 0; white-space: nowrap; }
.rd-aeo-chrome > .rd-aeo-chip { padding-left: .5rem; padding-right: .5rem; white-space: nowrap; }
}
/* -- bullets: the one the current answer speaks to lights up (>=1024, html.pm only) ---------- */
.rd-aeo-li { position: relative; }
.rd-aeo-li::before {
content: ""; position: absolute; left: -.75rem; top: .55rem; bottom: .55rem; width: 2px;
background: var(--gold-2, #f1d27c); opacity: 0; transition: opacity .3s cubic-bezier(.16, 1, .3, 1);
}
.rd-aeo-li.rd-lit::before { opacity: 1; }
/* The text span otherwise computes --color-lyd-dark-body (#b8c9d1) via premium.css (0,4,3); this is (0,4,4). */
.luxe main section[data-section="aeo"] li.rd-aeo-li.rd-lit > span:last-child { color: #fff; }
.pm .rd-aeo-li.rd-lit > span:first-child { animation: pm-pop .5s cubic-bezier(.16, 1, .3, 1) both; }
@media (max-width: 1023px) { .rd-aeo-li::before { display: none; } }
/* -- R6 copy button on the query box -------------------------------------------------------- */
.rd-aeo-q { position: relative; }
.rd-aeo-copy {
margin-left: auto; flex: none; align-self: center; display: inline-flex; align-items: center; gap: .4rem;
min-height: 44px; min-width: 44px; padding: 0 .85rem;
border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: transparent; color: #fff;
font-family: inherit; font-size: .75rem; font-weight: 600; line-height: 1; letter-spacing: .02em;
cursor: pointer; touch-action: manipulation; transition: border-color .2s;
}
.rd-aeo-copy:hover, .rd-aeo-copy.is-done { border-color: var(--gold-2, #f1d27c); }
.rd-aeo-copy:focus-visible { border-radius: 999px; }
.rd-aeo-copy__ico, .rd-aeo-copy__tick { width: 14px; height: 14px; flex: none; }
.rd-aeo-copy__tick { display: none; color: var(--gold-2, #f1d27c); transform: scale(0); }
.rd-aeo-copy.is-done .rd-aeo-copy__ico { display: none; }
.rd-aeo-copy.is-done .rd-aeo-copy__tick { display: block; transform: scale(1); }
.pm .rd-aeo-copy__tick { transition: transform .18s cubic-bezier(.16, 1, .3, 1); }
/* white on the composite box (plum + 7% + 7% white = #483966): 10.2:1; gold-2 tick: 6.97:1.
The query box carries bg-white, so premium.css (0,4,3) recolours every span inside it to #b8c9d1;
the label and tick rules below are (0,5,2) and inherit the button's own #fff / set gold-2. */
.luxe main section[data-section="aeo"] .rd-aeo-copy { color: #fff; }
.luxe main section[data-section="aeo"] .rd-aeo-q .rd-aeo-copy .rd-aeo-copy__label { color: inherit; }
.luxe main section[data-section="aeo"] .rd-aeo-q .rd-aeo-copy .rd-aeo-copy__tick { color: var(--gold-2, #f1d27c); }
@media (max-width: 479px) {
.rd-aeo-copy { padding: 0; width: 44px; }
.rd-aeo-copy__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* ==== rich-closing-faq.css ==== */
/* ==== rich-closing-faq: contact-card clock + document tile + colophon (R10), FAQ companion (R11) ====
Depends on rich-00-primitives.css (.rd-mask/.rd-mask__in, rd-fade). Motion only under html.pm;
under html.pm-static everything below is a static design. No gradients, no new gold fills:
gold appears as hairline, numeral, dot ring and text only. Every new rule is static (the
home page's drawn-hairline budget is spent elsewhere). */
/* ---------- R10 hours pill (all pages; inserted by rich-closing-faq.js after the hours line) ----------
(0,4,4) beats premium.css's deep-band span recolour (0,4,3) and premium-photo's `.bg-white[class*="p-"]
:is(p,span,div)` (0,3,4) so the pill and its text keep the line's own colour (#e4ebee on the photo
band, the deep-body tint elsewhere). */
.luxe main section.closing-band .contact-card :is(p, li) > span.rd-card-hours, main section.closing-band .contact-card :is(p, li) > span.rd-card-hours {
display: inline-flex; align-items: center; gap: 0.45rem; margin-left: 0.6rem; padding: 0.2rem 0.65rem; vertical-align: middle;
border: 1px solid currentColor; border-radius: 999px; font-size: 0.8125rem; line-height: 1.3; font-weight: 500; letter-spacing: 0.005em; color: inherit; white-space: nowrap;
}
.luxe main section.closing-band .contact-card .rd-card-hours .rd-card-hours__t, main section.closing-band .contact-card .rd-card-hours .rd-card-hours__t { color: inherit; }
.luxe main section.closing-band .contact-card .rd-card-hours__dot, main section.closing-band .contact-card .rd-card-hours__dot { display: inline-block; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; }
.luxe main section.closing-band .contact-card .rd-card-hours[data-state="open"] .rd-card-hours__dot, main section.closing-band .contact-card .rd-card-hours[data-state="open"] .rd-card-hours__dot { background: #7fd3b0; border-color: #7fd3b0; }
@media (max-width: 480px) {
.luxe main section.closing-band .contact-card :is(p, li) > span.rd-card-hours, main section.closing-band .contact-card :is(p, li) > span.rd-card-hours { display: flex; width: max-content; max-width: 100%; margin: 0.5rem 0 0; white-space: normal; }
}
/* motion: the pill fades in once; an open dot pulses three times, then rests. rd-breathe's 1.5%
scale is invisible on an 8px dot, so the dot has its own namespaced transform/opacity pulse. */
@keyframes rd-closing-faq-dot { 0%, 100% { transform: none; opacity: 1; } 50% { transform: scale(1.4); opacity: 0.7; } }
.pm main section.closing-band .contact-card .rd-card-hours { animation: rd-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.pm main section.closing-band .contact-card .rd-card-hours[data-state="open"] .rd-card-hours__dot { animation: rd-closing-faq-dot 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s 3 both; }
/* ---------- R10 document tile (/ only) ----------
The .cap-link keeps its href; its children become a cover thumbnail plus two lines. The tile sits
inside the yellow-turned-dark left block, whose premium-photo rule (0,3,4) greys spans: (0,4,x)+. */
main .cap-link.rd-card-doc, .luxe main .cap-link.rd-card-doc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin: 1.35rem 0 0; padding: 0.25rem 0; max-width: 100%; color: #fff; text-decoration: none; font-size: 0.875rem; line-height: 1.35; border-radius: 6px; }
main .cap-link.rd-card-doc:hover, .luxe main .cap-link.rd-card-doc:hover { text-decoration: none; }
main .cap-link.rd-card-doc:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; }
main .cap-link.rd-card-doc .rd-card-doc__thumb { position: relative; display: block; flex: none; width: 2.6rem; height: 3.5rem; overflow: hidden; border-radius: 2px; background: #f3f1ec; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6); }
main .cap-link.rd-card-doc .rd-card-doc__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* folded corner drawn with two borders (no gradient): the petrol "cut" above, the gold fold below */
main .cap-link.rd-card-doc .rd-card-doc__thumb::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0.7rem 0.7rem 0; border-color: transparent #0f2e38 #f1d27c transparent; }
main .cap-link.rd-card-doc .rd-card-doc__meta { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 12rem; min-width: 0; }
main section.closing-band .cap-link.rd-card-doc .rd-card-doc__meta strong, .luxe main section.closing-band .cap-link.rd-card-doc .rd-card-doc__meta strong { color: #f1d27c; font-size: 0.875rem; font-weight: 600; text-underline-offset: 3px; }
main section.closing-band .cap-link.rd-card-doc .rd-card-doc__meta .rd-card-doc__s, .luxe main section.closing-band .cap-link.rd-card-doc .rd-card-doc__meta .rd-card-doc__s { display: block; color: #dfe7ea; font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums; }
main .cap-link.rd-card-doc:hover .rd-card-doc__meta strong, main .cap-link.rd-card-doc:focus-visible .rd-card-doc__meta strong { text-decoration: underline; }
.pm main .cap-link.rd-card-doc .rd-card-doc__thumb { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.pm main .cap-link.rd-card-doc:hover .rd-card-doc__thumb, .pm main .cap-link.rd-card-doc:focus-visible .rd-card-doc__thumb { transform: translateY(-3px) rotate(-1.5deg); }
/* ---------- R10 colophon (/ only): the phone number as a block Manrope numeral between two hairlines ----------
(0,5,3) beats luxe's tel colour rule (0,4,3) and zz-uxpro's inline-block/negative-margin hit-area rule (0,3,1). */
.luxe main section.closing-band .contact-card.rd-card-colophon a[href^="tel:"], main section.closing-band .contact-card.rd-card-colophon a[href^="tel:"] {
display: block; margin: 1.25rem 0 0; padding: 1rem 0; color: #f1d27c; text-decoration: none;
font-family: "Manrope", var(--font-display, "Manrope"), system-ui, sans-serif; font-weight: 800; font-size: clamp(2.1rem, 2.9vw, 2.6rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
border-top: 1px solid rgba(241, 210, 124, 0.35); border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0;
}
.luxe main section.closing-band .contact-card.rd-card-colophon a[href^="tel:"]:hover { color: #fff; }
.luxe main section.closing-band .contact-card.rd-card-colophon a[href^="tel:"]:focus-visible, main section.closing-band .contact-card.rd-card-colophon a[href^="tel:"]:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; border-radius: 4px; }
/* the wrapped numeral inherits the gold; premium-photo's span rule (0,3,4) would otherwise grey it */
.luxe main section.closing-band .contact-card.rd-card-colophon a[href^="tel:"] :is(.rd-mask, .rd-mask__in), main section.closing-band .contact-card.rd-card-colophon a[href^="tel:"] :is(.rd-mask, .rd-mask__in) { color: inherit; }
.luxe main section.closing-band .contact-card.rd-card-colophon a[href^="tel:"] .rd-mask { display: block; padding-bottom: 0.08em; margin-bottom: -0.08em; }
/* the tel's own top hairline takes over from the Astro separator above it */
.luxe main section.closing-band .contact-card.rd-card-colophon [role="separator"], main section.closing-band .contact-card.rd-card-colophon [role="separator"] { display: none; }
/* ruled icon rows */
main section.closing-band .contact-card.rd-card-colophon .contact-line, .luxe main section.closing-band .contact-card.rd-card-colophon .contact-line { margin-top: 0; padding: 0.55rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
main section.closing-band .contact-card.rd-card-colophon .contact-line.mt-4 { margin-top: 0.5rem; }
main section.closing-band .contact-card.rd-card-colophon .contact-line:last-of-type { border-bottom: 0; }
main section.closing-band .contact-card.rd-card-colophon .contact-line > p { margin-top: 0; }
main section.closing-band .contact-card.rd-card-colophon .contact-social { margin-top: 1.1rem; }
/* motion: the numeral rises once when the band enters (primitive .rd-mask handles the transform) */
.pm main section.closing-band .contact-card.rd-card-colophon .rd-mask__in { transition-duration: 0.8s; transition-delay: 0.15s; }
/* ---------- R11 FAQ numerals (/ only) ----------
(0,3,2) beats compact's `main .faq-acc summary h3` (0,2,2); compact keeps its +/x on summary::after and
its space-between flex, so the numeral takes a fixed 2rem gutter and the h3 grows to fill the row. */
main [data-section="faq"] .faq-acc summary { position: relative; }
main [data-section="faq"] .faq-acc summary h3 { flex: 1 1 auto; min-width: 0; }
main [data-section="faq"] .faq-acc summary .rd-faq-idx { flex: none; width: 2rem; font-family: "Manrope", var(--font-display, "Manrope"), sans-serif; font-weight: 800; font-size: 0.8rem; line-height: 1; letter-spacing: 0.14em; color: var(--gold-3, #7d5f14); transition: color 0.3s; }
main [data-section="faq"] .faq-acc[open] summary .rd-faq-idx { color: var(--ink-2, #14262d); }
/* the open question is underlined by a static 1px gold rule from the text gutter to the right edge (::before; compact owns ::after) */
main [data-section="faq"] .faq-acc[open] > summary::before { content: ""; position: absolute; left: 2rem; right: 0; bottom: -0.4rem; height: 1px; background: var(--gold, #dcb13a); pointer-events: none; }
main [data-section="faq"] .faq-acc > p { margin-top: 1.1rem !important; }
.pm main [data-section="faq"] .faq-acc[open] > p { animation: rd-fade 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
/* ---------- R11 shared companion typography (aside items and in-answer companions) ---------- */
main [data-section="faq"] .rd-faq-k { display: block; margin-bottom: 0.45rem; font-family: var(--font-sans, Inter, system-ui, sans-serif); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-3, #7d5f14); }
main [data-section="faq"] .rd-faq-line { font-family: var(--font-display, "Manrope"), system-ui, sans-serif; font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--ink-2, #14262d); text-wrap: balance; }
main [data-section="faq"] a.rd-faq-link { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; margin-top: 0.35rem; padding: 0.5rem 0; font-size: 0.9375rem; font-weight: 600; color: var(--gold-3, #7d5f14); text-decoration: underline; text-decoration-color: rgba(125, 95, 20, 0.45); text-underline-offset: 3px; border-radius: 4px; }
main [data-section="faq"] a.rd-faq-link:hover { text-decoration-color: currentColor; }
main [data-section="faq"] a.rd-faq-link:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; }
main [data-section="faq"] a.rd-faq-link > span[aria-hidden] { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.pm main [data-section="faq"] a.rd-faq-link:hover > span[aria-hidden] { transform: translate(2px, -2px); }
/* aside under "Read all FAQs" (>=1024) */
main [data-section="faq"] .rd-faq-aside { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 2px solid var(--gold, #dcb13a); max-width: 22rem; }
main [data-section="faq"] .rd-faq-aside__item { display: none; }
main [data-section="faq"] .rd-faq-aside__item[data-active] { display: block; }
.pm main [data-section="faq"] .rd-faq-aside__item[data-active] { animation: rd-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
@media (max-width: 1023px) { main [data-section="faq"] .rd-faq-aside { display: none; } }
/* companion under each open answer (<1024) */
main [data-section="faq"] .rd-faq-comp { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid rgba(20, 38, 45, 0.1); }
/* closed answers hide their companion outright (Chromium keeps closed details content laid out via content-visibility) */
main [data-section="faq"] .faq-acc:not([open]) > .rd-faq-comp { display: none; }
main [data-section="faq"] .rd-faq-comp .rd-faq-line { font-size: 0.9375rem; line-height: 1.4; }
main [data-section="faq"] .rd-faq-comp a.rd-faq-link { font-size: 0.875rem; }
@media (min-width: 1024px) { main [data-section="faq"] .rd-faq-comp { display: none; } }
/* ==== rich-gaps-whynow.css ==== */
/* ==== rich-gaps-whynow.css ==== R3 gap disclosures (leaks ledger) + R4 decade rule (why-now band), home only.
Flat bands only. Gold only as underline, left rule, hairline, tick and numeral. Motion under html.pm only. */
/* ---------------------------------------------------------------- R3: each gap answers back */
/* the 44px foot replaces compact's bottom padding: compact is (0,2,1)!important, these are (0,3,1)/(0,4,2)!important */
main .leaks-grid .leaks__slide.rd-gap-row, html.luxe main .leaks-grid .leaks__slide.rd-gap-row { padding-bottom: 0 !important; }
main .rd-gap-btn { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: .5rem; min-height: 44px; margin: .25rem 0 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; text-align: left; font: 600 .6875rem/1 var(--font-sans, Inter, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2, #14262d); }
main .rd-gap-btn__t { color: inherit; text-decoration: underline; text-decoration-color: var(--gold, #dcb13a); text-decoration-thickness: 1px; text-underline-offset: 4px; }
main .rd-gap-btn:hover, main .rd-gap-btn:hover .rd-gap-btn__t { color: var(--color-lyd-deep, #0f2e38); }
main .rd-gap-btn:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; border-radius: 2px; }
main .rd-gap-chev { flex: none; color: currentColor; }
main .rd-gap-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; margin: 0; }
main .rd-gap-panel__in { min-height: 0; overflow: hidden; }
main .rd-gap-panel p { margin: 0 0 1rem; padding-left: .75rem; border-left: 2px solid var(--gold, #dcb13a); font-family: var(--font-sans, Inter, system-ui, sans-serif); font-size: .9375rem; line-height: 1.5; color: var(--ink-2, #14262d); max-width: none; }
main .rd-gap-panel p:not(:last-child) { margin-bottom: .6rem; }
main .rd-gap-row.is-open .rd-gap-panel { grid-template-rows: 1fr; visibility: visible; }
main .rd-gap-row.is-open .rd-gap-chev { transform: rotate(180deg); }
/* open row: numeral drops its section hue for petrol. Out-ranks premium-color's per-row (0,13,0)!important and motion's :hover (0,4,1)!important. */
main .leaks-grid .leaks__slide.rd-gap-row.is-open .leaks__numeral:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j),
html.luxe main .leaks-grid .leaks__slide.rd-gap-row.is-open .leaks__numeral:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: var(--color-lyd-deep, #0f2e38) !important; }
/* motion: disclosure only, no :hover opens anything */
html.pm main .rd-gap-panel { transition: grid-template-rows .45s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .45s; }
html.pm main .rd-gap-row.is-open .rd-gap-panel { transition-delay: 0s; }
html.pm main .rd-gap-chev { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
html.pm main .leaks__numeral { transition: color .3s; }
/* no JS: every answer simply shows, the buttons go */
html:not(.js) main .rd-gap-panel { grid-template-rows: 1fr; visibility: visible; }
html:not(.js) main .rd-gap-btn { display: none; }
/* ---------------------------------------------------------------- R4: the decade rule */
/* --rd-pt is the padding above the rule; the tick list is pinned to the rule's own box with it, so labels stay
anchored to the rule whatever the padding split. Label offsets/heights are budgeted per breakpoint below. */
main .rd-gap-decade { --rd-pt: 1.9rem; position: relative; margin: 1rem 0 0; padding: var(--rd-pt) 0 2.9rem; }
main .rd-gap-decade__rule { position: relative; height: 2px; background: rgba(255, 255, 255, .16); }
main .rd-gap-decade__fill { position: absolute; inset: 0; background: var(--gold-2, #f1d27c); transform-origin: left center; } /* drawn hairline 3 of 3 on the home page */
main .rd-gap-decade__ticks { position: absolute; left: 0; right: 0; top: var(--rd-pt); height: 2px; margin: 0; padding: 0; list-style: none; }
main .rd-gap-decade__tick { position: absolute; left: calc(var(--p, 0) * 100%); max-width: 14rem; }
main .rd-gap-decade__tick.is-above { bottom: calc(100% + .6rem); }
main .rd-gap-decade__tick.is-below { top: calc(100% + .6rem); }
main .rd-gap-decade__tick.is-end { left: auto; right: 0; text-align: right; }
main .rd-gap-decade__tick::before { content: ""; position: absolute; left: 0; width: 1px; height: .45rem; background: var(--gold-2, #f1d27c); }
main .rd-gap-decade__tick.is-above::before { bottom: -.6rem; }
main .rd-gap-decade__tick.is-below::before { top: -.6rem; }
main .rd-gap-decade__tick.is-end::before { left: auto; right: 0; }
/* explicit colours: luxe/photo recolour p and li, not b/span; hand-checked over the 0.72 scrim end (>=4.9:1 on a white photo pixel) */
main .rd-gap-decade__tick b { display: block; font: 800 .875rem/1.1 var(--font-display, Manrope, system-ui, sans-serif); letter-spacing: -.01em; color: var(--gold-2, #f1d27c); font-variant-numeric: tabular-nums; }
main .rd-gap-decade__tick span { display: block; margin-top: .15rem; font: 500 .6875rem/1.35 var(--font-sans, Inter, system-ui, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: #dfe7ea; }
main .rd-gap-decade__now { position: absolute; left: calc(var(--now, 0) * 100%); top: 50%; display: grid; justify-items: center; transform: translate(-50%, -7px); white-space: nowrap; }
main .rd-gap-decade__now i { display: block; width: 10px; height: 10px; box-sizing: content-box; border: 2px solid var(--gold-2, #f1d27c); border-radius: 50%; background: var(--color-lyd-deep-800, #0a2129); }
main .rd-gap-decade__now b { margin-top: .4rem; font: 800 .6875rem/1.2 var(--font-display, Manrope, system-ui, sans-serif); letter-spacing: .02em; color: var(--gold-2, #f1d27c); }
main .rd-gap-decade__now small { font: 500 .625rem/1.3 var(--font-sans, Inter, system-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #dfe7ea; }
main .rd-gap-decade__now.is-quiet :is(b, small) { display: none; } /* within .12 of a dated tick, or its label would touch one: ring only */
/* >=900: the figure shares the Source row (column 2, bottom-aligned). Padding above the rule clears the market cards,
padding below keeps the 1 Jul label off the pull quote's gold rule; from 1280 that label fits on one line. */
@media (min-width: 900px) {
main [data-section="whynow"] > .band-inner, html.luxe main [data-section="whynow"] > .band-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); column-gap: 3rem; }
main [data-section="whynow"] > .band-inner > * { grid-column: 1 / -1; }
main [data-section="whynow"] > .band-inner > .rd-gap-source { grid-column: 1; max-width: none; }
main [data-section="whynow"] > .band-inner > .rd-gap-decade { --rd-pt: 3.6rem; grid-column: 2; align-self: end; margin: 0; padding: var(--rd-pt) 0 3.5rem; }
main .rd-gap-decade__tick b { font-size: .95rem; }
main .rd-gap-decade__tick.is-below { max-width: 28rem; }
}
@media (min-width: 900px) and (max-width: 1279px) {
/* the Source paragraph runs 4+ lines here, so the row is tall enough to lift the rule further off the third card */
main [data-section="whynow"] > .band-inner > .rd-gap-decade { --rd-pt: 5rem; }
}
@media (min-width: 1280px) {
/* the 1 Jul label is one line here, so less is needed below; the spare goes above, off the third card's corner */
main [data-section="whynow"] > .band-inner > .rd-gap-decade { --rd-pt: 3.85rem; padding-bottom: 2.25rem; }
}
/* motion (.pm): fill draws left to right, ticks settle in date order, ring last. Keyed on premium.js's section.pm-in;
rich-gaps-whynow.js holds the draw (--wait) until the figure itself is half in view, then releases it once. */
html.pm main .rd-gap-decade__fill { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.16, 1, .3, 1) .2s; }
html.pm main .rd-gap-decade__tick { opacity: 0; transform: translateY(6px); transition: opacity .6s ease calc(.5s + var(--p, 0) * .7s), transform .6s cubic-bezier(.16, 1, .3, 1) calc(.5s + var(--p, 0) * .7s); }
html.pm main .rd-gap-decade__now { opacity: 0; transform: translate(-50%, -7px) scale(.6); transition: opacity .5s ease 1.5s, transform .5s cubic-bezier(.16, 1, .3, 1) 1.5s; }
html.pm main section.pm-in .rd-gap-decade:not(.rd-gap-decade--wait) .rd-gap-decade__fill { transform: scaleX(1); }
html.pm main section.pm-in .rd-gap-decade:not(.rd-gap-decade--wait) .rd-gap-decade__tick { opacity: 1; transform: none; }
html.pm main section.pm-in .rd-gap-decade:not(.rd-gap-decade--wait) .rd-gap-decade__now { opacity: 1; transform: translate(-50%, -7px); }
/* ==== rich-hero.css ==== */
/* rich-hero: hero figures arrive as masked plates; the credential bar's hairline draws and its four
items settle after them. Motion only under html.pm (premium.js withholds it for reduced motion).
Consumes .rd-mask / .rd-mask__in from rich-00-primitives.css - nothing redefined here. */
/* ---- R1 numerals: the four hero elements that carried data-count-to now carry rd-hero-num (the Astro
bundle would otherwise rewrite their text and count them). These re-declare, verbatim, the luxe rules
that were keyed on the attribute (premium-luxe.css lines 20, 88 and 190) so nothing looks different.
The 94% div is also .text-2xl, which luxe sizes at 1.9rem after the 2.75rem rule - kept by exclusion. ---- */
.luxe main .rd-hero-num { font-family: "Manrope", var(--font-display), sans-serif; font-weight: 800; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.luxe main [data-elevate="hero"] .rd-hero-num:not(.text-2xl) { color: var(--gold-2); font-size: 2.75rem; line-height: 1; font-weight: 800; letter-spacing: -0.04em; }
.luxe main [data-elevate="hero"] .rd-hero-num { color: var(--gold-2) !important; }
/* ---- R1 figures: delay ladder per plate; card gets .pm-in at 80ms -> rises at .68 / .79 / .90s ---- */
.rd-hero-fig { --rd-d: calc(.6s + var(--i, 0) * 110ms); }
/* (0,3,1) beats luxe's `.luxe main [data-elevate="hero"] *` (0,2,1) which paints every descendant #fff -
both spans inherit the parent's gold so the figures and the arrow keep --gold-2 */
.luxe main [data-elevate="hero"] .rd-mask, .luxe main [data-elevate="hero"] .rd-mask .rd-mask__in { color: inherit; }
/* ---- R1 trust row: the border becomes a drawn hairline (one of three on the home page) ---- */
.pm main > section:first-of-type .rd-hero-trust { position: relative; border-top-color: transparent; }
.pm main > section:first-of-type .rd-hero-trust::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, .14); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.16, 1, .3, 1) var(--rd-t0, 1.6s); }
.pm main > section:first-of-type .rd-hero-trust.rd-in::before { transform: none; }
/* hidden state snaps, revealed state carries the transition (see rich-00-primitives.css for why) */
.pm main > section:first-of-type .rd-hero-trust > * { opacity: 0; transform: translateY(8px); transition: none; }
.pm main > section:first-of-type .rd-hero-trust.rd-in > * { opacity: 1; transform: none; transition: opacity .5s ease, transform .7s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--rd-t0, 1.6s) + .15s + var(--i, 0) * 90ms); }
/* premium.css keeps the Sharktech mark at .85 with (0,3,3): the hidden rule must out-rank it and the settle must land at .85, not 1 */
.pm main > section:first-of-type .rd-hero-trust > img[src*="sharktech"] { opacity: 0; }
.pm main > section:first-of-type .rd-hero-trust.rd-in > img[src*="sharktech"] { opacity: .85; }
/* ---- R1 ABN link: 44px target inside an unchanged 18px line (equal negative block margins) ---- */
main > section:first-of-type .rd-hero-abn { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; margin-block: -13px; font-size: .75rem; line-height: 1.5; color: rgba(255, 255, 255, .85); text-decoration: underline 1px rgba(241, 210, 124, .45); text-underline-offset: .3em; }
main > section:first-of-type .rd-hero-abn > span { color: inherit; }
main > section:first-of-type .rd-hero-abn > [aria-hidden] { letter-spacing: 0; }
main > section:first-of-type .rd-hero-abn:hover, main > section:first-of-type .rd-hero-abn:focus-visible { color: #f1d27c; text-decoration-color: #f1d27c; }
main > section:first-of-type .rd-hero-abn:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; }
/* ---- R1-launcher: under 768px the GHL host waits while the 263,145 plate plays over its slot.
Host-only properties - opacity/visibility govern the whole shadow tree including its fixed
launcher. Never transform/position/inset/contain the host: a transformed host would become the
containing block for the fixed launcher and the full-height chat window. ---- */
@media (max-width: 767px) {
chat-widget { transition: opacity .6s ease; }
html.rd-hero-wait chat-widget { opacity: 0; visibility: hidden; }
}
html.pm-static chat-widget { transition: none; }
/* ==== rich-photos.css ==== */
/* rich-photos: living photographs (home). See rich-photos.cjs for intent. */
/* ---- R2-layer: photo bands paint a lazy ![]()
layer instead of a CSS background ----
(0,4,2)!important beats premium-photo.css's (0,3,2)!important; background-color #0a2129 stays. */
main section.band-photo.rd-has-photo, .luxe main section[data-band="deep"].band-photo.rd-has-photo, .luxe main section.closing-band.band-photo.rd-has-photo { background-image: none !important; }
/* the section already has position:relative; overflow:hidden; isolation:isolate (premium-motion.css, ungated),
so z-index:-1 sits above the petrol background-colour and below the z-0 watermark, z-1 grain and z-2 .band-inner */
main section.band-photo .rd-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* the compiled bundle stamps data-wipe on main images and parks them at clip-path: inset(0 100% 0 0) until its own
reveal fires, and rounds every main img to var(--soft-md); neither belongs on a full-bleed background layer
(premium-photo.css does the same clip-path reset for .hscroll__panel img). !important: the bundle's img rule is (0,4,2). */
main section.band-photo .rd-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; clip-path: none !important; border-radius: 0 !important; transition: none !important; }
/* scrim copied verbatim from premium-photo.css's band rule; never redrawn */
main section.band-photo .rd-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6, 22, 28, 0.94) 0%, rgba(6, 22, 28, 0.86) 45%, rgba(8, 28, 35, 0.72) 100%); }
/* ---- R2-drift: scroll-linked drift on the six care photographs ----
While the photograph is anywhere in the viewport it travels 4% above -> 4% below centre, linearly with scroll,
held at scale 1.1 so no edge shows. Animations beat the .pm img.pm-photo 1.06->1 transition; browsers
without view() (Firefox) keep that ease and nothing else. Under 1024 the eco images keep premium.css's
transform:none !important, so eco drift exists only on desktop, by design. */
main section[data-section="eco"] .hscroll__panel .rd-photo-frame { overflow: hidden; }
@supports (animation-timeline: view()) {
/* view() attaches to the nearest ancestor SCROLL CONTAINER, and overflow:hidden creates one; every clipping box
between these images and the viewport (figure, .rd-photo, the deep section, the eco stage / panel / image
column) would otherwise become a timeline source that never scrolls, freezing the drift at 50%. overflow:clip
clips identically (radius respected, clip-margin 0) without being a scroll container. Scoped to html.pm and
this @supports block so static browsers and reduced-motion visitors see the untouched overflow:hidden. */
html.pm .rd-photo-fig, html.pm main section.band-photo .rd-photo, html.pm main section.band-photo.rd-has-photo,
html.pm main section[data-section="eco"] .hscroll__stage, html.pm main section[data-section="eco"] .hscroll__panel,
html.pm main section[data-section="eco"] .hscroll__panel .rd-photo-frame { overflow: clip; }
html.pm .rd-photo-drift { animation: rd-photo-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
@keyframes rd-photo-drift { from { transform: translate3d(0, -4%, 0) scale(1.1); } to { transform: translate3d(0, 4%, 0) scale(1.1); } }
}
@media (max-width: 767px), (prefers-reduced-data: reduce), (prefers-reduced-motion: reduce) { html.pm .rd-photo-drift { animation: none !important; } }
html.rd-savedata .rd-photo-drift { animation: none !important; }
/* ---- caption rise: "A haircut, at home." settles 8px into place 300ms after premium.js stamps pm-in on the img.
Plays once (pm-in is never removed). The second caption line never moves. Without :has the caption stays visible. */
@supports selector(:has(img)) {
html.pm .rd-photo-fig figcaption strong { opacity: 0; transform: translateY(8px); transition: opacity .6s cubic-bezier(.16, 1, .3, 1) .3s, transform .8s cubic-bezier(.16, 1, .3, 1) .3s; }
html.pm .rd-photo-fig:has(> img.pm-in) figcaption strong { opacity: 1; transform: none; }
}
/* ==== rich-proof.css ==== */
/* rich-proof: the product proves itself on /demo, /how-it-works and /features.
Motion is transform/opacity (plus colour steps), gated on html.pm; every sequence plays once per entry.
No gradients, no gold fills on controls: gold appears only as disc, tick, pip and a 4px rule. */
/* ---------- shared: Replay is a ghost button (white on the deep chrome, ink on the sky tint) ---------- */
.rd-proof-replay { min-height: 2.75rem; padding: .5rem 1rem; font-size: .8125rem; }
main .btn.rd-proof-replay:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; border-radius: 999px; }
main section[data-band="deep"] .btn.rd-proof-replay:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; }
/* deep chrome: luxe's !important ink border would vanish on petrol; keep the band's white ghost (same file order beats it) */
main .rd-proof-pipe .btn.rd-proof-replay { border: 1px solid rgba(255, 255, 255, .32) !important; color: #fff; }
main .rd-proof-pipe .btn.rd-proof-replay:hover { border-color: #fff !important; color: #fff; }
@keyframes rd-proof-pop { from { transform: scale(.85); opacity: .4; } to { transform: none; opacity: 1; } }
/* ---------- R12 /demo: the pipeline handles its sample enquiry ---------- */
main .rd-proof-pipe .pipe__chrome { flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem; }
.rd-proof-pipe .pipe__sample { margin-left: auto; }
/* pending items step back in colour only (never opacity: the pm-stagger children own that transition) */
.rd-proof-auto .pipe__auto-item { transition: color .35s; }
.rd-proof-auto .pipe__auto-item svg { transition: opacity .3s, transform .3s; }
.rd-proof-auto.is-armed .pipe__auto-item:not(.is-done) { color: var(--color-lyd-secondary); }
.rd-proof-auto.is-armed .pipe__auto-item:not(.is-done) svg { opacity: .3; transform: scale(.8); }
html.pm .rd-proof-auto .pipe__auto-item.is-done svg { animation: rd-proof-pop .5s cubic-bezier(.16, 1, .3, 1) both; }
/* the chip: a reset row keeps pm-pop from replaying; the flip pops it under its own name */
html.pm .rd-proof-pipe .rd-proof-row.is-reset .pipe__status { animation: none; }
html.pm .rd-proof-pipe .rd-proof-row.is-flip .pipe__status { animation: rd-proof-pop .5s cubic-bezier(.16, 1, .3, 1) both; }
/* premium-motion's tbody rule (.pm .pipe__table tbody.pm-stagger > tr, 0,3,2) outranks the .pm-in reset (0,3,0), so the
rows were parked 10px left for good and the frame clipped their left edge. Let them finish their slide here. */
html.pm .rd-proof-pipe .pipe__table tbody.pm-stagger.pm-in > tr { transform: none; }
/* a 4px gold rule shows on the row for a moment when it flips */
.rd-proof-row th[scope="row"] { position: relative; }
.rd-proof-row th[scope="row"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold); opacity: 0; pointer-events: none; }
html.pm .rd-proof-row.is-flip th[scope="row"]::before { animation: rd-proof-rule 1.5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes rd-proof-rule { 0%, 25% { opacity: 1; } 100% { opacity: 0; } }
/* ---------- R13 /how-it-works: the hand-off token stops honestly ---------- */
.rd-proof-handoff .handoff__gap-rule { position: relative; }
/* the token is as long as the rule, so translate percentages are rule lengths; it stops at 46% until the figure carries data-rd-shipped */
.rd-proof-token { position: absolute; inset: 0; pointer-events: none; opacity: 0; --rd-proof-stop: 46%; }
.rd-proof-handoff[data-rd-shipped] .rd-proof-token { --rd-proof-stop: 100%; }
.rd-proof-token::before, .rd-proof-token::after { content: ""; position: absolute; left: 0; top: -1px; width: .7rem; height: .7rem; border-radius: 50%; transform: translate(-50%, -50%); }
.rd-proof-token::before { background: var(--gold); }
.rd-proof-token::after { border: 2px solid var(--gold); opacity: 0; }
html.pm .rd-proof-handoff.is-run .rd-proof-token { opacity: 1; transform: translateX(var(--rd-proof-stop)); transition: transform 1.6s cubic-bezier(.16, 1, .3, 1), opacity .3s; }
html.pm .rd-proof-handoff.is-halt .rd-proof-token::after { animation: rd-proof-ring .9s ease-out 2; }
@keyframes rd-proof-ring { from { transform: translate(-50%, -50%) scale(1); opacity: .7; } to { transform: translate(-50%, -50%) scale(2.8); opacity: 0; } }
@media (max-width: 767px) {
/* the bundle turns the rule vertical (border-left) here; the token travels down it */
.rd-proof-token::before, .rd-proof-token::after { left: -1px; top: 0; }
html.pm .rd-proof-handoff.is-run .rd-proof-token { transform: translateY(var(--rd-proof-stop)); }
}
.rd-proof-step.is-lit .handoff__tick { background: var(--gold); color: var(--ink-2); }
html.pm .rd-proof-step.is-lit .handoff__tick { animation: rd-proof-pop .5s cubic-bezier(.16, 1, .3, 1) both; }
.rd-proof-handoff .handoff__gap-chip { transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.rd-proof-handoff.is-halt .handoff__gap-chip { outline: 1px solid var(--gold-ink); outline-offset: 2px; transform: translateY(-2px); }
.rd-proof-handoff .handoff__gap-note { transition: color .4s; }
.rd-proof-handoff.is-halt .handoff__gap-note { color: var(--color-lyd-ink); }
/* ---------- R14 /features: the referral race, in speed order ---------- */
.rd-proof-line { position: relative; height: 1px; background: rgba(20, 38, 45, .18); }
.rd-proof-pip { position: absolute; inset: 0; }
.rd-proof-pip::before { content: ""; position: absolute; left: 0; top: 50%; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); transform: translate(-50%, -50%); }
.rd-proof-race.is-play .rd-proof-pip { transform: translateX(calc(100% - .5rem)); transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
/* outcomes hide by opacity only, so every row keeps its height and its text stays in the accessibility tree */
.rd-proof-race.is-arm .rd-proof-out { opacity: 0; transform: translateX(6px); }
.rd-proof-race.is-play .rd-proof-out { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.16, 1, .3, 1) calc(.7s + var(--o, 0) * 650ms), transform .5s cubic-bezier(.16, 1, .3, 1) calc(.7s + var(--o, 0) * 650ms); }
.rd-proof-race:not(.is-play) :is(.rd-proof-out, .rd-proof-pip) { transition: none; }
/* the winning row's pulse moves to a pseudo: luxe's !important shadow on the row blocks pm-win there */
html.pm section.pm-in .rd-proof-race .race-win { animation: none; }
.rd-proof-race .race-win { position: relative; }
.rd-proof-race .race-win::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
html.pm .rd-proof-race.is-play .race-win::after { animation: rd-proof-win 1.4s ease-out .7s both; }
@keyframes rd-proof-win { 0% { box-shadow: 0 0 0 0 rgba(220, 177, 58, .55); opacity: 1; } 100% { box-shadow: 0 0 0 18px rgba(220, 177, 58, 0); opacity: 1; } }
.rd-proof-replay--race { margin-top: .75rem; min-height: 2.75rem; }
@media (prefers-reduced-motion: reduce) {
/* on-demand Replay still steps the states; nothing slides or scales */
.rd-proof-auto .pipe__auto-item svg, .rd-proof-handoff .handoff__gap-chip { transition: none; }
.rd-proof-auto.is-armed .pipe__auto-item:not(.is-done) svg { transform: none; }
.rd-proof-race.is-arm .rd-proof-out { transform: none; }
.rd-proof-race.is-play .rd-proof-out { transition: opacity .3s calc(.7s + var(--o, 0) * 650ms); }
.rd-proof-race.is-play .rd-proof-pip { transition: none; }
}
/* ==== rich-tiers.css ==== */
/* rich-tiers: pricing ladder (R7), estimator receipt + phone bar (R8), compare-table spotlight (R9).
Scope: main :is([data-section="pricing"], #plans) for the tiers. Colours key on html.luxe (the band is
data-band="cream" in HTML and swapped to deep by premium.js only under .luxe); the cream/no-JS state gets
gold-ink text and ink hairlines. Motion behind html.pm only; transform/opacity; no gradients. */
/* ---------- R7: display numerals ---------- */
main :is([data-section="pricing"], #plans) .rd-tier-price { flex-wrap: wrap; align-items: baseline; }
main :is([data-section="pricing"], #plans) .rd-tier-num {
font-family: "Manrope", var(--font-display), sans-serif; font-weight: 800;
font-size: clamp(2.6rem, 3.2vw, 3.25rem) !important; line-height: 0.95; letter-spacing: -0.045em; font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* /pricing: the figure is a "$" text node plus span.price (" 220 ", written by the inline billing script);
as flex items the span's edge whitespace collapses, so it reads "$220" without touching its textContent */
main #plans .rd-tier-num .rd-mask__in { display: inline-flex; align-items: baseline; }
main :is([data-section="pricing"], #plans) .rd-tier-unit { font-size: 0.7rem !important; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-lyd-gold-ink); }
html.luxe main :is([data-section="pricing"], #plans) [data-slot="card"] .rd-tier-num { color: var(--gold-2, #f1d27c) !important; }
html.luxe main :is([data-section="pricing"], #plans) [data-slot="card"] .rd-tier-unit { color: var(--gold-2, #f1d27c) !important; }
/* the "$" and the comma of $1,450 must clear the mask (line-height .95 leaves ~.22em below the baseline, plus
this .1em); any more and the tops of the glyphs peek out below the mask while translated 112% */
main :is([data-section="pricing"], #plans) .rd-tier-price .rd-mask { padding-bottom: 0.1em; margin-bottom: -0.1em; }
/* the unit follows its figure in rather than floating alone while the plate rises */
.pm main :is([data-section="pricing"], #plans) [data-slot="card"] .rd-tier-unit { opacity: 0; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 120ms + 0.7s); }
.pm main :is([data-section="pricing"], #plans) [data-slot="card"].pm-in .rd-tier-unit,
.pm main :is([data-section="pricing"], #plans) .pm-stagger.pm-in > [data-slot="card"] .rd-tier-unit { opacity: 1; }
/* beats luxe's [data-slot="card"] :is(span) recolour (0,4,3): the masked figure inherits the numeral colour */
.luxe main :is([data-section="pricing"], #plans) [data-slot="card"] .rd-mask,
.luxe main :is([data-section="pricing"], #plans) [data-slot="card"] .rd-mask .rd-mask__in { color: inherit; }
/* reveal: each figure rises after its card, 120ms apart (--i inherits from the card's inline style) */
.pm .pm-stagger.pm-in > [data-slot="card"] .rd-mask__in { transition-delay: calc(var(--i, 0) * 120ms + 0.25s); }
/* ---------- R7: ledger rules (height-neutral margin-for-padding swap) ---------- */
main :is([data-section="pricing"], #plans) .rd-tier-ledger > li { margin: 0 !important; }
/* the 1px rule is taken out of the padding so the list keeps exactly the height space-y gave it */
main [data-section="pricing"] .rd-tier-ledger > li + li { padding-top: calc(0.625rem - 1px); border-top: 1px solid rgba(20, 38, 45, 0.08); }
main #plans .rd-tier-ledger > li + li { padding-top: calc(0.75rem - 1px); border-top: 1px solid rgba(20, 38, 45, 0.08); }
.luxe main :is([data-section="pricing"], #plans) .rd-tier-ledger > li + li { border-top-color: rgba(255, 255, 255, 0.08); }
/* ---------- R7: the ladder (>=1024, pm or pm-static) ---------- */
main :is([data-section="pricing"], #plans) .rd-tier-ladder-host { position: relative; }
main :is([data-section="pricing"], #plans) .rd-tier-ladder { position: absolute; inset: 0; pointer-events: none; display: none; }
@media (min-width: 1024px) {
html.pm main :is([data-section="pricing"], #plans) .rd-tier-ladder,
html.pm-static main :is([data-section="pricing"], #plans) .rd-tier-ladder { display: block; }
}
main :is([data-section="pricing"], #plans) .rd-tier-ladder__link {
position: absolute; left: var(--x); top: var(--y); width: var(--w); height: 1px;
background: rgba(20, 38, 45, 0.45); opacity: 0.55; transform: scaleX(0); transform-origin: left; transition: opacity 0.3s;
}
.luxe main :is([data-section="pricing"], #plans) .rd-tier-ladder__link { background: #f1d27c; }
.pm main :is([data-section="pricing"], #plans) .pm-stagger.pm-in .rd-tier-ladder__link { transform: none; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(0.6s + (var(--n, 1) - 1) * 0.25s), opacity 0.3s; }
.pm-static main :is([data-section="pricing"], #plans) .rd-tier-ladder__link { transform: none; }
/* hover/focus inside the receiving card brightens its link; nothing else changes */
main :is([data-section="pricing"], #plans) .rd-tier-ladder-host:has(> [data-slot="card"]:nth-child(2):is(:hover, :focus-within)) .rd-tier-ladder__link[data-to="1"],
main :is([data-section="pricing"], #plans) .rd-tier-ladder-host:has(> [data-slot="card"]:nth-child(3):is(:hover, :focus-within)) .rd-tier-ladder__link[data-to="2"] { opacity: 1; }
/* under 1024: a static tick above the "Everything in …" bullet disc stands in for the ladder */
@media (max-width: 1023px) {
main :is([data-section="pricing"], #plans) .rd-tier-inherit { position: relative; }
main :is([data-section="pricing"], #plans) .rd-tier-inherit::before { content: ""; position: absolute; left: calc(0.5rem - 0.5px); top: -0.85rem; width: 1px; height: 0.65rem; background: rgba(20, 38, 45, 0.45); }
.luxe main :is([data-section="pricing"], #plans) .rd-tier-inherit::before { background: #f1d27c; }
}
/* ---------- R8: receipt ---------- */
main .rd-tier-receipt { position: relative; }
main .rd-tier-row { position: relative; }
main .rd-tier-row::before { content: ""; position: absolute; left: -0.75rem; top: 0; bottom: 0; width: 2px; background: #dcb13a; opacity: 0; pointer-events: none; }
.pm main .rd-tier-changed::before { animation: rd-tier-pulse 0.4s ease-out both; }
@keyframes rd-tier-pulse { from { opacity: 1; } to { opacity: 0; } }
main .rd-tier-ghost { position: absolute; margin: 0 !important; pointer-events: none; white-space: nowrap; color: inherit; animation: rd-tier-out 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes rd-tier-out { from { opacity: 1; } to { opacity: 0; } }
.pm main .rd-tier-in { animation: rd-tier-fade-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes rd-tier-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* the plan's own inclusion list, under the terms line (filled by JS from the plan card's template; without JS the
estimator itself is static, so the disclosure stays out of the way) */
main .rd-tier-inc { margin-top: 1rem; border-top: 1px solid rgba(20, 38, 45, 0.12); }
html:not(.js) main .rd-tier-inc { display: none; }
main .rd-tier-inc__sum { min-height: 2.75rem; display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; list-style: none; color: #14262d; }
main .rd-tier-inc__sum::-webkit-details-marker { display: none; }
main .rd-tier-inc__sum::after { content: ""; width: 0.5rem; height: 0.5rem; margin-left: auto; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
main .rd-tier-inc[open] .rd-tier-inc__sum::after { transform: rotate(-135deg) translateY(-2px); }
main .rd-tier-inc__sum:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; }
main .rd-tier-inc__list { margin: 0 0 0.25rem; padding: 0; list-style: none; }
main .rd-tier-inc__list li { padding: 0.4rem 0; border-top: 1px solid rgba(20, 38, 45, 0.08); font-size: 0.875rem; line-height: 1.45; color: #14262d; }
main .rd-tier-inc__list li:first-child { border-top: 0; }
/* ---------- R8: fixed phone bar (<1024) ---------- */
main .rd-tier-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; display: flex; align-items: center; gap: 0.75rem;
padding: 0.6rem calc(5rem + env(safe-area-inset-right)) calc(0.6rem + env(safe-area-inset-bottom)) 1rem;
background: var(--ivory-2, #faf8f4); border-top: 1px solid rgba(20, 38, 45, 0.12);
}
main .rd-tier-bar[hidden] { display: none; }
main .rd-tier-bar__meta { flex: 1; min-width: 0; }
main .rd-tier-bar__label { display: block; font-size: 0.625rem; line-height: 1.3; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #7d5f14; }
main .rd-tier-bar__total { display: block; font-family: "Manrope", var(--font-display), sans-serif; font-weight: 800; font-size: 1.0625rem; line-height: 1.2; color: #14262d; font-variant-numeric: tabular-nums; }
main .rd-tier-bar__cta.btn { flex: none; min-height: 2.75rem; padding: 0 0.85rem; font-size: 0.8125rem; white-space: nowrap; }
@media (min-width: 1024px) { main .rd-tier-bar { display: none !important; } }
.pm main .rd-tier-bar:not([hidden]) { animation: rd-tier-rise 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes rd-tier-rise { from { transform: translateY(100%); } to { transform: none; } }
html.rd-tier-bar-on #v2-cap-trigger-float { display: none !important; }
/* ---------- R9: compare table ---------- */
main .rd-tier-cmp__col {
font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0;
padding: 0.75rem 0; margin: -0.75rem 0; min-height: 2.75rem; display: inline-flex; align-items: center; position: relative; cursor: pointer;
}
main .rd-tier-cmp__col:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; }
/* pressed = underline + column tint + aria, never colour alone */
main .rd-tier-cmp__col[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.35rem; height: 2px; background: #dcb13a; }
/* the baked Elevate tint yields to the JS spotlight (no-JS keeps it, agreeing with aria-pressed="true").
premium-luxe paints any [class*="bg-lyd-yellow"][class*="p-"] #f8efd6 !important at ~(0,13,4) and premium.css
rounds it 1.5rem — the p-5 cells match both — so the yield carries the :not(._a)…:not(._j) idiom. */
html.luxe main .rd-tier-cmp.rd-tier-cmp--js :is(th, td)[class*="bg-lyd-yellow/25"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j),
main .rd-tier-cmp.rd-tier-cmp--js :is(th, td)[class*="bg-lyd-yellow/25"] { background: transparent !important; border: 0 !important; border-radius: 0 !important; }
main .rd-tier-cmp tbody tr:hover > * { background-color: rgba(20, 38, 45, 0.04); }
/* spotlight, declared after the yield at the same weight so it wins; switches instantly (no colour animation) */
html main .rd-tier-cmp.rd-tier-cmp--js[data-rd-focus="1"] :is(th, td):nth-child(2):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j),
html main .rd-tier-cmp.rd-tier-cmp--js[data-rd-focus="2"] :is(th, td):nth-child(3):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j),
html main .rd-tier-cmp.rd-tier-cmp--js[data-rd-focus="3"] :is(th, td):nth-child(4):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: rgba(220, 177, 58, 0.14) !important; box-shadow: inset 1px 0 0 #dcb13a, inset -1px 0 0 #dcb13a; }
main .rd-tier-cmp td { position: relative; }
/* the "adds" marker lives in the p-5 padding: no layout shift */
main .rd-tier-adds::before { content: ""; position: absolute; left: 0.45rem; top: 1.7rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #dcb13a; }
.pm main .rd-tier-adds::before { animation: rd-tier-dot 0.3s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--r, 0) * 60ms) both; }
@keyframes rd-tier-dot { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
/* verifier fix (8 Sep): the inner price span on /pricing was recoloured by luxe's card :is(span) rule; make it inherit the numeral colour */
.luxe main #plans [data-slot="card"] .rd-tier-num .rd-mask__in .price, .luxe main #plans [data-slot="card"] .rd-tier-num .price { color: inherit !important; }
/* ==== services.css ==== */
/* ===== Example provider service pages (/services/*) ===== */
/* --- demo ribbon: sits directly under the fixed 5.5rem header --- */
main.svc-page { padding-top: 5.5rem !important; }
/* light strip (mint tint, teal text) so the page keeps exactly two dark bands: plum editorial + petrol closing */
main.svc-page .demo-ribbon:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { margin-top: 0; background: #e2f2ea !important; color: #0f5c63 !important; border-bottom: 1px solid rgba(15, 92, 99, 0.18); font-family: var(--font-sans); font-size: 0.8125rem; line-height: 1.4; }
main.svc-page .demo-ribbon__inner { margin: 0 auto; max-width: 80rem; padding: 0.7rem 1rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
@media (min-width: 768px) { main.svc-page .demo-ribbon__inner { padding-left: 2rem; padding-right: 2rem; } }
main.svc-page .demo-ribbon__dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #0f5c63; box-shadow: 0 0 0 4px rgba(15, 92, 99, 0.14); flex: none; }
main.svc-page .demo-ribbon__label:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: #0f5c63 !important; font-weight: 600; letter-spacing: 0.01em; }
main.svc-page .demo-ribbon__link:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { margin-left: auto; gap: 0.4rem; color: #0f5c63 !important; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(15, 92, 99, 0.35); text-underline-offset: 3px; white-space: nowrap; min-height: 2.75rem; display: inline-flex; align-items: center; padding: 0 0.25rem; }
main.svc-page .demo-ribbon__link:hover:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: #0b3f44 !important; text-decoration-color: currentColor; }
/* the hero no longer needs to clear the header itself */
main.svc-page > section.hero-interior.svc-hero:first-of-type { padding-top: clamp(3rem, 6vw, 5rem) !important; padding-bottom: clamp(3rem, 5vw, 4.5rem); }
@media (max-width: 767px) { main.svc-page .demo-ribbon { font-size: 0.75rem; } main.svc-page .demo-ribbon__inner { flex-wrap: nowrap; padding-top: 0.6rem; padding-bottom: 0.6rem; } main.svc-page .demo-ribbon__link:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { display: none !important; } }
/* --- body band: lede + tinted "what this includes" cards, sticky services card --- */
main.svc-page section.svc-body .svc-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { main.svc-page section.svc-body .svc-grid { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; } }
main.svc-page section.svc-body p.svc-lede { font-size: clamp(1.125rem, 1.6vw, 1.375rem) !important; line-height: 1.5 !important; color: var(--color-lyd-ink); opacity: 1; max-width: 40rem; font-weight: 400; }
html main.svc-page section.svc-body h2.svc-h2:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { margin-top: clamp(2.5rem, 4vw, 3.5rem); font-size: var(--text-display-3) !important; font-weight: 600 !important; line-height: 1.12 !important; letter-spacing: -0.015em !important; color: var(--color-lyd-ink); }
main.svc-page section.svc-body h2.svc-h2::before { content: ""; display: block; width: 1.75rem; height: 2px; border-radius: 1px; background: var(--color-lyd-yellow-deep); margin-bottom: 1rem; }
main.svc-page .svc-includes { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { main.svc-page .svc-includes { grid-template-columns: 1fr 1fr; } }
main.svc-page .svc-include { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border-radius: 1.5rem; border: 1px solid rgba(20, 38, 45, 0.1); min-height: 9rem; }
main.svc-page .svc-include .svc-disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { width: 2.25rem; height: 2.25rem; margin: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; flex: none; }
main.svc-page .svc-include .svc-check { width: 0.95rem; height: 0.95rem; color: #fff; }
main.svc-page .svc-include__text { font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; color: var(--color-lyd-ink); font-weight: 500; }
/* sticky card */
main.svc-page .svc-side { position: relative; }
@media (min-width: 1024px) { main.svc-page .svc-side { position: sticky; top: 7.5rem; } }
main.svc-page .svc-card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #fff !important; border: 1px solid rgba(20, 38, 45, 0.1) !important; border-radius: 1.5rem !important; margin-top: 0 !important; }
main.svc-page .svc-card [data-slot="card-content"] { padding: 1.75rem; }
main.svc-page .svc-card .svc-card__h { font-family: var(--font-display); font-size: 1.25rem !important; font-weight: 600 !important; letter-spacing: -0.01em; color: var(--color-lyd-ink); }
main.svc-page .svc-card .svc-card__h::after { content: ""; display: block; width: 1.75rem; height: 2px; border-radius: 1px; background: var(--color-lyd-yellow-deep); margin-top: 0.75rem; }
main.svc-page .svc-card .svc-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: 0.625rem 0.25rem; border-bottom: 1px solid rgba(20, 38, 45, 0.1); font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; color: var(--color-lyd-ink); text-decoration: none; transition: color 0.2s, padding-left 0.2s; }
main.svc-page .svc-card .svc-link::after { content: "→"; color: #7d5f14; font-weight: 400; transition: transform 0.2s; }
main.svc-page .svc-card .svc-link:hover { color: #7d5f14; padding-left: 0.5rem; }
main.svc-page .svc-card .svc-link:hover::after { transform: translateX(3px); }
main.svc-page .svc-card .svc-link:last-of-type { border-bottom: 0; }
main.svc-page .svc-card .space-y-1 > * + * { margin-top: 0; }
main.svc-page .svc-card a.btn.w-full { width: 100%; }
/* --- editorial photo band (plum: the one non-petrol dark band on the page) --- */
main.svc-page section.svc-editorial[data-band="deep"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--plum) !important; color: #dfe7ea; }
main.svc-page section.svc-editorial .svc-editorial__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { main.svc-page section.svc-editorial .svc-editorial__grid { grid-template-columns: 0.95fr 1.05fr; gap: 4.5rem; } }
main.svc-page section.svc-editorial .svc-photo { aspect-ratio: 4 / 3; max-height: 30rem; }
main.svc-page section.svc-editorial .svc-photo::after { background: linear-gradient(180deg, rgba(43, 26, 78, 0) 55%, rgba(43, 26, 78, 0.55) 100%); }
main.svc-page section.svc-editorial .svc-photo::before { box-shadow: inset 0 0 0 1px rgba(241, 210, 124, 0.35); }
main.svc-page section.svc-editorial .td-kicker-light { color: #d9c6ff; }
main.svc-page section.svc-editorial .td-kicker-light::before { background: linear-gradient(90deg, #c9b2ff, #f1d27c) !important; }
main.svc-page section.svc-editorial p.svc-editorial__p { font-family: var(--font-display); font-size: clamp(1.375rem, 2.3vw, 2rem); line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; color: #fff !important; max-width: 30ch; }
main.svc-page section.svc-editorial .btn-ghost-dark { border-color: rgba(241, 210, 124, 0.5) !important; }
/* --- closing band directly after plum: separate them with a hairline --- */
main.svc-page section.svc-editorial + section.closing-band { border-top: 1px solid rgba(255, 255, 255, 0.12); }
@media (max-width: 767px) {
main.svc-page .svc-include { padding: 1.25rem; min-height: 0; flex-direction: row; align-items: flex-start; }
main.svc-page section.svc-editorial .svc-photo { aspect-ratio: 5 / 4; }
}
/* --- polish pass: services --- */
/* the plum editorial band sat straight on the petrol closing band: one hue jump, 1000px of dark.
Petrol keeps the page on the anchor colour. */
main.svc-page section.svc-editorial[data-band="deep"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--color-lyd-deep) !important; }
main.svc-page section.svc-editorial .svc-photo::after { background: linear-gradient(180deg, rgba(6, 22, 28, 0) 55%, rgba(6, 22, 28, 0.6) 100%) !important; }
main.svc-page section.svc-editorial .td-kicker-light::before { background: linear-gradient(90deg, #dcb13a, #f1d27c) !important; }
main.svc-page section.svc-editorial .td-kicker-light, main.svc-page section.svc-editorial .td-kicker { color: #f1d27c !important; }
main.svc-page section.svc-editorial .td-kicker::before, main.svc-page section.svc-editorial .td-kicker-light::before { background: #dcb13a !important; }
/* "what this includes" becomes one material instead of a four-colour pastel grid */
main.svc-page .svc-include, main.svc-page .svc-include.tint-sky, main.svc-page .svc-include.tint-lilac, main.svc-page .svc-include.tint-mint, main.svc-page .svc-include.tint-peach { background: #fff !important; border: 1px solid var(--color-lyd-line-strong) !important; }
main.svc-page .svc-include .svc-disc, main.svc-page .svc-include .disc, main.svc-page .svc-include [class*="rounded-full"] { background: var(--color-lyd-deep) !important; color: #f1d27c !important; }
/* the compact homepage layer was flattening recipe card padding */
main.svc-page .svc-card.card-lyd { padding: 0 !important; }
main.svc-page .svc-card [data-slot="card-content"] { padding: 1.75rem !important; }
/* ==== variants.css ==== */
/* ===== variants group: home design showcase pages + legal ===== */
/* ---- hero grounds per variant ---- */
.luxe main[data-variant="modern"] section.var-hero:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main[data-variant="modern"] section.var-hero:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: linear-gradient(180deg, #e3ecf7 0%, #f3f1ec 100%) !important; }
.luxe main[data-variant="warm"] section.var-hero:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main[data-variant="warm"] section.var-hero:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: linear-gradient(180deg, #fbe8d6 0%, #f3f1ec 100%) !important; }
.luxe main[data-variant="bold"] section.var-hero:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main[data-variant="bold"] section.var-hero:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #2b1a4e !important; }
main[data-variant] section.var-hero::before, main[data-variant] section.var-hero::after { display: none !important; }
main[data-variant="bold"] section.var-hero h1 { font-weight: 800 !important; letter-spacing: -0.035em !important; font-size: clamp(2.75rem, 5.6vw, 4.5rem) !important; color: #fff !important; }
main[data-variant="bold"] section.var-hero p { color: #dfe7ea !important; }
main[data-variant="modern"] section.var-hero h1 { font-weight: 600 !important; letter-spacing: -0.02em !important; }
main[data-variant="warm"] section.var-hero .hero-photo { border-radius: 2.5rem !important; }
main[data-variant="warm"] section.var-hero .hero-photo::before { box-shadow: inset 0 0 0 1px rgba(184, 66, 46, 0.35) !important; }
main[data-variant="modern"] section.var-hero .hero-photo { border-radius: 1rem !important; }
main[data-variant="modern"] section.var-hero .hero-photo::before { box-shadow: inset 0 0 0 1px rgba(34, 58, 102, 0.3) !important; }
main[data-variant="modern"] section.var-hero .hero-photo img { filter: saturate(0.7) contrast(1.04) !important; }
main[data-variant="bold"] section.var-hero .hero-photo { border-radius: 0.75rem !important; box-shadow: 0 0 0 6px rgba(241, 210, 124, 0.18), 0 40px 90px -40px rgba(0, 0, 0, 0.8) !important; }
main[data-variant] section.var-hero .hero-photo figcaption .kicker-mini { color: #f1d27c; }
main[data-variant] section.var-hero { padding-bottom: clamp(3rem, 6vw, 5rem) !important; }
/* ---- closing bands: deep petrol like every page, variant expressed only via panel radius ---- */
main[data-variant] section.var-close { padding-top: clamp(4rem, 7vw, 6rem); padding-bottom: clamp(4rem, 7vw, 6rem); }
main[data-variant] section.var-close .var-panel:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 1.5rem !important; padding: clamp(2rem, 4vw, 3.5rem) !important; text-align: left !important; }
main[data-variant] section.var-close .var-panel:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { border-top: 3px solid #dcb13a !important; }
main[data-variant="warm"] section.var-close .var-panel:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { border-radius: 2.5rem !important; }
main[data-variant="bold"] section.var-close .var-panel:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { border-radius: 0.75rem !important; }
main[data-variant] section.var-close .var-panel > div:first-child { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { main[data-variant] section.var-close .var-panel > div:first-child { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } main[data-variant] section.var-close .var-panel p { margin-top: 0.4rem !important; } }
main[data-variant] section.var-close .var-panel-h2 { text-align: left !important; margin: 0 !important; color: #fff !important; font-weight: 700 !important; }
main[data-variant="bold"] section.var-close .var-panel-h2 { font-weight: 800 !important; }
main[data-variant] section.var-close .var-panel p { color: #dfe7ea !important; max-width: 40rem; }
main[data-variant] section.var-close .var-other h3.td-kicker { display: flex !important; margin: 0 0 1rem !important; font-family: var(--font-sans) !important; font-size: 0.6875rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; font-weight: 600 !important; color: #f1d27c !important; }
main[data-variant] section.var-close .var-other { margin-top: 2.5rem !important; }
/* ---- legal pages ---- */
main[data-legal] > section.hero-interior .text-lede { max-width: 48rem; }
main[data-legal] section.legal-body { padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(4rem, 7vw, 6rem); }
main[data-legal] .legal-layout { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { main[data-legal] .legal-layout { grid-template-columns: 16rem minmax(0, 48rem); gap: 5rem; } }
main[data-legal] .legal-toc { align-self: start; padding: 1.5rem 1.75rem; background: #fff; border: 1px solid rgba(20, 38, 45, 0.1); border-radius: 1.5rem; }
main[data-legal] .legal-toc .td-kicker { margin-bottom: 0.9rem; }
main[data-legal] .legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; counter-reset: toc; }
main[data-legal] .legal-toc li { counter-increment: toc; }
main[data-legal] .legal-toc a { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.45rem 0; font-family: var(--font-sans); font-size: 0.9375rem; color: #14262d; text-decoration: none; border-bottom: 1px solid rgba(20, 38, 45, 0.08); }
main[data-legal] .legal-toc li:last-child a { border-bottom: 0; }
main[data-legal] .legal-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; color: #7d5f14; letter-spacing: 0.04em; }
main[data-legal] .legal-toc a:hover { color: #7d5f14; }
main[data-legal] .legal-prose { max-width: 48rem; }
main[data-legal] .legal-h2 { font-family: var(--font-display) !important; font-weight: 700 !important; font-size: clamp(1.5rem, 2.2vw, 1.875rem) !important; letter-spacing: -0.02em; line-height: 1.15; color: #14262d !important; margin-top: 3rem !important; padding-top: 1.25rem; position: relative; scroll-margin-top: 6rem; }
main[data-legal] .legal-h2:first-child { margin-top: 0 !important; }
main[data-legal] .legal-h2::before { content: ""; position: absolute; top: 0; left: 0; width: 2.5rem; height: 2px; background: #dcb13a; }
main[data-legal] .legal-p { font-size: 1.0625rem !important; line-height: 1.7 !important; color: #4e565b !important; margin-top: 1rem !important; }
/* ---- overrides that must beat the luxe layer ---- */
.luxe main[data-legal] .legal-h2:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main[data-legal] .legal-h2:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { text-align: left !important; font-size: clamp(1.5rem, 2.2vw, 1.875rem) !important; letter-spacing: -0.02em !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
.luxe main[data-legal] .legal-p:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main[data-legal] .legal-p:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { text-align: left !important; margin-left: 0 !important; }
@media (min-width: 1024px) {
main[data-variant] section.var-hero .hero-grid { grid-template-columns: minmax(0, 1fr) 27rem !important; gap: 5rem !important; align-items: center; }
main[data-variant] section.var-hero .hero-grid > div:first-child { max-width: none !important; }
main[data-variant] section.var-hero .hero-grid h1 { max-width: 14ch; }
main[data-variant] section.var-hero .hero-photo { width: 27rem !important; aspect-ratio: 4 / 5 !important; max-height: 34rem !important; }
}
main[data-variant] section.var-hero .hero-grid p { max-width: 36rem; }
main[data-variant] > section.var-hero .band-inner > .hero-grid { max-width: none !important; }
@media (min-width: 1024px) { main[data-variant] section.var-hero .hero-grid h1 { max-width: 18ch !important; } }
/* lede sits flush-left under the h1 on these pages */
.luxe main[data-variant] section.var-hero .text-lede, main[data-variant] section.var-hero .text-lede, .luxe main[data-legal] > section.hero-interior .text-lede, main[data-legal] > section.hero-interior .text-lede { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; }
/* hero flush under the fixed header (main.pt-32 removed in the recipe); hero pads for the 5.5rem header itself */
main[data-variant] > section.var-hero:first-child { margin-top: 0 !important; padding-top: clamp(8.5rem, 12vw, 10.5rem) !important; }
/* bold: hairline seam between the plum hero and the petrol closing band */
main[data-variant="bold"] section.var-close { border-top: 1px solid rgba(255, 255, 255, 0.12); }
/* ==== zz-about-rebuild.css ==== */
/* the About page's new bands: one measure, generous leading, nothing decorative */
/* NOT margin-inline: auto. That rule centred the reading column at 272px while the H1, the
stats strip and the founder block all sat at 112, and the page read as two documents
stacked on top of each other. The measure is still capped; it just starts where the rest
of the page starts. */
main .ab-sec .band-inner > .max-w-4xl { margin-inline: 0; }
main .ab-sec h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
/* the Launch Your Dream Series list: a card per product, two up, three at desktop */
main .ab-prods { display: grid; gap: 1rem; margin-top: 1.75rem; }
@media (min-width: 640px) { main .ab-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { main .ab-prods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
main .ab-prod { padding: 1.25rem 1.35rem; background: #fff; border: 0.8px solid rgba(10, 10, 11, 0.1); }
main .ab-prod__n { margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; }
main .ab-prod__d { margin: 0.5rem 0 0; font-size: 0.9375rem; line-height: 1.6; }
/* the FAQ: native disclosures, so keyboard and screen-reader behaviour comes free */
main .ab-faq { margin-top: 1.75rem; border-top: 1px solid rgba(10, 10, 11, 0.12); }
main .ab-faq__row { border-bottom: 1px solid rgba(10, 10, 11, 0.12); }
main .ab-faq__q {
cursor: pointer; list-style: none; padding: 1.05rem 2.25rem 1.05rem 0; position: relative;
font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em;
}
main .ab-faq__q::-webkit-details-marker { display: none; }
main .ab-faq__q::after {
content: ""; position: absolute; right: 0.35rem; top: 1.5rem; width: 0.6rem; height: 0.6rem;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg); transition: transform 0.2s;
}
main .ab-faq__row[open] .ab-faq__q::after { transform: rotate(-135deg); }
main .ab-faq__q:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
main .ab-faq__a { padding: 0 0 1.15rem; }
main .ab-faq__a p { margin: 0; line-height: 1.7; }
@media (prefers-reduced-motion: reduce) { main .ab-faq__q::after { transition: none; } }
/* ---------- the counted strip under the hero ---------- */
main .ab-stats-sec { padding-top: 0; padding-bottom: 1.5rem; margin-top: -1.5rem; }
/* No outer box. A bordered strip put its first numeral 32px inside the page's text edge, which
breaks the single left edge every other block on this page shares - the thing align.cjs exists
to catch. Dividers between the cells carry the structure instead, and the first cell has no
left padding, so the "2024" starts exactly where the H1 does. */
main .ab-stats {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid rgba(10, 10, 11, 0.12);
border-bottom: 1px solid rgba(10, 10, 11, 0.12);
}
@media (min-width: 768px) { main .ab-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
main .ab-stat { padding: 1.35rem 1.25rem; border-left: 1px solid rgba(10, 10, 11, 0.12); }
main .ab-stat:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 767px) { main .ab-stat:nth-child(3) { padding-left: 0; border-left: 0; } }
main .ab-stat__n {
display: block; font-family: var(--font-display, inherit); font-weight: 700;
font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1; letter-spacing: -0.035em;
font-variant-numeric: tabular-nums; /* so a counting figure does not jiggle its own width */
}
main .ab-stat__l { display: block; margin-top: 0.45rem; font-size: 0.875rem; line-height: 1.4; }
/* ---------- the product cards, now mostly links ---------- */
main a.ab-prod--link { display: block; text-decoration: none; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s; }
main a.ab-prod--link:hover { transform: translateY(-3px); }
main a.ab-prod--link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
main .ab-prod__go { display: inline-block; margin-left: 0.35rem; font-size: 0.8em; transition: transform 0.3s; }
main a.ab-prod--link:hover .ab-prod__go { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) {
main a.ab-prod--link, main .ab-prod__go { transition: none; }
main a.ab-prod--link:hover { transform: none; }
}
/* ==== zz-cro.css ==== */
/* ---------------- the sticky CTA bar (mobile only) ---------------- */
.cro-bar { display: none; }
@media (max-width: 1023px) {
.cro-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
display: flex; align-items: center; gap: 0.9rem;
/* the chat widget sits bottom-right; leave it room rather than fighting it for the corner */
padding: 0.7rem 5.5rem 0.7rem 1rem;
padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
background: rgba(10, 10, 11, 0.92);
-webkit-backdrop-filter: blur(18px) saturate(1.1);
backdrop-filter: blur(18px) saturate(1.1);
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.cro-bar[hidden] { display: none; }
.cro-bar__t {
flex: 1 1 auto; margin: 0; min-width: 0;
color: rgba(255, 255, 255, 0.86); font-size: 0.8125rem; line-height: 1.35; font-weight: 600;
}
.cro-bar__btn { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
/* the bar covers the foot of the page, so give the page somewhere to end */
html.cro-bar-on body { padding-bottom: 4.5rem; }
}
@media (max-width: 419px) { .cro-bar__t { display: none; } .cro-bar { justify-content: flex-end; } }
/* ---------------- /pricing: the folded restatement bands ---------------- */
main section.cro-folded { padding-block: 0 !important; }
main details.cro-fold { border-top: 1px solid rgba(10, 10, 11, 0.12); }
main details.cro-fold > summary.cro-fold__sum {
cursor: pointer; list-style: none; position: relative;
padding: 1.15rem 2.5rem 1.15rem 0;
font-family: "Manrope", var(--font-sans), system-ui, sans-serif;
font-size: clamp(1.0625rem, 1.6vw, 1.3rem); font-weight: 600; letter-spacing: -0.02em;
}
main details.cro-fold > summary.cro-fold__sum::-webkit-details-marker { display: none; }
main details.cro-fold > summary.cro-fold__sum::after {
content: ""; position: absolute; right: 0.4rem; top: 1.55rem; width: 0.62rem; height: 0.62rem;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg); transition: transform 0.2s;
}
main details.cro-fold[open] > summary.cro-fold__sum::after { transform: rotate(-135deg); }
main details.cro-fold > summary.cro-fold__sum:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
main .cro-fold__body { padding-bottom: 1.5rem; }
@media (prefers-reduced-motion: reduce) { main details.cro-fold > summary.cro-fold__sum::after { transition: none; } }
/* ---------------- demoted primaries ---------------- */
/* Two rules were tried here and both were wrong in the same way: they guessed the ground from
the section. "On a dark band" is not "on a dark ground" - a button inside a white card on a
dark band is on white - and the fix for that then caught a button genuinely on the band and
made it ink on near-black. Ping-pong, because CSS cannot ask what colour is actually behind
an element.
So it stops guessing. The button INHERITS its container's colour, and the container's colour
is already correct for whatever it sits on, because that is what the band grammar and the
card rules have been doing all along. One rule, no ground detection, right in both places.
The border follows the same colour at a third of its strength, with a neutral fallback for
engines without color-mix. */
html.vc-site #main a.cro-demoted,
html.sa-skin-vcpility #main a.cro-demoted {
background: transparent !important;
background-image: none !important;
color: inherit !important;
border: 1px solid rgba(128, 128, 128, 0.45) !important;
border-color: color-mix(in srgb, currentColor 38%, transparent) !important;
box-shadow: none !important;
}
html.vc-site #main a.cro-demoted:hover,
html.sa-skin-vcpility #main a.cro-demoted:hover {
border-color: var(--vc-accent-fill, #D40F17) !important;
}
/* ==== zz-itteam.css ==== */
/* NOTE: the gradient band rules that used to sit here are in premium-vcpility.css instead.
Recipe CSS is concatenated into premium-pages.css, which loads BEFORE the colour and skin
layers, so `main section[data-band="grad"]` lost to them silently and the band came out as
the light base with white text on it. Anything that has to beat the palette belongs in the
last sheet, at ID weight. */
/* ---------------- the AI-native IT team band ---------------- */
main .it-team { padding-block: clamp(3.5rem, 7vw, 6rem) !important; }
main .it-kicker {
display: inline-block; padding: 0.4rem 0.85rem; border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.9) !important;
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}
main .it-h {
margin: 1.1rem 0 0; max-width: 26ch;
font-family: "Manrope", var(--font-sans), system-ui, sans-serif;
font-size: clamp(1.75rem, 3.3vw, 2.75rem); line-height: 1.1; letter-spacing: -0.035em; font-weight: 700;
}
main .it-lede { margin: 1rem 0 0; max-width: 52ch; font-size: 1.0625rem; line-height: 1.65; }
main .it-lede strong { font-weight: 700; }
main .it-grid { display: grid; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) { main .it-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
main .it-card {
padding: 1.6rem 1.5rem 1.75rem;
background: rgba(10, 10, 30, 0.34); border: 1px solid rgba(255, 255, 255, 0.12);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
transition: border-color 0.35s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
html.pm main .it-card:hover { border-color: rgba(255, 255, 255, 0.34); transform: translateY(-3px); }
main .it-card__ic {
display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem;
background: rgba(255, 255, 255, 0.1); color: var(--vc-accent-soft, #FF9A93);
}
main .it-card__ic svg { width: 1.25rem; height: 1.25rem; }
/* the first card's icon swapped for a photo thumbnail (11 Sep 2026, owner review): same slot,
scaled up a little since a photo reads as noise at icon size, rounded to match the badge it
replaces rather than the card's own square corners. */
main .it-card__ic--photo { width: 4.5rem; height: 4.5rem; padding: 0; overflow: hidden; background: none; border-radius: 0.75rem; }
main .it-card__ic--photo img {
display: block; width: 100%; height: 100%; object-fit: cover; object-position: 42% 68%;
/* same clip-path reveal trap as the hero photo (see .sa-hero__frame--photo img) */
clip-path: none !important;
-webkit-clip-path: none !important;
}
main .it-card__t { margin: 1.1rem 0 0; font-size: 1.1875rem; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
main .it-card__b { margin: 0.65rem 0 0; font-size: 0.9375rem; line-height: 1.62; }
main .it-foot {
margin-top: 1rem; padding: 1.5rem;
background: rgba(10, 10, 30, 0.34); border: 1px solid rgba(255, 255, 255, 0.12);
}
main .it-foot__t { margin: 0; max-width: 46ch; font-size: 1rem; line-height: 1.55; }
main .it-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
main .it-chip {
padding: 0.5rem 0.95rem; border-radius: 999px;
background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.16);
color: #fff !important; font-size: 0.875rem; font-weight: 600;
}
/* ---------------- the After-Hours Playbook ---------------- */
main .pb-trigger {
flex: 0 0 auto; min-height: 44px; padding: 0.5rem 0.25rem; background: none; border: 0;
color: rgba(255, 255, 255, 0.82); font: inherit; font-size: 0.9375rem; font-weight: 600;
text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
main .pb-trigger:hover { color: #fff; }
main .pb-trigger:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
main .pb {
display: grid; gap: 1.5rem; margin-bottom: 1rem; padding: clamp(1.5rem, 3vw, 2.25rem);
background: rgba(10, 10, 30, 0.42); border: 1px solid rgba(255, 255, 255, 0.14);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
main .pb[hidden] { display: none; }
@media (min-width: 900px) { main .pb { grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; } }
main .pb__kicker {
display: block; color: var(--vc-accent-soft, #FF9A93) !important;
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}
main .pb__h {
margin: 0.8rem 0 0; color: #fff !important;
font-family: "Manrope", var(--font-sans), system-ui, sans-serif;
font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.14; letter-spacing: -0.03em; font-weight: 700;
}
main .pb__lede { margin: 0.85rem 0 0; font-size: 0.9375rem; line-height: 1.6; }
main .pb__list { margin: 1.2rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
main .pb__list li { position: relative; padding-left: 2rem; font-size: 0.9375rem; line-height: 1.5; color: #fff !important; }
main .pb__list li::before {
content: ""; position: absolute; left: 0; top: 0.05em; width: 1.25rem; height: 1.25rem;
background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22);
}
main .pb__list li::after {
content: ""; position: absolute; left: 0.38rem; top: 0.4em; width: 0.45rem; height: 0.24rem;
border-left: 2px solid var(--vc-accent-soft, #FF9A93); border-bottom: 2px solid var(--vc-accent-soft, #FF9A93);
transform: rotate(-45deg);
}
main .pb__form { padding: clamp(1.25rem, 2.5vw, 1.75rem); background: rgba(6, 8, 18, 0.55); border: 1px solid rgba(255, 255, 255, 0.12); }
main .pb__fh { margin: 0 0 1.1rem; color: #fff !important; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }
main .pb__lbl {
display: block; margin: 0 0 0.4rem; color: rgba(255, 255, 255, 0.72) !important;
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
main .pb__in {
display: block; width: 100%; min-height: 48px; margin: 0 0 1.1rem; padding: 0.75rem 0.9rem;
background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.22);
color: #fff !important; font: inherit; font-size: 1rem;
}
main .pb__in::placeholder { color: rgba(255, 255, 255, 0.5); }
main .pb__in:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-color: #fff; }
main .pb__go { width: 100%; justify-content: center; }
main .pb__note { margin: 0.9rem 0 0; color: rgba(255, 255, 255, 0.62) !important; font-size: 0.8125rem; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) {
main .it-card { transition: none; }
html.pm main .it-card:hover { transform: none; }
}
/* the direct download under the playbook form */
main .pb__direct { margin: 0.85rem 0 0; font-size: 0.875rem; }
main .pb__direct a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
main .pb__direct a:hover { color: var(--vc-accent-soft, #FF9A93); }
main .pb__direct a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* ==== zz-pricing-trim.css ==== */
/* the tier cards' new fine print: two assurances, not a paragraph */
main .rd-tier-terms { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0; }
main .rd-tier-terms span { position: relative; padding-left: 1.05rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; }
main .rd-tier-terms span::before {
content: ""; position: absolute; left: 0; top: 0.42em; width: 0.5rem; height: 0.28rem;
border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
/* the disclosure that holds the rest of each inclusion list */
main details.rd-tier-more { border: 0; background: none; padding: 0; }
main details.rd-tier-more > summary.rd-tier-more__sum {
cursor: pointer; list-style: none; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em;
padding: 0.3rem 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
main details.rd-tier-more > summary.rd-tier-more__sum::-webkit-details-marker { display: none; }
main details.rd-tier-more > summary.rd-tier-more__sum::after { content: " \25BE"; text-decoration: none; }
main details.rd-tier-more[open] > summary.rd-tier-more__sum::after { content: " \25B4"; }
main details.rd-tier-more > summary.rd-tier-more__sum:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* the two terms, stated once where the pricing section opens */
main .rd-price-terms { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1rem 0 0; }
main .rd-price-terms span { position: relative; padding-left: 1.35rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
main .rd-price-terms span::before {
content: ""; position: absolute; left: 0; top: 0.45em; width: 0.62rem; height: 0.34rem;
border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
/* ==== zz-uxpro.css ==== */
/* ==== Round 5 — ui-ux-pro-max checklist pass (7 Sep 2026) ====
Accessibility furniture, WCAG 2.2 target sizes, media controls, interaction hygiene.
Hit areas grow with padding + matching negative margin so nothing on the page moves. */
/* skip link: invisible until it has keyboard focus, then a petrol pill top-left above the header */
a.skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 10000; padding: 0.75rem 1.25rem; border-radius: 999px; background: #0f2e38; color: #f1d27c; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; box-shadow: 0 12px 30px rgba(8, 28, 35, 0.35); transform: translateY(calc(-100% - 1.5rem)); opacity: 0; transition: transform 0.2s, opacity 0.2s; }
a.skip-link:focus-visible { transform: none; opacity: 1; outline: 2px solid #dcb13a; outline-offset: 3px; }
main:focus { outline: none; }
/* anchored and focused targets clear the fixed header (WCAG 2.4.11 focus not obscured) */
html { scroll-padding-top: 6.5rem; }
/* interaction hygiene: pointer cursor on everything that acts, no 300ms tap delay, press feedback */
button:not(:disabled), [role="button"], summary, select, label.est-addon, #lang-toggle, #v2-menu-toggle { cursor: pointer; }
a, button, summary, input, select, textarea, label { touch-action: manipulation; }
.btn:active, a.cta-alive:active { transform: translateY(1px) scale(0.985); transition-duration: 80ms; }
main [tabindex="0"]:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; border-radius: 6px; }
/* ---------- target sizes (WCAG 2.2 2.5.8 minimum 24px; 44px where the layout allows) ---------- */
/* desktop nav: 16px text lines become 44px targets; the underline keeps its visual position */
header a.nav-link:not(.header-phone) { display: inline-block; padding: 0.875rem 0.25rem; margin: -0.875rem -0.25rem; }
header a.nav-link::after { bottom: 0.275rem !important; left: 0.25rem !important; right: 0.25rem !important; }
header a.header-phone { padding: 0.875rem 0.25rem; margin: -0.875rem -0.25rem; }
header a.header-phone::after { display: none; }
#lang-toggle { min-height: 2.75rem; }
#lang-menu button { min-height: 2.75rem; }
#lang-current-flag, #lang-menu .lang-flag { display: none !important; }
/* the luxe transparent-header rule paints every header button white over the dark hero; the dropdown
itself is white, so its items were white-on-white until the header compacted */
html.luxe body.hero-dark header:not(.pm-scrolled) #lang-menu button, header #lang-menu button { color: #0f2e38 !important; }
#lang-toggle .lang-globe { flex: none; opacity: 0.85; }
/* footer: column links, contact strip, legal links */
footer.footer-deep ul li a, footer.footer-deep div[class*="flex-wrap"] > a { display: inline-block; padding: 0.75rem 0.5rem; margin: -0.75rem -0.5rem; }
footer.footer-deep .footer-legal a { display: inline-block; padding: 0.8125rem 0.5rem; margin: -0.8125rem -0.5rem; }
/* premium.css already spaces the mobile footer with 0.4rem padding (a 36.8px row). Keep exactly that
rhythm while the hit area grows to 48px: 24 + 2x12 padding, minus 2x5.6 margin = 36.8 */
@media (max-width: 767px) {
footer.footer-deep .grid a:not([class*="rounded-full"]):not(.btn) { padding: 0.75rem 0.5rem; margin: -0.35rem -0.5rem; }
}
footer a[class*="rounded-full"] { min-width: 2.75rem; min-height: 2.75rem; }
/* closing-band contact card */
.contact-card a:not(.btn) { display: inline-block; padding: 0.75rem 0; margin: -0.75rem 0; }
/* bare phone and email links in body copy blocks (contact, team, locations) */
main a[href^="tel:"]:not(.btn):not([class*="px-"]):not([class*="conv-"]), main a[href^="mailto:"]:not(.btn):not([class*="px-"]):not([class*="conv-"]) { display: inline-block; padding: 0.75rem 0; margin: -0.75rem 0; }
/* standalone text links in the body (not sentence links, not buttons) */
main a.inline-flex:not(.btn):not([class*="px-"]), main a.cap-link { padding: 0.75rem 0; margin: -0.75rem 0; }
main a.chip { min-height: 2.75rem; }
/* pricing: the small "what is and is not included" disclosures and the add-on tick boxes */
main summary.text-sm { display: flex; align-items: center; min-height: 2.75rem; }
main label input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; }
/* ---------- media controls ---------- */
main > section:first-of-type { position: relative; }
.hero-video-toggle, .ticker__toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(8, 28, 35, 0.55); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.hero-video-toggle:hover, .ticker__toggle:hover { background: rgba(8, 28, 35, 0.8); border-color: rgba(241, 210, 124, 0.7); }
.hero-video-toggle:focus-visible, .ticker__toggle:focus-visible { outline: 2px solid #f1d27c; outline-offset: 3px; }
.hero-video-toggle .ico-play, .ticker__toggle .ico-play { display: none; }
.hero-video-toggle[aria-pressed="true"] .ico-pause, .ticker__toggle[aria-pressed="true"] .ico-pause { display: none; }
.hero-video-toggle[aria-pressed="true"] .ico-play, .ticker__toggle[aria-pressed="true"] .ico-play { display: inline; }
.hero-video-toggle { position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 5; }
@media (min-width: 1024px) { .hero-video-toggle { left: clamp(1.25rem, 4vw, 3.5rem); bottom: 1.5rem; } }
main section.ticker { padding-right: 3.5rem !important; }
.ticker__toggle { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); z-index: 3; width: 2.75rem; height: 2.75rem; }
main section.ticker::after { right: 0; width: 8.5rem; }
main section.ticker.is-paused .ticker__track, main section.ticker:focus-within .ticker__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.ticker__toggle { display: none; }
main section.ticker { padding-right: 0 !important; }
main section.ticker::after { right: 0; }
.btn:active, a.cta-alive:active { transform: none; }
}
/* the video toggle only exists if there is a video; when the script has stopped it for reduced motion
the poster shows and the control still lets the reader start it */
html.pm-static .hero-video-toggle { background: rgba(8, 28, 35, 0.7); }