/* ============================================================================= Austra Digital v12 — layout/type system measured from the licensed Framer reference, recoloured to Austra cobalt, plus the v12 motion/interaction layer specified in docs/ANIMATION-BRIEF-v12.md. Rules held throughout: · every pre-animation hidden state is gated behind .js-enabled, so with JS disabled the page renders fully visible · .js-fallback (set by the net) force-unhides everything · prefers-reduced-motion collapses every sequence to its final visible state · no animation of width/height/top/left during scroll — transform+opacity only ========================================================================== */ /* Self-hosted Archivo (variable, latin subset). Single file covers 300–800; no Google Fonts dependency — fully offline. */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/archivo.woff2') format('woff2'); } :root { /* surfaces */ --bg: #fbfbfc; --card: #ffffff; --band: #f1f2f4; --ink: #131519; /* deep charcoal — CTA band */ /* text */ --text: #24272d; --muted: #4e535b; --tertiary: #666c76; /* lines + accent v15 keeps v14's monochrome discipline — labels stay silver-grey — and gives ONE colour to the things that mean "act" or "active": CTAs, prices, ticks, the rail, active states. Emerald is applied as a GRADIENT on surfaces (buttons, badges, dots, rails) and as a SOLID on text, because a gradient on text makes contrast unverifiable. --accent is the solid; --grad-* are the surface stops. */ --hairline: #d6d9de; --accent: #3d444e; /* brushed steel — 9.5:1 on the page, 8.8:1 on band sections */ --accent-dk: #2f353d; --accent-mid:#5a616c; /* silver-grey, for labels — unchanged from v14 */ /* SILVER FOLLOWS THE GOLD INVERSION, NOT THE COBALT RULE. Polished metal is a LIGHT surface, so it cannot carry white text — it carries a near-black label. And silver as TEXT is impossible: a darkened silver is just grey, so the solid becomes the brushed steel above. v17b lifts the whole ramp. The material still comes from --metal-inset, not from colour, but the face now sits close to the page at the lit corner and only separates at the shaded one. The SILHOUETTE is carried by the bottom stop plus the cast shadow — not by darkening the face. Stops vs --on-metal: #f8fafc = 17.3 · #edf1f6 = 16.0 · #cfd6e0 = 12.4. Composited under the label, worst case in any state: 13.0:1. Darkest composited face pixel vs the page: 1.63:1, down from 2.11:1 in v17a — lighter, but still a defined object. An earlier attempt that ENDED light (~1.06:1 everywhere) dissolved into the page; this one only STARTS light. That is the whole difference. */ --on-metal: #14161a; /* the label colour on any metal surface */ --gem-lit: #ffffff; /* brightest polish — decoration only (hero rail) */ --grad-a: #f8fafc; /* lit corner — 17.3:1 vs --on-metal */ --grad-m: #edf1f6; /* body — 16.0:1 */ --grad-b: #cfd6e0; /* shaded corner — 12.4:1, and 1.42:1 vs the page */ --grad: linear-gradient(135deg, var(--grad-a) 0%, var(--grad-m) 48%, var(--grad-b) 100%); /* Hover brightening, painted on ::after and cross-faded with OPACITY — background-image does not interpolate, and opacity is the one property this build is happy to animate. Directional, so the shaded corner (and therefore the silhouette) survives the hover. */ --metal-sheen: linear-gradient(135deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .22) 46%, rgba(255, 255, 255, 0) 100%); --metal-edge:rgba(20, 22, 26, .16); /* the cut edge — used by .pc-badge */ --metal-back:#aab2be; /* fallback body only; 8.5:1 vs --on-metal if ::before ever fails to paint. No longer shows as the rim. */ --metal-rim: rgba(72, 80, 92, .55); /* the pressed rim. A rim reads as pressed because it is darker THAN THE FACE, not because it is near-black. Steel, not #3a414b. */ /* THE MATERIAL. All in em so .btn-sm and .drawer-cta get a proportionally smaller bevel. Two dark layers pulled back (.22->.13, .20->.12) and two white layers pushed up (.30->.42, .28->.34) — the dome survives, the weight does not. */ --metal-inset: -0.05em -0.05em 0.05em 0 inset rgba(20, 22, 26, .13), 0 0 0.05em 0.2em inset rgba(255, 255, 255, .42), 0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1), 0.12em 0.12em 0.12em inset rgba(255, 255, 255, .34), -0.075em -0.22em 0.22em 0.08em inset rgba(20, 22, 26, .12); /* PRESSED. Layer 1 is a spread-only inset ring — it draws the rim by REPAINTING, not by moving geometry. So `inset` never animates (the file's own header rule forbids animating top/left), border-radius draws and antialiases the curve itself, and the em unit still scales it. This replaces BOTH the reference's clip-path and v17a's inset:-1px->1px. */ --metal-inset-in: 0 0 0 0.075em inset var(--metal-rim), 0.09em 0.13em 0.10em 0 inset rgba(20, 22, 26, .28), -0.03em -0.04em 0.07em 0.02em inset rgba(20, 22, 26, .22), 0.20em 0.20em 0.20em 0 inset rgba(20, 22, 26, .16), 0 0 0.05em 0.42em inset rgba(255, 255, 255, .22), -0.075em -0.12em 0.20em 0.10em inset rgba(20, 22, 26, .12); --metal-lite:#d8dee6; /* silver on charcoal — 13.5:1 on the CTA band */ /* facet colours for the .gem field — LIGHT-SURFACE set (must be darker than the page or they vanish). Flipped to a light set on the charcoal band. */ --gf-a: #c0c7d1; --gf-b: #9aa3ae; --gf-c: #6f7784; --silver: #c3c9d1; --silver-lt: #e7eaee; /* radii */ --r-card: 40px; --r-round: 99px; /* rhythm */ --container: 1440px; --pad: 96px; --sec-gap: 72px; --grid-gap: 20px; --lift: 48px; /* section overlap */ /* motion */ --e-out: cubic-bezier(.22, 1, .36, 1); --e-back: cubic-bezier(.34, 1.4, .64, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 18px; font-weight: 300; line-height: 1.5; } img, svg { max-width: 100%; } h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: normal; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--grad); color: var(--on-metal); padding: 12px 20px; border-radius: 0 0 var(--r-round) 0; } .skip:focus { left: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---------- layout primitives ---------- */ .container { max-width: var(--container); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } .section { padding: var(--sec-gap) 0; position: relative; } /* Layered section transition: each section rises over the previous one with rounded top corners. Backgrounds alternate so the seam is visible. */ .sec-lift { border-radius: var(--r-card) var(--r-card) 0 0; margin-top: calc(var(--lift) * -1); padding-top: calc(var(--sec-gap) + var(--lift)); background: var(--bg); z-index: 1; } #system, #process, #team, #faq { background: var(--band); } /* ---------- type scale ---------- */ h2 { font-size: 42px; font-weight: 600; line-height: 1.05; text-transform: uppercase; } .eyebrow { font-size: 18px; font-weight: 300; line-height: 1.5; color: var(--accent-mid); margin-bottom: 14px; } .lead { font-size: 18px; font-weight: 300; line-height: 1.5; color: var(--muted); } .sec-head { max-width: 940px; margin-bottom: 44px; } .sec-lead { margin-top: 18px; max-width: 68ch; } /* ---------- buttons ---------- */ .btn { position: relative; z-index: 0; display: inline-flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 400; line-height: 1; padding: 18px 30px; border-radius: var(--r-round); border: 1px solid transparent; cursor: pointer; transition: background-color .3s var(--e-out), color .3s var(--e-out), border-color .3s var(--e-out), transform .35s var(--e-out), box-shadow .35s var(--e-out); } .btn-primary { isolation: isolate; background: var(--metal-back); /* fallback body only — never seen */ color: var(--on-metal); border-color: transparent; font-weight: 500; /* the site's shadow family: blue-tinted, wide blur, heavy negative spread. In em so .btn-sm scales with it. This is .review's shadow, sized down. */ box-shadow: 0 0.06em 0.10em -0.045em rgba(20, 30, 70, .30), 0 0.40em 0.90em -0.55em rgba(20, 30, 70, .34); /* --e-back for the lift (matches .sn-dot / .review), --e-out for the shadow, linear for colour. No `ease` — it appears nowhere else in this file. */ transition: transform .35s var(--e-back), box-shadow .35s var(--e-out), color .3s linear; } /* THE FACE. -1px, not 0: an absolutely positioned pseudo resolves inset against the PADDING box, so at inset:0 the .btn 1px border leaks the body. inset is now CONSTANT in every state — the press is box-shadow only. */ .btn-primary::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background-image: var(--grad); box-shadow: var(--metal-inset); transition: box-shadow .35s var(--e-out); } /* THE SHEEN. The third layer, free on .btn. Opacity only. */ .btn-primary::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none; background-image: var(--metal-sheen); opacity: 0; transition: opacity .35s linear; } /* HOVER = lift and brighten, like every other hover on this site. The cast shadow GROWS (cards gain shadow on hover here; nothing loses it). Geometry does not change, so there is no jitter and no disagreement with .arw, which is also moving outward at .38s var(--e-out). */ .btn-primary:hover, .btn-primary:focus-visible { transform: translateY(-2px); box-shadow: 0 0.06em 0.10em -0.045em rgba(20, 30, 70, .26), 0 0.72em 1.45em -0.60em rgba(20, 30, 70, .40); } .btn-primary:hover::after, .btn-primary:focus-visible::after { opacity: 1; } /* .btn:active MUST stay ABOVE .btn-primary:active — identical specificity, so the later rule wins. Having it below silently killed the primary's press. */ .btn:active { transform: scale(.985); box-shadow: none; } /* ACTIVE = the press, which is where the skeuomorphism belongs. The face takes the pressed stack including its rim ring, the lift is given back, and the button settles onto the page. .985 matches .btn — one press speed for both buttons sitting together in .hero-cta. .12s because a press under the finger is a state change, not a transition. */ .btn-primary:active { transform: translateY(0) scale(.985); box-shadow: 0 0.045em 0.09em -0.03em rgba(20, 30, 70, .34); transition-duration: .12s; } .btn-primary:active::before { box-shadow: var(--metal-inset-in); transition-duration: .12s; } .btn-primary:active::after { opacity: .3; transition-duration: .12s; } .btn-sm { font-size: 16px; padding: 12px 22px; } .btn-block { width: 100%; justify-content: center; } /* secondary: dark fill sweeps left→right, border stays visible */ .btn-ghost { background: transparent; color: var(--text); border-color: var(--hairline); overflow: hidden; } .btn-ghost::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--text); transform: scaleX(0); transform-origin: left center; transition: transform .4s var(--e-out); } .btn-ghost:hover, .btn-ghost:focus-visible { color: #fff; border-color: var(--text); } .btn-ghost:hover::before, .btn-ghost:focus-visible::before { transform: scaleX(1); } /* arrow swap: existing arrow exits upper-right, replacement enters lower-left */ .arw { position: relative; display: inline-block; flex: none; width: 1.05em; height: 1.25em; overflow: hidden; line-height: 1.25em; font-size: 1em; } .arw::before, .arw::after { content: '\2192'; position: absolute; inset: 0; text-align: center; line-height: 1.25em; transition: transform .38s var(--e-out), opacity .3s linear; } .arw::after { transform: translate3d(-110%, 110%, 0); opacity: 0; } .btn:hover .arw::before, .btn:focus-visible .arw::before { transform: translate3d(110%, -110%, 0); opacity: 0; } .btn:hover .arw::after, .btn:focus-visible .arw::after { transform: none; opacity: 1; } .arw-sm { font-size: .95em; } /* ============================================================================= NAV — transparent rounded shell → translucent blur, hides on scroll-down ========================================================================== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding-top: 20px; padding-bottom: 4px; transition: transform .35s cubic-bezier(.4, 0, .2, 1), padding-top .3s var(--e-out); } .nav-shell { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 66px; padding: 0 10px 0 22px; border: 1px solid transparent; border-radius: var(--r-round); transition: background-color .35s var(--e-out), border-color .35s var(--e-out), box-shadow .35s var(--e-out), backdrop-filter .35s var(--e-out); } .nav.is-stuck { padding-top: 12px; } .nav.is-stuck .nav-shell { background: rgba(252, 252, 252, .84); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: var(--hairline); box-shadow: 0 12px 34px -22px rgba(20, 30, 70, .38); } .nav.is-hidden { transform: translateY(-130%); } .brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; } .brand-mark { width: 18px; height: 18px; border-radius: var(--r-round); background: var(--grad); display: inline-block; } .nav-links { display: flex; gap: 32px; } .nav-links a { font-size: 17px; font-weight: 300; color: var(--muted); transition: color .25s linear, transform .25s var(--e-out); display: inline-block; } .nav-links a:hover, .nav-links a:focus-visible { color: var(--text); transform: translateY(-1px); } .nav-links a.is-active { color: var(--text); } .nav-right { display: flex; align-items: center; gap: 14px; } .burger { display: none; width: 44px; height: 44px; border-radius: var(--r-round); border: 1px solid var(--hairline); background: var(--card); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .burger span { display: block; width: 18px; height: 1px; background: var(--text); transition: transform .3s var(--e-out); } .burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); } .burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); } .drawer { position: fixed; top: 86px; left: 0; right: 0; z-index: 99; padding: 0 var(--pad); } .drawer[hidden] { display: none; } .drawer-inner { background: rgba(252, 252, 252, .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--hairline); border-radius: 28px; padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 16px; } .drawer a { font-size: 20px; color: var(--muted); } .drawer .drawer-cta { align-self: flex-start; color: var(--on-metal); } /* ============================================================================= 1. HERO ========================================================================== */ .hero { position: relative; overflow: hidden; padding: 156px 0 var(--sec-gap); } .hero-bg { position: absolute; left: -8%; right: -8%; top: -14%; height: 128%; background: radial-gradient(46% 42% at 72% 12%, rgba(61, 68, 78, .07), transparent 70%), radial-gradient(52% 46% at 12% 44%, rgba(120, 130, 155, .12), transparent 72%); z-index: 0; pointer-events: none; } /* --- faceted gem field --------------------------------------------------- HARD-stop conic gradients radiating from a point, like the cut of a stone — here reading as polished metal catching light rather than a gem. The drama in a gem comes from sharp luminance jumps between adjacent facets, so this is deliberately NOT heavily blurred — a soft wash would read as a smudge, not a stone. Kept at low opacity so it is a texture behind the layout rather than a picture in front of it. Decorative only: no text ever sits on the lit facets. --------------------- */ .gem { position: absolute; inset: -25% -12% auto; height: 150%; z-index: 0; pointer-events: none; opacity: .15; filter: blur(26px) saturate(106%); /* Masked out of the middle: the facets belong at the edges of the frame, not across the headline. Keeps the refraction as peripheral atmosphere. */ -webkit-mask-image: radial-gradient(115% 95% at 46% 46%, transparent 0%, transparent 34%, #000 82%); mask-image: radial-gradient(115% 95% at 46% 46%, transparent 0%, transparent 34%, #000 82%); background: conic-gradient(from 198deg at 74% 8%, var(--gf-a) 0deg 9deg, transparent 9deg 21deg, var(--gf-b) 21deg 27deg, transparent 27deg 44deg, var(--gf-a) 44deg 51deg, transparent 51deg 68deg, var(--gf-c) 68deg 77deg, transparent 77deg 96deg, var(--gf-a) 96deg 103deg, transparent 103deg 124deg, var(--gf-b) 124deg 132deg, transparent 132deg 360deg), conic-gradient(from 22deg at 14% 66%, var(--gf-a) 0deg 7deg, transparent 7deg 26deg, var(--gf-b) 26deg 34deg, transparent 34deg 55deg, var(--gf-a) 55deg 61deg, transparent 61deg 84deg, var(--gf-c) 84deg 93deg, transparent 93deg 360deg); } .hero .gem { height: 138%; } /* on the charcoal CTA panel the same cut reads as light trapped inside the stone */ .cta-band .gem { /* flipped: on charcoal the facets have to be LIGHTER than the surface */ --gf-a: #ffffff; --gf-b: #d8dee6; --gf-c: #aab2bd; inset: 0 0 auto; height: 100%; opacity: .26; filter: blur(32px) saturate(112%); -webkit-mask-image: radial-gradient(110% 100% at 50% 50%, transparent 0%, transparent 26%, #000 76%); mask-image: radial-gradient(110% 100% at 50% 50%, transparent 0%, transparent 26%, #000 76%); } .hero > .container { position: relative; z-index: 1; } .hero-copy { position: relative; } .status-pill { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--hairline); border-radius: var(--r-round); padding: 9px 18px; font-size: 16px; font-weight: 300; color: var(--muted); background: var(--card); margin-bottom: 26px; } .status-pill .dot { width: 8px; height: 8px; border-radius: var(--r-round); background: var(--grad); } .hero-title { font-size: clamp(34px, 3.6vw, 52px); font-weight: 600; line-height: 1.1; max-width: 26ch; margin: 4px 0 28px; } .hero-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--grid-gap) 60px; margin-bottom: 40px; } .hero-body .lead { flex: 1 1 420px; max-width: 62ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; } .trust-strip { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 28px; margin-bottom: 44px; border-top: 1px solid var(--hairline); } .trust-strip li { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 300; color: var(--tertiary); border: 1px solid var(--hairline); border-radius: var(--r-round); padding: 8px 18px; background: var(--card); transition: color .28s linear, border-color .28s linear; } .ts-dot { width: 6px; height: 6px; border-radius: var(--r-round); background: var(--hairline); transition: background-color .28s linear, transform .28s var(--e-out); } .trust-strip li:hover { color: var(--text); border-color: #aeb6c1; } .trust-strip li:hover .ts-dot { background: var(--accent); transform: scale(1.25); } .trust-strip li > *:not(.ts-dot) { transition: transform .28s var(--e-out); } .trust-strip li:hover { padding-left: 20px; padding-right: 16px; } /* ---------- 2. hero system preview ---------- */ .flow-card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 40px; } .flow-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid var(--hairline); margin-bottom: 30px; } .flow-t { font-size: 22px; font-weight: 600; } .flow-s { font-size: 16px; font-weight: 300; color: var(--tertiary); } .flow-rail { position: relative; } /* The rail draws once on load and then STAYS lit — the glow is the point. A soft dot loops along it afterwards. */ .flow-fill { position: absolute; top: 7px; left: 7px; height: 1px; width: calc(100% - 14px); background: linear-gradient(90deg, var(--accent), var(--gem-lit) 50%, var(--accent)); box-shadow: 0 0 8px rgba(154, 163, 176, .8); z-index: 4; transform-origin: left center; } .js-enabled .flow-fill { transform: scaleX(0); } .flow-laser { position: absolute; top: 3.5px; left: 7px; width: 8px; height: 8px; border-radius: var(--r-round); background: #fff; box-shadow: 0 0 0 2px var(--accent), 0 0 10px 3px rgba(170, 178, 189, .85), 0 0 26px 8px rgba(223, 228, 235, .5); opacity: 0; z-index: 5; pointer-events: none; will-change: transform, opacity; } /* comet trail behind the dot */ .flow-laser::before { content: ''; position: absolute; right: 60%; top: 50%; width: 88px; height: 3px; margin-top: -1.5px; border-radius: var(--r-round); background: linear-gradient(90deg, rgba(138, 146, 158, 0), rgba(138, 146, 158, .85)); } .flow-laser.is-running { animation: flowLaser 4.8s cubic-bezier(.62, 0, .38, 1) infinite; } @keyframes flowLaser { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 7% { opacity: 1; } 58% { transform: translate3d(var(--rail, 0px), 0, 0); opacity: 1; } 70% { transform: translate3d(var(--rail, 0px), 0, 0); opacity: 0; } 100% { transform: translate3d(var(--rail, 0px), 0, 0); opacity: 0; } } .flow-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--grid-gap); position: relative; z-index: 3; } .flow-node { position: relative; padding-top: 26px; transition: opacity .3s linear, transform .3s var(--e-out); } .flow-node::before { content: ''; position: absolute; top: 7px; left: 0; right: 0; height: 1px; background: var(--hairline); } .flow-node:first-child::before { left: 7px; } .flow-node:last-child::before { right: calc(100% - 8px); } .fn-dot { position: absolute; top: 3px; left: 0; width: 9px; height: 9px; border-radius: var(--r-round); background: var(--hairline); transition: background-color .3s linear, transform .3s var(--e-out); } .flow-node.is-key .fn-dot { background: var(--accent); } .fn-lbl { display: block; font-size: 18px; font-weight: 600; margin-bottom: 6px; transition: color .3s linear; } .flow-node.is-key .fn-lbl { color: var(--accent); } .fn-side { display: block; font-size: 16px; font-weight: 300; color: var(--tertiary); line-height: 1.45; transition: color .3s linear; } .flow-track:hover .flow-node { opacity: .65; } .flow-track .flow-node:hover { opacity: 1; transform: scale(1.035); transform-origin: left center; } .flow-track .flow-node:hover .fn-dot { background: var(--accent); transform: scale(1.2); } .flow-track .flow-node:hover .fn-lbl { color: var(--accent); } .flow-track .flow-node:hover .fn-side { color: var(--muted); } .flow-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--hairline); } .tag { font-size: 15px; font-weight: 300; color: var(--tertiary); border: 1px solid var(--hairline); border-radius: var(--r-round); padding: 7px 16px; } .tag-accent { color: var(--accent); border-color: var(--accent); } .tag { transition: color .25s linear, border-color .25s linear, transform .3s var(--e-out); } .tag:hover { color: var(--text); border-color: #a8bdb4; transform: translateY(-2px); } .tag-accent:hover { color: var(--accent-dk); border-color: var(--accent); } /* ============================================================================= 3. RECOGNITION ========================================================================== */ .recog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); } .recog-item { position: relative; overflow: hidden; display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 30px 32px; transition: transform .3s var(--e-back), border-color .3s linear, box-shadow .3s var(--e-out); } .recog-item::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 0% 0%, rgba(61, 68, 78, .07), transparent 62%); opacity: 0; transition: opacity .3s linear; } .recog-item p { font-size: 18px; font-weight: 300; line-height: 1.5; transition: transform .3s var(--e-out); } .recog-item:hover { transform: translateY(-6px); border-color: #a8bdb4; box-shadow: 0 16px 34px -20px rgba(20, 30, 70, .3); } .recog-item:hover::after { opacity: 1; } .recog-item:hover p { transform: translateY(-2px); } .recog-item:hover .tick { transform: scale(1.12); } .tick { flex: none; width: 22px; height: 22px; margin-top: 3px; border-radius: var(--r-round); background: rgba(61, 68, 78, .12); position: relative; transition: transform .3s var(--e-back); } .tick::after { content: ''; position: absolute; left: 7px; top: 5px; width: 5px; height: 9px; border: solid var(--accent); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); } .recog-close { margin-top: 34px; max-width: 76ch; font-size: 18px; font-weight: 300; color: var(--muted); } .recog-close strong { font-weight: 600; color: var(--text); } /* ============================================================================= 4. GROWTH SYSTEM — sticky, scroll-scrubbed five-stage sequence ========================================================================== */ .sys-sec { padding-top: 26px; } .sys-scroll { position: relative; height: 260vh; } .sys-sticky { position: sticky; top: 11vh; height: 84vh; display: flex; align-items: center; } .sys-inner { display: grid; grid-template-columns: 1.08fr .92fr; gap: 72px; align-items: center; width: 100%; } /* The section heading rides in the sticky column beside the changing stage. */ .sys-head { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid var(--hairline); } .sys-head h2 { font-size: clamp(26px, 2.3vw, 34px); line-height: 1.12; } .sys-lead { margin-top: 14px; max-width: 50ch; font-size: 17px; } .sys-count { font-size: 16px; font-weight: 400; color: var(--accent-mid); margin-bottom: 14px; } .sys-of { color: var(--tertiary); } .sys-panes { position: relative; min-height: 268px; } .sys-pane h3 { font-size: clamp(36px, 3.6vw, 52px); font-weight: 800; line-height: .95; text-transform: uppercase; margin-bottom: 14px; } .sys-pane > p { font-size: 20px; font-weight: 300; color: var(--muted); max-width: 46ch; margin-bottom: 26px; } .sys-tags { display: flex; flex-wrap: wrap; gap: 10px; } .sys-tags li { font-size: 17px; font-weight: 300; color: var(--muted); border: 1px solid var(--hairline); border-radius: var(--r-round); padding: 10px 22px; background: var(--card); transition: transform .3s var(--e-out), border-color .3s linear, color .3s linear; } .sys-pane.is-active .sys-tags li:hover { transform: translateY(-3px); border-color: var(--accent); color: var(--accent); } /* Panes stack only while JS drives them; with JS off they flow as five blocks. */ .js-enabled .sys-pane { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .45s var(--e-out), transform .45s var(--e-out); } .js-enabled .sys-pane.is-active { opacity: 1; transform: none; pointer-events: auto; } .js-enabled .sys-pane.is-prev { transform: translateY(-14px); } .sys-rail { position: relative; padding-left: 38px; } .sys-line { position: absolute; left: 5px; top: 10px; bottom: 10px; width: 2px; background: var(--hairline); } .sys-line-fill { display: block; width: 100%; height: 0; background: linear-gradient(180deg, var(--grad-a), var(--accent)); transition: height .18s linear; } .sys-track { display: grid; gap: 26px; } .sys-node { position: relative; display: flex; align-items: center; gap: 14px; } .sn-dot { position: absolute; left: -38px; top: 50%; margin-top: -7px; width: 14px; height: 14px; border-radius: var(--r-round); background: var(--band); border: 2px solid var(--hairline); transition: background-color .35s var(--e-out), border-color .35s var(--e-out), transform .35s var(--e-back); } .sn-lbl { font-size: clamp(20px, 2vw, 26px); font-weight: 600; color: var(--tertiary); transition: color .35s linear, transform .35s var(--e-out); } .sys-node.is-done .sn-dot { background: #aab2bd; border-color: #aab2bd; } /* Completed stages read as "done, de-emphasised" via COLOUR, never opacity — text must always compute to opacity 1. */ .sys-node.is-done .sn-lbl { color: var(--tertiary); } .sys-node.is-active .sn-dot { background: var(--grad); border-color: var(--accent); transform: scale(1.15); } .sys-node.is-active .sn-lbl { color: var(--text); } .sys-node:hover .sn-lbl { color: var(--accent); transform: translateX(3px); } .sys-node:hover .sn-dot { border-color: var(--accent); } .sys-done { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--hairline); font-size: 18px; font-weight: 600; color: var(--accent); } .js-enabled .sys-done { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--e-out), transform .5s var(--e-out); } .js-enabled .sys-scroll.is-complete .sys-done { opacity: 1; transform: none; } /* ============================================================================= 5. SELECTED CLIENT WORK ========================================================================== */ .case-lead { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 44px; } .case-lead-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; padding-bottom: 28px; margin-bottom: 30px; border-bottom: 1px solid var(--hairline); } .case-lead-top h3 { font-size: 30px; font-weight: 600; } .case-meta { font-size: 16px; font-weight: 300; color: var(--tertiary); } .case-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); } .case-col .k { font-size: 16px; font-weight: 600; color: var(--accent-mid); margin-bottom: 10px; } .case-col p { font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--muted); } .case-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin: var(--grid-gap) 0; padding: 26px 34px; border: 1px dashed var(--hairline); border-radius: var(--r-card); } .case-cta p { font-size: 17px; font-weight: 300; color: var(--muted); } .case-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); } .case-mini { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 40px; } .case-sector { font-size: 16px; font-weight: 300; color: var(--accent-mid); margin-bottom: 8px; transition: color .3s linear; } .case-mini h4 { font-size: 26px; font-weight: 600; margin-bottom: 24px; transition: transform .4s var(--e-out); } .case-line { padding: 16px 0; border-top: 1px solid var(--hairline); } .case-line .l { display: block; font-size: 15px; font-weight: 400; color: var(--tertiary); margin-bottom: 6px; } .case-line .case-body { font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--muted); } .case-mini:hover h4 { transform: translateX(6px); } /* ============================================================================= 6. PROCESS — sticky heading, progress line, step activation ========================================================================== */ .proc-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; } .proc-head { position: sticky; top: 140px; } .proc-steps { position: relative; } .proc-line { position: absolute; left: 31px; top: 40px; bottom: 40px; width: 2px; background: var(--hairline); } .proc-line-fill { display: block; width: 100%; height: 0; background: linear-gradient(180deg, var(--grad-a), var(--accent)); transition: height .2s linear; } .pstep { position: relative; display: flex; gap: 28px; align-items: flex-start; padding: 30px 14px 30px 0; border-top: 1px solid var(--hairline); transition: background-color .35s linear; } .pstep:first-child { border-top: 0; } .pnum { position: relative; z-index: 1; flex: none; width: 64px; height: 64px; border-radius: var(--r-round); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; background: var(--band); border: 2px solid var(--hairline); color: var(--tertiary); transition: background-color .4s var(--e-out), border-color .4s var(--e-out), color .4s var(--e-out), transform .45s var(--e-back); } .pbody h4 { font-size: 24px; font-weight: 600; margin-bottom: 10px; transition: color .35s linear, transform .35s var(--e-out); } .pbody p { font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--muted); transition: opacity .35s linear, transform .35s var(--e-out); } .js-enabled .pstep .pnum { transform: scale(.88); } .js-enabled .pbody h4 { color: var(--tertiary); } .js-enabled .pbody p { opacity: .55; transform: translateY(10px); } .js-enabled .pstep.is-on .pnum { background: var(--grad); border-color: var(--accent-mid); color: var(--on-metal); transform: scale(1); } .js-enabled .pstep.is-on .pbody h4 { color: var(--text); } .js-enabled .pstep.is-on .pbody p { opacity: 1; transform: none; } .pstep:hover { background: rgba(61, 68, 78, .04); } .pstep:hover .pnum { transform: translateX(4px) scale(1); } .pstep:hover .pbody h4 { transform: translateX(8px); color: var(--text); } .pstep:hover .pbody p { opacity: 1; } /* ============================================================================= 7. FIX / REBUILD / GROW — sticky card stack ========================================================================== */ .cur-toggle { display: inline-flex; gap: 4px; margin-top: 22px; padding: 4px; border: 1px solid var(--hairline); border-radius: var(--r-round); background: var(--card); } .cur-btn { font: inherit; font-size: 15px; font-weight: 400; padding: 8px 18px; border: 0; border-radius: var(--r-round); background: transparent; color: var(--tertiary); cursor: pointer; transition: background-color .25s linear, color .25s linear; } .cur-btn.is-on { background: var(--accent); color: #fff; } .price-stack { padding-bottom: 4vh; } /* Holds the LAST card (Grow) pinned for a beat instead of letting it scroll straight past. Must be an in-flow box, not parent padding — sticky is constrained by the containing block's CONTENT box. */ .price-tail { height: 46vh; } .price-slot { position: sticky; top: 132px; } .price-slot + .price-slot { margin-top: 52vh; } .price-card { position: relative; max-width: 1020px; margin: 0 auto; display: grid; grid-template-columns: 1.35fr .85fr; gap: 52px; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 44px 48px; box-shadow: 0 24px 60px -40px rgba(20, 30, 70, .5); transform-origin: center top; transition: transform .45s var(--e-out), border-color .3s linear, box-shadow .4s var(--e-out); } .price-card.is-featured { border-color: var(--accent); } /* ---------- cursor spotlight ------------------------------------------------- A soft cobalt highlight that follows the pointer inside every card surface. Purely decorative: it is opacity on a pseudo-element, never on text, and it is skipped entirely on touch and under reduced motion. --------------------- */ .flow-card, .case-lead, .case-mini, .price-card, .review, .team-panel, .quote-block { position: relative; } .flow-card::after, .case-lead::after, .case-mini::after, .price-card::after, .review::after, .team-panel::after, .quote-block::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s linear; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(61, 68, 78, .09), transparent 62%); } .flow-card:hover::after, .case-lead:hover::after, .case-mini:hover::after, .price-card:hover::after, .review:hover::after, .team-panel:hover::after, .quote-block:hover::after { opacity: 1; } /* Covered-card veil for the sticky stack. Darkens the card WITHOUT touching the opacity of any text node — text always computes to opacity 1. */ .price-card::before { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; background: #0e1118; opacity: var(--cover, 0); } .price-card:hover { border-color: #a8bdb4; box-shadow: 0 28px 64px -34px rgba(20, 30, 70, .42); } .price-card.is-featured:hover { border-color: var(--accent); } .pc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .pc-top h3 { font-size: 34px; font-weight: 700; text-transform: uppercase; } .pc-badge { font-size: 14px; font-weight: 500; color: var(--on-metal); background: var(--grad); box-shadow: var(--metal-inset), 0 1px 3px rgba(20, 22, 26, .22); border: 1px solid var(--metal-edge); border-radius: var(--r-round); padding: 6px 14px; } .pc-for { font-size: 17px; font-weight: 300; color: var(--muted); margin-bottom: 24px; } .pc-list { display: grid; } .pc-list li { font-size: 17px; font-weight: 300; color: var(--muted); padding: 12px 0 12px 20px; border-top: 1px solid var(--hairline); position: relative; transition: transform .3s var(--e-out), color .3s linear; } /* Chevron drawn with borders, not a glyph, so assistive tech has nothing to read. */ .pc-list li::before { content: ''; position: absolute; left: 1px; top: 21px; width: 5px; height: 5px; border: solid var(--accent); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); } .price-card:hover .pc-list li { transform: translateX(3px); color: var(--text); } .pc-side { display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; } .pc-price { text-align: right; } .pc-from { display: block; font-size: 15px; font-weight: 300; color: var(--tertiary); margin-bottom: 8px; } .pc-amt { display: block; font-size: 44px; font-weight: 800; line-height: 1; color: var(--accent); transition: color .3s linear; } .pc-per { font-size: 18px; font-weight: 300; color: var(--tertiary); } .pc-alt { display: block; margin-top: 8px; font-size: 13px; font-weight: 300; color: var(--tertiary); } .price-card:hover .pc-amt { color: var(--accent-dk); } .price-note { margin-top: 34px; max-width: 82ch; font-size: 16px; font-weight: 300; color: var(--tertiary); } /* ============================================================================= 8. ONE ACCOUNTABLE TEAM ========================================================================== */ .team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px var(--grid-gap); align-items: start; } .team-copy .lead { margin-top: 18px; max-width: 62ch; } .team-cta { margin-top: 30px; } .check-list { margin-top: 30px; display: grid; gap: 14px; } .check-row { display: flex; gap: 14px; align-items: flex-start; transition: transform .3s var(--e-out); } .check-row p { font-size: 18px; font-weight: 300; line-height: 1.5; color: var(--muted); transition: color .3s linear; } .check-row:hover { transform: translateX(3px); } .check-row:hover p { color: var(--text); } .team-panel { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 44px; position: relative; } .tp-head { font-size: 16px; font-weight: 600; color: var(--accent-mid); text-transform: uppercase; margin-bottom: 24px; } .tp-rows { position: relative; padding-left: 24px; } .tp-line { position: absolute; left: 3px; top: 16px; bottom: 16px; width: 2px; background: var(--hairline); } .tp-line-fill { display: block; width: 100%; height: 0; background: linear-gradient(180deg, var(--grad-a), var(--accent)); transition: height 1.1s var(--e-out) .25s; } .tp-rows.is-on .tp-line-fill { height: 100%; } .tp-row { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 20px 14px; border-top: 1px solid var(--hairline); transition: opacity .4s linear, padding .4s var(--e-out); } .tp-row::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(61, 68, 78, .10), rgba(61, 68, 78, 0)); transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--e-out); } .tp-k { position: relative; z-index: 1; font-size: 22px; font-weight: 600; min-width: 150px; transition: transform .4s var(--e-out), color .3s linear; } .tp-d { position: relative; z-index: 1; font-size: 17px; font-weight: 300; color: var(--muted); transition: transform .4s var(--e-out), color .3s linear; } .tp-arw { position: relative; z-index: 1; margin-left: auto; width: 18px; height: 18px; flex: none; border: solid var(--accent); border-width: 1.6px 1.6px 0 0; transform: rotate(45deg) translate3d(-6px, 6px, 0); opacity: 0; transition: transform .4s var(--e-out), opacity .3s linear; } .tp-rows:hover .tp-row { opacity: .62; } .tp-rows .tp-row:hover { opacity: 1; padding-left: 22px; padding-right: 6px; } .tp-row:hover::before { transform: scaleX(1); } .tp-row:hover .tp-k { transform: translateX(8px); color: var(--accent); } .tp-row:hover .tp-d { transform: translateX(-3px); color: var(--text); } .tp-row:hover .tp-arw { transform: rotate(45deg) translate3d(0, 0, 0); opacity: 1; } /* rotating circular badge */ .badge-wrap { position: relative; width: 144px; height: 144px; margin-top: 38px; } .rot-badge { display: block; width: 144px; height: 144px; } /* letter-spacing tuned so the string measures 335px against the 339px circular path — any longer and the text truncates mid-word. Re-measure if edited. */ .badge-text { font-size: 11px; font-weight: 600; fill: var(--accent); letter-spacing: 0.75px; } .badge-ring { fill: none; stroke: var(--hairline); stroke-width: 1; } .badge-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 14px; height: 14px; border-radius: var(--r-round); background: var(--grad); } /* ============================================================================= 9. TESTIMONIALS — static 3-up grid (three real reviews; no autoplay carousel) ========================================================================== */ .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); } .review { margin: 0; position: relative; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; transition: transform .4s var(--e-back), border-color .3s linear, box-shadow .4s var(--e-out); } .rv-mark { font-size: 56px; line-height: .6; font-weight: 700; color: var(--hairline); transition: color .3s linear; } .review blockquote { margin: 0; font-size: 20px; font-weight: 300; line-height: 1.45; color: var(--text); } .review figcaption { display: grid; gap: 4px; padding-top: 24px; border-top: 1px solid var(--hairline); } .rv-who { font-size: 17px; font-weight: 600; } .rv-role { font-size: 15px; font-weight: 300; color: var(--tertiary); } .rv-src { font-size: 15px; font-weight: 300; color: var(--accent-mid); transition: color .3s linear; } .review:hover { transform: translateY(-4px); border-color: #a8bdb4; box-shadow: 0 16px 36px -22px rgba(20, 30, 70, .3); } .review:hover .rv-mark { color: var(--accent); } .review:hover .rv-src { color: var(--accent-dk); } /* ============================================================================= 10. FAQ ========================================================================== */ .faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; } .faq-head { position: sticky; top: 140px; } .faq-list { border-top: 1px solid var(--hairline); } .faq-row { border-bottom: 1px solid var(--hairline); transition: border-color .3s linear; } .faq-row.is-open { border-bottom-color: var(--accent); } .faq-row h3 { margin: 0; font-weight: inherit; } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; font-size: 22px; font-weight: 600; color: var(--text); transition: padding-left .32s var(--e-out), color .3s linear; } .faq-q:hover, .faq-q:focus-visible { padding-left: 6px; color: var(--accent); } .faq-ico { position: relative; flex: none; width: 40px; height: 40px; border-radius: var(--r-round); border: 1px solid var(--hairline); background: transparent; transition: transform .4s var(--e-out), background-color .3s linear, border-color .3s linear; } .faq-ico::before, .faq-ico::after { content: ''; position: absolute; left: 50%; top: 50%; background: currentColor; transition: opacity .3s linear; } .faq-ico::before { width: 13px; height: 1.6px; margin: -.8px 0 0 -6.5px; } .faq-ico::after { width: 1.6px; height: 13px; margin: -6.5px 0 0 -.8px; } .faq-q:hover .faq-ico { background: rgba(61, 68, 78, .09); border-color: var(--accent); } .faq-row.is-open .faq-ico { transform: rotate(45deg); border-color: var(--accent); color: var(--accent); } .faq-a { overflow: hidden; } .js-enabled .faq-a { height: 0; } .faq-a-inner { padding: 0 60px 30px 0; } .faq-a-inner p { font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--muted); } /* ============================================================================= 11. GROWTH REVIEW / CONTACT — dark panel that widens as it enters ========================================================================== */ .cta-band { position: relative; margin-top: 80px; padding: 110px 0 100px; color: #fff; } .cta-panel-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(160deg, #1b2030 0%, var(--ink) 55%, #101219 100%); border-radius: var(--r-card) var(--r-card) 0 0; transform: scaleX(.92); transform-origin: center; } .cta-band > .container { position: relative; z-index: 1; } .cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px var(--grid-gap); align-items: start; } .cta-copy .lead { margin-top: 18px; max-width: 60ch; color: rgba(255,255,255,.72); } .cta-band h2 { color: #fff; } .cta-band .eyebrow { color: var(--metal-lite); } .cta-band .check-row p { color: rgba(255,255,255,.76); } .cta-band .check-row:hover p { color: #fff; } .cta-band .tick { background: rgba(216, 222, 230, .20); } .cta-band .tick::after { border-color: var(--metal-lite); } .form-wrap { position: relative; } .qform { background: var(--card); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-card); padding: 40px; display: grid; gap: 18px; color: var(--text); } .fstep { display: grid; gap: 18px; } .js-enabled .qform[data-step="1"] .fstep-2 { display: none; } .js-enabled .qform[data-step="2"] .fstep-next { display: none; } .fstep-next { display: none; } .js-enabled .fstep-next { display: inline-flex; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .field { display: grid; gap: 8px; } .field label { font-size: 15px; font-weight: 400; color: var(--muted); transition: color .25s linear; } .field .opt { color: var(--tertiary); font-weight: 300; } .field input, .field textarea, .field select { font-family: inherit; font-size: 17px; font-weight: 300; color: var(--text); background: var(--bg); border: 1px solid #8b919b; border-radius: 18px; padding: 14px 18px; width: 100%; transition: border-color .25s linear, box-shadow .25s linear; } .field textarea { min-height: 104px; resize: vertical; } .field input:hover, .field textarea:hover, .field select:hover { border-color: #a9aeb6; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px rgba(61, 68, 78, .16); } .field:focus-within label { color: var(--text); } .field input::placeholder, .field textarea::placeholder { color: var(--tertiary); } .field.is-valid input, .field.is-valid textarea { border-color: #9aa2ad; } .form-msg { font-size: 16px; font-weight: 300; color: var(--muted); min-height: 1px; } .form-msg.ok { color: var(--accent); } .form-msg.err { color: #b3261e; } .form-done { text-align: center; padding: 30px 10px; } .form-done h3 { font-size: 24px; margin-bottom: 12px; } .form-done p { font-size: 17px; font-weight: 300; color: var(--muted); } /* ============================================================================= FOOTER ========================================================================== */ .footer { background: var(--ink); color: rgba(255,255,255,.72); padding: 72px 0 40px; } .footer .brand { color: #fff; } .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--grid-gap); } .foot-brand p { margin-top: 16px; max-width: 40ch; font-size: 16px; font-weight: 300; } .foot-social { display: flex; gap: 10px; margin-top: 20px; } .foot-social a { width: 40px; height: 40px; border-radius: var(--r-round); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.75); transition: color .25s linear, border-color .25s linear, transform .3s var(--e-out); } .foot-social a:hover { color: #fff; border-color: rgba(255,255,255,.55); transform: translateY(-2px); } .foot-col h5 { font-size: 16px; font-weight: 600; text-transform: uppercase; margin-bottom: 16px; color: #fff; } .foot-col li { margin-bottom: 10px; font-size: 16px; font-weight: 300; } .foot-col a { transition: transform .3s var(--e-out), color .25s linear; display: inline-block; } .foot-col a:hover { color: #fff; transform: translateX(3px); } .foot-word { margin: 56px 0 0; overflow: hidden; font-size: clamp(46px, 12vw, 190px); line-height: .9; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; color: transparent; background: linear-gradient(100deg, rgba(255,255,255,.16), rgba(255,255,255,.07) 46%, rgba(255,255,255,.24)); -webkit-background-clip: text; background-clip: text; transition: background .6s linear; } .foot-word:hover { background: linear-gradient(100deg, rgba(255,255,255,.3), rgba(255,255,255,.34) 50%, rgba(255,255,255,.18)); -webkit-background-clip: text; background-clip: text; } .foot-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); font-size: 15px; font-weight: 300; color: rgba(255,255,255,.55); } /* underline sweep on nav + footer links */ .nav-links a, .foot-col a, .drawer a:not(.btn) { position: relative; } .nav-links a::after, .foot-col a::after, .drawer a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .32s var(--e-out); } .nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a.is-active::after, .foot-col a:hover::after, .foot-col a:focus-visible::after, .drawer a:not(.btn):hover::after { transform: scaleX(1); } /* ============================================================================= MOTION LAYER — pre-animation hidden states (JS-gated) ========================================================================== */ .js-enabled [data-reveal]:not([data-revealed]) { opacity: 0; transform: translateY(24px); } .js-enabled [data-reveal-lines]:not([data-revealed]) { opacity: 0; } .js-enabled [data-hero-step]:not([data-revealed]):not([data-reveal-lines]) { opacity: 0; transform: translateY(14px); } /* line-mask scaffolding for heading reveals — unwrapped again once revealed, so reflow on resize can never clip a line. */ .line-mask { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; } .line-inner { display: block; will-change: transform; } /* hover: card lift */ .case-mini, .case-lead { transition: transform .45s var(--e-back), box-shadow .45s var(--e-out), border-color .25s linear; } .case-mini:hover, .case-lead:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -22px rgba(20, 30, 70, .3); border-color: #a8bdb4; } .case-mini:hover .case-sector { color: var(--accent-dk); } .flow-card, .hero-bg { will-change: transform; } /* Net #5 — the head script un-gates everything if the module never signals ready. */ .js-fallback [data-reveal]:not([data-revealed]), .js-fallback [data-reveal-lines]:not([data-revealed]), .js-fallback [data-hero-step]:not([data-revealed]), .js-fallback .sys-done { opacity: 1 !important; transform: none !important; } .js-fallback .sys-pane { position: static !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; } .js-fallback .faq-a { height: auto !important; } .js-fallback .pbody h4 { color: var(--text) !important; } .js-fallback .pbody p { opacity: 1 !important; transform: none !important; } .js-fallback .pstep .pnum { transform: none !important; } .js-fallback .cta-panel-bg { transform: none !important; } .js-fallback .flow-fill { transform: scaleX(1) !important; } .js-fallback body { cursor: auto !important; } /* ============================================================================= v13 ADDITIONS — before/after comparison, case links, radio choices, sticky mobile CTA. Placed BEFORE the responsive + reduced-motion blocks so those still win. ========================================================================== */ .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; } /* ---------- before / after comparison ---------- */ .compare { border-top: 1px solid var(--hairline); } .cmp-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); padding: 18px 18px 14px; } .cmp-h { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .cmp-h-old { color: var(--tertiary); } .cmp-h-new { color: var(--text); } .cmp-rows { display: grid; } .cmp-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); border-top: 1px solid var(--hairline); transition: background-color .3s linear; } .cmp-row:hover { background: rgba(61, 68, 78, .035); } .cmp-old, .cmp-new { display: flex; gap: 12px; align-items: flex-start; padding: 22px 18px; font-size: 17px; font-weight: 300; line-height: 1.5; transition: transform .35s var(--e-out), color .3s linear; } .cmp-old { color: var(--tertiary); } .cmp-new { color: var(--text); background: var(--card); border-radius: 20px; } .cmp-row:hover .cmp-new { transform: translateX(3px); } .cmp-row:hover .cmp-new .tick { transform: scale(1.12); } .cmp-x { flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: var(--r-round); background: rgba(0, 0, 0, .055); position: relative; } .cmp-x::before, .cmp-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; background: var(--tertiary); margin: -.75px 0 0 -4.5px; } .cmp-x::before { transform: rotate(45deg); } .cmp-x::after { transform: rotate(-45deg); } /* ---------- case-study outbound links ---------- */ .case-link { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 400; color: var(--accent); border-bottom: 1px solid transparent; transition: border-color .25s linear, color .25s linear; } .case-link:hover, .case-link:focus-visible { border-bottom-color: var(--accent); color: var(--accent-dk); } .case-mini h4 { min-height: 2.4em; } .case-slot { display: block; min-height: 24px; margin: -14px 0 18px; } .case-mini .case-link { margin: 0; } /* ---------- pricing scope note ---------- */ .pc-note { margin-top: 14px; text-align: right; font-size: 14px; font-weight: 300; line-height: 1.45; color: var(--tertiary); } /* ---------- form: step counter, radio choices, trust line ---------- */ .fstep-count { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-mid); } .choices { border: 0; padding: 0; margin: 0; min-width: 0; } .choices legend { font-size: 15px; font-weight: 400; color: var(--muted); padding: 0; margin-bottom: 10px; } .choice { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; margin-bottom: 8px; border: 1px solid #8b919b; border-radius: 16px; font-size: 16px; font-weight: 300; line-height: 1.4; cursor: pointer; transition: border-color .2s linear, background-color .2s linear; } .choice:last-child { margin-bottom: 0; } .choice:hover { border-color: #a9aeb6; } .choice input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 1px 0 0; border: 1px solid #8b919b; border-radius: var(--r-round); background: var(--card); transition: border-color .2s linear, box-shadow .2s linear; } .choice input:checked { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--accent); } .choice:has(input:checked) { border-color: var(--accent); background: rgba(61, 68, 78, .06); } .form-trust { font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--tertiary); text-align: center; } /* ---------- sticky mobile CTA ---------- */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateY(130%); transition: transform .38s var(--e-out); } .sticky-cta.is-on { transform: none; } .sticky-cta[hidden] { display: none !important; } .sticky-cta-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 10px 10px 20px; background: rgba(252, 252, 252, .95); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--hairline); border-radius: var(--r-round); box-shadow: 0 14px 34px -18px rgba(20, 30, 70, .45); } .sticky-cta-txt { display: grid; line-height: 1.25; min-width: 0; } .sticky-cta-txt strong { font-size: 15px; font-weight: 600; } .sticky-cta-txt span { font-size: 12px; color: var(--tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sticky-cta .btn-sm { flex: none; white-space: nowrap; } /* ---------- cursor: dot + lagging ring ------------------------------------- Ported from the v1 build. The dot uses mix-blend-mode: difference, so it inverts whatever is under it — dark on the warm-white sections, light on the charcoal CTA band and footer — without any JS colour switching. The native cursor is hidden on desktop pointer devices only, and restored over text inputs so the I-beam is never lost. ------------------------------------- */ .cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 300; border-radius: var(--r-round); pointer-events: none; opacity: 0; transform: translate3d(-50%, -50%, 0); will-change: transform; } .cursor-dot { width: 12px; height: 12px; background: #fff; mix-blend-mode: difference; transition: width .28s var(--e-out), height .28s var(--e-out), opacity .3s linear; } .cursor-ring { width: 38px; height: 38px; z-index: 299; border: 1px solid rgba(61, 68, 78, .55); transition: width .3s var(--e-out), height .3s var(--e-out), border-color .3s linear, opacity .3s linear; } .cursor-dot.is-on { opacity: 1; } .cursor-ring.is-on { opacity: .9; } .cursor-dot.is-link { width: 46px; height: 46px; } .cursor-ring.is-link { width: 12px; height: 12px; border-color: rgba(61, 68, 78, .95); } /* MUST be JS-gated: with JS disabled there is no replacement dot, so hiding the native cursor would leave the page with no pointer at all. */ @media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .js-enabled body { cursor: none; } /* never take the I-beam away from something you type into */ input, textarea, select, [contenteditable] { cursor: auto; } } @media (max-width: 1023px), (hover: none) { .cursor-dot, .cursor-ring { display: none !important; } } /* ============================================================================= INTERIOR PAGES — case studies, about, client-work index ========================================================================== */ .page-head { position: relative; overflow: hidden; padding: 156px 0 var(--sec-gap); } .page-head > .container { position: relative; z-index: 1; } .crumb { font-size: 15px; font-weight: 300; color: var(--tertiary); margin-bottom: 22px; } .crumb a { color: var(--muted); border-bottom: 1px solid transparent; transition: border-color .25s linear, color .25s linear; } .crumb a:hover { color: var(--accent); border-bottom-color: var(--accent); } .crumb span { margin: 0 8px; color: var(--hairline); } .page-title { font-size: clamp(32px, 3.4vw, 50px); font-weight: 600; line-height: 1.12; max-width: 20ch; margin: 4px 0 24px; } .page-lead { font-size: 19px; max-width: 62ch; } .page-note { margin-top: 20px; max-width: 62ch; font-size: 16px; font-weight: 300; color: var(--tertiary); } .page-link { margin-top: 24px; font-size: 16px; } .page-head .trust-strip { margin-top: 34px; margin-bottom: 0; } /* key facts */ .fact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); margin-bottom: 56px; } .fact { display: grid; gap: 8px; align-content: start; background: var(--card); border: 1px solid var(--hairline); border-radius: 24px; padding: 24px 26px; transition: transform .35s var(--e-back), border-color .25s linear; } .fact:hover { transform: translateY(-4px); border-color: #a8bdb4; } .fact-k { font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-mid); } .fact-v { font-size: 17px; font-weight: 300; line-height: 1.45; color: var(--text); } /* article body */ .prose { max-width: 74ch; } .prose h2 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; margin: 56px 0 18px; } .prose h2:first-child { margin-top: 0; } .prose p { font-size: 18px; font-weight: 300; line-height: 1.65; color: var(--muted); margin-bottom: 18px; } .prose p strong, .prose li strong { color: var(--text); font-weight: 600; } .prose em { font-style: italic; } .prose-list { display: grid; gap: 14px; margin: 6px 0 20px; } .prose-list li { position: relative; padding-left: 26px; font-size: 18px; font-weight: 300; line-height: 1.6; color: var(--muted); } .prose-list li::before { content: ''; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border: solid var(--accent); border-width: 1.6px 1.6px 0 0; transform: rotate(45deg); } .prose-note { margin-top: 26px; padding: 22px 26px; background: var(--card); border: 1px solid var(--hairline); border-radius: 24px; font-size: 17px; color: var(--muted); } .quote-block { margin: 34px 0; padding: 32px 34px; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); transition: transform .4s var(--e-back), border-color .25s linear; } .quote-block:hover { transform: translateY(-4px); border-color: #a8bdb4; } .quote-block blockquote { margin: 0 0 18px; font-size: 20px; font-weight: 300; line-height: 1.5; color: var(--text); } .quote-block figcaption { display: grid; gap: 4px; padding-top: 18px; border-top: 1px solid var(--hairline); } /* client-work index cards */ .cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); } .cs-card { position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 40px; transition: transform .45s var(--e-back), border-color .25s linear, box-shadow .45s var(--e-out); } .cs-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s linear; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(6, 95, 70, .08), transparent 62%); } .cs-card:hover { transform: translateY(-5px); border-color: #a8bdb4; box-shadow: 0 18px 40px -22px rgba(20, 30, 70, .3); } .cs-card:hover::after { opacity: 1; } .cs-sector { font-size: 15px; font-weight: 300; color: var(--accent-mid); } .cs-card h2 { font-size: 28px; font-weight: 600; text-transform: none; line-height: 1.15; transition: transform .4s var(--e-out); } .cs-card:hover h2 { transform: translateX(5px); } .cs-body { font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--muted); } .cs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .cs-tags li { font-size: 14px; font-weight: 300; color: var(--tertiary); border: 1px solid var(--hairline); border-radius: var(--r-round); padding: 6px 14px; } .cs-go { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: var(--accent); } /* prev / next */ .page-next { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--hairline); } .page-next a { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; color: var(--muted); transition: color .25s linear, transform .3s var(--e-out); } .page-next a:hover { color: var(--accent); transform: translateX(3px); } .about-panel { margin: 24px 0 12px; } /* ============================================================================= SCREENSHOTS — real client sites in a light browser frame The frame is CSS, not baked into the JPEG, so it stays crisp and can be restyled without recapturing. Images are 1200x750 (2x the card slot). ========================================================================== */ .shot { margin: 0; position: relative; border: 1px solid var(--hairline); border-radius: 22px; background: var(--card); overflow: hidden; transition: border-color .3s linear, box-shadow .45s var(--e-out), transform .45s var(--e-back); } .shot-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--hairline); background: linear-gradient(180deg, #fbfbfc, #f4f5f7); } .shot-bar i { width: 8px; height: 8px; border-radius: var(--r-round); background: #d8dade; display: block; } .shot-bar em { margin-left: 10px; font-style: normal; font-size: 12px; font-weight: 300; color: var(--tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shot-img { position: relative; overflow: hidden; line-height: 0; } .shot-img img { display: block; width: 100%; height: auto; } /* mask reveal — JS-gated, so with JS off the image is simply visible */ .js-enabled .shot-img img { transform: scale(1.06); clip-path: inset(100% 0 0 0); } .js-enabled .shot.is-in .shot-img img { transform: none; clip-path: inset(0 0 0 0); transition: transform 1.15s var(--e-out), clip-path 1s var(--e-out); } .js-fallback .shot-img img { transform: none !important; clip-path: none !important; } .shot:hover { border-color: #a8bdb4; box-shadow: 0 18px 40px -24px rgba(20, 30, 70, .35); } .js-enabled .shot.is-in:hover .shot-img img { transform: scale(1.035); transition: transform .6s var(--e-out); } /* placement */ .case-lead .shot, .case-mini .shot, .cs-card .shot { margin-bottom: 26px; } .cs-card .shot { margin-bottom: 4px; } .page-shot { margin: 0 0 56px; } .page-shot .shot-img img { max-height: 620px; object-fit: cover; object-position: top center; } .work-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); margin: 22px 0 12px; } .work-strip a { display: grid; gap: 10px; } .work-strip span { font-size: 15px; font-weight: 400; color: var(--muted); transition: color .25s linear; } .work-strip a:hover span { color: var(--accent); } /* ============================================================================= RESPONSIVE ========================================================================== */ @media (max-width: 1180px) { :root { --pad: 56px; } .recog-grid { grid-template-columns: repeat(2, 1fr); } .fact-grid { grid-template-columns: repeat(2, 1fr); } .case-cols { grid-template-columns: repeat(2, 1fr); } .review-grid { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr 1fr; } .sys-inner { gap: 44px; } .price-card { grid-template-columns: 1fr; gap: 30px; padding: 38px 34px; } .pc-side { justify-content: flex-start; } .pc-price { text-align: left; } .pc-note { text-align: left; } .case-row { grid-template-columns: repeat(2, 1fr); } } /* Below 1024px every pinned/sticky sequence becomes ordinary vertical content. */ @media (max-width: 1023px) { .sys-scroll { height: auto; } .sys-sticky { position: static; height: auto; display: block; } .sys-inner { grid-template-columns: 1fr; gap: 0; } .sys-right { display: none; } .sys-count { display: none; } .sys-panes { position: relative; min-height: 0; padding-left: 30px; } .sys-panes::before { content: ''; position: absolute; left: 5px; top: 14px; bottom: 14px; width: 2px; background: var(--hairline); } .js-enabled .sys-pane, .sys-pane { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; padding: 26px 0; } .sys-pane::before { content: ''; position: absolute; left: -30px; top: 34px; width: 14px; height: 14px; border-radius: var(--r-round); background: var(--accent); } .sys-pane h3 { font-size: 34px; } .sys-pane > p { font-size: 18px; margin-bottom: 18px; } .js-enabled .sys-done { opacity: 1; transform: none; } .proc-grid, .faq-grid { grid-template-columns: 1fr; gap: 36px; } .proc-head, .faq-head { position: static; } .price-slot { position: static; } .price-slot + .price-slot { margin-top: var(--grid-gap); } .price-tail { display: none; } .price-card { transform: none !important; max-width: none; } } @media (max-width: 900px) { :root { --pad: 24px; --sec-gap: 56px; --lift: 32px; } .nav-links { display: none; } .burger { display: flex; } .hero { padding-top: 132px; } .team-grid, .cta-grid, .case-row { grid-template-columns: 1fr; } .team-panel { order: -1; } .flow-track { grid-template-columns: 1fr; gap: 22px; } .flow-node { padding-top: 0; padding-left: 24px; } .flow-node::before { top: 8px; bottom: -22px; left: 4px; right: auto; width: 1px; height: auto; } .flow-node:last-child::before { display: none; } .flow-fill, .flow-laser { display: none; } .gem { display: none; } /* large blurred conics are not worth the paint cost on a phone */ .fn-dot { top: 6px; } .flow-track:hover .flow-node { opacity: 1; } .flow-track .flow-node:hover { transform: none; } .case-cta { flex-direction: column; align-items: flex-start; } .page-head { padding-top: 132px; } .cs-grid { grid-template-columns: 1fr; } .sticky-cta { display: block; } /* the bar covers the bottom of the page — keep the footer clear of it */ .footer { padding-bottom: 108px; } } @media (max-width: 620px) { :root { --pad: 18px; } body { font-size: 17px; } h2 { font-size: 30px; } .recog-grid, .case-cols, .foot-grid, .row2 { grid-template-columns: 1fr; } .hero-title { font-size: clamp(32px, 9vw, 46px); } .flow-card, .case-lead, .case-mini, .price-card, .team-panel, .qform, .review, .recog-item, .case-cta { padding: 26px 22px; border-radius: 28px; } .pstep { gap: 18px; padding: 24px 0; } .pnum { width: 52px; height: 52px; font-size: 17px; } .proc-line { left: 25px; } .faq-q { font-size: 19px; gap: 14px; } .fact-grid, .work-strip { grid-template-columns: 1fr; } .fact, .quote-block, .prose-note, .cs-card { padding: 24px 22px; border-radius: 24px; } .prose p, .prose-list li { font-size: 17px; } .page-next { flex-direction: column; } .cmp-head { display: none; } .cmp-row { grid-template-columns: 1fr; gap: 0; padding-bottom: 14px; } .cmp-old, .cmp-new { padding: 16px 14px; font-size: 16px; } /* At this width the bar has one job: one tap. Drop the sub-line rather than let it ellipsise, and let the label use the space it needs. */ .sticky-cta { padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); } .sticky-cta-in { padding: 8px 8px 8px 16px; gap: 10px; } /* Below 620 the label has nowhere to go without wrapping badly — drop it and let the bar be exactly one full-width tap target. */ .sticky-cta-txt { display: none; } .sticky-cta-in { padding: 8px; } .sticky-cta .btn-sm { width: 100%; justify-content: center; font-size: 16px; padding: 14px 18px; } .faq-a-inner { padding-right: 10px; } .hero-cta .btn, .qform .btn, .drawer .drawer-cta { width: 100%; justify-content: center; } .hero-cta { width: 100%; } .brand { white-space: nowrap; } .nav-right .btn-sm { display: none; } /* the CTA lives in the drawer at this width */ .nav-shell { padding-left: 16px; } .drawer { padding: 0 18px; } .tp-row { padding: 18px 8px; } .tp-k { min-width: 0; } } /* Touch devices: hover-only affordances must be permanently visible. */ @media (hover: none) { .flow-card::after, .case-lead::after, .case-mini::after, .price-card::after, .review::after, .team-panel::after { display: none; } .tp-rows:hover .tp-row { opacity: 1; } .tp-arw { opacity: .55; transform: rotate(45deg); } .flow-track:hover .flow-node { opacity: 1; } } /* ============================================================================= REDUCED MOTION — everything stays visible, nothing animates ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .rot-badge, .hero-bg, .flow-card, .cta-panel-bg { transform: none !important; } .js-enabled [data-reveal]:not([data-revealed]), .js-enabled [data-reveal-lines]:not([data-revealed]), .js-enabled [data-hero-step]:not([data-revealed]), .js-enabled .sys-done, .btn:active { opacity: 1 !important; transform: none !important; } /* sticky sequences collapse to plain vertical content */ .sys-scroll { height: auto !important; } .sys-sticky { position: static !important; height: auto !important; display: block !important; } .sys-inner { grid-template-columns: 1fr !important; } .sys-right { display: none !important; } .sys-count { display: none !important; } .js-enabled .sys-pane, .sys-pane { position: relative !important; inset: auto !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; padding: 22px 0 !important; } .price-slot { position: static !important; } .price-slot + .price-slot { margin-top: var(--grid-gap) !important; } .price-tail { display: none !important; } .price-card { transform: none !important; } .proc-head, .faq-head { position: static !important; } .js-enabled .pbody h4 { color: var(--text) !important; } .js-enabled .pbody p { opacity: 1 !important; transform: none !important; } .js-enabled .pstep .pnum { transform: none !important; } .faq-a { height: auto !important; } .sys-line-fill, .proc-line-fill, .tp-line-fill { height: 100% !important; } .flow-fill { transform: scaleX(1) !important; } .flow-laser { display: none !important; animation: none !important; } .cursor-dot, .cursor-ring { display: none !important; } body { cursor: auto !important; } .gem { display: none !important; } /* the press is a transition, not an animation, but it still needs pinning */ /* The press is a state change, not an animation, but it still needs pinning. Hover keeps its brightening (static, instant, visible — the same call this file already makes for nav underlines) and loses its lift. */ .btn-primary::before, .btn-primary::after { transition: none !important; } .btn-primary:hover, .btn-primary:focus-visible { transform: none !important; } .btn-primary:hover::after, .btn-primary:focus-visible::after { opacity: 1; } .btn-primary:active { transform: none !important; } .js-enabled .shot-img img { transform: none !important; clip-path: none !important; } .shot:hover { box-shadow: none !important; } .flow-card::after, .case-lead::after, .case-mini::after, .price-card::after, .review::after, .team-panel::after { opacity: 0 !important; } /* hover lifts are removed, not left mid-transform */ .case-mini:hover, .case-lead:hover, .review:hover, .recog-item:hover, .price-card:hover { transform: none !important; box-shadow: none !important; } .arw::before, .arw::after { transition: none !important; } .btn:hover .arw::before, .btn:focus-visible .arw::before { transform: none !important; opacity: 1 !important; } .btn:hover .arw::after, .btn:focus-visible .arw::after { opacity: 0 !important; } .nav-links a::after, .foot-col a::after, .drawer a:not(.btn)::after { transform: scaleX(0) !important; } .nav-links a:hover::after, .nav-links a.is-active::after, .foot-col a:hover::after, .drawer a:not(.btn):hover::after { transform: scaleX(1) !important; } }