/* audience-common.css — extends master-common.css for /markets/, /sectors/, /case-studies/, /field-guides/, /careers/ */ /* Audience hero — flat dark band, code badge, lede, no video */ #abt .aud-hero { background: #0a0a0c; color: #fafaf9; padding: 4rem 0 3rem; position: relative; overflow: hidden; } #abt .aud-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.12); z-index: 3; } #abt .aud-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.12); z-index: 3; } /* Hero stock-image (optional): set via inline style="background-image:url(...)" */ /* Treatment is intentionally MILDER than before so photos are visible & impactful */ /* (was: grayscale 60% / brightness 0.45 / opacity 0.55 — washed out) */ #abt .aud-hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(15%) brightness(0.62) saturate(1.05); opacity: 0.85; z-index: 0; } #abt .aud-hero-tint { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(2,109,191,0.22) 0%, rgba(10,10,12,0.55) 60%, rgba(10,10,12,0.75) 100%); z-index: 1; } /* ---- KALEIDOSCOPE HERO (used on service-line + upstream hubs) ---- */ /* 2x2 grid of mirrored video copies. Cell 1 normal, 2 flipped X, 3 flipped Y, 4 flipped XY. Browser caches the WebM after first decode; cells 2-4 share buffers efficiently. */ #abt .aud-hero-kaleido { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0; overflow: hidden; pointer-events: none; } #abt .aud-hero-kaleido .kaleido-cell { width: 100%; height: 100%; object-fit: cover; opacity: 0.78; filter: grayscale(45%) saturate(1.12) brightness(0.72); } #abt .aud-hero-kaleido .kaleido-cell-1 { transform: scale(1, 1); } #abt .aud-hero-kaleido .kaleido-cell-2 { transform: scale(-1, 1); } #abt .aud-hero-kaleido .kaleido-cell-3 { transform: scale(1, -1); } #abt .aud-hero-kaleido .kaleido-cell-4 { transform: scale(-1, -1); } /* Soft brand-blue vignette ring tinting the kaleidoscope center & masking the seams. */ #abt .aud-hero-kaleido-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 0%, rgba(10,10,12,0.18) 38%, rgba(10,10,12,0.55) 75%, rgba(10,10,12,0.78) 100%), linear-gradient(0deg, var(--kaleido-accent, #3B9DEB) 0%, transparent 8%); mix-blend-mode: normal; } #abt .aud-hero-kaleido-vignette::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,109,191,0.10) 0%, transparent 30%, transparent 70%, rgba(2,109,191,0.10) 100%); } /* Hide the kaleidoscope altogether when the user prefers reduced motion. The underlying flat dark `.aud-hero` background remains; text stays legible. */ @media (prefers-reduced-motion: reduce) { #abt .aud-hero-kaleido { display: none; } #abt .aud-hero-kaleido-vignette { display: none; } } /* ---- FEATURE FIGURE — full-bleed cinematic image w/ scroll-driven zoom ---- Webflow / Awwwards-style "ken burns" parallax: the image scales from 1.18 to 1.0 as the section passes through the viewport. Native CSS where supported, JS fallback in js_block for Firefox + older Safari. */ /* The section wrapper kills horizontal padding so the figure goes edge-to-edge */ #abt .feature-figure-section { padding-left: 0 !important; padding-right: 0 !important; } #abt .feature-figure-section > .reveal-fade { padding: 0; } /* Base figure styles (kept for backwards-compat with any old non-bleed usage) */ #abt .feature-figure { position: relative; margin: 2.5rem 0; border: 1px solid #d4cdc0; border-radius: 6px; overflow: hidden; } #abt .feature-figure-img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; filter: grayscale(8%) saturate(1.05); } /* FULL-BLEED variant — the new default. No border, no rounded corners, fills the section width. Aspect ratio is taller (4/3 mobile → 21/9 desktop) so the image reads as a cinematic frame, not a thin band. */ #abt .feature-figure-bleed { margin: 0; border: 0; border-radius: 0; aspect-ratio: 4 / 3; max-width: 100%; } @media (min-width: 768px) { #abt .feature-figure-bleed { aspect-ratio: 21 / 9; } } @media (min-width: 1280px) { #abt .feature-figure-bleed { aspect-ratio: 24 / 9; } } /* Zoom container — clips the over-scaled image. Image inside scales between 1.18 → 1.0 driven by scroll (CSS view-timeline OR JS rAF fallback). */ #abt .feature-figure-zoom { position: absolute; inset: 0; overflow: hidden; } #abt .feature-figure-bleed .feature-figure-img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transform: scale(1.18); transform-origin: center center; will-change: transform; transition: transform 0.05s linear; } /* Native scroll-driven zoom (Chrome 115+ / Edge / Safari 26+). Maps the image's transform to its position within the viewport — image reaches scale(1) at the natural mid-scroll point and the bleed is invisible. */ @supports (animation-timeline: view()) { #abt .feature-figure-bleed .feature-figure-img { animation: ff-zoom linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; transition: none; } } @keyframes ff-zoom { from { transform: scale(1.22); } to { transform: scale(1.02); } } /* Caption — overlay at bottom, constrained max-width with center alignment */ #abt .feature-figure-cap { position: absolute; left: 0; right: 0; bottom: 1.4rem; z-index: 2; color: #fafaf9; } #abt .feature-figure-cap-inner { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } @media (min-width: 768px) { #abt .feature-figure-cap { bottom: 2.2rem; } #abt .feature-figure-cap-inner { padding: 0 2.5rem; } } #abt .feature-figure-cap-band { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,12,0.88) 0%, rgba(10,10,12,0.45) 30%, rgba(10,10,12,0.0) 65%); z-index: 1; pointer-events: none; } #abt .feature-figure-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; color: #3B9DEB; margin-bottom: 0.5rem; } #abt .feature-figure-title { font-family: 'Fraunces', serif; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: #fafaf9; max-width: 920px; } @media (min-width: 768px) { #abt .feature-figure-title { font-size: 1.85rem; } } @media (min-width: 1280px) { #abt .feature-figure-title { font-size: 2.15rem; } } /* Reduced-motion: no scroll-zoom, settle on scale(1) */ @media (prefers-reduced-motion: reduce) { #abt .feature-figure-bleed .feature-figure-img { animation: none !important; transform: scale(1.04) !important; } } #abt .aud-hero > .max-w-7xl { position: relative; z-index: 2; } #abt .aud-code { display: inline-flex; align-items: center; gap: 0.6rem; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; color: #d6d3d1; margin-bottom: 1.5rem; flex-wrap: wrap; } #abt .aud-code .badge { background: #3B9DEB; color: #0a0a0c; padding: 0.25rem 0.55rem; letter-spacing: 0.12em; font-weight: 800; } #abt .aud-code a { color: #a8a29e; text-decoration: none; } #abt .aud-code a:hover { color: #fafaf9; } #abt .aud-h1 { font-family: 'Fraunces', serif; font-size: 2.4rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: #fafaf9; margin-bottom: 1rem; } @media (min-width: 768px) { #abt .aud-h1 { font-size: 3.2rem; } } @media (min-width: 1024px) { #abt .aud-h1 { font-size: 3.6rem; } } #abt .aud-h1 .accent { color: #3B9DEB; font-style: italic; } #abt .aud-lede { font-size: 1.05rem; color: #d6d3d1; max-width: 60ch; line-height: 1.55; margin-bottom: 1.6rem; } /* HERO 2-COLUMN GRID — left = positioning copy / oversized name / CTAs; right = floating spec card. Mirrors the homepage hero pattern (left text + right specimen) so service-hub heroes don't read as left-loaded against the kaleidoscope video. Below 1024px collapses to single column with the spec card stacking under the CTAs. */ #abt .aud-hero-grid { display: grid; grid-template-columns: 1fr; gap: 2.2rem; align-items: start; } @media (min-width: 1024px) { #abt .aud-hero-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 3rem; align-items: center; } } /* HERO SPEC CARD — glass panel on the right of service-hub heroes. Backdrop-blur on the kaleidoscope video, brand-blue tonal border-left (per-hub via --card-accent), Fraunces italic title, dashed-rule spec rows, mono dossier footer. Same design vocabulary as the homepage hero-spec. */ #abt .aud-hero-card { background: rgba(10,10,12,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.14); border-left: 3px solid var(--card-accent, #3B9DEB); border-radius: 6px; padding: 1.4rem 1.5rem; max-width: 420px; margin-left: auto; } #abt .aud-hero-card-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.8rem; margin-bottom: 1rem; border-bottom: 1px dashed rgba(255,255,255,0.18); font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.16em; color: #a8a29e; font-weight: 700; text-transform: uppercase; } #abt .aud-hero-card-head .stamp { background: var(--card-accent, #3B9DEB); color: #0a0a0c; padding: 0.2rem 0.55rem; letter-spacing: 0.12em; font-size: 0.58rem; } #abt .aud-hero-card-title { font-family: 'Fraunces', serif; font-style: italic; font-size: 0.98rem; color: #fafaf9; margin-bottom: 1rem; line-height: 1.4; } #abt .aud-hero-card-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 0.6rem 0; border-top: 1px dashed rgba(255,255,255,0.13); align-items: baseline; } #abt .aud-hero-card-row:first-of-type { border-top: 0; padding-top: 0.3rem; } #abt .aud-hero-card-row .lbl { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: #a8a29e; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.4; } #abt .aud-hero-card-row .val { font-family: 'Fraunces', serif; font-weight: 700; color: var(--card-accent, #3B9DEB); font-size: 1rem; line-height: 1.1; text-align: right; white-space: nowrap; } #abt .aud-hero-card-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 0.95rem; margin-top: 0.95rem; border-top: 1px solid rgba(255,255,255,0.2); font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; color: #fafaf9; text-decoration: none; transition: color 0.3s ease; } #abt .aud-hero-card-foot:hover { color: var(--card-accent, #3B9DEB); } #abt .aud-hero-card-foot .arrow { transition: transform 0.3s ease; } #abt .aud-hero-card-foot:hover .arrow { transform: translateY(3px); } /* QUASAR-style oversized opener — used on service-hub & upstream hero blocks */ #abt .aud-hero-mark { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 1.2rem; flex-wrap: wrap; } #abt .aud-hero-glyph { width: 76px; height: 76px; flex-shrink: 0; } #abt .aud-hero-glyph svg { width: 100%; height: 100%; stroke: #3B9DEB; fill: none; stroke-width: 1.4; } #abt .aud-hero-name { font-family: 'Fraunces', serif; font-style: italic; font-weight: 800; font-size: 4.5rem; line-height: 0.95; letter-spacing: -0.03em; color: #fafaf9; margin: 0; } @media (min-width: 768px) { #abt .aud-hero-name { font-size: 6rem; } #abt .aud-hero-glyph { width: 92px; height: 92px; } } @media (min-width: 1280px) { #abt .aud-hero-name { font-size: 7rem; } #abt .aud-hero-glyph { width: 104px; height: 104px; } } #abt .aud-hero-kicker { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-size: 1.35rem; line-height: 1.25; color: #3B9DEB; margin: 0 0 1rem; max-width: 50ch; } @media (min-width: 768px) { #abt .aud-hero-kicker { font-size: 1.55rem; } } #abt .aud-meta { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; color: #a8a29e; letter-spacing: 0.04em; padding-top: 1.4rem; border-top: 1px dashed rgba(255,255,255,0.18); } #abt .aud-meta strong { color: #fafaf9; font-weight: 600; } /* Context paragraph — three-column editorial block */ #abt .aud-context { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0; border-bottom: 1px solid #d4cdc0; } @media (min-width: 1024px) { #abt .aud-context { grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; } } #abt .aud-context h3 { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #026DBF; margin-bottom: 0.85rem; padding-bottom: 0.5rem; border-bottom: 1px solid #0a0a0c; } #abt .aud-context p { font-size: 0.94rem; line-height: 1.6; color: #57534e; } #abt .aud-context p strong { color: #0a0a0c; } #abt .aud-context ul { font-size: 0.92rem; line-height: 1.6; color: #57534e; padding-left: 0; list-style: none; } #abt .aud-context ul li { padding-left: 0; margin-bottom: 0.5rem; } #abt .aud-context ul li::before { content: '→ '; color: #026DBF; font-weight: 700; } /* Spec strip / sheet */ #abt .aud-spec { background: #fcfaf6; border: 1px solid #d4cdc0; padding: 1.4rem 1.5rem; } #abt .aud-spec-head { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.16em; color: #565658; padding-bottom: 0.7rem; border-bottom: 1px dashed #d4cdc0; margin-bottom: 0.7rem; display: flex; justify-content: space-between; } #abt .aud-spec-head .stamp { background: #026DBF; color: white; padding: 0.18rem 0.5rem; font-size: 0.58rem; } #abt .aud-spec-row { display: grid; grid-template-columns: 130px 1fr; padding: 0.5rem 0; border-top: 1px dashed #e7e2d9; font-size: 0.82rem; } #abt .aud-spec-row:first-of-type { border-top: 0; padding-top: 0.6rem; } #abt .aud-spec-row .lbl { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: #8a857c; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 0.18rem; } #abt .aud-spec-row .val { color: #0a0a0c; } /* Service-line cards reframed */ #abt .aud-services { padding: 3rem 0; border-bottom: 1px solid #d4cdc0; } #abt .aud-services-h { font-family: 'Fraunces', serif; font-size: 1.6rem; font-weight: 700; color: #0a0a0c; margin-bottom: 0.5rem; letter-spacing: -0.015em; } #abt .aud-services-sub { color: #57534e; font-size: 0.95rem; margin-bottom: 1.8rem; max-width: 60ch; } #abt .aud-services-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { #abt .aud-services-grid { grid-template-columns: repeat(3, 1fr); } } /* Hub catalog grid */ #abt .hub-grid { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid #d4cdc0; background: #fff; } @media (min-width: 768px) { #abt .hub-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { #abt .hub-grid { grid-template-columns: repeat(4, 1fr); } } #abt .hub-card { padding: 1.4rem 1.5rem; border-right: 1px solid #e7e2d9; border-bottom: 1px solid #e7e2d9; text-decoration: none; color: inherit; transition: background 0.2s, color 0.2s; display: flex; flex-direction: column; min-height: 220px; } #abt .hub-card:hover { background: #fcfaf6; } #abt .hub-card:hover .hub-card-h { color: #026DBF; } #abt .hub-card-code { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; color: #565658; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } #abt .hub-card-code .pill { background: #026DBF; color: white; padding: 0.16rem 0.48rem; letter-spacing: 0.12em; } #abt .hub-card-code .pill-light { background: rgba(2,109,191,0.12); color: #026DBF; padding: 0.16rem 0.48rem; letter-spacing: 0.1em; font-weight: 700; } #abt .hub-card-h { font-family: 'Fraunces', serif; font-size: 1.18rem; font-weight: 700; color: #0a0a0c; line-height: 1.2; margin-bottom: 0.6rem; transition: color 0.2s; } #abt .hub-card-body { font-size: 0.82rem; color: #57534e; line-height: 1.5; flex-grow: 1; margin-bottom: 0.85rem; } #abt .hub-card-link { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700; color: #565658; letter-spacing: 0.1em; margin-top: auto; } /* ---- DELIVERY MODEL section (markets pages only) ---- A dark band that breaks the page rhythm — deliberately a moment of "office-honest, outcome-bold" framing. Headline + body left, spec card right. */ #abt .delivery-model-section { background: #0a0a0c; color: #fafaf9; padding: 3.5rem 0; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); position: relative; overflow: hidden; } #abt .delivery-model-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(2,109,191,0.15) 0%, rgba(10,10,12,0) 60%); pointer-events: none; } #abt .delivery-model-section > .max-w-7xl { position: relative; z-index: 1; } #abt .delivery-grid { display: grid; grid-template-columns: 1fr; gap: 2.4rem; align-items: start; } @media (min-width: 1024px) { #abt .delivery-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; align-items: center; } } #abt .delivery-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; color: #3B9DEB; margin-bottom: 1rem; } #abt .delivery-headline { font-family: 'Fraunces', serif; font-size: 1.85rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #fafaf9; margin-bottom: 1.1rem; } @media (min-width: 768px) { #abt .delivery-headline { font-size: 2.4rem; } } @media (min-width: 1280px) { #abt .delivery-headline { font-size: 2.8rem; } } #abt .delivery-body { font-size: 1rem; line-height: 1.65; color: #d6d3d1; max-width: 56ch; } @media (min-width: 768px) { #abt .delivery-body { font-size: 1.05rem; } } /* The right-column glass spec card. Different from .aud-hero-card — values can wrap to multi-line because they're sentence-length, not numeric. */ #abt .delivery-card { background: rgba(255,255,255,0.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.16); border-left: 3px solid #3B9DEB; border-radius: 6px; padding: 1.5rem 1.6rem; } #abt .delivery-card-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.85rem; margin-bottom: 1rem; border-bottom: 1px dashed rgba(255,255,255,0.2); font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.16em; color: #a8a29e; font-weight: 700; text-transform: uppercase; } #abt .delivery-card-head .stamp { background: #3B9DEB; color: #0a0a0c; padding: 0.22rem 0.6rem; letter-spacing: 0.12em; font-size: 0.58rem; font-weight: 800; } #abt .delivery-card-row { padding: 0.85rem 0; border-top: 1px dashed rgba(255,255,255,0.13); } #abt .delivery-card-row:first-of-type { border-top: 0; padding-top: 0.4rem; } #abt .delivery-card-row .lbl { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: #3B9DEB; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.4rem; font-weight: 700; } #abt .delivery-card-row .val { display: block; font-size: 0.93rem; line-height: 1.5; color: #fafaf9; } @media (max-width: 480px) { #abt .delivery-headline { font-size: 1.5rem; } #abt .delivery-card { padding: 1.2rem 1.25rem; } #abt .delivery-model-section { padding: 2.5rem 0; } } /* Pull-quote & CTA */ #abt .aud-quote { padding: 3rem 0; } #abt .aud-cta { background: #fcfaf6; border-top: 1px solid #d4cdc0; border-bottom: 1px solid #d4cdc0; padding: 3rem 0; text-align: center; } #abt .aud-cta-h { font-family: 'Fraunces', serif; font-size: 1.8rem; font-weight: 700; color: #0a0a0c; margin-bottom: 0.6rem; line-height: 1.2; } @media (min-width: 768px) { #abt .aud-cta-h { font-size: 2.2rem; } } /* === CASE-STUDY-SPECIFIC === */ /* As of 2026-05-08d, case-study metrics + timelines use the canonical `.aud-spec` / `.aud-spec-row` component (single spec-table vocabulary site-wide). The legacy `.case-metric` and `.case-timeline-row` rules were dropped — same visual outcome, fewer components to maintain. The `.case-tech` pill-list stays as it is (no equivalent in spec-table). */ #abt .case-tech { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 1rem; } #abt .case-tech .tag { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; padding: 0.32rem 0.65rem; background: #fcfaf6; border: 1px solid #d4cdc0; color: #0a0a0c; } /* === FIELD-GUIDE-SPECIFIC === */ /* guide-tldr — specimen-card pattern (paper-cream bg, brand-blue left rule, ink Fraunces body). Was previously a brand-blue flood block; softened so the page reads as a cohesive editorial sequence rather than a blue stripe. */ #abt .guide-tldr { background: #fcfaf6; color: #0a0a0c; padding: 1.6rem 1.8rem; border: 1px solid #d4cdc0; border-left: 4px solid #026DBF; } #abt .guide-tldr .label { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; color: #026DBF; margin-bottom: 0.7rem; padding-bottom: 0.6rem; border-bottom: 1px dashed #d4cdc0; } #abt .guide-tldr .body { font-family: 'Fraunces', serif; font-size: 1.1rem; line-height: 1.55; font-weight: 500; color: #0a0a0c; } #abt .guide-takeaways { counter-reset: tk; padding: 0; margin: 0; list-style: none; } #abt .guide-takeaways li { display: grid; grid-template-columns: 56px 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px dashed #d4cdc0; counter-increment: tk; font-size: 0.95rem; line-height: 1.55; color: #0a0a0c; } #abt .guide-takeaways li:first-child { border-top: 1px solid #0a0a0c; } #abt .guide-takeaways li::before { content: '0' counter(tk); font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; font-weight: 700; color: #026DBF; letter-spacing: 0.1em; padding-top: 0.15rem; } #abt .guide-toc { background: #fcfaf6; border: 1px solid #d4cdc0; padding: 1.3rem 1.5rem; } #abt .guide-toc h4 { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; color: #565658; padding-bottom: 0.6rem; border-bottom: 1px dashed #d4cdc0; margin-bottom: 0.7rem; } #abt .guide-toc ol { font-size: 0.84rem; padding-left: 1.4rem; line-height: 1.7; color: #57534e; } #abt .guide-toc ol li { padding-left: 0.2rem; } #abt .guide-tags { padding: 1rem 0; border-top: 1px solid #d4cdc0; border-bottom: 1px solid #d4cdc0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; align-items: center; } #abt .guide-tags .label { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: #565658; letter-spacing: 0.12em; font-weight: 700; margin-right: 0.4rem; } #abt .guide-tags a { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; padding: 0.3rem 0.65rem; background: rgba(2,109,191,0.08); color: #026DBF; text-decoration: none; transition: background 0.15s, color 0.15s; } #abt .guide-tags a:hover { background: #026DBF; color: white; } /* === CAREERS-SPECIFIC === */ #abt .career-role { display: grid; grid-template-columns: 60px 1fr auto; gap: 1.2rem; align-items: center; padding: 1.2rem 1.4rem; border-top: 1px dashed #d4cdc0; transition: background 0.15s; text-decoration: none; color: inherit; } #abt .career-role:first-of-type { border-top: 1px solid #0a0a0c; } #abt .career-role:hover { background: #fcfaf6; } #abt .career-role .num { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 700; color: #026DBF; letter-spacing: 0.1em; } #abt .career-role .meta { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #565658; letter-spacing: 0.04em; } #abt .career-role .role-title { font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 700; color: #0a0a0c; } #abt .career-role .arrow { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: #565658; font-weight: 700; letter-spacing: 0.1em; } #abt .career-role:hover .arrow { color: #026DBF; } /* (Removed 2026-05-08d: legacy callout CSS for a hiring portal block that no longer exists in any rendered page. Apply flow is now a plain mailto.) */ /* (Flag icon CSS moved to master-common.css — flags appear in the SSI'd footer/header which is rendered on the homepage too, and the homepage only loads master-common.css, not audience-common.css.) */ /* ===================================================================== * MOBILE RESPONSIVE PASS (added 2026-05-07m) * Fixes identified by audit: * - aud-hero-card right-aligned on stacked mobile (margin-left: auto) * - kaleidoscope: 4 simultaneous video decoders too heavy on phones * - aud-hero-name oversized at 320px * - feature-figure 16:7 too short on narrow screens * - hub-grid 4-col too cramped at 1024px * - aud-context 3-col too cramped at 1024px * - aud-hero-card-row .val nowrap can overflow narrow card * ===================================================================== */ /* iPad LANDSCAPE + below — when the hero grid is single-column, the spec card should NOT auto-margin to the right (looks misaligned vs left-aligned copy). */ @media (max-width: 1023px) { #abt .aud-hero-card { margin-left: 0; max-width: 100%; } } /* TABLET PORTRAIT + below — kill the kaleidoscope on smaller devices. 4 concurrent autoplay videos = ~3.2MB on 4G + 4 decode pipelines that iOS Safari and Android Chrome serialize anyway. The flat dark hero band stays. */ @media (max-width: 767px) { #abt .aud-hero-kaleido, #abt .aud-hero-kaleido-vignette { display: none; } /* Allow long values in the spec card to wrap on narrow screens */ #abt .aud-hero-card-row .val { white-space: normal; } /* Feature figure 16:7 collapses to a thin band on phones; switch to 4:3 so the photo + caption are both legible */ #abt .feature-figure-img { aspect-ratio: 4 / 3; } /* Spec card padding tightens */ #abt .aud-hero-card { padding: 1.2rem 1.25rem; } } /* SMALL PHONE (≤480px) — shrink the giant hero name and glyph so they don't wrap-clip ascenders/descenders. The 4.5rem (72px) Fraunces italic is too big for a 320px viewport once the 76px glyph + gap is subtracted. */ @media (max-width: 480px) { #abt .aud-hero-name { font-size: 3rem; line-height: 1; } #abt .aud-hero-glyph { width: 52px; height: 52px; } #abt .aud-hero-mark { gap: 0.85rem; margin-bottom: 0.9rem; } #abt .aud-hero-kicker { font-size: 1.15rem; } #abt .aud-h1 { font-size: 2rem; } #abt .aud-hero { padding: 3rem 0 2.4rem; } #abt .aud-cta-h { font-size: 1.5rem; } } /* iPad LANDSCAPE — push the 4-col hub-grid breakpoint UP to 1280px, and the 3-col aud-context UP to 1100px. At 1024px both were too cramped. */ @media (min-width: 1024px) and (max-width: 1279px) { #abt .hub-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) and (max-width: 1099px) { #abt .aud-context { grid-template-columns: 1fr; gap: 2rem; } } /* ======================================================================== FEED-BLOCK COMPONENT — used on case-study + field-guide + audience pages for related-cases / related-guides / from-the-blog cards. Mirrors the master-common.css definitions so the same component renders identically across umbrella + audience pages. ======================================================================== */ #abt .feed-block { background: #fcfaf6; border: 1px solid #d4cdc0; border-left: 4px solid #026DBF; padding: 1.3rem 1.5rem; margin-bottom: 1rem; } #abt .feed-block-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.7rem; border-bottom: 1px dashed #d4cdc0; margin-bottom: 0.4rem; } #abt .feed-block-title { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; color: #0a0a0c; text-transform: uppercase; } #abt .feed-block-link { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: #026DBF; text-decoration: none; letter-spacing: 0.08em; font-weight: 700; } #abt .feed-block-link:hover { text-decoration: underline; } #abt .feed-block .feed-list { list-style: none; padding: 0; margin: 0; border-top: 0; } #abt .feed-block .feed-item { border-top: 1px dashed #e7e2d9; } #abt .feed-block .feed-item:first-child { border-top: 0; } #abt .feed-block .feed-link { display: block; padding: 0.65rem 0; text-decoration: none; color: #0a0a0c; transition: background 0.12s, padding 0.12s, border-color 0.12s; border-left: 0; } #abt .feed-block .feed-link:hover { background: rgba(2,109,191,0.06); padding-left: 0.5rem; border-left: 3px solid #026DBF; } #abt .feed-block .feed-code { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #565658; margin-bottom: 0.25rem; } #abt .feed-block .feed-title { display: block; font-family: 'Fraunces', serif; font-size: 0.98rem; font-weight: 600; color: #0a0a0c; line-height: 1.3; margin-bottom: 0.3rem; } #abt .feed-block .feed-short { display: block; font-size: 0.82rem; color: #57534e; line-height: 1.45; } #abt .feed-empty { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: #8a857c; font-style: italic; padding: 1.2rem 0; text-align: center; border-top: 1px dashed #d4cdc0; border-bottom: 1px dashed #d4cdc0; } /* Feed grid — multi-column wrapper for "RELEVANT TO X" sections */ #abt .feed-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { #abt .feed-grid { grid-template-columns: repeat(3, 1fr); } } #abt .feed-grid .feed-block { margin-bottom: 0; } /* Legal-page body styling — readable typography for long-form policy text */ #abt .legal-body { font-size: 0.96rem; line-height: 1.65; color: #0a0a0c; } #abt .legal-body p { margin-bottom: 1rem; } #abt .legal-body p:last-child { margin-bottom: 0; } #abt .legal-body ul, #abt .legal-body ol { margin: 0.6rem 0 1rem 1.5rem; padding: 0; } #abt .legal-body li { margin-bottom: 0.5rem; line-height: 1.55; } #abt .legal-body a { color: #026DBF; text-decoration: underline; text-decoration-color: rgba(2,109,191,0.4); } #abt .legal-body a:hover { text-decoration-color: #026DBF; } #abt .legal-body code { font-family: 'JetBrains Mono', monospace; font-size: 0.86rem; background: #fcfaf6; padding: 0.1rem 0.4rem; border: 1px solid #e7e2d9; border-radius: 2px; } #abt .legal-body strong { font-weight: 700; color: #0a0a0c; }