/* Fonts are NOT imported here. @import is the slowest way to load a webfont: the browser has to download and parse this stylesheet before it even discovers the font request, so the two are serialised. They are ed from each page's instead, behind preconnect, and emitted by the build — see FONT_LINKS in scripts/build-static.mjs. The Thai families (Bai Jamjuree, IBM Plex Sans Thai Looped) are deliberately NOT requested while Thai is hidden: 4 files / ~38KB on every page load for a language that never renders. They stay in the --font-* stacks below so nothing breaks, and must be added back to FONT_LINKS at the same time as THAI_ENABLED is flipped. */ :root { --font-display: 'itc-avant-garde-gothic-pro', 'Jost', 'Bai Jamjuree', 'Helvetica Neue', Arial, sans-serif; --font-body: 'scandia-web', 'Hanken Grotesk', 'proxima-nova-thai-looped', 'IBM Plex Sans Thai Looped', system-ui, sans-serif; --font-mono: 'nexa', 'Montserrat', 'IBM Plex Sans Thai Looped', system-ui, sans-serif; --font-label: var(--font-mono); /* Voltage keeps its Fellow-2026 role — NOTICE: highlight washes and soft emphasis only. It is no longer the CTA fill; see the ACT block further down. */ --accent-voltage: #efd46c; --accent-voltage-hover: #eccc50; --accent-voltage-ink: #17150f; /* --accent-blue was #93cedf, the one cool colour on the site. Fellow 2026 has no cool colour: its job (links, focus rings, eyebrow — NAVIGATE) belongs to the support ramp, which swaps per palette AND per mode. Retargeted here rather than at the ~67 call sites, so the aliases keep working and light mode picks up the deepened pair automatically. */ --accent-blue: var(--accent-support); --accent-blue-link: var(--accent-support-link); --accent-blue-on: var(--accent-support-on); --canvas: #0f0e0b; --canvas-soft: #15130f; --surface: #1a1713; --surface-elevated: #232019; --surface-inverted: #f4f1e8; --text-primary: #f2efe6; --text-body: #b9b4a7; --text-muted: #847f71; --inverted-text: #1b1a16; --hairline: rgba(244, 241, 232, .10); --hairline-strong: rgba(244, 241, 232, .20); --glass-bg: rgba(26, 23, 19, .78); --glass-border: rgba(244, 241, 232, .15); --glass-highlight: rgba(255, 255, 255, .10); --shadow-elev: 0 14px 44px rgba(0, 0, 0, .28); --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-xxl: 24px; --r-pill: 999px; } [data-mode='light'] { --canvas: #f6f4ee; --canvas-soft: #efece3; --surface: #fcfbf6; --surface-elevated: #f2efe7; --surface-inverted: #17150f; --text-primary: #1b1a16; --text-body: #4c4a42; --text-muted: #837f72; --inverted-text: #f2efe6; --hairline: #e5e0d4; --hairline-strong: #d8d2c4; /* No light-mode --accent-blue-link override: it now aliases --accent-support-link, which tokens.css already resolves per mode (clay deepens to #8a4a35, 6.14:1 on paper). */ --glass-bg: rgba(246, 244, 238, .82); --glass-border: rgba(27, 26, 22, .13); --glass-highlight: rgba(255, 255, 255, .72); --shadow-elev: 0 14px 44px rgba(49, 42, 26, .14); } html { scroll-behavior: smooth; background: var(--canvas); } body { overflow-x: hidden; background: var(--canvas); color: var(--text-primary); font-family: var(--font-body); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .25s ease, color .25s ease; } body, button, a { font-family: var(--font-body); } h1, h2, h3, .heading_hero, .heading_primary, .heading_secondary, .heading_small { font-family: var(--font-display); color: var(--text-primary); font-weight: 700; letter-spacing: -.03em; } p, .subheading, .rich-text, .paragraph_large { color: var(--text-body); font-family: var(--font-body) !important; } a { color: inherit; } /* Required companion to the width/height attributes the build adds (see addImageDimensions in build-static.mjs). Those attributes let the browser reserve the right box before decode, but they also become the used height unless CSS says otherwise — a 300x300 logo sized to width:125px would render 125x300. `height:auto` restores aspect-ratio sizing while keeping the reserved space. Deliberately low specificity so any rule that sets a real height still wins. */ img[width][height] { height: auto; } ::selection { background: var(--accent-blue); color: var(--accent-blue-on); } :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-blue) 70%, transparent); outline-offset: 3px; } /* Skip link — visually hidden until focused, then pinned top-left above the sticky nav. Not `display:none`: that would remove it from the tab order, which is the entire point. */ .skip-link { position: fixed; top: 0; left: 0; z-index: 200; transform: translateY(-120%); padding: 12px 18px; border-radius: 0 0 var(--r-md) 0; background: var(--accent-ember); color: var(--accent-ember-ink); font-weight: 700; text-decoration: none; transition: transform .16s ease; } .skip-link:focus { transform: translateY(0); } /* Navigation */ .nav { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--canvas) 86%, transparent) !important; border-bottom: 1px solid var(--hairline); backdrop-filter: blur(18px) saturate(1.25); } .nav_container { background: transparent !important; color: var(--text-primary) !important; } .nav_link, .nav_logo, .nav_mobile-menu-button { color: var(--text-primary) !important; } .nav_link { border-radius: var(--r-md); transition: background .18s ease, color .18s ease; } .nav_link:hover { background: var(--surface-elevated); } .nav_left, .nav_logo { align-items: center !important; } .nav_logo { height: 54px !important; } .nav_logo-icon { width: 154px !important; height: 54px !important; flex: none; display: flex !important; align-items: center; justify-content: flex-start; } .nav_logo .logofi { width: 100% !important; height: 100% !important; object-fit: contain; object-position: left center; filter: none !important; display: block; } .nav_logo .logo { display: none !important; } /* Shared surfaces */ .section, header.section, .section.is-accent-primary, .section.is-secondary { background: var(--canvas) !important; color: var(--text-primary) !important; } .section:nth-of-type(even) { background: var(--canvas-soft) !important; } .container { position: relative; z-index: 1; } .header.is-align-center { max-width: 820px; margin-left: auto; margin-right: auto; } .heading_hero { font-size: clamp(3.4rem, 6.2vw, 6.3rem); line-height: .98; letter-spacing: -.045em; } .heading_primary { font-size: clamp(2.5rem, 4.4vw, 4.5rem); line-height: 1.04; } .heading_secondary { line-height: 1.08; } .eyebrow { color: var(--accent-blue-link) !important; font-family: var(--font-label); text-transform: uppercase; letter-spacing: .11em; font-size: 11px; } /* Hero bloom. Was three hardcoded cool-blue rgba stops — the last cool colour on the site, and invisible to the token layer. Now the palette's glow ramp, so it swaps with data-palette and resolves per mode (tokens.css lifts the stops in light mode; see DESIGN.md § Glow). The hero follows the page mode, so it takes the plain --glow-* set, not -dim/-tint. */ header.section::before { content: ''; position: absolute; width: min(64vw, 780px); height: min(64vw, 780px); left: -18vw; top: 8%; pointer-events: none; z-index: 0; opacity: var(--hero-glow-opacity); /* Grain sits above the hue, same construction as the aurora below. The blur(16px) that used to soften this is gone: `filter` would have smeared the grain flat, and the gradient's own transparent-at-70% falloff is soft enough without it. */ background-image: var(--glow-grain), radial-gradient(circle at 50% 50%, var(--glow-edge) 0, var(--glow-core) 28%, var(--glow-deep) 44%, transparent 70%); background-size: 160px 160px, 100% 100%; background-repeat: repeat, no-repeat; /* Confines the grain to where the hue actually is, so no noise squares off at the box edge. */ -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, #000 40%, transparent 72%); mask-image: radial-gradient(circle at 50% 50%, #000 0, #000 40%, transparent 72%); } /* Muted aurora rising off the hero's bottom edge: cool on the left, warm through the centre. It reaches the edge at full strength and is cut off there — the section's own `overflow: clip` plus the hairline below do the cutting, so the glow never spills into the next section. */ html { --hero-glow-opacity: .45; --aurora-blue: color-mix(in srgb, var(--accent-blue) 20%, transparent); --aurora-blue-soft: color-mix(in srgb, var(--accent-blue) 13%, transparent); --aurora-warm: color-mix(in srgb, var(--accent-voltage) 10%, transparent); --aurora-width: min(1680px, 130vw); --aurora-rx: 62%; --aurora-ry: clamp(360px, 58vh, 780px); /* Grain rides on top of the hue field and breaks up the banding a blur would otherwise have to hide. It is masked along with the glow, so it never touches flat canvas. */ --aurora-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.26'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); /* Hue varies horizontally only. Radial colour pools would each cast their own edge and read as blobs; here the silhouette comes purely from the mask. */ --aurora-hue: linear-gradient(to right, var(--aurora-blue) 0%, var(--aurora-blue-soft) 36%, var(--aurora-warm) 63%, var(--aurora-blue-soft) 100%); --aurora-arc-stops: #000 20%, rgba(0, 0, 0, .5) 56%, transparent 92%; } [data-mode='light'] { /* Paper sits at luminance .905 and the light tint stops sit just under it, so at dark-mode strength the left glow reads as a grubby smear rather than light. Cut to ~40%. */ --hero-glow-opacity: .18; --aurora-blue: color-mix(in srgb, var(--accent-blue) 30%, transparent); --aurora-blue-soft: color-mix(in srgb, var(--accent-blue) 20%, transparent); --aurora-warm: color-mix(in srgb, var(--accent-voltage) 24%, transparent); } /* Hairline horizon, laid over the glow's last row so it reads as a light rule everywhere rather than tracking the glow's brightness. See build-static.mjs for why it is an element. */ .hero-edge { position: absolute; inset: auto 0 0 0; height: 1px; background: var(--hairline); pointer-events: none; z-index: 1; } /* --hairline is opaque in light mode, so it cannot compose with the glow beneath: over the darkest part of the wash it would read as a lighter rule. Translucent ink instead. */ [data-mode='light'] .hero-edge { background: color-mix(in srgb, var(--text-primary) 10%, transparent); } /* The arc: the top half of an ellipse centred on the hero's bottom edge, so the glow is at full strength where the section ends. */ header.section::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: var(--aurora-width); height: var(--aurora-ry); pointer-events: none; z-index: 0; background-image: var(--aurora-grain), var(--aurora-hue); background-size: 160px 160px, 100% 100%; background-repeat: repeat, no-repeat; -webkit-mask-image: radial-gradient(var(--aurora-rx) var(--aurora-ry) at 50% 100%, var(--aurora-arc-stops)); mask-image: radial-gradient(var(--aurora-rx) var(--aurora-ry) at 50% 100%, var(--aurora-arc-stops)); } .scribble1 { opacity: .2; filter: invert(1) sepia(.08); } [data-mode='light'] .scribble1 { filter: none; opacity: .12; } /* Cards and media */ .card { background: var(--surface) !important; color: var(--text-primary) !important; border: 1px solid var(--hairline) !important; border-radius: var(--r-xl) !important; box-shadow: none !important; transition: transform .2s ease, border-color .2s ease, background .2s ease; overflow: hidden; } .card:hover { transform: translateY(-2px); border-color: var(--hairline-strong) !important; background: var(--surface-elevated) !important; box-shadow: var(--shadow-elev) !important; } .service-card-link { cursor: pointer; } .service-card-link:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 4px; } /* Tertiary affordance on the clickable services cards: quiet enough not to compete with the page's yellow primary CTAs, present enough to read as an invitation. */ .card-cta { margin-top: 22px; display: inline-flex; align-items: center; gap: 9px; color: var(--accent-blue-link); font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .04em; } .card-cta svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; } .service-card-link:hover .card-cta svg, .service-card-link:focus-visible .card-cta svg { transform: translateX(4px); } /* Licensing band: the second offering category, linking out to the reseller pages. */ #section-licensing { background: var(--canvas-soft) !important; } #section-licensing .header.is-align-center { margin-bottom: 46px; } /* Service chips — solid, theme-aware offering pills. Fill = --text-primary, ink = --canvas, so they read as black-on-light in light mode and a light pill in dark mode (good contrast either way). */ .service-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .service-chip { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: var(--r-pill); background: var(--text-primary); color: var(--canvas); font-family: var(--font-body); font-size: 12.5px; font-weight: 600; line-height: 1.1; text-decoration: none; transition: transform .18s ease, background .18s ease; } /* Lock the fill + ink on hover so the label never loses contrast; just lift the chip. */ .service-chip:hover { transform: translateY(-2px); background: var(--text-primary); color: var(--canvas); } .service-chip:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 2px; } /* Hero: sit just under the headline, above the subheading. */ .service-chips.hero-chips { margin: 18px 0 6px; } /* Services: tuck close under the section subheading, with breathing room before the card grid. The shared .header adds a 48px bottom margin, so trim it here to let the chips sit near the copy. */ #section-services .header { margin-bottom: 8px; } .service-chips.section-chips { justify-content: center; margin: 10px auto 48px; } /* Contact band is inverted (dark in light mode, light in dark mode). Style chips against it with the band's own ink/surface colours so they read in both themes. */ .service-chips.cta-chips { margin: 0 0 24px; } .service-chips.cta-chips .service-chip, .service-chips.cta-chips .service-chip:hover { background: var(--inverted-text); color: var(--surface-inverted); } @media (prefers-reduced-motion: reduce) { .service-chip { transition: none; } .service-chip:hover { transform: none; } } .licensing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .licensing-card { display: block; text-decoration: none; } .licensing-card .card_body_small { padding: 32px !important; } .licensing-card .heading_small { margin: 0 0 10px; } .licensing-card .subheading { margin: 0; } /* Outbound: the arrow leaves the card rather than nudging along it. */ .licensing-card:hover .card-cta svg, .licensing-card:focus-visible .card-cta svg { transform: translate(3px, -3px); } .licensing-card:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 4px; } @media (max-width: 800px) { .licensing-grid { grid-template-columns: 1fr; } } /* Every outbound footer link is marked, so the two licensing destinations do not look like an exception next to Thinking Machines and the OpenAI Partnership. A CSS marker survives applyLanguage(), which replaces each link's textContent wholesale. */ .footer-link[target='_blank']::after { content: '↗'; margin-left: 5px; font-size: 11px; opacity: .65; } .card p, .card .subheading { color: var(--text-body) !important; } .card strong { color: var(--text-primary); } .output-dashboard, .skill-chat { margin-top: 26px; overflow: hidden; border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); background: var(--canvas-soft); color: var(--text-primary); box-shadow: inset 0 1px 0 var(--glass-highlight); } .mock-window-bar { height: 38px; padding: 0 13px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--hairline); color: var(--text-muted); } .mock-window-bar > span { width: 6px; height: 6px; border-radius: 50%; background: var(--hairline-strong); } .mock-window-bar strong { margin-left: 5px; font-family: var(--font-label); font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; } .mock-window-bar em { margin-left: auto; color: var(--text-muted); font-size: 8px; font-style: normal; } .sales-kpis { display: grid; grid-template-columns: 1.5fr 1fr 1fr; border-bottom: 1px solid var(--hairline); } .sales-kpis > div { min-height: 72px; padding: 13px; border-right: 1px solid var(--hairline); } .sales-kpis > div:last-child { border-right: 0; } .sales-kpis small { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 9px; } .sales-kpis strong { font-family: var(--font-display); font-size: 20px; } .sales-trend { padding: 12px 13px 10px; border-bottom: 1px solid var(--hairline); } .sales-trend-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .sales-trend-label strong { font-size: 10px; } .sales-trend-label small { color: var(--text-muted); font-size: 8px; } .sales-bars { height: 48px; margin-top: 9px; display: flex; align-items: flex-end; gap: 7px; } .sales-bars i { height: var(--bar); flex: 1; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--accent-blue) 72%, var(--surface-elevated)); } .sales-bars i:last-child { background: var(--accent-blue); } .sales-actions { padding: 7px; } .sales-actions > div { min-height: 34px; padding: 5px 7px; display: grid; grid-template-columns: 26px 1fr auto; gap: 7px; align-items: center; border-bottom: 1px solid var(--hairline); } .sales-actions > div:last-child { border-bottom: 0; } .output-icon { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); color: var(--accent-blue-link); font-family: var(--font-label); font-size: 8px; } .sales-actions strong { font-size: 10px; font-weight: 600; } .sales-actions em { color: var(--accent-blue-link); font-size: 8px; font-style: normal; } .skill-chat { margin-bottom: 24px; } .skill-chat-body { padding: 15px; } .skill-message { display: grid; grid-template-columns: 25px 1fr; gap: 9px; align-items: start; } .skill-message p { margin: 2px 0 17px; color: var(--text-body) !important; font-size: 11px; line-height: 1.5; } .skill-mark { width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--accent-blue); color: var(--accent-blue-on); font-size: 12px; } .skill-composer { min-height: 66px; padding: 12px 42px 12px 13px; position: relative; display: flex; align-items: flex-start; border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: var(--surface); } .skill-prompt { color: var(--text-primary); font-family: var(--font-body); font-size: 11px; line-height: 1.45; } .typing-caret { width: 1px; height: 15px; margin: 1px 0 0 2px; background: var(--text-primary); animation: typing-blink .8s step-end infinite; } .skill-composer button { width: 27px; height: 27px; position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; border: 0; border-radius: var(--r-pill); background: var(--accent-ember); color: var(--accent-ember-ink); } .skill-composer button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; } @keyframes typing-blink { 50% { opacity: 0; } } .image_cover, [class*='image-ratio'] { border-radius: var(--r-lg); } .hero .image_cover { border-radius: var(--r-xl); } /* ── Hero image collage ───────────────────────────────────────────────────── The build (build-static.mjs) wraps the four hero photos into two .hero-collage-col columns — photos 1+2, then 3+4. Each column is its own flex stack, so a short (1:1) and a tall (3:4) photo never share a grid row and the bottom photo packs right under the top one, Pinterest-style. Columns are independent flex stacks (no CSS multicol, which collapsed to one column in Safari); the 1:1 + 3:4 mix gives the staggered seam, and because each column totals the same height (3+4 units) they still line up top and bottom. Applies at every width; the two columns simply get tighter gaps on phones. */ .grid_2-col.hero { --collage-gap: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--collage-gap); align-items: start; overflow: visible; /* don't clip the photo shadows */ } .hero-collage-col { display: flex; flex-direction: column; gap: var(--collage-gap); min-width: 0; } .grid_2-col.hero > .grid-item-manual { grid-area: auto !important; } /* legacy no-op safety */ .grid_2-col.hero .image-ratio_1x1, .grid_2-col.hero .image-ratio_3x4 { position: relative; /* anchor the img so it fills the ratio box */ box-shadow: 0 18px 44px -26px rgba(0, 0, 0, .5); } /* The box height comes from aspect-ratio, which a child's `height:100%` won't resolve against outside grid; pin the image to the box edges so it covers. */ .grid_2-col.hero .image_cover { position: absolute; inset: 0; width: 100%; height: 100%; } @media screen and (max-width: 767px) { .grid_2-col.hero { --collage-gap: 12px; } } /* Source logos are white, so they only need inverting when the band is light. */ .logo-section-partners { filter: grayscale(1) opacity(.62); transition: filter .2s ease; } .logo:hover .logo-section-partners { filter: grayscale(1) opacity(1); } [data-mode='light'] .logo-section-partners { filter: grayscale(1) invert(1) opacity(.68); } [data-mode='light'] .logo:hover .logo-section-partners { filter: grayscale(1) invert(1) opacity(1); } /* Calls to action */ .button, .button.on-accent-primary, .w-button { background: var(--accent-ember) !important; color: var(--accent-ember-ink) !important; border: 1px solid var(--accent-ember) !important; border-radius: var(--r-md) !important; font-weight: 700; transition: transform .18s ease, background .18s ease; } .button:hover, .w-button:hover { background: var(--accent-ember-hover) !important; transform: translateY(-1px); } .text-button { color: var(--accent-blue-link) !important; } .icon.is-background { background: var(--accent-blue) !important; color: var(--accent-blue-on) !important; border-radius: var(--r-md) !important; } #section-services .icon.is-background { color: var(--accent-blue-on) !important; } #section-services .icon.is-background > img { filter: brightness(0) saturate(100%); opacity: .9; } /* Image-led services card: one neutral contrast system in both themes. */ #section-services .hero-overlay .overlay { background: linear-gradient(180deg, rgba(15, 14, 11, .58), rgba(15, 14, 11, .94)) !important; opacity: 1 !important; } #section-services .hero-overlay .card_body_small.text-color_inverse { color: #f4f1e8 !important; } #section-services .hero-overlay .eyebrow { color: rgba(244, 241, 232, .72) !important; } #section-services .hero-overlay .heading_small { color: #f4f1e8 !important; } #section-services .hero-overlay .subheading { color: rgba(244, 241, 232, .82) !important; } /* Proof band: who trusts us, then what it produced. One section, two beats. */ #section-partners, #section-partners.section.is-secondary { background: var(--canvas-soft) !important; color: var(--text-primary) !important; } #section-partners h2.heading_primary { color: var(--text-primary) !important; } #section-partners .subheading { color: var(--text-body) !important; } .impact-strip { margin-top: clamp(48px, 5vw, 78px); padding-top: clamp(38px, 3.6vw, 58px); border-top: 1px solid var(--hairline); } #section-partners .impact-strip_label { margin: 0 0 clamp(22px, 2.2vw, 34px); color: var(--text-muted) !important; font-family: var(--font-label); font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .11em; text-align: center; text-transform: uppercase; } .counter-number { color: var(--accent-blue-link) !important; } #section-cta, #section-cta.section.is-secondary { background: var(--surface-inverted) !important; color: var(--inverted-text) !important; } #section-cta h2, #section-cta p, #section-cta .text-button { color: var(--inverted-text) !important; } /* Give the long contact form its own full-width row. The image now belongs to the compact introduction above it instead of trying to visually match the form's full height. */ @media (min-width: 992px) { #section-cta .grid_2-col { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-rows: auto auto auto auto; column-gap: clamp(48px, 6vw, 88px); row-gap: 0; align-items: start; } #section-cta .grid_2-col > .grid-item-manual:first-child { grid-column: 2; grid-row: 1 / 4; align-self: stretch; } #section-cta .grid_2-col > #w-node-d492c753-bede-f8df-1669-f6089ceccf64-ce541632, #section-cta .grid_2-col > #w-node-d492c753-bede-f8df-1669-f6089ceccf64-ce541632 > .header { display: contents; } #section-cta h2 { grid-column: 1; grid-row: 1; align-self: end; margin-bottom: 20px; } #section-cta .header > .subheading { grid-column: 1; grid-row: 2; margin-bottom: 0; } #section-cta .cta-chips { grid-column: 1; grid-row: 3; align-self: start; margin: 24px 0 0; } #section-cta .lead-form-mount { grid-column: 1 / -1; grid-row: 4; margin-top: clamp(42px, 5vw, 68px); } #section-cta .lead-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-content: start; } #section-cta .lead-form > .lead-row, #section-cta .lead-form > .lead-actions, #section-cta .lead-form > .lead-success, #section-cta .lead-form > .lead-blocked { grid-column: 1 / -1; } #section-cta .image-ratio_2x3 { width: 100%; height: 100%; min-height: 360px; aspect-ratio: 16 / 9; } } #section-cta .text-button { display: inline-flex; align-items: center; gap: 12px; border-bottom: 1px solid color-mix(in srgb, var(--inverted-text) 55%, transparent); border-radius: var(--r-sm) var(--r-sm) 0 0; margin: -7px -9px 0; padding: 7px 9px 6px; text-decoration: none; transition: background .18s ease, border-color .18s ease, transform .18s ease; } #section-cta .text-button:hover, #section-cta .text-button:focus-visible { background: color-mix(in srgb, var(--inverted-text) 10%, transparent); border-bottom-color: var(--inverted-text); transform: translateX(3px); } #section-cta .textbutton { color: var(--inverted-text) !important; font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; } #section-cta .text-button .button_icon { color: var(--accent-ember); transition: transform .18s ease; } #section-cta .text-button:hover .button_icon, #section-cta .text-button:focus-visible .button_icon { transform: translateX(4px); } .scribble2 { filter: none; opacity: .13; } [data-mode='light'] .scribble2 { filter: invert(1); } .footer { background: var(--canvas-soft) !important; color: var(--text-primary) !important; border-top: 1px solid var(--hairline); padding: 0 !important; } .compact-footer { padding-top: 56px !important; padding-bottom: 96px !important; } /* Safety net: the footer is shared across pages whose grids come from different stylesheets (webflow's .container on the home page, .service-container elsewhere). If the wrapper class resolves to nothing, fall back to sane gutters rather than running edge to edge. */ .compact-footer:not(.container):not(.service-container) { width: min(1180px, calc(100% - 48px)); margin-inline: auto; } .footer-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; padding-bottom: 32px; } .footer-brand { display: grid; gap: 14px; } .footer .nav_logo-icon { width: 154px !important; height: 54px !important; } .footer-tagline { margin: 0; color: var(--text-body); font-size: 15px; } .footer-email { min-width: min(100%, 340px); display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; padding: 18px 20px; color: var(--text-primary); text-decoration: none; border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); transition: background .18s ease, border-color .18s ease, transform .18s ease; } .footer-email:hover { background: var(--surface-elevated); border-color: var(--accent-blue-link); transform: translateY(-1px); } .footer-email-label { grid-column: 1; color: var(--text-muted); font-family: var(--font-label); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; } .footer-email strong { grid-column: 1; color: var(--text-primary); font-size: 15px; } .footer-email svg { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 20px; height: 20px; fill: none; stroke: var(--accent-ember); stroke-width: 1.8; } .footer-middle { padding: 32px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .footer-nav { display: grid; grid-template-columns: .8fr 1.5fr .9fr 1fr; gap: 28px 48px; } .footer-nav-group { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .footer-nav-group h2 { margin: 0 0 4px; color: var(--text-muted); font-family: var(--font-label); font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; } .footer-link { color: var(--text-body); text-decoration: none; font-size: 14px; line-height: 1.35; transition: color .15s ease; } .footer-link:hover { color: var(--text-primary); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; } .footer-legal { display: flex; align-items: center; gap: 18px; color: var(--text-muted); font-family: var(--font-label); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; } .footer-legal a { color: inherit; text-decoration: none; } .footer-legal a:hover { color: var(--text-primary); } .footer-socials { display: flex; align-items: center; gap: 8px; } .footer-socials a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--r-pill); color: var(--text-muted); transition: color .15s ease, background .15s ease, border-color .15s ease; } .footer-socials a:hover { color: var(--text-primary); background: var(--surface-elevated); border-color: var(--hairline); } .footer-socials svg { width: 17px; height: 17px; fill: currentColor; stroke: none; } .footer-socials a:not(:first-child) svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .footer-socials .fill-dot { fill: currentColor; stroke: none; } /* Floating preferences dock */ .preferences-dock { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: inline-flex; align-items: center; gap: 2px; padding: 5px; background: var(--glass-bg); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid var(--glass-border); border-radius: var(--r-pill); box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-elev); } .preferences-dock button { height: 38px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-primary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-label); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; transition: background .15s ease; } .preferences-dock button:hover { background: var(--surface-elevated); } .preferences-dock svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; } .preferences-dock .dock-divider { width: 1px; align-self: stretch; margin: 5px 1px; background: var(--glass-border); } .preferences-dock .language-label { display: inline-block; width: 34px; text-align: center; letter-spacing: 0; text-transform: none; } /* Thai hidden for v1 — the dock keeps only the theme toggle. One rule covers both the dock clone.js builds on the home page and the static dock markup in the service/insights pages. `display:none` (not visibility/opacity) so it leaves the flex row and takes no tab stop. Delete this block and flip THAI_ENABLED in clone.js / service-page.js / insights.js to restore. */ .preferences-dock .language-button, .preferences-dock .dock-divider { display: none !important; } .preferences-dock .moon { display: none; } [data-mode='dark'] .preferences-dock .sun { display: none; } [data-mode='dark'] .preferences-dock .moon { display: block; } /* Thai keeps the same semantic roles while using Thai-aware rhythm and weights. */ :lang(th) { letter-spacing: 0; } html:lang(th) body { line-height: 1.8; } html:lang(th) h1, html:lang(th) h2, html:lang(th) h3, html:lang(th) .heading_hero, html:lang(th) .heading_primary, html:lang(th) .heading_secondary, html:lang(th) .heading_small { font-weight: 700; line-height: 1.3; letter-spacing: -.2px; } html:lang(th) p, html:lang(th) .subheading, html:lang(th) .rich-text, html:lang(th) .paragraph_large, html:lang(th) .footer-tagline, html:lang(th) .footer-link, html:lang(th) .nav_link { font-weight: 400; line-height: 1.8; } html:lang(th) .eyebrow, html:lang(th) .footer-email-label, html:lang(th) .footer-legal, html:lang(th) .preferences-dock button { font-weight: 400; line-height: 1.6; letter-spacing: 0; text-transform: none; } html:lang(th) .button, html:lang(th) .w-button, html:lang(th) #section-cta .textbutton, html:lang(th) .footer-email strong { font-weight: 700; letter-spacing: 0; } html:lang(th) .mock-window-bar strong { letter-spacing: 0; text-transform: none; } html:lang(th) .skill-message p, html:lang(th) .skill-prompt { line-height: 1.7; } [style*='visibility: hidden'] { visibility: visible !important; } @media (max-width: 991px) { .nav_mobile-menu-button { cursor: pointer; } .nav_menu.is-open { display: flex !important; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xl); box-shadow: var(--shadow-elev); } .heading_hero { font-size: clamp(2.8rem, 9vw, 4.8rem); } } @media (max-width: 800px) { #section-differentiators [data-wf='bento-full'] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } #section-differentiators [data-wf='bento-full'] > .grid_1-col { display: contents !important; } #section-differentiators .grid-item-manual { min-width: 0; } #section-differentiators .card_body_small { padding: 16px !important; } #section-differentiators .heading_secondary { font-size: clamp(1.1rem, 4.5vw, 1.45rem); line-height: 1.2; letter-spacing: -.02em; } #section-differentiators .eyebrow { font-size: 9px; line-height: 1.4; } #section-differentiators .subheading { font-size: 12px; line-height: 1.55; } #section-differentiators .text-button { font-size: 11px; } #section-differentiators .output-dashboard, #section-differentiators .skill-chat { margin-top: 18px; } #section-differentiators .mock-window-bar em { display: none; } #section-differentiators .sales-kpis { grid-template-columns: 1fr 1fr; } #section-differentiators .sales-kpis > div { min-height: 52px; padding: 8px; } #section-differentiators .sales-kpis > div:first-child { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--hairline); } #section-differentiators .sales-kpis > div:nth-child(2) { border-right: 1px solid var(--hairline); } #section-differentiators .sales-kpis small { font-size: 7.5px; line-height: 1.25; } #section-differentiators .sales-kpis strong { font-size: 15px; } #section-differentiators .sales-trend { padding: 8px; } #section-differentiators .sales-trend-label strong { font-size: 8px; } #section-differentiators .sales-trend-label small { display: none; } #section-differentiators .sales-bars { height: 30px; gap: 4px; } #section-differentiators .sales-actions > div { grid-template-columns: 22px minmax(0, 1fr); } #section-differentiators .sales-actions > div:nth-child(n+2) { display: none; } #section-differentiators .sales-actions em { display: none; } #section-differentiators .sales-actions strong { font-size: 8.5px; } #section-differentiators .skill-chat-body { padding: 10px; } #section-differentiators .skill-message { grid-template-columns: 22px 1fr; gap: 7px; } #section-differentiators .skill-mark { width: 22px; height: 22px; } #section-differentiators .skill-message p, #section-differentiators .skill-prompt { font-size: 9px; } #section-differentiators .skill-composer { min-height: 72px; padding: 10px 34px 10px 10px; } #section-differentiators .skill-composer button { width: 24px; height: 24px; right: 6px; bottom: 6px; } .compact-footer { padding-bottom: 128px !important; } .footer-bottom { align-items: flex-start; flex-wrap: wrap; } .footer-socials { order: -1; flex-basis: 100%; } } @media (max-width: 767px) { /* Keep the service offers together on mobile; move the brand promise card after them. */ #section-services .container { display: flex; flex-direction: column; gap: 16px; } #section-services .grid-services-col-2 { display: contents !important; } #section-services .grid-services-col-2 > .grid-services-col-1 { order: 1; } #section-services .grid-services-col-3 { order: 2; } #section-services .grid-services-col-2 > .grid-item-manual:has(.hero-overlay) { order: 3; } /* The three impact stats stay on one row across every mobile width. */ section:has(#section-impact) .grid_3-col { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; } section:has(#section-impact) .card_body { padding: clamp(16px, 3.4vw, 26px) clamp(7px, 2vw, 16px) !important; } section:has(#section-impact) .counter-number { font-size: clamp(1rem, 4.4vw, 2rem); letter-spacing: -.03em; white-space: nowrap; } section:has(#section-impact) .paragraph_large { font-size: clamp(10px, 2vw, 15px); line-height: 1.35; } } @media (max-width: 560px) { #section-services .container { gap: 12px !important; } section:has(#section-impact) .grid_3-col { gap: 8px !important; } section:has(#section-impact) .card_body { padding: 16px 7px !important; } section:has(#section-impact) .counter-number { font-size: clamp(1rem, 5.4vw, 1.3rem); letter-spacing: -.04em; } section:has(#section-impact) .paragraph_large { font-size: 10px; } .preferences-dock { right: 16px; bottom: 16px; } .heading_hero { font-size: 2.65rem; line-height: 1.04; } header.section { padding-top: 78px; } .nav_logo-icon, .footer .nav_logo-icon { width: 124px !important; height: 43px !important; } .nav_logo { height: 43px !important; } .compact-footer { padding-top: 42px !important; padding-bottom: 128px !important; } .footer-main { align-items: stretch; flex-direction: column; gap: 28px; padding-bottom: 28px; } .footer-email { min-width: 0; width: 100%; } .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; } .footer-bottom { align-items: flex-start; flex-direction: column-reverse; gap: 20px; } .footer-legal { align-items: flex-start; flex-wrap: wrap; gap: 10px 16px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .typing-caret { animation: none; opacity: 1; } } /* ------------------------------------------------------------------ * * Lead form (public/lead-form.js). Lives in clone.css because both the * home page and the service pages load this stylesheet. * ------------------------------------------------------------------ */ /* The honeypot must be reachable by bots and invisible to people. display:none would let a bot skip it; this keeps it in the layout but off-screen. */ .hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* The tablist sits on --canvas (the mount's panel), so --canvas-soft was nearly invisible against it. --surface-elevated plus a strong hairline lifts the whole control off the panel, and the active tab reuses the chips' accent fill so "selected" reads the same way twice. */ /* Mixed off --text-primary rather than using --surface-elevated: in light mode that token is only ~4 RGB units from --canvas, so the control vanished into the panel behind it. Mixing ink into the canvas darkens on light and lightens on dark — ~15 units either way. */ .lead-tabs { display: inline-flex; gap: 4px; margin-bottom: 26px; padding: 5px; border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); background: color-mix(in srgb, var(--text-primary) 8%, var(--canvas)); box-shadow: inset 0 1px 0 var(--glass-highlight); } .lead-tab { padding: 10px 20px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-muted); font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .18s ease, color .18s ease; } .lead-tab:hover { color: var(--text-primary); } .lead-tab.is-active { background: var(--accent-blue); color: var(--accent-blue-on); } .lead-tab:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 2px; } .lead-panels { display: grid; } /* Stack both forms in the same grid cell so the panel reserves the height of the taller tab. visibility keeps the inactive form out of focus/accessibility while preserving its layout size. */ .lead-form { grid-area: 1 / 1; visibility: hidden; opacity: 0; pointer-events: none; } .lead-form.is-active { visibility: visible; opacity: 1; pointer-events: auto; animation: leadPanelIn .28s cubic-bezier(.2, .7, .2, 1); } @keyframes leadPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .lead-form.is-active { animation: none; } } .lead-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .lead-field { display: block; margin-top: 20px; } .lead-row .lead-field { margin-top: 0; } /* :not(.lead-error) matters — this selector is one step more specific than `.lead-error`, so without it the `display: block` here overrides the error's hidden-by-default rule. */ .lead-field > span:not(.lead-error), .lead-label { display: block; margin-bottom: 8px; color: var(--text-body); font-size: 13px; } .lead-field input[type='text'], .lead-field input[type='email'], .lead-field input[type='tel'], .lead-field input:not([type]), .lead-field textarea, .lead-uc-other { width: 100%; padding: 12px 14px; border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: var(--canvas); color: var(--text-primary); font-family: var(--font-body); font-size: 15px; transition: border-color .18s ease; } .lead-field input:focus, .lead-field textarea:focus, .lead-uc-other:focus { outline: none; border-color: var(--accent-blue-link); } .lead-field textarea { resize: vertical; } .lead-uc-other { margin-top: 12px; } /* Revealed by lead-form.js only while the group's "Other" chip is selected. */ .lead-other-input { display: none; margin-top: 12px; } .lead-other-input.is-shown { display: block; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { padding: 9px 15px; border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); background: transparent; color: var(--text-body); font-family: var(--font-body); font-size: 13px; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; } .chip:hover { border-color: var(--accent-blue-link); color: var(--text-primary); } .chip[aria-pressed='true'] { border-color: var(--accent-blue); background: var(--accent-blue); color: var(--accent-blue-on); font-weight: 600; } .chip:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 2px; } .lead-error { display: none; margin-top: 8px; color: #e2725b; font-size: 12px; } .lead-error.is-shown { display: block; } .lead-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; } .lead-submit { min-height: 50px; padding: 0 26px; border: 1px solid var(--accent-ember); border-radius: var(--r-md); background: var(--accent-ember); color: var(--accent-ember-ink); font-family: var(--font-body); font-size: 15px; font-weight: 700; cursor: pointer; transition: background .18s ease, transform .18s ease; } .lead-submit:hover:not(:disabled) { background: var(--accent-ember-hover); transform: translateY(-1px); } .lead-submit:disabled { cursor: default; opacity: .8; } .lead-note { color: var(--text-muted); font-size: 13px; } .lead-success, .lead-blocked { display: none; margin-top: 18px; padding: 14px 16px; border-radius: var(--r-md); font-size: 14px; } .lead-success { border: 1px solid var(--accent-blue); background: color-mix(in srgb, var(--accent-blue) 12%, transparent); color: var(--text-primary); } .lead-blocked { border: 1px solid #e2725b; background: color-mix(in srgb, #e2725b 12%, transparent); color: var(--text-primary); } .lead-form.is-sent .lead-success { display: block; } .lead-form.is-blocked .lead-blocked { display: block; } /* Modal */ .lead-modal { position: fixed; inset: 0; z-index: 200; display: none; } .lead-modal.is-open { display: block; } .lead-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); backdrop-filter: blur(4px); } .lead-modal-panel { position: relative; z-index: 1; width: min(1100px, calc(100% - 32px)); max-height: calc(100vh - 64px); margin: 32px auto; padding: 36px; overflow-y: auto; border: 1px solid var(--hairline-strong); border-radius: var(--r-xxl); background: var(--surface); box-shadow: var(--shadow-elev); } .lead-modal-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: transparent; color: var(--text-body); font-size: 20px; line-height: 1; cursor: pointer; } .lead-modal-close:hover { background: var(--surface-elevated); color: var(--text-primary); } .lead-modal-title { margin: 0 0 24px; font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.1; letter-spacing: -.03em; } .lead-modal .lead-field input, .lead-modal .lead-field textarea { background: var(--canvas-soft); } /* Outbound interstitial (external-modal.js). Reuses the lead modal's backdrop, panel and close button; only the width and the action row differ — the lead panel is sized for a form, and at 1100px a four-line explanation reads as a banner rather than a question. */ .external-modal-panel { width: min(560px, calc(100% - 32px)); margin-top: 12vh; } .external-modal-panel .lead-modal-title { margin-bottom: 14px; } .external-modal-body { margin: 0 0 10px; color: var(--text-body); } .external-modal-note { margin: 0 0 26px; color: var(--text-muted); font-size: 14px; } .external-modal-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* Continue is the ACT here — it is the one thing this screen exists to offer. */ .external-modal-go { min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--accent-ember); border-radius: var(--r-md); background: var(--accent-ember); color: var(--accent-ember-ink); font-weight: 700; text-decoration: none; transition: transform .18s ease, background .18s ease; } .external-modal-go:hover { background: var(--accent-ember-hover); transform: translateY(-1px); } .external-modal-stay { min-height: 48px; padding: 0 18px; border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: transparent; color: var(--text-primary); font-family: var(--font-body); cursor: pointer; transition: background .18s ease; } .external-modal-stay:hover { background: var(--surface-elevated); } @media (max-width: 520px) { .external-modal-panel { margin-top: 8vh; } .external-modal-actions { flex-direction: column; align-items: stretch; } .external-modal-go, .external-modal-stay { width: 100%; } } @media (max-width: 700px) { .lead-row { grid-template-columns: 1fr; } .lead-tabs { display: flex; width: 100%; } .lead-tab { flex: 1; padding-inline: 10px; font-size: 12px; } .lead-modal-panel { padding: 28px 20px; margin: 16px auto; max-height: calc(100vh - 32px); } } /* The inline mounts sit inside inverted CTA bands, so the form gets its own panel in the page's normal palette. Inside the modal the panel would be a card-in-a-card, so it is stripped. */ .lead-form-mount { overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--r-xl); background: var(--canvas); color: var(--text-primary); } .lead-modal .lead-form-mount { padding: 0; border: 0; background: none; } .lead-shell { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.5fr); } .lead-form-content { min-width: 0; padding: 30px; } .lead-trust { padding: 34px 30px; border-right: 1px solid var(--hairline); background: transparent; } .lead-trust-eyebrow { margin-bottom: 10px; color: var(--accent-blue-link); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .lead-trust-title { margin: 0 0 10px; font-family: var(--font-display); font-size: clamp(1.55rem, 2.2vw, 2.15rem); line-height: 1.05; letter-spacing: -.035em; } .lead-trust-body { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.55; } .lead-trust-reply { display: inline-flex; margin-top: 22px; padding: 8px 12px; border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); color: var(--text-body); font-size: 12px; } .lead-trust-person { display: flex; align-items: center; gap: 13px; margin-top: 24px; } .lead-trust-person img { flex: 0 0 auto; width: 58px; height: 58px; object-fit: contain; } .lead-trust-person strong, .lead-trust-person span { display: block; } .lead-trust-person strong { margin-bottom: 3px; font-size: 14px; line-height: 1.25; } .lead-trust-person span { color: var(--text-muted); font-size: 12px; line-height: 1.4; } .lead-trust-reseller { display: none; align-items: center; gap: 8px; margin-top: 24px; color: var(--text-body); font-size: 13px; } .lead-trust-reseller svg { width: 18px; height: 18px; fill: none; stroke: var(--accent-blue-link); stroke-width: 1.8; } .lead-trust.is-licensing .lead-trust-reseller, .lead-service-trust.is-licensing .lead-trust-reseller { display: flex; } .service-cta .lead-form-mount { padding: 26px; } .lead-service-trust { margin-top: 26px; } .lead-service-trust .lead-trust-reply { margin-top: 0; color: var(--inverted-text); border-color: color-mix(in srgb, var(--inverted-text) 30%, transparent); } .lead-service-trust .lead-trust-person { margin-top: 20px; } .lead-service-trust .lead-trust-person strong { color: var(--inverted-text); } .lead-service-trust .lead-trust-person span, .lead-service-trust .lead-trust-reseller { color: color-mix(in srgb, var(--inverted-text) 72%, transparent); } @media (max-width: 820px) { .lead-shell { grid-template-columns: 1fr; } .lead-trust { border-right: 0; border-bottom: 1px solid var(--hairline); } .lead-form-content { padding: 24px 20px; } } @media (max-width: 700px) { .service-cta .lead-form-mount { padding: 20px; } .lead-trust { padding: 26px 20px; } }