html { overflow-x: hidden; max-width: 100%; scroll-behavior: smooth; } body { max-width: 100%; } img, video, iframe, svg { max-width: 100%; } :root { --sxd-ink: #0E0F12; --sxd-ink-2: #16181D; --sxd-ink-3: #1F2229; --sxd-paper: #FFFFFF; --sxd-cream: #F6F5F1; --sxd-accent: #FBBC0E; --sxd-accent-dark: #D99E00; --sxd-accent-text: #8A6300; --sxd-accent-soft: #FEF4D2; --sxd-mute: rgba(14,15,18,0.60); --sxd-mute-2: rgba(14,15,18,0.42); --sxd-rule: rgba(14,15,18,0.10); --sxd-dark-mute: rgba(255,255,255,0.62); --sxd-dark-rule: rgba(255,255,255,0.12); --sxd-head: var(--sxd-font-head, 'Space Grotesk'), system-ui, sans-serif; --sxd-body: var(--sxd-font-body, 'Inter'), system-ui, -apple-system, sans-serif; --sxd-shadow: 0 24px 60px -22px rgba(14,15,18,0.28); } .sxd-root { font-family: var(--sxd-body); color: var(--sxd-ink); background: var(--sxd-paper); } .sxd-root *, .sxd-root *::before, .sxd-root *::after { box-sizing: border-box; } .sxd-root a:not([class*="btn"]):not([class*="cta"]):not([class*="link"]) { color: inherit; } .sxd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 48px; padding: 0.85rem 1.7rem; font-family: var(--sxd-body); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; border: none; border-radius: 999px; transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; } .sxd-btn--primary { background: var(--sxd-accent); color: var(--sxd-ink); box-shadow: 0 10px 26px -10px rgba(251,188,14,0.65); } .sxd-btn--primary:hover { transform: translateY(-2px); background: var(--sxd-accent-dark); box-shadow: 0 16px 34px -10px rgba(251,188,14,0.7); } .sxd-btn--ink { background: var(--sxd-ink); color: #fff; } .sxd-btn--ink:hover { transform: translateY(-2px); background: var(--sxd-ink-3); } .sxd-btn--ghost { background: transparent; color: var(--sxd-ink); border: 1.5px solid var(--sxd-rule); } .sxd-btn--ghost:hover { border-color: var(--sxd-ink); transform: translateY(-2px); } .sxd-btn--on-dark { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.28); } .sxd-btn--on-dark:hover { border-color: var(--sxd-accent); color: var(--sxd-accent); } .sxd-btn__arrow { transition: transform 0.2s ease; } .sxd-btn:hover .sxd-btn__arrow { transform: translateX(4px); } .sxd-section { width: 100%; padding: 6.5rem 2rem; } .sxd-shell { max-width: 1180px; margin: 0 auto; } .sxd-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--sxd-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sxd-accent-text); margin: 0 0 1rem; } .sxd-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--sxd-accent); display: block; } .sxd-eyebrow--on-dark { color: var(--sxd-accent); } .sxd-h2 { font-family: var(--sxd-head); font-weight: 700; font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.06; letter-spacing: -0.03em; margin: 0 0 1.1rem; color: var(--sxd-ink); } .sxd-lede { font-size: 1.08rem; line-height: 1.7; color: var(--sxd-mute); margin: 0; max-width: 60ch; } .sxd-h2--on-dark { color: #fff; } .sxd-lede--on-dark { color: var(--sxd-dark-mute); } .sxd-promo__input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; padding: 0; border: 0; pointer-events: none; } .sxd-promo__input:focus-visible ~ .sxd-promo .sxd-promo__close { outline: 2px solid var(--sxd-accent); outline-offset: 2px; border-radius: 6px; } .sxd-promo__input:checked ~ .sxd-promo { display: none; } .sxd-promo { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.7rem 3rem; background: var(--sxd-ink); color: #fff; width: 100%; } .sxd-promo__text { font-family: var(--sxd-body); font-size: 0.85rem; margin: 0; text-align: center; color: rgba(255,255,255,0.9); } .sxd-promo__text strong { color: var(--sxd-accent); font-weight: 700; } .sxd-promo__text a { color: var(--sxd-accent) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .sxd-promo__close { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); font-size: 0.8rem; cursor: pointer; line-height: 1; transition: background 0.18s; } .sxd-promo__close:hover { background: rgba(255,255,255,0.22); } .sxd-nav { position: sticky; top: 0; z-index: 90; width: 100%; border-bottom: 1px solid var(--sxd-rule); transition: box-shadow 0.25s ease; } .sxd-nav__glass { background: rgba(255,255,255,0.9); backdrop-filter: saturate(180%) blur(14px); transition: background 0.25s ease; } .sxd-nav.is-scrolled { box-shadow: 0 8px 30px -18px rgba(14,15,18,0.3); } .sxd-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 95; transform: scaleX(var(--sxd-progress, 0)); transform-origin: 0 50%; background: linear-gradient(90deg, var(--sxd-accent), var(--sxd-accent-dark)); pointer-events: none; } [data-sxd-draw] { --sxd-draw: 1; } html.sxd-reveal-ready [data-sxd-draw] { --sxd-draw: 0; } html.sxd-reveal-ready [data-sxd-draw].is-drawn { --sxd-draw: 1; } .sxd-process__grid { position: relative; } .sxd-process__grid::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 3.1rem; height: 2px; background: linear-gradient(90deg, var(--sxd-accent), rgba(251,188,14,0)); transform: scaleX(var(--sxd-draw, 1)); transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(0.22,1,0.36,1); } .sxd-process__grid > * { position: relative; z-index: 1; } @media (max-width: 900px) { .sxd-process__grid::before { display: none; } } .sxd-stats__cell { position: relative; border-left: 0; } .sxd-stats__cell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--sxd-accent); transform: scaleY(var(--sxd-draw, 1)); transform-origin: 50% 0; transition: transform 0.75s cubic-bezier(0.22,1,0.36,1); } .sxd-hero__inner { transform: translate3d(0, calc(var(--sxd-hero-p, 0) * -42px), 0); opacity: calc(1 - var(--sxd-hero-p, 0) * 0.55); will-change: transform; } .sxd-hero__glow { transform: translate3d(calc(var(--sxd-hero-p, 0) * 5vw), calc(var(--sxd-hero-p, 0) * 8vh), 0); } .sxd-stickycta__lede::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 0.55rem; border-radius: 50%; background: #16A34A; vertical-align: middle; animation: sxd-pulse 2.4s ease-out infinite; } @keyframes sxd-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,0.45); } 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } } .sxd-nav__bar { transition: padding 0.22s ease; } .sxd-logo { transition: font-size 0.22s ease; } .sxd-logo__mark { transition: width 0.22s ease, height 0.22s ease, border-radius 0.22s ease; } .sxd-logo__mark svg { transition: width 0.22s ease, height 0.22s ease; } .sxd-nav.is-scrolled { margin-bottom: 0.9rem; } .sxd-nav.is-scrolled .sxd-nav__bar { padding-top: 0.45rem; padding-bottom: 0.45rem; } .sxd-nav.is-scrolled .sxd-logo { font-size: 1.18rem; } .sxd-nav.is-scrolled .sxd-logo__mark { width: 32px; height: 32px; border-radius: 9px; } .sxd-nav.is-scrolled .sxd-logo__mark svg { width: 19px; height: 19px; } .sxd-nav.is-scrolled .sxd-nav__glass { background: rgba(255,255,255,0.96); } .sxd-nav__bar { position: relative; max-width: 76.25em; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.9rem 2rem; } .sxd-logo { display: inline-flex; align-items: center; min-height: 44px; gap: 0.6rem; text-decoration: none; font-family: var(--sxd-head); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.04em; color: var(--sxd-ink); white-space: nowrap; } .sxd-logo__mark { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--sxd-accent); color: var(--sxd-ink); flex-shrink: 0; } .sxd-logo__mark svg { width: 22px; height: 22px; display: block; fill: currentColor; } .sxd-logo__dot { color: var(--sxd-accent); } .sxd-navlinks { display: flex; align-items: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0; } .sxd-navlinks > li { position: relative; } .sxd-navlinks > li.sxd-has-mega { position: static; } .sxd-navlink { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0.4rem 0.85rem; font-family: var(--sxd-body); font-weight: 500; font-size: 0.95rem; color: var(--sxd-ink); text-decoration: none; border-radius: 9px; transition: color 0.18s, background 0.18s; cursor: pointer; background: transparent; border: none; } .sxd-navlink:hover, .sxd-navlink[aria-expanded="true"] { color: var(--sxd-accent-text); background: var(--sxd-accent-soft); } .sxd-navlink__caret { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s ease; } .sxd-has-mega:hover .sxd-navlink__caret, .sxd-navlink[aria-expanded="true"] .sxd-navlink__caret { transform: rotate(-135deg) translateY(-1px); } .sxd-mega { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(10px); opacity: 0; visibility: hidden; background: #fff; border: 1px solid var(--sxd-rule); border-radius: 18px; box-shadow: 0 40px 90px -30px rgba(14,15,18,0.4); z-index: 100; transition: opacity 0.2s ease 0.42s, transform 0.24s cubic-bezier(0.22,1,0.36,1) 0.42s, visibility 0s linear 0.42s; } .sxd-mega__scroll { padding: 1.6rem; max-height: calc(100vh - 96px); overflow-y: auto; border-radius: 18px; } .sxd-has-mega:hover .sxd-mega, .sxd-has-mega:focus-within .sxd-mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: 0s; } .sxd-mega::before { content: ""; position: absolute; top: -12px; left: -100vw; right: -100vw; height: 12px; } .sxd-navlink::after { content: ""; position: absolute; left: 0; right: 0; top: -15px; bottom: -15px; } .sxd-navlink { position: relative; z-index: 101; } .sxd-nav__bar:hover .sxd-has-mega:not(:hover):not(:focus-within) .sxd-mega, .sxd-navlinks:has(> li:hover) .sxd-has-mega:not(:hover):not(:focus-within) .sxd-mega { opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(10px); transition-delay: 0s; } .sxd-mega--services { width: min(780px, calc(100vw - 3rem)); } .sxd-mega--locations { width: min(620px, calc(100vw - 3rem)); } .sxd-mega__grid { display: grid; gap: 0.4rem 1.4rem; } .sxd-mega--services .sxd-mega__grid { grid-template-columns: 1fr 1fr; } .sxd-mega--locations .sxd-mega__grid { grid-template-columns: 1fr 1fr; } .sxd-mega__item { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.7rem 0.85rem; border-radius: 12px; text-decoration: none; transition: background 0.16s ease, transform 0.16s ease; } .sxd-mega__item:hover { background: var(--sxd-cream); transform: translateX(3px); } .sxd-mega__item-title { font-family: var(--sxd-head); font-weight: 600; font-size: 0.95rem; color: var(--sxd-ink); letter-spacing: -0.01em; } .sxd-mega__item:hover .sxd-mega__item-title { color: var(--sxd-accent-text); } .sxd-mega__item-desc { font-size: 0.8rem; line-height: 1.45; color: var(--sxd-mute); } .sxd-mega__foot { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--sxd-rule); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .sxd-mega__foot-text { font-size: 0.85rem; color: var(--sxd-mute); margin: 0; } .sxd-mega__promo { grid-column: 1 / -1; margin-top: 0.4rem; padding: 1rem 1.1rem; border-radius: 14px; background: var(--sxd-ink); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .sxd-mega__promo p { margin: 0; font-size: 0.85rem; color: rgba(255,255,255,0.75); } .sxd-mega__promo strong { color: var(--sxd-accent); } .sxd-nav__cta { display: inline-flex; flex-shrink: 0; } .sxd-nav__cta .sxd-btn--primary { min-height: 44px; padding: 0.55rem 1.2rem; font-size: 0.88rem; box-shadow: 0 4px 12px -6px rgba(251,188,14,0.55); } .sxd-nav__cta .sxd-btn--primary:hover { box-shadow: 0 6px 16px -6px rgba(251,188,14,0.6); } .sxd-nav__cta .sxd-navlink { white-space: nowrap; } .sxd-nav__burger { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--sxd-rule); border-radius: 12px; background: #fff; cursor: pointer; } .sxd-sr-only, .sxd-nav__burger .sxd-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; background: none; } .sxd-nav__burger .sxd-sr-only::before, .sxd-nav__burger .sxd-sr-only::after { content: none; } .sxd-nav__burger span { display: block; width: 20px; height: 2px; background: var(--sxd-ink); position: relative; } .sxd-nav__burger span::before, .sxd-nav__burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--sxd-ink); } .sxd-nav__burger span::before { top: -6px; } .sxd-nav__burger span::after { top: 6px; } .sxd-mobile__toggle { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0,0,0,0); overflow: hidden; } .sxd-mobile__toggle:focus-visible ~ .sxd-nav__glass .sxd-nav__burger { outline: 2px solid var(--sxd-accent-dark); outline-offset: 2px; } .sxd-mobile { position: fixed; inset: 0; z-index: 200; background: var(--sxd-ink); color: #fff; display: none; flex-direction: column; padding: 1.4rem 1.6rem; overflow-y: auto; } .sxd-mobile__toggle:checked ~ .sxd-mobile { display: flex; animation: sxd-drawer-in 0.3s cubic-bezier(0.22,1,0.36,1); } @keyframes sxd-drawer-in { from { opacity: 0; transform: translateX(14%); } to { opacity: 1; transform: none; } } .sxd-mobile__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; } .sxd-mobile__close { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; background: transparent; color: #fff; font-size: 1.3rem; cursor: pointer; } .sxd-mobile__group-title { font-family: var(--sxd-body); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sxd-accent); margin: 1.6rem 0 0.5rem; } .sxd-mobile__link { display: block; min-height: 44px; padding: 0.7rem 0; font-family: var(--sxd-head); font-weight: 600; font-size: 1.15rem; color: #fff !important; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.08); } .sxd-mobile__sublink { display: block; min-height: 44px; padding: 0.55rem 0; font-size: 0.95rem; color: rgba(255,255,255,0.75) !important; text-decoration: none; } .sxd-mobile__cta { margin-top: 2rem; } .sxd-hero { position: relative; isolation: isolate; min-height: 94vh; min-height: 94svh; display: flex; align-items: center; overflow: hidden; } .sxd-hero__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: sxd-kenburns 22s ease-out both; } @keyframes sxd-kenburns { from { transform: scale(1.14); } to { transform: scale(1.02); } } .sxd-hero__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .sxd-hero__video { display: none; } } .sxd-offer, .sxd-branch { display: grid; grid-template-columns: 1fr auto; gap: 1.6rem; align-items: center; padding: 1.8rem 2rem; border-radius: 16px; border: 1px solid var(--sxd-rule); } .sxd-offer { background: var(--sxd-accent-soft, #FFF7E0); border-color: rgba(251,188,14,0.45); } .sxd-branch { background: var(--sxd-cream, #FAF8F3); } .sxd-offer__title, .sxd-branch__title { font-family: var(--sxd-display); font-size: 1.35rem; line-height: 1.3; margin: 0 0 0.5rem; color: var(--sxd-ink); } .sxd-offer__text, .sxd-branch__text { font-size: 0.99rem; line-height: 1.65; color: var(--sxd-mute); margin: 0; max-width: 60ch; } .sxd-offer__cta, .sxd-branch__cta { white-space: nowrap; } @media (max-width: 820px) { .sxd-offer, .sxd-branch { grid-template-columns: 1fr; } .sxd-offer__cta, .sxd-branch__cta { justify-self: start; } } .sxd-hero__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(103deg, rgba(10,11,14,0.96) 0%, rgba(12,13,17,0.88) 38%, rgba(13,14,18,0.55) 66%, rgba(16,17,22,0.32) 100%), linear-gradient(to bottom, rgba(10,11,14,0.55) 0%, rgba(10,11,14,0) 22%, rgba(10,11,14,0) 68%, rgba(10,11,14,0.5) 100%); } .sxd-hero__grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(120% 90% at 12% 40%, #000 0%, transparent 70%); mask-image: radial-gradient(120% 90% at 12% 40%, #000 0%, transparent 70%); } .sxd-hero__glow { position: absolute; z-index: 1; top: -18%; right: -6%; width: 52vw; height: 52vw; background: radial-gradient(circle, rgba(251,188,14,0.26) 0%, rgba(251,188,14,0) 60%); pointer-events: none; } .sxd-hero__inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; width: 100%; padding: 6.5rem 2rem 4.5rem; display: grid; grid-template-columns: 1.06fr 0.94fr; align-items: center; gap: 3rem; } .sxd-hero__copy { max-width: 40rem; } .sxd-hero-in { transform: translateY(22px); animation: sxd-hero-rise 0.9s cubic-bezier(0.22,1,0.36,1) 0.15s forwards; } .sxd-hero__panel.sxd-hero-in { animation-delay: 0.35s; } @keyframes sxd-hero-rise { to { opacity: 1; transform: none; } } .sxd-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1rem; border-radius: 999px; background: rgba(251,188,14,0.14); border: 1px solid rgba(251,188,14,0.3); color: var(--sxd-accent); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 1.6rem; } .sxd-hero__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sxd-accent); box-shadow: 0 0 0 0 rgba(251,188,14,0.6); animation: sxd-pulse 2.4s infinite; } @keyframes sxd-pulse { 0% { box-shadow: 0 0 0 0 rgba(251,188,14,0.55); } 70% { box-shadow: 0 0 0 10px rgba(251,188,14,0); } 100% { box-shadow: 0 0 0 0 rgba(251,188,14,0); } } .sxd-hero__title { font-family: var(--sxd-head); font-weight: 700; font-size: clamp(2.4rem, 4.9vw, 4.05rem); line-height: 1.04; letter-spacing: -0.035em; color: #fff; margin: 0 0 1.25rem; max-width: 15ch; animation: sxd-h1-settle .9s cubic-bezier(0.22,1,0.36,1) both; } @keyframes sxd-h1-settle { from { transform: scale(1.035); } to { transform: scale(1); } } .sxd-hero__title em { font-style: normal; color: var(--sxd-accent); position: relative; display: inline-block; animation: sxd-h1-em-reveal 1.1s 0.15s both; } @keyframes sxd-h1-em-reveal { 0% { opacity: 1; transform: translateY(6px); animation-timing-function: cubic-bezier(.65,.05,.36,1); } 8% { opacity: 1; } 46% { transform: translateY(0); } 60% { transform: scale(1); animation-timing-function: ease-in-out; } 78% { transform: scale(1.02); } 100% { opacity: 1; transform: none; } } .sxd-hero__title em::after { content: ""; position: absolute; left: 0.02em; right: 0.06em; bottom: -0.04em; height: 0.05em; border-radius: 999px; background: var(--sxd-accent); transform: scaleX(0); transform-origin: 0 50%; animation: sxd-h1-underline .5s cubic-bezier(0.22,1,0.36,1) 1.05s both; } @keyframes sxd-h1-underline { to { transform: scaleX(1); } } .sxd-hero__sub { font-size: 1.1rem; line-height: 1.62; color: rgba(255,255,255,0.82); max-width: 50ch; margin: 0 0 2rem; } .sxd-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .sxd-hero__note { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: rgba(255,255,255,0.72); margin: 1.1rem 0 0; } .sxd-hero__note svg { color: var(--sxd-accent); } .sxd-hero__trust { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-wrap: wrap; gap: 1rem 2.2rem; align-items: center; } .sxd-hero__trust-item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: rgba(255,255,255,0.72); font-weight: 500; } .sxd-hero__trust-item svg { color: var(--sxd-accent); flex-shrink: 0; } .sxd-hero__scroll { position: absolute; z-index: 2; bottom: 1.6rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.6); display: flex; flex-direction: column; align-items: center; gap: 0.4rem; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; } .sxd-hero__scroll-line { width: 1px; height: 34px; background: linear-gradient(to bottom, var(--sxd-accent), transparent); animation: sxd-scrolldrop 1.8s infinite; } @keyframes sxd-scrolldrop { 0% { opacity: 0; transform: scaleY(0.3); transform-origin: top; } 50% { opacity: 1; } 100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; } } .sxd-hero__panel { position: relative; justify-self: end; width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 1rem; } .sxd-hero__panel-card { position: relative; border-radius: 20px; padding: 1.4rem 1.5rem; background: linear-gradient(160deg, rgba(30,32,38,0.72), rgba(16,17,22,0.62)); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 30px 70px -30px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.08); backdrop-filter: blur(14px) saturate(150%); } .sxd-hero__panel-card--chart { transform: translateY(-6px); } .sxd-hero__panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; } .sxd-hero__panel-label { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.01em; color: rgba(255,255,255,0.6); } .sxd-hero__panel-delta { font-family: var(--sxd-head); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--sxd-accent); } .sxd-hero__chart { display: flex; align-items: flex-end; gap: 6px; height: 92px; } .sxd-hero__bar { flex: 1; min-width: 0; border-radius: 4px 4px 2px 2px; background: linear-gradient(to top, rgba(251,188,14,0.35), var(--sxd-accent)); transform-origin: bottom; transform: scaleY(0); animation: sxd-bar-grow 0.7s cubic-bezier(0.22,1,0.36,1) forwards; } .sxd-hero__bar:last-child { background: linear-gradient(to top, var(--sxd-accent-dark), #FFD34D); box-shadow: 0 0 18px -2px rgba(251,188,14,0.55); } @keyframes sxd-bar-grow { to { transform: scaleY(1); opacity: 1; } } .sxd-hero__panel-foot { display: block; margin-top: 1rem; font-size: 0.75rem; line-height: 1.5; color: rgba(255,255,255,0.5); } .sxd-hero__panel-card--rating { display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.5rem; } .sxd-hero__rating-stars { display: inline-flex; gap: 2px; color: var(--sxd-accent); flex-shrink: 0; } .sxd-hero__rating-text { margin: 0; font-size: 0.9rem; color: rgba(255,255,255,0.82); } .sxd-hero__rating-text b { font-family: var(--sxd-head); font-size: 1.05rem; color: #fff; } .sxd-marquee { background: var(--sxd-ink); padding: 1.5rem 0; overflow: hidden; border-bottom: 1px solid var(--sxd-dark-rule); } .sxd-marquee__track { display: flex; gap: 3.5rem; width: max-content; animation: sxd-marquee 34s linear infinite; } .sxd-marquee:hover .sxd-marquee__track { animation-play-state: paused; } @keyframes sxd-marquee { to { transform: translateX(-50%); } } .sxd-marquee__item { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--sxd-head); font-weight: 600; font-size: 1.05rem; color: rgba(255,255,255,0.5); white-space: nowrap; letter-spacing: -0.01em; } .sxd-marquee__item svg { color: var(--sxd-accent); } .sxd-stats { background: var(--sxd-cream); } .sxd-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .sxd-stats__cell { padding: 1.4rem 1.6rem; border-left: 2px solid var(--sxd-accent); } .sxd-stats__num { font-family: var(--sxd-head); font-weight: 700; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; color: var(--sxd-ink); } .sxd-stats__label { margin: 0.5rem 0 0; font-size: 0.92rem; line-height: 1.4; color: var(--sxd-mute); } .sxd-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .sxd-intro__media { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--sxd-shadow); aspect-ratio: 4/5; } .sxd-intro__media img { width: 100%; height: 100%; object-fit: cover; } .sxd-intro__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none; } .sxd-intro__badge { z-index: 2; } @media (prefers-reduced-motion: reduce) { .sxd-intro__video, .sxd-cta__video { display: none; } } .sxd-intro__badge { position: absolute; left: 1.4rem; bottom: 1.4rem; background: var(--sxd-accent); color: var(--sxd-ink); border-radius: 14px; padding: 1rem 1.3rem; font-family: var(--sxd-head); box-shadow: 0 16px 40px -16px rgba(0,0,0,0.5); } .sxd-intro__badge b { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1; } .sxd-intro__badge span { font-size: 0.8rem; font-weight: 500; } .sxd-intro__points { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; } .sxd-intro__points li { display: flex; gap: 0.75rem; font-size: 1rem; line-height: 1.55; color: var(--sxd-ink); } .sxd-intro__check { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--sxd-accent-soft); color: var(--sxd-accent-dark); display: inline-flex; align-items: center; justify-content: center; } .sxd-services { background: var(--sxd-paper); } .sxd-services__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 3rem; } .sxd-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .sxd-card { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 2rem 1.9rem; background: #fff; border: 1.5px solid var(--sxd-rule); border-radius: 20px; text-decoration: none; transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease, border-color 0.2s ease; overflow: hidden; } .sxd-card::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--sxd-accent); transition: width 0.3s ease; } .sxd-card:hover { transform: translateY(-6px); box-shadow: var(--sxd-shadow); border-color: transparent; } .sxd-card:hover::after { width: 100%; } .sxd-card__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--sxd-ink); color: var(--sxd-accent); display: inline-flex; align-items: center; justify-content: center; transition: background 0.25s, color 0.25s, transform 0.25s; } .sxd-card:hover .sxd-card__icon { background: var(--sxd-accent); color: var(--sxd-ink); transform: rotate(-6deg) scale(1.06); } .sxd-card__title { font-family: var(--sxd-head); font-weight: 600; font-size: 1.22rem; letter-spacing: -0.02em; color: var(--sxd-ink); margin: 0; } .sxd-card__text { font-size: 0.95rem; line-height: 1.6; color: var(--sxd-mute); margin: 0; flex: 1; } .sxd-card__link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; font-weight: 600; font-size: 0.9rem; color: var(--sxd-accent-text) !important; text-decoration: none; } .sxd-card__link span { transition: transform 0.2s ease; } .sxd-card:hover .sxd-card__link span { transform: translateX(4px); } .sxd-svc-row { display: grid; grid-template-columns: 64px 1fr; gap: 1.5rem; padding: 2.5rem 0; border-top: 1px solid var(--sxd-rule); scroll-margin-top: 120px; } .sxd-svc-row:last-child { border-bottom: 1px solid var(--sxd-rule); } .sxd-svc-row__icon { width: 64px; height: 64px; border-radius: 16px; background: var(--sxd-accent-soft); color: var(--sxd-accent-dark); display: inline-flex; align-items: center; justify-content: center; } .sxd-svc-row__title { font-family: var(--sxd-head); font-weight: 700; font-size: 1.55rem; letter-spacing: -0.02em; margin: 0 0 0.6rem; } .sxd-svc-row__blurb { font-size: 1.02rem; line-height: 1.7; color: var(--sxd-mute); margin: 0 0 1.2rem; max-width: 60ch; } .sxd-svc-row__tags { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 0; } .sxd-svc-row__tags li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; border-radius: 999px; background: var(--sxd-cream); font-size: 0.82rem; font-weight: 500; color: var(--sxd-ink); } .sxd-svc-row__tags li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sxd-accent); } .sxd-process { background: var(--sxd-cream); } .sxd-process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; } .sxd-step { position: relative; padding: 2rem 1.6rem; background: #fff; border-radius: 18px; border: 1px solid var(--sxd-rule); transition: transform 0.25s ease, box-shadow 0.25s ease; } .sxd-step:hover { transform: translateY(-5px); box-shadow: var(--sxd-shadow); } .sxd-step__num { font-family: var(--sxd-head); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--sxd-accent-text); letter-spacing: -0.03em; } .sxd-step__title { font-family: var(--sxd-head); font-weight: 600; font-size: 1.15rem; margin: 1rem 0 0.5rem; color: var(--sxd-ink); } .sxd-step__text { font-size: 0.92rem; line-height: 1.6; color: var(--sxd-mute); margin: 0; } .sxd-results { background: var(--sxd-ink); position: relative; overflow: hidden; } .sxd-results::before { content: ""; position: absolute; top: -30%; left: -10%; width: 40vw; height: 40vw; background: radial-gradient(circle, rgba(251,188,14,0.12), transparent 65%); } .sxd-results::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.6; background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(120% 100% at 85% 10%, #000 0%, transparent 70%); mask-image: radial-gradient(120% 100% at 85% 10%, #000 0%, transparent 70%); } .sxd-results__grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; } .sxd-results__cell { padding: 2rem; border: 1px solid var(--sxd-dark-rule); border-radius: 18px; background: rgba(255,255,255,0.02); } .sxd-results__num { font-family: var(--sxd-head); font-weight: 700; font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1; color: var(--sxd-accent); letter-spacing: -0.03em; } .sxd-results__label { font-family: var(--sxd-head); font-weight: 600; font-size: 1.05rem; color: #fff; margin: 0.8rem 0 0.4rem; } .sxd-results__text { font-size: 0.9rem; line-height: 1.6; color: var(--sxd-dark-mute); margin: 0; } .sxd-locations { background: var(--sxd-paper); } .sxd-loc__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 3rem; } .sxd-loc__pill { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.3rem 1.4rem; border-radius: 16px; border: 1.5px solid var(--sxd-rule); text-decoration: none; background: #fff; transition: transform 0.22s ease, border-color 0.2s ease, background 0.2s ease; } .sxd-loc__pill:hover { transform: translateY(-4px); border-color: var(--sxd-accent); background: var(--sxd-accent-soft); } .sxd-loc__city { display: flex; align-items: center; gap: 0.5rem; font-family: var(--sxd-head); font-weight: 600; font-size: 1.05rem; color: var(--sxd-ink); letter-spacing: -0.01em; } .sxd-loc__city svg { color: var(--sxd-accent-dark); flex-shrink: 0; } .sxd-loc__meta { font-size: 0.82rem; color: var(--sxd-mute); } .sxd-testi { background: var(--sxd-cream); } .sxd-testi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; } .sxd-testi__card { display: flex; flex-direction: column; gap: 1.3rem; padding: 2.2rem 2rem; background: #fff; border-radius: 20px; border: 1px solid var(--sxd-rule); transition: transform 0.25s ease, box-shadow 0.25s ease; } .sxd-testi__card:hover { transform: translateY(-5px); box-shadow: var(--sxd-shadow); } .sxd-testi__stars { display: flex; gap: 3px; color: var(--sxd-accent); } .sxd-testi__quote { font-size: 1.02rem; line-height: 1.65; color: var(--sxd-ink); margin: 0; flex: 1; } .sxd-testi__author { display: flex; align-items: center; gap: 0.85rem; } .sxd-testi__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--sxd-ink); color: var(--sxd-accent); display: inline-flex; align-items: center; justify-content: center; font-family: var(--sxd-head); font-weight: 700; font-size: 0.95rem; flex-shrink: 0; } .sxd-testi__name { font-family: var(--sxd-head); font-weight: 600; font-size: 0.98rem; color: var(--sxd-ink); margin: 0; } .sxd-testi__role { font-size: 0.82rem; color: var(--sxd-mute); margin: 0.1rem 0 0; } .sxd-faq__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3.5rem; align-items: start; } .sxd-faq__list { display: grid; gap: 0.9rem; } .sxd-faq__item { border: 1.5px solid var(--sxd-rule); border-radius: 16px; background: #fff; overflow: hidden; transition: border-color 0.2s ease; } .sxd-faq__item[open] { border-color: var(--sxd-accent); } .sxd-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: 1.2rem 1.5rem; cursor: pointer; list-style: none; font-family: var(--sxd-head); font-weight: 600; font-size: 1.05rem; color: var(--sxd-ink); } .sxd-faq__q::-webkit-details-marker { display: none; } .sxd-faq__icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--sxd-accent-soft); color: var(--sxd-accent-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: transform 0.25s ease, background 0.2s ease; } .sxd-faq__item[open] .sxd-faq__icon { transform: rotate(45deg); background: var(--sxd-accent); color: var(--sxd-ink); } .sxd-faq__a { padding: 0 1.5rem 1.4rem; font-size: 0.97rem; line-height: 1.7; color: var(--sxd-mute); margin: 0; } .sxd-cta { position: relative; isolation: isolate; overflow: hidden; background: var(--sxd-ink); } .sxd-cta__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.22; } .sxd-cta__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.42; pointer-events: none; } .sxd-cta__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(120deg, rgba(14,15,18,0.96), rgba(14,15,18,0.7)); } .sxd-cta__inner { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; text-align: center; } .sxd-cta__title { font-family: var(--sxd-head); font-weight: 700; font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.06; letter-spacing: -0.03em; color: #fff; margin: 0 0 1.1rem; } .sxd-cta__title em { font-style: normal; color: var(--sxd-accent); } .sxd-cta__sub { font-size: 1.1rem; line-height: 1.65; color: rgba(255,255,255,0.78); margin: 0 auto 2.3rem; max-width: 54ch; } .sxd-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .sxd-phero { position: relative; isolation: isolate; overflow: hidden; background: var(--sxd-ink); padding: 8rem 2rem 4rem; } .sxd-phero__bg { position: absolute; left: 0; right: 0; top: -70px; z-index: 0; width: 100%; height: calc(100% + 140px); object-fit: cover; opacity: 0.28; } .sxd-phero__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(110deg, rgba(14,15,18,0.95), rgba(14,15,18,0.6)); } .sxd-phero__inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; } .sxd-phero__crumbs { font-size: 0.82rem; color: rgba(255,255,255,0.55); margin-bottom: 1rem; } .sxd-phero__crumbs a { color: var(--sxd-accent) !important; text-decoration: none; } .sxd-phero__title { font-family: var(--sxd-head); font-weight: 700; font-size: clamp(2.3rem, 5vw, 3.8rem); line-height: 1.04; letter-spacing: -0.03em; color: #fff; margin: 0 0 1rem; max-width: 20ch; } .sxd-phero__lede { font-size: 1.1rem; line-height: 1.65; color: rgba(255,255,255,0.8); max-width: 60ch; margin: 0; } .sxd-contact__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 4rem; align-items: start; } .sxd-contact__info-item { display: flex; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--sxd-rule); } .sxd-contact__info-item:last-child { border-bottom: none; } .sxd-contact__info-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--sxd-accent-soft); color: var(--sxd-accent-dark); display: inline-flex; align-items: center; justify-content: center; } .sxd-contact__info-label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sxd-accent-text); margin: 0 0 0.2rem; } .sxd-contact__info-value { font-family: var(--sxd-head); font-weight: 600; font-size: 1.05rem; color: var(--sxd-ink) !important; text-decoration: none; display: block; } .sxd-contact__info-note { font-size: 0.83rem; color: var(--sxd-mute); margin: 0.2rem 0 0; } .sxd-form { background: #fff; border: 1.5px solid var(--sxd-rule); border-radius: 22px; padding: 2.5rem; box-shadow: var(--sxd-shadow); display: flex; flex-direction: column; gap: 1.2rem; } .sxd-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .sxd-form__field { display: flex; flex-direction: column; gap: 0.45rem; } .sxd-form__label { font-family: var(--sxd-body); font-weight: 600; font-size: 0.85rem; color: var(--sxd-ink); } .sxd-form__label span { color: var(--sxd-accent-text); } .sxd-form__input, .sxd-form__textarea { font-family: var(--sxd-body); font-size: 0.95rem; color: var(--sxd-ink); padding: 0.85rem 1rem; border: 1.5px solid var(--sxd-rule); border-radius: 12px; background: var(--sxd-cream); transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; width: 100%; } .sxd-form__input:focus, .sxd-form__textarea:focus { outline: none; border-color: var(--sxd-accent); background: #fff; box-shadow: 0 0 0 4px rgba(251,188,14,0.16); } .sxd-form__textarea { resize: vertical; min-height: 130px; } .sxd-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .sxd-form__submit { min-height: 52px; margin-top: 0.4rem; } .sxd-form__status { font-size: 0.9rem; font-weight: 500; padding: 0.75rem 1rem; border-radius: 10px; margin: 0; } .sxd-form__status[data-state="success"] { background: var(--sxd-accent-soft); color: #7a5a00; } .sxd-form__status[data-state="error"] { background: #FEECEC; color: #B42318; } .sxd-blog { background: var(--sxd-paper); } .sxd-blog__featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border-radius: 22px; overflow: hidden; border: 1.5px solid var(--sxd-rule); text-decoration: none; margin-bottom: 3rem; transition: box-shadow 0.28s ease, transform 0.28s ease; } .sxd-blog__featured:hover { box-shadow: var(--sxd-shadow); transform: translateY(-4px); } .sxd-blog__featured-img { position: relative; min-height: 340px; overflow: hidden; } .sxd-blog__featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .sxd-blog__featured:hover .sxd-blog__featured-img img { transform: scale(1.04); } .sxd-blog__featured-body { padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem; background: #fff; } .sxd-blog__badge { align-self: flex-start; padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--sxd-accent-soft); color: var(--sxd-accent-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .sxd-blog__featured-title { font-family: var(--sxd-head); font-weight: 700; font-size: 1.7rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--sxd-ink); margin: 0; } .sxd-blog__excerpt { font-size: 0.98rem; line-height: 1.65; color: var(--sxd-mute); margin: 0; } .sxd-blog__meta { font-size: 0.85rem; color: var(--sxd-mute); display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .sxd-blog__meta strong { color: var(--sxd-ink); } .sxd-blog__readmore { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--sxd-accent-text) !important; text-decoration: none; } .sxd-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .sxd-blog__card { display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--sxd-rule); border-radius: 18px; overflow: hidden; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease; } .sxd-blog__card:hover { transform: translateY(-5px); box-shadow: var(--sxd-shadow); border-color: transparent; } .sxd-blog__card-img { height: 200px; overflow: hidden; background: var(--sxd-cream); } .sxd-blog__card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .sxd-blog__card:hover .sxd-blog__card-img img { transform: scale(1.05); } .sxd-blog__card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; } .sxd-blog__card-cat { align-self: flex-start; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sxd-accent-text); } .sxd-blog__card-title { font-family: var(--sxd-head); font-weight: 600; font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--sxd-ink); margin: 0; } .sxd-blog__card-meta { font-size: 0.82rem; color: var(--sxd-mute); margin: auto 0 0; } .sxd-article { max-width: 720px; margin: 0 auto; } .sxd-article p { font-size: 1.08rem; line-height: 1.8; color: #2a2c33; margin: 0 0 1.5rem; } .sxd-article h2 { font-family: var(--sxd-head); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; margin: 2.5rem 0 1rem; color: var(--sxd-ink); } .sxd-article ul, .sxd-article ol { margin: 0 0 1.5rem; padding-left: 1.4rem; } .sxd-article ul { list-style: disc; } .sxd-article ol { list-style: decimal; } .sxd-article li { font-size: 1.08rem; line-height: 1.8; color: #2a2c33; margin: 0 0 0.55rem; padding-left: 0.25rem; } .sxd-article li::marker { color: var(--sxd-accent-text); font-weight: 700; } .sxd-article li:last-child { margin-bottom: 0; } .sxd-article li > ul, .sxd-article li > ol { margin: 0.55rem 0 0; } .sxd-article li > ul { list-style: circle; } .sxd-article table { width: 100%; border-collapse: collapse; margin: 0 0 1.75rem; font-size: 1rem; line-height: 1.65; color: #2a2c33; } .sxd-article th, .sxd-article td { border: 1px solid var(--sxd-rule); padding: 0.75rem 0.9rem; text-align: left; vertical-align: top; } .sxd-article thead th { background: var(--sxd-cream); color: var(--sxd-ink); font-family: var(--sxd-head); font-weight: 700; } .sxd-article tbody th { font-weight: 700; color: var(--sxd-ink); } .sxd-article tbody tr:nth-child(even) { background: rgba(14,15,18,0.02); } @media (max-width: 700px) { .sxd-article table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .sxd-article table > * { min-width: 34rem; } } .sxd-article h4 { font-family: var(--sxd-head); font-weight: 700; font-size: 1.05rem; margin: 1.75rem 0 0.6rem; color: var(--sxd-ink); } .sxd-article blockquote { margin: 0 0 1.5rem; padding: 0.4rem 0 0.4rem 1.2rem; border-left: 3px solid var(--sxd-accent); color: #3a3d45; font-style: italic; } .sxd-article blockquote > :last-child { margin-bottom: 0; } .sxd-article hr { border: 0; border-top: 1px solid var(--sxd-rule); margin: 2.25rem 0; } .sxd-article img, .sxd-article figure { max-width: 100%; height: auto; margin: 0 0 1.5rem; border-radius: 12px; } .sxd-article figure img { margin: 0 0 0.6rem; } .sxd-article figcaption { font-size: 0.92rem; color: var(--sxd-mute); } .sxd-article pre { margin: 0 0 1.5rem; padding: 1rem 1.1rem; overflow-x: auto; background: var(--sxd-cream); border: 1px solid var(--sxd-rule); border-radius: 12px; font-size: 0.92rem; line-height: 1.6; } .sxd-article code { font-size: 0.94em; background: var(--sxd-cream); padding: 0.1rem 0.35rem; border-radius: 5px; } .sxd-article pre code { background: none; padding: 0; } .sxd-article h1 { font-family: var(--sxd-head); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; margin: 2.5rem 0 1rem; color: var(--sxd-ink); } .sxd-article h3 { font-family: var(--sxd-head); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; margin: 2rem 0 0.75rem; color: var(--sxd-ink); } .sxd-modal { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(14,15,18,0.72); backdrop-filter: blur(3px); animation: sxd-modal-in 0.18s ease-out; } @keyframes sxd-modal-in { from { opacity: 0; } to { opacity: 1; } } .sxd-modal__panel { position: relative; width: min(660px, 100%); max-height: 92vh; overflow-y: auto; background: var(--sxd-paper); border-radius: 20px; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.55); } .sxd-modal__close { position: absolute; top: 0.75rem; right: 0.75rem; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--sxd-cream); color: var(--sxd-ink); font-size: 1rem; cursor: pointer; line-height: 1; } .sxd-modal__close:hover { background: var(--sxd-accent); } .sxd-modal__head { padding: 2rem 2rem 0.5rem; } .sxd-modal__title { font-family: var(--sxd-head); font-weight: 700; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -0.02em; margin: 0.4rem 0 0.6rem; color: var(--sxd-ink); } .sxd-modal__sub { font-size: 0.98rem; line-height: 1.6; color: var(--sxd-mute); margin: 0; } .sxd-modal__body { padding: 1.4rem 2rem 2rem; } .sxd-modal__alt { margin: 1.1rem 0 0; font-size: 0.9rem; color: var(--sxd-mute); } .sxd-modal__link { background: none; border: 0; padding: 0; font: inherit; color: var(--sxd-accent-text); font-weight: 600; cursor: pointer; text-decoration: underline; } .sxd-modal__scheduler { width: 100%; height: 560px; border: 0; display: block; border-radius: 12px; background: var(--sxd-cream); } .sxd-cta__note { margin: 1.1rem 0 0; font-size: 0.92rem; color: rgba(255,255,255,0.7); } .sxd-cta__note a { color: #fff; } @media (max-width: 640px) { .sxd-modal { padding: 0; align-items: flex-end; } .sxd-modal__panel { max-height: 94vh; border-radius: 20px 20px 0 0; } .sxd-modal__head { padding: 1.6rem 1.25rem 0.4rem; } .sxd-modal__body { padding: 1.1rem 1.25rem 1.6rem; } .sxd-modal__scheduler { height: 66vh; } } .sxd-collage { position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--sxd-shadow); background: var(--sxd-ink); } .sxd-collage__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .sxd-collage__face { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(1) contrast(1.04); transition: filter 0.35s ease, transform 0.35s ease; } .sxd-collage:hover .sxd-collage__face { filter: none; } .sxd-collage__face:hover { transform: scale(1.04); } @media (prefers-reduced-motion: reduce) { .sxd-collage__face { transition: none; } .sxd-collage__face:hover { transform: none; } } .sxd-team__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 2rem 1rem; } .sxd-team__person { text-align: center; } .sxd-team__photo { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; background: var(--sxd-cream); } .sxd-team__name { font-family: var(--sxd-head); font-weight: 700; font-size: 0.95rem; margin: 0.8rem 0 0.15rem; color: var(--sxd-ink); } .sxd-team__role { font-size: 0.76rem; line-height: 1.4; color: var(--sxd-mute); margin: 0; } .sxd-show__rail { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.5rem 6vw 2.5rem; scrollbar-width: thin; } .sxd-show__slide { flex: 0 0 min(560px, 82vw); scroll-snap-align: center; text-decoration: none; } .sxd-show__frames { position: relative; display: block; } .sxd-show__slide .sxd-show__shot { border-radius: 16px; border: 1.5px solid var(--sxd-rule); aspect-ratio: 16 / 10; box-shadow: var(--sxd-shadow); } .sxd-show__phone { position: absolute; right: -0.75rem; bottom: -1.25rem; width: 21%; border-radius: 12px; border: 2px solid var(--sxd-paper); box-shadow: 0 18px 40px -14px rgba(0,0,0,0.45); background: var(--sxd-paper); } .sxd-show__slide .sxd-show__label { padding: 1.5rem 0 0; } @media (max-width: 640px) { .sxd-show__phone { display: none; } .sxd-show__rail { padding-left: 1.25rem; padding-right: 1.25rem; } } .sxd-show__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; } @media (min-width: 641px) { .sxd-show__grid:has(> :only-child) { grid-template-columns: minmax(0, 620px); } } .sxd-show__card { display: block; text-decoration: none; border: 1.5px solid var(--sxd-rule); border-radius: 16px; overflow: hidden; background: var(--sxd-paper); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .sxd-show__card:hover { transform: translateY(-4px); box-shadow: var(--sxd-shadow); border-color: var(--sxd-accent); } .sxd-show__shot { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; } .sxd-show__label { display: block; padding: 0.9rem 1.1rem; font-family: var(--sxd-head); font-weight: 600; font-size: 0.95rem; color: var(--sxd-ink); } .sxd-work__stats { display: flex; flex-wrap: wrap; gap: 0.25rem 1.2rem; margin: 0 0 0.9rem; font-size: 0.86rem; color: var(--sxd-mute); } .sxd-work__stats b { font-family: var(--sxd-head); font-size: 1.05rem; color: var(--sxd-accent-text); margin-right: 0.25rem; } .sxd-legal__list { margin: 0 0 1.5rem; padding-left: 1.4rem; display: grid; gap: 0.6rem; } .sxd-legal__list li { font-size: 1.02rem; line-height: 1.75; color: #2a2c33; } .sxd-article__byline { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; background: var(--sxd-cream); border-radius: 14px; margin-bottom: 2.5rem; } .sxd-article__avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--sxd-ink); color: var(--sxd-accent); display: inline-flex; align-items: center; justify-content: center; font-family: var(--sxd-head); font-weight: 700; font-size: 0.9rem; flex-shrink: 0; } .sxd-footer { background: var(--sxd-ink); color: #fff; padding: 5rem 2rem 2.5rem; } .sxd-footer__inner { max-width: 1180px; margin: 0 auto; } .sxd-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--sxd-dark-rule); } .sxd-footer__brand-logo { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--sxd-head); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.04em; color: #fff !important; text-decoration: none; } .sxd-footer__brand-text { margin: 1.1rem 0 1.5rem; font-size: 0.94rem; line-height: 1.65; color: var(--sxd-dark-mute); max-width: 34ch; } .sxd-footer__socials { display: flex; gap: 0.6rem; } .sxd-footer__social { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--sxd-dark-rule); display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7) !important; transition: background 0.2s, color 0.2s, border-color 0.2s; } .sxd-footer__social:hover { background: var(--sxd-accent); color: var(--sxd-ink) !important; border-color: var(--sxd-accent); } .sxd-footer__col-title { font-family: var(--sxd-head); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sxd-accent); margin: 0 0 1.1rem; } .sxd-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; } .sxd-footer__links a { font-size: 0.92rem; color: var(--sxd-dark-mute) !important; text-decoration: none; transition: color 0.18s; min-height: 24px; display: inline-block; } .sxd-footer__links a:hover { color: #fff !important; } .sxd-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 2rem; } .sxd-footer__copy { font-size: 0.85rem; color: var(--sxd-mute-2); color: rgba(255,255,255,0.45); margin: 0; } .sxd-footer__legal { display: flex; gap: 1.3rem; flex-wrap: wrap; } .sxd-footer__legal a, .sxd-phero__crumbs a, .sxd-card__link, .sxd-article p a, .sxd-rail__link, .sxd-promo__text a, .sxd-cta__note a, .sxd-lede a, .tenant-consent-banner a { padding-block: 4px; margin-block: -4px; display: inline-block; } :is(.sxd-article p, .sxd-article li, .sxd-article td, .sxd-article th, .sxd-article blockquote) a:not([class*="btn"]):not([class*="cta"]):not([class*="link"]) { color: var(--sxd-accent-text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color 0.15s ease, text-decoration-thickness 0.15s ease; } :is(.sxd-article p, .sxd-article li, .sxd-article td, .sxd-article th, .sxd-article blockquote) a:not([class*="btn"]):not([class*="cta"]):not([class*="link"]):hover { color: var(--sxd-ink); text-decoration-thickness: 2px; } .sxd-footer__legal a { font-size: 0.85rem; color: rgba(255,255,255,0.5) !important; text-decoration: none; } .sxd-footer__legal a:hover { color: var(--sxd-accent) !important; } html.sxd-reveal-ready .sxd-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); } html.sxd-reveal-ready .sxd-reveal.is-visible { opacity: 1; transform: none; } @media (max-width: 1080px) { .sxd-hero__inner { grid-template-columns: 1fr; } .sxd-hero__panel { display: none; } .sxd-hero__copy { max-width: 46rem; } } @media (max-width: 1000px) { .sxd-stats__grid { grid-template-columns: repeat(2, 1fr); } .sxd-services__grid, .sxd-testi__grid, .sxd-blog__grid, .sxd-results__grid { grid-template-columns: repeat(2, 1fr); } .sxd-process__grid { grid-template-columns: repeat(2, 1fr); } .sxd-loc__grid { grid-template-columns: repeat(3, 1fr); } .sxd-intro__grid, .sxd-faq__grid, .sxd-contact__grid { grid-template-columns: 1fr; gap: 2.5rem; } .sxd-blog__featured { grid-template-columns: 1fr; } .sxd-footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; } } .sxd-nav__quick { display: none; align-items: center; gap: 0.55rem; flex-shrink: 0; margin-left: auto; } .sxd-nav__quick-tel { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 0.75rem; border-radius: 12px; border: 1px solid var(--sxd-rule); background: #fff; color: var(--sxd-ink); text-decoration: none; font-weight: 650; font-size: 0.92rem; white-space: nowrap; } .sxd-nav__quick-tel:hover { border-color: var(--sxd-accent); color: var(--sxd-accent-text); } .sxd-ico { width: 19px; height: 19px; flex: 0 0 auto; } .sxd-nav__quick-btn { min-height: 44px; padding: 0 1rem; font-size: 0.9rem; white-space: nowrap; } .sxd-nav__quick-short { display: none; } :root { --sxd-stickycta-h: 0px; } .sxd-stickycta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: rgba(255,255,255,0.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--sxd-rule); box-shadow: 0 -12px 30px -20px rgba(10,10,10,0.5); padding: 0.55rem 0.9rem; padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px)); } .sxd-stickycta__inner { max-width: 76.25em; margin: 0 auto; display: flex; align-items: center; gap: 0.6rem; } .sxd-stickycta__lede { margin: 0 auto 0 0; font-weight: 600; font-size: 0.95rem; color: var(--sxd-mute); } .sxd-stickycta__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 46px; padding: 0 1.05rem; border-radius: 12px; font-family: var(--sxd-head); font-weight: 700; font-size: 0.95rem; text-decoration: none; white-space: nowrap; } .sxd-stickycta__btn--ghost { border: 1px solid var(--sxd-rule); background: #fff; color: var(--sxd-ink); } .sxd-stickycta__btn--ghost:hover { border-color: var(--sxd-accent); color: var(--sxd-accent-text); } .sxd-stickycta__btn--primary { background: var(--sxd-accent); color: var(--sxd-ink); box-shadow: 0 10px 26px -12px rgba(251,188,14,0.7); } .sxd-stickycta__btn--primary:hover { background: var(--sxd-accent-dark); } .sxd-stickycta__short { display: none; } body:has(.sxd-form:not(.sxd-modal__body)) .sxd-stickycta { display: none; } @media (max-width: 67.5em) { .sxd-navlinks, .sxd-nav__cta { display: none; } .sxd-nav__burger { display: inline-flex; } .sxd-nav__quick { display: inline-flex; } .sxd-stickycta { display: block; } :root { --sxd-stickycta-h: 69px; } body { padding-bottom: var(--sxd-stickycta-h); } } body:has(.sxd-form:not(.sxd-modal__body)) { padding-bottom: 0; } body:has(.sxd-stickycta) .tenant-consent-banner { bottom: calc(1rem + var(--sxd-stickycta-h)) !important; } @media (max-width: 42em) { .sxd-nav__quick-num { display: none; } .sxd-nav__quick-tel { padding: 0 0.6rem; } } @media (max-width: 34em) { .sxd-nav__quick .sxd-nav__quick-long { display: none; } .sxd-nav__quick .sxd-nav__quick-short { display: inline; } } @media (max-width: 30em) { .sxd-nav__quick { display: none; } } @media (max-width: 34em) { .sxd-stickycta__lede { display: none; } .sxd-stickycta__inner > .sxd-stickycta__btn { flex: 1 1 0; padding: 0 0.6rem; } } @media (max-width: 22em) { .sxd-stickycta .sxd-stickycta__long { display: none; } .sxd-stickycta .sxd-stickycta__short { display: inline; } } @media (min-width: 67.5625em) and (max-width: 73.75em) { .sxd-nav__bar { gap: 1rem; padding-left: 1.25rem; padding-right: 1.25rem; } .sxd-navlinks { gap: 0.15rem; } .sxd-navlink { padding-left: 0.6rem; padding-right: 0.6rem; } } @media (max-width: 640px) { .sxd-section { padding: 4.5rem 1.3rem; } .sxd-services__grid, .sxd-testi__grid, .sxd-blog__grid, .sxd-results__grid, .sxd-process__grid, .sxd-stats__grid, .sxd-loc__grid { grid-template-columns: 1fr; } .sxd-form { padding: 1.75rem; } .sxd-form__row { grid-template-columns: 1fr; } .sxd-footer__top { grid-template-columns: 1fr; } .sxd-svc-row { grid-template-columns: 1fr; gap: 1rem; } .sxd-hero__inner { padding: 7rem 1.3rem 4rem; } .sxd-phero { padding: 7rem 1.3rem 3rem; } } @media (prefers-reduced-motion: reduce) { .sxd-root *, .sxd-reveal { animation: none !important; transition: none !important; } [data-sxd-draw] { --sxd-draw: 1 !important; } .sxd-hero__inner { transform: none !important; opacity: 1 !important; } .sxd-hero__glow { transform: none !important; } .sxd-progress { display: none; } .sxd-stickycta__lede::before { animation: none !important; } .sxd-reveal { opacity: 1 !important; transform: none !important; } .sxd-hero-in { opacity: 1; transform: none; } .sxd-hero__bg { transform: scale(1.04); } .sxd-hero__bar { opacity: 1; transform: scaleY(1); } .sxd-hero__title em, .sxd-hero__title em::after { opacity: 1; clip-path: none; transform: none !important; } html { scroll-behavior: auto; } } .sxd-qa { border-left: 3px solid var(--sxd-accent); background: var(--sxd-cream, #FAF8F3); padding: 1.6rem 1.8rem; border-radius: 0 10px 10px 0; max-width: 62ch; } .sxd-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .sxd-field::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(ellipse 48% 55% at 18% 14%, rgba(251,188,14,0.16), transparent 62%), radial-gradient(ellipse 42% 50% at 84% 80%, rgba(255,255,255,0.07), transparent 66%); animation: sxd-drift 26s ease-in-out infinite alternate; } .sxd-field::after { content: ""; position: absolute; inset: -1px; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%); } .sxd-field--light::before { background: radial-gradient(ellipse 48% 55% at 12% 10%, rgba(251,188,14,0.20), transparent 62%), radial-gradient(ellipse 40% 48% at 88% 86%, rgba(14,15,18,0.05), transparent 66%); } .sxd-field--light::after { background-image: linear-gradient(rgba(14,15,18,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(14,15,18,0.035) 1px, transparent 1px); } @keyframes sxd-drift { from { transform: translate3d(-2.5%, -1.5%, 0) scale(1.02); } to { transform: translate3d(2.5%, 2%, 0) scale(1.06); } } .sxd-root [id] { scroll-margin-top: 104px; } .sxd-has-field { position: relative; isolation: isolate; } .sxd-has-field > .sxd-shell, .sxd-has-field > .sxd-footer__inner { position: relative; z-index: 1; } html.sxd-reveal-ready .sxd-reveal--left { transform: translateX(-26px); } html.sxd-reveal-ready .sxd-reveal--right { transform: translateX(26px); } html.sxd-reveal-ready .sxd-reveal--scale { transform: scale(0.955); } html.sxd-reveal-ready .sxd-reveal--left.is-visible, html.sxd-reveal-ready .sxd-reveal--right.is-visible, html.sxd-reveal-ready .sxd-reveal--scale.is-visible { transform: none; } [data-sxd-parallax] { transform: translate3d(0, var(--sxd-par-y, 0px), 0); will-change: transform; } .sxd-card { position: relative; isolation: isolate; } .sxd-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(18rem 18rem at var(--sxd-mx, 50%) var(--sxd-my, 50%), rgba(251,188,14,0.13), transparent 60%); opacity: 0; transition: opacity 0.3s ease; } .sxd-card:hover::after { opacity: 1; } @media (pointer: coarse) { .sxd-card::after { display: none; } } @media (prefers-reduced-motion: reduce) { .sxd-field::before, .sxd-field::after { animation: none !important; transition: none !important; } [data-sxd-parallax] { transform: none !important; } } .sxd-qa__wrap { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, 1fr); gap: 3rem; align-items: start; } .sxd-rail { position: sticky; top: 104px; display: grid; gap: 1rem; } .sxd-rail__card { background: #fff; border: 1.5px solid var(--sxd-rule); border-radius: 18px; padding: 1.3rem; display: block; text-decoration: none; } .sxd-rail__eyebrow { display: block; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--sxd-mute); margin: 0 0 0.7rem; } .sxd-rail__shot { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-radius: 12px; border: 1px solid var(--sxd-rule); background: var(--sxd-cream); } .sxd-rail__name { display: block; font-family: var(--sxd-head); font-weight: 600; font-size: 1rem; color: var(--sxd-ink); margin: 0.85rem 0 0.35rem; } .sxd-rail__meta { display: block; font-size: 0.82rem; line-height: 1.5; color: var(--sxd-mute); } .sxd-rail__go { display: block; margin-top: 0.7rem; font-weight: 600; font-size: 0.85rem; color: var(--sxd-accent-text); } .sxd-rail__demo { transition: transform 0.24s cubic-bezier(0.22,1,0.36,1), box-shadow 0.24s ease, border-color 0.2s ease; } .sxd-rail__demo:hover { transform: translateY(-3px); box-shadow: var(--sxd-shadow); border-color: var(--sxd-accent); } .sxd-rail__cta { background: var(--sxd-cream); border-color: transparent; } .sxd-rail__ctatext { font-size: 0.85rem; line-height: 1.6; color: var(--sxd-mute); margin: 0 0 1rem; } .sxd-rail__btn { width: 100%; justify-content: center; } .sxd-rail__link { display: block; margin-top: 0.75rem; text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--sxd-accent-text); text-decoration: none; } .sxd-rail__link:hover { text-decoration: underline; } .sxd-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2rem 3.5rem; align-items: start; } .sxd-split .sxd-prose--wide > p { max-width: 62ch; } @media (max-width: 900px) { .sxd-split { grid-template-columns: 1fr; gap: 1.4rem; } } .sxd-ind__icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: var(--sxd-accent-soft); color: var(--sxd-accent-dark); transition: background 0.24s ease, color 0.24s ease; } .sxd-loc__pill:hover .sxd-ind__icon { background: var(--sxd-accent); color: var(--sxd-ink); } .sxd-loc__city { display: flex; align-items: center; gap: 0.6rem; } @media (prefers-reduced-motion: reduce) { .sxd-ind__icon { transition: none; } } .sxd-rail__jump { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; } .sxd-rail__jump a { display: block; padding: 0.5rem 0; font-size: 0.9rem; color: var(--sxd-ink); text-decoration: none; border-bottom: 1px solid var(--sxd-rule); } .sxd-rail__jump li:last-child a { border-bottom: 0; } .sxd-rail__jump a:hover { color: var(--sxd-accent-text); } .sxd-rail__facts { margin: 0; display: grid; gap: 0.75rem; } .sxd-rail__facts dt { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sxd-mute); font-weight: 700; } .sxd-rail__facts dd { margin: 0.15rem 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--sxd-ink); } @media (max-width: 1024px) { .sxd-qa__wrap { grid-template-columns: 1fr; gap: 2rem; } .sxd-rail { position: static; grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .sxd-rail { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .sxd-rail__demo { transition: none; } .sxd-rail__demo:hover { transform: none; } } .sxd-qa__q { font-family: var(--sxd-body); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sxd-mute); margin: 0 0 0.7rem; font-weight: 700; } .sxd-qa__a { font-size: 1.06rem; line-height: 1.75; color: var(--sxd-ink); margin: 0; } .sxd-prose > p { font-size: 1.02rem; line-height: 1.8; color: var(--sxd-mute); max-width: 68ch; } .sxd-prose > p + p { margin-top: 1.15rem; } .sxd-points { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, 1fr); } @media (max-width: 820px) { .sxd-points { grid-template-columns: 1fr; } } @media (min-width: 821px) { .sxd-points:has(> :only-child) { grid-template-columns: 1fr; } } .sxd-point { background: #fff; border: 1px solid var(--sxd-line, rgba(10,10,10,0.09)); border-radius: 12px; padding: 1.5rem 1.6rem; } .sxd-point__title { font-family: var(--sxd-display); font-size: 1.12rem; line-height: 1.35; margin: 0 0 0.6rem; color: var(--sxd-ink); } .sxd-point__text { font-size: 0.97rem; line-height: 1.7; color: var(--sxd-mute); margin: 0; } .sxd-rel { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); } @media (max-width: 820px) { .sxd-rel { grid-template-columns: 1fr; } } .sxd-rel__card { display: block; background: #fff; border: 1px solid var(--sxd-line, rgba(10,10,10,0.09)); border-radius: 12px; padding: 1.3rem 1.4rem; text-decoration: none; transition: border-color .2s ease, transform .2s ease; } .sxd-rel__card:hover { border-color: var(--sxd-ink); transform: translateY(-2px); } .sxd-rel__name { font-family: var(--sxd-display); font-size: 1.05rem; margin: 0 0 0.4rem; color: var(--sxd-ink); } .sxd-rel__blurb { font-size: 0.92rem; line-height: 1.6; color: var(--sxd-mute); margin: 0; } .sxd-spokes { display: grid; gap: 0.7rem; grid-template-columns: repeat(2, 1fr); } @media (max-width: 720px) { .sxd-spokes { grid-template-columns: 1fr; } } .sxd-spoke { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.75rem 1rem; border: 1px solid var(--sxd-line, rgba(10,10,10,0.09)); border-radius: 9px; text-decoration: none; background: #fff; transition: border-color .2s ease; } .sxd-spoke:hover { border-color: var(--sxd-ink); } .sxd-spoke__name { font-weight: 700; color: var(--sxd-ink); font-size: 0.97rem; } .sxd-spoke__scope { font-size: 0.82rem; color: var(--sxd-mute); }