/* RESET + BASE */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }:root { /* Neutrals, 60%+ of page area */ --ink: #0A0A09; --paper: #FCFCFA; --paper-warm:#F7F1E6; --paper-cool:#EFEFEC; --ink-fade: #7A7A75; /* Brand accent, 5-8% max, reserved zones */ --brand: #FF6B1F; /* Sub-accents, used sparingly per Step 5 */ --red: #E63027; --yellow: #FFD60A; /* Legacy alias so existing rules keep working */ --orange: var(--brand); --gutter: clamp(16px, 2.5vw, 32px); /* Brand variables now sourced from /_css/tokens.css?v=20260525d. do NOT redefine here. Override is allowed for page-specific tokens, but font + color tokens live in tokens.css. */ } html { font-size: 16px; scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: var(--body); font-weight: 400; font-size: 18px; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; }:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } a { color: inherit; } /* SECTION BG-TONE SYSTEM */.bg-paper { background: var(--paper); }.bg-paper-warm { background: var(--paper-warm); }.bg-paper-cool { background: var(--paper-cool); }.bg-ink { background: var(--ink); color: var(--paper); }.bg-ink.section-label,.bg-ink.cta-headline,.bg-ink.cta-secondary { color: var(--paper); }.bg-ink.section-label { color: rgba(252,252,250,0.6); }.bg-ink.section-label::before { background: rgba(252,252,250,0.6); }.bg-ink.cta-btn { background: var(--orange); color: var(--paper); }.bg-ink.cta-btn:hover { background: #FF8642; }.bg-ink.cta-secondary { color: rgba(252,252,250,0.7); }.bg-ink.cta-secondary:hover { color: var(--orange); } /* NAV */ nav { position: sticky; top: 0; z-index: 100; background: var(--paper); } /* HERO */.hero { padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(32px, 5vw, 64px); padding-left: var(--edge); padding-right: var(--edge); min-height: calc(72vh - 62px); display: flex; flex-direction: column; justify-content: flex-end; }.hero-eyebrow { font-family: var(--mono); font-size: clamp(11px, 1vw, 13px); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; display: inline-flex; align-items: center; gap: 10px; }.hero-eyebrow::before,.hero-eyebrow::after { content: ''; width: 24px; height: 2px; background: var(--orange); display: inline-block; }.hero-sub-eyebrow { font-family: var(--mono); font-size: clamp(10px, 0.9vw, 12px); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-fade); margin-bottom: clamp(48px, 6.5vw, 88px); line-height: 1.5; }.hero-headline { font-family: var(--display-hero); font-size: clamp(40px, 7.6vw, 104px); font-weight: var(--hero-weight, 700); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); margin-left: -0.02em; hyphens: none; word-break: keep-all; margin-bottom: clamp(48px, 6.5vw, 88px); }.hero-line { display: block; } @keyframes letter-shift-leapbuzz { 0%, 100% { color: #FF6B1F; } 33% { color: #E63027; } 66% { color: #FFD60A; } }.line-accent { color: var(--orange); display: inline-block; white-space: nowrap; }.line-2-accent .ltr,.line-3-accent .ltr { display: inline-block; color: var(--orange); animation: letter-shift-leapbuzz 9s ease-in-out calc(var(--i) * 0.5s) infinite; } @media (prefers-reduced-motion: reduce) {.line-2-accent .ltr,.line-3-accent .ltr { animation: none; color: var(--orange); } }.hero-sub { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); line-height: 1.7; margin-bottom: 0; }.hero-bluf { font-family: var(--body); font-size: clamp(15px, 1.25vw, 18px); font-weight: 400; line-height: 1.6; color: var(--ink); max-width: 68ch; margin: clamp(20px, 2.4vw, 32px) auto clamp(20px, 2.4vw, 32px); text-align: center; }.hero-bluf strong { font-weight: 700; }.hero-bluf.bluf-pillars { display: block; font-family: var(--display); font-style: italic; font-weight: 700; font-size: clamp(17px, 1.5vw, 22px); color: var(--brand); margin-top: clamp(8px, 1vw, 12px); } /* Hero wave divider. single wave shape per band, filled with a 3-color gradient (red → orange → yellow → orange → red, cyclic) so tiles seam smoothly. Top band: red→orange→yellow gradient flow. Bottom band: yellow→orange→red gradient flow (inverted, for visual rhythm). */ @keyframes hero-wave-drift-top { 0% { background-position: 0 50%; } 100% { background-position: -800px 50%; } } @keyframes hero-wave-drift-bottom { 0% { background-position: 0 50%; } 100% { background-position: 800px 50%; } }.hero-wave-divider { height: 48px; margin: 0 calc(-1 * var(--edge)); overflow: hidden; position: relative; }.hero-wave-top { /* Top wave: red → orange → yellow → orange → red gradient, drifts left */ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 48' preserveAspectRatio='none'><defs><linearGradient id='gt' x1='0' y1='0' x2='1' y2='0'><stop offset='0%25' stop-color='%23E63027'/><stop offset='25%25' stop-color='%23FF6B1F'/><stop offset='50%25' stop-color='%23FFD60A'/><stop offset='75%25' stop-color='%23FF6B1F'/><stop offset='100%25' stop-color='%23E63027'/></linearGradient></defs><path d='M 0,20 C 100,8 200,32 300,18 C 400,8 500,30 600,16 C 700,10 800,20 800,20 L 800,26 C 700,34 600,18 500,30 C 400,38 300,20 200,32 C 100,42 0,26 0,26 Z' fill='url(%23gt)'/></svg>"); background-repeat: repeat-x; background-size: 800px 48px; background-position: 0 50%; animation: hero-wave-drift-top 32s linear infinite; will-change: background-position; }.hero-wave-bottom { /* Bottom wave: yellow → orange → red → orange → yellow gradient, drifts right */ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 48' preserveAspectRatio='none'><defs><linearGradient id='gb' x1='0' y1='0' x2='1' y2='0'><stop offset='0%25' stop-color='%23FFD60A'/><stop offset='25%25' stop-color='%23FF6B1F'/><stop offset='50%25' stop-color='%23E63027'/><stop offset='75%25' stop-color='%23FF6B1F'/><stop offset='100%25' stop-color='%23FFD60A'/></linearGradient></defs><path d='M 0,22 C 100,10 200,34 300,20 C 400,10 500,32 600,18 C 700,12 800,22 800,22 L 800,28 C 700,36 600,20 500,32 C 400,40 300,22 200,34 C 100,44 0,28 0,28 Z' fill='url(%23gb)'/></svg>"); background-repeat: repeat-x; background-size: 800px 48px; background-position: 0 50%; animation: hero-wave-drift-bottom 38s linear infinite; will-change: background-position; } @media (prefers-reduced-motion: reduce) {.hero-wave-top,.hero-wave-bottom { animation: none; } }.hero-reel { width: 100%; overflow: hidden; padding: 20px 0; /* Soft-edge fade: items become semi-transparent over the last ~80px on each side of the reel container. Creates a subtle "blur out" feel as tags drift off the left and enter from the right. */ -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.5) 40px, rgba(0, 0, 0, 1) 90px, rgba(0, 0, 0, 1) calc(100% - 90px), rgba(0, 0, 0, 0.5) calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.5) 40px, rgba(0, 0, 0, 1) 90px, rgba(0, 0, 0, 1) calc(100% - 90px), rgba(0, 0, 0, 0.5) calc(100% - 40px), transparent 100%); }.reel-track { display: inline-flex; gap: 48px; align-items: center; white-space: nowrap; width: max-content; animation: reel-drift 50s linear infinite; will-change: transform; } @keyframes reel-drift { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }.hero-reel:hover.reel-track { animation-play-state: paused; }.tag { display: inline-flex; align-items: center; white-space: nowrap; font-family: var(--mono); font-weight: 700; font-size: clamp(12px, 1vw, 14px); letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 14px; line-height: 1; flex-shrink: 0; }.tag-block { background: var(--tag-color); color: var(--tag-fg, #FCFCFA); }.tag-outline { color: var(--tag-color); background: transparent; padding: 6px 12px; position: relative; }.tag-outline::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'><path d='M 2,4 C 40,1 80,7 120,3 C 160,1 198,5 198,5 L 198,35 C 160,38 120,33 80,37 C 40,39 2,35 2,35 Z' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/></svg>"); background-size: 100% 100%; color: var(--tag-color); pointer-events: none; }.tag-stamp { transform: rotate(-5deg); color: var(--tag-color); background: transparent; padding: 6px 14px; position: relative; }.tag-stamp::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'><path d='M 3,5 C 50,2 100,8 150,3 C 180,1 197,5 197,5 L 197,35 C 150,38 100,32 50,37 C 20,39 3,35 3,35 Z' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'/></svg>"); background-size: 100% 100%; color: var(--tag-color); pointer-events: none; }.tag-stamp.tag-stamp-fill { background: var(--tag-color); color: var(--tag-fg, #FCFCFA); }.tag-stamp.tag-stamp-fill::before { display: none; }.tag-pill { background: var(--tag-color); color: var(--tag-fg, #FCFCFA); border-radius: 999px; }.tag-bracket { color: var(--tag-color); padding: 4px 0; }.tag-bracket::before { content: '['; margin-right: 6px; opacity: 0.6; }.tag-bracket::after { content: ']'; margin-left: 6px; opacity: 0.6; }.tag-plain { color: var(--tag-color); padding: 4px 0 10px; position: relative; }.tag-plain::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6' preserveAspectRatio='none'><path d='M 0,3 C 30,1 60,5 90,3 C 120,1 150,5 180,3 C 195,2 200,3 200,3' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'/></svg>"); background-size: 100% 100%; color: var(--tag-color); } @media (prefers-reduced-motion: reduce) {.reel-track { animation: none; } }.hero-sub-geo { margin-top: 28px; } /* Hero subtitle row: geo text left, platform icons right */.hero-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; width: 100%; margin-top: clamp(24px, 3vw, 40px); }.hero-sub-row.hero-sub-geo { margin: 0; flex: 1; min-width: 0; }.hero-platforms { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 22px); list-style: none; padding: 0; margin: 0; flex-shrink: 0; }.hero-platforms li { display: inline-flex; }.hero-platforms a,.hero-platforms a:visited { display: inline-flex; align-items: center; justify-content: center; width: clamp(38px, 3.2vw, 48px); height: clamp(38px, 3.2vw, 48px); padding: clamp(6px, 0.6vw, 10px); background: transparent; border: none; border-radius: 50%; color: var(--ink); text-decoration: none; transition: color 0.25s ease, background 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, backdrop-filter 0.25s ease; }.hero-platforms a:hover,.hero-platforms a:focus-visible { color: var(--paper); background: var(--brand); transform: translateY(-4px) scale(1.12) rotate(-3deg); box-shadow: 0 10px 24px rgba(255, 107, 31, 0.40), inset 0 1px 0 rgba(252, 252, 250, 0.25); } /* Stagger the hover rotation direction for visual playfulness */.hero-platforms li:nth-child(even) a:hover,.hero-platforms li:nth-child(even) a:focus-visible { transform: translateY(-4px) scale(1.12) rotate(3deg); }.hero-platforms svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; } @media (max-width: 720px) {.hero-sub-row { flex-direction: column; align-items: flex-start; gap: 16px; }.hero-platforms { flex-wrap: wrap; } } /* ============================================================ THIN WAVY SECTION BREAKERS (1.2 to 1.8px stroke, 12 to 24px tall) ============================================================ */.breaker { width: 100%; display: block; color: var(--ink-fade); margin: 0; }.breaker svg { display: block; width: 100%; height: 100%; }.breaker-1 { height: 14px; }.breaker-2 { height: 18px; }.breaker-3 { height: 16px; }.breaker-4 { height: 22px; }.breaker-5 { height: 14px; }.breaker-6 { height: 20px; }.breaker-7 { height: 24px; } /* Breakers inherit the section they sit ABOVE (outgoing) */.breaker.on-paper { background: var(--paper); }.breaker.on-paper-warm { background: var(--paper-warm); }.breaker.on-paper-cool { background: var(--paper-cool); }.breaker.on-ink { background: var(--ink); color: rgba(252,252,250,0.55); } /* BRUSHSTROKE DIVIDERS (additive drama at major bg transitions) */.brushstroke { display: block; width: 100%; line-height: 0; margin: 0; overflow: hidden; height: 80px; }.brushstroke.gentle { height: 50px; }.brushstroke.gentle.dual { height: 180px; }.brushstroke svg { display: block; width: 100%; height: 100%; } /* Wavy SVG divider helpers (used for in-section cell rules) */.wavy-h { width: 100%; height: 10px; display: block; color: var(--ink-fade); }.wavy-h svg { display: block; width: 100%; height: 100%; }.wavy-v { width: 10px; height: 100%; display: block; color: var(--ink-fade); }.wavy-v svg { display: block; width: 100%; height: 100%; } /* ============================================================ GENERIC SECTION SHELL ============================================================ */ section { padding: clamp(36px, 5vw, 72px) var(--edge); }.section-label { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-fade); margin-bottom: clamp(28px, 4vw, 52px); display: inline-flex; align-items: center; gap: 12px; }.section-label::before { content: ''; width: 28px; height: 1px; background: var(--ink-fade); } /* RED + YELLOW SPARING ACCENTS */.red-em { color: var(--red); font-weight: 700; font-style: italic; }.yel-mark { color: var(--yellow); margin-right: 4px; }.yel-arrow { color: var(--yellow); }.yel-underline { background-image: linear-gradient(var(--yellow), var(--yellow)); background-position: 0 100%; background-size: 100% 1px; background-repeat: no-repeat; padding-bottom: 1px; } /* SCROLL-DRIVEN REVEAL ANIMATIONS */ @supports (animation-timeline: view) {.reveal-up { animation: reveal-up linear both; animation-timeline: view; animation-range: entry 0% entry 80%; }.reveal-fade { animation: reveal-fade linear both; animation-timeline: view; animation-range: entry 0% entry 60%; }.reveal-slide-left { animation: reveal-slide-left linear both; animation-timeline: view; animation-range: entry 0% entry 70%; }.reveal-slide-right { animation: reveal-slide-right linear both; animation-timeline: view; animation-range: entry 0% entry 70%; }.section-breaker svg path,.breaker svg path { animation: breaker-drift linear both; animation-timeline: view; animation-range: entry 0% exit 100%; } } @keyframes reveal-up { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes reveal-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes reveal-slide-left { from { transform: translateX(-40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes reveal-slide-right { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes breaker-drift { from { transform: translateX(-4%); } to { transform: translateX(4%); } } @media (prefers-reduced-motion: reduce) {.reveal-up,.reveal-fade,.reveal-slide-left,.reveal-slide-right { animation: none; }.breaker svg path { animation: none; } } /* ============================================================ SECTION 1, WHAT WE DO (Read / Wire / Spark, paper-warm) ============================================================ */ #what.bg-paper-warm { background: var(--paper-warm); } #what { position: relative; padding: clamp(16px, 2vw, 28px) clamp(24px, 5vw, 80px); overflow: hidden; perspective: 1400px; } #what.sec-header { margin-bottom: clamp(12px, 1.4vw, 20px); } #what::before { content: ""; position: absolute; inset: 0; background: radial-gradient(540px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 107, 31, 0.07), transparent 55%); pointer-events: none; opacity: 0; transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1); z-index: 1; } #what.cursor-active::before { opacity: 1; }.what-wrap { position: relative; z-index: 2; margin: 0 auto; }.what-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 40px); margin-top: clamp(16px, 2vw, 28px); transform-style: preserve-3d; } @media (max-width: 980px) {.what-grid { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 36px); } }.what-card { opacity: 1; transform: translateY(0); transition: opacity 540ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms), transform 540ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms); perspective: 1000px; }
@supports (animation-timeline: view()) { .what-card:not(.reveal-active) { opacity: 0; transform: translateY(28px); } }.what-card.reveal-active { opacity: 1; transform: translateY(0); }.what-tilt { position: relative; display: flex; flex-direction: column; gap: clamp(14px, 1.4vw, 20px); padding: clamp(14px, 1.4vw, 22px); background: rgba(252, 252, 250, 0.55); backdrop-filter: blur(14px) saturate(110%); -webkit-backdrop-filter: blur(14px) saturate(110%); border: 1px solid rgba(10, 10, 9, 0.06); border-radius: 6px; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transform-style: preserve-3d; transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), background 240ms cubic-bezier(0.22, 1, 0.36, 1), backdrop-filter 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; box-shadow: 0 2px 12px rgba(10, 10, 9, 0.04); }.what-tilt:hover { background: rgba(252, 252, 250, 0.78); backdrop-filter: blur(22px) saturate(125%); -webkit-backdrop-filter: blur(22px) saturate(125%); box-shadow: 0 22px 50px rgba(10, 10, 9, 0.10), 0 0 0 1px rgba(255, 107, 31, 0.18); }.what-image-frame { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 4px; overflow: hidden; background: var(--paper); transform: translateZ(24px); }.what-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), filter 360ms cubic-bezier(0.22, 1, 0.36, 1); }.what-tilt:hover.what-image { transform: scale(1.035); filter: brightness(1.04) saturate(1.06); }.what-content { display: flex; flex-direction: column; gap: clamp(8px, 0.8vw, 12px); transform: translateZ(10px); }.what-num { font-family: var(--mono); font-size: clamp(11px, 1vw, 13px); font-weight: 700; letter-spacing: 0.22em; color: var(--brand); margin: 0; }.what-name { font-family: var(--display); font-weight: 700; font-style: italic; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin: 0; }.what-desc { font-family: var(--body); font-size: clamp(14px, 1.1vw, 16px); line-height: 1.55; color: var(--ink); margin: 0; max-width: 42ch; }.what-tags { list-style: none; margin: clamp(6px, 0.6vw, 10px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }.what-tags li { font-family: var(--mono); font-size: clamp(9.5px, 0.8vw, 10.5px); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-fade); padding: 4px 9px; background: rgba(10, 10, 9, 0.04); border-radius: 999px; border: 1px solid rgba(10, 10, 9, 0.06); transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms cubic-bezier(0.22, 1, 0.36, 1), color 180ms cubic-bezier(0.22, 1, 0.36, 1); }.what-tilt:hover.what-tags li { background: rgba(255, 107, 31, 0.07); border-color: rgba(255, 107, 31, 0.22); color: var(--ink); } @media (prefers-reduced-motion: reduce) {.what-card { opacity: 1; transform: none; transition: none; }.what-tilt { transition: none; }.what-tilt:hover.what-image { transform: none; } #what::before { display: none; } } /* ============================================================ SECTION 2, ENGAGEMENTS (tile-packed Fibonacci, bg-ink). Ink section, 21-col x 4-row true 2D packing, hero-A spans 2 rows. ============================================================ */ #engagements.bg-ink { background: var(--ink); padding: clamp(48px, 6vw, 96px) clamp(24px, 5vw, 80px); } #engagements.section-eyebrow { font-family: var(--mono); font-size: clamp(11px, 1vw, 13px); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(252, 252, 250, 0.55); margin: 0 0 clamp(16px, 2vw, 24px); text-align: center; } #engagements h2.eng-title { font-family: var(--display-hero); font-weight: 400; font-style: normal; font-size: clamp(38px, 5.4vw, 78px); line-height: 1.02; letter-spacing: -0.03em; color: var(--paper); text-align: left; max-width: 22ch; margin: 0 0 clamp(16px, 1.8vw, 22px); } #engagements h2.eng-title em { font-family: var(--display); font-style: italic; font-weight: 700; color: var(--brand); } #engagements.eng-intro { font-family: var(--body); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: rgba(252, 252, 250, 0.72); max-width: 60ch; margin: 0 0 clamp(32px, 4vw, 52px); } #engagements.section-eyebrow { text-align: left; } /* ----------- ENGAGEMENTS INDEX (editorial manifesto, 2026-05-18; single-col 7-service map + wavy nav-style separators 2026-05-18) ----------- */.eng-index { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 18px); }.eng-row { position: relative; padding: 0; }.eng-row { background-image: var(--wavy-paper-soft); background-repeat: no-repeat; background-size: 100% 8px; background-position: top left; }.eng-row:last-child { background-image: var(--wavy-paper-soft), var(--wavy-paper-soft); background-repeat: no-repeat, no-repeat; background-size: 100% 8px, 100% 8px; background-position: top left, bottom left; }.eng-row::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--eng-accent, var(--brand)); transform: scaleX(0); transform-origin: left center; transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; }.eng-row:hover::before { transform: scaleX(1); }.eng-row-link { display: block; color: inherit; text-decoration: none; padding: clamp(18px, 2vw, 26px) clamp(8px, 1.4vw, 18px) clamp(18px, 2vw, 26px) 0; transition: background 240ms ease, padding 240ms ease; border-radius: 4px; }.eng-row-link:hover { background: rgba(252, 252, 250, 0.025); padding-left: clamp(10px, 1.4vw, 18px); }.eng-num { display: inline-block; font-family: var(--mono); font-size: 0.72em; font-weight: 800; letter-spacing: 0.08em; color: var(--eng-accent, var(--brand)); margin-right: clamp(10px, 1.2vw, 16px); vertical-align: 0.18em; }.eng-name { font-family: var(--display-hero); font-weight: 700; font-style: normal; font-size: clamp(20px, 1.85vw, 28px); line-height: 1.2; letter-spacing: -0.02em; color: var(--paper); margin: 0 0 clamp(6px, 0.8vw, 10px); }.eng-name em { font-family: var(--display); font-style: italic; font-weight: 700; color: var(--eng-accent, var(--brand)); }.eng-desc { font-family: var(--body); font-size: clamp(13px, 1vw, 15px); line-height: 1.5; color: rgba(252, 252, 250, 0.72); margin: 0; max-width: 92ch; }.eng-arrow { display: inline-block; margin-left: clamp(10px, 1.2vw, 16px); font-family: var(--display); font-style: italic; font-size: 0.85em; color: rgba(252, 252, 250, 0.36); transition: color 240ms ease, transform 240ms ease; }.eng-row-link:hover .eng-arrow { color: var(--eng-accent, var(--brand)); transform: translateX(4px); }@media (max-width: 760px) {.eng-index { gap: clamp(14px, 2.4vw, 22px); }.eng-row-link { padding: clamp(16px, 3vw, 22px) 4px clamp(18px, 3.4vw, 24px); }.eng-row-link:hover { padding-left: 4px; }.eng-name { font-size: clamp(22px, 5.4vw, 28px); line-height: 1.25; }.eng-num { font-size: 0.64em; margin-right: 10px; }.eng-arrow { display: none; }}.fib-grid { display: grid; grid-template-columns: repeat(21, 1fr); /* minmax(floor, auto), preserves Fibonacci hierarchy while letting rows expand to fit content (no clipping ever) */ grid-template-rows: minmax(clamp(160px, 15vw, 220px), auto) minmax(clamp(160px, 15vw, 210px), auto) minmax(clamp(170px, 16vw, 220px), auto) minmax(clamp(130px, 12vw, 160px), auto); gap: 2px; margin: 0 auto; }.fib-card { position: relative; padding: clamp(20px, 2vw, 36px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: transform 0.35s ease, filter 0.35s ease; }.fib-card:hover { transform: scale(0.99); filter: brightness(1.08); } /* Wavy hint on RIGHT edge of every tile (ink-colored wave eats into the tile's bg) */.fib-card::before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 6px; pointer-events: none; z-index: 3; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 120' preserveAspectRatio='none'><path d='M3,0 Q1.2,15 3,30 T3,60 T3,90 T3,120 L6,120 L6,0 Z' fill='%230A0A09'/></svg>"); background-size: 100% 100%; background-repeat: no-repeat; } /* Wavy hint on BOTTOM edge of every tile */.fib-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; pointer-events: none; z-index: 3; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'><path d='M0,3 Q15,1.2 30,3 T60,3 T90,3 T120,3 L120,6 L0,6 Z' fill='%230A0A09'/></svg>"); background-size: 100% 100%; background-repeat: no-repeat; } /* HERO TIER, three brand-colour tiles at reduced saturation (Option C: brand colours nest into the cream-coded warm-ink universe rather than fighting it. ~45% opacity over ink yields muted warm tones that read as accent, not poster.) */.fib-card.hero-a { grid-column: 1 / 14; grid-row: 1 / 3; background: rgba(255, 107, 31, 0.55); color: var(--paper); }.fib-card.hero-b { grid-column: 14 / 22; grid-row: 1 / 2; background: rgba(255, 214, 10, 0.45); color: var(--ink); }.fib-card.hero-c { grid-column: 14 / 19; grid-row: 2 / 3; background: rgba(230, 48, 39, 0.50); color: var(--paper); } /* MEDIUM TIER, dark grey plus coloured top-border accent */.fib-card.medium { background: #1A1A1A; color: var(--paper); border-top: 3px solid transparent; }.fib-card.medium-d { grid-column: 19 / 22; grid-row: 2 / 3; border-top-color: var(--brand); }.fib-card.medium-e { grid-column: 1 / 7; grid-row: 3 / 4; border-top-color: var(--yellow); }.fib-card.medium-f { grid-column: 7 / 13; grid-row: 3 / 4; border-top-color: var(--red); }.fib-card.medium-g { grid-column: 13 / 18; grid-row: 3 / 4; border-top-color: var(--brand); } /* MINI TIER, darker base, brand-color top-strip (matches medium tier treatment) */.fib-card.mini { background: #0F0F0F; color: var(--paper); border-top: 3px solid transparent; }.fib-card.mini-h { grid-column: 18 / 22; grid-row: 3 / 4; border-top-color: var(--red); }.fib-card.mini-i { grid-column: 1 / 11; grid-row: 4 / 5; border-top-color: var(--yellow); }.fib-card.mini-j { grid-column: 11 / 22; grid-row: 4 / 5; border-top-color: var(--brand); } /* Structural corner annotation */ /* Name, Boldonse (matches hero font for legibility) */.fib-name { font-family: var(--display); font-style: normal; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }.fib-card.hero-a.fib-name { font-size: clamp(22px, 2.6vw, 36px); }.fib-card.hero-b.fib-name,.fib-card.hero-c.fib-name { font-size: clamp(18px, 2vw, 26px); }.fib-card.medium.fib-name { font-size: clamp(14px, 1.5vw, 18px); }.fib-card.mini.fib-name { font-size: clamp(13px, 1.4vw, 17px); } /* Description */.fib-desc { font-family: var(--body); font-size: clamp(13px, 1vw, 15px); line-height: 1.5; margin: clamp(8px, 1vw, 12px) 0 0; max-width: 40ch; opacity: 0.85; }.fib-card.hero-a.fib-desc { font-size: clamp(14px, 1.1vw, 17px); max-width: 44ch; }.fib-card.mini.fib-desc { display: none; } /* Responsive collapse */ @media (max-width: 1100px) {.fib-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 2px; }.fib-card.hero-a,.fib-card.hero-b,.fib-card.hero-c { grid-column: span 2; grid-row: auto; min-height: clamp(200px, 30vw, 280px); }.fib-card.medium,.fib-card.mini { grid-column: span 1; grid-row: auto; min-height: clamp(120px, 22vw, 180px); } } @media (max-width: 560px) {.fib-grid { grid-template-columns: 1fr; }.fib-card { grid-column: span 1 !important; min-height: clamp(140px, 30vw, 200px) !important; } } /* ============================================================ SECTION 3, INDUSTRIES, Voronoi-organic tile-packing on paper-cool. 12-col x 5-row grid, 12 irregular tiles, Insurance as anchor. ============================================================ */ /* Global section-eyebrow (was scoped to #engagements; reused here on paper-cool) */.section-eyebrow { font-family: var(--mono); font-size: clamp(11px, 1vw, 13px); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-fade); margin: 0; } #industries.bg-paper-cool { background: var(--paper-warm); }.sec-wrap { margin: 0 auto; padding: clamp(36px, 5vw, 72px) clamp(24px, 5vw, 80px); }.sec-header { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(24px, 4vw, 48px); margin-bottom: clamp(32px, 4vw, 56px); flex-wrap: wrap; }.sec-header-left { flex: 1; min-width: 240px; }.sec-title { font-family: var(--display); font-weight: 700; font-style: italic; font-size: clamp(36px, 5vw, 64px); line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); margin: clamp(8px, 1vw, 14px) 0 0; }.sec-title.sec-em { color: var(--brand); }.sec-sub { font-family: var(--body); font-style: italic; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.55; color: var(--ink-fade); max-width: 32ch; text-align: right; margin: 0; } /* Magazine numbered list (no visible numbers), 4-col x 3-row */.ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; list-style: none; padding-left: 0; margin: clamp(24px, 3vw, 40px) 0 0; padding-top: 8px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 8' preserveAspectRatio='none'><path d='M 0,4 C 80,1 200,7 320,3 C 460,5 580,1 700,4 C 830,7 980,1 1120,5 C 1180,3 1200,4 1200,4 C 1280,1 1400,7 1520,3 C 1660,5 1780,1 1900,4 C 2030,7 2180,1 2320,5 C 2380,3 2400,4 2400,4' fill='none' stroke='rgba(10,10,9,0.18)' stroke-width='1' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-size: 100% 8px; background-position: top left; }.ind-item { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); padding: clamp(20px, 2.4vw, 32px) clamp(16px, 1.8vw, 26px); border-right: 1px solid rgba(10, 10, 9, 0.12); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 8' preserveAspectRatio='none'><path d='M 0,4 C 80,1 200,7 320,3 C 460,5 580,1 700,4 C 830,7 980,1 1120,5 C 1180,3 1200,4 1200,4 C 1280,1 1400,7 1520,3 C 1660,5 1780,1 1900,4 C 2030,7 2180,1 2320,5 C 2380,3 2400,4 2400,4' fill='none' stroke='rgba(10,10,9,0.18)' stroke-width='1' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-size: 100% 8px; background-position: bottom left; color: var(--ink); text-decoration: none; position: relative; transition: background 0.25s ease; }.ind-item:nth-child(4n) { border-right: none; }.ind-item:hover { background: rgba(255, 107, 31, 0.06); }.ind-item:hover.ind-name { color: var(--brand); }.ind-item:hover.ind-icon { display: none;  color: var(--brand); }.ind-icon { display: inline-flex; align-items: center; justify-content: center; width: clamp(22px, 2vw, 28px); height: clamp(22px, 2vw, 28px); flex-shrink: 0; color: var(--ink); transition: color 0.25s ease; }.ind-icon svg { width: 100%; height: 100%; }.ind-name { font-family: var(--display); font-style: normal; font-weight: 700; font-size: clamp(16px, 1.8vw, 22px); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); transition: color 0.25s ease; } /* Hover wavy underline appears under the name */.ind-item::after { content: ''; position: absolute; left: clamp(16px, 1.8vw, 26px); right: clamp(16px, 1.8vw, 26px); bottom: clamp(14px, 1.6vw, 22px); height: 3px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 3' preserveAspectRatio='none'><path d='M0,1.5 Q25,0.5 50,1.5 T100,1.5 T150,1.5 T200,1.5' fill='none' stroke='%23FF6B1F' stroke-width='1' /></svg>"); background-repeat: no-repeat; background-size: 100% 100%; opacity: 0; transition: opacity 0.25s ease; }.ind-item:hover::after { opacity: 1; } /* Responsive: 4-col, 2-col, 1-col */ @media (max-width: 900px) {.ind-grid { grid-template-columns: repeat(2, 1fr); }.ind-item:nth-child(4n) { border-right: 1px solid rgba(10, 10, 9, 0.12); }.ind-item:nth-child(2n) { border-right: none; }.sec-header { flex-direction: column; align-items: flex-start; }.sec-sub { text-align: left; max-width: 100%; } } @media (max-width: 540px) {.ind-grid { grid-template-columns: 1fr; }.ind-item { border-right: none !important; } } /* ============================================================ SECTION 4, HOW WE WORK (vertical asymmetric drop), INVERTED INK ============================================================ */.how-wrap { margin: 0 auto; padding: clamp(36px, 5vw, 72px) clamp(24px, 5vw, 80px); }.how-header { margin-bottom: clamp(32px, 4vw, 56px); }.how-eyebrow { color: rgba(252, 252, 250, 0.55); }.how-heading { font-family: var(--display); font-style: italic; font-weight: 700; font-size: clamp(36px, 5vw, 64px); line-height: 1.2; letter-spacing: -0.015em; color: var(--paper); margin: clamp(8px, 1vw, 14px) 0 0; }.how-heading em { color: var(--brand); }.principles-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }.principle-row { display: grid; grid-template-columns: clamp(32px, 3vw, 48px) 1fr clamp(96px, 11vw, 176px); gap: clamp(16px, 2vw, 32px); align-items: center; padding: calc(clamp(20px, 2vw, 32px) + 8px) 0 clamp(20px, 2vw, 32px); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 8' preserveAspectRatio='none'><path d='M 0,4 C 80,1 200,7 320,3 C 460,5 580,1 700,4 C 830,7 980,1 1120,5 C 1180,3 1200,4 1200,4 C 1280,1 1400,7 1520,3 C 1660,5 1780,1 1900,4 C 2030,7 2180,1 2320,5 C 2380,3 2400,4 2400,4' fill='none' stroke='rgba(252,252,250,0.22)' stroke-width='1' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-size: 100% 8px; background-position: top left; position: relative; }.principle-row:last-child { padding-bottom: calc(clamp(20px, 2vw, 32px) + 8px); box-shadow: 0 -1px 0 transparent; } .principle-row:last-child::after { content: ""; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 8' preserveAspectRatio='none'><path d='M 0,4 C 80,1 200,7 320,3 C 460,5 580,1 700,4 C 830,7 980,1 1120,5 C 1180,3 1200,4 1200,4 C 1280,1 1400,7 1520,3 C 1660,5 1780,1 1900,4 C 2030,7 2180,1 2320,5 C 2380,3 2400,4 2400,4' fill='none' stroke='rgba(252,252,250,0.22)' stroke-width='1' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-size: 100% 8px; background-position: bottom left; } /* Alternating side: data-side="right" means media on left, content offset right. Default (data-side="left"): num, content, media. data-side="right" swaps order. */.principle-row[data-side="right"] { grid-template-columns: clamp(96px, 11vw, 176px) clamp(32px, 3vw, 48px) 1fr; }.principle-row[data-side="right"] .principle-num { order: 2; }.principle-row[data-side="right"] .principle-content { order: 3; text-align: left; }.principle-row[data-side="right"] .principle-media { order: 1; }.principle-row[data-side="left"] .principle-num { order: 1; }.principle-row[data-side="left"] .principle-content { order: 2; }.principle-row[data-side="left"] .principle-media { order: 3; }.principle-num { font-family: var(--mono); font-size: clamp(11px, 1vw, 13px); font-weight: 400; letter-spacing: 0.12em; color: rgba(252, 252, 250, 0.45); align-self: flex-start; padding-top: 6px; }.principle-content { display: flex; flex-direction: column; gap: clamp(10px, 1vw, 14px); }.principle-text { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -0.015em; color: var(--paper); margin: 0; }.principle-text strong { font-weight: 700; font-style: normal; }.principle-text em { font-style: italic; font-weight: 700; color: var(--brand); }.principle-desc { font-family: var(--body); font-weight: 400; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.6; color: rgba(252, 252, 250, 0.72); margin: 0; max-width: 64ch; }.principle-tag { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.3; color: rgba(255, 107, 31, 0.78); margin: 0; }.principle-cite { color: rgba(252, 252, 250, 0.95); text-decoration: none; border-bottom: 1px solid rgba(252, 252, 250, 0.35); transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1), border-color 160ms cubic-bezier(0.22, 1, 0.36, 1); }.principle-cite:hover { color: var(--brand); border-bottom-color: var(--brand); }.principle-media { display: flex; align-items: center; justify-content: center; }.principle-image, video.principle-image { width: clamp(96px, 10vw, 160px); height: clamp(96px, 10vw, 160px); object-fit: cover; border-radius: 4px; display: block; flex: 0 0 auto; filter: brightness(1.02); }.media-placeholder.mini { width: 100%; max-width: clamp(48px, 6vw, 88px); padding: clamp(8px, 1vw, 14px); font-size: 8px; gap: 2px; }.media-placeholder.mini.ph-type { font-size: 8px; letter-spacing: 0.18em; }.media-placeholder.mini.ph-spec { font-size: 7px; letter-spacing: 0.12em; opacity: 0.6; } @media (max-width: 720px) {.principle-row,.principle-row[data-side="right"] { grid-template-columns: clamp(40px, 8vw, 56px) 1fr; }.principle-row[data-side="right"] .principle-num,.principle-row[data-side="left"] .principle-num { order: 1; }.principle-row[data-side="right"] .principle-content,.principle-row[data-side="left"] .principle-content { order: 2; }.principle-row[data-side="right"] .principle-media,.principle-row[data-side="left"] .principle-media { display: none; } } /* ============================================================ SECTION 5, PROOF (single anchored block) ============================================================ */.proof { max-width: 1080px; margin: 0 auto; }.proof-grid { display: grid; grid-template-columns: 1fr 240px; gap: clamp(28px, 4vw, 56px); align-items: start; } @media (max-width: 880px) {.proof-grid { grid-template-columns: 1fr; } }.proof-lead { font-family: var(--display); font-weight: 700; font-style: italic; font-size: clamp(25px, 3.2vw, 47px); line-height: 1.2; letter-spacing: -0.012em; color: var(--ink); max-width: 24ch; margin: 0 0 clamp(32px, 4vw, 48px); word-break: keep-all; }.proof-prose { font-family: var(--body); font-size: clamp(17px, 1.25vw, 19px); line-height: 1.65; color: var(--ink); max-width: 65ch; }.proof-prose em { font-style: italic; color: var(--ink); }.proof-prose strong { font-weight: 700; }.proof-media { width: 100%; max-width: 240px; justify-self: end; }.proof-logo { width: 100%; max-width: 240px; height: auto; display: block; } /* FOUNDER SECTION (standalone, bg-paper) */ #founder.bg-paper { background: var(--paper); padding: calc(clamp(40px, 5vw, 80px) + 8px) clamp(24px, 5vw, 80px) clamp(40px, 5vw, 80px); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 8' preserveAspectRatio='none'><path d='M 0,4 C 80,1 200,7 320,3 C 460,5 580,1 700,4 C 830,7 980,1 1120,5 C 1180,3 1200,4 1200,4 C 1280,1 1400,7 1520,3 C 1660,5 1780,1 1900,4 C 2030,7 2180,1 2320,5 C 2380,3 2400,4 2400,4' fill='none' stroke='rgba(10,10,9,0.18)' stroke-width='1' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-size: 100% 8px; background-position: top left; }.founder-section { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; max-width: 1100px; margin: 0 auto; } @media (max-width: 760px) {.founder-section { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 32px); } }.founder-portrait { width: 100%; }.founder-portrait-link { display: block; width: 100%; aspect-ratio: 1 / 1; max-width: 360px; text-decoration: none; transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1); }.founder-portrait-link:hover { transform: translateY(-2px); }.founder-portrait-image { width: 100%; height: 100%; object-fit: contain; display: block; background: transparent; }.founder-content { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 22px); }.founder-eyebrow { margin: 0; }.founder-title { font-family: var(--display); font-weight: 700; font-style: italic; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); margin: 0; }.founder-title em.orange-em { font-style: italic; color: var(--brand); font-weight: 700; }.founder-quote { margin: 0; padding: 0; border: 0; }.founder-quote p { font-family: var(--body); font-weight: 400; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55; color: var(--ink); margin: 0; max-width: 56ch; }.founder-byline { font-family: var(--mono); font-size: clamp(12px, 1vw, 13px); letter-spacing: 0.08em; color: var(--ink-fade); margin: 0; }.founder-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(10, 10, 9, 0.30); transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1), border-color 160ms cubic-bezier(0.22, 1, 0.36, 1); font-weight: 700; }.founder-link:hover { color: var(--brand); border-bottom-color: var(--brand); }.founder-bio { font-family: var(--body); font-size: clamp(13px, 1.05vw, 15px); line-height: 1.55; color: var(--ink-fade); margin: 0; max-width: 60ch; }.proof-underwriter { font-family: var(--mono); font-size: clamp(10px, 0.85vw, 11px); font-weight: 400; letter-spacing: 0.06em; line-height: 1.5; color: var(--ink-fade); margin: clamp(10px, 1.2vw, 14px) 0 0; } @media (max-width: 880px) {.proof-media { justify-self: start; } } /* ============================================================ SECTION 4.5, HOW WE OPERATE (5 standards, condensed rows, paper-warm) ============================================================ */ #operate.bg-paper-warm { background: var(--paper-warm); } #operate { padding: clamp(40px, 5vw, 80px) clamp(24px, 5vw, 80px); }.operate-wrap { margin: 0 auto; }.operate-list { display: flex; flex-direction: column; gap: 0; margin-top: clamp(24px, 3vw, 40px); }.operate-row { display: grid; grid-template-columns: 56px 1fr auto; gap: clamp(20px, 2.5vw, 40px); align-items: center; padding: clamp(18px, 2vw, 28px) 0; border-bottom: 1px solid rgba(10, 10, 9, 0.10); }.operate-row:first-child { padding-top: 0; }.operate-row:last-child { border-bottom: none; padding-bottom: 0; }.operate-icon { color: var(--brand); display: flex; align-items: center; justify-content: center; }.operate-icon svg { width: clamp(28px, 2.6vw, 40px); height: clamp(28px, 2.6vw, 40px); }.operate-content { display: flex; flex-direction: column; gap: clamp(6px, 0.6vw, 10px); min-width: 0; }.operate-name { font-family: var(--display); font-weight: 700; font-style: normal; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); margin: 0; }.operate-desc { font-family: var(--body); font-weight: 400; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.55; color: var(--ink-fade); margin: 0; max-width: 64ch; }.operate-tag { font-family: var(--display); font-weight: 400; font-style: italic; font-size: clamp(13px, 1.15vw, 16px); line-height: 1.3; color: var(--ink); opacity: 0.55; text-align: right; white-space: nowrap; margin: 0; } @media (max-width: 800px) {.operate-row { grid-template-columns: 40px 1fr; gap: 14px; padding: clamp(16px, 3vw, 22px) 0; }.operate-tag { grid-column: 1 / -1; padding-left: 54px; text-align: left; white-space: normal; } } /* ============================================================ SECTION 7, CTA (single column), INVERTED INK ============================================================ */.cta { max-width: 1080px; margin: 0 auto; text-align: center; }.cta-headline { font-family: var(--display); font-weight: 700; font-style: italic; font-size: clamp(40px, 6.4vw, 96px); line-height: 1.2; letter-spacing: -0.018em; color: var(--paper); max-width: 20ch; margin: 0 auto clamp(36px, 4vw, 56px); word-break: keep-all; }.cta-headline.em { font-style: italic; color: inherit; }.cta-btn { display: inline-flex; align-items: center; gap: 12px; background: var(--orange); color: var(--paper); font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 16px 36px; border-radius: 100px; text-decoration: none; border: none; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease; }.cta-btn:hover { background: #D8541A; transform: scale(1.06) translateY(-2px); }.cta-btn.arr { font-size: 18px; transition: transform 0.2s ease; }.cta-btn:hover.arr { transform: translateX(5px); }.cta-secondary { display: block; margin-top: clamp(20px, 2.4vw, 28px); font-family: var(--body); font-style: italic; font-size: clamp(15px, 1.1vw, 17px); color: var(--ink-fade); text-decoration: none; }.cta-secondary:hover { color: var(--orange); } /* ============================================================ FOOTER (4-col, identity + 3 link columns, bg-paper-cool) ============================================================ */ footer { padding: clamp(48px, 5vw, 80px) var(--edge) clamp(28px, 3vw, 40px); } @media (max-width: 720px) { } @media (max-width: 980px) { } @media (max-width: 640px) { } /* SR-only */.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ====================================================================== PARTIAL-DRIVEN ADDITIONS (2026-05-16). required by _partials/*.html Mirror of the same block in platforms/_shared/platforms.css?v=20260525d. Future refactor: extract to /assets/brand.css and link from every page. ====================================================================== */.skip-link { position: absolute; left: 12px; top: -100px; z-index: 100; padding: 10px 16px; background: var(--ink, #0A0A09); color: var(--paper, #FCFCFA); font-family: var(--mono, 'Spline Sans Mono', monospace); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border-radius: 6px; transition: top 180ms; }.skip-link:focus { top: 12px; outline: 2px solid var(--brand, #FF6B1F); outline-offset: 2px; } @media (max-width: 980px) { } @media (max-width: 640px) { } @media (max-width: 880px) { } @media (max-width: 640px) { }