/* ========================================================================== STEELE SOLUTIONS — DESIGN SYSTEM v4 "Golden Section" Built from a blank sheet. Derived from the brand mark itself: a golden- ratio construction (Fibonacci rectangles + spiral) drawn in fine line. Brand constants kept: Space Grotesk + Inter, teal #007caf, navy #060d1a, slate #64748b, white. Space Mono (Space Grotesk's sibling) is used only for technical annotations. ========================================================================== */ /* ── fonts (self-hosted, work offline) ─────────────────────────────── */ @font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Space Mono"; src: url("fonts/space-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Space Mono"; src: url("fonts/space-mono-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; } /* ── tokens ────────────────────────────────────────────────────────── */ :root { /* brand */ --teal: #007caf; --navy: #060d1a; --slate: #64748b; --white: #ffffff; /* derived surfaces */ --ink: var(--navy); --ink-2: #0a1628; --ink-3: #0d1b2e; --paper: #ffffff; /* core light surface: white (light blue-grey retired) */ --paper-2: #f2f4f6; --paper-3: #e4e8ec; /* derived text colors (AA-checked) */ --teal-ink: #007caf; /* teal for small text on paper: 4.6:1 */ --slate-ink: #4b5768; /* secondary text on paper: 6.5:1 */ --on-ink-2: rgba(255,255,255,.72); --on-ink-3: rgba(255,255,255,.5); /* rules */ --rule: rgba(0,124,175,.26); /* hairlines on white: brand blue tint */ --rule-strong: rgba(6,13,26,.55); --rule-ink: rgba(255,255,255,.12); --rule-ink-strong: rgba(255,255,255,.4); --grid-minor: rgba(0,124,175,.085); /* drafting grid on white in brand blue #007caf */ --grid-major: rgba(0,124,175,.17); --grid-minor-ink: rgba(255,255,255,.028); --grid-major-ink: rgba(255,255,255,.055); /* type */ --f-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --f-body: "Inter", ui-sans-serif, system-ui, sans-serif; --f-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --t-mega: clamp(3.1rem, 9.2vw, 9.6rem); --t-1: clamp(2.6rem, 6vw, 5.4rem); --t-2: clamp(2rem, 4.2vw, 3.7rem); --t-3: clamp(1.35rem, 2vw, 1.75rem); --t-4: 1.125rem; --t-body: 1.0625rem; --t-small: .9rem; --t-mono: .72rem; /* golden section */ --phi: 1.618; --major: 61.803%; --minor: 38.197%; /* space (8pt, fibonacci-flavoured at the top end) */ --s-1: 4px; --s-2: 8px; --s-3: 13px; --s-4: 21px; --s-5: 34px; --s-6: 55px; --s-7: 89px; --s-8: 144px; --sec-y: clamp(89px, 11vw, 160px); --gutter: clamp(18px, 4vw, 56px); --wrap: 1400px; --radius: 0px; /* motion */ --ease: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --d-fast: .18s; --d: .45s; --d-slow: .9s; --d-draw: 1.6s; --hdr-h: 112px; --hdr-h-compact: 72px; } @media (max-width: 1023px) { :root { --hdr-h: 68px; --hdr-h-compact: 68px; } } /* ── base ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { margin: 0; background: var(--ink); color: var(--ink); font-family: var(--f-body); font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } [id] { scroll-margin-top: calc(var(--hdr-h-compact) + 12px); } a { color: inherit; } p { margin: 0 0 1em; } h1, h2, h3, h4, h5 { margin: 0; font-family: var(--f-display); font-weight: 600; letter-spacing: -0.035em; line-height: 1; } ul, ol { margin: 0; padding: 0; } button { font: inherit; color: inherit; } ::selection { background: var(--teal); color: var(--white); } :focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } .s-paper :focus-visible, .s-white :focus-visible { outline-color: var(--teal-ink); } .skip { position: absolute; left: -9999px; top: 8px; z-index: 2000; background: var(--teal); color: var(--ink); padding: 12px 18px; font-weight: 700; } .skip:focus { left: 8px; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── surfaces ──────────────────────────────────────────────────────── */ .s-ink { background: var(--ink); color: var(--white); position: relative; } .s-ink-2 { background: var(--ink-2); color: var(--white); position: relative; } .s-paper { background: var(--paper); color: var(--ink); position: relative; } .s-white { background: var(--white); color: var(--ink); position: relative; } .s-teal { background: var(--teal); color: var(--ink); position: relative; } /* drafting grid, moved on the compositor (transform), not by repainting */ .grid-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .grid-field::before { content: ""; position: absolute; inset: -120px; background-image: linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px), linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px); background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px; animation: grid-drift 48s linear infinite; will-change: transform; } .s-ink .grid-field::before, .s-ink-2 .grid-field::before { background-image: linear-gradient(var(--grid-minor-ink) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor-ink) 1px, transparent 1px), linear-gradient(var(--grid-major-ink) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major-ink) 1px, transparent 1px); } @keyframes grid-drift { to { transform: translate3d(120px, 120px, 0); } } .grid-field.fade-b { -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); } .grid-field.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); } /* scan line — a single slow sweep across a drawing */ .scanline { position: absolute; left: 0; right: 0; height: 1px; top: 0; background: linear-gradient(90deg, transparent, var(--teal), transparent); opacity: .55; animation: scan 7s var(--ease-io) infinite; pointer-events: none; } @keyframes scan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .55; } 90% { opacity: .55; } 100% { transform: translateY(var(--scan-h, 520px)); opacity: 0; } } /* ── layout ────────────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; } .sec { padding: var(--sec-y) 0; } .sec-tight { padding: calc(var(--sec-y) * .6) 0; } .golden { display: grid; grid-template-columns: var(--minor) 1fr; gap: clamp(28px, 5vw, 89px); } .golden.rev { grid-template-columns: 1fr var(--minor); } .golden > * { min-width: 0; } .sticky { position: sticky; top: calc(var(--hdr-h-compact) + 34px); align-self: start; } @media (max-width: 1023px) { .golden, .golden.rev { grid-template-columns: 1fr; } .sticky { position: static; } } /* ── type ──────────────────────────────────────────────────────────── */ .mega { font-family: var(--f-display); font-size: var(--t-mega); font-weight: 600; letter-spacing: -0.055em; line-height: .88; } .h1 { font-size: var(--t-1); letter-spacing: -0.045em; line-height: .95; } .h2 { font-size: var(--t-2); letter-spacing: -0.04em; line-height: 1; } .h3 { font-size: var(--t-3); letter-spacing: -0.025em; line-height: 1.12; } .h4 { font-size: var(--t-4); letter-spacing: -0.015em; line-height: 1.25; } .lead { font-size: clamp(1.08rem, 1.35vw, 1.28rem); line-height: 1.55; max-width: 38em; } .s-ink .lead, .s-ink-2 .lead { color: var(--on-ink-2); } .s-paper .lead, .s-white .lead { color: var(--slate-ink); } .muted { color: var(--slate-ink); } .s-ink .muted, .s-ink-2 .muted { color: var(--on-ink-2); } .teal { color: var(--teal); } .s-paper .teal, .s-white .teal { color: var(--teal-ink); } .mono { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; } .mono-n { font-family: var(--f-mono); font-variant-numeric: tabular-nums; } .outline { color: transparent; -webkit-text-stroke: 1.2px currentColor; } .s-ink .outline { -webkit-text-stroke-color: rgba(255,255,255,.75); } em.u { font-style: normal; position: relative; white-space: nowrap; } em.u::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .07em; background: var(--teal); transform-origin: left; } /* sheet label: "§02 — SERVICES INDEX ······ SHEET 02/07" */ .sheet-label { display: flex; align-items: center; gap: 14px; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: clamp(34px, 5vw, 55px); } .sheet-label .sec-no { color: var(--teal); font-weight: 700; } .s-paper .sheet-label .sec-no, .s-white .sheet-label .sec-no { color: var(--teal-ink); } .sheet-label .rule { flex: 1; height: 1px; background: currentColor; opacity: .25; transform-origin: left; } .sheet-label .sheet-no { opacity: .6; } /* corner registration ticks for framed elements */ .ticks { position: relative; } .ticks::before, .ticks::after { content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid currentColor; opacity: .55; pointer-events: none; transition: transform var(--d) var(--ease); } .ticks::before { top: -7px; left: -7px; border-top-width: 1px; border-left-width: 1px; } .ticks::after { bottom: -7px; right: -7px; border-bottom-width: 1px; border-right-width: 1px; } /* dimension line: |←—— 30–45 DAYS ——→| */ .dim { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; } .dim .dl { flex: 1; height: 1px; background: currentColor; position: relative; opacity: .6; } .dim .dl::before, .dim .dl::after { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: currentColor; } .dim .dl:first-child::before { left: 0; } .dim .dl:last-child::after { right: 0; } /* ── buttons ───────────────────────────────────────────────────────── */ .btn { --b-bg: var(--ink); --b-fg: var(--white); --b-sweep: var(--teal); --b-fg-h: var(--white); --b-box: var(--teal); --b-box-fg: var(--white); display: inline-flex; align-items: stretch; gap: 0; text-decoration: none; cursor: pointer; background: var(--b-bg); color: var(--b-fg); border: 0; padding: 0; position: relative; isolation: isolate; font-family: var(--f-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; line-height: 1; transition: transform var(--d-fast) var(--ease), box-shadow var(--d) var(--ease); -webkit-tap-highlight-color: transparent; } .btn .b-label { padding: 19px 24px 19px 24px; display: flex; align-items: center; position: relative; z-index: 1; transition: color var(--d) var(--ease); white-space: nowrap; } .btn .b-box { width: 56px; background: var(--b-box); color: var(--b-box-fg); display: grid; place-items: center; overflow: hidden; position: relative; z-index: 1; } .btn .b-box svg { width: 18px; height: 18px; grid-area: 1 / 1; transition: transform var(--d) var(--ease); } .btn .b-box svg + svg { transform: translateX(-260%); } .btn::before { content: ""; position: absolute; inset: 0 56px 0 0; background: var(--b-sweep); transform: scaleX(0); transform-origin: left; transition: transform var(--d) var(--ease); z-index: 0; } .btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); z-index: 2; pointer-events: none; opacity: 0; } .btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); } .btn:hover .b-label, .btn:focus-visible .b-label { color: var(--b-fg-h); } .btn:hover .b-box svg:first-child, .btn:focus-visible .b-box svg:first-child { transform: translateX(260%); } .btn:hover .b-box svg + svg, .btn:focus-visible .b-box svg + svg { transform: translateX(0); } .btn:hover::after { animation: streak .9s var(--ease) .12s 1 both; } @keyframes streak { 0% { left: -40%; opacity: 0; } 20% { opacity: 1; } 100% { left: 110%; opacity: 0; } } .btn:active { transform: translateY(1px) scale(.99); } .btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; } .s-ink .btn, .s-ink-2 .btn, .btn.on-ink { --b-bg: var(--teal); --b-fg: var(--white); --b-sweep: var(--white); --b-fg-h: var(--ink); --b-box: var(--white); --b-box-fg: var(--ink); } .btn.ghost { --b-bg: transparent; --b-fg: currentColor; box-shadow: inset 0 0 0 1px currentColor; } .s-ink .btn.ghost, .s-ink-2 .btn.ghost { --b-bg: transparent; --b-fg: var(--white); --b-sweep: var(--white); --b-fg-h: var(--ink); --b-box: transparent; --b-box-fg: var(--white); box-shadow: inset 0 0 0 1px var(--rule-ink-strong); } .s-ink .btn.ghost .b-box, .s-ink-2 .btn.ghost .b-box { box-shadow: inset 1px 0 0 var(--rule-ink-strong); } .s-ink .btn.ghost:hover .b-box, .s-ink-2 .btn.ghost:hover .b-box { background: var(--teal); color: var(--ink); } .btn.sm .b-label { padding: 14px 18px; font-size: .9rem; } .btn.sm .b-box { width: 46px; } .btn.sm::before { right: 46px; } .btn.block { display: flex; width: 100%; } .btn.block .b-label { flex: 1; justify-content: space-between; } .btn[disabled] { opacity: .6; cursor: progress; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } /* text link with drawn underline + arrow */ .tlink { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-family: var(--f-display); position: relative; padding-bottom: 3px; } .tlink::after { content: ""; position: absolute; left: 0; right: 26px; bottom: 0; height: 1px; background: currentColor; transform: scaleX(.3); transform-origin: left; transition: transform var(--d) var(--ease); } .tlink svg { width: 16px; height: 16px; transition: transform var(--d) var(--ease); } .tlink:hover::after, .tlink:focus-visible::after { transform: scaleX(1); } .tlink:hover svg, .tlink:focus-visible svg { transform: translateX(5px); } /* ── header ────────────────────────────────────────────────────────── */ .hdr { position: fixed; inset: 0 0 auto 0; z-index: 900; background: var(--ink); color: var(--white); transition: transform var(--d) var(--ease); } .hdr-top { height: 40px; border-bottom: 1px solid var(--rule-ink); overflow: hidden; transition: height var(--d) var(--ease), opacity var(--d) var(--ease); } .hdr-top .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .hdr-top .mono { color: var(--on-ink-3); font-size: .66rem; } .hdr-top a { text-decoration: none; color: var(--on-ink-2); transition: color var(--d-fast); } .hdr-top a:hover { color: var(--teal); } .hdr-top .coords { display: flex; align-items: center; gap: 10px; } .hdr-top .coords i { width: 7px; height: 7px; border: 1px solid var(--teal); border-radius: 50%; position: relative; } .hdr-top .coords i::after { content: ""; position: absolute; inset: 1px; background: var(--teal); border-radius: 50%; animation: blink 2.4s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .hdr-top .contact { display: flex; gap: 22px; } .hdr-bar { height: 72px; border-bottom: 1px solid var(--rule-ink); } .hdr-bar .wrap { height: 100%; display: flex; align-items: center; gap: 28px; } .hdr-logo { display: flex; align-items: center; height: 100%; padding-right: 26px; border-right: 1px solid var(--rule-ink); flex-shrink: 0; } .hdr-logo img { height: 50px; width: auto; } .hdr-nav { flex: 1; min-width: 0; } .hdr-nav ol { list-style: none; display: flex; align-items: center; gap: clamp(4px, 1.1vw, 20px); } .hdr-nav a { display: flex; align-items: baseline; gap: 6px; text-decoration: none; color: var(--on-ink-2); font-family: var(--f-display); font-weight: 500; font-size: .95rem; padding: 10px 2px; position: relative; transition: color var(--d-fast); white-space: nowrap; } .hdr-nav a .n { font-family: var(--f-mono); font-size: .6rem; color: var(--on-ink-3); letter-spacing: .06em; transition: color var(--d-fast); } .hdr-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--teal); transform: scaleX(0); transform-origin: right; transition: transform var(--d) var(--ease); } .hdr-nav a:hover, .hdr-nav a:focus-visible, .hdr-nav a[aria-current="page"] { color: var(--white); } .hdr-nav a:hover .n, .hdr-nav a[aria-current="page"] .n { color: var(--teal); } .hdr-nav a:hover::after, .hdr-nav a:focus-visible::after, .hdr-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .hdr-cta { margin-left: auto; flex-shrink: 0; } .hdr.compact .hdr-top { height: 0; opacity: 0; border-bottom-width: 0; } .hdr.hide { transform: translateY(-100%); } .hdr-burger { display: none; margin-left: auto; background: none; border: 1px solid var(--rule-ink-strong); width: 48px; height: 48px; cursor: pointer; position: relative; } .hdr-burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--white); transition: transform var(--d) var(--ease), opacity var(--d-fast); } .hdr-burger span:nth-child(1) { top: 17px; } .hdr-burger span:nth-child(2) { top: 23px; right: 19px; } .hdr-burger span:nth-child(3) { top: 29px; } .menu-open .hdr-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .menu-open .hdr-burger span:nth-child(2) { opacity: 0; } .menu-open .hdr-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* mobile / tablet full-screen menu */ .menu { position: fixed; inset: 0; z-index: 880; background: var(--ink); color: var(--white); padding: calc(var(--hdr-h) + 20px) var(--gutter) 40px; display: flex; flex-direction: column; overflow-y: auto; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .6s var(--ease), visibility 0s linear .6s; } .menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .6s var(--ease), visibility 0s; } .menu ol { list-style: none; border-top: 1px solid var(--rule-ink); } .menu li { border-bottom: 1px solid var(--rule-ink); } .menu a.m-link { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; text-decoration: none; font-family: var(--f-display); font-size: clamp(1.8rem, 7vw, 2.8rem); letter-spacing: -0.04em; font-weight: 500; } .menu a.m-link .n { font-family: var(--f-mono); font-size: .7rem; color: var(--teal); letter-spacing: .08em; } .menu a.m-link[aria-current="page"] { color: var(--teal); } .menu .m-foot { margin-top: auto; padding-top: 34px; display: grid; gap: 18px; } .menu .m-foot a { color: var(--on-ink-2); text-decoration: none; } .js:not(.rm) .menu li { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .js:not(.rm) .menu-open .menu li { opacity: 1; transform: none; } .menu-open .menu li:nth-child(2) { transition-delay: .04s; } .menu-open .menu li:nth-child(3) { transition-delay: .08s; } .menu-open .menu li:nth-child(4) { transition-delay: .12s; } .menu-open .menu li:nth-child(5) { transition-delay: .16s; } .menu-open .menu li:nth-child(6) { transition-delay: .2s; } .menu-open .menu li:nth-child(7) { transition-delay: .24s; } .menu-open .menu li:nth-child(8) { transition-delay: .28s; } body.menu-open { overflow: hidden; } @media (max-width: 1180px) { .hdr-nav a .n { display: none; } .hdr-top .contact a:last-child { display: none; } } @media (max-width: 1023px) { .hdr-top { display: none; } .hdr-bar { height: var(--hdr-h); } .hdr-nav, .hdr-cta { display: none; } .hdr-burger { display: block; } .hdr-logo { border-right: 0; padding-right: 0; } .hdr-logo img { height: 44px; } } main { display: block; } .hdr-spacer { height: var(--hdr-h); background: var(--ink); } /* ── footer (drawing title block) ──────────────────────────────────── */ .ftr { background: var(--ink); color: var(--white); position: relative; overflow: hidden; } .ftr-cta { padding: clamp(89px, 10vw, 144px) 0 clamp(55px, 6vw, 89px); border-bottom: 1px solid var(--rule-ink); position: relative; } .ftr-cta .mega { max-width: 11em; } .ftr-cta .row { display: flex; justify-content: space-between; align-items: flex-end; gap: 34px; flex-wrap: wrap; margin-top: 34px; } .ftr-phone { font-family: var(--f-display); font-size: clamp(1.6rem, 3.2vw, 2.6rem); letter-spacing: -0.03em; text-decoration: none; color: var(--white); display: inline-flex; gap: 14px; align-items: baseline; transition: color var(--d-fast); } .ftr-phone:hover { color: var(--teal); } .ftr-phone .mono { color: var(--on-ink-3); } .ftr-spiral { position: absolute; right: -4%; top: 50%; width: min(620px, 60vw); transform: translateY(-50%); opacity: .5; pointer-events: none; color: var(--teal); } .ftr-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); border-bottom: 1px solid var(--rule-ink); } .ftr-col { padding: 34px 26px 40px; border-left: 1px solid var(--rule-ink); } .ftr-col:first-child { border-left: 0; padding-left: 0; } .ftr-col h2 { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .14em; text-transform: uppercase; font-weight: 400; color: var(--on-ink-3); margin-bottom: 18px; } .ftr-col ul { list-style: none; display: grid; gap: 10px; } .ftr-col a { color: var(--on-ink-2); text-decoration: none; font-size: .93rem; transition: color var(--d-fast); } .ftr-col a:hover { color: var(--teal); } .ftr-brand img { height: 64px; width: auto; margin-bottom: 18px; } .ftr-brand p { color: var(--on-ink-2); font-size: .93rem; max-width: 30em; } .ftr-rating { display: inline-flex; gap: 12px; align-items: center; text-decoration: none; border: 1px solid var(--rule-ink); padding: 10px 14px; margin-top: 8px; transition: border-color var(--d-fast); } .ftr-rating:hover { border-color: var(--teal); } .ftr-rating b { font-family: var(--f-display); font-size: 1.4rem; } .ftr-rating .stars svg { width: 13px; height: 13px; } .ftr-social { display: flex; gap: 8px; margin-top: 18px; } .ftr-social a { width: 40px; height: 40px; border: 1px solid var(--rule-ink); display: grid; place-items: center; color: var(--on-ink-2); transition: all var(--d-fast); } .ftr-social a:hover { background: var(--teal); color: var(--ink); border-color: var(--teal); } .ftr-social svg { width: 16px; height: 16px; } .ftr-block { display: grid; grid-template-columns: repeat(6, auto); font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; } .ftr-block > div { padding: 14px 16px; border-left: 1px solid var(--rule-ink); } .ftr-block > div:first-child { border-left: 0; padding-left: 0; } .ftr-block span { display: block; color: var(--on-ink-3); margin-bottom: 4px; } .ftr-block b { font-weight: 400; color: var(--on-ink-2); } .ftr-block a { color: var(--on-ink-2); text-decoration: none; margin-right: 12px; } .ftr-block a:hover { color: var(--teal); } @media (max-width: 1023px) { .ftr-grid { grid-template-columns: 1fr 1fr; } .ftr-col { border-left: 0; border-top: 1px solid var(--rule-ink); padding-left: 0; } .ftr-col:first-child { grid-column: 1 / -1; border-top: 0; } .ftr-block { grid-template-columns: 1fr 1fr; } .ftr-block > div { border-left: 0; border-top: 1px solid var(--rule-ink); padding-left: 0; } } @media (max-width: 560px) { .ftr-grid { grid-template-columns: 1fr; } } /* ── stars ─────────────────────────────────────────────────────────── */ .stars { display: inline-flex; gap: 3px; color: var(--teal); } .stars svg { width: 16px; height: 16px; } .s-paper .stars, .s-white .stars { color: var(--ink); } /* ── spec strip (facts in a drawing-table row) ─────────────────────── */ .spec { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); border-top: 1px solid var(--rule-ink); } .spec > div { padding: 22px 20px 4px; border-left: 1px solid var(--rule-ink); } .spec > div:first-child { border-left: 0; padding-left: 0; } .spec .v { font-family: var(--f-display); font-size: clamp(1.9rem, 3.2vw, 2.9rem); letter-spacing: -0.04em; line-height: 1; display: block; } .spec .k { display: block; margin-top: 10px; color: var(--on-ink-3); } .s-paper .spec, .s-white .spec { border-top-color: var(--rule); } .s-paper .spec > div, .s-white .spec > div { border-left-color: var(--rule); } .s-paper .spec .k, .s-white .spec .k { color: var(--slate-ink); } @media (max-width: 900px) { .spec { grid-template-columns: 1fr 1fr; } .spec > div { border-left: 0; border-top: 1px solid var(--rule-ink); padding-left: 0; padding-bottom: 18px; } .s-paper .spec > div { border-top-color: var(--rule); } .spec > div:nth-child(-n+2) { border-top: 0; } } /* ── generic drawn-svg behaviour (pathLength="1" on every drawn path) ─ */ .js:not(.rm) [data-io] .draw, .js:not(.rm) .draw[data-io] { stroke-dasharray: 1; stroke-dashoffset: 1; } .js:not(.rm) .is-in .draw, .js:not(.rm) .draw.is-in { stroke-dashoffset: 0; transition: stroke-dashoffset var(--d-draw) var(--ease-io); transition-delay: calc(var(--i, 0) * 90ms); } .js:not(.rm) [data-io] .pop { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; } .js:not(.rm) .is-in .pop { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .7s var(--ease); transition-delay: calc(.6s + var(--i, 0) * 90ms); } .js:not(.rm) [data-io] .fade-svg { opacity: 0; } .js:not(.rm) .is-in .fade-svg { opacity: 1; transition: opacity .8s var(--ease); transition-delay: calc(.9s + var(--i, 0) * 70ms); } /* ── reveal vocabulary (IO adds .is-in; hidden states only with JS + motion) ─ */ .js:not(.rm) [data-rv="up"] { opacity: 0; transform: translateY(34px); } .js:not(.rm) [data-rv="left"] { opacity: 0; transform: translateX(-44px); } .js:not(.rm) [data-rv="right"] { opacity: 0; transform: translateX(44px); } .js:not(.rm) [data-rv="scale"] { opacity: 0; transform: scale(.94); } .js:not(.rm) [data-rv="clip"] { clip-path: inset(0 100% 0 0); } .js:not(.rm) [data-rv="clip-up"] { clip-path: inset(100% 0 0 0); } .js:not(.rm) [data-rv="rule"] { transform: scaleX(0); transform-origin: left; } .js:not(.rm) [data-rv].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); transition: opacity .9s var(--ease), transform 1s var(--ease), clip-path 1.1s var(--ease-io); transition-delay: var(--dl, 0s); } .js:not(.rm) [data-rv="stagger"] > * { opacity: 0; transform: translateY(26px); } .js:not(.rm) [data-rv="stagger"].is-in > * { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .8s var(--ease); } [data-rv="stagger"].is-in > *:nth-child(2) { transition-delay: .06s; } [data-rv="stagger"].is-in > *:nth-child(3) { transition-delay: .12s; } [data-rv="stagger"].is-in > *:nth-child(4) { transition-delay: .18s; } [data-rv="stagger"].is-in > *:nth-child(5) { transition-delay: .24s; } [data-rv="stagger"].is-in > *:nth-child(6) { transition-delay: .3s; } [data-rv="stagger"].is-in > *:nth-child(7) { transition-delay: .36s; } [data-rv="stagger"].is-in > *:nth-child(8) { transition-delay: .42s; } [data-rv="stagger"].is-in > *:nth-child(9) { transition-delay: .48s; } [data-rv="stagger"].is-in > *:nth-child(n+10) { transition-delay: .54s; } /* word-by-word headline mask reveal (words wrapped by JS) */ .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; } .w > span { display: inline-block; } .js:not(.rm) [data-rv="words"] .w > span { transform: translateY(105%); } .js:not(.rm) [data-rv="words"].is-in .w > span { transform: none; transition: transform 1s var(--ease); transition-delay: calc(var(--wi) * 55ms + var(--dl, 0s)); } /* ── section intro block ───────────────────────────────────────────── */ .intro { display: grid; grid-template-columns: var(--minor) 1fr; gap: clamp(28px, 5vw, 89px); align-items: end; margin-bottom: clamp(55px, 7vw, 89px); } .intro .lead { margin: 0; } @media (max-width: 1023px) { .intro { grid-template-columns: 1fr; align-items: start; } } /* ── index list (services etc.) ────────────────────────────────────── */ .index { list-style: none; border-top: 1px solid var(--rule-strong); } .index li { border-bottom: 1px solid var(--rule); } .index a { display: grid; grid-template-columns: 64px 76px minmax(0, 1.2fr) minmax(0, 1fr) 56px; gap: 22px; align-items: center; padding: 22px 0; text-decoration: none; position: relative; isolation: isolate; } .index a::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease); z-index: -1; } .index .no { font-family: var(--f-mono); font-size: .75rem; color: var(--slate-ink); transition: color var(--d); } .index .ic { width: 64px; height: 64px; color: var(--ink); transition: color var(--d); } .index .ic svg { width: 100%; height: 100%; } .index .ic .draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0s; } .index .nm { font-family: var(--f-display); font-size: clamp(1.45rem, 2.6vw, 2.3rem); letter-spacing: -0.035em; line-height: 1.05; font-weight: 500; transition: color var(--d), transform var(--d) var(--ease); } .index .ds { color: var(--slate-ink); font-size: .95rem; line-height: 1.5; transition: color var(--d); } .index .ar { width: 56px; height: 56px; border: 1px solid var(--rule-strong); display: grid; place-items: center; transition: all var(--d) var(--ease); } .index .ar svg { width: 18px; height: 18px; transition: transform var(--d) var(--ease); } .index a:hover::before, .index a:focus-visible::before { transform: scaleY(1); transform-origin: top; } .index a:hover .nm, .index a:focus-visible .nm { color: var(--white); transform: translateX(8px); } .index a:hover .ds, .index a:focus-visible .ds { color: var(--on-ink-2); } .index a:hover .no, .index a:focus-visible .no { color: var(--teal); } .index a:hover .ic, .index a:focus-visible .ic { color: var(--teal); } .index a:hover .ic .draw, .index a:focus-visible .ic .draw { animation: redraw 1.1s var(--ease-io) both; } .index a:hover .ar, .index a:focus-visible .ar { background: var(--teal); border-color: var(--teal); color: var(--ink); } .index a:hover .ar svg, .index a:focus-visible .ar svg { transform: rotate(-45deg); } .index a:focus-visible { outline-offset: -2px; } @keyframes redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @media (max-width: 860px) { .index a { grid-template-columns: 44px 1fr 48px; gap: 14px; padding: 18px 0; } .index .no, .index .ds { display: none; } .index .ic { width: 44px; height: 44px; } .index .ar { width: 44px; height: 44px; } } /* ── surfaces diagram (interactive) ────────────────────────────────── */ .seg { display: inline-flex; border: 1px solid var(--rule-strong); padding: 4px; gap: 4px; } .seg button { border: 0; background: transparent; cursor: pointer; padding: 11px 16px; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-ink); transition: all var(--d-fast); } .seg button[aria-pressed="true"] { background: var(--ink); color: var(--white); } .seg button:hover:not([aria-pressed="true"]) { color: var(--ink); background: var(--paper-2); } .surf { position: relative; margin-top: 26px; } .surf svg { width: 100%; height: auto; overflow: visible; } .surf .edge { fill: none; stroke: var(--ink); stroke-width: 1.4; transition: stroke var(--d), opacity var(--d), stroke-dasharray var(--d); } .surf .edge-flow { fill: none; stroke: var(--teal); stroke-width: 4; stroke-dasharray: .06 .94; stroke-linecap: round; animation: flow 2.6s linear infinite; transition: opacity var(--d); } @keyframes flow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } .surf .node rect { fill: var(--white); stroke: var(--ink); stroke-width: 1.2; transition: fill var(--d), stroke var(--d); } .surf .node text { font-family: var(--f-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; fill: var(--ink); transition: fill var(--d); } .surf .node .st { font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em; fill: var(--slate-ink); } .surf .node .x { stroke: var(--slate); stroke-width: 1.4; opacity: 0; transition: opacity var(--d); } .surf .node .ok { fill: var(--teal); opacity: 1; transition: opacity var(--d); } .surf[data-mode="typical"] .n-off .edge { stroke: var(--slate); stroke-dasharray: .012 .014 !important; stroke-dashoffset: 0 !important; opacity: .6; } .surf[data-mode="typical"] .n-off .edge-flow { opacity: 0; } .surf[data-mode="typical"] .n-off rect { fill: var(--paper-2); stroke: var(--slate); } .surf[data-mode="typical"] .n-off text { fill: var(--slate-ink); } .surf[data-mode="typical"] .n-off .x { opacity: 1; } .surf[data-mode="typical"] .n-off .ok { opacity: 0; } .surf-read { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--rule-strong); margin-top: 26px; } .surf-read > div { padding: 16px 14px 0 0; } .surf-read h3 { font-size: 1rem; letter-spacing: -.01em; margin: 8px 0 6px; } .surf-read p { font-size: .84rem; color: var(--slate-ink); line-height: 1.5; margin: 0; } .surf-score { font-family: var(--f-display); font-size: clamp(3rem, 6vw, 5.4rem); letter-spacing: -0.05em; line-height: .9; } .surf-score small { font-size: .32em; letter-spacing: 0; color: var(--slate-ink); margin-left: 6px; } @media (max-width: 860px) { .surf-read { grid-template-columns: 1fr 1fr; gap: 0 18px; } } /* ── pinned process (horizontal) ───────────────────────────────────── */ .proc { overflow: hidden; } .proc-track { display: flex; gap: 0; width: max-content; list-style: none; margin: 0; } .proc-panel { width: min(78vw, 980px); min-height: min(58vh, 540px); flex-shrink: 0; padding: 0 clamp(26px, 4vw, 55px) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 55px); align-items: center; } .proc-panel .big-no { font-family: var(--f-display); font-size: clamp(6rem, 16vw, 15rem); letter-spacing: -0.07em; line-height: .78; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.35); } .proc-panel h3 { font-size: clamp(1.7rem, 3vw, 2.6rem); margin: 18px 0 14px; letter-spacing: -.035em; } .proc-panel p { color: var(--on-ink-2); } .proc-panel .art { color: var(--teal); border: 1px solid var(--rule-ink); aspect-ratio: 1.618 / 1; position: relative; } .proc-panel .art svg { width: 100%; height: 100%; } .proc-rail { height: 1px; background: var(--rule-ink); margin: 0 0 clamp(34px, 5vw, 55px); position: relative; } .proc-rail i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--teal); transform-origin: left; transform: scaleX(var(--p, 0)); height: 2px; top: -.5px; } .proc-count { display: flex; justify-content: space-between; margin-bottom: 14px; color: var(--on-ink-3); } @media (max-width: 1023px) { .proc-track { flex-direction: column; width: auto; gap: 55px; } .proc-panel { width: auto; grid-template-columns: 1fr; padding: 0; } .proc-rail, .proc-count { display: none; } } /* ── timeline gantt ────────────────────────────────────────────────── */ .gantt { --lbl: 220px; border-top: 1px solid var(--rule-strong); position: relative; } .gantt-scale { display: grid; grid-template-columns: var(--lbl) 1fr; } .gantt-scale .ticks-row { position: relative; height: 34px; } .gantt-scale .tk { position: absolute; top: 10px; transform: translateX(-50%); font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; color: var(--slate-ink); } .gantt-row { display: grid; grid-template-columns: var(--lbl) 1fr; align-items: center; border-top: 1px solid var(--rule); min-height: 58px; } .gantt-row .lbl { font-family: var(--f-display); font-weight: 500; font-size: 1rem; letter-spacing: -.01em; padding-right: 18px; } .gantt-row .lbl small { display: block; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-ink); font-weight: 400; margin-top: 2px; } .gantt-row .lane { position: relative; height: 58px; } .gantt-row .bar { position: absolute; top: 19px; height: 20px; background: var(--ink); left: var(--x0); width: calc(var(--x1) - var(--x0)); transform-origin: left; } .gantt-row .bar.rep { top: 23px; height: 12px; background: repeating-linear-gradient(90deg, var(--ink) 0 calc(8.333% - 5px), transparent calc(8.333% - 5px) 8.333%); } .gantt-row .bar.teal { background: var(--teal); } .gantt-grid { position: absolute; inset: 34px 0 0 var(--lbl); pointer-events: none; } .gantt-grid i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rule); } .gantt-mark { position: absolute; top: 34px; bottom: 0; width: 0; border-left: 1.5px dashed var(--teal-ink); pointer-events: none; } .gantt-mark span { position: absolute; bottom: calc(100% + 8px); left: 0; transform: translateX(-50%); white-space: nowrap; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-ink); background: var(--paper); padding: 2px 6px; } .gantt-zone { position: absolute; top: 34px; bottom: 0; background: repeating-linear-gradient(135deg, rgba(6,13,26,.07) 0 1px, transparent 1px 7px); border-left: 1px solid var(--teal-ink); border-right: 1px solid var(--teal-ink); pointer-events: none; } .gantt-zone span { position: absolute; bottom: 8px; left: 8px; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-ink); } .js:not(.rm) .gantt .bar { transform: scaleX(0); } .js:not(.rm) .gantt.is-in .bar { transform: none; transition: transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 120ms + .2s); } .js:not(.rm) .gantt .gantt-zone, .js:not(.rm) .gantt .gantt-mark { opacity: 0; } .js:not(.rm) .gantt.is-in .gantt-zone, .js:not(.rm) .gantt.is-in .gantt-mark { opacity: 1; transition: opacity .8s var(--ease) 1.2s; } @media (max-width: 760px) { .gantt { --lbl: 104px; } .gantt-zone span { display: none; } .gantt-row .lbl { font-size: .85rem; } .gantt-row .lbl small { display: none; } } /* ── metro survey plot ─────────────────────────────────────────────── */ .plot { position: relative; border: 1px solid var(--rule-ink); aspect-ratio: 1 / 1; max-height: 720px; overflow: hidden; } .plot svg { width: 100%; height: 100%; } .plot .sweep { transform-origin: var(--cx) var(--cy); animation: sweep 9s linear infinite; } @keyframes sweep { to { transform: rotate(360deg); } } .plot .pin { cursor: pointer; } .plot .pin circle.halo { fill: var(--teal); opacity: .16; transform-box: fill-box; transform-origin: center; animation: halo 3.2s var(--ease) infinite; animation-delay: var(--d0, 0s); } @keyframes halo { 0% { transform: scale(.4); opacity: .5; } 100% { transform: scale(2.4); opacity: 0; } } .plot .pin text { font-family: var(--f-display); font-size: 15px; fill: var(--white); font-weight: 500; } .plot .pin .coord { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .08em; fill: rgba(255,255,255,.5); } .plot .pin:hover .dot, .plot .pin:focus .dot, .plot .pin.on .dot { fill: var(--teal); } .plot .pin:focus { outline: none; } .plot .pin:focus-visible .dot { stroke: var(--teal); stroke-width: 3; } .cities { list-style: none; border-top: 1px solid var(--rule-ink); } .cities li { border-bottom: 1px solid var(--rule-ink); display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 0; transition: background var(--d-fast); } .cities li.on { background: rgba(0,124,175,.06); } .cities .c-nm { font-family: var(--f-display); font-size: 1.35rem; letter-spacing: -.03em; } .cities .c-co { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .08em; color: var(--on-ink-3); display: block; margin-top: 2px; } .cities .c-links { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .cities .c-links a { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--rule-ink-strong); padding: 7px 9px; color: var(--on-ink-2); transition: all var(--d-fast); } .cities .c-links a:hover { background: var(--teal); border-color: var(--teal); color: var(--ink); } /* ── reviews ("field reports") ─────────────────────────────────────── */ .rev { display: grid; grid-template-columns: var(--minor) 1fr; gap: clamp(28px, 5vw, 89px); } .rev-score .big { font-family: var(--f-display); font-size: clamp(6rem, 13vw, 11rem); letter-spacing: -0.07em; line-height: .8; } .rev-score .stars { margin: 18px 0 10px; } .rev-score .stars svg { width: 22px; height: 22px; } .rev-score .src { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; } .rev-score .src svg.g { width: 20px; height: 20px; } .rev-stage { position: relative; border-top: 1px solid var(--rule-strong); padding-top: 34px; min-height: 340px; } .rev-quote { position: absolute; inset: 34px 0 auto 0; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .6s var(--ease), transform .8s var(--ease), visibility 0s .6s; } .rev-quote.on { position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--ease) .1s, transform .8s var(--ease) .1s, visibility 0s; } .no-js .rev-quote, .rm .rev-quote { position: relative; opacity: 1; visibility: visible; transform: none; margin-bottom: 34px; inset: auto; } .rev-quote blockquote { margin: 0; font-family: var(--f-display); font-size: clamp(1.55rem, 3vw, 2.6rem); letter-spacing: -0.03em; line-height: 1.12; font-weight: 500; text-indent: -.42em; } .rev-quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: 26px; } .rev-quote figcaption b { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; } .rev-quote figcaption .mono { color: var(--slate-ink); } .rev-idx { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-top: 1px solid var(--rule); margin-top: 34px; } .rev-idx button { width: 100%; text-align: left; background: none; border: 0; border-top: 2px solid transparent; margin-top: -1px; cursor: pointer; padding: 14px 12px 14px 0; font-family: var(--f-display); font-size: .9rem; color: var(--slate-ink); position: relative; } .rev-idx button i { position: absolute; top: -2px; left: 0; height: 2px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; } .rev-idx button[aria-selected="true"] { color: var(--ink); } .rev-idx button[aria-selected="true"] i { animation: prog var(--rev-dur, 7s) linear forwards; } .rev-idx button:hover { color: var(--ink); } .rm .rev-idx, .no-js .rev-idx { display: none; } @keyframes prog { to { transform: scaleX(1); } } .rev-stage[data-paused] .rev-idx button[aria-selected="true"] i { animation-play-state: paused; } @media (max-width: 1023px) { .rev { grid-template-columns: 1fr; } .rev-stage { min-height: 0; } } /* ── work-order form ───────────────────────────────────────────────── */ .wo { display: grid; grid-template-columns: var(--minor) 1fr; gap: clamp(34px, 5vw, 89px); } .wo-steps { list-style: none; border-top: 1px solid var(--rule-ink); margin: 34px 0; counter-reset: s; } .wo-steps li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule-ink); counter-increment: s; } .wo-steps li::before { content: "0" counter(s); font-family: var(--f-mono); font-size: .72rem; color: var(--teal); padding-top: 3px; } .wo-steps b { display: block; font-family: var(--f-display); font-weight: 600; margin-bottom: 2px; } .wo-steps span { color: var(--on-ink-2); font-size: .92rem; } .wo-contact { display: grid; gap: 6px; } .wo-contact a { color: var(--white); text-decoration: none; font-family: var(--f-display); font-size: 1.3rem; letter-spacing: -.02em; } .wo-contact a:hover { color: var(--teal); } .wo-sheet { background: var(--paper); color: var(--ink); position: relative; } .wo-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 26px; border-bottom: 1px solid var(--rule-strong); } .wo-head .mono { color: var(--slate-ink); } .wo-body { padding: clamp(22px, 3.5vw, 44px); } .wo-body > h3 { margin-bottom: 8px; } .wo-body > p { color: var(--slate-ink); margin-bottom: 26px; } .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; } .fgrid .full { grid-column: 1 / -1; } .fld { position: relative; padding-top: 22px; margin-bottom: 18px; } .fld label { position: absolute; top: 0; left: 0; display: flex; gap: 8px; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-ink); } .fld label .code { color: var(--teal-ink); } .fld label .req { color: var(--ink); } .fld input, .fld select { width: 100%; border: 0; border-bottom: 1px solid var(--rule-strong); background: transparent; border-radius: 0; font-family: var(--f-display); font-size: 1.25rem; letter-spacing: -.01em; color: var(--ink); padding: 10px 0 12px; outline: none; -webkit-appearance: none; appearance: none; } .fld select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23060d1a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; padding-right: 28px; cursor: pointer; } .fld input::placeholder { color: rgba(6,13,26,.28); } .fld .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--teal-ink); transform: scaleX(0); transform-origin: left; transition: transform var(--d) var(--ease); pointer-events: none; } .fld input:focus ~ .bar, .fld select:focus ~ .bar { transform: scaleX(1); } .fld input:focus-visible, .fld select:focus-visible { outline: none; } .fld .err { display: none; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: #b42318; margin-top: 8px; } .fld.invalid input, .fld.invalid select { border-bottom-color: #b42318; } .fld.invalid .err { display: block; } .fld.invalid .bar { background: #b42318; transform: scaleX(1); } .fld.valid label .code::after { content: " ✓"; } .form-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 10px; } .form-foot .mono { color: var(--slate-ink); } .form-status { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #b42318; margin-top: 14px; min-height: 1em; } .form-ok { text-align: left; padding: 10px 0; } .form-ok svg { width: 72px; height: 72px; color: var(--teal-ink); margin-bottom: 18px; } .form-ok h3 { margin-bottom: 10px; } .form-ok p { color: var(--slate-ink); } @media (max-width: 1023px) { .wo { grid-template-columns: 1fr; } } @media (max-width: 560px) { .fgrid { grid-template-columns: 1fr; } .fld input, .fld select { font-size: 1.1rem; } } /* ── FAQ as numbered spec notes ────────────────────────────────────── */ .faq { border-top: 1px solid var(--rule-strong); } .faq details { border-bottom: 1px solid var(--rule); } .faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 56px 1fr 40px; gap: 14px; align-items: center; padding: 24px 0; font-family: var(--f-display); font-size: clamp(1.1rem, 1.8vw, 1.45rem); letter-spacing: -.025em; font-weight: 500; } .faq summary::-webkit-details-marker { display: none; } .faq summary .n { font-family: var(--f-mono); font-size: .7rem; color: var(--teal-ink); letter-spacing: .08em; } .s-ink .faq summary .n { color: var(--teal); } .faq summary .pm { width: 40px; height: 40px; border: 1px solid var(--rule-strong); position: relative; transition: all var(--d) var(--ease); } .faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--d) var(--ease); } .faq summary .pm::after { transform: translate(-50%, -50%) rotate(90deg); } .faq details[open] summary .pm { background: var(--ink); color: var(--white); border-color: var(--ink); } .faq details[open] summary .pm::after { transform: translate(-50%, -50%) rotate(0deg); } .faq summary:hover .pm { border-color: var(--ink); } .faq .a { padding: 0 54px 26px 70px; color: var(--slate-ink); max-width: 60em; } .s-ink .faq, .s-ink-2 .faq { border-top-color: var(--rule-ink-strong); } .s-ink-2 .faq details { border-bottom-color: var(--rule-ink); } .s-ink-2 .faq .a { color: var(--on-ink-2); } .s-ink-2 .faq summary .n { color: var(--teal); } .s-ink-2 .faq summary .pm { border-color: var(--rule-ink-strong); } .s-ink-2 .faq details[open] summary .pm { background: var(--teal); color: var(--ink); border-color: var(--teal); } .s-ink .faq details { border-bottom-color: var(--rule-ink); } .s-ink .faq .a { color: var(--on-ink-2); } .s-ink .faq summary .pm { border-color: var(--rule-ink-strong); } .s-ink .faq details[open] summary .pm { background: var(--teal); color: var(--ink); border-color: var(--teal); } @media (max-width: 640px) { .faq summary { grid-template-columns: 34px 1fr 36px; } .faq .a { padding-left: 48px; padding-right: 0; } } /* ── spec table (included items) ───────────────────────────────────── */ .spec-table { width: 100%; border-collapse: collapse; } .spec-table caption { text-align: left; padding-bottom: 14px; } .spec-table th, .spec-table td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; } .spec-table th { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; font-weight: 400; color: var(--teal-ink); width: 70px; white-space: nowrap; } .spec-table td { font-size: .98rem; } .spec-table tr { transition: background var(--d-fast); } .spec-table tr:hover { background: var(--paper-2); } .s-ink .spec-table th { color: var(--teal); } .s-ink .spec-table th, .s-ink .spec-table td { border-bottom-color: var(--rule-ink); } .s-ink .spec-table tr:hover { background: rgba(255,255,255,.04); } /* ── check-yourself list (ICP) ─────────────────────────────────────── */ .fit { list-style: none; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule-strong); } .fit li { border-bottom: 1px solid var(--rule); } .fit li:nth-child(odd) { border-right: 1px solid var(--rule); } .fit label { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 22px 22px 22px 0; cursor: pointer; transition: background var(--d-fast); } .fit li:nth-child(even) label { padding-left: 22px; } .fit input { position: absolute; opacity: 0; pointer-events: none; } .fit .box { width: 26px; height: 26px; border: 1.5px solid var(--ink); display: grid; place-items: center; margin-top: 2px; transition: background var(--d-fast); } .fit .box svg { width: 16px; height: 16px; color: var(--ink); opacity: 0; } .fit .box svg path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .35s var(--ease); } .fit input:checked + .box { background: var(--teal); } .fit input:checked + .box svg { opacity: 1; } .fit input:checked + .box svg path { stroke-dashoffset: 0; } .fit input:focus-visible + .box { outline: 2px solid var(--teal-ink); outline-offset: 3px; } .fit b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.08rem; letter-spacing: -.015em; margin-bottom: 4px; } .fit span.t { color: var(--slate-ink); font-size: .92rem; } .fit-meter { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 26px; min-height: 60px; } .fit-meter .cells { display: flex; gap: 4px; } .fit-meter .cells i { width: 26px; height: 10px; border: 1px solid var(--ink); transition: background var(--d-fast); } .fit-meter .cells i.on { background: var(--ink); } .fit-meter .msg { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; } .fit-meter .btn { opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--d), transform var(--d) var(--ease); } .fit-meter.ready .btn { opacity: 1; transform: none; pointer-events: auto; } .no-js .fit-meter .btn, .rm .fit-meter .btn { opacity: 1; transform: none; pointer-events: auto; } @media (max-width: 760px) { .fit { grid-template-columns: 1fr; } .fit li:nth-child(odd) { border-right: 0; } .fit li:nth-child(even) label { padding-left: 0; } } /* ── tabs ──────────────────────────────────────────────────────────── */ .tabs [role="tablist"] { display: flex; border-bottom: 1px solid var(--rule-ink); overflow-x: auto; scrollbar-width: none; } .tabs [role="tab"] { background: none; border: 0; padding: 18px 22px 16px; cursor: pointer; font-family: var(--f-display); font-size: 1rem; color: var(--on-ink-3); position: relative; white-space: nowrap; transition: color var(--d-fast); } .tabs [role="tab"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--teal); transform: scaleX(0); transition: transform var(--d) var(--ease); } .tabs [role="tab"][aria-selected="true"] { color: var(--white); } .tabs [role="tab"][aria-selected="true"]::after { transform: scaleX(1); } .tabs [role="tab"]:hover { color: var(--white); } .tabs [role="tabpanel"] { padding-top: clamp(34px, 5vw, 55px); } .tabs [role="tabpanel"][hidden] { display: none; } .js:not(.rm) .tabs [role="tabpanel"]:not([hidden]) > * { animation: tabin .6s var(--ease) both; } .js:not(.rm) .tabs [role="tabpanel"]:not([hidden]) > *:nth-child(2) { animation-delay: .08s; } @keyframes tabin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ── before / after slider ─────────────────────────────────────────── */ .ba { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--rule-strong); overflow: hidden; user-select: none; --pos: 50%; background: var(--white); } .ba-pane { position: absolute; inset: 0; } .ba-pane svg { width: 100%; height: 100%; } .ba-after { clip-path: inset(0 0 0 var(--pos)); } .ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; border-left: 2px solid var(--teal); pointer-events: none; } .ba-handle::after { content: "⟷"; position: absolute; top: 50%; left: 0; width: 46px; height: 46px; transform: translate(-50%, -50%); background: var(--ink); color: var(--teal); display: grid; place-items: center; font-size: 1.1rem; } .ba input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; } .ba input[type="range"]:focus-visible ~ .ba-handle::after { outline: 2px solid var(--teal-ink); outline-offset: 3px; } .ba-tag { position: absolute; top: 14px; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px; pointer-events: none; } .ba-tag.l { left: 14px; background: var(--paper-2); color: var(--slate-ink); } .ba-tag.r { right: 14px; background: var(--ink); color: var(--teal); } /* ── vitals gauges ─────────────────────────────────────────────────── */ .vitals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule-ink); } .vital { padding: 22px 18px 0 0; } .vital + .vital { border-left: 1px solid var(--rule-ink); padding-left: 18px; } .vital svg { width: 100%; max-width: 180px; height: auto; color: var(--teal); } .vital .gv { font-family: var(--f-display); font-size: clamp(1.2rem, 1.9vw, 1.6rem); letter-spacing: -.03em; white-space: nowrap; } .vital .gk { color: var(--on-ink-3); } /* ── misc components ───────────────────────────────────────────────── */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; border: 1px solid currentColor; padding: 8px 11px; text-decoration: none; transition: all var(--d-fast); } a.chip:hover { background: var(--ink); color: var(--white); border-color: var(--ink); } .s-ink a.chip:hover { background: var(--teal); color: var(--ink); border-color: var(--teal); } .kicker { display: inline-flex; align-items: center; gap: 10px; } .kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; } .frame { border: 1px solid var(--rule-strong); position: relative; } .s-ink .frame { border-color: var(--rule-ink); } .frame-cap { position: absolute; top: -1px; left: -1px; transform: translateY(-100%); font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; background: var(--ink); color: var(--teal); } .s-ink .frame-cap { background: var(--teal); color: var(--ink); } .cross { position: absolute; width: 21px; height: 21px; pointer-events: none; } .cross::before, .cross::after { content: ""; position: absolute; background: currentColor; opacity: .5; } .cross::before { left: 10px; top: 0; bottom: 0; width: 1px; } .cross::after { top: 10px; left: 0; right: 0; height: 1px; } /* cursor crosshair for hero drawings */ .xhair { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .3s; } .xhair.on { opacity: 1; } .xhair .xh, .xhair .xv { position: absolute; background: rgba(0,124,175,.35); } .xhair .xh { left: 0; right: 0; height: 1px; top: 0; transform: translateY(var(--y)); } .xhair .xv { top: 0; bottom: 0; width: 1px; left: 0; transform: translateX(var(--x)); } .xhair .xr { position: absolute; left: 0; top: 0; transform: translate(calc(var(--x) + 12px), calc(var(--y) + 12px)); font-family: var(--f-mono); font-size: .6rem; letter-spacing: .08em; color: var(--teal); white-space: nowrap; } /* tiny breadcrumb in mono */ .crumbs { display: flex; gap: 10px; flex-wrap: wrap; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-3); } .crumbs a { color: var(--on-ink-2); text-decoration: none; } .crumbs a:hover { color: var(--teal); } .crumbs li { list-style: none; display: flex; gap: 10px; } .crumbs li + li::before { content: "/"; opacity: .5; } /* page-hero shared frame for inner pages */ .phero { padding-top: calc(var(--hdr-h) + clamp(34px, 5vw, 60px)); padding-bottom: clamp(55px, 7vw, 100px); overflow: hidden; } .phero .top { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(34px, 5vw, 60px); } /* ── page: home ────────────────────────────────────────────────────── */ .hh { padding-top: calc(var(--hdr-h) + clamp(26px, 4vw, 48px)); overflow: hidden; min-height: 100svh; display: flex; flex-direction: column; } .hh-wrap { display: flex; flex-direction: column; flex: 1; } .hh-art { position: absolute; right: -9vw; top: calc(var(--hdr-h) + 40px); width: min(58vw, 1040px); color: var(--teal); z-index: 0; pointer-events: none; } .hh-art .spiral rect { opacity: .42; } .hh-art .spiral text { opacity: .9; } .hh-art .spiral-arc { stroke-width: 2.2; } .hh-meta { display: flex; gap: 34px; color: var(--on-ink-3); position: relative; z-index: 1; } .hh-title { position: relative; z-index: 1; margin-top: clamp(34px, 6vh, 70px); font-weight: 600; } .hh-kicker { display: flex; align-items: center; gap: 12px; color: var(--teal); margin-bottom: 26px; font-weight: 400; letter-spacing: .14em; } .hh-kicker::before { content: ""; width: 34px; height: 1px; background: currentColor; } .hh-title .mega { display: block; font-size: clamp(3.1rem, 7.6vw, 8.4rem); max-width: 6.6em; } .hh-copy { position: relative; z-index: 1; max-width: 560px; margin-top: clamp(26px, 4vh, 44px); } .hh-copy .btn-row { margin-top: 30px; } .hh-fig { position: relative; z-index: 1; color: var(--on-ink-3); margin: auto 0 14px auto; text-align: right; max-width: 30em; padding-top: 34px; } .hh .spec { position: relative; z-index: 1; background: var(--ink); margin-bottom: 0; padding-bottom: 26px; } @media (max-width: 1023px) { .hh { min-height: 0; } .hh-art { position: relative; right: auto; top: auto; width: 118%; margin: 10px -9% -10px; order: 3; opacity: .85; } .hh-wrap { display: contents; } .hh .wrap.hh-wrap > * { padding-left: var(--gutter); padding-right: var(--gutter); } .hh-meta { order: 1; padding: 0 var(--gutter); flex-wrap: wrap; gap: 8px 22px; } .hh-title { order: 2; padding: 0 var(--gutter); } .hh-copy { order: 4; padding: 0 var(--gutter); } .hh-fig { order: 5; padding: 26px var(--gutter) 0; text-align: left; margin: 0; } .hh .spec { order: 6; margin: 22px var(--gutter) 0; } } .proc-viewport { overflow: hidden; } .proc-track { padding: 0 var(--gutter) 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); } .rev-g { grid-template-columns: var(--minor) 1fr; } @media (max-width: 1023px) { .rev-g { grid-template-columns: 1fr; } .rev-g .plot { order: -1; } } /* ── page: SEO ─────────────────────────────────────────────────────── */ .seo-grid { display: grid; grid-template-columns: 1fr var(--minor); gap: clamp(34px, 5vw, 89px); align-items: center; } .seo-draw { margin: 0; position: relative; } .seo-draw svg { width: 100%; height: auto; } .serp-riser { transition: transform 2.4s var(--ease-io); } .serp-dim { opacity: 0; transition: opacity 1s var(--ease) 1.6s; } [data-serp].risen .serp-riser { transform: translateY(-282px); } [data-serp].risen .serp-dim { opacity: 1; } .no-js .serp-riser, .rm .serp-riser { transform: translateY(-282px); } .no-js .serp-dim, .rm .serp-dim { opacity: 1; } .seo-copy .h1 { font-size: clamp(2.3rem, 4.2vw, 4rem); margin: 18px 0 22px; } .seo-copy .btn-row { margin-top: 30px; } .kv { display: grid; grid-template-columns: 1fr 1fr; margin: 44px 0 0; border-top: 1px solid var(--rule-ink); } .kv > div { padding: 16px 0; border-bottom: 1px solid var(--rule-ink); } .kv > div:nth-child(odd) { padding-right: 16px; border-right: 1px solid var(--rule-ink); } .kv > div:nth-child(even) { padding-left: 16px; } .kv dt { color: var(--on-ink-3); margin-bottom: 4px; } .kv dd { margin: 0; font-family: var(--f-display); font-size: 2rem; letter-spacing: -.04em; } @media (max-width: 1023px) { .seo-grid { grid-template-columns: 1fr; } .seo-copy { order: -1; } } .defects { border-top: 1px solid var(--rule-strong); } .d-row { display: grid; grid-template-columns: 70px 1.1fr 1fr 1.1fr; gap: 22px; padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .d-head { padding: 12px 0; } .d-head span { color: var(--slate-ink); } .d-ref { font-size: .8rem; color: var(--teal-ink); } .d-find { font-family: var(--f-display); font-size: 1.2rem; letter-spacing: -.02em; font-weight: 500; } .d-eff { color: var(--slate-ink); font-size: .95rem; } .d-fix { display: flex; gap: 12px; align-items: baseline; font-weight: 500; } .stamp { display: inline-block; border: 1.5px solid var(--teal-ink); color: var(--teal-ink); padding: 3px 7px; transform: rotate(-4deg); flex-shrink: 0; } .js:not(.rm) .defects .d-fix { opacity: 0; transform: translateX(-10px); } .js:not(.rm) .defects .stamp { transform: rotate(-4deg) scale(1.8); opacity: 0; } .js:not(.rm) .defects.is-in .d-fix { opacity: 1; transform: none; transition: all .6s var(--ease); transition-delay: calc(.4s + var(--i) * .25s); } .js:not(.rm) .defects.is-in .stamp { opacity: 1; transform: rotate(-4deg) scale(1); transition: all .45s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(.55s + var(--i) * .25s); } .versus { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: stretch; margin-top: 55px; } .versus > div:not(.vs-mid) { padding: 26px; border: 1px solid var(--rule-strong); } .versus b { display: block; font-family: var(--f-display); font-size: 1.4rem; letter-spacing: -.02em; margin: 8px 0; } .versus p { margin: 0; color: var(--slate-ink); } .vs-old { background: var(--paper-2); } .vs-old .mono { color: var(--slate-ink); } .vs-old b { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--slate); } .vs-new { background: var(--ink); color: var(--white); border-color: var(--ink) !important; } .vs-new .mono { color: var(--teal); } .vs-new p { color: var(--on-ink-2); } .vs-mid { display: grid; place-items: center; } .vs-mid svg { width: 26px; } @media (max-width: 860px) { .d-row { grid-template-columns: 54px 1fr; } .d-eff { grid-column: 2; } .d-fix { grid-column: 2; } .d-head { display: none; } .versus { grid-template-columns: 1fr; } .vs-mid { padding: 10px; transform: rotate(90deg); } } .story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 6vw, 110px); } .story-fig { position: sticky; top: calc(var(--hdr-h-compact) + 55px); align-self: start; } .story-frame { position: relative; aspect-ratio: 1.618 / 1; border: 1px solid var(--rule-ink); } .story-art { position: absolute; inset: 22px; opacity: 0; transform: scale(.96); transition: opacity .6s var(--ease), transform .8s var(--ease); color: var(--teal); } .story-art svg { width: 100%; height: 100%; } .story-art.on { opacity: 1; transform: none; } .story-dots { display: flex; gap: 8px; margin-top: 18px; } .story-dots i { width: 34px; height: 3px; background: var(--rule-ink-strong); transition: background var(--d); } .story-dots i.on { background: var(--teal); } .story-steps { list-style: none; margin-top: 34px; } .story-step { padding: clamp(34px, 9vh, 110px) 0; border-top: 1px solid var(--rule-ink); opacity: .45; transition: opacity .5s var(--ease); } .story-step.on { opacity: 1; } .story-step h3 { margin: 12px 0 14px; } .story-step p { color: var(--on-ink-2); max-width: 32em; } .rm .story-step, .no-js .story-step { opacity: 1; } @media (max-width: 1023px) { .story { grid-template-columns: 1fr; } .story-fig { position: relative; top: auto; } .story-step { padding: 34px 0; opacity: 1; } } .two-spec { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 5vw, 89px); } .spec-h { display: flex; gap: 14px; align-items: baseline; padding-bottom: 14px; border-bottom: 2px solid var(--ink); } @media (max-width: 860px) { .two-spec { grid-template-columns: 1fr; } } .levers { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule-strong); } .levers li { padding: 26px 22px 26px 0; position: relative; } .levers li + li { padding-left: 22px; border-left: 1px solid var(--rule); } .lv-n { display: block; font-family: var(--f-display); font-size: clamp(4rem, 7vw, 6.5rem); line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px var(--ink); margin-bottom: 26px; } .levers h3 { margin-bottom: 8px; } .levers p { color: var(--slate-ink); font-size: .95rem; margin: 0; } @media (max-width: 860px) { .levers { grid-template-columns: 1fr 1fr; } .levers li:nth-child(3) { border-left: 0; padding-left: 0; } } /* ── shared inner-page bits ─────────────────────────────────────────── */ .phero-top { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(34px, 5vw, 60px); position: relative; z-index: 1; } .s-paper .crumbs, .s-white .crumbs { color: var(--slate-ink); } .s-paper .crumbs a, .s-white .crumbs a { color: var(--ink); } .ticklist { list-style: none; display: grid; gap: 0; margin-top: 14px; border-top: 1px solid var(--rule-ink); } .ticklist li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--rule-ink); } .ticklist li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 12px; height: 6px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); } .ticklist.dark { border-top-color: var(--rule); } .ticklist.dark li { border-bottom-color: var(--rule); } .ticklist.dark li::before { border-color: var(--teal-ink); } .xlist { list-style: none; margin-top: 14px; border-top: 1px solid var(--rule); } .xlist li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--rule); color: var(--slate-ink); } .xlist li::before, .xlist li::after { content: ""; position: absolute; left: 3px; top: 21px; width: 12px; height: 1.5px; background: var(--slate); transform: rotate(45deg); } .xlist li::after { transform: rotate(-45deg); } .spec-h.ink { border-bottom-color: var(--white); } /* ── page: AI SEO ──────────────────────────────────────────────────── */ .ai-title { font-size: clamp(2.4rem, 5.4vw, 5.2rem); letter-spacing: -.045em; line-height: .96; max-width: 14em; margin: 18px 0 clamp(34px, 5vw, 55px); } .ai-route { margin: 0 auto; max-width: 1060px; position: relative; } .ai-route svg { width: 100%; height: auto; } .ai-foot { display: grid; grid-template-columns: 1fr auto; gap: 34px; align-items: end; margin-top: clamp(34px, 5vw, 55px); padding-top: 34px; border-top: 1px solid var(--rule-ink); } .ai-foot .lead { margin: 0; } .pl-panel { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(34px, 5vw, 89px); align-items: center; } .pl-art { color: var(--white); border: 1px solid var(--rule-ink); padding: clamp(18px, 3vw, 34px); background: rgba(255,255,255,.02); } .pl-art svg { width: 100%; height: auto; } .tabs [role="tab"] .mono { margin-right: 6px; } .boards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 5vw, 89px); } .board { list-style: none; } .board li { display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--rule); transition: background var(--d-fast), padding var(--d) var(--ease); } .board li .mono { color: var(--teal-ink); } .board li:hover { background: var(--paper-2); padding-left: 8px; } .board li.ai { background: var(--ink); color: var(--white); padding-left: 10px; } .board li.ai .mono { color: var(--teal); } .board li.ai b { background: var(--teal); color: var(--ink); padding: 4px 7px; margin-right: 10px; } .ai-local { display: grid; grid-template-columns: var(--minor) 1fr; gap: 34px; align-items: center; margin-top: 55px; padding-top: 34px; border-top: 1px solid var(--rule-strong); } @media (max-width: 1023px) { .pl-panel, .boards, .ai-local, .ai-foot { grid-template-columns: 1fr; } } /* ── page: web design ──────────────────────────────────────────────── */ .wd-hero { padding-bottom: 0; overflow: visible; } .wd-head { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(34px, 5vw, 89px); align-items: end; } .wd-head .h1 { font-size: clamp(2.5rem, 5.2vw, 5rem); } .trust { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin-top: 44px; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); } .trust li { padding: 14px 22px 14px 0; margin-right: 22px; border-right: 1px solid var(--rule); color: var(--slate-ink); } .trust li:last-child { border-right: 0; } .trust li::before { content: "✓ "; color: var(--teal-ink); } .wd-sheet-wrap { margin-top: 55px; } .wd-sheet { margin: 0 0 -160px; background: var(--ink); padding: clamp(18px, 3vw, 40px); position: relative; z-index: 2; box-shadow: 0 40px 80px -30px rgba(6,13,26,.45); } .wd-sheet svg { width: 100%; height: auto; } .wd-after { padding-top: calc(var(--sec-y) + 160px); } .ba-wrap { display: grid; grid-template-columns: 1.618fr 1fr; gap: clamp(26px, 4vw, 55px); align-items: start; } .ba-lists { display: grid; gap: 34px; } .sheets { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule-strong); border-left: 1px solid var(--rule-strong); } .sheetcard { border-right: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); padding: 22px; background: var(--white); transition: background var(--d), transform var(--d) var(--ease), box-shadow var(--d); position: relative; } .sheetcard:hover { background: var(--white); outline: 2px solid var(--ink); outline-offset: -2px; transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(6,13,26,.4); z-index: 1; } .sc-head { display: flex; justify-content: space-between; color: var(--slate-ink); margin-bottom: 14px; } .sc-art { color: var(--ink); aspect-ratio: 1.6 / 1; margin-bottom: 18px; } .sc-art svg { width: 100%; height: 100%; } .sheetcard:hover .sc-art .draw { animation: redraw 1.1s var(--ease-io) both; } .sc-art .draw { stroke-dasharray: 1; } .sheetcard h3 { margin-bottom: 8px; } .sheetcard p { color: var(--slate-ink); font-size: .93rem; margin: 0; } .steps6 { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; position: relative; padding-top: 12px; } .steps6-line { position: absolute; top: 30px; left: 0; width: 100%; height: 20px; color: var(--ink); pointer-events: none; } .steps6 li { position: relative; } .s6-n { width: 56px; height: 56px; display: grid; place-items: center; background: var(--white); border: 1.5px solid var(--ink); font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; margin-bottom: 22px; position: relative; z-index: 1; transition: background var(--d), color var(--d); } .steps6 li:hover .s6-n { background: var(--teal); } .steps6 h3 { margin-bottom: 8px; } .steps6 p { color: var(--slate-ink); font-size: .92rem; margin: 0; } .js:not(.rm) .steps6 li { opacity: 0; transform: translateY(18px); } .js:not(.rm) .steps6.is-in li { opacity: 1; transform: none; transition: all .7s var(--ease); transition-delay: calc(var(--i) * .22s + .2s); } .areas { margin-top: 44px; } .areas ul { list-style: none; margin-top: 12px; border-top: 1px solid var(--rule); } .areas a { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-family: var(--f-display); transition: padding var(--d) var(--ease), color var(--d-fast); } .areas a:hover { padding-left: 8px; color: var(--teal-ink); } @media (max-width: 1023px) { .wd-head, .ba-wrap { grid-template-columns: 1fr; } .sheets { grid-template-columns: 1fr 1fr; } .steps6 { grid-template-columns: 1fr 1fr; } .steps6-line { display: none; } .wd-sheet { margin-bottom: -80px; } .wd-after { padding-top: calc(var(--sec-y) + 80px); } } @media (max-width: 560px) { .sheets, .steps6 { grid-template-columns: 1fr; } .vitals { grid-template-columns: 1fr; } .vital + .vital { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-ink); } } /* ── page: consulting ──────────────────────────────────────────────── */ .cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 89px); align-items: center; } .cs-copy .h1 { font-size: clamp(2.4rem, 4.6vw, 4.4rem); margin: 18px 0 22px; } .cs-copy .btn-row { margin-top: 30px; } .cs-radar { margin: 0; } .cs-radar svg { width: 100%; height: auto; } .triad { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 55px; border-top: 2px solid var(--ink); } .triad li { padding: 26px 26px 0 0; } .triad li + li { padding-left: 26px; border-left: 1px solid var(--rule); } .tri-n { display: block; font-family: var(--f-display); font-size: clamp(5rem, 9vw, 8.5rem); line-height: .8; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1px var(--ink); margin-bottom: 26px; transition: color var(--d); } .triad li:hover .tri-n { color: var(--teal); -webkit-text-stroke-color: var(--teal); } .triad h3 { margin-bottom: 12px; } .triad p { color: var(--slate-ink); } .loopstory { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(34px, 5vw, 89px); } .loop-fig { position: sticky; top: calc(var(--hdr-h-compact) + 30px); align-self: start; } .loop-fig svg { width: 100%; height: auto; } .loop-node circle, .loop-node text { transition: fill .4s, stroke .4s; } .loop-node.on circle { fill: #007caf; } .loop-node.on text:first-of-type { fill: #060d1a; } .loop-steps { list-style: none; margin-top: 34px; } .loop-steps .story-step { padding: 30px 0; } .loop-steps h3 { margin: 8px 0; } @media (max-width: 1023px) { .cs-grid, .loopstory, .triad { grid-template-columns: 1fr; } .loop-fig { position: relative; top: auto; } .triad li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } } /* ── page: reputation ──────────────────────────────────────────────── */ .rp-title { font-size: clamp(2.6rem, 6.4vw, 6.4rem); letter-spacing: -.05em; line-height: .92; margin: 18px 0 clamp(34px, 5vw, 55px); max-width: 12em; } .rp-grid { display: grid; grid-template-columns: var(--minor) 1fr; gap: clamp(34px, 5vw, 89px); align-items: start; } .rep-stack { background: var(--white); border: 1px solid var(--rule-strong); box-shadow: 0 30px 60px -34px rgba(6,13,26,.45); } .rep-q { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--rule-strong); } .rep-q .mono { color: var(--slate-ink); } .rep-q b { font-family: var(--f-display); font-weight: 500; font-size: 1.1rem; } .rep-list { list-style: none; } .rep-row { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--rule); background: var(--white); position: relative; } .rep-row:last-child { border-bottom: 0; } .rep-row .mono-n { font-size: .8rem; color: var(--teal-ink); padding-top: 3px; } .rep-row b { display: block; font-family: var(--f-display); font-weight: 500; } .rep-row .mono { color: var(--slate-ink); } .rep-row.bad { background: #fbeceb; } .rep-row.bad .mono-n, .rep-row.bad .mono { color: #b42318; } .rep-row.bad::after { content: "NEGATIVE"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%) rotate(-3deg); font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; color: #b42318; border: 1.5px solid #b42318; padding: 3px 6px; } .rp-cap { margin-top: 14px; } .rp-mega { font-size: clamp(2.6rem, 7vw, 7rem); max-width: 12em; } .console { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule-strong); border-left: 1px solid var(--rule-strong); } .console li { padding: 26px; border-right: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); position: relative; overflow: hidden; isolation: isolate; transition: color var(--d); } .console li::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateY(101%); transition: transform .55s var(--ease); z-index: -1; } .console li:hover { color: var(--white); } .console li:hover::before { transform: none; } .console li:hover p { color: var(--on-ink-2); } .console li:hover .cn-ic { color: var(--teal); } .cn-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 26px; } .cn-ic { width: 52px; height: 52px; color: var(--ink); transition: color var(--d); } .cn-ic svg { width: 100%; height: 100%; } .console li:hover .cn-ic .draw { animation: redraw 1s var(--ease-io) both; } .cn-ic .draw { stroke-dasharray: 1; } .cn-live { display: flex; align-items: center; gap: 8px; color: var(--slate-ink); } .cn-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(0,124,175,.6); animation: live 2s infinite; } @keyframes live { 70% { box-shadow: 0 0 0 8px rgba(0,124,175,0); } 100% { box-shadow: 0 0 0 0 rgba(0,124,175,0); } } .console h3 { margin-bottom: 8px; } .console p { color: var(--slate-ink); font-size: .93rem; margin: 0; transition: color var(--d); } .pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 55px; position: relative; padding-bottom: 90px; } .pp { padding: 26px 22px 26px 0; border-top: 2px solid var(--ink); position: relative; } .pp + .pp { padding-left: 22px; } .pp::after { content: ""; position: absolute; top: -7px; right: -6px; width: 12px; height: 12px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg); } .pp:last-of-type::after { display: none; } .pp-n { display: inline-block; background: var(--ink); color: var(--teal); padding: 4px 8px; margin-bottom: 18px; } .pp h3 { margin-bottom: 8px; } .pp p { color: var(--slate-ink); font-size: .93rem; margin: 0; } .pipe-loop { position: absolute; left: 0; right: 0; bottom: 20px; width: 100%; height: 70px; color: var(--teal-ink); } .pipe-loop-lbl { position: absolute; bottom: 0; left: 50%; transform: translateX(-12%); color: var(--teal-ink); } .js:not(.rm) .pipe .pp { opacity: 0; transform: translateX(-20px); } .js:not(.rm) .pipe.is-in .pp { opacity: 1; transform: none; transition: all .7s var(--ease); transition-delay: calc(var(--i) * .25s); } .proof4 { list-style: none; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule-ink); } .proof4 li { padding: 18px 18px 18px 0; border-bottom: 1px solid var(--rule-ink); } .proof4 li:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--rule-ink); } .proof4 b { display: block; font-family: var(--f-display); font-weight: 600; margin-bottom: 4px; color: var(--teal); } .proof4 span { color: var(--on-ink-2); font-size: .92rem; } .tri-fig { margin: 0; } .tri-fig svg { width: 100%; height: auto; } @media (max-width: 1023px) { .rp-grid { grid-template-columns: 1fr; } .console { grid-template-columns: 1fr 1fr; } .pipe { grid-template-columns: 1fr 1fr; row-gap: 26px; } .pipe-loop, .pipe-loop-lbl { display: none; } .pipe { padding-bottom: 0; } } @media (max-width: 560px) { .console, .pipe, .proof4 { grid-template-columns: 1fr; } .proof4 li:nth-child(even) { padding-left: 0; border-left: 0; } .pp + .pp { padding-left: 0; } } /* ── page: about ───────────────────────────────────────────────────── */ .ab-hero { padding: calc(var(--hdr-h) + clamp(34px, 5vw, 60px)) 0 clamp(89px, 10vw, 144px); overflow: hidden; min-height: 92svh; } .ab-spiral { position: absolute; top: calc(var(--hdr-h) + 20px); right: -22vw; width: min(66vw, 1100px); color: var(--teal); opacity: .75; pointer-events: none; } .ab-spiral .spiral rect { opacity: .35; } .ab-title { font-size: clamp(2.6rem, 5.4vw, 5.4rem); max-width: 9.5em; margin: 18px 0 30px; position: relative; } .ab-lead { position: relative; max-width: 32em; } .ab-note { position: relative; max-width: 34em; margin-top: 44px; } .origin { margin: 0 0 44px; font-family: var(--f-display); font-size: clamp(1.7rem, 3.2vw, 2.8rem); letter-spacing: -.035em; line-height: 1.1; font-weight: 500; } .origin .mono { display: block; margin-bottom: 18px; } .story-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; color: var(--slate-ink); } .guarantee { display: flex; gap: 18px; align-items: baseline; margin-top: 22px; padding: 18px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); font-family: var(--f-display); font-size: 1.2rem; } .guarantee .mono { color: var(--teal-ink); } .facts .fk { width: 34%; color: var(--slate-ink); font-size: .68rem; } .facts .fv { font-family: var(--f-display); font-size: 1.1rem; } .ab-spec { margin-top: 34px; } .phi-grid { list-style: none; display: grid; grid-template-columns: 1.618fr 1fr; grid-template-rows: auto auto; margin-top: 55px; border-top: 1px solid var(--rule-ink); border-left: 1px solid var(--rule-ink); } .phi-grid li { padding: clamp(22px, 3vw, 44px); border-right: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule-ink); transition: background var(--d); } .phi-grid li:hover { background: rgba(0,124,175,.06); } .phi-grid .phi-0 { grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; } .phi-grid .phi-0 h3 { font-size: clamp(2rem, 4vw, 3.4rem); } .phi-grid .phi-3 { grid-column: 1 / -1; } .phi-grid h3 { margin: 12px 0 10px; } .phi-grid p { color: var(--on-ink-2); max-width: 30em; margin: 0; } .svc-lines { list-style: none; border-top: 1px solid var(--rule-strong); } .svc-lines a { display: grid; grid-template-columns: 1fr 1.6fr 40px; gap: 22px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--rule); text-decoration: none; transition: padding var(--d) var(--ease); } .svc-lines b { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.3rem, 2.2vw, 1.9rem); letter-spacing: -.03em; } .svc-lines span { color: var(--slate-ink); } .svc-lines i svg { width: 22px; transition: transform var(--d) var(--ease); } .svc-lines a:hover { padding-left: 14px; } .svc-lines a:hover i svg { transform: translateX(6px); } .svc-lines a:hover b { color: var(--teal-ink); } @media (max-width: 860px) { .story-cols, .phi-grid { grid-template-columns: 1fr; } .phi-grid .phi-0 { grid-row: auto; min-height: 0; } .svc-lines a { grid-template-columns: 1fr 30px; } .svc-lines span { grid-column: 1; grid-row: 2; } } /* ── page: projects ────────────────────────────────────────────────── */ .pj-title { margin: 18px 0 44px; max-width: 8em; } .pj-intro .lead { margin: 0; } .register { border-top: 2px solid var(--ink); } .reg { border-bottom: 1px solid var(--rule-strong); } .reg summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 70px 1fr 180px 90px 40px; gap: 18px; align-items: center; padding: 22px 0; transition: background var(--d-fast); } .reg summary::-webkit-details-marker { display: none; } .reg summary:hover { background: var(--paper-2); } .rg-no { color: var(--teal-ink); } .rg-t { font-family: var(--f-display); font-size: clamp(1.25rem, 2.2vw, 1.9rem); letter-spacing: -.03em; font-weight: 500; } .rg-tag { color: var(--slate-ink); } .rg-st { color: var(--teal-ink); border: 1.5px solid var(--teal-ink); padding: 4px 8px; text-align: center; transform: rotate(-3deg); } .reg summary .pm { width: 40px; height: 40px; border: 1px solid var(--rule-strong); position: relative; } .reg summary .pm::before, .reg summary .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--d) var(--ease); } .reg summary .pm::after { transform: translate(-50%, -50%) rotate(90deg); } .reg[open] summary .pm { background: var(--ink); color: var(--white); } .reg[open] summary .pm::after { transform: translate(-50%, -50%); } .rg-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 55px); padding: 10px 0 34px 88px; align-items: center; } .rg-art { color: var(--ink); background: var(--white); border: 1px solid var(--rule); padding: 18px; } .rg-art svg { width: 100%; height: auto; } .rg-body p { font-size: 1.1rem; } .js:not(.rm) .reg[open] .rg-body { animation: tabin .6s var(--ease) both; } .db-fig { margin: 0; } .db-fig svg { width: 100%; height: auto; } @media (max-width: 860px) { .reg summary { grid-template-columns: 50px 1fr 40px; } .rg-tag, .rg-st { display: none; } .rg-body { grid-template-columns: 1fr; padding-left: 0; } } /* ── white-section rhythm: hairline where two light sections meet ──── */ .s-paper + .s-white, .s-white + .s-paper, .s-white + .s-white, .s-paper + .s-paper { border-top: 1px solid var(--rule); } /* ── page: about (merged hero) ─────────────────────────────────────── */ .ab-hero2 { padding: calc(var(--hdr-h) + clamp(34px, 5vw, 60px)) 0 clamp(89px, 10vw, 130px); overflow: hidden; } .ab-spiral2 { position: absolute; right: -18vw; bottom: -22%; width: min(78vw, 1250px); color: var(--ink); opacity: .13; pointer-events: none; --dim-bg: #fff; } .ab-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(34px, 6vw, 110px); align-items: start; position: relative; z-index: 1; } .ab-h1 { font-size: clamp(2.8rem, 6vw, 6.2rem); letter-spacing: -.055em; line-height: .9; margin: 22px 0 28px; font-weight: 600; } .ab-story { padding-top: clamp(0px, 4vw, 60px); } .ab-story .origin { font-size: clamp(1.5rem, 2.6vw, 2.3rem); } .ab-hero2 .ab-note { position: relative; z-index: 1; margin-top: 55px; max-width: 40em; } @media (max-width: 1023px) { .ab-grid { grid-template-columns: 1fr; } .ab-spiral2 { width: 150vw; right: -40vw; bottom: -10%; } } /* ── single accent (#007caf) on navy: lines, fills, icons and large type keep the accent; small text switches to white for legibility ───── */ .s-ink .mono.teal, .s-ink-2 .mono.teal, .ftr .mono.teal, .menu .mono.teal, .s-ink .sheet-label .sec-no, .s-ink-2 .sheet-label .sec-no, .s-ink .faq summary .n, .s-ink-2 .faq summary .n, .s-ink .spec-table th, .s-ink-2 .spec-table th, .hdr-nav a:hover .n, .hdr-nav a[aria-current="page"] .n, .menu a.m-link .n, .wo-steps li::before, .proof4 b, .vs-new .mono, .board li.ai .mono, .index a:hover .no, .index a:focus-visible .no, .hh-kicker, .pp-n, .s-ink .kicker, .s-ink-2 .kicker { color: var(--white); } .hh-kicker::before, .s-ink .kicker::before, .s-ink-2 .kicker::before { background: var(--teal); height: 2px; } .menu a.m-link[aria-current="page"] { color: var(--white); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 3px; text-underline-offset: 8px; } .s-ink .stars, .s-ink-2 .stars, .ftr .stars { color: var(--white); } .frame-cap, .s-ink .frame-cap { background: var(--teal); color: var(--white); } .board li.ai b { color: var(--white); } .index a:hover .ar, .index a:focus-visible .ar { color: var(--white); } .cities .c-links a:hover, .s-ink a.chip:hover, .ftr-social a:hover { color: var(--white); } .fit .box svg { color: var(--white); } .hdr-top a:hover, .crumbs a:hover, .ftr-col a:hover, .ftr-block a:hover, .wo-contact a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 4px; } .ftr-phone:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 8px; } .loop-node.on text:first-of-type { fill: #fff; } /* ── home: services selector ───────────────────────────────────────── */ .svc { display: grid; grid-template-columns: var(--minor) 1fr; gap: clamp(26px, 4vw, 55px); align-items: stretch; } .svc-list { display: flex; flex-direction: column; border-top: 2px solid var(--ink); } .svc-list [role="tab"] { display: grid; grid-template-columns: 44px 1fr 26px; align-items: center; gap: 10px; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 15px 12px 15px 0; cursor: pointer; font-family: var(--f-display); font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing: -.02em; font-weight: 500; color: var(--slate-ink); position: relative; transition: color var(--d-fast), padding var(--d) var(--ease); } .svc-list [role="tab"]::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; background: var(--teal); transform: scaleY(0); transition: transform var(--d) var(--ease); } .svc-list .sl-n { color: var(--slate-ink); font-size: .7rem; } .svc-list .sl-a { opacity: 0; transform: translateX(-8px); transition: all var(--d) var(--ease); color: var(--teal); } .svc-list .sl-a svg { width: 18px; } .svc-list [role="tab"]:hover { color: var(--ink); } .svc-list [role="tab"][aria-selected="true"] { color: var(--ink); padding-left: 16px; font-weight: 600; } .svc-list [role="tab"][aria-selected="true"]::before { transform: scaleY(1); } .svc-list [role="tab"][aria-selected="true"] .sl-n { color: var(--teal); } .svc-list [role="tab"][aria-selected="true"] .sl-a { opacity: 1; transform: none; } .svc-stage { position: relative; background: var(--white); border: 1px solid var(--rule-strong); color: var(--ink); min-height: 520px; } .svc-panel { position: absolute; inset: 0; display: flex; flex-direction: column; } .svc-panel[hidden] { display: none; } .sp-head, .sp-foot { display: flex; justify-content: space-between; padding: 14px 22px; color: var(--slate-ink); } .sp-head { border-bottom: 1px solid var(--rule); } .sp-foot { border-top: 1px solid var(--rule); margin-top: auto; } .sp-body { display: grid; grid-template-columns: minmax(160px, .8fr) 1.4fr; gap: clamp(22px, 3vw, 44px); align-items: center; padding: clamp(26px, 4vw, 55px); flex: 1; } .svc-ic { color: var(--teal); aspect-ratio: 1; max-width: 260px; width: 100%; position: relative; } .svc-ic::before { content: ""; position: absolute; inset: -14px; background-image: linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px); background-size: 13px 13px; z-index: -1; } .svc-ic svg { width: 100%; height: 100%; } .svc-ic svg [stroke-width="1.3"], .svc-ic svg { stroke-width: 1; } .svc-panel h3 { margin-bottom: 14px; } .svc-panel .lead { margin-bottom: 22px; } .sp-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; color: var(--teal-ink); } .svc-ic .draw { stroke-dasharray: 1; stroke-dashoffset: 0; } .js:not(.rm) .svc-panel.on .svc-ic .draw { animation: redraw 1.3s var(--ease-io) both; } .js:not(.rm) .svc-panel.on .sp-body > div:last-child > * { animation: tabin .6s var(--ease) both; } .js:not(.rm) .svc-panel.on .sp-body > div:last-child > *:nth-child(2) { animation-delay: .06s; } .js:not(.rm) .svc-panel.on .sp-body > div:last-child > *:nth-child(3) { animation-delay: .12s; } .js:not(.rm) .svc-panel.on .sp-body > div:last-child > *:nth-child(4) { animation-delay: .18s; } .no-js .svc-panel[hidden] { display: flex; position: relative; } .no-js .svc-panel { position: relative; } @media (max-width: 1023px) { .svc { grid-template-columns: 1fr; } .svc-list { display: none; } .svc-stage { min-height: 0; border: 0; background: transparent; display: grid; gap: 18px; } .svc-stage.ticks::before, .svc-stage.ticks::after { display: none; } .svc-panel, .svc-panel[hidden] { position: relative; display: flex; border: 1px solid var(--rule-strong); background: var(--white); } .sp-body { grid-template-columns: 90px 1fr; align-items: start; padding: 22px; } .svc-panel h3 { font-size: 1.5rem; } .svc-panel .lead { font-size: 1rem; } .sp-foot { display: none; } /* the stacked stage is ~4700px tall on phones — a single clip reveal is fragile, so show it outright */ .js:not(.rm) .svc-stage[data-rv] { clip-path: none !important; opacity: 1 !important; transform: none !important; } } @media (max-width: 480px) { .sp-body { grid-template-columns: 1fr; } .svc-ic { max-width: 80px; } } /* ── reduced motion: everything visible, no loops ──────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .grid-field::before, .scanline, .plot .sweep { animation: none !important; } } @media (max-width: 480px) { .btn .b-label { white-space: normal; line-height: 1.2; } .btn.sm .b-label { white-space: nowrap; } } /* ── motion kit for illustrations (icons + consulting process) ─────────── Ambient loops start once a graphic is in view (.is-in) or is a service icon. Reduced motion (.rm) leaves every drawing static and complete. */ .a-rot, .a-pulse, .a-ping, .a-float, .a-bar, .a-click, .a-fill { transform-box: fill-box; transform-origin: center; } .a-bar { transform-origin: 50% 100%; } .a-fill { transform-origin: 0 50%; } .a-ping { opacity: 0; } .rm .a-ping, .no-js .a-ping { display: none; } .js:not(.rm) :is(.is-in, .svc-ic) .a-rot { animation: a-rot var(--dur, 16s) linear infinite var(--dir, normal); } .js:not(.rm) :is(.is-in, .svc-ic) .a-pulse { animation: a-pulse var(--dur, 2.4s) var(--ease-io) infinite; animation-delay: calc(var(--i, 0) * .3s); } .js:not(.rm) :is(.is-in, .svc-ic) .a-ping { animation: a-ping var(--dur, 2.6s) cubic-bezier(.2,.6,.3,1) infinite; animation-delay: calc(var(--i, 0) * .9s); } .js:not(.rm) :is(.is-in, .svc-ic) .a-float { animation: a-float var(--dur, 3.2s) var(--ease-io) infinite; animation-delay: calc(var(--i, 0) * .4s); } .js:not(.rm) :is(.is-in, .svc-ic) .a-blink { animation: a-blink var(--dur, 1.8s) ease-in-out infinite; animation-delay: calc(var(--i, 0) * .25s); } .js:not(.rm) :is(.is-in, .svc-ic) .a-bar { animation: a-bar var(--dur, 2.8s) var(--ease-io) infinite; animation-delay: calc(1.2s + var(--i, 0) * .18s); } .js:not(.rm) :is(.is-in, .svc-ic) .a-flow { animation: a-flow var(--dur, 1.4s) linear infinite; } .js:not(.rm) :is(.is-in, .svc-ic) .a-packet { animation: a-packet var(--dur, 2.6s) var(--ease-io) infinite; animation-delay: calc(1.4s + var(--i, 0) * .45s); } .js:not(.rm) :is(.is-in, .svc-ic) .a-scan { animation: a-scan var(--dur, 6s) var(--ease-io) infinite; } .js:not(.rm) :is(.is-in, .svc-ic) .a-swing { animation: a-swing var(--dur, 4.5s) var(--ease-io) infinite; } .js:not(.rm) :is(.is-in, .svc-ic) .a-click { animation: a-click var(--dur, 2.6s) var(--ease-io) infinite; } .js:not(.rm) :is(.is-in, .svc-ic) .a-fill { animation: a-fill var(--dur, 4.8s) var(--ease-io) infinite; animation-delay: 1s; } .a-packet { stroke-dasharray: .07 2; stroke-dashoffset: .07; } .rm .a-packet, .no-js .a-packet { display: none; } @keyframes a-rot { to { transform: rotate(360deg); } } @keyframes a-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(var(--s, 1.18)); } } @keyframes a-ping { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } } @keyframes a-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--fy, -4px)); } } @keyframes a-blink { 0%, 100% { opacity: var(--lo, .25); } 50% { opacity: 1; } } @keyframes a-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(var(--lo, .6)); } } @keyframes a-flow { to { stroke-dashoffset: -16; } } @keyframes a-packet { from { stroke-dashoffset: .07; } to { stroke-dashoffset: -1; } } @keyframes a-scan { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(var(--sx, 120px)); } } @keyframes a-swing { 0%, 100% { transform: rotate(var(--a0, -55deg)); } 50% { transform: rotate(var(--a1, 45deg)); } } @keyframes a-click { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(var(--cx, -5px), var(--cy, -5px)) scale(1); } 50% { transform: translate(var(--cx, -5px), var(--cy, -5px)) scale(.82); } 60% { transform: translate(var(--cx, -5px), var(--cy, -5px)) scale(1); } } @keyframes a-fill { 0% { transform: scaleX(0); } 75%, 100% { transform: scaleX(1); } } /* consulting step drawings: labels in white for legibility on navy */ .cs-art text { font-family: var(--f-mono); fill: #fff; fill-opacity: .78; stroke: none; letter-spacing: 1.2px; } /* ══════════════════════════════════════════════════════════════════════ INNER PAGES — batch 2 (services, funnel pages, locations, legal, 404) ══════════════════════════════════════════════════════════════════════ */ @keyframes a-scany { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--sy, 200px)); } } .js:not(.rm) :is(.is-in, .svc-ic) .a-scany { animation: a-scany var(--dur, 6s) var(--ease-io) infinite; } @keyframes a-drip { 0% { transform: translateY(-6px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(56px); opacity: 0; } } /* split hero: copy + drawing */ .split-hero { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(34px, 5vw, 89px); align-items: center; } .sh-copy .h1 { font-size: clamp(2.4rem, 4.6vw, 4.5rem); margin: 18px 0 22px; } .sh-copy .h1.xl { font-size: clamp(2.8rem, 6.4vw, 6.2rem); } .sh-copy .btn-row { margin-top: 30px; } .sh-art { margin: 0; position: relative; color: var(--teal); } .sh-art > svg { width: 100%; height: auto; overflow: visible; } .promise { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 40px; border-top: 1px solid var(--rule-ink); } .promise li { padding: 16px 12px 0 0; } .promise li + li { padding-left: 14px; border-left: 1px solid var(--rule-ink); } .promise b { display: block; font-family: var(--f-display); font-size: 1.25rem; letter-spacing: -.02em; font-weight: 600; } .promise .mono { color: var(--on-ink-3); font-size: .6rem; } @media (max-width: 1023px) { .split-hero { grid-template-columns: 1fr; } .sh-art { max-width: 640px; } } @media (max-width: 560px) { .promise { grid-template-columns: 1fr 1fr; } .promise li:nth-child(3) { padding-left: 0; border-left: 0; } .promise li:nth-child(n+3) { border-top: 1px solid var(--rule-ink); margin-top: 14px; } } /* Google Ads: leak report */ .leak-fig { margin: 0 0 clamp(26px, 4vw, 44px); color: var(--teal); } .leak-fig svg { width: 100%; height: auto; overflow: visible; } .leak .drip { opacity: 0; } .js:not(.rm) .is-in .leak .drip { animation: a-drip 2.4s cubic-bezier(.5,0,.8,.6) infinite; animation-delay: calc(var(--i) * .8s); } .rm .leak .drip, .no-js .leak .drip { opacity: .7; } .leak .lk-tag { transition: fill .3s, stroke .3s; } .leak.on .lk-tag { fill: #007caf; stroke: #007caf; } .leak.on path:first-child { stroke: #007caf; stroke-width: 2.4; } .leak.on .drip { fill: #fff; } .leak-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule-ink-strong); } .leak-list li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 22px 20px 22px 0; border-bottom: 1px solid var(--rule-ink); cursor: default; transition: background var(--d-fast); outline-offset: -2px; } .leak-list li:not(:nth-child(3n+1)) { padding-left: 20px; border-left: 1px solid var(--rule-ink); } .leak-list .mono-n { color: var(--teal); font-size: .8rem; padding-top: 3px; } .leak-list b { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -.015em; display: block; margin-bottom: 6px; } .leak-list p { margin: 0; color: var(--on-ink-2); font-size: .93rem; } .leak-list li.on { background: rgba(0,124,175,.12); } .guarantee { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 44px; font-family: var(--f-display); font-size: clamp(1.3rem, 2.4vw, 2rem); letter-spacing: -.025em; font-weight: 500; } .guarantee .stamp { font-size: .7rem; letter-spacing: .14em; color: var(--white); border-color: var(--teal); background: var(--teal); } @media (max-width: 900px) { .leak-list { grid-template-columns: 1fr 1fr; } .leak-list li:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; } .leak-list li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--rule-ink); } } @media (max-width: 560px) { .leak-list { grid-template-columns: 1fr; } .leak-list li:nth-child(even) { padding-left: 0; border-left: 0; } } /* Google Ads: services as sponsored results */ .adc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .adc, .adc-body > div { min-width: 0; } .adc { background: var(--white); border: 1px solid var(--rule-strong); padding: 20px 22px 24px; position: relative; transition: transform var(--d) var(--ease), box-shadow var(--d) var(--ease), border-color var(--d); } .adc::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--teal); transform: scaleY(0); transform-origin: top; transition: transform var(--d) var(--ease); } .adc:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -30px rgba(6,13,26,.45); border-color: var(--ink); } .adc:hover::after { transform: none; } .adc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-width: 0; } .adc-top .mono { color: var(--slate-ink); font-size: .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adc-sp { font-family: var(--f-body); font-size: .72rem; font-weight: 700; color: var(--ink); flex-shrink: 0; } .adc-body { display: grid; grid-template-columns: 44px 1fr; gap: 14px; } .adc-ic { width: 44px; height: 44px; border: 1px solid var(--rule-strong); display: grid; place-items: center; color: var(--teal-ink); transition: background var(--d), color var(--d); } .adc-ic svg { width: 22px; height: 22px; } .adc:hover .adc-ic { background: var(--teal); color: var(--white); border-color: var(--teal); } .adc h3 { color: var(--teal-ink); margin-bottom: 8px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: transparent; transition: text-decoration-color var(--d); } .adc:hover h3 { text-decoration-color: currentColor; } .adc p { color: var(--slate-ink); font-size: .94rem; margin: 0; } @media (max-width: 1023px) { .adc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .adc-grid { grid-template-columns: minmax(0, 1fr); } } /* step rail — numbered stations on a drawn line with a travelling pulse */ .rail { list-style: none; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: clamp(18px, 3vw, 40px); position: relative; margin-top: clamp(44px, 6vw, 77px); padding-top: 34px; } .rail::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform-origin: left; } .rail::after { content: ""; position: absolute; top: -1px; left: 0; width: 90px; height: 3px; background: linear-gradient(90deg, transparent, var(--teal)); opacity: 0; } .rail li { position: relative; } .rail-dot { position: absolute; top: -41px; left: 0; width: 14px; height: 14px; border: 1.5px solid var(--ink); background: var(--white); border-radius: 50%; transition: background var(--d), transform var(--d) var(--ease); } .rail li:hover .rail-dot { background: var(--teal); border-color: var(--teal); transform: scale(1.3); } .rail-no { display: block; font-family: var(--f-display); font-size: clamp(3.6rem, 6.4vw, 6rem); line-height: .8; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1px var(--ink); margin-bottom: 22px; transition: color var(--d), -webkit-text-stroke-color var(--d); } .rail li:hover .rail-no { color: var(--teal-ink); -webkit-text-stroke-color: var(--teal-ink); } .rail h3 { margin-bottom: 8px; } .rail p { color: var(--slate-ink); font-size: .95rem; margin: 0; } .rail.on-ink::before { background: var(--rule-ink-strong); } .rail.on-ink .rail-dot { border-color: var(--white); background: var(--ink); } .rail.on-ink .rail-no { -webkit-text-stroke-color: rgba(255,255,255,.45); } .rail.on-ink li:hover .rail-no { color: var(--teal); -webkit-text-stroke-color: var(--teal); } .rail.on-ink p { color: var(--on-ink-2); } .js:not(.rm) .rail::before { transform: scaleX(0); } .js:not(.rm) .rail.is-in::before { transform: scaleX(1); transition: transform 1.6s var(--ease-io); } .js:not(.rm) .rail.is-in::after { animation: railrun 4.5s var(--ease-io) 1.6s infinite; } @keyframes railrun { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 90px); opacity: 0; } } .js:not(.rm) .rail li { opacity: 0; transform: translateY(22px); } .js:not(.rm) .rail.is-in li { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(.3s + var(--i) * .22s); } .js:not(.rm) .rail .rail-dot { transform: scale(0); } .js:not(.rm) .rail.is-in .rail-dot { transform: scale(1); transition: transform .5s cubic-bezier(.3,1.6,.5,1), background var(--d); transition-delay: calc(.4s + var(--i) * .3s); } @media (max-width: 900px) { .rail { grid-template-columns: 1fr; padding-top: 0; padding-left: 34px; gap: 34px; } .rail::before { top: 0; bottom: 0; right: auto; width: 1px; height: auto; transform-origin: top; } .js:not(.rm) .rail::before { transform: scaleY(0); } .js:not(.rm) .rail.is-in::before { transform: scaleY(1); } .rail::after { display: none; } .rail-dot { top: 6px; left: -41px; } } /* Google Ads: interactive radius */ .radius { align-items: center; } .rad-ctl { border: 1px solid var(--rule-ink-strong); padding: 22px; display: grid; grid-template-columns: 1fr auto; gap: 14px 18px; align-items: center; } .rad-ctl label { color: var(--on-ink-3); } .rad-out { font-family: var(--f-display); font-size: 2rem; letter-spacing: -.04em; color: var(--white); } .rad-ctl input[type="range"] { grid-column: 1 / -1; width: 100%; -webkit-appearance: none; appearance: none; height: 2px; background: linear-gradient(90deg, var(--teal) var(--rp, 38%), rgba(255,255,255,.2) var(--rp, 38%)); outline: none; cursor: pointer; } .rad-ctl input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; background: var(--teal); border: 3px solid var(--ink); box-shadow: 0 0 0 1px var(--teal); cursor: grab; } .rad-ctl input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; background: var(--teal); border: 3px solid var(--ink); border-radius: 0; cursor: grab; } .rad-ctl input[type="range"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 8px; } .rad-ctl p { grid-column: 1 / -1; margin: 0; color: var(--on-ink-2) !important; line-height: 1.6; } .rad-fig { margin: 0; } .rad-fig svg { width: 100%; height: auto; overflow: visible; } .rad-fig circle[data-radius-ring], .rad-fig circle[data-radius-dash] { transition: r .5s var(--ease); } .rp .rp-dot { fill: rgba(255,255,255,.35); transition: fill .3s, r .3s; } .rp .rp-t { fill: rgba(255,255,255,.55) !important; transition: fill .3s; } .rp.in .rp-dot { fill: #fff; } .rp.in .rp-t { fill: #fff !important; } .rp.in .rp-m { fill: #007caf !important; } /* selector, wide-art variant (inner pages) */ .svc.wide .sp-body { grid-template-columns: 1.1fr 1fr; } .svc-art { color: var(--teal); position: relative; } .svc-art::before { content: ""; position: absolute; inset: -14px; background-image: linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px); background-size: 13px 13px; z-index: -1; } .svc-art svg { width: 100%; height: auto; } .svc-art .draw { stroke-dasharray: 1; stroke-dashoffset: 0; } .js:not(.rm) .svc-panel.on .svc-art .draw { animation: redraw 1.3s var(--ease-io) both; } .js:not(.rm) .svc-panel.on .svc-art :is(.a-rot, .a-pulse, .a-ping, .a-float, .a-blink, .a-bar, .a-flow, .a-packet, .a-scan, .a-click, .a-fill) { animation-play-state: running; } .svc-art .a-rot { animation: a-rot var(--dur, 16s) linear infinite var(--dir, normal); } .svc-art .a-pulse { animation: a-pulse var(--dur, 2.4s) var(--ease-io) infinite; animation-delay: calc(var(--i, 0) * .3s); } .svc-art .a-ping { animation: a-ping var(--dur, 2.6s) cubic-bezier(.2,.6,.3,1) infinite; animation-delay: calc(var(--i, 0) * .9s); } .svc-art .a-float { animation: a-float var(--dur, 3.2s) var(--ease-io) infinite; } .svc-art .a-blink { animation: a-blink var(--dur, 1.8s) ease-in-out infinite; animation-delay: calc(var(--i, 0) * .25s); } .svc-art .a-bar { animation: a-bar var(--dur, 2.8s) var(--ease-io) infinite; } .svc-art .a-flow { animation: a-flow var(--dur, 1.4s) linear infinite; } .rm .svc-art :is(.a-rot, .a-pulse, .a-ping, .a-float, .a-blink, .a-bar, .a-flow) { animation: none; } .svc-art .wx-knob { transition: transform .4s; } @media (max-width: 1023px) { .svc.wide .sp-body { grid-template-columns: 1fr; } .svc-art { max-width: 460px; } } /* call-to-action band */ .cb-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(34px, 5vw, 89px); align-items: center; } .cb-art { margin: 0; color: var(--teal); max-width: 520px; justify-self: end; width: 100%; } .cb-art svg { width: 100%; height: auto; } @media (max-width: 1023px) { .cb-grid { grid-template-columns: 1fr; } .cb-art { justify-self: start; max-width: 380px; } } /* ADA: big number */ .bs-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(26px, 5vw, 89px); align-items: center; } .bs-n { font-family: var(--f-display); font-size: clamp(7rem, 20vw, 17rem); letter-spacing: -.07em; line-height: .78; margin: 0; color: var(--teal-ink); } .bs-n small { font-size: .38em; letter-spacing: -.04em; color: var(--ink); margin-left: .05em; } @media (max-width: 760px) { .bs-grid { grid-template-columns: 1fr; } } /* ADA: inspected checklist */ .checks { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule-strong); border-left: 1px solid var(--rule-strong); background: var(--white); } .checks li { padding: 26px; border-right: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); position: relative; transition: background var(--d); } .checks li:hover { background: var(--paper-2); } .ck-ic { width: 48px; height: 48px; color: var(--teal-ink); display: block; margin-bottom: 22px; } .ck-ic svg { width: 100%; height: 100%; } .ck-code { position: absolute; top: 26px; right: 26px; color: var(--slate-ink); } .checks h3 { margin-bottom: 10px; } .checks p { color: var(--slate-ink); font-size: .95rem; margin: 0 0 18px; } .checks .stamp { font-size: .62rem; letter-spacing: .12em; } .js:not(.rm) .checks .stamp { opacity: 0; transform: rotate(-4deg) scale(1.8); } .js:not(.rm) .checks.is-in .stamp { opacity: 1; transform: rotate(-4deg) scale(1); transition: all .45s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(.8s + var(--i) * .22s); } .js:not(.rm) .checks li { opacity: 0; transform: translateY(20px); } .js:not(.rm) .checks.is-in li { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i) * .1s); } @media (max-width: 1023px) { .checks { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .checks { grid-template-columns: 1fr; } } /* ADA: widget demo */ .a11y { align-items: center; } .a11y-ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .a11y-ctl button { display: flex; align-items: center; gap: 12px; text-align: left; background: transparent; border: 1px solid var(--rule-ink-strong); color: var(--white); padding: 14px 16px; cursor: pointer; font-family: var(--f-display); font-size: .98rem; transition: all var(--d-fast); } .a11y-ctl button .g { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid currentColor; font-family: var(--f-mono); font-size: .8rem; flex-shrink: 0; } .a11y-ctl button:hover { border-color: var(--teal); } .a11y-ctl button[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); } .a11y-ctl .reset { justify-content: center; color: var(--on-ink-2); } .a11y-demo { background: var(--white); color: var(--ink); border: 1px solid var(--rule-ink); transition: filter .3s; } .ad-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--rule); } .ad-bar i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--rule-strong); } .ad-bar .mono { margin-left: 10px; color: var(--slate-ink); font-size: .6rem; } .ad-body { padding: clamp(22px, 3vw, 40px); transition: all .3s; } .ad-k { color: var(--teal-ink); display: block; margin-bottom: 10px; } .ad-body h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -.03em; line-height: 1.05; margin-bottom: 14px; transition: font-size .3s; } .ad-body p { color: #5b6677; font-size: 1rem; transition: font-size .3s, line-height .3s, letter-spacing .3s, color .3s; } .ad-body a { color: var(--teal-ink); } .ad-row { display: flex; align-items: center; gap: 18px; margin: 18px 0 22px; } .ad-btn { background: #7fb8c0; color: var(--white); padding: 11px 16px; font-family: var(--f-display); font-weight: 600; font-size: .92rem; transition: background .3s; } .ad-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .ad-cards div { border: 1px solid var(--rule); padding: 12px; transition: all .3s; } .ad-cards b { display: block; font-family: var(--f-display); font-size: .98rem; } .ad-cards span { color: #8a94a3; font-size: .82rem; transition: color .3s; } .a11y-demo.t-text .ad-body p { font-size: 1.22rem; } .a11y-demo.t-text .ad-body h3 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); } .a11y-demo.t-text .ad-cards b { font-size: 1.15rem; } .a11y-demo.t-text .ad-cards span { font-size: 1rem; } .a11y-demo.t-contrast { background: #000; color: #fff; } .a11y-demo.t-contrast .ad-body p, .a11y-demo.t-contrast .ad-cards span { color: #fff; } .a11y-demo.t-contrast .ad-body a, .a11y-demo.t-contrast .ad-k { color: #ffe14d; } .a11y-demo.t-contrast .ad-btn { background: #ffe14d; color: #000; } .a11y-demo.t-contrast .ad-cards div { border-color: #fff; } .a11y-demo.t-contrast .ad-bar { border-color: #444; } .a11y-demo.t-cursor, .a11y-demo.t-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M3 2l7.5 19 2.4-7.6L20.5 11z' fill='%23000' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 4 2, auto; } .a11y-demo.t-links .ad-body a { background: #ffe14d; color: #000; outline: 2px solid #000; text-decoration: underline; padding: 0 3px; } .a11y-demo.t-spacing .ad-body p { line-height: 2; letter-spacing: .06em; word-spacing: .16em; } .a11y-demo.t-spacing .ad-cards span { letter-spacing: .06em; } @media (max-width: 560px) { .a11y-ctl { grid-template-columns: 1fr; } .ad-cards { grid-template-columns: 1fr; } } /* Automated SEO: price tag */ .price { align-items: center; } .price-tag { background: var(--white); border: 1.5px solid var(--ink); color: var(--teal-ink); position: relative; box-shadow: 14px 14px 0 var(--teal); } .pt-head { display: flex; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid var(--rule-strong); color: var(--ink); } .pt-amt { display: flex; align-items: flex-start; gap: 6px; padding: 22px 22px 0; margin: 0; color: var(--ink); font-family: var(--f-display); font-size: clamp(5rem, 11vw, 8.5rem); letter-spacing: -.07em; line-height: .85; } .pt-amt .cur { font-size: .4em; margin-top: .15em; color: var(--teal-ink); } .pt-amt .per { font-size: .66rem; letter-spacing: .12em; color: var(--slate-ink); line-height: 1.6; margin-top: auto; margin-bottom: .6em; } .pt-list { list-style: none; margin: 22px; border-top: 1px solid var(--rule); } .pt-list li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); color: var(--ink); font-size: .96rem; } .pt-list svg { width: 16px; height: 16px; color: var(--teal-ink); flex-shrink: 0; } .pt-foot { padding: 0 22px 22px; } .pt-foot p { margin: 14px 0 0; color: var(--slate-ink); font-size: .6rem; } .js:not(.rm) .pt-list li { opacity: 0; transform: translateX(-12px); } .js:not(.rm) .price-tag.is-in .pt-list li { opacity: 1; transform: none; transition: all .5s var(--ease); } .js:not(.rm) .price-tag.is-in .pt-list li:nth-child(n) { transition-delay: calc(.5s + var(--k, 0) * 1s); } .price-tag.is-in .pt-list li:nth-child(1) { --k: .0; } .price-tag.is-in .pt-list li:nth-child(2) { --k: .07; } .price-tag.is-in .pt-list li:nth-child(3) { --k: .14; } .price-tag.is-in .pt-list li:nth-child(4) { --k: .21; } .price-tag.is-in .pt-list li:nth-child(5) { --k: .28; } .price-tag.is-in .pt-list li:nth-child(6) { --k: .35; } .price-tag.is-in .pt-list li:nth-child(7) { --k: .42; } .price-tag.is-in .pt-list li:nth-child(8) { --k: .49; } .price-tag.is-in .pt-list li:nth-child(9) { --k: .56; } @media (max-width: 1023px) { .price-tag { margin-right: 14px; } } /* Automated SEO: modules */ .mods { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .mods li { background: var(--white); border: 1px solid var(--rule-strong); padding: 26px; position: relative; overflow: hidden; isolation: isolate; transition: color var(--d); } .mods li::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateY(101%); transition: transform .55s var(--ease); z-index: -1; } .mods li:hover { color: var(--white); } .mods li:hover::before { transform: none; } .mods li:hover p { color: var(--on-ink-2); } .mods li:hover .md-ic { color: var(--teal); } .md-ic { display: block; width: 64px; height: 64px; color: var(--teal-ink); margin-bottom: 22px; transition: color var(--d); } .md-ic svg { width: 100%; height: 100%; } .md-n { position: absolute; top: 26px; right: 26px; color: var(--slate-ink); } .mods h3 { margin-bottom: 10px; } .mods p { color: var(--slate-ink); font-size: .94rem; margin: 0; transition: color var(--d); } .mods .a-packet { stroke-dasharray: .12 2; } .js:not(.rm) .mods li .md-ic :is(.a-rot, .a-pulse, .a-ping, .a-float, .a-blink, .a-bar, .a-flow, .a-packet) { animation-play-state: paused; } .js:not(.rm) .mods.is-in li .md-ic :is(.a-rot, .a-pulse, .a-ping, .a-float, .a-blink, .a-bar, .a-flow, .a-packet) { animation-play-state: running; } .mods .a-pulse { animation: a-pulse 2.4s var(--ease-io) infinite; animation-delay: calc(var(--i, 0) * .3s); } .mods .a-ping { animation: a-ping 2.6s cubic-bezier(.2,.6,.3,1) infinite; } .mods .a-float { animation: a-float 3.2s var(--ease-io) infinite; } .mods .a-blink { animation: a-blink var(--dur, 1.8s) ease-in-out infinite; } .mods .a-bar { animation: a-bar 2.8s var(--ease-io) infinite; animation-delay: calc(var(--i, 0) * .18s); } .mods .a-flow { animation: a-flow 1.4s linear infinite; } .mods .a-packet { animation: a-packet 2.6s var(--ease-io) infinite; } .rm .mods :is(.a-pulse, .a-ping, .a-float, .a-blink, .a-bar, .a-flow, .a-packet) { animation: none; } @media (max-width: 1023px) { .mods { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .mods { grid-template-columns: 1fr; } } /* Automated SEO: comparison table */ .cmp { margin-top: 55px; border-top: 1px solid var(--rule-ink-strong); } .cmp-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; align-items: center; border-bottom: 1px solid var(--rule-ink); } .cmp-row > * { padding: 18px 18px 18px 0; } .cmp-row > *:not(:first-child) { text-align: center; border-left: 1px solid var(--rule-ink); } .cmp-row [role="rowheader"] { font-family: var(--f-display); font-size: 1.15rem; letter-spacing: -.015em; } .cmp-head b { display: block; font-family: var(--f-display); font-size: 1.5rem; letter-spacing: -.03em; } .cmp-head .mono { color: var(--teal); } .cmp-head > *:last-child { background: rgba(0,124,175,.12); } .cmp-row > *:last-child { background: rgba(0,124,175,.06); } .cmp svg { width: 22px; height: 22px; color: var(--teal); display: inline-block; } .cmp svg path { stroke-dasharray: 1; stroke-dashoffset: 0; } .cmp .n i { color: var(--on-ink-3); font-style: normal; font-size: 1.3rem; } .js:not(.rm) .cmp svg path { stroke-dashoffset: 1; } .js:not(.rm) .cmp.is-in svg path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease); transition-delay: calc(.3s + var(--i, 0) * .15s); } .js:not(.rm) .cmp.is-in .cmp-row { animation: tabin .6s var(--ease) both; animation-delay: calc(var(--i, 0) * .08s); } /* SEO audit + contact: hero with the form */ .audit-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(34px, 5vw, 89px); align-items: start; } .au-list { list-style: none; margin-top: 30px; border-top: 1px solid var(--rule-ink); } .au-list li { display: flex; gap: 18px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule-ink); font-family: var(--f-display); font-size: 1.15rem; letter-spacing: -.015em; } .au-list .mono { color: var(--teal); } .sh-copy a.tel { color: var(--white); text-decoration: none; font-family: var(--f-display); font-size: 1.2rem; letter-spacing: -.02em; margin-left: 8px; text-transform: none; } .sh-copy a.tel:hover { color: var(--teal); } .au-cover { align-items: center; } .au-cards { list-style: none; display: grid; grid-template-columns: 1fr 1fr; margin-top: 44px; border-top: 1px solid var(--rule-ink-strong); } .au-cards li { padding: 22px 22px 22px 0; border-bottom: 1px solid var(--rule-ink); } .au-cards li:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--rule-ink); } .au-cards h3 { margin: 8px 0; } .au-cards p { color: var(--on-ink-2); font-size: .93rem; margin: 0; } .au-art { margin: 0; color: var(--teal); } .au-art svg { width: 100%; height: auto; overflow: visible; } @media (max-width: 1023px) { .audit-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .au-cards { grid-template-columns: 1fr; } .au-cards li:nth-child(even) { padding-left: 0; border-left: 0; } } .ct-block { display: grid; grid-template-columns: 1fr 1fr; margin: 34px 0 0; border-top: 1px solid var(--rule-ink); } .ct-block > div { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule-ink); } .ct-block > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--rule-ink); } .ct-block dt { color: var(--on-ink-3); margin-bottom: 6px; } .ct-block dd { margin: 0; font-family: var(--f-display); font-size: 1.12rem; letter-spacing: -.015em; overflow-wrap: anywhere; } .ct-block a { color: var(--white); text-decoration: none; } .ct-block a:hover { color: var(--teal); } .after { list-style: none; position: relative; } .after::before { content: ""; position: absolute; left: 104px; top: 10px; bottom: 10px; width: 1px; background: var(--rule-strong); transform-origin: top; } .after li { display: grid; grid-template-columns: 90px 30px 1fr; gap: 0 14px; padding: 0 0 38px; position: relative; } .af-t { color: var(--teal-ink); padding-top: 6px; text-align: right; } .af-dot { width: 16px; height: 16px; border: 1.5px solid var(--ink); background: var(--paper); border-radius: 50%; margin: 6px 0 0 6px; position: relative; z-index: 1; } .after li:hover .af-dot { background: var(--teal); border-color: var(--teal); } .after h3 { margin-bottom: 6px; } .after p { color: var(--slate-ink); margin: 0; } .js:not(.rm) .after::before { transform: scaleY(0); } .js:not(.rm) .after.is-in::before { transform: scaleY(1); transition: transform 1.6s var(--ease-io); } .js:not(.rm) .after li { opacity: 0; transform: translateX(-14px); } .js:not(.rm) .after.is-in li { opacity: 1; transform: none; transition: all .7s var(--ease); transition-delay: calc(.3s + var(--i) * .3s); } .ct-plot { margin: 0; color: var(--teal); } .ct-plot svg { width: 100%; height: auto; overflow: visible; } @media (max-width: 560px) { .ct-block { grid-template-columns: 1fr; } .ct-block > div:nth-child(even) { padding-left: 0; border-left: 0; } .after li { grid-template-columns: 64px 26px 1fr; } .after::before { left: 76px; } } /* legal */ .lg-progress { position: fixed; left: 0; right: 0; top: var(--hdr-h); height: 2px; z-index: 850; pointer-events: none; transition: top var(--d) var(--ease); } .hdr.compact ~ main .lg-progress, body:has(.hdr.compact) .lg-progress { top: var(--hdr-h-compact); } body:has(.hdr.hide) .lg-progress { top: 0; } .lg-progress i { position: absolute; inset: 0; background: var(--teal); transform: scaleX(var(--lp, 0)); transform-origin: left; } .lg-hero { padding-bottom: clamp(44px, 6vw, 77px); } .lg-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(26px, 5vw, 89px); align-items: end; } .lg-big { font-family: var(--f-display); font-size: clamp(5rem, 13vw, 11rem); letter-spacing: -.07em; line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--ink); text-transform: none; } .lg-wrap { padding-top: clamp(44px, 6vw, 77px); } .lg-grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(34px, 6vw, 110px); } .lg-toc { position: sticky; top: calc(var(--hdr-h-compact) + 34px); align-self: start; } .lg-toc > .mono { color: var(--slate-ink); display: block; margin-bottom: 14px; } .lg-toc ol { list-style: none; border-top: 1px solid var(--rule-strong); } .lg-toc li { border-bottom: 1px solid var(--rule); } .lg-toc a { display: grid; grid-template-columns: 34px 1fr; gap: 6px; padding: 11px 0; text-decoration: none; font-family: var(--f-display); font-size: .96rem; color: var(--slate-ink); position: relative; transition: color var(--d-fast), padding var(--d) var(--ease); } .lg-toc a .mono { color: var(--teal-ink); font-size: .66rem; padding-top: 3px; } .lg-toc a::before { content: ""; position: absolute; left: -14px; top: 0; bottom: 0; width: 2px; background: var(--teal); transform: scaleY(0); transition: transform var(--d) var(--ease); } .lg-toc a:hover, .lg-toc a[aria-current="true"] { color: var(--ink); padding-left: 6px; } .lg-toc a[aria-current="true"]::before { transform: none; } .lg-also { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 26px; align-items: baseline; } .lg-also .mono { color: var(--slate-ink); } .lg-also a { color: var(--ink); font-family: var(--f-display); text-decoration: none; white-space: nowrap; } .lg-also a:hover { color: var(--teal-ink); } .lg-text { max-width: 46em; } .lg-sec { position: relative; padding: 0 0 44px 0; margin-bottom: 44px; border-bottom: 1px solid var(--rule); } .lg-sec:last-child { border-bottom: 0; } .lg-n { display: block; color: var(--teal-ink); margin-bottom: 10px; } .lg-sec h2 { margin-bottom: 18px; } .lg-body { color: #3c4655; font-size: 1.04rem; line-height: 1.75; } .lg-body ul { margin: 0 0 1em; padding-left: 1.2em; } .lg-body li { margin-bottom: .4em; } .lg-body li::marker { color: var(--teal-ink); } .lg-body strong { color: var(--ink); } @media (max-width: 1023px) { .lg-grid { grid-template-columns: 1fr; } .lg-toc { position: static; } .lg-head { grid-template-columns: 1fr; } .lg-progress { top: var(--hdr-h); } } /* 404 */ .nf { min-height: 100svh; display: flex; flex-direction: column; } .nf-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(34px, 5vw, 89px); align-items: center; } .nf-big { font-family: var(--f-display); font-size: clamp(7rem, 18vw, 15rem); letter-spacing: -.07em; line-height: .78; margin: 0 0 26px; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.5); } .nf-links { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule-ink); } .nf-links a { color: var(--white); } .nf-art { margin: 0; color: var(--teal); } .nf-art svg { width: 100%; height: auto; } @media (max-width: 1023px) { .nf-grid { grid-template-columns: 1fr; } } /* location pages */ .plot-art { max-width: 640px; justify-self: end; width: 100%; } .plot-art a.cp-pin { cursor: pointer; } .plot-art a.cp-pin:hover text, .plot-art a.cp-pin:focus-visible text { fill: #007caf !important; } .plot-art a.cp-pin:focus { outline: none; } .mk { align-items: start; } .mk-text { margin-top: 26px; color: var(--slate-ink); font-size: 1.06rem; line-height: 1.7; max-width: 40em; } .mk-aside { background: var(--white); border: 1px solid var(--rule-strong); padding: clamp(22px, 3vw, 34px); } .mk-aside .ticklist { margin-top: 12px; } .mk-aside .ticklist li { font-size: .95rem; } .mk-note { color: var(--slate-ink); font-size: .92rem; margin: 16px 0 0; } .mk-aside .mono a { color: var(--teal-ink); } .chip.on { background: var(--ink); color: var(--white); border-color: var(--ink); } .plat4 { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(34px, 5vw, 55px); border-top: 1px solid var(--rule-ink-strong); } .plat4 li { padding: 22px 22px 0 0; } .plat4 li + li { padding-left: 22px; border-left: 1px solid var(--rule-ink); } .plat4 h3 { margin: 10px 0 8px; } .plat4 p { color: var(--on-ink-2); font-size: .93rem; margin: 0; } @media (max-width: 1023px) { .plat4 { grid-template-columns: 1fr 1fr; } .plat4 li:nth-child(3) { padding-left: 0; border-left: 0; } .plat4 li:nth-child(n+3) { margin-top: 22px; border-top: 1px solid var(--rule-ink); } .plot-art { justify-self: start; } } @media (max-width: 560px) { .plat4 { grid-template-columns: 1fr; } .plat4 li + li { padding-left: 0; border-left: 0; margin-top: 22px; border-top: 1px solid var(--rule-ink); } } .why6 { list-style: none; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule-strong); } .why6 li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 20px 20px 20px 0; border-bottom: 1px solid var(--rule); font-family: var(--f-display); font-size: 1.12rem; letter-spacing: -.015em; transition: background var(--d-fast), padding var(--d) var(--ease); } .why6 li:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--rule); } .why6 li:hover { background: var(--white); } .why6 .mono { color: var(--teal-ink); padding-top: 4px; } @media (max-width: 760px) { .why6 { grid-template-columns: 1fr; } .why6 li:nth-child(even) { padding-left: 0; border-left: 0; } } .mfacts { list-style: none; border-top: 1px solid var(--rule-ink-strong); } .mfacts li { position: relative; padding: 16px 0 16px 36px; border-bottom: 1px solid var(--rule-ink); color: var(--on-ink-2); } .mfacts li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 12px; height: 12px; border: 1.5px solid var(--teal); transform: rotate(45deg); } .mfacts li:hover::before { background: var(--teal); } .inds { list-style: none; border-top: 1px solid var(--rule-strong); } .inds li { display: grid; grid-template-columns: 64px 1fr; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; isolation: isolate; transition: color var(--d); } .inds li::before { content: ""; position: absolute; inset: 0 -12px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); z-index: -1; } .inds li:hover { color: var(--white); } .inds li:hover::before { transform: none; } .inds .mono { color: var(--teal-ink); } .inds li:hover .mono { color: var(--teal); } .inds .nm { font-family: var(--f-display); font-size: clamp(1.3rem, 2.4vw, 2rem); letter-spacing: -.03em; transition: transform var(--d) var(--ease); } .inds li:hover .nm { transform: translateX(8px); } .cards5 { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--rule-strong); border-left: 1px solid var(--rule-strong); background: var(--white); } .cards5 li { padding: 24px 22px 26px; border-right: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); position: relative; transition: background var(--d); } .cards5 li:hover { background: var(--paper-2); } .c5-ic { display: block; width: 72px; height: 72px; color: var(--teal-ink); margin-bottom: 26px; } .c5-ic svg { width: 100%; height: 100%; } .c5-ic .draw { stroke-dasharray: 1; stroke-dashoffset: 0; } .cards5 li:hover .c5-ic .draw { animation: redraw 1.1s var(--ease-io) both; } .c5-n { position: absolute; top: 24px; right: 22px; color: var(--slate-ink); } .cards5 h3 { margin-bottom: 10px; } .cards5 p { color: var(--slate-ink); font-size: .93rem; margin: 0; } .cards5 .a-rot { animation: a-rot var(--dur, 16s) linear infinite var(--dir, normal); } .cards5 .a-pulse { animation: a-pulse var(--dur, 2.4s) var(--ease-io) infinite; } .cards5 .a-ping { animation: a-ping var(--dur, 2.6s) cubic-bezier(.2,.6,.3,1) infinite; animation-delay: calc(var(--i, 0) * .9s); } .cards5 .a-float { animation: a-float var(--dur, 3.2s) var(--ease-io) infinite; } .cards5 .a-blink { animation: a-blink var(--dur, 1.8s) ease-in-out infinite; animation-delay: calc(var(--i, 0) * .25s); } .cards5 .a-bar { animation: a-bar var(--dur, 2.8s) var(--ease-io) infinite; animation-delay: calc(var(--i, 0) * .18s); } .cards5 .a-flow { animation: a-flow var(--dur, 1.4s) linear infinite; } .cards5 .a-click { animation: a-click var(--dur, 2.6s) var(--ease-io) infinite; } .rm .cards5 :is(.a-rot, .a-pulse, .a-ping, .a-float, .a-blink, .a-bar, .a-flow, .a-click) { animation: none; } @media (max-width: 1180px) { .cards5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .cards5 { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .cards5 { grid-template-columns: 1fr; } } .why3 { list-style: none; border-top: 1px solid var(--rule-ink-strong); } .why3 li { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--rule-ink); } .why3 .lv-n { -webkit-text-stroke-color: rgba(255,255,255,.45); margin: 0; font-size: clamp(3.6rem, 6vw, 5.5rem); } .why3 li:hover .lv-n { color: var(--teal); -webkit-text-stroke-color: var(--teal); } .why3 h3 { margin-bottom: 8px; } .why3 p { color: var(--on-ink-2); margin: 0; } .related { display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: baseline; margin-top: 55px; padding-top: 26px; border-top: 1px solid var(--rule); } /* icons inside hub / cards need the draw state when the host animates in */ .sh-art svg svg .draw { stroke-dasharray: 1; } .js:not(.rm) .is-in .wx-knob { animation: wxk 4.2s var(--ease-io) infinite; } @keyframes wxk { 0%, 35% { transform: translateX(-30px); fill: #9aa3ad; } 50%, 88% { transform: translateX(0); fill: #007caf; } 100% { transform: translateX(-30px); fill: #9aa3ad; } } @media (max-width: 760px) { .leak-fig { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; } .leak-fig svg { min-width: 760px; } }