/* Version 7: targeted usability, accessibility and responsive fixes. */ /* ── Drag-hint: desktop shows "DOWN", mobile shows "SIDE" ── */ .dh-mobile { display: none; } @media (max-width:900px) { .dh-desktop { display: none; } .dh-mobile { display: inline; } } /* ── Case article tables: horizontal scroll on iOS ── */ /* body{overflow-x:hidden} on iOS blocks nested overflow:auto. position:relative creates a new containing block that escapes the clip. */ .case7-table-wrap { position: relative; -webkit-overflow-scrolling: touch; max-width: 100%; overflow-x: auto; overflow-y: hidden; } .case7-table { width: max-content; min-width: 100%; } /* ── Page load: hide body before first paint, fade in when ready ── site7.js adds igm-loading synchronously in before any render. is-loaded is added by finishLoading() on window.load. */ html.igm-loading body { opacity: 0 !important; } html.is-loaded body { opacity: 1; transition: opacity 0.45s ease; } /* ── Mobile scroll progress bar ── */ #mob-scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; background: var(--red); transform-origin: left center; transform: scaleX(0); z-index: 10000; pointer-events: none; will-change: transform; } /* ── Case reading progress ── */ .case-read-bar { width: 100%; height: 3px; background: rgba(240,237,232,.07); overflow: hidden; } .case-read-fill { height: 100%; background: var(--red); width: 0%; transition: width 0.15s ease; } /* Android Chrome paints its own grey/blue tap-highlight rectangle on any tapped link/button unless this is disabled — that's the odd one-second highlight flash on mobile-menu taps. We already have a custom cursor/active-state system, so the native highlight is just visual noise on top of it. */ a, button, [role="button"] { -webkit-tap-highlight-color: transparent; } /* Case cross-linking: cards stay visually unchanged, but work as links */ a.case-row, a.dc-card, a.sp-case, a.ai4-case-link { color: inherit; text-decoration: none; } a.case-row, a.dc-card { cursor: pointer; } a.case-row:focus-visible, a.dc-card:focus-visible, a.sp-case:focus-visible, a.ai4-case-link:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; } :root { --g3: #777; --g4: #8a8a8a; --red-text: var(--red); } .site-loader { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 18px; background: var(--black); color: var(--g5); font: 600 11px/1.4 var(--font); letter-spacing: .16em; text-transform: uppercase; opacity: 0; transition: opacity .18s ease; } .site-loader img { width: 150px; filter: brightness(0) invert(1); opacity: .72; } .site-loader-line { width: 190px; height: 1px; overflow: hidden; background: var(--g2); position: relative; } .site-loader-line::after { content: ''; position: absolute; inset: 0; background: var(--red); transform: translateX(-100%); animation: siteLoaderMove 1.1s ease-in-out infinite; } .is-loading-delayed .site-loader { display: flex; opacity: 1; } .is-loaded .site-loader { opacity: 0; pointer-events: none; } @keyframes siteLoaderMove { 50% { transform: translateX(35%); } 100% { transform: translateX(100%); } } .skip-link { position: fixed; top: 10px; left: 10px; z-index: 11000; padding: 10px 14px; background: var(--white); color: var(--black); font-size: 14px; font-weight: 700; transform: translateY(-160%); transition: transform .16s ease; } .skip-link:focus-visible { transform: translateY(0); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--white) !important; outline-offset: 3px; } .nav-link, .nav-section-label, .ft-nav a, .ft-bottom span, .mob-menu-footer { color: var(--g4); } .nav-link--ask, .ndi-num, .hero-tag, .ph-eyebrow, .pg-label, .sec-label, .s4-eyebrow, .web4-eyebrow, .ai4-eyebrow, .ld4-label, .rb4-eyebrow { color: var(--red-text) !important; } .nav-link[aria-current='page'], .nav-dd-item[aria-current='page'], .ft-nav a[aria-current='page'] { color: var(--white); } .mob-menu { pointer-events: none; } .mob-menu.open { pointer-events: auto; } .mob-link, .mob-link::before { color: var(--g4); } .burger { width: 44px; height: 44px; padding: 0 9px; align-items: stretch; justify-content: center; } .marquee-strip, .marquee-outer, .svc-marquee { max-width: 100%; overflow: hidden; } .ld4-hero-desc { color: rgba(240,237,232,.68) !important; } [style*='color:rgba(240,237,232,0.45)'], [style*='color:rgba(240,237,232,.45)'] { color: rgba(240,237,232,.68) !important; } /* Keep the founders hero consistent with the full-screen service heroes. */ .ask-hero { min-height: 100svh; box-sizing: border-box; justify-content: center; padding-top: 128px; padding-bottom: 80px; } .ask-hero .pg-cta-btn { opacity: 0; transform: translateY(16px); } .rb4-pain .pain-intro { align-items: start; } /* Humour is a deliberate accent: quoted, white and consistent. */ .humor-highlight { color: var(--white) !important; font-weight: 700; font-size: calc(1em + 2px); } .c-dot, .c-ring { will-change: transform, opacity; } .c-label { display: none !important; } .about-clock-quote { display: block; margin-top: 24px; color: var(--white) !important; font-style: normal; font-weight: 700; font-size: calc(1em + 2px); } .ld4-hero-desc .humor-highlight, .s4-pain-text .humor-highlight, .ld4-define-callout-text strong.humor-highlight, .ftp-desc .ftp-em { color: var(--white) !important; font-weight: 700; font-size: calc(1em + 2px); } .s4-process .s4-section-header { margin-bottom: 18px; } .s4-process-humor { max-width: 56ch; margin: 0; padding-left: 18px; border-left: 2px solid var(--red); color: var(--white) !important; font-size: clamp(17px,1.55vw,21px); line-height: 1.55; } .intro-callout--humor .ic-text, .about-clock-quote, .s4-process-humor, .ld4-define-callout-punch, .rb4-hero .rb4-sub, .rb4-includes-section .pstep-humor, .ai4-intro-callout { quotes: "«" "»"; } .intro-callout--humor .ic-text::before, .about-clock-quote::before, .s4-process-humor::before, .ld4-define-callout-punch::before, .rb4-hero .rb4-sub::before, .rb4-includes-section .pstep-humor::before, .humor-highlight::before, .ftp-desc .ftp-em::before, .ai4-intro-callout::before { content: open-quote; } .intro-callout--humor .ic-text::after, .about-clock-quote::after, .s4-process-humor::after, .ld4-define-callout-punch::after, .rb4-hero .rb4-sub::after, .rb4-includes-section .pstep-humor::after, .humor-highlight::after, .ftp-desc .ftp-em::after, .ai4-intro-callout::after { content: close-quote; } .intro-callout--humor .ic-text { color: var(--white) !important; font-size: calc(1em + 2px); } .intro-callout--humor .humor-key, .ld4-define-callout-punch span { color: var(--white) !important; font-weight: inherit !important; } .rb4-hero .rb4-sub { color: var(--white) !important; font-size: clamp(17px, 1.55vw, 20px) !important; line-height: 1.6 !important; } .rb4-includes-section .pstep-humor { color: var(--white) !important; font-size: calc(1em + 2px) !important; line-height: 1.65 !important; font-weight: 700 !important; } .sp-cases-label, .drag-section-label { display: inline-flex !important; align-items: center; width: max-content; padding: 5px 8px 6px; background: #050505; border: 1px solid rgba(255,255,255,.18); box-shadow: 4px 4px 0 rgba(204,17,34,.85); color: var(--white) !important; line-height: 1 !important; } .sp-cases-label { margin-bottom: 14px; font-size: 12px !important; } .svc-panel.sp-bg--8 .sp-cases-label { background: var(--red); border-color: rgba(5,5,5,.42); box-shadow: 4px 4px 0 #050505; } .drag-section-label { margin-bottom: 18px !important; font-size: 12px !important; } .ai4-case-quote { border-left: 0 !important; padding-left: 0 !important; color: rgba(240,237,232,.62) !important; font-size: clamp(16px, 1.35vw, 18px) !important; line-height: 1.7 !important; font-style: normal !important; font-weight: 400 !important; max-width: 72ch; } /* Leads definition: one clear statement across the full callout. */ .ld4-define-callout { display: block; padding: clamp(32px, 3vw, 46px); background: #100a0b; border: 1px solid rgba(204,17,34,.28); border-left: 3px solid var(--red); border-radius: 8px; } .ld4-define-callout-bar { display: none; } .ld4-define-callout-text { margin: 0; } .ld4-define-callout-punch { margin: 0; display: block; width: 100%; max-width: 100%; padding: 0; border: 0; color: var(--white); font-size: clamp(22px, 2.1vw, 31px); line-height: 1.36; } .ld4-define-callout-punch span { display: inline; margin: 0; color: var(--white); } /* ── IGM visual alignment ──────────────────────────────────────────────── Shared UI values only. The editorial compositions and individual hero scales stay page-specific by design; these rules keep repeated controls from feeling like they came from different sites. */ :root { --igm-control-radius: 4px; --igm-card-radius: 8px; --igm-control-height: 52px; --igm-fast: .16s ease-out; --igm-section-space: clamp(80px, 11vh, 140px); } /* One rhythm for small service labels and readable hero descriptions. */ .ph-eyebrow, .pg-label, .s4-eyebrow, .s4-section-tag, .web4-eyebrow, .web4-section-tag, .ai4-eyebrow, .ai4-intro-label, .ai4-section-tag, .ld4-label, .ld4-ch-label, .ld4-proc-card-num, .ld4-define-label, .rb4-eyebrow { font-size: 11px; line-height: 1.25; letter-spacing: .18em; } .s4-sub, .web4-sub, .ai4-sub, .ld4-hero-desc, .rb4-sub { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.65; } /* Controls share a clear, modest corner radius and immediate feedback. */ .nav-cta, .pg-cta-btn, .inline-cta-btn, .blog7-btn, .case7-cta a, .ai4-case-link, .sp-btn, .about-pin-cta, .cf-btn, .cta-submit, .pf-submit, .quiz-back, .quiz-next, .quiz-contact, .quiz-download, .lead-gate-submit { min-height: var(--igm-control-height); border-radius: var(--igm-control-radius) !important; } .nav-cta, .pg-cta-btn, .inline-cta-btn, .blog7-btn, .case7-cta a, .ai4-case-link, .sp-btn, .about-pin-cta, .cf-btn, .cta-submit, .pf-submit { display: inline-flex; align-items: center; justify-content: center; } .quiz-download { min-height: 68px; } .pf-field input, .pf-field textarea, .pf-field select, .lead-gate-field { border-radius: var(--igm-control-radius); } @media (min-width: 901px) { .team-row { grid-template-columns: clamp(120px, 8vw, 148px) minmax(360px, .9fr) minmax(460px, 1.45fr); column-gap: clamp(32px, 3.2vw, 56px); align-items: center; padding-top: 64px; padding-bottom: 64px; } .tr-initial { align-self: center; } .tr-meta { padding-right: clamp(24px, 2.6vw, 44px); } } /* Repeated content cards use the same edge treatment. Pills/tags and the deliberately square structural grids are intentionally excluded. */ .s4-vstep, .s4-pain-card, .web4-why-card, .web4-proc-card, .ai4-terminal, .ai4-pcard, .ld4-proc-card, .ld4-niche-item, .ld4-define-callout, .rb4-approach-card { border-radius: var(--igm-card-radius); } /* The main service sections now share the same vertical cadence, while each page keeps its own visual blocks and horizontal composition. */ .s4-pain, .s4-process, .web4-why, .web4-process, .ai4-intro, .ai4-proc-pin, .ld4-channels, .ld4-econ, .ld4-niche, .ld4-define, .rb4-niche, .rb4-approach { padding-top: var(--igm-section-space); padding-bottom: var(--igm-section-space); } @media (max-width: 700px) { .quiz-download { min-height: 62px; } } @media (max-width: 900px) { .nav-link--ask { display: none; } /* Same CTA is always reachable via the burger menu — keep the top bar uncluttered so the logo never gets squeezed. */ .nav-cta { display: none !important; } .nav-logo { flex-shrink: 0; } .ft-nav { width: 100%; flex-wrap: wrap; gap: 12px 22px; } .manifesto-text { font-size: clamp(26px, 7.2vw, 36px) !important; line-height: 1.08 !important; letter-spacing: -.035em !important; } .ask-hero { min-height: 100svh; justify-content: center; padding: 112px 24px 56px; } .ld4-define-callout-punch { font-size: clamp(19px, 5.4vw, 27px); } } @media print { #cursor, #cursorPreview, .site-loader { display: none !important; } [class*='reveal'], .ph-word, .s4-word, .web4-word, .ai4-word, .rb4-word { opacity: 1 !important; transform: none !important; clip-path: none !important; } .ask-hero .pg-cta-btn { opacity: 1 !important; transform: none !important; } } @media (max-width: 480px) { .hero-h1 { font-size: clamp(48px, 13vw, 58px); line-height: .9; letter-spacing: -.05em; } .ht-line--sub { padding-left: 0; } .s4-title { font-size: 56px !important; line-height: .92 !important; } .mob-link { font-size: 42px; line-height: .98; } .mob-menu-inner { width: calc(100% - 48px); } } @media (hover: none), (pointer: coarse) { #cursor, #cursorPreview { display: none !important; } body, button { cursor: auto !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } #cursor, #cursorPreview { display: none !important; } body, button { cursor: auto !important; } .marquee-track, .marquee-inner, .svc-marquee-inner, .gmq-inner { animation: none !important; transform: none !important; } [class*='reveal'], .ph-word, .s4-word, .web4-word, .ai4-word, .rb4-word { opacity: 1 !important; transform: none !important; clip-path: none !important; } .ask-hero .pg-cta-btn { opacity: 1 !important; transform: none !important; } } /* Mobile hardening for v7 inner pages. Keep the existing desktop identity; only remove phone-only clipping, empty hero gaps, hidden GSAP states and unstable mobile navigation. */ @media (max-width: 900px) { html, body { max-width: 100%; overflow-x: hidden !important; } body { -webkit-text-size-adjust: 100%; } #nav { height: 76px !important; padding: 0 32px !important; padding-left: max(32px, env(safe-area-inset-left, 0px)) !important; padding-right: max(32px, env(safe-area-inset-right, 0px)) !important; transform: none !important; z-index: 4500 !important; background: rgba(8,8,8,.97) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; } .nav-logo img { height: 32px !important; } .burger { display: flex !important; width: 44px !important; height: 44px !important; padding: 12px 6px !important; opacity: 1 !important; pointer-events: auto !important; position: relative; z-index: 4600; } #nav .burger { position: absolute !important; top: 16px !important; right: 28px !important; } .burger span { width: 32px !important; height: 2px !important; background: var(--white) !important; flex: 0 0 auto !important; } .burger.open span:first-child { transform: translateY(4px) rotate(45deg); } .burger.open span:last-child { transform: translateY(-3px) rotate(-45deg); } .mob-menu { z-index: 4400 !important; visibility: hidden; opacity: 0 !important; pointer-events: none !important; clip-path: none !important; transform: translateY(-8px); transition: visibility 0s linear .12s !important; background: rgba(8,8,8,.98) !important; align-items: flex-start !important; justify-content: flex-start !important; padding: 104px 32px 36px !important; overflow: auto; } .mob-menu.open { visibility: visible; opacity: 1 !important; pointer-events: auto !important; transform: none; transition: none !important; } .mob-menu-inner { width: 100% !important; max-width: none !important; gap: 6px !important; } .mob-link { font-size: clamp(34px, 10.5vw, 48px) !important; line-height: .98 !important; } .mob-svc-link { font-size: 16px !important; padding: 9px 0 9px 24px !important; } .mob-menu-footer { position: static !important; margin-top: 28px !important; } .page-hero, .ask-hero, .s4-hero, .web4-hero, .ai4-hero, .ld4-hero, .rb4-hero { min-height: auto !important; height: auto !important; justify-content: flex-start !important; padding-top: 112px !important; padding-bottom: 56px !important; overflow: visible !important; transform: none !important; opacity: 1 !important; } .page-hero, .ask-hero { padding-left: 32px !important; padding-right: 32px !important; } .ph-title, .ask-hero .ph-title { max-width: 100% !important; overflow: visible !important; font-size: clamp(52px, 15vw, 72px) !important; line-height: .91 !important; letter-spacing: -.05em !important; margin-bottom: 24px !important; overflow-wrap: normal; } .ph-title .ph-word { display: block !important; } .ph-title br { display: none !important; } .ph-eyebrow, .ph-sub, .ph-meta, .ph-word, .ask-hero .pg-cta-btn, .s4-word, .web4-word, .ai4-word, .ld4-word, .rb4-word, .reveal, .reveal-up, .bento-cell, .price-card, .team-card, .val-item, .founder-card, .job-item, .perk-item, .perk-row, .team-row, .kpi-cell, .feat-item, .niche-row, .step-row, .split-stat .ss-l, .split-stat .ss-r, .ss-item, .sstat, .case-dramatic, .process-step, .pull-quote, .rb4-hero-stats, .ld4-hero-bottom { opacity: 1 !important; visibility: visible !important; transform: none !important; clip-path: none !important; } .ph-sub { max-width: 100% !important; width: 100% !important; font-size: 17px !important; line-height: 1.65 !important; overflow-wrap: anywhere; } .ph-meta { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px 20px !important; margin-top: 34px !important; padding-top: 28px !important; } .ph-stat-num { font-size: 34px !important; } .ph-stat-lbl { font-size: 10px !important; line-height: 1.45 !important; } .marquee-strip, .marquee-outer, .svc-marquee { position: relative; z-index: 1; } .sec-header { padding: 64px 32px 28px !important; } .pg-label, .intro-mega-label { margin-bottom: 22px !important; } .pg-h2 { font-size: clamp(38px, 11.5vw, 56px) !important; line-height: .98 !important; letter-spacing: -.045em !important; margin-bottom: 18px !important; overflow-wrap: normal; } /* .line must stay display:block (set in style7.css) — each split line is its own stacked row. Forcing display:inline here made every multi-line reveal heading collapse onto itself (e.g. "Our results" + "speak loudly" overlapping into one smeared line) on every page that uses the .reveal-h line-split, not just one. */ .line-inner { overflow: visible !important; } .intro-mega { padding: 16px 32px 0 !important; overflow: visible !important; } .intro-mega-editorial { display: block !important; gap: 0 !important; margin-top: 0 !important; padding: 8px 0 54px !important; overflow: visible !important; } .ime-left, .ime-right { display: block !important; flex: none !important; width: 100% !important; max-width: none !important; min-width: 0 !important; } .intro-mega-h { font-size: clamp(34px, 10vw, 44px) !important; line-height: .95 !important; letter-spacing: -.05em !important; overflow-wrap: normal; } .intro-callout { margin-top: 28px !important; padding: 28px 24px !important; overflow: visible !important; } .intro-callout .ic-text, .about-clock-quote { font-size: 18px !important; line-height: 1.55 !important; } .kpi-bar, .kpi-bar--3, .stat-strip { grid-template-columns: 1fr 1fr !important; } .kpi-cell, .ss-item { padding: 28px 32px !important; } #principlesBlock { min-height: auto !important; display: block !important; justify-content: flex-start !important; padding: 64px 0 !important; } #principlesBlock .sec-header { padding: 0 32px 32px !important; } #principlesBlock .feat-tabs { display: block !important; margin: 0 32px !important; border-radius: var(--igm-card-radius) !important; overflow: visible !important; } #principlesBlock .ft-list-wrap { border-right: 0 !important; } #principlesBlock .ft-hint-row { padding: 20px 24px 16px !important; } #principlesBlock .ft-tab { padding: 18px 24px !important; gap: 18px !important; } #principlesBlock .ft-content { display: block !important; border-top: 1px solid rgba(255,255,255,.05); } #principlesBlock .ft-panel { padding: 28px 24px !important; } #principlesBlock .ftp-title { font-size: 28px !important; line-height: 1.08 !important; } #principlesBlock .ftp-desc { font-size: 15px !important; line-height: 1.7 !important; } .team-rows { border-top: 1px solid rgba(255,255,255,.06); } .team-row { display: block !important; padding: 40px 32px !important; } .tr-initial { margin-bottom: 10px !important; } .tr-meta { padding-right: 0 !important; } .tr-name { font-size: clamp(28px, 8.5vw, 42px) !important; line-height: 1 !important; } .tr-role { font-size: 12px !important; line-height: 1.45 !important; } .tr-tags { gap: 8px !important; } .tr-bio { grid-column: auto !important; margin-top: 24px !important; font-size: 18px !important; line-height: 1.72 !important; } .case7-page .case7-hero, .case7-page .case7-wrap, .case7-page .case7-side, .case7-page .case7-content { box-sizing: border-box; max-width: 100% !important; min-width: 0 !important; } .case7-page .case7-wrap { width: 100% !important; overflow: hidden !important; padding-left: 32px !important; padding-right: 32px !important; } .case7-page .case7-content { width: 100% !important; font-size: 17px !important; line-height: 1.68 !important; overflow-wrap: break-word; } .case7-page .case7-content p, .case7-page .case7-content li, .case7-page .case7-content h2, .case7-page .case7-content h3, .case7-page .case7-strong { max-width: 100% !important; overflow-wrap: break-word; } .case7-page .case7-content ul { min-width: 0 !important; } .case7-page .case7-table-wrap { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; } .case7-page .case7-table { width: max-content !important; min-width: min(620px, calc(100vw + 120px)) !important; max-width: none !important; } .case7-page .case7-table th, .case7-page .case7-table td { min-width: 120px; white-space: normal; } .red-band { padding: 72px 32px !important; min-height: auto !important; overflow: visible !important; clip-path: none !important; } .rb-text { font-size: clamp(34px, 10vw, 46px) !important; line-height: .96 !important; overflow-wrap: normal; } .rb-sub { font-size: 18px !important; line-height: 1.65 !important; } .inline-cta { padding: 42px 32px !important; } .inline-cta-btn, .pg-cta-btn, .pf-submit { width: 100% !important; min-height: 56px !important; white-space: normal !important; text-align: center !important; } .manifesto { padding: 60px 32px !important; overflow: visible !important; } .manifesto-text { font-size: clamp(25px, 7vw, 34px) !important; line-height: 1.1 !important; letter-spacing: -.04em !important; overflow-wrap: normal; } .s4-title, .web4-title, .ai4-title, .ld4-hero-title, .rb4-title { max-width: 100% !important; font-size: clamp(52px, 15vw, 72px) !important; line-height: .94 !important; overflow-wrap: normal; } .manifesto-text .mw { color: var(--white) !important; } .jobs-list { display: block !important; min-height: 0 !important; } .job-item { display: grid !important; grid-template-columns: 1fr auto !important; gap: 18px !important; padding: 30px 32px !important; } .ji-title { font-size: clamp(24px, 7.5vw, 34px) !important; line-height: 1.05 !important; } .ji-tags { flex-wrap: wrap !important; } .perk-row { display: block !important; padding: 32px !important; } .perk-ico { margin-bottom: 16px !important; } .pg-section { padding: 72px 32px !important; min-height: auto !important; overflow: visible !important; } .pg-form, .pg-form form, .pg-form [style*='grid-template-columns'] { display: block !important; } .pf-field { margin-bottom: 14px !important; } .pg-cta { padding: 60px 32px !important; } } @media (max-width: 520px) { #nav { padding: 0 28px !important; padding-left: max(28px, env(safe-area-inset-left, 0px)) !important; padding-right: max(28px, env(safe-area-inset-right, 0px)) !important; } .nav-logo img { height: 30px !important; } .page-hero, .ask-hero, .s4-hero, .web4-hero, .ai4-hero, .ld4-hero, .rb4-hero, .intro-mega, .pg-section, .sec-header, .manifesto, .red-band, .inline-cta, .pg-cta { padding-left: 24px !important; padding-right: 24px !important; } #principlesBlock .sec-header, #principlesBlock .feat-tabs { margin-left: 24px !important; margin-right: 24px !important; padding-left: 0 !important; padding-right: 0 !important; } #principlesBlock .sec-header { margin-left: 0 !important; margin-right: 0 !important; padding-left: 24px !important; padding-right: 24px !important; } } /* Mobile scrollytelling fallback: desktop keeps GSAP pin/scrub, touch screens get native scroll + stacked cards. */ @media (max-width: 900px) { .process-pin-section, .process-pin-section[data-steps="5"], .process-pin-section[data-steps="4"], .process-pin-section[data-steps="3"] { height: auto !important; min-height: 0 !important; overflow: visible !important; } .process-pin { position: relative !important; top: auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; transform: none !important; } .process-sticky { display: block !important; height: auto !important; min-height: 0 !important; } .process-text-col { display: block !important; padding: 64px 24px !important; min-height: 0 !important; border-right: 0 !important; } .process-slides { position: static !important; min-height: 0 !important; margin-top: 28px !important; display: grid !important; gap: 14px !important; } .pstep { position: relative !important; inset: auto !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; padding: 24px !important; border: 1px solid rgba(240,237,232,.08) !important; border-radius: var(--igm-card-radius) !important; background: rgba(12,12,12,.72) !important; } .pstep-title { font-size: clamp(24px, 7vw, 32px) !important; line-height: 1.08 !important; margin-bottom: 14px !important; } .pstep-desc { max-width: none !important; font-size: 15px !important; line-height: 1.65 !important; } .pstep-humor { display: block !important; margin-top: 14px !important; } .process-dots, .process-progress, .process-vis-col, .about-pin-cta { display: none !important; } .s4-vis-wrap { height: auto !important; min-height: 0 !important; overflow: visible !important; } .s4-vis-sticky { position: relative !important; top: auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; align-items: flex-start !important; padding: 64px 24px !important; } .s4-vis-content { display: block !important; } .s4-vis-heading { font-size: clamp(30px, 9vw, 40px) !important; } .s4-vis-body { max-width: none !important; } .s4-vis-steps { margin-top: 28px !important; } .s4-vstep { opacity: 1 !important; visibility: visible !important; transform: none !important; } .s4-process, .web4-proc-pin, .ld4-proc-pin, .ai4-proc-pin { overflow: visible !important; padding-top: 64px !important; padding-bottom: 64px !important; } .web4-proc-pin, .ld4-proc-pin { padding-left: 0 !important; padding-right: 0 !important; } .ai4-proc-pin { padding-left: 24px !important; padding-right: 24px !important; } .web4-proc-header, .ld4-proc-header, .ai4-proc-header { display: block !important; padding: 0 24px 28px !important; margin: 0 !important; } .ai4-proc-header { padding-left: 0 !important; padding-right: 0 !important; } .web4-proc-hint, .ld4-proc-hint, .ai4-proc-hint { display: none !important; } .web4-proc-wrap, .ld4-proc-wrap { padding: 0 24px !important; overflow: visible !important; } .web4-proc-track, .ld4-proc-track, .ai4-proc-track { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; padding-right: 0 !important; transform: none !important; will-change: auto !important; } .web4-proc-card, .ld4-proc-card, .ai4-pcard { width: auto !important; min-width: 0 !important; flex: none !important; padding: 24px !important; transform: none !important; } .ai4-pcard { min-height: 0 !important; } .ai4-pcard-tag { position: static !important; display: inline-block !important; margin-top: 18px !important; } .s4-proc-wrap { display: block !important; margin-top: 32px !important; } .s4-proc-stage { height: auto !important; perspective: none !important; display: grid !important; gap: 14px !important; } .s4-proc-card { position: relative !important; inset: auto !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; padding: 24px !important; margin: 0 !important; } .s4-proc-list-wrap { display: none !important; } .drag-section { min-height: 0 !important; height: auto !important; overflow: visible !important; padding: 64px 0 !important; } .drag-section-head { display: block !important; padding: 0 24px 34px !important; margin: 0 !important; } .drag-section-title { font-size: clamp(30px, 9vw, 42px) !important; line-height: 1.05 !important; max-width: calc(100vw - 48px) !important; } .drag-hint { position: relative !important; z-index: 2 !important; margin-top: 18px !important; align-items: center !important; } .drag-hint-icon { width: 44px !important; height: 44px !important; flex: 0 0 44px !important; } .drag-viewport { display: block !important; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-x: contain !important; cursor: auto !important; padding: 0 !important; scroll-snap-type: x mandatory !important; scroll-padding-inline: calc((100vw - min(76vw, 332px)) / 2) !important; } .drag-track { transform: none !important; width: max-content !important; max-width: none !important; display: flex !important; gap: 14px !important; padding: 0 calc((100vw - min(76vw, 332px)) / 2) 10px !important; will-change: auto !important; } .dc-card { flex: 0 0 min(76vw, 332px) !important; width: min(76vw, 332px) !important; min-width: min(76vw, 332px) !important; max-width: min(76vw, 332px) !important; min-height: 0 !important; padding: 26px 22px !important; scroll-snap-align: center !important; scroll-snap-stop: always; opacity: 1 !important; transform: none !important; } .dc-card-stat { font-size: clamp(28px, 8.4vw, 40px) !important; line-height: .95 !important; letter-spacing: -.065em !important; max-width: 100%; white-space: nowrap; overflow-wrap: normal; } .dc-card-stat span { display: inline; } .dc-card-title { font-size: 19px !important; line-height: 1.18 !important; } .dc-card-body { font-size: 13px !important; line-height: 1.6 !important; } .web4-st-word, .ld4-st-word, .rb4-mf-word { opacity: 1 !important; transform: none !important; } } /* Index7 phone repair: preserve the desktop "wow", but remove phone-only scroll-jacking and impossible line lengths. */ @media (max-width: 900px) { #hero { min-height: auto !important; height: auto !important; overflow: visible !important; } #hero .hero-inner { width: 100% !important; max-width: none !important; padding: 112px 24px 28px !important; } #hero .hero-tag { max-width: 280px !important; margin-bottom: 26px !important; font-size: 10px !important; line-height: 1.35 !important; letter-spacing: .13em !important; opacity: 1 !important; transform: none !important; } #hero .hero-h1 { max-width: 100% !important; font-size: clamp(36px, 11.1vw, 44px) !important; line-height: .92 !important; letter-spacing: -.058em !important; overflow: visible !important; } #hero .ht-line { overflow: visible !important; padding-bottom: .06em !important; margin-bottom: .02em !important; } #hero .ht-line--sub { padding-left: 0 !important; } #hero .ht-word { max-width: 100% !important; white-space: normal !important; opacity: 1 !important; transform: none !important; } #hero .hero-test-cta { width: calc(100vw - 48px) !important; max-width: calc(100vw - 48px) !important; min-height: 64px !important; margin-top: 28px !important; padding: 13px 12px 13px 18px !important; border-radius: 6px !important; gap: 0 !important; opacity: 1 !important; transform: none !important; } #hero .hero-test-cta span:first-child { flex: 1 1 auto !important; min-width: 0 !important; padding-right: 58px !important; font-size: 11px !important; line-height: 1.35 !important; letter-spacing: .075em !important; overflow-wrap: anywhere !important; } #hero .hero-test-cta span[aria-hidden="true"] { display: none !important; } #hero .hero-test-cta::after { content: '→' !important; position: absolute !important; top: 50% !important; right: 8px !important; transform: translateY(-50%) !important; width: 46px !important; height: 46px !important; border-radius: 5px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: var(--red) !important; color: #fff !important; font-size: 20px !important; line-height: 1 !important; z-index: 2 !important; } #hero .hero-stats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 20px !important; padding: 28px 24px 36px !important; margin-top: 24px !important; width: 100vw !important; max-width: 100% !important; overflow: hidden !important; opacity: 1 !important; transform: none !important; } #hero .hstat { padding: 0 !important; min-width: 0 !important; } #hero .hstat-sep { display: none !important; } #hero .hstat-n { font-size: clamp(30px, 10vw, 40px) !important; } #hero .hstat-l { font-size: 9px !important; line-height: 1.35 !important; letter-spacing: .12em !important; overflow-wrap: anywhere !important; } #about.about-section { height: auto !important; min-height: 0 !important; } #about .about-pin, #about .about-sticky, #about .about-text-col, #about .about-slides, #about .aslide { position: relative !important; inset: auto !important; min-height: 0 !important; height: auto !important; overflow: visible !important; } #about .about-pin { top: auto !important; } #about .about-sticky { display: block !important; } #about .about-text-col { display: block !important; padding: 64px 24px !important; } #about .about-label { margin-bottom: 32px !important; } #about .about-slides { display: grid !important; gap: 56px !important; } #about .aslide { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; } #about .aslide h2 { font-size: clamp(34px, 10vw, 44px) !important; line-height: .98 !important; letter-spacing: -.045em !important; margin-bottom: 20px !important; } #about .aslide h2 em { display: block !important; font-size: .96em !important; line-height: .98 !important; } #about .aslide p, #about .aslide-list li { font-size: 17px !important; line-height: 1.62 !important; } #about .intro-callout { margin-top: 28px !important; padding: 28px 22px !important; } #about .intro-callout .ic-text { font-size: 20px !important; line-height: 1.45 !important; } #about .about-visual-col, #about .about-progress, #about .about-pin-cta { display: none !important; } #services.services-section { height: auto !important; min-height: 0 !important; overflow: visible !important; padding: 64px 0 !important; } #services .svc-pin { position: relative !important; top: auto !important; height: auto !important; overflow: visible !important; } #services .svc-track { position: relative !important; width: 100% !important; height: auto !important; display: grid !important; gap: 14px !important; transform: none !important; padding: 0 24px !important; } #services .svc-panel { position: relative !important; inset: auto !important; width: 100% !important; min-height: 0 !important; height: auto !important; display: block !important; padding: 0 !important; overflow: hidden !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 6px !important; background: rgba(18,18,18,.94) !important; } #services .svc-panel.sp-bg--8 { background: var(--red) !important; } #services .sp-left { padding: 28px 24px !important; border-right: 0 !important; } #services .sp-eyebrow { position: static !important; margin: 0 0 16px !important; } #services .sp-name { font-size: clamp(28px, 8.4vw, 36px) !important; line-height: 1 !important; letter-spacing: -.035em !important; margin-bottom: 16px !important; } #services .sp-desc { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; font-size: 15px !important; line-height: 1.6 !important; margin-bottom: 18px !important; } #services .sp-cases-label { display: inline-block !important; margin-bottom: 10px !important; } #services .sp-case { display: block !important; font-size: 13px !important; line-height: 1.45 !important; } #services .sp-case:nth-child(2) { display: none !important; } #services .sp-right { display: block !important; min-height: 0 !important; padding: 0 24px 28px !important; } #services .spv-ghost, #services .svc-svg, #services .spv-word, #services .svc-counter, #services .svc-hint, #services .svc-progbar { display: none !important; } } @media (max-width: 390px) { #hero .hero-inner { padding-left: 18px !important; padding-right: 18px !important; } #hero .hero-h1 { font-size: clamp(32px, 10.4vw, 38px) !important; letter-spacing: -.06em !important; } #hero .hero-test-cta { padding-left: 15px !important; width: 312px !important; max-width: calc(100vw - 36px) !important; } #hero .hero-test-cta span:first-child { font-size: 10px !important; } .case7-page .case7-wrap { padding-left: 24px !important; padding-right: 24px !important; } } /* Mobile wow layer: native scrolling, crisp touch feedback, no pinned traps. */ @media (max-width: 900px) { html.igm-menu-open, body.igm-menu-open { overflow: hidden !important; touch-action: none; } .mobile-scroll-progress { position: fixed; top: 0; left: 0; width: 100vw; height: 2px; z-index: 4700; transform: scaleX(0); transform-origin: 0 50%; background: var(--red); pointer-events: none; box-shadow: 0 0 16px rgba(204,17,34,.45); } .igm-mobile-wow .mw-reveal { opacity: 0 !important; transform: translate3d(0, 28px, 0) scale(.992) !important; transition: opacity .62s cubic-bezier(.2,.8,.2,1), transform .72s cubic-bezier(.2,.8,.2,1); transition-delay: var(--mw-d, 0ms); will-change: opacity, transform; } .igm-mobile-wow .mw-reveal.mw-card { transform: translate3d(0, 22px, 0) scale(.975) !important; } .igm-mobile-wow .mw-reveal.mw-in { opacity: 1 !important; transform: translate3d(0, 0, 0) scale(1) !important; } .igm-mobile-wow .mw-press { transform: translate3d(0, 0, 0) scale(.985) !important; transition-duration: .08s !important; } .igm-mobile-wow .mw-snap { scroll-snap-type: x mandatory; scroll-padding-left: 24px; -webkit-overflow-scrolling: touch; } .igm-mobile-wow .mw-snap::-webkit-scrollbar { display: none; } .igm-mobile-wow .mw-snap > * { scroll-snap-align: start; } .igm-mobile-wow .drag-track > .dc-card, .igm-mobile-wow #services .svc-panel, .igm-mobile-wow .process-slides > .pstep, .igm-mobile-wow .blog7-filter { transition: opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, background-color .28s ease; } .igm-mobile-wow .drag-track > .dc-card:not(.mw-active), .igm-mobile-wow #services .svc-panel:not(.mw-active), .igm-mobile-wow .process-slides > .pstep:not(.mw-active) { opacity: .78; transform: scale(.965) !important; } .igm-mobile-wow .drag-track > .dc-card:not(.mw-active), .igm-mobile-wow .drag-track > .dc-card.mw-active, .igm-mobile-wow .drag-track > .dc-card.mw-reveal, .igm-mobile-wow .drag-track > .dc-card.mw-reveal.mw-card { opacity: 1 !important; transform: none !important; } .igm-mobile-wow .drag-track > .dc-card.mw-active, .igm-mobile-wow #services .svc-panel.mw-active, .igm-mobile-wow .process-slides > .pstep.mw-active { opacity: 1; transform: scale(1) !important; border-color: rgba(204,17,34,.42) !important; } .igm-mobile-wow .drag-viewport::after, .igm-mobile-wow #services .svc-track::after, .igm-mobile-wow .process-slides::after { content: ''; flex: 0 0 10px; width: 10px; } .igm-mobile-wow .process-text-col { padding-left: 0 !important; padding-right: 0 !important; } .igm-mobile-wow .process-text-col > .about-label, .igm-mobile-wow .process-text-col > .process-label { margin-left: 24px !important; margin-right: 24px !important; } .igm-mobile-wow .process-slides { display: flex !important; grid-template-columns: none !important; overflow-x: auto !important; overflow-y: visible !important; gap: 14px !important; margin-top: 28px !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 24px 18px !important; scroll-padding-left: 24px; -webkit-overflow-scrolling: touch; } .igm-mobile-wow .process-slides > .pstep { flex: 0 0 min(86vw, 390px) !important; width: min(86vw, 390px) !important; min-width: min(86vw, 390px) !important; align-self: stretch; display: flex !important; flex-direction: column; min-height: 560px; background: radial-gradient(circle at 86% 0%, rgba(204,17,34,.18), transparent 34%), rgba(16,16,16,.92) !important; box-shadow: 0 18px 42px rgba(0,0,0,.22); } .igm-mobile-wow .mobile-step-art { display: block; width: 100%; aspect-ratio: 1.18 / 1; margin: -8px -8px 22px; width: calc(100% + 16px); overflow: hidden; border-radius: calc(var(--igm-card-radius) - 2px); border: 1px solid rgba(240,237,232,.14); background: rgba(240,237,232,.92); box-shadow: 0 16px 40px rgba(0,0,0,.22); } .igm-mobile-wow .mobile-step-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .igm-mobile-wow .pstep-humor { margin-top: auto !important; padding-top: 18px !important; } .igm-mobile-wow #services.services-section { padding-top: 72px !important; padding-bottom: 40px !important; } .igm-mobile-wow #services .svc-track { display: flex !important; gap: 14px !important; overflow-x: auto !important; overflow-y: visible !important; width: 100% !important; max-width: 100% !important; padding: 0 24px 14px !important; } .igm-mobile-wow #services .svc-panel { flex: 0 0 min(82vw, 360px) !important; width: min(82vw, 360px) !important; min-width: min(82vw, 360px) !important; min-height: 420px !important; } .igm-mobile-wow #services .sp-left { min-height: 100%; display: flex !important; flex-direction: column; } .igm-mobile-wow #services .sp-cases { margin-top: auto; } .igm-mobile-wow #services .sp-case { border-left: 2px solid rgba(204,17,34,.75); padding-left: 12px !important; } .igm-mobile-wow .drag-viewport { scroll-padding-inline: calc((100vw - min(76vw, 332px)) / 2); } .igm-mobile-wow .dc-card { border-radius: 8px !important; } .igm-mobile-wow .ld4-niche { overflow-x: hidden !important; padding-left: 24px !important; padding-right: 24px !important; } .igm-mobile-wow .ld4-niche .ld4-ch-title { font-size: clamp(30px, 9.5vw, 42px) !important; line-height: 1.04 !important; max-width: 100% !important; overflow-wrap: break-word; } .igm-mobile-wow .ld4-niche-grid { grid-template-columns: 1fr !important; gap: 10px !important; max-width: 100% !important; overflow: visible !important; } .igm-mobile-wow .ld4-niche-item { width: 100% !important; min-width: 0 !important; padding: 20px 18px !important; box-sizing: border-box; } .igm-mobile-wow .ld4-niche-item-name { min-width: 0 !important; font-size: 16px !important; line-height: 1.28 !important; overflow-wrap: break-word; } .igm-mobile-wow .jobs-list { display: flex !important; gap: 14px !important; overflow-x: auto !important; padding: 0 24px 14px !important; } .igm-mobile-wow .job-item { /* narrower than the viewport so the next card clearly peeks (~48px), signalling the row scrolls sideways */ flex: 0 0 min(80vw, 340px) !important; width: min(80vw, 340px) !important; scroll-snap-align: center !important; border: 1px solid rgba(240,237,232,.12) !important; background: rgba(18,18,18,.86) !important; } .igm-mobile-wow .ft-tab, .igm-mobile-wow .acc-item, .igm-mobile-wow .case-row, .igm-mobile-wow .blog7-card, .igm-mobile-wow .pstep, .igm-mobile-wow .web4-proc-card, .igm-mobile-wow .ld4-proc-card, .igm-mobile-wow .ai4-pcard, .igm-mobile-wow .s4-proc-card { transition: transform .18s cubic-bezier(.2,.8,.2,1), background-color .18s ease, border-color .18s ease; } .igm-mobile-wow .ft-tab:active, .igm-mobile-wow .acc-item:active, .igm-mobile-wow .case-row:active, .igm-mobile-wow .blog7-card:active, .igm-mobile-wow .pstep:active, .igm-mobile-wow .web4-proc-card:active, .igm-mobile-wow .ld4-proc-card:active, .igm-mobile-wow .ai4-pcard:active, .igm-mobile-wow .s4-proc-card:active { transform: scale(.985) !important; border-color: rgba(204,17,34,.38) !important; } .igm-mobile-wow .mob-menu.open .mob-link, .igm-mobile-wow .mob-menu.open .mob-svc-link, .igm-mobile-wow .mob-menu.open .mob-menu-footer { animation: mobileMenuItemIn .34s cubic-bezier(.2,.8,.2,1) both; } .igm-mobile-wow .mob-menu.open .mob-link:nth-child(1) { animation-delay: .02s; } .igm-mobile-wow .mob-menu.open .mob-link:nth-child(2) { animation-delay: .05s; } .igm-mobile-wow .mob-menu.open .mob-link:nth-child(3) { animation-delay: .08s; } .igm-mobile-wow .mob-menu.open .mob-link:nth-child(4) { animation-delay: .11s; } .igm-mobile-wow .mob-menu.open .mob-link:nth-child(5) { animation-delay: .14s; } @keyframes mobileMenuItemIn { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } } @media (max-width: 900px) and (prefers-reduced-motion: reduce) { .mobile-scroll-progress { display: none !important; } .igm-mobile-wow .mw-reveal, .igm-mobile-wow .mw-reveal.mw-card, .igm-mobile-wow .mw-reveal.mw-in, .igm-mobile-wow .drag-track > .dc-card, .igm-mobile-wow #services .svc-panel { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } /* ── Cases carousel: snap + center peek ───────────── */ /* display:contents makes dc-card a direct child of drag-viewport so scroll-snap-align works on individual cards */ .igm-mobile-wow .drag-track { display: contents !important; transform: none !important; width: auto !important; padding: 0 !important; } .igm-mobile-wow .drag-viewport { display: flex !important; gap: 14px !important; padding: 0 calc(50% - min(39vw, 166px)) 10px !important; scroll-snap-type: x mandatory !important; scroll-padding-inline: calc(50% - min(39vw, 166px)) !important; -webkit-overflow-scrolling: touch !important; cursor: auto !important; } .igm-mobile-wow .dc-card { flex: 0 0 min(78vw, 332px) !important; width: min(78vw, 332px) !important; min-width: min(78vw, 332px) !important; max-width: min(78vw, 332px) !important; scroll-snap-align: center !important; } /* ── Process slides (What's included): narrower cards → peek ── */ .igm-mobile-wow .process-slides > .pstep { flex: 0 0 min(82vw, 370px) !important; width: min(82vw, 370px) !important; min-width: min(82vw, 370px) !important; } /* ── dc-card-stat: prevent long text overflow ─────── */ .igm-mobile-wow .dc-card-stat { font-size: clamp(28px, 9vw, 56px) !important; word-break: break-word !important; overflow-wrap: break-word !important; } /* ── Niche grid: prevent right overflow ───────────── */ .igm-mobile-wow .ld4-niche { overflow-x: hidden !important; } .igm-mobile-wow .ld4-niche-grid { max-width: 100% !important; overflow: hidden !important; } } /* ── Cases carousel swipe fix (all mobile users) ────────────────────────── The correct carousel layout below (drag-track:display:contents so each .dc-card becomes a direct flex child of the scroller and snaps on its own) previously lived ONLY inside the `prefers-reduced-motion` media query. So for the vast majority of users the fallback layout was active: the drag-track stayed a flex row that itself carried scroll-snap-align:start (via site7's `.mw-snap > *`) while the viewport had scroll-snap-type: x mandatory — a full-width snap-start child fighting mandatory snap, which is exactly why the cases block wouldn't swipe on the service pages. Lifting it into the normal mobile query. `.igm-mobile-wow` out-specifies the bare `.drag-track`/`.drag-viewport` fallback rules. */ @media (max-width: 900px) { .igm-mobile-wow .drag-track { display: contents !important; transform: none !important; width: auto !important; padding: 0 !important; } .igm-mobile-wow .drag-viewport { display: flex !important; gap: 14px !important; padding: 0 calc(50% - min(39vw, 166px)) 10px !important; /* mandatory (not proximity) so a released finger always completes to the nearest card, same as #services .svc-track on the home page (that one gets mandatory for free via the generic .mw-snap rule in site7.js). proximity was chosen during the original swipe-doesn't-work fix, but that bug was actually the drag-track not being display:contents yet (see comment above) — now that's fixed, mandatory is safe and matches the feel the user asked to replicate. */ scroll-snap-type: x mandatory !important; scroll-padding-inline: calc(50% - min(39vw, 166px)) !important; -webkit-overflow-scrolling: touch !important; cursor: auto !important; } .igm-mobile-wow .dc-card { flex: 0 0 min(78vw, 332px) !important; width: min(78vw, 332px) !important; min-width: min(78vw, 332px) !important; max-width: min(78vw, 332px) !important; scroll-snap-align: center !important; } } /* English-language utilities */ .igm-language-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;border:1px solid rgba(240,237,232,.3);background:transparent;color:#f0ede8;font:700 11px/1 Inter,Arial,sans-serif;letter-spacing:.12em;text-decoration:none;transition:background .2s,border-color .2s,color .2s}.igm-language-toggle:hover,.igm-language-toggle:focus-visible{background:#cc1122;border-color:#cc1122;color:#fff}.igm-form-error{margin:14px 0 0;color:#ff6b78!important;font-size:13px;line-height:1.45}.igm-form-success{padding:34px 0;text-align:center;display:grid;gap:9px}.igm-form-success strong{font-size:22px;color:var(--white,#f0ede8)}.igm-form-success span{font-size:14px;color:var(--g5,rgba(240,237,232,.6))}@media(max-width:900px){#nav .igm-language-toggle{position:absolute;right:74px;top:18px;min-width:36px;height:36px}}@media(max-width:640px){#nav .igm-language-toggle{right:72px;top:20px}} /* ────────────────────────────────────────────────────────────── Hero heading width. The block was capped at 1120px, a value fitted tightly around the Russian headline. At the maximum type size (168px, reached from a ~1740px viewport) the middle line no longer fits, wraps to a fourth line and pushes the CTA down onto the marquee. 1240px clears both languages at full size and changes nothing for lines that already fitted, so only the wrap point moves. ────────────────────────────────────────────────────────────── */ @media (min-width: 901px) { .hero-h1 { max-width: 1280px; } } /* ────────────────────────────────────────────────────────────── Reduced motion: statement words. On mobile #stmtWords span starts at opacity:.15 and is lit by the .mob-lit class from initStatement(), which returns early behind `if (REDUCE) return`. The blanket [class*='reveal'] rule does not catch these spans — they carry no class containing "reveal". The section therefore stayed at 15% opacity, i.e. visually empty, for anyone with reduced motion on. Show it immediately instead. ────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { #stmtWords span, .stmt-words span { opacity: 1 !important; transition: none !important; } }