/** Shopify CDN: Minification failed Line 3055:11 Unexpected "<" **/ :root { --p: #0a1838; --p-2: #14365e; --bgd: #0a1632; --a: #f0614a; --a-2: #fd9786; --a-ink: #cd2a10; --m: #5b6b7c; --mm: #68758a; --bg: #fcfcfd; --bga: #f3f5f8; --br: #e6eaf0; --br-2: #eef1f5; --ph: #6b7789; --on-dark: #fff; --on-dark-2: rgba(255, 255, 255, .85); --on-dark-3: rgba(255, 255, 255, .70); --on-dark-br: rgba(255, 255, 255, .12); --on-dark-fill: rgba(255, 255, 255, .06); --grad: linear-gradient(135deg, #0a1838 0%, #14365e 100%); --grad-alt: linear-gradient(135deg, #14365e 0%, #1d4a7d 100%); --grad-a: linear-gradient(135deg, var(--a) 0%, var(--a-2) 100%); --grad-a-btn: var(--grad-a); --shadow-sm: 0 1px 2px rgba(10, 24, 56, .06); --shadow: 0 2px 8px rgba(10, 24, 56, .08); --shadow-lg: 0 12px 28px rgba(10, 24, 56, .10); --shadow-xl: 0 24px 56px rgba(10, 24, 56, .14); --r: 16px; --r-lg: 22px; --r-btn: 10px; --r-btn-lg: 50px; --r-pill: 999px; --container: 1440px; --gutter: 20px; --section-y: clamp(56px, 6vw, 112px); --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-h1-hero: clamp(26px, 4.4vw, 54px); --fs-h1: clamp(25px, 3.8vw, 46px); --fs-h2: clamp(20px, 2.6vw, 34px); --fs-h3: clamp(17px, 1.4vw, 20px); --fs-h4: 15px; --fs-body: 16px; --fs-lede: clamp(16px, 1.15vw, 19px); --fs-card: 15px; --fs-btn: 15px; --fs-eyebrow: 12px; --ease: cubic-bezier(.4, 0, .2, 1); --ease-panel: cubic-bezier(.16, 1, .3, 1); --dur-fast: .15s; --dur: .22s; --dur-slow: .32s; } @media (max-width: 900px) { :root { --gutter: 16px; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--p); font-family: var(--font); font-optical-sizing: auto; font-size: var(--fs-body); line-height: 1.7; -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; height: auto; } svg text { font-family: var(--font); } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--p); text-wrap: balance; overflow-wrap: break-word; } h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -.02em; } h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.01em; } h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.01em; } h4 { font-size: var(--fs-h4); font-weight: 700; } p { margin: 0 0 1em; max-width: 56ch; text-wrap: pretty; overflow-wrap: break-word; } p:last-child { margin-bottom: 0; } a { color: var(--a-ink); text-underline-offset: .18em; } a:hover { color: var(--a); } .lede { font-size: var(--fs-lede); line-height: 1.6; letter-spacing: -.005em; color: var(--m); max-width: 64ch; } .stat, .num, [data-count] { font-feature-settings: 'tnum'; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .sr-hidden{visibility:hidden;} .sr-only:focus-visible { position: fixed; z-index: 300; top: 12px; inset-inline-start: 12px; width: auto; height: auto; margin: 0; padding: 12px 18px; overflow: visible; clip: auto; background: var(--p); color: #fff; border-radius: var(--r-btn); box-shadow: var(--shadow-lg); font-size: 15px; font-weight: 600; text-decoration: none; outline: 2px solid var(--a); outline-offset: 2px; } html { scroll-padding-top: 88px; } .wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section--center > .wrap { margin-inline: auto; } .section--center .section__head { text-align: center; margin-inline: auto; } .section--center .section__head .lede { margin-inline: auto; } .wrap--left { margin-inline: 0; } .section { padding-block: var(--section-y); } .section--alt { background: var(--bga); } .section--navy { background: var(--bgd); } .section--grad { background: var(--grad); } .section--navy, .section--grad { color: var(--on-dark-2); } .section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4, .section--grad h1, .section--grad h2, .section--grad h3, .section--grad h4 { color: var(--on-dark); } .section--navy .lede, .section--grad .lede { color: var(--on-dark-2); } .section__head { max-width: 760px; margin-bottom: 44px; } .section__head > h2 { margin-block: 12px 14px; } .grid { display: grid; gap: 20px; } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } .eyebrow { display: inline-block; font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--a-ink); } .section--navy .eyebrow, .section--grad .eyebrow { color: var(--a); } .overline { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: var(--mm); font-feature-settings: 'tnum'; } .section--navy .overline, .section--grad .overline { color: var(--on-dark-3); } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: 1px solid transparent; border-radius: var(--r-btn-lg); font-size: var(--fs-btn); font-weight: 600; letter-spacing: -.01em; text-decoration: none; cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn:hover { transform: translateY(-2px); } .btn-p { background: var(--grad-a-btn); color: #fff; box-shadow: var(--shadow-sm); } .btn-p:hover { box-shadow: var(--shadow-lg); color: #fff; } .btn-s { background: transparent; border-color: var(--br); color: var(--p); } .btn-s:hover { border-color: rgba(240, 97, 74, .25); color: var(--p); } .btn-w { background: var(--on-dark-fill); border-color: var(--on-dark-br); color: #fff; backdrop-filter: blur(8px); } .btn-w:hover { background: rgba(255, 255, 255, .12); color: #fff; } .mw-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 18px; border: 1px solid var(--br); border-radius: var(--r-btn); color: var(--p); text-decoration: none; font-weight: 600; font-size: var(--fs-btn); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .mw-btn:hover { border-color: rgba(240, 97, 74, .25); transform: translateY(-2px); color: var(--p); } .mw-arrow { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); } .mw-btn:hover .mw-arrow { transform: translateX(4px); } .rtl .mw-btn:hover .mw-arrow { transform: translateX(-4px) scaleX(-1); } .rtl .mw-arrow { transform: scaleX(-1); } .sh-pill, .mi-cat, .mp-cat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; background: var(--bga); color: var(--m); border: 1px solid var(--br-2); } .mp-cat-blue { background: rgba(20, 54, 94, .08); color: var(--p-2); border-color: rgba(20, 54, 94, .14); } .mp-cat-navy { background: rgba(10, 24, 56, .06); color: var(--p); border-color: rgba(10, 24, 56, .12); } .hh-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .hh-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--r-pill); background: var(--on-dark-fill); border: 1px solid var(--on-dark-br); color: #fff; font-size: 13px; font-weight: 600; } .hh-chips svg { width: 15px; height: 15px; } .card, .practice, .rs-card, .bento-card, .step-card, .app-card2 { background: #fff; border: 1px solid var(--br-2); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .card:hover, .practice:hover, .rs-card:hover, .bento-card:hover, .step-card:hover, .app-card2:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(240, 97, 74, .25); } .practice { padding: 26px; } .p-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: var(--r-btn); background: var(--bga); color: var(--a-ink); } .p-icon svg { width: 21px; height: 21px; } .practice h3 { margin-bottom: 8px; } .p-desc { font-size: var(--fs-card); line-height: 1.6; color: var(--m); } .bento { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); } .bento-card { padding: 26px; position: relative; overflow: hidden; } .bento-card--wide { grid-column: span 2; } .bento-card--full { grid-column: span 4; } .bento-card > .overline { position: absolute; top: 22px; inset-inline-end: 24px; } .bento-card h3 { margin-bottom: 10px; padding-inline-end: 48px; } .bento-card p { font-size: var(--fs-card); color: var(--m); } @media (max-width: 900px) { .bento { grid-template-columns: minmax(0, 1fr); } .bento-card--wide, .bento-card--full { grid-column: span 1; } } .rs-card { padding: 26px; } .stars { color: var(--a-ink); letter-spacing: .12em; margin-bottom: 12px; } .rs-card p { font-size: var(--fs-card); color: var(--p); } .who { display: flex; align-items: center; gap: 12px; margin-top: 18px; } .avatar { display: grid; place-items: center;flex-shrink:0; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--grad); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; } .who strong { display: block; font-size: 14px; } .who span { font-size: 12.5px; color: var(--mm); } .step-card { padding: 24px; cursor: pointer; } .step-card__head { display: flex; align-items: flex-start; gap: 14px; } .step-card__head h4 { flex: 1; } .step-toggle { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 1px solid var(--br); border-radius: var(--r-pill); background: transparent; color: var(--m); cursor: pointer; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .step-card.is-open .step-toggle { transform: rotate(45deg); border-color: var(--a); color: var(--a-ink); } .step-card__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-panel); } .step-card.is-open .step-card__body { grid-template-rows: 1fr; } .step-card__body > div { overflow: hidden; } .step-card__body p { font-size: var(--fs-card); color: var(--m); padding-top: 12px; } .sh-form-card { background: #fff; border: 1px solid var(--br-2); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 28px; } .sh-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); } .sh-field { margin-bottom: 14px; position: relative; } .sh-lab { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--p); } .sh-field input, .sh-field select, .sh-field textarea { width: 100%; padding: 11px 14px; background: var(--bg); border: 1.5px solid var(--br); border-radius: var(--r-btn); color: var(--p); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .sh-field input::placeholder, .sh-field textarea::placeholder { color: var(--ph); } .sh-field input:focus, .sh-field select:focus, .sh-field textarea:focus { outline: none; border-color: var(--a); box-shadow: 0 0 0 4px rgba(240, 97, 74, .12); } .sh-field.has-error input, .sh-field.has-error select, .sh-field.has-error textarea { border-color: var(--a-ink); } .sh-error { display: block; margin-top: 5px; font-size: 12.5px; color: var(--a-ink); font-weight: 600; } .sh-field-area textarea { resize: vertical; min-height: 96px; } .sh-count { position: absolute; bottom: 10px; inset-inline-end: 12px; font-size: 11.5px; color: var(--mm); font-feature-settings: 'tnum'; } .sh-submit { width: 100%; justify-content: center; margin-top: 4px; } .sh-privacy { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--mm); } .sh-privacy svg { width: 15px; height: 15px; flex: none; } .sh-trap { position: absolute; left: -9999px; opacity: 0; pointer-events: none; } .sh-error[data-kind] { margin-top: 0; margin-bottom: 18px; padding: 12px 14px; border-radius: var(--r-btn); font-size: var(--fs-card); font-weight: 500; line-height: 1.5; } .sh-error[data-kind="ok"] { color: var(--p); background: rgba(20, 54, 94, .07); border-inline-start: 3px solid var(--p-2); } .sh-error[data-kind="again"] { color: var(--m); background: var(--bga); border-inline-start: 3px solid var(--br); } .sh-error[data-kind="error"] { color: var(--a-ink); background: rgba(240, 97, 74, .08); border-inline-start: 3px solid var(--a-ink); } .sh-error[hidden] { display: none; } .hdr { position: fixed; inset-inline: 0; top: 0; z-index: 100; padding: 14px var(--gutter); transition: padding var(--dur) var(--ease); } .hdr__inner { max-width: var(--container); margin-inline: auto; display: flex; align-items: center; gap: 20px; padding: 10px 12px 10px 20px; border-radius: var(--r-pill); border: 1px solid transparent; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), padding var(--dur) var(--ease); } .hdr.is-stuck .hdr__inner { background: rgba(252, 252, 253, .86); backdrop-filter: blur(14px); border-color: var(--br); box-shadow: var(--shadow); padding: 6px 8px 6px 16px; } .hdr.is-stuck .hdr__logo { font-size: 15px; } .hdr.is-stuck .hdr__nav a, .hdr.is-stuck .hdr__nav-btn { font-size: 14px; padding-block: 6px; } .hdr__logo { display: flex; align-items: center; gap: 9px; text-decoration: none; color: #fff; font-weight: 700; letter-spacing: -.02em; } .hdr.is-stuck .hdr__logo { color: var(--p); } .hdr__nav { display: flex; gap: 4px; margin-inline: auto; } .hdr__nav a { padding: 8px 13px; border-radius: var(--r-btn); color: var(--on-dark-2); text-decoration: none; font-size: 15px; font-weight: 500; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .hdr__nav a:hover { background: var(--on-dark-fill); color: #fff; } .hdr.is-stuck .hdr__nav a { color: var(--p-2); } .hdr.is-stuck .hdr__nav a:hover { background: var(--bga); color: var(--p); } .hdr__burger { display: none; } @media (max-width: 1023px) { .hdr__nav { display: none; } .hdr__burger { display: flex; justify-content: center;align-items:center;padding:0; width: 40px; height: 40px; margin-inline-start: auto; background: var(--on-dark-fill); border: 1px solid var(--on-dark-br); border-radius: var(--r-btn); color: #fff; cursor: pointer; } .hdr.is-stuck .hdr__burger { background: var(--bga); border-color: var(--br); color: var(--p); } } .drawer { position: fixed; inset: 0; z-index: 200; background: var(--bgd); color: #fff; padding: 80px var(--gutter) 40px; transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-panel); overflow-y: auto; } .rtl .drawer { transform: translateX(-100%); } .scrim { position: fixed; inset: 0; z-index: 90; background: rgba(10, 22, 50, .42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur); } .modal__panel::-webkit-scrollbar { display: none; } .scrim.is-on { opacity: 1; visibility: visible; transition-delay: 0s; } .modal_lay .scrim.is-on { opacity: 0; visibility: hidden; } .ftr__meta dd { display: flex; flex-direction: column; } @media (prefers-reduced-motion: reduce) { .scrim { transition: none; } } .drawer.is-open { transform: translateX(0); } .drawer a { display: block; padding: 14px 0; color: #fff; text-decoration: none; font-size: 20px; font-weight: 700; border-bottom: 1px solid var(--on-dark-br); } .drawer__close { position: absolute; top: 22px; inset-inline-end: var(--gutter); width: 40px; height: 40px;padding:0; display: flex;justify-content:center; align-items: center; background: var(--on-dark-fill); border: 1px solid var(--on-dark-br); border-radius: var(--r-btn); color: #fff; cursor: pointer; } .hero { position: relative; overflow: hidden; background: var(--grad); color: var(--on-dark-2); padding-block: clamp(140px, 18vh, 190px) var(--section-y); } .hero__particles { position: absolute; inset: 0; z-index: 0; } .hero__particles .particles-js-canvas-el { display: block; } .hero__particles::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( to right, rgba(10, 24, 56, .62) 0%, rgba(10, 24, 56, .42) 26%, rgba(10, 24, 56, .10) 46%, rgba(10, 24, 56, 0) 62% ); } .hero > .wrap { position: relative; z-index: 1; } .hero h1 { font-size: var(--fs-h1-hero); line-height: 1.07; color: #fff; margin-block: 18px 16px; max-width: 18ch; } /* The sub-heading under an app page's h1: the sentence that says what the app does, now that the h1 is the app's name. Sized between the h1 and the lede so the three lines read as a descending hierarchy rather than two ledes. */ .hero__sub { font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -.01em; font-weight: 600; color: #fff; margin-block: -6px 14px; max-width: 26ch; } .hero .lede { color: var(--on-dark-2); max-width: 52ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .hero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--on-dark-fill); border: 1px solid var(--on-dark-br); font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; } .hero__badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--a); } .stats { display: grid; gap: 24px; margin-top: 64px; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); } .stat { border-top: 1px solid var(--on-dark-br); padding-top: 16px; } .stat b { display: block; font-size: clamp(20px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.03em; color: #fff; } .stat span { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--on-dark-3); } .marquee { overflow: hidden; padding-block: 36px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { --mq-gap: 64px; display: flex; gap: var(--mq-gap); width: max-content; animation: marquee-rtl 38s linear infinite; } @media (hover: hover) { .marquee:hover .marquee__track { animation-play-state: paused; } } .marquee img { height: 26px; width: auto; filter: grayscale(1); opacity: .5; transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease); } .marquee img:hover { filter: grayscale(0); opacity: 1; } @keyframes marquee-rtl { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--mq-gap) / 2)); } } @keyframes marquee-ltr { from { transform: translateX(calc(-50% - var(--mq-gap) / 2)); } to { transform: translateX(0); } } .marquee__track.is-reverse { animation-name: marquee-ltr; } .rtl .marquee__track { animation-name: marquee-ltr; } .rtl .marquee__track.is-reverse { animation-name: marquee-rtl; } .marquee--cards { padding-block: 12px; } .marquee--cards .marquee__track { --mq-gap: 20px; align-items: stretch; } .marquee--cards .rs-card { width: 340px; flex: none; } .marquee-stack { display: grid; gap: 20px; } @media (max-width: 700px) { .marquee--cards .rs-card { width: 280px; } } .tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--on-dark-fill); border: 1px solid var(--on-dark-br); } .tabs button { padding: 8px 18px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--on-dark-2); font-size: 14px; font-weight: 600; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .tabs button[aria-selected="true"] { background: var(--grad-a); color: #fff; } .slider { position: relative; } .slider__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .slider__track::-webkit-scrollbar { display: none; } .slider__track > * { scroll-snap-align: start; flex: 0 0 clamp(240px, 30%, 340px); } .slider__nav { display: flex; gap: 8px; margin-top: 24px; } .slider__nav button { width: 40px; height: 40px; display: flex; justify-content:center; align-items: center;padding:0; border-radius: var(--r-pill); cursor: pointer; background: var(--on-dark-fill); border: 1px solid var(--on-dark-br); color: #fff; transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease); } .slider__nav button:hover { background: rgba(255, 255, 255, .14); } .slider__nav button[disabled] { opacity: .35; cursor: default; } .section--alt .slider__nav button, .section:not(.section--navy):not(.section--grad) .slider__nav button { background: #fff; border-color: var(--br); color: var(--p); } .acc__item { border-bottom: 1px solid var(--br); } .acc__btn { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 0; background: none; border: 0; cursor: pointer; text-align: start; font-size: var(--fs-h4); font-weight: 700; color: var(--p); } .acc__icon { flex: none; width: 22px; height: 22px; color: var(--m); transition: transform var(--dur) var(--ease); } .acc__item.is-open .acc__icon { transform: rotate(45deg); color: var(--a-ink); } .acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-panel); } .acc__item.is-open .acc__panel { grid-template-rows: 1fr; } .acc__panel > div { overflow: hidden; } .acc__panel p { color: var(--m); padding-bottom: 20px; } .modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: var(--gutter); background: rgba(10, 22, 50, .82); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); } .modal.is-open { opacity: 1; visibility: visible; } .modal__box { width: min(880px, 100%); aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; } .modal__box iframe, .modal__box video { width: 100%; height: 100%; border: 0; } .modal__close { position: absolute; top: 20px; inset-inline-end: 20px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--on-dark-fill); border: 1px solid var(--on-dark-br); color: #fff; cursor: pointer; } .ftr { background: var(--bgd); color: var(--on-dark-3); padding-block: 72px 0; } .ftr__cols { display: grid; gap: 40px 32px; grid-template-columns: 0.85fr 1.15fr 1.15fr 0.95fr 1.1fr; } .ftr .ftr__h { color: #fff; margin-bottom: 16px; font-size: 15px; } .ftr .ftr__h + ul { margin-bottom: 30px; } .ftr ul { list-style: none; margin: 0; padding: 0; } .ftr li { margin-bottom: 10px; } .ftr a { color: var(--on-dark-3); text-decoration: none; font-size: 14.5px; transition: color var(--dur) var(--ease); } .ftr a:hover { color: #fff; } .ftr__meta { margin-bottom: 20px; } .ftr__meta dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: var(--on-dark-4, rgba(255, 255, 255, .5)); margin-bottom: 5px; } .ftr__meta dd { margin: 0 0 16px; font-size: 14.5px; color: #fff; } .ftr__note { font-size: 13px; line-height: 1.6; color: var(--on-dark-3); max-width: 30ch; margin: 20px 0 0; } .ftr__bottom { margin-top: 56px; padding-block: 26px; border-top: 1px solid var(--on-dark-br); display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; } .ftr__mark { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: #fff; text-decoration: none; } .ftr__mark span { color: var(--a-2); } /* --a is 3.79:1 on this navy; --a-2 is 5.79:1 */ .ftr__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; } .ftr__copy { padding-block: 20px; border-top: 1px solid var(--on-dark-br); text-align: center; font-size: 13px; } @media (max-width: 1180px) { .ftr__cols { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .ftr__cols { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; } .ftr__bottom { justify-content: flex-start; } } @media (max-width: 460px) { .ftr__cols { grid-template-columns: minmax(0, 1fr); } } .tlx-motion [data-rv] { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .tlx-motion [data-rv].is-in { opacity: 1; transform: none; } /* ABOVE THE FOLD IS NEVER HIDDEN. Every page's LCP element sits inside `section.hero` — the h1, the lede, the CTAs, the stat block — and every one of them carries data-rv, so the rule above was holding the largest text node on the page at opacity: 0 until JS added .is-in, or until motion-boot's 2.5s failsafe gave up. Measured on mobile: homepage LCP 4397ms of which 4073ms (93%) was render delay; service page 3886ms of which 3260ms (84%). A text node does not take four seconds to paint unless something is suppressing it — this was the something. With .hero exempt the LCP element paints on the first frame, from CSS alone, with no JS anywhere in its path. Reveal still observes these elements and still adds .is-in; this rule just makes both states identical, so nothing below the fold changes and no markup had to move. Do NOT "simplify" this by deleting the rule and stripping data-rv from the hero markup instead. That is the same fix spread across two liquid sections and 29 static pages, and the next hero anyone writes will miss it. Anything that can be the LCP element belongs on this side of the line. Mirrored in assets/css/style.css — change one, change the other. */ .tlx-motion .hero [data-rv], .tlx-motion .hero[data-rv] { opacity: 1; transform: none; transition: none; } /* ...AND `.hero` IS NOT THE ONLY THING ABOVE THE FOLD IN THIS THEME. The static site can rely on .hero because all 30 of its pages open with one. The theme cannot: five templates open with a plain `
` whose

is the LCP element, and the rule above misses every one of them — page.json -> main-page (generic page fallback) cart.json -> main-cart collection.json -> main-collection list-collections.json -> main-list-collections search.json -> main-search So the exemption is anchored to POSITION, not to a class name: whatever section renders first inside
is above the fold by definition, and owns LCP whether or not anyone remembered to call it a hero. Shopify wraps each section in
, so the first child of
is that wrapper; on the static site it is the
itself. `#main` is an id, so this outranks the `[data-rv]` hide rule above without !important. The cost, stated plainly: the first section loses its reveal animation entirely, including any card grid inside it (the collection and search result grids are the notable ones). That is the same trade the .hero rule already makes — .hero exempts hero__media at data-rv="5" too — and it is the right way round: LCP is correctness, the stagger is decoration. Narrow this to `.section__head [data-rv]` if the grids' animation is ever worth more than robustness, but be aware that reintroduces the "the next section anyone writes will miss it" failure this rule exists to prevent. Mirrored in assets/css/style.css — change one, change the other. */ .tlx-motion #main > :first-child [data-rv], .tlx-motion #main > :first-child[data-rv] { opacity: 1; transform: none; transition: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .12s !important; } .btn:hover, .card:hover, .practice:hover, .rs-card:hover, .bento-card:hover, .step-card:hover, .mw-btn:hover { transform: none !important; } [data-rv] { opacity: 1 !important; transform: none !important; } } .rtl .stat { text-align: right; } .rtl .slider__nav svg { transform: scaleX(-1); } .mega-panel { position: absolute; inset-inline-start: 50%; transform: translateX(-50%) translateY(-6px); top: calc(100% + 10px); width: min(1120px, calc(100vw - 2 * var(--gutter))); background: var(--bg); border: 1px solid var(--br-2); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); padding: 28px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s; z-index: 60; } .mega-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear 0s; } .mega-inner { display: grid; gap: 24px; grid-template-columns: repeat(4, 1fr); } .mega-col__head { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--br-2); } .mega-link { display: block; padding: 8px 10px; margin-inline: -10px; border-radius: var(--r-btn); text-decoration: none; transition: background .15s var(--ease); } .mega-link:hover { background: var(--bga); } .mega-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--a); } .mega-link__name { display: block; font-size: 15px; font-weight: 600; color: var(--p); letter-spacing: -.005em; } .mega-link:hover .mega-link__name { color: var(--a-ink); } .mega-link__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--m); max-width: none; } .mega-badge { display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: var(--r-pill); background: rgba(240, 97, 74, .1); color: var(--a-ink); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; } .mega-badge--review { background: rgba(20, 54, 94, .1); color: var(--p-2); } .mega-promo { background: var(--bga); border-radius: var(--r); padding: 20px; align-self: start; } .mega-promo h4 { margin-bottom: 8px; } .mega-promo p { font-size: 13.5px; line-height: 1.55; color: var(--m); max-width: none; margin-bottom: 14px; } @media (max-width: 1023px) { .mega-panel { display: none; } } .hdr__nav-btn { display: flex; align-items: center; gap: 5px; padding: 8px 13px; border-radius: var(--r-btn); background: none; border: 0; cursor: pointer; color: var(--on-dark-2); font-family: inherit; font-size: 15px; font-weight: 500; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .hdr__nav-btn:hover { background: var(--on-dark-fill); color: #fff; } .hdr.is-stuck .hdr__nav-btn { color: var(--p-2); } .hdr.is-stuck .hdr__nav-btn:hover { background: var(--bga); color: var(--p); } .hdr.is-stuck .hdr__inner > .btn-w { background: var(--p); border-color: var(--p); color: #fff; font-size: 14px; padding: 9px 16px; } .hdr.is-stuck .hdr__inner > .btn-w:hover { background: var(--p-2); border-color: var(--p-2); } @media (max-width: 1023px) { .hdr__nav-btn { display: none; } } .drawer__group > button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 0; background: none; border: 0; border-bottom: 1px solid var(--on-dark-br); font-family: inherit; font-size: 20px; font-weight: 700; color: #fff; cursor: pointer; text-align: start; } .drawer__group > button svg { transition: transform .2s var(--ease); flex: none; } .drawer__group > button[aria-expanded="true"] svg { transform: rotate(180deg); } .drawer__panel { display: none; padding-block: 6px 14px; padding-inline-start: 12px; } .drawer__panel.is-open { display: block; } .drawer__panel a { display: block; padding: 8px 0; border-bottom: 0; font-size: 16px; font-weight: 500; color: var(--on-dark-2); text-decoration: none; } .drawer__panel a:hover { color: var(--a); } .marquee__item { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--m); white-space: nowrap; transition: color var(--dur) var(--ease); } .marquee__item:hover { color: var(--p); } .marquee__mark { width: 22px; height: 22px; flex: none; } .app-carousel .slider__track { gap: 24px; align-items: stretch; } .app-carousel .slider__track > * { flex: 0 0 clamp(260px, 46vw, 560px); } @media (max-width: 900px) { .app-carousel .slider__track > * { flex: 0 0 calc(100% - 8px); } } .svc-index__card--feature { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; } .svc-index__card--feature { padding: 24px !important; } .svc_block_wrap{opacity:1;} .app-carousel__controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 24px; } .app-carousel .slider__nav { margin-top: 0; } .slider__dots { display: flex; flex-wrap: wrap; gap: 16px; } .slider__dot { width: 9px; height: 9px; padding: 0; flex: none; border-radius: var(--r-pill); border: 0; cursor: pointer; background: var(--br); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); } .slider__dot:hover { background: rgba(240, 97, 74, .35); } .slider__dot.is-active { background: var(--a-ink); transform: scale(1.2); } .slider__dot:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; } .app-card2 { display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px; padding: 32px; align-items: stretch; } .section_spacing_top{padding-top: 68px;} @media (max-width: 900px) { .section_spacing_top{padding-top: var(--svc-gap);} .app-card2 { grid-template-columns: minmax(0, 1fr); padding: 26px; } } .app-card2__info { display: flex; flex-direction: column; min-width: 0; } .app-card2__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .app-card2__icon { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: var(--r); background: var(--grad-a); color: #fff; } .app-card2__icon svg { width: 30px; height: 30px; } .app-card2__name { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; } .app-card2__desc { font-size: var(--fs-card); line-height: 1.6; color: var(--m); max-width: none; margin-bottom: 20px; } .app-feat { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .app-feat li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-card); line-height: 1.6; color: var(--m); } .app-feat__icon { margin-top: .18em; display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: var(--r-pill); background: rgba(240, 97, 74, .1); color: var(--a-ink); } .app-feat__icon svg { width: 13px; height: 13px; } .app-card2__more { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; align-self: flex-start; font-size: var(--fs-card); font-weight: 600; text-decoration: none; } .app-card2__more svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); } .app-card2__more:hover svg { transform: translateX(4px); } .rtl .app-card2__more:hover svg { transform: translateX(-4px) scaleX(-1); } .rtl .app-card2__more svg { transform: scaleX(-1); } .app-mock { background: var(--bga); border: 1px solid var(--br-2); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; min-height: 220px; } .app-mock__bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--br-2); background: #fff; } .app-mock__bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--br); } .app-mock__bar em { margin-inline-start: 8px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--p); } .app-mock__body { flex: 1; position: relative; padding: 44px 16px 16px; display: flex; flex-direction: column; gap: 10px; justify-content: center; } .app-mock__body::before, .app-mock__body::after { content: ''; position: absolute; top: 16px; height: 10px; border-radius: var(--r-pill); background: var(--br-2); border: 1px solid var(--br); } .app-mock__body::before { inset-inline-start: 16px; width: 74px; } .app-mock__body::after { inset-inline-start: 98px; width: 46px; } .app-mock__opt-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--m); } .app-mock__field { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-btn); background: #fff; border: 1px solid var(--br-2); } .app-mock__field i { width: 24px; height: 24px; flex: none; border-radius: var(--r-btn); background: rgba(240, 97, 74, .12); } .app-mock__field > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .app-mock__field b { font-size: 11px; font-weight: 600; color: var(--p); } .app-mock__field u { font-size: 9px; font-weight: 600; color: var(--m); text-decoration: none; } .app-mock__field u.is-warn { color: var(--a-ink); font-weight: 700; } .app-mock__search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--br); } .app-mock__search i { width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid var(--m); } .app-mock__search b { font-size: 10px; font-weight: 500; color: var(--m); } .app-mock__chiprow { display: flex; gap: 6px; flex-wrap: wrap; } .app-mock__chip { font-size: 10px; font-weight: 700; padding: 6px 10px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--br); color: var(--m); } .app-mock__chip.is-active { background: var(--p); border-color: var(--p); color: #fff; } .app-mock__chip.is-disabled { color: var(--m); text-decoration: line-through; opacity: .6; background: var(--br-2); border-color: var(--br-2); } .app-mock__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-btn); background: #fff; border: 1px solid var(--br-2); } .app-mock__item i { width: 22px; height: 22px; flex: none; border-radius: var(--r-btn); background: rgba(240, 97, 74, .12); } .app-mock__item b { flex: 1; font-size: 11px; font-weight: 600; color: var(--p); } .app-mock__item u { font-size: 10px; font-weight: 700; color: var(--m); text-decoration: none; } .app-mock__badge { align-self: flex-start; font-size: 10px; font-weight: 700; color: var(--a-ink); background: rgba(240, 97, 74, .1); padding: 4px 10px; border-radius: var(--r-pill); } .app-mock__cartfoot { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px dashed var(--br); } .app-mock__cartfoot span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--m); } .app-mock__cartfoot b { font-size: 15px; font-weight: 700; color: var(--p); } .app-mock__cta { text-align: center; padding: 10px; border-radius: var(--r-btn); background: var(--grad-a); font-size: 11px; font-weight: 700; color: var(--p); } .app-mock__cta.is-split { display: flex; align-items: center; justify-content: space-between; } .app-mock__timeline { display: flex; flex-direction: column; } .app-mock__step { display: flex; align-items: center; gap: 10px; position: relative; padding-block: 8px; } .app-mock__step i { width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--br-2); border: 2px solid var(--br); position: relative; z-index: 1; } .app-mock__step:not(:last-child)::before { content: ''; position: absolute; inset-inline-start: 7px; top: 24px; width: 2px; height: 100%; background: var(--br); } .app-mock__step.is-done i { background: var(--a-ink); border-color: var(--a-ink); } .app-mock__step.is-done:not(:last-child)::before { background: var(--a-ink); opacity: .35; } .app-mock__step.is-current i { background: #fff; border-color: var(--a-ink); box-shadow: 0 0 0 3px rgba(240, 97, 74, .18); } .app-mock__step b { flex: 1; font-size: 11px; font-weight: 600; color: var(--p); } .app-mock__step u { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: var(--r-pill); text-decoration: none; background: var(--br-2); color: var(--m); } .app-mock__step.is-done u { background: rgba(240, 97, 74, .12); color: var(--a-ink); } .app-mock__step.is-current u { background: var(--p); color: #fff; } .app-mock__pingline { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 12px; border-radius: var(--r-btn); background: #fff; border: 1px solid var(--br-2); } .app-mock__pingline i { width: 20px; height: 20px; flex: none; border-radius: 50%; background: rgba(240, 97, 74, .14); } .app-mock__pingline b { font-size: 10px; font-weight: 600; color: var(--m); line-height: 1.4; } .app-mock--tracker .app-mock__body { justify-content: flex-start; gap: 14px; } .app-mock__trackhead { display: flex; align-items: baseline; justify-content: space-between; } .app-mock__trackhead b { font-size: 13px; font-weight: 700; color: var(--p); } .app-mock__trackhead u { font-size: 9px; font-weight: 700; text-decoration: none; color: var(--a-ink); background: rgba(240, 97, 74, .12); padding: 3px 8px; border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: .04em; } .app-mock__trackbar { height: 6px; border-radius: var(--r-pill); background: var(--br-2); overflow: hidden; } .app-mock__trackbar i { display: block; width: 70%; height: 100%; border-radius: var(--r-pill); background: var(--grad-a); } .app-mock__trackpins { display: flex; justify-content: space-between; } .app-mock__trackpins span { width: 12px; height: 12px; border-radius: 50%; background: var(--br-2); border: 2px solid var(--br); } .app-mock__trackpins span.is-done { background: var(--a-ink); border-color: var(--a-ink); } .app-mock__trackpins span.is-current { background: #fff; border-color: var(--a-ink); box-shadow: 0 0 0 3px rgba(240, 97, 74, .18); } .app-mock__trackfoot { margin-top: auto; font-size: 10px; font-weight: 600; color: var(--m); text-align: center; padding-top: 14px; border-top: 1px dashed var(--br); } .app-mock__togglerow { display: flex; align-items: center; gap: 8px; } .app-mock__toggle { width: 28px; height: 16px; flex: none; border-radius: var(--r-pill); background: var(--br); position: relative; } .app-mock__toggle i { position: absolute; top: 2px; inset-inline-start: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; } .app-mock__toggle.is-active { background: var(--a-ink); } .app-mock__toggle.is-active i { inset-inline-start: 14px; } .app-mock__togglerow b { font-size: 10px; font-weight: 600; color: var(--p); } .app-mock__swatches { display: flex; gap: 8px; } .app-mock__swatch { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--br); } .app-mock__swatch.is-active { box-shadow: 0 0 0 2px var(--a-ink); } .app-mock__callout { background: #fff; border: 1px solid var(--br); border-radius: var(--r-btn); padding: 8px 10px; box-shadow: var(--shadow); font-size: 9px; line-height: 1.5; color: var(--m); } .app-mock__callout em { display: block; font-style: normal; font-weight: 700; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; color: var(--a-ink); margin-bottom: 2px; } .app-mock__scorewrap { display: flex; align-items: center; gap: 12px; } .app-mock__ring { position: relative; width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; } .app-mock__ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--a-ink) 0deg var(--ring-deg, 260deg), var(--br-2) var(--ring-deg, 260deg) 360deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px)); } .app-mock__ring b { position: relative; z-index: 1; font-size: 15px; font-weight: 700; color: var(--p); } .app-mock__scoremeta { display: flex; flex-direction: column; gap: 2px; } .app-mock__scoremeta span { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--m); } .app-mock__scoremeta em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--p); } .app-mock__chart { display: flex; align-items: flex-end; gap: 7px; height: 48px; } .app-mock__chart i { flex: 1; border-radius: 3px 3px 0 0; background: rgba(240, 97, 74, .22); } .app-mock__chart i:nth-child(1) { height: 45%; } .app-mock__chart i:nth-child(2) { height: 70%; } .app-mock__chart i:nth-child(3) { height: 55%; } .app-mock__chart i:nth-child(4) { height: 85%; background: rgba(240, 97, 74, .4); } .app-mock__chart i:nth-child(5) { height: 62%; } .app-mock__chart i:nth-child(6) { height: 40%; } .eyebrow-pill { display: inline-flex; align-items: center; padding: 6px 16px; margin-bottom: 14px; border-radius: var(--r-pill); background: rgba(240, 97, 74, .1); color: var(--a-ink); font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .svc-card { display: flex; flex-direction: column; } .svc-card h3 { margin-bottom: 8px; } .svc-card .p-desc { margin-bottom: 18px; } .svc-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: var(--r); background: rgba(240, 97, 74, .1); color: var(--a-ink); } .svc-icon svg { width: 24px; height: 24px; } .svc-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; } .svc-list li { position: relative; padding-inline-start: 20px; } .svc-list li::before { content: '→'; position: absolute; inset-inline-start: 0; top: 0; color: var(--a-ink); font-weight: 600; } .rtl .svc-list li::before { display: inline-block; transform: scaleX(-1); } .svc-list a { display: inline-block; color: var(--p); text-decoration: none; font-size: var(--fs-card); font-weight: 500; } .svc-list a:hover { color: var(--a-ink); text-decoration: underline; } .svc-explore { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: var(--fs-card); font-weight: 600; text-decoration: underline; } .svc-card--featured { border-color: rgba(240, 97, 74, .3); background: rgba(240, 97, 74, .025); } .crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 13px; font-weight: 500; } .crumb a { color: var(--on-dark-3); text-decoration: none; transition: color var(--dur) var(--ease); } .crumb a:hover { color: #fff; } .crumb span[aria-current] { color: var(--a-2); } .crumb svg { width: 14px; height: 14px; color: var(--on-dark-3); flex: none; } .hero--svc { padding-block: clamp(120px, 15vh, 156px) clamp(56px, 7vh, 72px); } .hero--svc .lede { margin-top: 18px; } .svc-layout { display: block; } .onpage { position: sticky; top: 104px; } .onpage__title { margin-bottom: 14px; } .onpage__list { display: grid; gap: 2px; border-inline-start: 1px solid var(--br); } .onpage__link { display: block; padding: 8px 0 8px 16px; margin-inline-start: -1px; border-inline-start: 2px solid transparent; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--m); text-decoration: none; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .onpage__link:hover { color: var(--p); } .onpage__link.is-active { color: var(--a-ink); border-inline-start-color: var(--a); font-weight: 600; } .svc-block + .svc-block { margin-top: 72px; } .svc-block > h2 { margin-block: 12px 14px; } .svc-block > .lede { margin-bottom: 32px; } .svc-block > h2 + :not(.lede), .svc-block > .lede + * { margin-top: 40px; } .split { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: center; } .split--flip .split__body { order: 2; } .split__body h3 { margin-bottom: 12px; } .split__body p { color: var(--m); margin-bottom: 18px; } .split img{border-radius: var(--r-lg);} .media-frame { aspect-ratio: 4 / 3; border-radius: var(--r-lg); border: 1px dashed var(--br); background: linear-gradient(135deg, rgba(240, 97, 74, .05), rgba(20, 54, 94, .05)), var(--bga); display: grid; place-items: center; color: var(--m); font-size: 12px; font-weight: 700; /* --mm measured 4.06:1 on this tint; --m is 4.76:1 */ text-transform: uppercase; letter-spacing: .12em; } .cmp-scroll { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--br-2); background: #fff; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .media-frame--art { border-style: solid; border-color: var(--br-2); background: var(--bga); overflow: hidden; display: block; text-transform: none; letter-spacing: normal; } .media-frame--art > svg, .media-frame--art > img { width: 100%; height: 100%; display: block; } @media (max-width: 720px) { .cmp-scroll { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, #000 88%, transparent 100%); } } .cmp { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--fs-card); } .cmp th, .cmp td { padding: 15px 20px; text-align: start; border-bottom: 1px solid var(--br-2); vertical-align: top; } .cmp thead th { background: var(--bga); font-weight: 700; color: var(--p); white-space: nowrap; } .cmp tbody th { font-weight: 600; color: var(--p); } .cmp td { color: var(--m); } .cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; } .cmp .cmp--ours { background: rgba(240, 97, 74, .04); color: var(--p); font-weight: 500; } .cmp thead .cmp--ours { background: rgba(240, 97, 74, .1); color: var(--a-ink); } .proc { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); counter-reset: proc; } .proc__card { padding: 24px; } .proc__n { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--a-ink); } .proc__card h3 { margin-bottom: 8px; font-size: 17px; } .proc__card p { font-size: var(--fs-card); line-height: 1.6; color: var(--m); } .proc__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .proc__tag { padding: 3px 9px; border-radius: var(--r-pill); background: rgba(20, 54, 94, .05); color: var(--m); font-size: 11.5px; font-weight: 600; } .cta-band { text-align: center; } .cta-band h2 { color: #fff; } .cta-band .lede { margin-inline: auto; margin-block: 14px 28px; } .cta-band__row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } @media (max-width: 1080px) { .svc-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } .onpage { position: static; } .onpage__list { display: flex; flex-wrap: wrap; gap: 8px; border-inline-start: 0; } .onpage__link { padding: 7px 13px; border: 1px solid var(--br); border-radius: var(--r-pill); margin-inline-start: 0; } .onpage__link.is-active { border-color: var(--a); } .svc-block + .svc-block { margin-top: 56px; } } @media (max-width: 700px) { .split--flip .split__body { order: 0; } } .bgrid { --bgrid-line: var(--br-2); display: grid; grid-template-columns: repeat(4, 1fr); border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--br-2); } .bgrid__cell { position: relative; display: flex; flex-direction: column; padding: 30px 32px 34px; min-height: 300px; background: transparent; box-shadow: -1px 0 0 0 var(--bgrid-line), 0 -1px 0 0 var(--bgrid-line); transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .bgrid__cell--w2 { grid-column: span 2; } .bgrid__cell h3 { margin-bottom: 10px; font-size: 17px; } .bgrid__cell p { font-size: var(--fs-card); line-height: 1.62; color: var(--m); max-width: 46ch; } .bgrid__cell code { font-family: inherit; font-weight: 600; color: var(--a-ink); background: rgba(240, 97, 74, .09); border-radius: 5px; padding: 1px 6px; font-size: .94em; } .bgrid__art { margin-top: auto; padding-top: 26px; display: grid; place-items: center; } .bgrid__art svg { width: min(100%, 300px); height: auto; display: block; } .bgrid__cell--feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 32px; align-items: center; } .bgrid__cell--feature h3 { font-size: clamp(18px, 2vw, 27px); letter-spacing: -.02em; line-height: 1.2; margin-bottom: 14px; } .bgrid__cell--feature .bgrid__art { margin-top: 0; padding-top: 0; } .bgrid__cell--feature .bgrid__art svg { width: 100%; } .bgrid__facts { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; } .bgrid__facts li { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-card); font-weight: 500; color: var(--p); } .bgrid__facts li::after { content: ''; width: 13px; height: 13px; flex: none; background: currentColor; color: var(--mm); -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; } .bgrid { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E"); } @media (hover: hover) { .bgrid__cell:hover { z-index: 1; background: #fff; box-shadow: 0 0 0 1px var(--br), var(--shadow-lg); } /* Dark skin: the panel is navy, so "lifted" is a lighter wash rather than a white card, and the shadow has to be near-black to register at all. */ .bgrid--dark .bgrid__cell:hover { background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 14px 30px rgba(0, 0, 0, .3); } } /* --- dark skin ------------------------------------------------------------ */ .bgrid--dark { --bgrid-line: var(--on-dark-br); background: var(--bgd); background-image: linear-gradient(135deg, rgba(20, 54, 94, .55) 0%, rgba(10, 22, 50, 0) 60%); color: var(--on-dark-2); box-shadow: none; } .bgrid--dark .bgrid__cell h3 { color: #fff; } .bgrid--dark .bgrid__cell p { color: var(--on-dark-3); } .bgrid--dark .bgrid__cell b { color: #fff; font-weight: 600; } /* Never --a on this ground: at 14px it fails, and --a-ink is a light-ground colour. --a-2 measures 5.87:1 against the lighter end of the navy. */ .bgrid--dark .bgrid__cell code { color: var(--a-2); background: rgba(255, 255, 255, .06); } .bgrid--dark .bgrid__facts li { color: #fff; } .bgrid--dark .bgrid__facts li::after { color: var(--on-dark-3); } /* --- responsive ----------------------------------------------------------- */ @media (max-width: 980px) { .bgrid { grid-template-columns: repeat(2, 1fr); } .bgrid__cell--feature { grid-template-columns: minmax(0, 1fr); gap: 24px; } .bgrid__cell--feature .bgrid__art { margin-top: auto; padding-top: 24px; } } @media (max-width: 620px) { .bgrid { grid-template-columns: minmax(0, 1fr); } .bgrid__cell--w2 { grid-column: span 1; } .bgrid__cell { min-height: 0; padding: 26px 24px 30px; } } /* --- industry icon grid ---------------------------------------------------- Six across, centred label under a line icon. Deliberately not `.card` — these are a vocabulary list, not six things to compare, and boxing them would give each one weight it has not earned. One cell is boxed, and only because it is the one that leads somewhere (B2B links to its own service page). The icons are --a at 1.7px stroke on --bg: 3.14:1, which clears the 3:1 floor for non-text graphics — but only just, and only on --bg. On --bga the same colour measures 2.95:1 and fails, so do NOT move this grid into a `.section--alt`. The LABELS are --p, not accent: an accent label at 15px would be the exact --a-ink trap the house rule warns about. */ .ind-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 8px; } .ind-cell { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 12px; border: 1px solid transparent; border-radius: var(--r); text-align: center; text-decoration: none; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease); } .ind-cell svg { width: 34px; height: 34px; color: var(--a); flex: none; } .ind-cell span { font-size: 15px; font-weight: 600; color: var(--p); letter-spacing: -.01em; } /* No box at rest — the grid reads as a list. The border is the hover response, on every cell, so nothing is permanently outlined for no reason. Gated on `hover: hover`: on touch there is nothing to hover away from, and a sticky outline on the last-tapped cell is the bug this replaced. */ @media (hover: hover) { .ind-cell:hover { border-color: var(--a); background: #fff; } .ind-cell--link:hover { transform: translateY(-2px); box-shadow: var(--shadow); } } /* The one cell that goes somewhere still gets a pointer and the lift; it just no longer advertises itself with a permanent box. */ .ind-cell--link { cursor: pointer; } @media (max-width: 1080px) { .ind-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 760px) { .ind-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 460px) { .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ind-cell { padding: 20px 8px; } } /* --- process stepper ------------------------------------------------------- Horizontal accordion: one open panel, the rest collapsed to a navy spine. Three things used to snap in a single frame and read as a blink: 1. the body went display:none -> block, so it could never animate; 2. it became visible while the panel was still WIDENING, so the copy was laid out in a 78px column and reflowed to full width in front of you; 3. `transition: background` between --grad and --bga did nothing — a gradient cannot be interpolated to a flat colour. So: the open ground is now the BASE background and the navy is a layer on top of it faded by opacity; the body is always in the DOM, collapsed with grid-template-rows and hidden with `visibility` (still out of the accessibility tree, same as display:none was); and on desktop its fade is DELAYED until the width has settled, so nothing reflows in view. ========================================================================== */ .pstack { display: flex; gap: 10px; align-items: stretch; min-height: 430px; } .pstack__item { position: relative; display: flex; flex-direction: column; flex: 0 1 78px; min-width: 78px; border-radius: var(--r-lg); background: var(--bga); /* the OPEN ground; navy is the ::before layer */ color: var(--on-dark-2); overflow: hidden; /* flex-grow, not width/flex-basis: every panel keeps the same 78px basis and only its share of the free space changes, so closed spines never jitter. */ transition: flex-grow var(--dur-slow) var(--ease-panel), color var(--dur-slow) var(--ease); } .pstack__item::before { content: ''; position: absolute; inset: 0; background: var(--grad); pointer-events: none; transition: opacity var(--dur-slow) var(--ease); } .pstack__item.is-open { flex-grow: 1; color: var(--m); } .pstack__item.is-open::before { opacity: 0; } /* Both children sit above the navy layer. Nothing else competes on z-index. */ .pstack__trigger, .pstack__body { position: relative; z-index: 1; } .pstack__trigger { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; padding: 26px 20px; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: padding var(--dur-slow) var(--ease-panel); } /* Open: stop filling the panel, just head it. */ .pstack__item.is-open .pstack__trigger { flex: none; padding-bottom: 0; cursor: default; } .pstack__trigger:focus-visible { outline: 2px solid var(--a); outline-offset: -4px; } /* Number. tnum so the numerals share a width, same rule as the stats band. */ .pstack__n { font-size: 15px; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--on-dark-3); transition: color var(--dur-slow) var(--ease); } .pstack__item.is-open .pstack__n { color: var(--m); } /* --mm was 4.27:1 on --bga; --m is 5.01:1 */ /* Vertical label on a collapsed spine — reads bottom-to-top. Absolutely positioned rather than margin-top:auto so it can FADE instead of being display:none'd: in flow it would keep the open trigger ~100px tall and push the body down. It is aria-hidden and the button carries its own aria-label, so opacity/visibility loses nothing the old display:none kept. On the way back in it waits for the navy to return — white text on --bga is invisible. */ .pstack__spine { position: absolute; inset-inline-start: 20px; bottom: 26px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #fff; white-space: nowrap; transition: opacity var(--dur) var(--ease) var(--dur-slow), visibility 0s linear 0s; } .pstack__item.is-open .pstack__spine { opacity: 0; visibility: hidden; transition: opacity var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast); } /* Collapsed: zero-height grid row + visibility:hidden, which keeps the copy out of the accessibility tree exactly as display:none did. */ .pstack__body { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows var(--dur-slow) var(--ease-panel), opacity var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast); } .pstack__body-clip { overflow: hidden; min-width: 0; } .pstack__body-in { padding: 18px 30px 32px; transform: translateY(8px); transition: transform var(--dur) var(--ease); } .pstack__body h3 { font-size: clamp(19px, 2.1vw, 28px); color: var(--a-ink); margin-bottom: 14px; letter-spacing: -.02em; } .pstack__body p { font-size: var(--fs-card); line-height: 1.65; color: var(--m); max-width: 52ch; } .pstack__lead { font-size: 16px; font-weight: 600; color: var(--p); margin-bottom: 12px; max-width: 46ch; } .pstack__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; } .pstack__tag { padding: 4px 11px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--br); color: var(--m); font-size: 12px; font-weight: 600; } .pstack__item.is-open .pstack__body { grid-template-rows: 1fr; opacity: 1; visibility: visible; /* The delay is the fix. The panel widens for --dur-slow; the copy is held at opacity 0 for exactly that long and fades in once the column has settled, so the 78px -> full-width reflow happens off-screen. Shorten this and the reflow becomes visible again. */ transition: grid-template-rows var(--dur-slow) var(--ease-panel), opacity var(--dur) var(--ease) var(--dur-slow), visibility 0s linear 0s; } .pstack__item.is-open .pstack__body-in { transform: none; transition: transform var(--dur) var(--ease) var(--dur-slow); } /* Below 1024px the spines have nowhere to go — seven at 78px overflow a phone, and vertical text in a full-width strip is unreadable. Stack it: the accordion still works, it just opens downward. */ @media (max-width: 1023px) { .pstack { flex-direction: column; min-height: 0; gap: 8px; } .pstack__item { flex: none; min-width: 0; } .pstack__trigger { flex-direction: row; align-items: center; gap: 16px; padding: 18px 22px; } .pstack__item.is-open .pstack__trigger { padding-bottom: 0; } .pstack__spine { position: static; writing-mode: horizontal-tb; transform: none; letter-spacing: .1em; } /* Nothing is widening here, so there is nothing to wait for: the copy fades in with the height rather than after it. The full --dur-slow delay would just read as lag on a phone. */ .pstack__item.is-open .pstack__body { transition: grid-template-rows var(--dur-slow) var(--ease-panel), opacity var(--dur) var(--ease) .06s, visibility 0s linear 0s; } .pstack__item.is-open .pstack__body-in { transition-delay: .06s; } .pstack__body-in { padding: 16px 22px 26px; } } /* The global reduced-motion rule caps durations but not delays, and a .32s delay on a .12s fade is worse than no animation at all. */ @media (prefers-reduced-motion: reduce) { .pstack__item, .pstack__item::before, .pstack__trigger, .pstack__body, .pstack__body-in, .pstack__spine { transition-delay: 0s !important; } .pstack__body-in { transform: none !important; } } /* --- services index -------------------------------------------------------- Card list for /services/. Reuses the .card visual language rather than introducing another one; the whole card is the link, so the heading carries the arrow and nothing inside needs its own focusable element. */ .svc-index { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); } .svc-index__card { display: block; padding: 26px; background: #fff; border: 1px solid var(--br-2); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); text-decoration: none; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .svc-index__feats { list-style-type: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .svc-index__feats li { position: relative; padding-inline-start: 26px; font-size: var(--fs-card); line-height: 1.5; color: var(--m); } .svc-index__feats li::before { content: ''; position: absolute; inset-inline-start: 0; top: .25em; width: 16px; height: 16px; border-radius: var(--r-pill); background: rgba(240, 97, 74, .12); } .svc-index__feats li::after { content: ''; position: absolute; inset-inline-start: 4.5px; top: .54em; width: 6.5px; height: 3.5px; border-inline-start: 2px solid var(--a-ink); border-block-end: 2px solid var(--a-ink); transform: rotate(-45deg); } .svc-index__card--feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 40px; align-items: center; padding: 32px; border-color: #f0614a; background: rgba(240, 97, 74, .03); grid-column: 1 / -1; } .svc-index__card h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--p); } .svc-index__card p { max-width: 56ch; font-size: var(--fs-card); line-height: 1.6; color: var(--m); margin: 0; } .svc-index__card .mw-arrow { width: 18px; height: 18px; flex: none; color: var(--mm); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); } @media (hover: hover) { .svc-index__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(240, 97, 74, .25); } .svc-index__card:hover .mw-arrow { transform: translateX(4px); color: var(--a-ink); } } .svc-index__card:focus-visible { outline: 2px solid var(--a); outline-offset: 3px; } /* --- booking modal --------------------------------------------------------- The .modal backdrop above was written for the video dialog, whose box is a 16/9 black frame. A form needs a different panel, so the panel is its own class rather than an override that would fight the video one. `visibility` is stepped on the way out only, matching .mega-panel: the fade must be seen before the layer stops taking up space, but on the way in it flips synchronously so the focus() call in Modal.open() actually lands. */ .modal__panel { width: min(560px, 100%); /* 100vh on mobile Safari is the viewport WITHOUT the URL bar, so a tall modal is cut off behind it. dvh tracks the visible area; vh stays as the fallback. */ max-height: calc(100vh - 2 * var(--gutter)); max-height: calc(100dvh - 2 * var(--gutter)); overflow-y: auto; background: var(--bg); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); padding: 32px; position: relative; } .modal__head { margin-bottom: 22px; padding-inline-end: 44px; } .modal__head h2 { font-size: clamp(19px, 2.2vw, 26px); margin-bottom: 8px; } .modal__head p { font-size: var(--fs-card); line-height: 1.6; color: var(--m); margin: 0; max-width: none; } /* Sits inside the light panel, so this needs light-ground colours rather than the .modal__close above, which is styled for the dark video backdrop. */ .modal__x { position: absolute; top: 20px; inset-inline-end: 20px; width: 36px; height: 36px; display: flex; justify-content:center; align-items: center;padding:0; border: 1px solid var(--br); border-radius: var(--r-pill); background: #fff; color: var(--m); cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .modal__x:hover { border-color: var(--a); color: var(--a-ink); } .modal__x svg { width: 17px; height: 17px; } /* The form card inside the modal is already on a light panel, so it drops the card chrome it carries on the navy contact section. */ .modal__panel .sh-form-card { background: none; border: 0; box-shadow: none; padding: 0; } @media (max-width: 560px) { .modal__panel { padding: 26px 20px; } .modal__head { padding-inline-end: 40px; } } /* --- contact detail band --------------------------------------------------- Three columns: phone, address, email. Sits directly under the hero, so it is --bga rather than white — it needs to read as a continuation of the header block rather than as the first content section. */ .cband { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } .cband__item { display: flex; gap: 16px; align-items: flex-start; } .cband__icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: var(--r-btn); background: #fff; border: 1px solid var(--br); color: var(--a-ink); /* icon on white — --a would be 3.14:1 */ } .cband__icon svg { width: 19px; height: 19px; } .cband__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--mm); margin-bottom: 5px; } .cband__value { font-size: var(--fs-card); line-height: 1.55; color: var(--p); font-weight: 500; margin: 0; max-width: none; } .cband__value a { color: var(--p); text-decoration: none; border-bottom: 1px solid var(--br); } .cband__value a:hover { color: var(--a-ink); border-bottom-color: var(--a); } /* --- service-type chips in a form ----------------------------------------- Checkboxes styled as selectable chips. The input stays in the DOM and keeps its native semantics — it is visually hidden, not display:none, so it is still focusable and still announced. The chip is the