/* Insights Hub V3 — Datavations External stylesheet loaded via Page Settings code. Structural selectors target whtml_builder-produced DOM. */ /* ── ROOT / BODY / SHARED ────────────────────────────────────── */ html { scroll-behavior: smooth !important; scroll-padding-top: 4rem !important; } body { background-color: #1a0518 !important; } #mobile-nav { position: sticky !important; top: 0 !important; z-index: 9999 !important; display: block !important; visibility: visible !important; opacity: 1 !important; background: #1a0518 !important; } body > :first-child { position: relative !important; z-index: 1000 !important; } /* Shared section reset (all 6 sections) */ body > section:nth-of-type(n+1):nth-of-type(-n+6) { font-family: Manrope, sans-serif !important; box-sizing: border-box !important; padding: 7.5rem 0 !important; } body > section:nth-of-type(n+1):nth-of-type(-n+6) > div { width: 100% !important; max-width: 72rem !important; margin: 0 auto !important; padding: 0 2rem !important; box-sizing: border-box !important; } /* ── S1 — HERO + FEATURED LOCKUP ─────────────────────────────── */ body > section:nth-of-type(1) { background: #1a0518 !important; padding: 7rem 0 5rem !important; position: relative !important; overflow: hidden !important; z-index: 2 !important; } body > section:nth-of-type(1)::before { content: '' !important; position: absolute !important; top: -180px !important; right: -180px !important; width: 560px !important; height: 560px !important; border-radius: 50% !important; border: 1px solid rgba(212,150,237,0.12) !important; pointer-events: none !important; } body > section:nth-of-type(1)::after { content: '' !important; position: absolute !important; bottom: -200px !important; left: -100px !important; width: 420px !important; height: 420px !important; border-radius: 50% !important; border: 1px solid rgba(163,86,194,0.08) !important; pointer-events: none !important; } body > section:nth-of-type(1) > div { display: grid !important; grid-template-columns: 1fr 1.15fr !important; gap: 4rem !important; align-items: center !important; position: relative !important; z-index: 1 !important; } /* Copy column */ body > section:nth-of-type(1) > div > div:first-child > span:first-child { font-family: Quicksand, sans-serif !important; font-weight: 600 !important; font-size: 0.875rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: #d496ed !important; display: block !important; margin-bottom: 1rem !important; } body > section:nth-of-type(1) > div > div:first-child > hr { display: block !important; width: 72px !important; height: 3px !important; background: #d496ed !important; margin-bottom: 1.5rem !important; border: none !important; } body > section:nth-of-type(1) > div > div:first-child > h1 { font-family: Fraunces, serif !important; font-weight: 500 !important; font-size: clamp(2.25rem, 4.5vw, 3.75rem) !important; color: #fafafa !important; line-height: 1.05 !important; letter-spacing: -0.015em !important; margin-bottom: 1.5rem !important; } body > section:nth-of-type(1) > div > div:first-child > p { font-family: Manrope, sans-serif !important; font-size: 1.125rem !important; color: #d8c9dc !important; max-width: 42ch !important; line-height: 1.6 !important; margin-bottom: 2.25rem !important; font-weight: 400 !important; } body > section:nth-of-type(1) > div > div:first-child > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.4rem !important; padding: 1rem 1.75rem !important; border-radius: 0.5rem !important; font-family: Manrope, sans-serif !important; font-weight: 600 !important; font-size: 1rem !important; background: transparent !important; color: #fafafa !important; border: 1px solid #d496ed !important; text-decoration: none !important; transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease, box-shadow 280ms ease !important; } /* Featured lockup card */ body > section:nth-of-type(1) > div > article { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 0.75rem !important; overflow: hidden !important; transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), border-color 280ms ease, background 280ms ease !important; text-decoration: none !important; display: block !important; } body > section:nth-of-type(1) > div > article > div:first-child { position: relative !important; aspect-ratio: 16 / 9 !important; background: linear-gradient(135deg, #3e1241 0%, #4f1566 100%) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } body > section:nth-of-type(1) > div > article > div:first-child::before { content: '' !important; position: absolute !important; inset: 0 !important; background: radial-gradient(ellipse at 30% 40%, rgba(212,150,237,0.18) 0%, transparent 60%) !important; } body > section:nth-of-type(1) > div > article > div:first-child > span:first-child { position: absolute !important; top: 1rem !important; left: 1rem !important; background: rgba(0,0,0,0.55) !important; color: #fafafa !important; font-family: Quicksand, sans-serif !important; font-size: 0.7rem !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; padding: 0.3rem 0.7rem !important; border-radius: 3px !important; z-index: 2 !important; } body > section:nth-of-type(1) > div > article > div:first-child > span:last-child { position: relative !important; font-size: 3.5rem !important; opacity: 0.3 !important; font-family: Fraunces, serif !important; color: #fafafa !important; letter-spacing: -0.04em !important; } body > section:nth-of-type(1) > div > article > div:last-child { padding: 1.75rem 2rem 2rem !important; } body > section:nth-of-type(1) > div > article > div:last-child > div:first-child { font-family: Quicksand, sans-serif !important; font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #d496ed !important; margin-bottom: 0.85rem !important; } body > section:nth-of-type(1) > div > article > div:last-child > h2 { font-family: Fraunces, serif !important; font-weight: 500 !important; font-size: clamp(1.35rem, 1.8vw, 1.75rem) !important; color: #fafafa !important; line-height: 1.25 !important; margin-bottom: 0.85rem !important; } body > section:nth-of-type(1) > div > article > div:last-child > p { font-family: Manrope, sans-serif !important; color: rgba(250,250,250,0.7) !important; font-size: 0.975rem !important; line-height: 1.6 !important; margin-bottom: 1.25rem !important; } body > section:nth-of-type(1) > div > article > div:last-child > span { display: inline-flex !important; align-items: center !important; gap: 0.3rem !important; font-family: Manrope, sans-serif !important; font-size: 0.875rem !important; font-weight: 600 !important; color: #d496ed !important; transition: gap 280ms cubic-bezier(0.22, 1, 0.36, 1) !important; } /* ── S2 — FILTER + CONTENT GRID ──────────────────────────────── */ body > section:nth-of-type(2) { background: #fafafa !important; padding: 6rem 0 !important; } body > section:nth-of-type(2) > div > div:nth-of-type(1) { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; margin-bottom: 2rem !important; flex-wrap: wrap !important; gap: 1rem !important; } body > section:nth-of-type(2) > div > div:nth-of-type(1) > div:first-child > span:first-child { font-family: Quicksand, sans-serif !important; font-weight: 600 !important; font-size: 0.875rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: #4f1566 !important; display: block !important; margin-bottom: 1rem !important; } body > section:nth-of-type(2) > div > div:nth-of-type(1) > div:first-child > hr { display: block !important; width: 72px !important; height: 3px !important; background: #4f1566 !important; margin-bottom: 1.5rem !important; border: none !important; } body > section:nth-of-type(2) > div > div:nth-of-type(1) > div:first-child > h2 { font-family: Fraunces, serif !important; font-weight: 500 !important; font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important; color: #1a0518 !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; } body > section:nth-of-type(2) > div > div:nth-of-type(1) > div:last-child { font-family: Manrope, sans-serif !important; font-size: 0.875rem !important; color: #b8a5be !important; } body > section:nth-of-type(2) > div > div:nth-of-type(1) > div:last-child > strong { color: #3d2d42 !important; font-weight: 600 !important; } /* Filter pill bar */ body > section:nth-of-type(2) > div > nav { display: flex !important; gap: 0.5rem !important; flex-wrap: wrap !important; margin-bottom: 2.5rem !important; padding-bottom: 2rem !important; border-bottom: 1px solid #d8c9dc !important; } body > section:nth-of-type(2) > div > nav > a { font-family: Manrope, sans-serif !important; font-size: 0.875rem !important; font-weight: 600 !important; color: #3d2d42 !important; background: transparent !important; border: 1px solid #d8c9dc !important; padding: 0.55rem 1.1rem !important; border-radius: 999px !important; cursor: pointer !important; transition: all 200ms ease !important; text-decoration: none !important; } body > section:nth-of-type(2) > div > nav > a[aria-selected="true"] { background: #4f1566 !important; border-color: #4f1566 !important; color: #fafafa !important; } /* Content grid */ body > section:nth-of-type(2) > div > div:nth-of-type(2) { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1.5rem !important; } body > section:nth-of-type(2) > div > div:nth-of-type(2)[data-active-filter="articles"] article:not([data-type="article"]) { display: none !important; } body > section:nth-of-type(2) > div > div:nth-of-type(2)[data-active-filter="videos"] article:not([data-type="video"]) { display: none !important; } body > section:nth-of-type(2) > div > div:nth-of-type(2)[data-active-filter="case-studies"] article:not([data-type="case-study"]) { display: none !important; } body > section:nth-of-type(2) article[data-page-hidden] { display: none !important; } /* Content cards */ body > section:nth-of-type(2) article { background: #ffffff !important; border: 1px solid #d8c9dc !important; border-radius: 0.75rem !important; overflow: hidden !important; transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease !important; display: flex !important; flex-direction: column !important; } body > section:nth-of-type(2) article > a > div { height: 180px !important; position: relative !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(135deg, #1a0518 0%, #4f1566 100%) !important; } body > section:nth-of-type(2) article > a > div::before { content: '' !important; position: absolute !important; inset: 0 !important; background: radial-gradient(ellipse at 40% 60%, rgba(212,150,237,0.15) 0%, transparent 65%) !important; } body > section:nth-of-type(2) article > a > div > span:nth-child(1) { position: relative !important; font-size: 2.5rem !important; opacity: 0.35 !important; color: #fafafa !important; font-family: Fraunces, serif !important; letter-spacing: -0.04em !important; z-index: 1 !important; } body > section:nth-of-type(2) article > a > div > span:nth-child(2) { position: absolute !important; bottom: 1rem !important; left: 1rem !important; background: rgba(0,0,0,0.55) !important; color: #fafafa !important; font-family: Quicksand, sans-serif !important; font-size: 0.65rem !important; font-weight: 600 !important; padding: 0.2rem 0.65rem !important; border-radius: 3px !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; z-index: 2 !important; } body > section:nth-of-type(2) article > a > div > span:nth-child(3) { position: absolute !important; bottom: 1rem !important; right: 1rem !important; background: rgba(0,0,0,0.7) !important; color: #fafafa !important; font-family: Manrope, sans-serif !important; font-size: 0.7rem !important; font-weight: 600 !important; padding: 0.2rem 0.55rem !important; border-radius: 3px !important; z-index: 2 !important; } body > section:nth-of-type(2) article > a > div > img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; z-index: 1 !important; } body > section:nth-of-type(1) > div > article > div:first-child > img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; z-index: 1 !important; } body > section:nth-of-type(2) article > div { padding: 1.5rem !important; display: flex !important; flex-direction: column !important; flex-grow: 1 !important; } body > section:nth-of-type(2) article > div > div:first-child { font-family: Quicksand, sans-serif !important; font-size: 0.7rem !important; font-weight: 600 !important; color: #4f1566 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; margin-bottom: 0.6rem !important; } body > section:nth-of-type(2) article > div > h4 { font-family: Fraunces, serif !important; font-weight: 500 !important; font-size: 1.125rem !important; color: #1a0518 !important; line-height: 1.3 !important; margin-bottom: 0.65rem !important; } body > section:nth-of-type(2) article > div > p { font-family: Manrope, sans-serif !important; font-size: 0.925rem !important; color: #3d2d42 !important; line-height: 1.55 !important; margin-bottom: 1.1rem !important; flex-grow: 1 !important; } body > section:nth-of-type(2) article > div > div:last-child { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 0.5rem !important; padding-top: 0.85rem !important; border-top: 1px solid #d8c9dc !important; font-size: 0.78rem !important; color: #b8a5be !important; font-family: Manrope, sans-serif !important; } body > section:nth-of-type(2) article > div > div:last-child > span { white-space: nowrap !important; } body > section:nth-of-type(2) article > div > div:last-child > a { white-space: nowrap !important; } body > section:nth-of-type(2) article > div > div:last-child > a { font-family: Manrope, sans-serif !important; font-size: 0.8rem !important; font-weight: 600 !important; color: #4f1566 !important; display: inline-flex !important; align-items: center !important; gap: 0.25rem !important; transition: gap 280ms cubic-bezier(0.22, 1, 0.36, 1) !important; text-decoration: none !important; } /* Load more wrap */ body > section:nth-of-type(2) > div > div:nth-of-type(3) { display: flex !important; justify-content: center !important; margin-top: 3rem !important; } body > section:nth-of-type(2) > div > div:nth-of-type(3) > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 1rem 1.75rem !important; border-radius: 0.5rem !important; font-family: Manrope, sans-serif !important; font-weight: 600 !important; font-size: 1rem !important; background: transparent !important; color: #4f1566 !important; border: 1px solid #4f1566 !important; cursor: pointer !important; transition: all 200ms ease !important; text-decoration: none !important; } /* ── S3 — EDITOR'S PICKS ─────────────────────────────────────── */ body > section:nth-of-type(3) { background: #ffffff !important; padding: 7rem 0 !important; } body > section:nth-of-type(3) > div > div:first-child { margin-bottom: 3rem !important; } body > section:nth-of-type(3) > div > div:first-child > span:first-child { font-family: Quicksand, sans-serif !important; font-weight: 600 !important; font-size: 0.875rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: #4f1566 !important; display: block !important; margin-bottom: 1rem !important; } body > section:nth-of-type(3) > div > div:first-child > hr { display: block !important; width: 72px !important; height: 3px !important; background: #4f1566 !important; margin-bottom: 1.5rem !important; border: none !important; } body > section:nth-of-type(3) > div > div:first-child > h2 { font-family: Fraunces, serif !important; font-weight: 500 !important; font-size: clamp(2rem, 4.5vw, 3.5rem) !important; color: #1a0518 !important; line-height: 1.1 !important; letter-spacing: -0.01em !important; } body > section:nth-of-type(3) > div > div:first-child > p { font-family: Manrope, sans-serif !important; font-size: 1.125rem !important; color: #3d2d42 !important; max-width: 60ch !important; margin-top: 1rem !important; line-height: 1.55 !important; } body > section:nth-of-type(3) > div > div:last-child { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1.75rem !important; } body > section:nth-of-type(3) > div > div:last-child > a { display: flex !important; flex-direction: column !important; gap: 1rem !important; text-decoration: none !important; color: inherit !important; transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1) !important; } body > section:nth-of-type(3) > div > div:last-child > a > div:first-child { aspect-ratio: 4 / 3 !important; background: linear-gradient(135deg, #3e1241 0%, #4f1566 100%) !important; border-radius: 0.75rem !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; overflow: hidden !important; } body > section:nth-of-type(3) > div > div:last-child > a > div:first-child::before { content: '' !important; position: absolute !important; inset: 0 !important; background: radial-gradient(ellipse at 35% 35%, rgba(212,150,237,0.18) 0%, transparent 65%) !important; } body > section:nth-of-type(3) > div > div:last-child > a > div:first-child > span { position: relative !important; font-size: 3rem !important; opacity: 0.35 !important; color: #fafafa !important; font-family: Fraunces, serif !important; } body > section:nth-of-type(3) > div > div:last-child > a > div:first-child > img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; z-index: 1 !important; } body > section:nth-of-type(3) > div > div:last-child > a > div:nth-child(2) { font-family: Quicksand, sans-serif !important; font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #4f1566 !important; } body > section:nth-of-type(3) > div > div:last-child > a > h3 { font-family: Fraunces, serif !important; font-weight: 500 !important; font-size: 1.5rem !important; color: #1a0518 !important; line-height: 1.2 !important; letter-spacing: -0.005em !important; } body > section:nth-of-type(3) > div > div:last-child > a > p { font-family: Manrope, sans-serif !important; font-size: 1rem !important; color: #3d2d42 !important; line-height: 1.6 !important; } body > section:nth-of-type(3) > div > div:last-child > a > span { display: inline-flex !important; align-items: center !important; gap: 0.3rem !important; font-family: Manrope, sans-serif !important; font-size: 0.875rem !important; font-weight: 600 !important; color: #4f1566 !important; align-self: flex-start !important; margin-top: 0.25rem !important; transition: gap 280ms cubic-bezier(0.22, 1, 0.36, 1) !important; } /* ── S4 — TOPIC COLLECTIONS (hidden) ─────────────────────────── */ body > section:nth-of-type(4) { display: none !important; } /* ── S5 — PULLQUOTE + PROOF ──────────────────────────────────── */ body > section:nth-of-type(5) { background: linear-gradient(180deg, #fafafa 0%, #f8f0fc 100%) !important; padding: 4.5rem 0 !important; } body > section:nth-of-type(5) > div { max-width: 780px !important; text-align: center !important; } body > section:nth-of-type(5) > div > blockquote { font-family: Fraunces, serif !important; font-style: italic !important; font-weight: 400 !important; font-size: clamp(1.15rem, 1.9vw, 1.5rem) !important; color: #1a0518 !important; line-height: 1.55 !important; margin-bottom: 1.5rem !important; border: none !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; } body > section:nth-of-type(5) > div > blockquote > span { font-size: 3.5rem !important; line-height: 0 !important; vertical-align: -0.4rem !important; color: #d496ed !important; opacity: 0.55 !important; font-style: normal !important; margin-right: 0.1rem !important; } body > section:nth-of-type(5) > div > p { font-family: Manrope, sans-serif !important; font-weight: 600 !important; font-size: 0.875rem !important; color: #3d2d42 !important; margin-bottom: 1.75rem !important; } body > section:nth-of-type(5) > div > p > span { display: block !important; font-weight: 400 !important; color: #b8a5be !important; font-size: 0.8rem !important; margin-top: 0.2rem !important; } body > section:nth-of-type(5) > div > span { font-family: Quicksand, sans-serif !important; font-size: 0.8rem !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #b8a5be !important; padding-top: 1.5rem !important; border-top: 1px solid #d8c9dc !important; display: inline-block !important; } /* ── S6 — SOFT BOTTOM CTA ────────────────────────────────────── */ body > section:nth-of-type(6) { background: #1a0518 !important; padding: 6rem 0 !important; text-align: center !important; position: relative !important; overflow: hidden !important; } body > section:nth-of-type(6)::before { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 720px !important; height: 280px !important; border-radius: 50% !important; background: radial-gradient(ellipse, rgba(212,150,237,0.06) 0%, transparent 65%) !important; pointer-events: none !important; } body > section:nth-of-type(6) > div > h2 { font-family: Fraunces, serif !important; font-weight: 500 !important; font-size: clamp(2rem, 4vw, 3rem) !important; color: #fafafa !important; line-height: 1.15 !important; margin-bottom: 1.25rem !important; position: relative !important; z-index: 1 !important; letter-spacing: -0.01em !important; } body > section:nth-of-type(6) > div > p { font-family: Manrope, sans-serif !important; color: #d8c9dc !important; font-size: 1.0625rem !important; max-width: 38rem !important; margin: 0 auto 2.25rem !important; line-height: 1.6 !important; position: relative !important; z-index: 1 !important; } body > section:nth-of-type(6) > div > div { display: flex !important; gap: 0.85rem !important; justify-content: center !important; flex-wrap: wrap !important; position: relative !important; z-index: 1 !important; } body > section:nth-of-type(6) > div > div > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.4rem !important; padding: 1rem 1.75rem !important; border-radius: 0.5rem !important; font-family: Manrope, sans-serif !important; font-weight: 600 !important; font-size: 1rem !important; text-decoration: none !important; border: 1px solid transparent !important; transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease, box-shadow 280ms ease !important; } body > section:nth-of-type(6) > div > div > a:first-child { background: #4f1566 !important; color: #fafafa !important; border-color: #4f1566 !important; } body > section:nth-of-type(6) > div > div > a:last-child { background: transparent !important; color: #fafafa !important; border-color: #d496ed !important; } /* ── HOVER STATES ────────────────────────────────────────────── */ @media (hover: hover) and (pointer: fine) { body > section:nth-of-type(1) > div > div:first-child > a:hover { background: rgba(255,255,255,0.1) !important; border-color: #fafafa !important; transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(212,150,237,0.15) !important; } body > section:nth-of-type(1) > div > article:hover { background: rgba(255,255,255,0.07) !important; border-color: rgba(212,150,237,0.4) !important; transform: translateY(-4px) !important; } body > section:nth-of-type(1) > div > article:hover > div:last-child > span { gap: 0.6rem !important; } body > section:nth-of-type(2) > div > nav > a:hover { border-color: #4f1566 !important; color: #4f1566 !important; } body > section:nth-of-type(2) > div > nav > a[aria-selected="true"]:hover { background: #3e1241 !important; color: #fafafa !important; } body > section:nth-of-type(2) article:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 32px rgba(62,18,65,0.1) !important; } body > section:nth-of-type(2) > div > div:nth-of-type(3) > a:hover { background: #4f1566 !important; color: #fafafa !important; transform: translateY(-3px) !important; } body > section:nth-of-type(3) > div > div:last-child > a:hover { transform: translateY(-4px) !important; } body > section:nth-of-type(3) > div > div:last-child > a:hover > span { gap: 0.6rem !important; } body > section:nth-of-type(6) > div > div > a:first-child:hover { background: #3e1241 !important; border-color: #3e1241 !important; transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(212,150,237,0.15) !important; } body > section:nth-of-type(6) > div > div > a:last-child:hover { background: rgba(255,255,255,0.1) !important; border-color: #fafafa !important; transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(212,150,237,0.15) !important; } } /* ── FOCUS RINGS ─────────────────────────────────────────────── */ body > section:nth-of-type(1) a:focus-visible { outline: 2px solid #d496ed !important; outline-offset: 4px !important; border-radius: 4px !important; } body > section:nth-of-type(2) nav a:focus-visible { outline: 2px solid #4f1566 !important; outline-offset: 4px !important; border-radius: 4px !important; } body > section:nth-of-type(2) a:focus-visible { outline: 2px solid #4f1566 !important; outline-offset: 4px !important; border-radius: 4px !important; } body > section:nth-of-type(3) a:focus-visible { outline: 2px solid #4f1566 !important; outline-offset: 4px !important; border-radius: 4px !important; } body > section:nth-of-type(6) a:focus-visible { outline: 2px solid #d496ed !important; outline-offset: 4px !important; border-radius: 4px !important; } /* ── RESPONSIVE ──────────────────────────────────────────────── */ @media screen and (max-width: 991px) { body > section:nth-of-type(1) > div { grid-template-columns: 1fr !important; gap: 3rem !important; } body > section:nth-of-type(2) > div > div:nth-of-type(2) { grid-template-columns: repeat(2, 1fr) !important; } body > section:nth-of-type(3) > div > div:last-child { grid-template-columns: 1fr !important; gap: 2.5rem !important; } } @media screen and (max-width: 767px) { body > section:nth-of-type(n+1):nth-of-type(-n+6) { padding: 5rem 0 !important; } body > section:nth-of-type(1) { padding: 5rem 0 3.5rem !important; } body > section:nth-of-type(2) > div > div:nth-of-type(1) { flex-direction: column !important; align-items: flex-start !important; } body > section:nth-of-type(2) > div > div:nth-of-type(2) { grid-template-columns: 1fr !important; } body > section:nth-of-type(2) article > a > div { height: auto !important; aspect-ratio: 16 / 9 !important; } } @media screen and (max-width: 479px) { body > section:nth-of-type(n+1):nth-of-type(-n+6) > div { padding: 0 1.25rem !important; } body > section:nth-of-type(1) > div > div:first-child > h1 { font-size: 2rem !important; } body > section:nth-of-type(1) > div > article > div:last-child { padding: 1.25rem 1.5rem 1.75rem !important; } } /* ── REDUCED MOTION ──────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { body > section:nth-of-type(n+1):nth-of-type(-n+6) a { transition: none !important; } body > section:nth-of-type(n+1):nth-of-type(-n+6) nav a { transition: none !important; } body > section:nth-of-type(n+1):nth-of-type(-n+6) article { transition: none !important; } } /* ── FOOTER BLEND ────────────────────────────────────────────── */ section.new-footer { position: relative !important; } section.new-footer::before { content: '' !important; position: absolute !important; top: -6rem !important; left: 0 !important; right: 0 !important; height: 10rem !important; background: linear-gradient(to bottom, #1a0518 0%, #1a0518 40%, transparent 100%) !important; z-index: 1 !important; pointer-events: none !important; }