@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"); /* ================================================================== The Ivy Office — single stylesheet Design-system tokens (fonts, colour, type, spacing, base) followed by the site styles. Self-contained: no external CSS dependencies. ================================================================== */ /* ------------------------------------------------------------------ The Ivy Office — Webfonts Display : Archivo (heavy grotesque, statement headlines) Body/UI : Hanken Grotesk (clean humanist sans — deliberately NOT Inter) Mono : JetBrains Mono (data, tabular, captions) Fonts are served from Google Fonts; consumers load them via styles.css. ------------------------------------------------------------------ */ /* ================================================================== The Ivy Office — Color System Editorial, near-black. A monochrome "Ink" neutral carries the interface; a single bold accent does the talking. Default accent ........ Ivy (deep, confident green — ties to the name) Alternate accents ..... Brass · Cobalt · Oxblood Apply an alternate by adding a class to or any subtree: .accent-brass .accent-cobalt .accent-oxblood Dark mode ............. add .dark to (or [data-theme="dark"]). Authoring rule: components reference SEMANTIC tokens (--color-*). Primitive ramps (--ink-*, --ivy-* …) are never used directly. ================================================================== */ :root { /* ---- Primitive · Ink (warm near-black neutral) ---- */ --ink-0: #ffffff; --ink-50: #f7f6f3; --ink-100: #efede8; --ink-200: #e0ddd5; --ink-300: #c6c2b7; --ink-400: #9d988c; --ink-500: #6f6b61; --ink-600: #4e4b43; --ink-700: #34322d; --ink-800: #201f1b; --ink-900: #141310; --ink-950: #0a0908; /* ---- Primitive · Ivy (default accent — green) ---- */ --ivy-50: #ecfaf0; --ivy-100: #d1f2da; --ivy-200: #a4e4b6; --ivy-300: #6ace8c; --ivy-400: #34b265; --ivy-500: #12964a; --ivy-600: #0c7b3d; --ivy-700: #0c6133; --ivy-800: #0e4d2b; --ivy-900: #0c3e24; --ivy-950: #042113; /* ---- Primitive · Brass (alternate accent — gold) ---- */ --brass-50: #fbf6ea; --brass-100: #f5e7c6; --brass-200: #eccf8c; --brass-300: #e0b253; --brass-400: #cf9433; --brass-500: #b67a22; --brass-600: #985f1c; --brass-700: #79491c; --brass-800: #623b1d; --brass-900: #52321b; --brass-950: #2e1a0c; /* ---- Primitive · Cobalt (alternate accent — blue) ---- */ --cobalt-50: #eef2ff; --cobalt-100: #dde5ff; --cobalt-200: #c2cfff; --cobalt-300: #9aaeff; --cobalt-400: #6f84fb; --cobalt-500: #455df0; --cobalt-600: #2f41d6; --cobalt-700: #2734ad; --cobalt-800: #263089; --cobalt-900: #252e6d; --cobalt-950: #161a40; /* ---- Primitive · Oxblood (alternate accent — red) ---- */ --oxblood-50: #fcf3f3; --oxblood-100: #fae3e3; --oxblood-200: #f5cccd; --oxblood-300: #eda7a8; --oxblood-400: #e07577; --oxblood-500: #cf4b4e; --oxblood-600: #b82f33; --oxblood-700: #9a2327; --oxblood-800: #801f24; --oxblood-900: #6d1f23; --oxblood-950: #3c0c0e; /* ---- Primitive · Status ---- */ --moss-100: #dcf3e1; --moss-400: #4fb56e; --moss-600: #1e7c40; --moss-700: #1b6235; --gold-100: #fef3c7; --gold-400: #fbbf24; --gold-600: #d97706; --gold-700: #b45309; --rouge-100: #fee2e2; --rouge-400: #f87171; --rouge-600: #dc2626; --rouge-700: #b91c1c; /* ---- Accent slot ---- defaults to Ivy; alternates remap below ---- */ --accent-100: var(--ivy-100); --accent-200: var(--ivy-200); --accent-400: var(--ivy-400); --accent-500: var(--ivy-500); --accent-600: var(--ivy-600); --accent-700: var(--ivy-700); --accent-900: var(--ivy-900); --accent-950: var(--ivy-950); /* ================= SEMANTIC · LIGHT (default) ================= */ --color-surface: var(--ink-50); --color-surface-raised: var(--ink-0); --color-surface-sunken: var(--ink-100); --color-surface-inverse: var(--ink-950); --color-text: var(--ink-900); --color-text-muted: var(--ink-600); --color-text-subtle: var(--ink-500); --color-text-inverse: var(--ink-50); --color-text-on-accent: #ffffff; --color-border: var(--ink-200); --color-border-strong: var(--ink-300); --color-border-inverse: var(--ink-700); --color-primary: var(--accent-600); --color-primary-hover: var(--accent-700); --color-primary-subtle: var(--accent-100); --color-success: var(--moss-600); --color-success-subtle: var(--moss-100); --color-warning: var(--gold-700); --color-warning-subtle: var(--gold-100); --color-error: var(--rouge-600); --color-error-subtle: var(--rouge-100); --color-focus-ring: var(--accent-500); --color-scrim: rgb(10 9 8 / 0.55); --color-scrim-soft: rgb(10 9 8 / 0.30); } /* ===================== SEMANTIC · DARK ===================== */ .dark, [data-theme="dark"] { --accent-100: var(--ivy-900); --accent-200: var(--ivy-800); --accent-400: var(--ivy-500); --accent-500: var(--ivy-400); --accent-600: var(--ivy-400); --accent-700: var(--ivy-300); --accent-900: var(--ivy-200); --accent-950: var(--ivy-100); --color-surface: var(--ink-950); --color-surface-raised: var(--ink-900); --color-surface-sunken: #07060500; --color-surface-sunken: #060504; --color-surface-inverse: var(--ink-50); --color-text: var(--ink-50); --color-text-muted: var(--ink-400); --color-text-subtle: var(--ink-500); --color-text-inverse: var(--ink-900); --color-text-on-accent: #07120b; --color-border: var(--ink-800); --color-border-strong: var(--ink-700); --color-border-inverse: var(--ink-300); --color-primary: var(--accent-500); --color-primary-hover: var(--accent-700); --color-primary-subtle: var(--accent-100); --color-success: var(--moss-400); --color-success-subtle: #0a2417; --color-warning: var(--gold-400); --color-warning-subtle: #2e1f06; --color-error: var(--rouge-400); --color-error-subtle: #2c0f0f; --color-focus-ring: var(--accent-500); --color-scrim: rgb(0 0 0 / 0.62); --color-scrim-soft: rgb(0 0 0 / 0.35); } /* ============ ALTERNATE ACCENTS (light + dark aware) ============ */ .accent-brass { --accent-100: var(--brass-100); --accent-200: var(--brass-200); --accent-400: var(--brass-400); --accent-500: var(--brass-500); --accent-600: var(--brass-600); --accent-700: var(--brass-700); --accent-900: var(--brass-900); --accent-950: var(--brass-950); --color-text-on-accent: #ffffff; } .accent-cobalt { --accent-100: var(--cobalt-100); --accent-200: var(--cobalt-200); --accent-400: var(--cobalt-400); --accent-500: var(--cobalt-500); --accent-600: var(--cobalt-600); --accent-700: var(--cobalt-700); --accent-900: var(--cobalt-900); --accent-950: var(--cobalt-950); --color-text-on-accent: #ffffff; } .accent-oxblood { --accent-100: var(--oxblood-100); --accent-200: var(--oxblood-200); --accent-400: var(--oxblood-400); --accent-500: var(--oxblood-500); --accent-600: var(--oxblood-600); --accent-700: var(--oxblood-700); --accent-900: var(--oxblood-900); --accent-950: var(--oxblood-950); --color-text-on-accent: #ffffff; } .dark.accent-brass, [data-theme="dark"].accent-brass, .dark.accent-cobalt, [data-theme="dark"].accent-cobalt, .dark.accent-oxblood, [data-theme="dark"].accent-oxblood { --accent-500: var(--accent-400); --accent-600: var(--accent-400); } /* ================================================================== The Ivy Office — Typography Archivo (display) · Hanken Grotesk (body/UI) · JetBrains Mono (data) Display is heavy and tightly tracked. Headlines may be period- punctuated for cadence ("Decisions. That Compound."). Sentence case for editorial headers; uppercase reserved for compact UI labels only. ================================================================== */ :root { /* ---- Families ---- */ --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif; --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace; /* ---- Weights ---- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold:800; --weight-black: 900; /* ---- Fluid display + fixed body scale ---- */ --text-display-1: clamp(2.75rem, 6vw, 5.5rem); --text-display-2: clamp(2.25rem, 4.5vw, 4rem); --text-h1: clamp(2rem, 3.5vw, 3rem); --text-h2: clamp(1.625rem, 2.5vw, 2.25rem); --text-h3: 1.5rem; --text-h4: 1.25rem; --text-h5: 1.125rem; --text-h6: 1rem; --text-body-lg: 1.125rem; --text-body: 1rem; --text-body-sm: 0.875rem; --text-caption: 0.75rem; --text-label: 0.8125rem; --text-code: 0.875rem; /* ---- Line heights ---- */ --leading-tight: 0.95; --leading-snug: 1.1; --leading-heading: 1.2; --leading-body: 1.6; /* ---- Tracking ---- */ --tracking-tightest: -0.03em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-label: 0.08em; /* uppercase UI labels / eyebrow-less kickers */ } /* ---- Optional helper classes (semantic specimens) ---- */ .t-display-1 { font-family: var(--font-display); font-size: var(--text-display-1); font-weight: var(--weight-black); line-height: var(--leading-tight); letter-spacing: var(--tracking-tightest); text-wrap: balance; } .t-display-2 { font-family: var(--font-display); font-size: var(--text-display-2); font-weight: var(--weight-extrabold); line-height: 1; letter-spacing: -0.025em; text-wrap: balance; } .t-h1 { font-family: var(--font-display); font-size: var(--text-h1); font-weight: var(--weight-extrabold); line-height: 1.05; letter-spacing: var(--tracking-tight); } .t-h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: -0.015em; } .t-h3 { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--weight-bold); line-height: var(--leading-heading); letter-spacing: -0.01em; } .t-body-lg { font-family: var(--font-sans); font-size: var(--text-body-lg); line-height: var(--leading-body); } .t-body { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-body); } .t-label { font-family: var(--font-sans); font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; } .t-mono { font-family: var(--font-mono); font-size: var(--text-code); } /* ================================================================== The Ivy Office — Spacing, Radius, Elevation, Motion, Layout 4px base grid. Low radii for a structural, editorial feel. ================================================================== */ :root { /* ---- Spacing (4px grid) ---- */ --space-0: 0; --space-px: 1px; --space-0_5: 0.125rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* ---- Radius (sharp, architectural) ---- */ --radius-none: 0; --radius-sm: 0.125rem; --radius-md: 0.25rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-full: 9999px; /* ---- Elevation — restrained, warm-tinted shadows ---- */ --shadow-xs: 0 1px 2px rgb(20 19 16 / 0.06); --shadow-sm: 0 1px 3px rgb(20 19 16 / 0.08), 0 1px 2px rgb(20 19 16 / 0.05); --shadow-md: 0 4px 12px rgb(20 19 16 / 0.10), 0 2px 4px rgb(20 19 16 / 0.06); --shadow-lg: 0 12px 32px rgb(20 19 16 / 0.14), 0 4px 8px rgb(20 19 16 / 0.06); --shadow-xl: 0 24px 56px rgb(20 19 16 / 0.18); /* ---- Z-index ---- */ --z-base: 0; /* @kind other */ --z-raised: 10; /* @kind other */ --z-dropdown: 1000; /* @kind other */ --z-sticky: 1100; /* @kind other */ --z-overlay: 1300; /* @kind other */ --z-modal: 1400; /* @kind other */ --z-popover: 1500; /* @kind other */ --z-toast: 1600; /* @kind other */ --z-tooltip: 1700; /* @kind other */ /* ---- Motion ---- */ --duration-instant: 75ms; /* @kind other */ --duration-fast: 150ms; /* @kind other */ --duration-base: 200ms; /* @kind other */ --duration-moderate: 300ms; /* @kind other */ --duration-slow: 500ms; /* @kind other */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */ --ease-decelerate: cubic-bezier(0, 0, 0, 1); /* @kind other */ --ease-accelerate: cubic-bezier(0.3, 0, 1, 1); /* @kind other */ --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2); /* @kind other */ /* ---- Containers ---- */ --container-prose: 65ch; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --container-full: 100%; } /* ================================================================== The Ivy Office — Base resets, layout primitives & signature utilities ================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text); background: var(--color-surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, video { display: block; max-width: 100%; height: auto; } :where(h1, h2, h3) { font-family: var(--font-display); text-wrap: balance; margin: 0; } :where(h4, h5, h6) { font-family: var(--font-sans); margin: 0; } :where(p) { text-wrap: pretty; } /* ---- Skip link ---- */ .skip-link { position: absolute; left: var(--space-2); top: -3rem; background: var(--color-text); color: var(--color-surface); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font: var(--weight-semibold) var(--text-label)/1 var(--font-sans); z-index: var(--z-toast); transition: top var(--duration-base) var(--ease-standard); } .skip-link:focus { top: var(--space-2); } /* ---- Container ---- */ .container { width: 100%; max-width: var(--container-2xl); margin-inline: auto; padding-inline: var(--space-4); } @media (min-width: 768px) { .container { padding-inline: var(--space-8); } } @media (min-width: 1280px) { .container { padding-inline: var(--space-12); } } /* ---- Section rhythm ---- */ .section { padding-block: var(--space-16); } @media (min-width: 768px) { .section { padding-block: var(--space-20); } } @media (min-width: 1280px) { .section { padding-block: var(--space-24); } } /* ---- Statement headline ---- */ .statement { font-family: var(--font-display); font-size: var(--text-display-1); font-weight: var(--weight-black); line-height: var(--leading-tight); letter-spacing: var(--tracking-tightest); text-wrap: balance; margin: 0; } /* ---- Eyebrow-less kicker / uppercase label ---- */ .kicker { font-family: var(--font-sans); font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); } /* ---- Full-bleed media section with scrim ---- */ .media-section { position: relative; isolation: isolate; min-height: clamp(20rem, 60vh, 44rem); display: grid; align-items: end; padding: var(--space-16) var(--space-6) var(--space-16); color: #fff; background: var(--media-src) center / cover no-repeat; border-radius: var(--radius-none); overflow: hidden; } .media-section::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--color-scrim-soft) 0%, var(--color-scrim) 100%); } .media-section__title { font-family: var(--font-display); font-size: var(--text-display-2); font-weight: var(--weight-black); letter-spacing: -0.025em; max-width: 18ch; text-wrap: balance; margin: 0; } /* ---- Signature arrow link ---- */ .arrow-link { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: var(--text-label); color: currentColor; text-decoration: none; transition: gap var(--duration-base) var(--ease-standard); } .arrow-link::before { content: "\2192"; } .arrow-link::after { content: "\2192"; } .arrow-link:hover { gap: var(--space-3); } .arrow-link:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 4px; } /* ---- Global focus ---- */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } :focus:not(:focus-visible) { outline: none; } /* ---- Hairline rule ---- */ .rule { border: 0; border-top: 1px solid var(--color-border); margin: 0; } @keyframes tio-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===== Site styles ===== */ :root { --header-h: 72px; --bleed: clamp(1.25rem, 4vw, 3rem); --maxw: 1280px; } body { overflow-x: hidden; } a { color: inherit; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--bleed); } .wrap--narrow { max-width: 920px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-body-sm); line-height: 1; padding: 14px 22px; border-radius: var(--radius-sm); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard), color var(--duration-fast), border-color var(--duration-fast); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--color-primary); color: var(--color-text-on-accent); } .btn--primary:hover { background: var(--color-primary-hover); } .btn--light { background: #fff; color: var(--ink-900); border-color: #fff; } .btn--light:hover { background: var(--ink-100); } .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } .btn--ghost:hover { background: rgba(255,255,255,.12); } .btn--sm { padding: 10px 16px; } /* ---- Header ---- */ .site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: color-mix(in srgb, var(--color-surface) 86%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--color-border); } .site-header__bar { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .wordmark { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; } .wordmark__monogram { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--color-text); color: var(--color-surface-raised); font-family: var(--font-display); font-weight: var(--weight-black); font-size: 15px; letter-spacing: -0.02em; } .wordmark__name { display: grid; line-height: 1; } .wordmark__name b { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: 18px; letter-spacing: -0.02em; color: var(--color-text); } .wordmark__name span { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: 8.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 3px; } .nav { display: flex; align-items: center; gap: 2px; margin-left: auto; } .nav__link { position: relative; padding: 8px 14px; font-family: var(--font-sans); font-size: var(--text-body-sm); font-weight: var(--weight-semibold); text-decoration: none; color: var(--color-text-muted); transition: color var(--duration-fast); white-space: nowrap; } .nav__link:hover { color: var(--color-text); } .nav__link[aria-current="page"] { color: var(--color-text); } .nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--color-primary); } .nav__group { position: relative; } .nav__toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font-family: var(--font-sans); font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); padding: 8px 14px; } .nav__toggle:hover, .nav__group:hover .nav__toggle { color: var(--color-text); } .nav__toggle .chev { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform var(--duration-fast); } .nav__menu { position: absolute; top: calc(100% + 6px); left: 8px; min-width: 230px; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--duration-fast), transform var(--duration-fast), visibility var(--duration-fast); } .nav__group:hover .nav__menu, .nav__group:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav__menu a { display: block; padding: 11px 14px; border-radius: var(--radius-sm); text-decoration: none; font-family: var(--font-sans); font-size: var(--text-body-sm); font-weight: var(--weight-medium); color: var(--color-text); } .nav__menu a:hover { background: var(--color-surface-sunken); color: var(--color-primary); } .header__actions { display: flex; align-items: center; gap: var(--space-3); } .header__cta { display: inline-flex; } .burger { display: none; width: 40px; height: 40px; place-items: center; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text); font-size: 20px; } .mobile-menu { display: none; background: var(--color-surface); border-top: 1px solid var(--color-border); padding: 6px var(--bleed) 18px; } .mobile-menu a, .mobile-menu .mobile-menu__sub a { display: block; text-decoration: none; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 20px; letter-spacing: -0.01em; color: var(--color-text); padding: 13px 4px; border-bottom: 1px solid var(--color-border); } .mobile-menu__sub a { font-size: 16px; font-family: var(--font-sans); font-weight: var(--weight-medium); color: var(--color-text-muted); padding-left: 18px; } .site-header.is-open .mobile-menu { display: block; } /* ---- Transparent header over image hero ---- */ body.has-hero .site-header { position: fixed; top: 0; left: 0; right: 0; background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base); } body.has-hero .site-header .wordmark__name b, body.has-hero .site-header .nav__link, body.has-hero .site-header .nav__toggle { color: #fff; } body.has-hero .site-header .wordmark__name span { color: rgba(255,255,255,.7); } body.has-hero .site-header .nav__link:hover, body.has-hero .site-header .nav__toggle:hover { color: rgba(255,255,255,.72); } body.has-hero .site-header .burger { color: #fff; border-color: rgba(255,255,255,.5); } body.has-hero .site-header .wordmark__monogram { background: #fff; color: var(--ink-900); } body.has-hero .site-header.is-solid { background: color-mix(in srgb, var(--color-surface) 86%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom-color: var(--color-border); } body.has-hero .site-header.is-solid .wordmark__name b { color: var(--color-text); } body.has-hero .site-header.is-solid .wordmark__name span { color: var(--color-text-muted); } body.has-hero .site-header.is-solid .nav__link, body.has-hero .site-header.is-solid .nav__toggle { color: var(--color-text-muted); } body.has-hero .site-header.is-solid .nav__link:hover, body.has-hero .site-header.is-solid .nav__toggle:hover { color: var(--color-text); } body.has-hero .site-header.is-solid .burger { color: var(--color-text); border-color: var(--color-border); } body.has-hero .site-header.is-solid .wordmark__monogram { background: var(--color-text); color: var(--color-surface-raised); } /* ---- Hero / media bands ---- */ .hero { position: relative; isolation: isolate; min-height: calc(100vh - 10px); margin: 5px; border-radius: 15px; display: grid; align-items: end; color: #fff; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--media-src) center / cover no-repeat; transform: scale(var(--hero-zoom, 1)); transform-origin: center; will-change: transform; } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--color-scrim-soft) 0%, var(--color-scrim) 100%); } .hero__inner { padding-block: clamp(2.5rem, 6vw, 6rem); max-width: 60rem; } .hero h1 { font-family: var(--font-display); font-weight: var(--weight-black); font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: 0.96; letter-spacing: -0.035em; margin: 18px 0 0; text-wrap: balance; } .hero p { max-width: 50ch; margin-top: 22px; font-size: var(--text-body-lg); line-height: 1.6; color: rgba(255,255,255,.88); } .hero .kicker { color: rgba(255,255,255,.82); } .hero__actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; } .media-band { position: relative; isolation: isolate; min-height: clamp(20rem, 52vh, 34rem); display: grid; align-items: end; color: #fff; background: var(--media-src) center / cover no-repeat; overflow: hidden; } .media-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--color-scrim-soft), var(--color-scrim)); } .media-band__inner { padding-block: clamp(2.5rem, 5vw, 5rem); max-width: 46rem; } .media-band h2 { font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-display-2); line-height: 0.98; letter-spacing: -0.03em; margin: 0; text-wrap: balance; } .media-band p { max-width: 44ch; margin-top: 18px; font-size: var(--text-body-lg); line-height: 1.6; color: rgba(255,255,255,.86); } /* Arrow link — restyled hover: the bracketing arrows spread outward */ .arrow-link::before, .arrow-link::after { transition: transform var(--duration-base) var(--ease-standard); } .arrow-link:hover { gap: var(--space-2); } .arrow-link:hover::before { transform: translateX(-5px); } .arrow-link:hover::after { transform: translateX(5px); } @media (prefers-reduced-motion: reduce) { .arrow-link:hover::before, .arrow-link:hover::after { transform: none; } } .media-band__inner .arrow-link, .media-band__inner .btn { margin-top: 24px; } /* ---- Editorial page head (inner pages) ---- */ .page-head { padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: clamp(1.5rem, 3vw, 3rem); } .page-head h1 { font-family: var(--font-display); font-weight: var(--weight-black); font-size: clamp(2.4rem, 6vw, 5rem); line-height: 0.96; letter-spacing: -0.03em; margin: 16px 0 0; text-wrap: balance; } .page-head .lede, .lede { max-width: 54ch; margin-top: 22px; font-size: var(--text-body-lg); line-height: 1.6; color: var(--color-text-muted); } /* ---- Generic section helpers ---- */ .statement { color: var(--color-text); font-size: var(--text-h1); font-weight: 600; } .section--ink .statement { color: #fff; } /* Display headings run at a lighter 600 across the site */ .page-head h1, .hero__inner h1, .cta h2, .case h2, .job h2, .sector h2, .media-band__inner h2, .footer-brand b { font-weight: 600; } /* Section sitting flush under the one above it */ .section--flush { padding-top: 0; } .section--sunken { background: var(--color-surface-sunken); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .section--ink { background: var(--color-surface-inverse); color: var(--color-text-inverse); } .section--ink .kicker { color: rgba(255,255,255,.5); } .section--ink p { color: rgba(255,255,255,.66); } .two-col { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } .two-col--end { align-items: end; } .col-body p { margin: 0 0 var(--space-4); font-size: var(--text-body-lg); line-height: 1.6; color: var(--color-text-muted); } .col-body p:last-child { margin-bottom: 0; } .section-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); } /* ---- Tiles (home) ---- */ .tiles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); } .tile { border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: clamp(1.75rem, 3vw, 2.75rem); display: grid; gap: 14px; align-content: start; } .tile__index { font-family: var(--font-mono); font-size: 12px; color: var(--color-primary); } .tile h3 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-h3); letter-spacing: -0.01em; margin: 0; } .tile p { margin: 0; font-size: var(--text-body-sm); line-height: 1.6; color: var(--color-text-muted); } .tile__links { display: grid; gap: 10px; margin-top: 6px; } /* ---- Capability / numbered rows ---- */ .cap-rows { border-top: 1px solid var(--color-border); } .cap-row { display: grid; grid-template-columns: 64px 1fr; gap: clamp(1rem, 3vw, 2rem); padding: clamp(1.4rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--color-border); align-items: start; } .cap-row__index { font-family: var(--font-mono); font-size: 13px; color: var(--color-primary); padding-top: 6px; } .cap-row h3 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-h3); letter-spacing: -0.01em; margin: 0 0 8px; } .cap-row p { margin: 0; font-size: var(--text-body); line-height: 1.6; color: var(--color-text-muted); } /* ---- Values grid ---- */ .values { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(2rem, 4vw, 3rem); margin-top: clamp(2rem, 4vw, 2.5rem); } .value { display: grid; gap: 10px; align-content: start; } .value__index { font-family: var(--font-mono); font-size: 12px; color: var(--color-primary); } .value h3 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-h4); letter-spacing: -0.01em; margin: 0; } .value p { margin: 0; font-size: var(--text-body-sm); line-height: 1.6; } /* ---- Stats ---- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(2rem, 4vw, 2.5rem); } .stat { display: grid; gap: 6px; } .stat b { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -0.03em; line-height: 1; color: var(--color-text); } .stat span { font-size: var(--text-body-sm); color: var(--color-text-muted); max-width: 24ch; } /* ---- Service blocks ---- */ .service { padding-block: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--color-border); } .service:last-child { border-bottom: 0; } .service > h2 { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-h1); letter-spacing: -0.02em; margin: 0; max-width: 20ch; } .service__body { margin: 18px 0 0; font-size: var(--text-body-lg); line-height: 1.65; color: var(--color-text-muted); max-width: 70ch; } .service__body + .service__body { margin-top: 14px; } .service__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); margin-top: clamp(1.75rem, 3vw, 2.5rem); } .panel { border-top: 2px solid var(--color-text); padding-top: 18px; } .panel__label { font-family: var(--font-sans); font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-subtle); display: block; margin-bottom: 14px; } .panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .panel li { font-size: var(--text-body); line-height: 1.5; color: var(--color-text); padding: 11px 0 11px 22px; border-bottom: 1px solid var(--color-border); position: relative; } .panel li::before { content: "\2192"; position: absolute; left: 0; color: var(--color-primary); } .panel li:last-child { border-bottom: 0; } .panel--quiet li { color: var(--color-text-muted); } /* ---- Sectors ---- */ .sector { padding-block: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--color-border); scroll-margin-top: calc(var(--header-h) + 16px); } .sector:last-child { border-bottom: 0; } .sector__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 5vw, 4rem); align-items: start; } .sector h2 { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-h1); letter-spacing: -0.02em; margin: 0 0 4px; } .sector__lead { font-size: var(--text-body-lg); line-height: 1.65; color: var(--color-text-muted); } .sector__lead p { margin: 0 0 14px; } .sector__lead p:last-child { margin-bottom: 0; } /* ---- Case studies ---- */ .case { padding-block: clamp(2.75rem, 5vw, 4.5rem); border-bottom: 1px solid var(--color-border); } .case:last-child { border-bottom: 0; } .case__meta { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 16px; } .tag { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text); border: 0; border-radius: 0; padding: 0; } .tag::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--color-primary); transform: rotate(45deg); } .case h2 { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-h1); letter-spacing: -0.02em; margin: 0; max-width: 24ch; } .case__intro { margin: 18px 0 0; font-size: var(--text-body-lg); line-height: 1.65; color: var(--color-text-muted); max-width: 70ch; } .case__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 2.5rem); margin-top: clamp(1.75rem, 4vw, 2.5rem); } .case__step { border-top: 2px solid var(--color-text); padding-top: 16px; } .case__step h3 { font-family: var(--font-sans); font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-subtle); margin: 0 0 12px; } .case__step p { margin: 0; font-size: var(--text-body); line-height: 1.6; color: var(--color-text-muted); } .case--result { background: var(--color-surface-sunken); } /* ---- Steps (about process) ---- */ .steps { border-top: 1px solid var(--color-border); margin-top: clamp(1.75rem,3vw,2.5rem); } .step { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 3vw, 2rem); padding: clamp(1.4rem, 3vw, 2.2rem) 0; border-bottom: 1px solid var(--color-border); align-items: start; } .step__index { font-family: var(--font-mono); font-size: 13px; color: var(--color-primary); padding-top: 6px; } .step h3 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-h3); letter-spacing: -0.01em; margin: 0 0 8px; } .step p { margin: 0; font-size: var(--text-body); line-height: 1.6; color: var(--color-text-muted); max-width: 72ch; } /* ---- CTA band ---- */ .cta { background: var(--color-primary); color: var(--color-text-on-accent); } .cta__inner { padding-block: clamp(3rem, 6vw, 5rem); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; } .cta h2 { font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-display-2); letter-spacing: -0.03em; line-height: 1; margin: 0; max-width: 20ch; color: var(--color-text-on-accent); } /* ---- Sector index list (home) ---- */ .sector-index { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(1.5rem, 3vw, 2rem); } .sector-index a { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(1.25rem, 3vw, 1.9rem); letter-spacing: -0.02em; text-decoration: none; color: var(--color-text); padding: 8px 18px 8px 0; border-bottom: 2px solid transparent; transition: color var(--duration-fast), border-color var(--duration-fast); } .sector-index a:hover { color: var(--color-primary); border-color: var(--color-primary); } /* ---- Careers / jobs ---- */ .checklist { list-style: none; margin: clamp(1.5rem,3vw,2rem) 0 0; padding: 0; display: grid; gap: 0; max-width: 70ch; border-top: 1px solid var(--color-border); } .checklist li { font-size: var(--text-body-lg); line-height: 1.55; padding: 16px 0 16px 30px; border-bottom: 1px solid var(--color-border); position: relative; color: var(--color-text); } .checklist li::before { content: "\2192"; position: absolute; left: 0; top: 16px; color: var(--color-primary); } .job { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-raised); padding: clamp(1.75rem, 4vw, 3rem); box-shadow: var(--shadow-sm); } .job__meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; } .job h2 { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-h2); letter-spacing: -0.02em; margin: 0; } .job__body { margin: 20px 0 0; font-size: var(--text-body); line-height: 1.65; color: var(--color-text-muted); max-width: 72ch; } .job__sub { font-family: var(--font-sans); font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-subtle); margin: 28px 0 14px; } /* ---- Contact ---- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .contact-detail { display: grid; gap: 18px; } .contact-detail .item { display: grid; gap: 4px; } .contact-detail .item span { font-family: var(--font-sans); font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-subtle); } .contact-detail .item a, .contact-detail .item p { margin: 0; font-size: var(--text-body); color: var(--color-text); text-decoration: none; } .contact-detail .item a:hover { color: var(--color-primary); } .form { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: clamp(1.6rem, 3vw, 2.6rem); box-shadow: var(--shadow-md); display: grid; gap: 18px; } .field { display: grid; gap: 8px; } .field label { font-family: var(--font-sans); font-size: var(--text-label); font-weight: var(--weight-semibold); color: var(--color-text); } .field input, .field textarea { font-family: var(--font-sans); font-size: var(--text-body); color: var(--color-text); padding: 12px; background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); outline: none; width: 100%; transition: border-color var(--duration-fast); } .field textarea { resize: vertical; min-height: 120px; } .field input:focus, .field textarea:focus { border-color: var(--color-primary); } .form__note { margin: 0; font-size: var(--text-caption); color: var(--color-text-subtle); } .form__sent { display: grid; gap: 12px; align-content: center; min-height: 300px; } .form__sent h2 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-h2); margin: 0; } .form__sent p { margin: 0; color: var(--color-text-muted); } .is-hidden { display: none !important; } /* ---- Footer ---- */ .site-footer { background: var(--color-surface-inverse); color: var(--color-text-inverse); } .site-footer__inner { padding-block: clamp(3rem, 6vw, 5rem) 2.5rem; } .footer-grid { display: grid; grid-template-columns: minmax(260px, 1.5fr) repeat(3, 1fr); gap: clamp(2rem, 4vw, 3rem); align-items: start; } .footer-brand { display: grid; gap: 18px; max-width: 360px; } .footer-brand b { font-family: var(--font-display); font-weight: var(--weight-black); font-size: 26px; letter-spacing: -0.02em; color: #fff; } .footer-brand p { margin: 0; font-size: var(--text-body-sm); line-height: 1.6; color: rgba(255,255,255,.62); } .footer-brand .arrow-link { color: var(--color-primary); } .footer-col { display: grid; gap: 12px; } .footer-col > span { font-family: var(--font-sans); font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: rgba(255,255,255,.45); } .footer-col a { font-family: var(--font-sans); font-size: var(--text-body-sm); color: rgba(255,255,255,.78); text-decoration: none; } .footer-col a:hover { color: #fff; } .footer-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .footer-bottom span { font-family: var(--font-sans); font-size: var(--text-caption); color: rgba(255,255,255,.5); } /* ---- Reveal (progressive enhancement only) ---- */ html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-decelerate), transform 700ms var(--ease-decelerate); } html.js .reveal.is-in { opacity: 1; transform: none; } /* ---- Responsive ---- */ @media (max-width: 960px) { .nav, .header__cta { display: none; } .burger { display: grid; } .tiles { grid-template-columns: 1fr; } .two-col, .sector__grid, .contact-grid { grid-template-columns: 1fr; } .case__steps { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .service__cols { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .cta__inner { align-items: flex-start; } .form__row { grid-template-columns: 1fr !important; } } @media (min-width: 641px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } } /* ---- Services rhythm (alternating layouts) ---- */ .service-sec { padding-block: clamp(2.75rem, 5vw, 4.5rem); } .service-sec + .service-sec { border-top: 1px solid var(--color-border); } .service-sec--alt { background: var(--color-surface-sunken); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .service-sec + .service-sec--alt { border-top: 0; } .service-num { display: block; font-family: var(--font-mono); font-size: 13px; color: var(--color-primary); margin-bottom: 14px; } .service-sec h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h1); letter-spacing: -0.02em; margin: 0; max-width: 22ch; } .service-sec .service__body { margin: 18px 0 0; font-size: var(--text-body-lg); line-height: 1.65; color: var(--color-text-muted); max-width: 66ch; } .service-sec .service__body + .service__body { margin-top: 14px; } .service-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .service-aside { display: grid; gap: clamp(1.5rem, 3vw, 2rem); } .service-aside .panel { margin: 0; } @media (min-width: 861px) { .service-sec--rev .service-split__lead { order: 2; } } @media (max-width: 860px) { .service-split { grid-template-columns: 1fr; } } /* ---- Contact (dark context band + flipped form) ---- */ .contact-intro h1 { color: #fff; } .contact-intro .lede { color: rgba(255,255,255,.82); } .contact-intro .reach-label { color: rgba(255,255,255,.5); margin: 34px 0 16px; } .contact-intro .reach { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); max-width: 80ch; } .contact-intro .reach p { margin: 0 0 14px; color: rgba(255,255,255,.72); font-size: var(--text-body); line-height: 1.65; } .contact-intro .reach p:last-child { margin-bottom: 0; } .contact-intro .reach a { color: var(--color-primary); text-decoration: none; } .contact-aside { display: grid; gap: 22px; align-content: start; } @media (max-width: 860px) { .contact-intro .reach { grid-template-columns: 1fr; } } /* ---- Legal / long-form prose (privacy policy) ---- */ .legal { max-width: 74ch; } .legal .legal-meta { font-family: var(--font-mono); font-size: var(--text-label); color: var(--color-text-subtle); margin: 0 0 4px; } .legal h2 { font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing: -0.02em; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; margin: 56px 0 4px; padding-top: 28px; border-top: 1px solid var(--color-border); } .legal h2:first-of-type { margin-top: 40px; } .legal h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-h5, 1.125rem); margin: 30px 0 0; color: var(--color-text); } .legal p { margin: 14px 0 0; line-height: 1.7; color: var(--color-text-subtle); } .legal ul { margin: 14px 0 0; padding-left: 1.2em; display: grid; gap: 10px; } .legal li { line-height: 1.7; color: var(--color-text-subtle); } .legal li b, .legal p b { color: var(--color-text); font-weight: 600; } .legal a { color: var(--color-primary); text-decoration: none; } .legal a:hover { text-decoration: underline; } .legal .legal-updated { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--color-border); font-family: var(--font-mono); font-size: var(--text-label); color: var(--color-text-subtle); } /* ---- 404 ---- */ .error-page { min-height: 70vh; display: grid; place-content: center; text-align: center; padding: clamp(3rem, 8vw, 7rem) 0; } .error-page .error-code { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-subtle); } .error-page h1 { font-family: var(--font-display); font-weight: var(--weight-black); letter-spacing: -0.03em; line-height: 0.98; font-size: clamp(3rem, 9vw, 6rem); margin: 18px 0 0; } .error-page p { max-width: 46ch; margin: 22px auto 0; color: var(--color-text-subtle); line-height: 1.6; } .error-page .error-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }