/* ========================================================================== Self-hosted variable fonts (SIL Open Font License, via Google Fonts). One latin WOFF2 per family; Archivo as a 24 KB two-weight instance — three requests, ~78 KB total, no third-party font origin. ========================================================================== */ /* Archivo ships as a 24 KB instance covering the two weights the pages set (700 and 800 at width 112); the 90 KB full variable file is declared for lighter weights only, so it is fetched solely by a page that asks for one. */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 700 800; font-stretch: 112%; /* optional, not swap: the headline is preloaded and almost always ready at first paint; when it is not, the metric-matched fallback stays for the visit instead of re-breaking a 5vw balanced headline mid-read (a whole viewport of layout shift on slow connections). */ font-display: optional; src: url("fonts/archivo-700-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 699; font-stretch: 112%; font-display: swap; src: url("fonts/archivo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url("fonts/instrument-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap; src: url("fonts/martian-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Metric-matched stand-ins: while a web font is still loading, Arial / Consolas take the same width and line height, so the swap does not move a single line (generated from the font files by tools/patch_site_hero_fonts; regenerate if a font file changes). */ @font-face { font-family: "Archivo Fallback"; src: local("Arial Bold"); size-adjust: 124.97%; ascent-override: 70.26%; descent-override: 16.80%; line-gap-override: 0.00%; } @font-face { font-family: "Instrument Sans Fallback"; src: local("Arial"); size-adjust: 127.77%; ascent-override: 75.92%; descent-override: 19.57%; line-gap-override: 0.00%; } @font-face { font-family: "Martian Mono Fallback"; src: local("Consolas"); size-adjust: 127.32%; ascent-override: 78.54%; descent-override: 15.71%; line-gap-override: 0.00%; } /* ========================================================================== THE LINE — visual system for index.html only. Loaded AFTER styles.css. Every rule is scoped to `.line-page`, which lives on index.html's and nowhere else. work-with-us.html and blog/*.html never match these selectors, so styles.css stays authoritative for them. ========================================================================== */ .line-page { /* Tokens */ --porcelain: #edeff3; --porcelain-lift: #f6f7fa; --ink: #0e1116; --graphite: #4c5462; --mist: #a8b5c9; --ultramarine: #2540f5; --ultramarine-soft: rgba(37, 64, 245, 0.1); --jade: #0a6e4e; --rule: rgba(14, 17, 22, 0.1); --rule-strong: rgba(14, 17, 22, 0.2); /* Form-field boundaries: 3.5:1 on white, the WCAG 1.4.11 floor. */ --rule-input: rgba(14, 17, 22, 0.5); --panel: rgba(255, 255, 255, 0.64); --panel-strong: rgba(255, 255, 255, 0.82); --panel-ink: #12161d; /* Type */ --display: "Archivo", "Archivo Fallback", "Segoe UI", system-ui, -apple-system, sans-serif; --body: "Instrument Sans", "Instrument Sans Fallback", "Segoe UI", system-ui, -apple-system, sans-serif; --mono: "Martian Mono", "Martian Mono Fallback", ui-monospace, SFMono-Regular, Consolas, monospace; --shell: min(1180px, 90vw); background: var(--porcelain); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.62; letter-spacing: -0.003em; transition: background 0.8s ease; } /* Accent that survives on ink (ultramarine itself fails contrast on dark). */ .line-page { --accent-on-dark: #a9b4ff; --jade-on-dark: #35d69f; } .line-page.in-dark { background: var(--ink); } /* Neutralise the legacy fixed gradient from styles.css. */ .line-page::before { display: none; } .line-page .container { width: var(--shell); } /* -------------------------------------------------------------------------- 1. Layer stack: canvas (0) -> veil (0) -> content (1) -------------------------------------------------------------------------- */ .line-canvas, .line-veil { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .line-canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s ease; } .line-canvas.is-live { opacity: 1; } /* Keeps type legible over the scene without hiding it. Per-block scrims do the heavy lifting for copy; this stays thin so the acts actually read. */ .line-veil { /* Two layers: the original top/bottom haze, plus a band the width of the content column (1080px + an 80px feather each side) that softens the scene under the copy. The tiles stay vivid in the gutters and in the hero; the copy never competes with them (Brent, 2026-09-03). */ --veil: 237, 239, 243; --veil-band: 0.74; background: linear-gradient( 90deg, rgba(var(--veil), 0) 0, rgba(var(--veil), 0) calc(50% - 620px), rgba(var(--veil), var(--veil-band)) calc(50% - 540px), rgba(var(--veil), var(--veil-band)) calc(50% + 540px), rgba(var(--veil), 0) calc(50% + 620px), rgba(var(--veil), 0) 100% ), linear-gradient( 180deg, rgba(var(--veil), 0.34) 0%, rgba(var(--veil), 0.14) 26%, rgba(var(--veil), 0.14) 74%, rgba(var(--veil), 0.42) 100% ); transition: opacity 0.8s ease; } /* The hero shows the scene in full; the band fades in over the first screen. */ @supports (animation-timeline: scroll()) { .line-veil { animation: veil-in linear both; animation-timeline: scroll(root); animation-range: 0 90vh; } @keyframes veil-in { from { opacity: 0.3; } to { opacity: 1; } } } /* Dark chapter: the veil flips to ink so porcelain cards glow against it. */ .line-page.in-dark .line-veil { --veil: 14, 17, 22; --veil-band: 0.7; background: linear-gradient( 90deg, rgba(var(--veil), 0) 0, rgba(var(--veil), 0) calc(50% - 620px), rgba(var(--veil), var(--veil-band)) calc(50% - 540px), rgba(var(--veil), var(--veil-band)) calc(50% + 540px), rgba(var(--veil), 0) calc(50% + 620px), rgba(var(--veil), 0) 100% ), linear-gradient( 180deg, rgba(var(--veil), 0.55) 0%, rgba(var(--veil), 0.38) 30%, rgba(var(--veil), 0.38) 70%, rgba(var(--veil), 0.6) 100% ); } .line-page > header, .line-page > main, .line-page > footer { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- 2. Act indicator -------------------------------------------------------------------------- */ /* Lives in the page gutter, never over the content shell. z-index matches the content so that if it ever did overlap, the text still wins (later sibling). */ .act-rail { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); z-index: 1; display: grid; gap: 18px; pointer-events: none; } /* The line, literally: a hairline track behind the four acts that the reader draws by scrolling (CSS scroll-driven; no script). */ .act-rail::before, .act-rail::after { content: ""; position: absolute; left: 3px; top: 4px; bottom: 4px; width: 1px; background: var(--rule-strong); } @supports (animation-timeline: scroll()) { .act-rail::after { background: var(--ultramarine); transform-origin: top center; transform: scaleY(0); animation: rail-fill linear both; animation-timeline: scroll(root); } @keyframes rail-fill { to { transform: scaleY(1); } } } .act-rail__item { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist); transition: color 0.45s ease; pointer-events: auto; text-decoration: none; } .act-rail__item:hover { color: var(--ink); } .line-page.in-dark .act-rail__item { color: rgba(237, 239, 243, 0.4); } .line-page.in-dark .act-rail__item.is-active, .line-page.in-dark .act-rail__item:hover { color: var(--porcelain); } .act-rail__dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; transition: background 0.45s ease, transform 0.45s ease; } .act-rail__item.is-active { color: var(--ink); } .act-rail__item.is-active .act-rail__dot { background: var(--ultramarine); border-color: var(--ultramarine); transform: scale(1.35); } .act-rail__label { white-space: nowrap; } /* A horizontal label needs ~167px of gutter. Below that the label turns vertical beside the track, so the acts stay named on every laptop; below 1100px the rail is hidden entirely — it must never sit over the copy. */ @media (max-width: 1549px) { .act-rail { gap: 26px; } .act-rail__item { flex-direction: column; align-items: flex-start; gap: 10px; } .act-rail__label { writing-mode: vertical-rl; text-orientation: mixed; margin-left: 12px; } } @media (max-width: 1100px) { .act-rail { display: none; } } /* Scroll progress — the line, literally drawing as you read. */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; } .scroll-progress span { display: block; height: 100%; background: var(--ultramarine); transform-origin: left center; transform: scaleX(0); } /* -------------------------------------------------------------------------- 3. Typography -------------------------------------------------------------------------- */ .line-page h1, .line-page h2, .line-page h3, .line-page .display { font-family: var(--display); font-weight: 800; font-stretch: 112%; letter-spacing: -0.022em; line-height: 1.04; color: var(--ink); margin: 0; text-wrap: balance; /* balance can inflate a heading's min-content and blow out its grid track; these keep long words inside the column on narrow screens. */ overflow-wrap: break-word; min-width: 0; } /* Grid items default to min-width:auto and refuse to shrink below content. */ .band__head > *, .line-hero__copy > *, .about-body > *, .pledge > *, .founder-strip__body > * { min-width: 0; } .line-page h1 { font-size: clamp(2.35rem, 5vw, 4.35rem); } .line-page h2 { font-size: clamp(2rem, 4vw, 3.1rem); text-wrap: balance; } .line-page p, .line-page li { text-wrap: pretty; } /* Chapter-scale statements for the sections that carry the story. */ .line-page h2.display-xl { font-size: clamp(2.2rem, 5.2vw, 4.3rem); letter-spacing: -0.028em; } /* Chapter headlines wipe in as their section reveals. */ .line-page .reveal .display-xl { clip-path: inset(0 0 98% 0); transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.08s; } .line-page .reveal.is-in .display-xl { clip-path: inset(0 0 -10% 0); } /* Kinetic headline: words rise as the page settles. line-ui.js splits the H1 into .kword spans; without JS the H1 simply renders whole. */ .kword { display: inline-block; transform: translateY(0.9em); opacity: 0; animation: kword-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(var(--wi) * 55ms); } @keyframes kword-rise { to { transform: none; opacity: 1; } } .line-page h3 { font-size: 1.16rem; font-weight: 700; letter-spacing: -0.014em; line-height: 1.24; } .line-page p { margin: 0; } .line-page a { color: inherit; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--graphite); } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--ultramarine); } .lede { font-size: clamp(1.03rem, 1.5vw, 1.2rem); color: var(--graphite); line-height: 1.58; max-width: 62ch; } .line-page .prose a { color: var(--ultramarine); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .line-page .prose a:hover { text-decoration-thickness: 2px; } /* Visible keyboard focus everywhere on this page. */ .line-page a:focus-visible, .line-page button:focus-visible, .line-page input:focus-visible, .line-page textarea:focus-visible, .line-page select:focus-visible, .line-page [tabindex]:focus-visible { outline: 2px solid var(--ultramarine); outline-offset: 3px; border-radius: 4px; } /* Focus never lands under the sticky header or, on phones, under the booking bar (WCAG 2.4.11). Sections keep their own anchor landing. */ .line-page :is(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin-top: 92px; } @media (max-width: 768px) { .line-page :is(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin-bottom: 84px; } } /* Skip link: visually hidden until keyboard focus. */ .skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; transform: translateY(-200%); background: var(--ink); color: var(--porcelain); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 18px; border-radius: 3px; transition: transform 0.2s ease; } .skip-link:focus-visible { transform: none; outline-color: var(--porcelain); } /* `.line-page a { color: inherit }` outranks the rule above, which left the focused skip link ink on ink (invisible) until 2026-09-15. */ .line-page .skip-link { color: var(--porcelain); } /* -------------------------------------------------------------------------- 4. Header / nav -------------------------------------------------------------------------- */ .line-page .page-header { position: sticky; top: 0; z-index: 40; background: rgba(237, 239, 243, 0.72); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-bottom: 1px solid var(--rule); box-shadow: none; } /* The header button waits until the hero's own button has scrolled away, so the first screen makes one ask, not two. Scroll-driven where supported; simply present elsewhere. Phones keep the sticky bar instead. */ @media (min-width: 965px) { @supports (animation-timeline: scroll()) { .line-page .nav-bar .primary-button { animation: header-cta-in linear both; animation-timeline: scroll(root); animation-range: 0 60vh; } @keyframes header-cta-in { 0% { opacity: 0; visibility: hidden; transform: translateY(-6px); } 80% { opacity: 0; visibility: hidden; transform: translateY(-6px); } 100% { opacity: 1; visibility: visible; transform: none; } } } } .line-page .nav-bar { padding: 16px 0; gap: 20px; } .line-page .brand { gap: 11px; font-family: var(--display); font-weight: 700; font-stretch: 112%; letter-spacing: -0.01em; } .line-page .brand-mark { width: 44px; height: 44px; border-radius: 0; background: transparent; } .line-page .brand-mark svg { width: 100%; height: 100%; display: block; } .line-page .brand-name { font-size: 1.02rem; /* Two words, one line: on a phone the article header's back link was pushing "Acceleris / Labs" onto two lines (2026-09-14). */ white-space: nowrap; } .line-page .site-nav { gap: 30px; color: var(--graphite); } .line-page .site-nav a { font-family: var(--mono); font-size: 0.63rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; } .line-page .site-nav a::after { background: var(--ultramarine); bottom: -4px; } .line-page .site-nav a:hover { color: var(--ink); } /* Scrollspy: the section under the viewport middle lights its link. */ .line-page .site-nav a[aria-current="true"] { color: var(--ink); } .line-page .site-nav a[aria-current="true"]::after { opacity: 1; transform: scaleX(1); } .line-page .nav-toggle { border-radius: 8px; border-color: var(--rule-strong); background: rgba(255, 255, 255, 0.7); box-shadow: none; } .line-page .nav-toggle span { background: var(--ink); } /* Six items + CTA need room; tighten before the mobile collapse takes over. */ @media (max-width: 1240px) { .line-page .site-nav { gap: 18px; } } /* Tablet portrait (769-964px): brand, six links and the button never fit on one row, so the header keeps only the navigation; the hero carries the same button at the top of the page. */ @media (min-width: 769px) and (max-width: 964px) { .line-page .nav-bar .primary-button { display: none; } } @media (max-width: 1071px) and (min-width: 769px) { .line-page .site-nav { gap: 13px; } .line-page .site-nav a { font-size: 0.58rem; letter-spacing: 0.1em; } .line-page .nav-bar .primary-button { padding: 12px 16px; } } @media (max-width: 768px) { .line-page .site-nav { background: var(--porcelain-lift); border-color: var(--rule); border-radius: 14px; box-shadow: 0 24px 48px rgba(14, 17, 22, 0.14); gap: 0; padding: 8px 20px; } /* Comfortable thumb targets in the drawer, with hairline separators. */ .line-page .site-nav a { display: flex; align-items: center; min-height: 48px; width: 100%; font-size: 0.68rem; border-bottom: 1px solid var(--rule); } .line-page .site-nav a:last-child { border-bottom: 0; } .line-page .site-nav a::after { display: none; } .line-page .page-header { z-index: 2050; } } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .line-page .primary-button, .line-page .secondary-button { font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; border-radius: 3px; padding: 15px 26px; line-height: 1.3; transition: transform 0.55s var(--ease-spring), background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .line-page .primary-button { background: var(--ultramarine); color: #fff; box-shadow: none; border: 1px solid var(--ultramarine); } .line-page .primary-button::after { content: "\2192"; display: inline-block; margin-left: 2px; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .line-page .primary-button:hover::after, .line-page .secondary-button:hover::after { transform: translateX(4px); } .line-page .primary-button:hover { background: var(--ink); border-color: var(--ink); transform: translateY(-2px); filter: none; box-shadow: none; } .line-page .secondary-button { background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); box-shadow: none; } .line-page .secondary-button:hover { border-color: var(--ink); background: rgba(255, 255, 255, 0.6); transform: translateY(-2px); box-shadow: none; } /* -------------------------------------------------------------------------- 6. Band shell -------------------------------------------------------------------------- */ .band { position: relative; padding: clamp(84px, 11vw, 148px) 0; } .band + .band { border-top: 1px solid var(--rule); } .band__head { position: relative; display: grid; gap: 20px; max-width: 760px; margin-bottom: clamp(44px, 6vw, 72px); } /* Text that sits directly on the scene gets a soft, edgeless scrim so a card drifting behind it can never eat the copy. No visible box — it fades out well before the text does. */ .band__head::before, .about-body::before, .line-hero__copy::before, .flow-rail::before, .contact-points::before, .faq-list::before, .client-list::before, .step-list::before, .uc-more::before { content: ""; position: absolute; inset: -32px -48px; z-index: -1; pointer-events: none; background: radial-gradient( 96% 78% at 42% 50%, rgba(237, 239, 243, 0.96) 0%, rgba(237, 239, 243, 0.9) 55%, rgba(237, 239, 243, 0.72) 76%, rgba(237, 239, 243, 0) 96% ); } .about-body, .line-hero__copy, .flow-rail, .contact-points, .faq-list, .client-list { position: relative; } .band__head--wide { max-width: none; } .panel { background: var(--panel); backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); border: 1px solid var(--rule); border-radius: 4px; } @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .panel { background: rgba(255, 255, 255, 0.93); } } /* The two About cards sit directly above the dark Insights chapter. On a phone the page ground turns ink while they are still on screen, and a 64% white card over ink reads as a grey slab with blue links on it (2026-09-14). Solid white, like the blog cards that follow them. */ .founder-strip.panel, .pledge.panel { background: #fff; } /* -------------------------------------------------------------------------- 7. Hero — Act 01, Chaos -------------------------------------------------------------------------- */ .line-hero { position: relative; padding: clamp(72px, 10vw, 128px) 0 clamp(52px, 6vw, 84px); } /* Every full-width section paints a soft scrim with an absolutely positioned ::before that deliberately bleeds past its own edges so the gradient's falloff is never cut (.line-hero::before at -12%, .band__head::before and .client-list::before at -48px). Those sections already span the viewport, so the bleed was never visible — all it did was make the page scroll sideways: ~152px at 1280 (hero) and ~34px at 375 (every band, since the -48px then exceeds the container's narrow side margin). Clip it back to the section box. `clip` and not `hidden` on purpose — `hidden` would turn these into scroll containers and break the sticky / scroll-driven behaviour the page relies on. */ .line-hero, .band { overflow-x: clip; } /* Soft, edgeless scrim so headline type always clears the scene. */ .line-hero::before { content: ""; position: absolute; inset: -6% -12% 0; background: radial-gradient( 62% 58% at 34% 44%, rgba(237, 239, 243, 0.92) 0%, rgba(237, 239, 243, 0.55) 46%, rgba(237, 239, 243, 0) 78% ); pointer-events: none; } .line-hero > .container { position: relative; } .line-hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 64px); align-items: start; } /* Explicit breakpoint — the two-column layout only exists above 940px. */ @media (min-width: 941px) { .line-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 72px; } } .line-hero__copy { display: grid; gap: 26px; justify-items: start; } .line-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; } /* Metrics card */ .line-metrics__label { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--graphite); } .line-hero__link { display: inline-flex; align-items: center; gap: 8px; padding: 12px 0; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); transition: color 0.3s ease, border-color 0.3s ease; } .line-hero__link:hover { color: var(--ultramarine); border-color: var(--ultramarine); } /* The four facts, as one quiet line instead of a stats card. */ .line-hero__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; max-width: 560px; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); line-height: 1.6; } .line-hero__facts span { position: relative; padding-left: 14px; } .line-hero__facts span::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 1px; background: var(--ultramarine); } /* Estimator card: two numbers in, one number out. Plain arithmetic. */ .line-estimate { background: rgba(255, 255, 255, 0.9); padding: clamp(24px, 3vw, 34px); display: grid; gap: 20px; width: 100%; } .line-estimate__inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; /* labels may wrap; the three inputs stay on one baseline */ } .line-estimate__field { display: grid; gap: 8px; align-content: end; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); line-height: 1.5; } .line-estimate__field input { width: 100%; padding: 10px 12px; font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 1.95rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); background: rgba(255, 255, 255, 0.72); border: 1px solid var(--rule-input); border-radius: 3px; -moz-appearance: textfield; appearance: textfield; } .line-estimate__field input::-webkit-inner-spin-button, .line-estimate__field input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .line-estimate__field input:focus-visible { outline: 2px solid var(--ultramarine); outline-offset: 2px; } .line-estimate__result { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--rule); } .line-estimate__result strong { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 4.6vw, 3.6rem); letter-spacing: -0.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .line-estimate__result span { font-size: 0.93rem; color: var(--graphite); } .line-estimate__hours { margin-top: 6px; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); line-height: 1.6; } .line-estimate__hours strong { font: inherit; font-weight: 600; letter-spacing: inherit; color: var(--ink); font-variant-numeric: tabular-nums; } .line-estimate__note { font-size: 0.86rem; color: var(--graphite); line-height: 1.55; } .line-estimate__note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ultramarine); text-underline-offset: 3px; } .line-estimate__note a:hover { color: var(--ultramarine); } /* Scroll hint — in normal flow, never absolutely positioned. */ /* "Pause motion" (WCAG 2.2.2): the scene, the phone hero loop and every looping CSS animation stop from one button. Hidden when the OS already asks for reduced motion, because then there is nothing left to pause. */ .motion-toggle { display: inline-flex; align-items: center; gap: 8px; flex: none; margin-left: auto; padding: 8px 12px; font-family: var(--mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.3; color: var(--ink); background: transparent; border: 1px solid var(--rule-input); border-radius: 3px; cursor: pointer; transition: border-color 0.3s ease, color 0.3s ease; } .motion-toggle:hover { color: var(--ultramarine); border-color: var(--ultramarine); } .motion-toggle svg { display: block; fill: currentColor; } .motion-toggle[aria-pressed="true"] .motion-toggle__pause, .motion-toggle:not([aria-pressed="true"]) .motion-toggle__play { display: none; } @media (max-width: 600px) { .scroll-hint { flex-wrap: wrap; } .motion-toggle { flex-basis: 100%; max-width: max-content; margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } } .scroll-hint { margin-top: clamp(48px, 6vw, 84px); display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--graphite); } .scroll-hint__track { flex: 1; max-width: 240px; height: 1px; background: var(--rule-strong); position: relative; overflow: hidden; } .scroll-hint__track::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 34%; background: var(--ultramarine); animation: hint-slide 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite; } @keyframes hint-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } } /* -------------------------------------------------------------------------- 8. Consultation steps — Act 02, Line. A sequence, so it keeps 01/02/03. -------------------------------------------------------------------------- */ .step { background: var(--panel-strong); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: clamp(26px, 3vw, 38px); display: grid; gap: 14px; align-content: start; transition: background 0.4s ease; } .step:hover { background: rgba(255, 255, 255, 0.95); } .step__index { font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; color: var(--ultramarine); } .step p { color: var(--graphite); font-size: 0.96rem; line-height: 1.55; } /* Split: the section head stays on the left while the list reads on the right — one section that does not stack head-over-grid. */ .split { display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; } @media (min-width: 941px) { .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; } .split .band__head { margin-bottom: 0; position: sticky; top: 96px; } } .step-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); position: relative; } .step-list .step { grid-template-columns: 56px minmax(0, 1fr); gap: 6px 20px; padding: 26px 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--rule); } .step-list .step:hover { background: transparent; } .step-list .step__index { grid-row: 1 / span 2; font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1; } .step-list .step h3, .step-list .step p { grid-column: 2; } /* -------------------------------------------------------------------------- 8b. Engagement flow — the five-stage working model. A sequence: 01–05. -------------------------------------------------------------------------- */ .flow-rail { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); counter-reset: none; } .flow-step { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: start; padding: clamp(20px, 2.6vw, 30px) 0; border-bottom: 1px solid var(--rule); } .flow-step__index { font-family: var(--mono); font-size: 0.9rem; font-weight: 600; color: var(--ultramarine); letter-spacing: 0.08em; line-height: 1.5; } .flow-step h3 { margin-bottom: 6px; } .flow-step p { color: var(--graphite); font-size: 0.96rem; line-height: 1.55; max-width: 62ch; } @media (min-width: 861px) { /* The index keeps its own column; the wrapper (title + copy) takes the rest of the row and splits itself: title in a fixed column, copy beside it. The old rule put the 260px column on the WRAPPER, so title and copy were both squeezed into 260px while the other 800px of the row sat empty (2026-09-14). */ .flow-step > div { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 20px; align-items: start; } .flow-step h3 { margin-bottom: 0; } } .band__foot { margin-top: clamp(24px, 3vw, 36px); font-size: 0.95rem; } /* -------------------------------------------------------------------------- 9. Use cases — Act 03, Branch. Tagged by department, deliberately unnumbered. -------------------------------------------------------------------------- */ .uc-grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); list-style: none; margin: 0; padding: 0; grid-template-columns: 1fr; } @media (min-width: 641px) { .uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Nine cards in two columns leave one on its own; it takes the full width rather than sitting beside an empty cell. */ .uc:nth-child(9):last-child { grid-column: 1 / -1; } } @media (min-width: 1001px) { .uc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Nine cards fill 3 rows of 3 exactly (2026-09-14, up from six). */ .uc:nth-child(9):last-child { grid-column: auto; } } .uc { background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 24px 22px 26px; display: grid; gap: 11px; align-content: start; transition: background 0.4s ease, transform 0.55s var(--ease-spring); } .uc { border-top: 2px solid transparent; } .uc:hover { background: rgba(255, 255, 255, 0.98); transform: translateY(-3px); } /* One accent for every card. The tags used to carry a colour per department (blue sales, green finance, black service, grey ops), which read as six cards in four colours rather than one set (Brent, 2026-09-14). The department modifiers stay in the markup as labels only. */ .uc:hover { border-top-color: var(--ultramarine); } .uc__tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.55rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--graphite); } .uc__tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ultramarine); } .uc p { color: var(--graphite); font-size: 0.93rem; line-height: 1.55; } /* The other six, as a compact list: named, one clause each. */ .uc-more { position: relative; margin-top: 28px; display: grid; gap: 14px; } .uc-more__label { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--graphite); } .uc-more__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 32px; border-top: 1px solid var(--rule); } @media (min-width: 761px) { .uc-more__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .uc-more__list li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 0.93rem; line-height: 1.5; color: var(--graphite); } .uc-more__list strong { color: var(--ink); font-weight: 600; } /* -------------------------------------------------------------------------- 10. About -------------------------------------------------------------------------- */ .about-grid { display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; } @media (min-width: 941px) { .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .about-body { display: grid; gap: 24px; } .about-body p { color: var(--graphite); font-size: 1rem; line-height: 1.62; } .about-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule); } .about-list li { padding: 14px 0 14px 28px; border-bottom: 1px solid var(--rule); position: relative; color: var(--ink); font-size: 0.96rem; } .about-list li::before { content: ""; position: absolute; left: 2px; top: 23px; width: 9px; height: 1px; background: var(--ultramarine); } .pledge { padding: clamp(26px, 3vw, 36px); display: grid; gap: 16px; } .pledge p { color: var(--graphite); font-size: 0.96rem; line-height: 1.58; } .pledge ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .pledge li { position: relative; padding-left: 22px; color: var(--graphite); font-size: 0.93rem; line-height: 1.5; } .pledge li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 1px; background: var(--mist); } /* Founder strip — real person, real accountability. */ .founder-strip { margin-top: clamp(28px, 3.5vw, 44px); padding: clamp(24px, 3vw, 36px); display: grid; gap: clamp(22px, 3vw, 36px); align-items: center; } @media (min-width: 761px) { .founder-strip { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); } } .founder-strip__photo { width: 100%; max-width: 220px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; border: 1px solid var(--rule); filter: grayscale(0.15) contrast(1.02); } .founder-strip__body { display: grid; gap: 14px; justify-items: start; } .founder-strip__body p { color: var(--graphite); font-size: 0.98rem; line-height: 1.6; max-width: 60ch; } .founder-strip__points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; border-top: 1px solid var(--rule); width: 100%; } .founder-strip__points li { position: relative; padding: 11px 0 11px 26px; border-bottom: 1px solid var(--rule); color: var(--graphite); font-size: 0.93rem; line-height: 1.55; } .founder-strip__points li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 9px; height: 1px; background: var(--ultramarine); } /* Footer directory */ .line-page .footer-dirs { display: grid; gap: 32px; padding-bottom: 44px; } @media (min-width: 641px) { .line-page .footer-dirs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .footer-col { display: grid; gap: 11px; align-content: start; } .line-page .footer-col__title { font-family: var(--mono); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist); margin: 0 0 4px; } .footer-col a { color: rgba(237, 239, 243, 0.82); font-size: 0.93rem; text-decoration: none; justify-self: start; transition: color 0.25s ease; } .footer-col a:hover { color: var(--porcelain); text-decoration: underline; text-underline-offset: 3px; } .footer-col__note { margin: 4px 0 0; color: rgba(237, 239, 243, 0.55); font-size: 0.86rem; line-height: 1.55; max-width: 34ch; } /* -------------------------------------------------------------------------- 10b. Dark chapter — proof and payoff on ink. Body flips via .in-dark (IntersectionObserver in line-ui.js); these rules style the sections themselves so they are correct regardless of the body transition. -------------------------------------------------------------------------- */ /* Self-sufficient ink ground: correct even if the body flip never runs. Kept translucent so the scene's porcelain cards still ghost through once body.in-dark extends the ink beyond the section edges. */ .chapter-dark { color: var(--porcelain); background: rgba(14, 17, 22, 0.9); /* Leaving the dark ground: come back solid at once, so the section is never clear on a page that is fading back to porcelain. */ transition: background 0s; } /* Once the page ground is ink the section can go clear so the scene ghosts through — but only AFTER the page's 0.8s fade has finished. Dropping it the moment the fade began left the section lit by a half-faded page for most of a second: a grey flash around every dark chapter's heading, on every scroll into one (2026-09-14). */ .line-page.in-dark .chapter-dark { background: rgba(14, 17, 22, 0); transition: background 0.4s ease 0.8s; } .chapter-dark h2, .chapter-dark h3 { color: var(--porcelain); } .chapter-dark .lede { color: var(--mist); } .chapter-dark .eyebrow { color: var(--mist); } .chapter-dark .eyebrow::before { background: var(--accent-on-dark); } /* Text scrims flip to ink inside the dark chapter. */ .chapter-dark .band__head::before, .chapter-dark .client-list::before { background: radial-gradient( 96% 78% at 42% 50%, rgba(14, 17, 22, 0.94) 0%, rgba(14, 17, 22, 0.86) 55%, rgba(14, 17, 22, 0.6) 76%, rgba(14, 17, 22, 0) 96% ); } .chapter-dark .band__foot a, .chapter-dark .prose a { color: var(--accent-on-dark); } /* Outline buttons and small print on ink. The calculator's "Send me this estimate" was ink text in an ink-tinted outline on an ink ground — invisible at every width (2026-09-14). */ .chapter-dark .secondary-button { color: var(--porcelain); border-color: rgba(237, 239, 243, 0.38); } .chapter-dark .secondary-button:hover, .chapter-dark .secondary-button:focus-visible { color: var(--ink); background: var(--porcelain); border-color: var(--porcelain); } .chapter-dark .calc-send__note { color: var(--mist); } .chapter-dark:first-of-type { border-top: 0; } /* -------------------------------------------------------------------------- 10c. FAQ — native

, so it works with zero JS. -------------------------------------------------------------------------- */ .faq-list { border-top: 1px solid var(--rule); max-width: 860px; position: relative; } .faq { border-bottom: 1px solid var(--rule); } .faq summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 22px 0; font-family: var(--display); font-weight: 700; font-stretch: 112%; font-size: clamp(1.02rem, 1.6vw, 1.2rem); letter-spacing: -0.014em; line-height: 1.3; color: var(--ink); transition: color 0.25s ease; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; flex: 0 0 auto; font-family: var(--mono); font-size: 1.1rem; font-weight: 400; color: var(--ultramarine); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: center; line-height: 1; } .faq[open] summary::after { transform: rotate(45deg); } .faq summary:hover { color: var(--ultramarine); } .faq summary:focus-visible { outline: 2px solid var(--ultramarine); outline-offset: 3px; border-radius: 3px; } .faq p { margin: 0; padding: 0 0 24px; max-width: 68ch; color: var(--graphite); font-size: 0.98rem; line-height: 1.62; } /* -------------------------------------------------------------------------- 10d. Clients — named, linked, typography-led. No invented logos. -------------------------------------------------------------------------- */ .client-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(237, 239, 243, 0.16); position: relative; } .client { display: grid; gap: 10px; padding: clamp(26px, 3.2vw, 40px) 0; border-bottom: 1px solid rgba(237, 239, 243, 0.16); align-items: start; } @media (min-width: 861px) { .client { grid-template-columns: minmax(0, 300px) minmax(0, 1fr) auto; gap: 32px; align-items: center; } } .client__id { display: grid; gap: 6px; } /* Scoped: `.line-page h3` sets 1.16rem and would otherwise win on specificity. */ .line-page .client__name { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: clamp(1.7rem, 3.1vw, 2.5rem); letter-spacing: -0.022em; line-height: 1; color: var(--porcelain); margin: 0; } .client__sector { font-family: var(--mono); font-size: 0.55rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist); } .client__what { margin: 0; color: rgba(237, 239, 243, 0.72); font-size: 0.96rem; line-height: 1.6; max-width: 56ch; } /* Scoped to .line-page: the base `.line-page a { color: inherit }` rule is more specific than a bare class and would swallow the accent. */ .line-page .client__link { padding: 4px 0; margin: -4px 0; font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-on-dark); text-decoration: none; justify-self: start; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .line-page .client__link::after { content: "\2197"; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .line-page .client__link:hover { color: var(--porcelain); } .line-page .client__link:hover::after { transform: translate(3px, -3px); } /* Featured client: carries the engagement outcomes inline, so proof lives with the client rather than in a separate band. */ @media (min-width: 861px) { .client--featured { grid-template-areas: "id what link" "outcomes outcomes outcomes"; row-gap: 26px; } .client--featured .client__id { grid-area: id; } .client--featured .client__what { grid-area: what; } .client--featured .client__link { grid-area: link; } .client--featured .client__outcomes { grid-area: outcomes; } } .client__outcomes { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 1px; background: rgba(237, 239, 243, 0.16); border: 1px solid rgba(237, 239, 243, 0.16); } @media (min-width: 761px) { .client__outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .client__outcomes li { background: rgba(20, 25, 33, 0.86); padding: 20px 22px; display: grid; gap: 8px; align-content: start; } .client__outcome-value { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.05; color: var(--jade-on-dark); } .client__outcome-label { color: var(--mist); font-size: 0.9rem; line-height: 1.5; } /* -------------------------------------------------------------------------- 11. Insights — rendered by scripts/blog-section.js -------------------------------------------------------------------------- */ .line-page .blog-section { background: transparent; color: var(--ink); padding: clamp(84px, 11vw, 148px) 0; } .line-page .blog-section .container { display: block; } .line-page .blog-grid { display: grid; /* auto-fill (not -fit) so a lone article keeps card proportions instead of stretching across the full row. */ grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .line-page .blog-card { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 0; border-radius: 0; padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; gap: 14px; min-height: 240px; transition: background 0.4s ease; } .line-page .blog-card:hover { background: rgba(255, 255, 255, 0.95); } .line-page .blog-card time { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--graphite); } .line-page .blog-card h3 { font-size: 1.22rem; color: var(--ink); } .line-page .blog-card p { color: var(--graphite); font-size: 0.94rem; line-height: 1.55; } .line-page .blog-card a { margin-top: auto; font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ultramarine); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .line-page .blog-card a::after { content: "→"; transition: transform 0.3s ease; } .line-page .blog-card a:hover { color: var(--ink); text-decoration: none; } .line-page .blog-card a:hover::after { transform: translateX(4px); } .line-page .blog-empty { border: 1px solid var(--rule); border-radius: 4px; background: rgba(255, 255, 255, 0.6); color: var(--graphite); padding: 44px 24px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; line-height: 1.8; } /* Dark-chapter adjustments for the pieces that sit directly on ink. */ .chapter-dark + .chapter-dark { border-top-color: rgba(237, 239, 243, 0.12); } .line-page .chapter-dark .blog-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: none; -webkit-backdrop-filter: none; } .line-page .chapter-dark .blog-empty { background: rgba(20, 25, 33, 0.92); border-color: rgba(237, 239, 243, 0.2); color: rgba(237, 239, 243, 0.88); } .line-page .chapter-dark#savings #savings-calculator { background: rgba(255, 255, 255, 0.95); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: rgba(237, 239, 243, 0.2); } .line-page .chapter-dark .calculator-note { background: rgba(14, 17, 22, 0.04); } .line-page .chapter-dark .calculator-results { border-color: rgba(237, 239, 243, 0.22); } /* -------------------------------------------------------------------------- 12. Savings calculator — Act 04, Grid -------------------------------------------------------------------------- */ .calc-grid { display: grid; gap: clamp(28px, 3.5vw, 48px); align-items: start; } @media (min-width: 941px) { .calc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .line-page #savings-calculator { display: grid; gap: 26px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); box-shadow: none; } .line-page .form-grid { display: grid; grid-template-columns: 1fr; gap: 22px; } @media (min-width: 561px) { .line-page .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .line-page .form-field { display: grid; gap: 9px; /* Rows keep their natural height. Without this, a field whose neighbour has hint text below it gets its input box stretched to match, so boxes in the same row end up different heights and vertically offset. */ align-content: start; min-width: 0; } .line-page .calculator-form label { font-family: var(--mono); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); line-height: 1.6; } /* Two-column rows: reserve two label lines so a wrapping label doesn't push its input box lower than the neighbour's. Text bottom-anchors to stay visually attached to its box. */ @media (min-width: 561px) { .line-page .calculator-form label { min-height: 3.2em; display: flex; align-items: flex-end; } } .line-page .input-wrapper { border: 1px solid var(--rule-input); border-radius: 3px; background: rgba(255, 255, 255, 0.9); padding: 12px 14px; box-shadow: none; transition: border-color 0.25s ease; /* A grid item defaults to min-width:auto, which here resolves to the number input's intrinsic width (~20 characters) — wider than the column, so the box overflowed into the next one. The inner input already has min-width:0. */ min-width: 0; } .line-page .input-wrapper:focus-within { border-color: var(--ultramarine); box-shadow: none; } .line-page .input-wrapper input { font-family: var(--mono); /* 16px minimum: anything smaller makes iOS Safari zoom on focus. */ font-size: 1rem; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; /* The input itself carries the padding so the full 44px is a tap target, rather than dead wrapper padding that doesn't focus the field. */ padding: 12px 0; min-height: 44px; align-self: stretch; } .line-page .input-wrapper { padding: 4px 14px; min-height: 52px; } .line-page .input-prefix, .line-page .input-suffix { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); } .line-page .field-hint { font-size: 0.82rem; color: var(--graphite); line-height: 1.5; } .line-page .calculator-note { margin: 0; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 3px; background: rgba(255, 255, 255, 0.5); font-size: 0.83rem; color: var(--graphite); line-height: 1.55; } /* Results */ .line-page .calculator-results { border-radius: 4px; padding: clamp(26px, 3.2vw, 38px); background: var(--panel-ink); border: 1px solid var(--panel-ink); color: var(--porcelain); box-shadow: none; overflow: visible; } .line-page .calculator-results::after { display: none; } .line-page .results-header { margin-bottom: 26px; gap: 8px; } .line-page .results-label { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); } .line-page .results-subtext { font-size: 0.9rem; color: rgba(237, 239, 243, 0.66); line-height: 1.5; } .line-page .results-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 1px; background: rgba(237, 239, 243, 0.16); border: 1px solid rgba(237, 239, 243, 0.16); } .line-page .result-card { background: var(--panel-ink); border: 0; border-radius: 0; padding: 18px 16px; backdrop-filter: none; } .line-page .result-label { font-family: var(--mono); font-size: 0.53rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); line-height: 1.5; } .line-page .result-value { font-family: var(--mono); font-weight: 600; font-size: clamp(1.25rem, 2.4vw, 1.55rem); letter-spacing: -0.02em; margin: 10px 0 0; color: var(--porcelain); } .line-page .results-summary { margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(237, 239, 243, 0.16); } .line-page .results-money-label { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); } .line-page .results-money-value { font-family: var(--mono); font-weight: 600; font-size: clamp(1.9rem, 4.4vw, 2.7rem); letter-spacing: -0.03em; color: #35d69f; margin: 10px 0 12px; transform-origin: left center; } .line-page .results-money-value.is-pop { animation: money-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes money-pop { 0% { transform: scale(1); } 35% { transform: scale(1.035); } 100% { transform: scale(1); } } /* Capacity bar — the payoff made visible: a year of weeks, lit as returned. */ .capacity-viz { margin: 18px 0 14px; display: grid; gap: 8px; } .capacity-viz__label { margin: 0; font-size: 0.92rem; color: rgba(237, 239, 243, 0.78); } .capacity-viz__label strong { font-family: var(--mono); font-weight: 600; color: var(--jade-on-dark); } .capacity-viz__bar { display: flex; gap: 2px; height: 26px; } .capacity-tick { flex: 1 1 0; min-width: 0; background: rgba(237, 239, 243, 0.13); border-radius: 1px; transition: background 0.35s ease, transform 0.35s ease; } .capacity-tick.is-on { background: var(--jade-on-dark); transform: scaleY(1.12); } .capacity-viz__scale { margin: 0; font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); } .line-page .results-footnote { font-size: 0.88rem; color: rgba(237, 239, 243, 0.66); line-height: 1.55; } .line-page .calculator-cta { margin-top: 28px; padding: 24px; border-radius: 3px; background: rgba(237, 239, 243, 0.06); border: 1px solid rgba(237, 239, 243, 0.16); gap: 14px; } .line-page .calculator-cta h3 { color: var(--porcelain); font-size: 1.08rem; } .line-page .calculator-cta p { color: rgba(237, 239, 243, 0.72); font-size: 0.92rem; line-height: 1.55; } .line-page .calculator-cta .primary-button { background: var(--porcelain); color: var(--ink); border-color: var(--porcelain); } .line-page .calculator-cta .primary-button:hover { background: var(--ultramarine); border-color: var(--ultramarine); color: #fff; } .line-page .calculator-results a:focus-visible, .line-page .calculator-results button:focus-visible { outline-color: #35d69f; } /* -------------------------------------------------------------------------- 13. Contact / HubSpot -------------------------------------------------------------------------- */ .contact-grid { display: grid; gap: clamp(32px, 4vw, 60px); align-items: start; } @media (min-width: 941px) { .contact-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } } .line-page .contact-form-wrapper { max-width: none; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: 4px; background: var(--panel-strong); backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); overflow: hidden; position: relative; box-shadow: 0 24px 60px rgba(14, 17, 22, 0.1); } /* Brand rule across the top edge — the line, terminating at the conversion. */ .line-page .contact-form-wrapper::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--ultramarine); } .contact-card__head { padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 36px) 0; display: grid; gap: 12px; } .contact-card__lead { margin: 0; color: var(--graphite); font-size: 0.95rem; line-height: 1.6; max-width: 44ch; } .line-page .contact-form { padding: clamp(20px, 2.6vw, 28px) clamp(24px, 3vw, 36px) clamp(24px, 3vw, 34px); margin-top: clamp(20px, 2.6vw, 28px); border-top: 1px solid var(--rule); } .contact-form { display: grid; gap: 20px; } .contact-form__grid { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 561px) { .contact-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .line-page .contact-form label { font-family: var(--mono); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); line-height: 1.6; } .line-page .contact-form label span { color: var(--ultramarine); } .line-page .contact-form textarea { font-family: var(--body); font-size: 1rem; color: var(--ink); background: rgba(255, 255, 255, 0.9); border: 1px solid var(--rule-input); border-radius: 3px; padding: 12px 14px; resize: vertical; min-height: 108px; width: 100%; transition: border-color 0.25s ease; } .line-page .contact-form textarea::placeholder { color: var(--graphite); } .line-page .contact-form textarea:focus { outline: none; border-color: var(--ultramarine); box-shadow: 0 0 0 3px var(--ultramarine-soft); } .line-page .contact-form .input-wrapper:focus-within { box-shadow: 0 0 0 3px var(--ultramarine-soft); } .line-page .contact-form .input-wrapper, .line-page .contact-form textarea { background: #fff; } .line-page .contact-form input[aria-invalid="true"], .line-page .contact-form textarea[aria-invalid="true"] { border-color: #b4231f; } .line-page .input-wrapper:has(input[aria-invalid="true"]) { border-color: #b4231f; } .cf-error:empty { display: none; } .cf-error { margin: 0; font-size: 0.82rem; line-height: 1.45; color: #b4231f; } .line-page .cf-submit { width: 100%; justify-self: stretch; border: 1px solid var(--ultramarine); cursor: pointer; padding: 17px 26px; margin-top: 4px; } .line-page .cf-submit[disabled] { /* a muted solid, not opacity: graphite on porcelain keeps 4.5:1 while disabled */ opacity: 1; background: #dfe3ea; color: #59616e; box-shadow: none; cursor: progress; } .cf-status:empty { display: none; } .cf-status { margin: 0; font-size: 0.93rem; line-height: 1.55; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.6); color: var(--graphite); } .cf-status.is-success { border-color: rgba(10, 110, 78, 0.4); background: rgba(10, 110, 78, 0.08); color: var(--jade); font-weight: 600; } .cf-status.is-error { border-color: rgba(180, 35, 31, 0.35); background: rgba(180, 35, 31, 0.06); color: #b4231f; } .cf-privacy { margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--graphite); } .cf-privacy a { color: var(--ultramarine); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .line-page .contact-form-fallback { padding: 0; border: 0; background: transparent; color: var(--graphite); font-size: 0.95rem; line-height: 1.6; } .line-page .contact-form-fallback a { color: var(--ultramarine); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .contact-points { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule); } .contact-points li { display: flex; gap: 16px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--rule); color: var(--graphite); font-size: 0.94rem; } /* No trailing rule — it would double up against the form panel below. */ .contact-points li:last-child { border-bottom: 0; } .contact-points strong { font-family: var(--mono); font-size: 0.55rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); flex: 0 0 92px; line-height: 1.6; } /* -------------------------------------------------------------------------- 14. Footer -------------------------------------------------------------------------- */ .line-page .footer { background: var(--ink); color: var(--porcelain); padding: clamp(72px, 9vw, 112px) 0 36px; border-top: 0; } .line-page .footer-grid { max-width: none; margin: 0 auto 56px; gap: 36px; align-items: end; position: relative; padding-top: 30px; } /* The line draws itself one last time above the closing statement. */ .line-page .footer-grid::before { content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 100%; background: var(--ultramarine); transform: scaleX(0); transform-origin: left center; transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; } .line-page .footer-grid.reveal.is-in::before { transform: scaleX(1); } .line-page.no-js .footer-grid::before { transform: scaleX(1); } @media (min-width: 861px) { .line-page .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); } } .line-page .footer-grid h2 { color: var(--porcelain); font-size: clamp(2.2rem, 4.4vw, 3.6rem); } .line-page .footer-grid p { margin: 18px 0 0; color: rgba(237, 239, 243, 0.64); font-size: 0.97rem; line-height: 1.6; max-width: 54ch; } .line-page .footer-actions { justify-self: start; } @media (min-width: 861px) { .line-page .footer-actions { justify-self: end; } } .line-page .footer .primary-button { background: var(--porcelain); color: var(--ink); border-color: var(--porcelain); box-shadow: none; } .line-page .footer .primary-button:hover { background: var(--ultramarine); border-color: var(--ultramarine); color: #fff; } .line-page .footer-meta { padding-top: 26px; border-top: 1px solid rgba(237, 239, 243, 0.14); font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(237, 239, 243, 0.48); } .line-page .footer-meta .brand-name { color: var(--porcelain); } .line-page .footer a:focus-visible { outline-color: var(--porcelain); } /* -------------------------------------------------------------------------- 15. Chat widget accents (scripts/chat-widget.js builds its own DOM) -------------------------------------------------------------------------- */ .line-page .al-chat-toggle { border-radius: 3px; background: var(--ink); font-family: var(--mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; gap: 0; padding: 13px 14px; box-shadow: 0 16px 34px rgba(14, 17, 22, 0.24); } .line-page .al-chat-toggle:hover { background: var(--ultramarine); } /* Icon only until hovered or focused, so the pill never sits on copy. The button keeps its aria-label, so nothing is lost for assistive tech. */ .line-page .al-chat-toggle-label { font-size: inherit; letter-spacing: inherit; max-width: 0; margin-left: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width 0.4s var(--ease-spring), margin-left 0.4s var(--ease-spring), opacity 0.25s ease; } .line-page .al-chat-toggle:hover .al-chat-toggle-label, .line-page .al-chat-toggle:focus-visible .al-chat-toggle-label { max-width: 180px; margin-left: 8px; opacity: 1; } .line-page .al-chat-panel { border-radius: 6px; /* Closed panel must leave the accessibility tree and focus order, not just fade out — otherwise its fields are focusable inside aria-hidden. */ visibility: hidden; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; } .line-page .al-chat-panel.al-open { visibility: visible; transition: opacity 0.18s ease, transform 0.18s ease; } .line-page .al-chat-header { background: var(--ink); border-top-left-radius: 6px; border-top-right-radius: 6px; } .line-page .al-chat-header h2 { font-family: var(--display); font-stretch: 112%; font-size: 1.05rem; line-height: 1.2; margin: 0; color: #fff; } .line-page .al-chat-input textarea, .line-page .al-lead-field input, .line-page .al-lead-field textarea { border-color: var(--rule-input); } .line-page .al-chat-messages { background: var(--porcelain); } .line-page .al-chat-message.al-user { background: var(--ultramarine); } .line-page .al-send-button { border-radius: 3px; background: var(--ultramarine); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; } .line-page .al-chat-message.al-lead-form { background: rgba(37, 64, 245, 0.06); border-color: rgba(37, 64, 245, 0.2); } /* Quick-start chips: a one-tap way into the conversation. */ .line-page .al-quick-starts { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 92%; } .line-page .al-quick-start { font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: #fff; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 9px 14px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .line-page .al-quick-start:hover { background: var(--ultramarine); border-color: var(--ultramarine); color: #fff; transform: translateY(-1px); } .line-page .al-quick-start:focus-visible { outline: 2px solid var(--ultramarine); outline-offset: 2px; } .line-page .al-lead-privacy { margin: 6px 0 0; font-size: 0.72rem; line-height: 1.5; color: var(--graphite); } .line-page .al-lead-privacy a { color: var(--ultramarine); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* -------------------------------------------------------------------------- 15b. Subpages — legacy classes from styles.css re-voiced in The Line. Scoped to .line-page so only ported pages change. -------------------------------------------------------------------------- */ .line-page .pill, .line-page .pill-solid, .line-page .pill-outline { border-radius: 2px; background: var(--ink); color: var(--porcelain); border: 0; box-shadow: none; font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; padding: 8px 14px; } .line-page .pill-outline { background: transparent; color: var(--graphite); border: 1px solid var(--rule-strong); } /* Blog article page */ .line-page.article-page { background: var(--porcelain); color: var(--ink); } .line-page .article-page-header { background: rgba(237, 239, 243, 0.72); border-bottom: 1px solid var(--rule); } .line-page .article-back-link { font-family: var(--mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ultramarine); white-space: nowrap; } /* Article and policy pages have no menu button, so on a phone the brand stays on the left where it is on every other page (the shared phone rule moves it right to sit beside the homepage's hamburger), and the back link collapses to "Back" so the two fit one row (2026-09-14). */ @media (max-width: 768px) { .line-page .article-page-header .brand { order: 0; } } @media (max-width: 520px) { .line-page .article-back-link__long { display: none; } } .line-page .article-hero { background: transparent; padding: clamp(64px, 8vw, 96px) 0 clamp(28px, 4vw, 44px); } .line-page .article-hero h1 { color: var(--ink); } .line-page .article-summary { color: var(--graphite); font-size: clamp(1.03rem, 1.5vw, 1.18rem); line-height: 1.6; } .line-page .article-meta { color: var(--graphite); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; } .line-page .article-visual { max-width: 900px; margin: 0 auto clamp(32px, 4vw, 48px); } .line-page .article-visual img { display: block; width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--rule); } .line-page .article-body { color: var(--ink); font-size: 1.02rem; } .line-page .article-body p { color: #2a303a; } .line-page .article-body h2 { color: var(--ink); text-align: left; } .line-page .article-callout { background: var(--panel-strong); border: 1px solid var(--rule); border-radius: 4px; } .line-page .article-callout ul { color: var(--graphite); } .line-page .article-highlight { color: var(--ultramarine); font-weight: 600; } /* Posts: one pull quote and one figure each. */ .line-page .article-body .pull { margin: 8px 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--ultramarine); font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); } .line-page .article-body .pull p { margin: 0; color: var(--ink); } .line-page .article-body .fig { margin: 12px 0 4px; padding: clamp(20px, 3vw, 28px); background: var(--panel-strong); border: 1px solid var(--rule); border-radius: 4px; display: grid; gap: 16px; } .line-page .article-body .fig figcaption { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); line-height: 1.7; } .fig-bars { display: grid; gap: 10px; } .fig-bar { display: grid; grid-template-columns: 92px minmax(0, 1fr) 76px; align-items: center; gap: 12px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); } .fig-bar__track { height: 14px; background: rgba(14, 17, 22, 0.06); border-radius: 2px; overflow: hidden; } .fig-bar__fill { display: block; height: 100%; background: var(--ink); } .fig-bar--after .fig-bar__fill { background: var(--ultramarine); } .fig-bar__fill--100 { width: 100%; } .fig-bar__fill--40 { width: 40%; } .fig-bar__fill--0 { width: 0; } .fig-bar__value { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; } .fig-sum { display: grid; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--graphite); } .fig-sum__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); } .fig-sum__row strong { font-family: var(--display); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; } .fig-sum__row--total strong { font-size: 1.5rem; color: var(--ultramarine); } .fig-flow { display: grid; gap: 16px; } @media (min-width: 641px) { .fig-flow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } } .fig-flow__col { display: grid; gap: 10px; align-content: start; } .line-page .article-body .fig-flow__head { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--graphite); } .line-page .article-body .fig-flow__col--after .fig-flow__head { color: var(--ultramarine); } .fig-flow ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: flow; font-size: 0.9rem; line-height: 1.45; color: var(--ink); } .fig-flow li { position: relative; padding-left: 26px; counter-increment: flow; } .fig-flow li::before { content: counter(flow, decimal-leading-zero); position: absolute; left: 0; top: 0.25em; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--graphite); } /* Contextual bridge from a story back into the service. */ .line-page .article-aside { margin-top: clamp(28px, 4vw, 44px); padding: clamp(24px, 3vw, 34px); border: 1px solid var(--rule); border-radius: 4px; background: var(--panel-strong); display: grid; gap: 14px; } .line-page .article-aside h3 { margin: 0; } .line-page .article-aside p { margin: 0; color: var(--graphite); font-size: 0.97rem; line-height: 1.6; } .line-page .article-aside__links { list-style: none; margin: 4px 0 0; padding: 0; display: grid; border-top: 1px solid var(--rule); } .line-page .article-aside__links li { border-bottom: 1px solid var(--rule); } .line-page .article-aside__links a { display: block; padding: 12px 0; color: var(--ultramarine); font-weight: 600; font-size: 0.94rem; text-decoration: none; } .line-page .article-aside__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .line-page .article-footer { background: var(--ink); color: var(--porcelain); } .line-page .article-footer .primary-button { background: var(--porcelain); color: var(--ink); border-color: var(--porcelain); } .line-page .article-footer .primary-button:hover { background: var(--ultramarine); border-color: var(--ultramarine); color: #fff; } /* -------------------------------------------------------------------------- 16. Scroll reveal -------------------------------------------------------------------------- */ .line-page .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .line-page .reveal.is-in { opacity: 1; transform: none; } /* Keyboard focus inside a section that has not scrolled into view yet must never land on invisible content. */ .line-page .reveal:focus-within, .line-page .reveal:focus-within .step, .line-page .reveal:focus-within .uc, .line-page .reveal:focus-within .flow-step, .line-page .reveal:focus-within .client__outcomes li { opacity: 1; transform: none; } /* Grid children cascade in after their parent reveals — each card lands a beat after the last, so sections assemble rather than appear. */ .line-page .reveal .step, .line-page .reveal .uc, .line-page .reveal .flow-step, .line-page .reveal .client__outcomes li { opacity: 0; transform: translateY(14px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .line-page .reveal.is-in .step, .line-page .reveal.is-in .uc, .line-page .reveal.is-in .flow-step, .line-page .reveal.is-in .client__outcomes li { opacity: 1; transform: none; } .line-page .reveal.is-in > :nth-child(2) { transition-delay: 55ms; } .line-page .reveal.is-in > :nth-child(3) { transition-delay: 110ms; } .line-page .reveal.is-in > :nth-child(4) { transition-delay: 165ms; } .line-page .reveal.is-in > :nth-child(5) { transition-delay: 220ms; } .line-page .reveal.is-in > :nth-child(6) { transition-delay: 275ms; } .line-page .reveal.is-in > :nth-child(7) { transition-delay: 330ms; } .line-page .reveal.is-in > :nth-child(8) { transition-delay: 385ms; } .line-page .reveal.is-in > :nth-child(9) { transition-delay: 440ms; } .line-page .reveal.is-in > :nth-child(10) { transition-delay: 495ms; } /* Browsers with scroll-driven animations reveal blocks as they enter the viewport with no script and no observer — the block's progress is tied to its own position, so it never pops. The observer path below still runs (is-in is harmless here); older browsers keep it as the fallback. */ @supports (animation-timeline: view()) { .line-page .reveal { opacity: 1; transform: none; transition: none; animation: reveal-in linear both; animation-timeline: view(); animation-range: entry 4% entry 32%; } @keyframes reveal-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .line-page .reveal { animation: none; } } } /* ========================================================================== Sticky booking bar (phones only). Slides in once the hero has scrolled away — scroll-driven where supported, simply present elsewhere. ========================================================================== */ .sticky-cta { display: none; } @media (max-width: 768px) { .sticky-cta { display: block; position: fixed; left: 12px; right: calc(12px + 62px + 10px); bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px)); z-index: 998; } .sticky-cta .primary-button { width: 100%; padding: 14px 16px; box-shadow: 0 16px 34px rgba(14, 17, 22, 0.24); } @supports (animation-timeline: scroll()) { .sticky-cta { transform: translateY(140%); animation: sticky-cta-in linear both; animation-timeline: scroll(root); animation-range: 0 60vh; } @keyframes sticky-cta-in { 0% { transform: translateY(140%); visibility: hidden; } 80% { transform: translateY(140%); visibility: hidden; } 100% { transform: none; visibility: visible; } } } /* the chat launcher sits beside the bar, never under it, and arrives with it once the hero has scrolled away (unless a chat is open) */ .line-page .al-chat-widget { right: 12px; bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px)); } .line-page .al-chat-toggle:hover .al-chat-toggle-label { max-width: 0; margin-left: 0; opacity: 0; } @supports (animation-timeline: scroll()) { .line-page .al-chat-widget:not(:has(.al-open)) { transform: translateY(140%); animation: sticky-cta-in linear both; animation-timeline: scroll(root); animation-range: 0 60vh; } } } .calc-send { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .calc-send__note { font-size: 0.78rem; color: var(--graphite); max-width: 34ch; } /* If JS never runs, nothing stays hidden. */ .line-page.no-js .reveal, .line-page.no-js .reveal .step, .line-page.no-js .reveal .uc, .line-page.no-js .reveal .flow-step, .line-page.no-js .reveal .client__outcomes li { opacity: 1; transform: none; } .line-page.no-js .reveal .display-xl { clip-path: none; } @media print { .line-page .reveal { opacity: 1; transform: none; } .line-canvas, .line-veil, .act-rail { display: none; } } /* -------------------------------------------------------------------------- 17. Small screens -------------------------------------------------------------------------- */ @media (max-width: 600px) { .line-page { font-size: 16px; } .line-page .container { width: min(1180px, 92vw); } .line-hero__actions .primary-button, .line-hero__actions .secondary-button, .line-page .cta-actions .primary-button { width: 100%; } /* Stacked: the copy block and the form read as two separate cards, so give them real air between them. */ .contact-grid { gap: 44px; } .contact-points li { flex-direction: column; gap: 2px; padding: 12px 0; } /* The label's 92px flex-basis is a WIDTH in the row layout above, but it becomes a HEIGHT once the item stacks — which padded each one-word label out to 92px tall. Reset the basis when stacked. */ .contact-points strong { flex: 0 0 auto; } } @media (max-width: 380px) { /* Narrowest phones: ease the display type so headlines keep 3-4 words a line instead of one, and give the mono labels room. */ .line-page h1 { font-size: 2.05rem; } .line-page h2, .line-page h2.display-xl { font-size: 1.85rem; } .line-page .primary-button, .line-page .secondary-button { font-size: 0.6rem; letter-spacing: 0.08em; padding: 15px 18px; } .eyebrow { font-size: 0.56rem; letter-spacing: 0.16em; } } /* Short landscape phones: trim vertical padding so the hero still shows a CTA. */ @media (max-height: 520px) and (orientation: landscape) { .line-hero { padding: clamp(40px, 6vh, 64px) 0 clamp(28px, 4vh, 40px); } .band { padding: clamp(48px, 9vh, 96px) 0; } .scroll-hint { margin-top: clamp(24px, 4vh, 40px); } } /* -------------------------------------------------------------------------- 18. Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .line-page *, .line-page *::before, .line-page *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .line-page .reveal, .line-page .reveal .step, .line-page .reveal .uc, .line-page .reveal .flow-step, .line-page .reveal .client__outcomes li { opacity: 1; transform: none; transition: none; } .line-page .reveal .display-xl { clip-path: none; transition: none; } .line-page .footer-grid::before { transform: scaleX(1); transition: none; } .scroll-hint__track::after { animation: none; transform: none; width: 100%; } .line-canvas { transition: none; } } /* "Pause motion" pressed: the same stillness the OS preference produces, switched on from the hero button and remembered per browser. */ html.motion-paused .line-page *, html.motion-paused .line-page *::before, html.motion-paused .line-page *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html.motion-paused .line-page .reveal, html.motion-paused .line-page .reveal .step, html.motion-paused .line-page .reveal .uc, html.motion-paused .line-page .reveal .flow-step, html.motion-paused .line-page .reveal .client__outcomes li { opacity: 1; transform: none; transition: none; } html.motion-paused .line-page .reveal .display-xl { clip-path: none; transition: none; } html.motion-paused .line-page .footer-grid::before { transform: scaleX(1); transition: none; } html.motion-paused .scroll-hint__track::after { animation: none; transform: none; width: 100%; } html.motion-paused .line-canvas { transition: none; } /* M2 mark placements: footer meta, hero metrics label, blog CTA footer. */ .line-page .footer-brand { display: inline-flex; align-items: center; gap: 10px; } .line-page .line-metrics__label { display: flex; align-items: center; gap: 8px; } .line-page .article-footer svg { display: block; margin: 0 auto 14px; } /* Web use-case tag: no longer needs its own colour — every tag shares the one accent (2026-09-14). */ /* AI enablement subhead in the About body. Scoped because `.line-page h3` sets 1.16rem and would otherwise win on specificity. `.about-body` is a grid with a 24px gap, so the heading is pulled toward its own paragraph rather than floating equidistant between blocks. */ .line-page .about-subhead { font-family: var(--display); font-size: 1.06rem; font-weight: 700; letter-spacing: -0.012em; line-height: 1.3; color: var(--ink); margin: 0 0 -13px; } /* A non-featured client card is an implicit three-column grid (id | what | link), so a second link would spill onto a new row under the client name. Wrapping the pair keeps `.client` at three children; `.client--featured` is unaffected because it places its own children by named grid areas. */ .client__links { display: grid; gap: 10px; justify-items: start; } .cf-optional { font-size: 0.78em; font-weight: 400; opacity: 0.55; } /* Phones: the WebGL scene is off, so the hero carries a quiet ambient loop (papers gathering into the line) behind the copy — poster first, the video attached after load. Desktop keeps the live scene instead. */ .line-hero__loop { display: none; } @media (max-width: 759px) { .line-hero__loop { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0.42; z-index: 0; pointer-events: none; } .line-hero > .container { position: relative; z-index: 1; } } /* Direct booking beside the contact form and the footer CTA. */ .contact-book { margin-top: 18px; display: grid; gap: 6px; font-size: 0.93rem; color: var(--graphite); justify-items: start; } .footer-book { margin-left: 18px; color: var(--porcelain); border-bottom-color: rgba(237, 239, 243, 0.4); } .footer-book:hover { color: var(--jade-on-dark); border-bottom-color: var(--jade-on-dark); }