/* =====================================================================
Benmore v2 design system
Light-first, editorial, large light-weight type, pill controls,
alternating full-bleed dark sections. Plain CSS, no build step.
===================================================================== */
:root {
--v2-bg: #f4f4f2;
--v2-bg-2: #ebebe8;
--v2-fg: #0b0b0b;
--v2-muted: #6f6f6c;
--v2-line: rgba(0, 0, 0, 0.08);
--v2-dark: #050505;
--v2-dark-2: #101010;
--v2-dark-fg: #f4f4f2;
--v2-dark-muted: rgba(244, 244, 242, 0.62);
--v2-dark-line: rgba(255, 255, 255, 0.1);
--v2-accent: #1d54e2;
--v2-radius: 24px;
--v2-radius-sm: 12px;
--v2-nav-h: 60px;
--v2-gutter: clamp(16px, 1.5vw, 28px);
--v2-max: 100%;
--v2-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--v2-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--v2-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
/* SVG grain used on every "photo" surface */
--v2-grain: url("data:image/svg+xml;utf8,");
}
html.v2 { scroll-behavior: smooth; }
html.v2, .v2 body {
margin: 0;
background: var(--v2-bg);
color: var(--v2-fg);
font-family: var(--v2-font);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.v2 *, .v2 *::before, .v2 *::after { box-sizing: border-box; }
.v2 a { color: inherit; text-decoration: none; }
.v2 img { max-width: 100%; display: block; }
.v2 h1, .v2 h2, .v2 h3, .v2 h4, .v2 p { margin: 0; }
.v2 h1, .v2 h2, .v2 h3, .v2 .display {
font-weight: 400;
letter-spacing: -0.035em;
line-height: 1.04;
text-wrap: balance;
}
.v2 h1 { font-size: clamp(2.75rem, 6.4vw, 6rem); letter-spacing: -0.045em; line-height: 0.98; }
.v2 h2 { font-size: clamp(2.1rem, 4.4vw, 4.25rem); }
.v2 h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -0.025em; }
.v2 .lead { font-size: clamp(1.05rem, 1.35vw, 1.35rem); line-height: 1.4; letter-spacing: -0.01em; }
.v2 .muted { color: var(--v2-muted); }
.v2 .eyebrow {
font-size: 0.8rem; letter-spacing: 0.02em; color: var(--v2-muted);
display: inline-flex; align-items: center; gap: 10px;
}
.v2 .eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--v2-accent); border-radius: 2px; }
/* ---------- layout primitives ---------- */
.v2 .wrap, .v2 .nav-inner { width: 100%; max-width: var(--v2-max); margin: 0 auto; padding: 0 var(--v2-gutter); }
.v2 section { position: relative; }
.v2 .pad { padding: clamp(80px, 10vw, 160px) 0; }
.v2 .pad-sm { padding: clamp(56px, 7vw, 110px) 0; }
.v2 .is-dark { background: var(--v2-dark); color: var(--v2-dark-fg); }
.v2 .is-dark .muted { color: var(--v2-dark-muted); }
.v2 .is-dark .eyebrow { color: var(--v2-dark-muted); }
.v2 .grid { display: grid; gap: 24px; }
.v2 .center { text-align: center; }
.v2 .center h2, .v2 .center .lead { margin-left: auto; margin-right: auto; }
/* ---------- buttons ---------- */
.v2 .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 46px; padding: 0 22px; border-radius: 999px;
font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em;
border: 1px solid transparent; cursor: pointer; white-space: nowrap;
transition: transform 0.35s var(--v2-ease), background 0.25s, color 0.25s, border-color 0.25s;
}
.v2 .btn:hover { transform: translateY(-1px); }
.v2 .btn-dark { background: var(--v2-fg); color: #fff; }
.v2 .btn-dark:hover { background: #222; }
.v2 .btn-light { background: #fff; color: var(--v2-fg); }
.v2 .btn-light:hover { background: #f0f0ee; }
.v2 .btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
.v2 .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.v2 .btn-sm { height: 38px; padding: 0 16px; font-size: 0.85rem; }
.v2 .arrow-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.v2 .arrow-link::after { content: "→"; transition: transform 0.3s var(--v2-ease); }
.v2 .arrow-link:hover::after { transform: translateX(4px); }
/* ---------- announcement bar ---------- */
.v2 .announce {
position: relative; z-index: 60;
background: #2a2a2a; color: #fff; font-size: 0.82rem;
height: 36px; display: flex; align-items: center; justify-content: center; gap: 14px;
}
.v2 .announce a { opacity: 0.85; }
.v2 .announce a:hover { opacity: 1; }
.v2 .announce strong { font-weight: 500; }
/* ---------- nav ---------- */
.v2 .nav {
position: sticky; top: 0; z-index: 50;
height: var(--v2-nav-h);
color: var(--v2-fg);
transition: background 0.35s, backdrop-filter 0.35s;
}
.v2 .nav.on-dark { color: #fff; }
.v2 .nav.scrolled { background: rgba(244, 244, 242, 0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.v2 .nav.scrolled.on-dark { background: rgba(5, 5, 5, 0.62); }
.v2 .nav.on-dark.nav-fill { background: var(--v2-dark); }
.v2 .nav-inner {
height: 100%; display: flex; align-items: center; gap: 40px;
}
.v2 .nav-logo { display: inline-flex; align-items: center; color: inherit; }
.v2 .nav-logo svg { height: 30px; width: auto; }
.v2 .nav-links { display: flex; align-items: center; gap: 34px; list-style: none; margin: 0; padding: 0; flex: 1; height: 100%; }
.v2 .nav-links > li { position: static; height: 100%; display: flex; align-items: center; }
.v2 .nav-links > li > a, .v2 .nav-links > li > button {
font: inherit; font-size: 0.98rem; letter-spacing: -0.01em; color: inherit; opacity: 0.85;
background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
display: inline-flex; align-items: center; height: 100%; line-height: 1;
}
.v2 .nav-links > li > a:hover, .v2 .nav-links > li > button:hover, .v2 .nav-links > li.open > button { opacity: 1; }
.v2 .nav-right { display: flex; align-items: center; gap: 10px; }
.v2 .nav .btn { height: 40px; padding: 0 16px; font-size: 0.88rem; }
.v2 .nav.on-dark .btn-dark { background: #fff; color: var(--v2-fg); }
.v2 .nav-burger { display: none; width: 40px; height: 40px; border: 0; background: none; color: inherit; cursor: pointer; }
.v2 .nav-burger span { display: block; width: 20px; height: 1.5px; background: currentColor; margin: 5px auto; transition: transform 0.3s; }
/* mega menu */
.v2 .mega {
position: absolute; left: 0; right: 0; top: var(--v2-nav-h);
background: #fff; color: var(--v2-fg);
border-bottom: 1px solid var(--v2-line);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity 0.25s var(--v2-ease), transform 0.25s var(--v2-ease), visibility 0.25s;
}
.v2 .nav-links > li.open .mega { opacity: 1; visibility: visible; transform: none; }
.v2 .mega-inner {
max-width: var(--v2-max); margin: 0 auto; padding: 44px var(--v2-gutter) 48px;
display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 40px;
}
.v2 .mega-col { display: grid; gap: 26px; align-content: start; }
.v2 .mega-item strong { display: block; font-weight: 400; font-size: 1.05rem; letter-spacing: -0.015em; }
.v2 .mega-item span { display: block; font-size: 0.9rem; color: var(--v2-muted); margin-top: 4px; }
.v2 .mega-item:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.v2 .mega-feature { border-radius: 16px; overflow: hidden; display: block; }
.v2 .mega-feature .art { height: 200px; border-radius: 16px; }
.v2 .mega-feature p { margin-top: 14px; font-size: 1rem; letter-spacing: -0.01em; }
.v2 .mega-feature small { display: block; margin-top: 6px; text-decoration: underline; text-underline-offset: 3px; font-size: 0.88rem; }
/* mobile drawer */
.v2 .drawer {
position: fixed; inset: 0; z-index: 70; background: var(--v2-bg); color: var(--v2-fg);
padding: 24px var(--v2-gutter); overflow: auto;
transform: translateX(100%); transition: transform 0.4s var(--v2-ease);
}
.v2 .drawer.open { transform: none; }
.v2 .drawer-head { display: flex; justify-content: space-between; align-items: center; }
.v2 .drawer-close { border: 0; background: none; font-size: 1.6rem; cursor: pointer; }
.v2 .drawer nav { display: grid; gap: 6px; margin-top: 36px; }
.v2 .drawer nav a { font-size: 1.6rem; letter-spacing: -0.03em; padding: 10px 0; border-bottom: 1px solid var(--v2-line); }
.v2 .drawer nav small { display: block; margin-top: 30px; font-size: 0.8rem; color: var(--v2-muted); letter-spacing: 0.04em; text-transform: uppercase; }
/* ---------- textured surfaces ("photo" stand-ins) ---------- */
.v2 .art {
position: relative; overflow: hidden; isolation: isolate;
background: var(--art, linear-gradient(135deg, #2a2f3a, #0b0c10));
}
.v2 .art::before {
content: ""; position: absolute; inset: -20%;
background: var(--art-glow, radial-gradient(60% 60% at 30% 20%, rgba(255,255,255,0.35), transparent 60%));
filter: blur(40px); opacity: 0.9; z-index: -1;
transform: translate3d(0,0,0);
}
.v2 .art::after {
content: ""; position: absolute; inset: 0; z-index: 0;
background-image: var(--v2-grain); background-size: 240px 240px;
mix-blend-mode: soft-light; opacity: 0.7; pointer-events: none;
}
.v2 .art > * { position: relative; z-index: 1; }
/* palette */
.v2 .art-ink { --art: linear-gradient(160deg, #1b2438 0%, #0a0d14 55%, #04050a 100%); --art-glow: radial-gradient(50% 50% at 70% 30%, rgba(29,84,226,0.55), transparent 65%); }
.v2 .art-blue { --art: linear-gradient(150deg, #3f6ae6 0%, #1d54e2 45%, #0b2a7a 100%); --art-glow: radial-gradient(60% 60% at 25% 20%, rgba(255,255,255,0.45), transparent 60%); }
.v2 .art-sea { --art: linear-gradient(160deg, #1f4a45 0%, #0f2c2a 50%, #06120f 100%); --art-glow: radial-gradient(60% 60% at 75% 25%, rgba(120,220,190,0.5), transparent 60%); }
.v2 .art-amber { --art: linear-gradient(160deg, #c27a3a 0%, #7a4620 55%, #2a170a 100%); --art-glow: radial-gradient(60% 60% at 30% 30%, rgba(255,214,150,0.55), transparent 60%); }
.v2 .art-slate { --art: linear-gradient(160deg, #6a6f78 0%, #3a3e46 45%, #15171b 100%); --art-glow: radial-gradient(70% 60% at 30% 10%, rgba(255,255,255,0.5), transparent 60%); }
.v2 .art-plum { --art: linear-gradient(160deg, #5a3a6e 0%, #2d1b3a 55%, #0e0812 100%); --art-glow: radial-gradient(60% 60% at 70% 20%, rgba(220,170,255,0.45), transparent 60%); }
.v2 .art-moss { --art: linear-gradient(160deg, #6c7a3f 0%, #3a4520 55%, #141a08 100%); --art-glow: radial-gradient(60% 60% at 20% 30%, rgba(230,240,160,0.5), transparent 60%); }
.v2 .art-paper { --art: linear-gradient(160deg, #ffffff 0%, #ececea 100%); --art-glow: radial-gradient(60% 60% at 20% 20%, rgba(29,84,226,0.10), transparent 60%); color: var(--v2-fg); }
.v2 .art-glass { --art: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)); --art-glow: radial-gradient(60% 60% at 70% 20%, rgba(255,255,255,0.18), transparent 60%); border: 1px solid var(--v2-dark-line); }
/* ---------- hero ---------- */
.v2 .hero {
width: calc(100% - 2 * var(--v2-gutter));
max-width: calc(var(--v2-max) - 2 * var(--v2-gutter));
margin: 16px auto 0;
min-height: clamp(580px, calc(100svh - 132px), 920px);
display: flex; align-items: center;
color: #fff;
border-radius: var(--v2-radius);
isolation: isolate;
}
.v2 .hero .wrap {
width: 100%; padding-top: clamp(64px, 7vw, 104px); padding-bottom: clamp(64px, 7vw, 104px);
display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; justify-items: center; text-align: center;
}
.v2 .hero h1 { max-width: 18ch; margin: 0; text-wrap: balance; }
.v2 .hero-side { display: grid; gap: 28px; justify-items: center; max-width: 680px; }
.v2 .hero-side .lead { color: rgba(255,255,255,0.9); }
.v2 .hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.v2 .hero .hero-ctas { justify-content: center; }
/* ---------- logo grid ---------- */
.v2 .logos-title { font-size: clamp(1.3rem, 2vw, 1.75rem); letter-spacing: -0.02em; margin-bottom: 40px; }
.v2 .logo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.v2 .logo-cell {
height: 84px; background: var(--v2-bg-2); border-radius: 6px;
display: flex; align-items: center; justify-content: center; padding: 20px 26px;
}
.v2 .logo-cell img { max-height: 36px; max-width: 78%; width: auto; object-fit: contain; filter: grayscale(1) contrast(0.9); opacity: 0.55; mix-blend-mode: multiply; transition: opacity 0.3s, filter 0.3s; }
.v2 .logo-cell:hover img { opacity: 0.9; filter: grayscale(0); }
.v2 .logo-cell.empty { background: var(--v2-bg-2); }
/* ---------- case carousel ---------- */
.v2 .row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.v2 .row-head h2 { max-width: 20ch; }
.v2 .row-ctrl { display: flex; gap: 8px; }
.v2 .row-ctrl button {
width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--v2-line); background: #fff;
color: var(--v2-fg); cursor: pointer; display: grid; place-items: center; transition: background 0.25s, opacity 0.25s;
}
.v2 .row-ctrl button:hover { background: var(--v2-bg-2); }
.v2 .row-ctrl button:disabled { opacity: 0.35; cursor: default; }
.v2 .track {
display: grid; grid-auto-flow: column; grid-auto-columns: min(560px, 82vw); gap: 16px;
overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
padding: 0 var(--v2-gutter) 8px; margin: 0 calc(-1 * var(--v2-gutter));
scrollbar-width: none;
}
.v2 .track::-webkit-scrollbar { display: none; }
.v2 .case {
scroll-snap-align: start; aspect-ratio: 1 / 1.02; min-height: 420px;
border-radius: var(--v2-radius); color: #fff; padding: 32px;
display: flex; flex-direction: column; justify-content: space-between;
transition: transform 0.5s var(--v2-ease);
}
.v2 .case:hover { transform: translateY(-4px); }
.v2 .case-top { display: flex; justify-content: space-between; gap: 20px; }
.v2 .case h3 { max-width: 17ch; font-size: clamp(1.4rem, 2.1vw, 2rem); }
.v2 .case-arrow { width: 28px; height: 28px; flex: none; transition: transform 0.35s var(--v2-ease); }
.v2 .case:hover .case-arrow { transform: translate(3px, -3px); }
.v2 .case-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; font-size: 0.9rem; color: rgba(255,255,255,0.8); }
.v2 .case-foot b { font-weight: 500; color: #fff; }
/* ---------- statement ---------- */
.v2 .statement { max-width: 1000px; margin: 0 auto; text-align: center; }
.v2 .statement h2 { font-size: clamp(2rem, 4.6vw, 4.5rem); }
/* word-by-word reveal */
.v2 .reveal-words .w {
display: inline-block; opacity: 0.16; filter: blur(6px);
transition: opacity 0.7s var(--v2-ease), filter 0.7s var(--v2-ease);
transition-delay: var(--d, 0s);
}
.v2 .reveal-words.in .w { opacity: 1; filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
.v2 .reveal-words .w { opacity: 1; filter: none; transition: none; }
}
/* ---------- platform block ---------- */
.v2 .platform {
min-height: max(620px, 86vh); display: grid; place-items: center; text-align: center; color: #fff;
--art: linear-gradient(160deg, #6a6f78 0%, #34373e 40%, #0a0b0d 100%);
--art-glow: radial-gradient(70% 55% at 65% 15%, rgba(255,255,255,0.55), transparent 60%);
}
.v2 .platform .inner { position: relative; z-index: 1; display: grid; gap: 22px; justify-items: center; padding: 100px var(--v2-gutter); }
.v2 .platform .brand { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(1.1rem, 1.6vw, 1.5rem); letter-spacing: -0.02em; }
.v2 .platform .brand svg { height: 22px; }
.v2 .platform .brand em { font-style: normal; opacity: 0.7; }
.v2 .platform h2 { max-width: 16ch; }
.v2 .dots {
position: absolute; left: clamp(20px, 5vw, 100px); top: 50%; transform: translateY(-50%);
display: grid; grid-template-columns: repeat(3, 20px); grid-auto-rows: 36px; column-gap: 70px; z-index: 1;
}
.v2 .dots i { width: 6px; height: 6px; background: rgba(255,255,255,0.55); align-self: center; justify-self: center; }
.v2 .dots i.acc { background: #f2733a; }
.v2 .chip {
position: absolute; left: clamp(20px, 5vw, 100px); top: 50%; transform: translateY(calc(-50% - 168px));
display: inline-flex; align-items: center; gap: 0; z-index: 2; font-family: var(--v2-mono); font-size: 0.85rem;
}
.v2 .chip .sq { width: 26px; height: 26px; background: #000; display: grid; place-items: center; }
.v2 .chip .sq::after { content: ""; width: 8px; height: 8px; background: #fff; }
.v2 .chip .lbl { background: #f4f4f2; color: #111; height: 26px; padding: 0 12px; display: inline-flex; align-items: center; min-width: 118px; }
.v2 .caps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-top: 10px; font-family: var(--v2-mono); font-size: 0.8rem; color: rgba(255,255,255,0.7); }
.v2 .caps span::before { content: "■ "; color: #f2733a; font-size: 0.6rem; vertical-align: middle; }
/* ---------- two-up cards ---------- */
.v2 .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v2 .offer {
min-height: 520px; border-radius: var(--v2-radius); color: #fff;
display: grid; align-content: center; justify-items: center; text-align: center; gap: 14px; padding: 60px 40px;
}
.v2 .offer .eyebrow { color: rgba(255,255,255,0.92); font-size: 1.05rem; font-weight: 500; margin-bottom: 4px; }
.v2 .offer .eyebrow::before { width: 10px; height: 10px; }
.v2 .offer.photo > .photo-fx { background: linear-gradient(180deg, rgba(5,5,5,0.62) 0%, rgba(5,5,5,0.58) 40%, rgba(5,5,5,0.88) 100%); }
.v2 .offer.photo > img.ph { filter: saturate(0.7) contrast(0.95); }
.v2 .offer .eyebrow::before { background: #fff; }
.v2 .offer h3 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); max-width: 14ch; }
.v2 .offer p { max-width: 36ch; color: rgba(255,255,255,0.8); }
.v2 .offer .btn { margin-top: 12px; }
.v2 .offer .list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.v2 .offer .list span { font-size: 0.8rem; padding: 6px 12px; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; color: rgba(255,255,255,0.85); }
/* ---------- industries ---------- */
.v2 .tabs {
display: inline-flex; gap: 2px; padding: 4px; background: var(--v2-bg-2); border-radius: 999px;
margin: 34px auto 40px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.v2 .tabs::-webkit-scrollbar { display: none; }
.v2 .tabs button {
font: inherit; font-size: 0.9rem; color: var(--v2-muted); background: transparent; border: 0;
padding: 10px 18px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background 0.25s, color 0.25s;
}
.v2 .tabs button[aria-selected="true"] { background: #fff; color: var(--v2-fg); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.v2 .industry {
border-radius: var(--v2-radius); min-height: clamp(420px, 60vh, 620px); color: #fff;
display: grid; align-content: center; justify-items: center; text-align: center; gap: 12px; padding: 60px 30px;
}
.v2 .industry h3 { font-size: clamp(2.4rem, 5.4vw, 5rem); letter-spacing: -0.04em; }
.v2 .industry p { color: rgba(255,255,255,0.85); max-width: 40ch; font-size: 1.05rem; }
.v2 .industry .btn { margin-top: 24px; }
.v2 .industry-panel { display: none; }
.v2 .industry-panel.active { display: block; animation: v2fade 0.5s var(--v2-ease); }
@keyframes v2fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* ---------- company cards ---------- */
.v2 .company { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
.v2 .co-card {
min-height: 320px; border-radius: var(--v2-radius); padding: 32px;
display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; color: #fff;
transition: transform 0.5s var(--v2-ease);
}
.v2 .co-card:hover { transform: translateY(-4px); }
.v2 .co-card h3 { font-size: clamp(2rem, 3vw, 2.9rem); }
.v2 .co-card .circ { width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,0.85); color: #fff; display: grid; place-items: center; flex: none; }
.v2 .co-card.art-paper { color: var(--v2-fg); }
.v2 .co-card.art-paper .circ { background: #111; color: #fff; }
.v2 .co-card.art-glass .circ { background: rgba(255,255,255,0.14); }
/* ---------- news strip ---------- */
.v2 .news { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; border-top: 1px solid var(--v2-dark-line); border-bottom: 1px solid var(--v2-dark-line); }
.v2 .news h3 { font-size: clamp(1.2rem, 1.8vw, 1.6rem); }
/* ---------- footer ---------- */
.v2 footer { background: var(--v2-dark); color: var(--v2-dark-fg); overflow: hidden; position: relative; }
.v2 .foot { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 32px; padding: 90px 0 60px; }
.v2 .foot-brand { display: grid; gap: 18px; align-content: start; justify-items: start; }
.v2 .foot-brand svg { height: 26px; color: #fff; }
.v2 .foot-brand p { font-size: 0.82rem; color: var(--v2-dark-muted); max-width: 26ch; }
.v2 .foot-brand small { font-size: 0.75rem; color: var(--v2-dark-muted); margin-top: 20px; }
.v2 .foot h4 { font-size: 0.78rem; font-weight: 400; color: var(--v2-dark-muted); margin-bottom: 14px; }
.v2 .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.v2 .foot li a { font-size: 0.95rem; opacity: 0.9; }
.v2 .foot li a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.v2 .watermark {
font-size: clamp(120px, 22vw, 380px); line-height: 0.7; letter-spacing: -0.06em; font-weight: 500;
color: rgba(255,255,255,0.035); user-select: none; pointer-events: none;
padding: 0 var(--v2-gutter); margin-bottom: -0.12em; white-space: nowrap;
}
/* ---------- responsive ---------- */
@media (max-width: 1100px) {
.v2 .nav-inner { gap: 24px; }
.v2 .nav-links { gap: 24px; }
.v2 .logo-grid { grid-template-columns: repeat(3, 1fr); }
.v2 .foot { grid-template-columns: repeat(3, 1fr); }
.v2 .foot-brand { grid-column: 1 / -1; }
.v2 .mega-inner { grid-template-columns: 1fr 1fr; }
.v2 .mega-feature { display: none; }
}
@media (max-width: 860px) {
.v2 .nav-links { display: none; }
.v2 .nav-burger { display: block; }
.v2 .nav-inner { justify-content: space-between; }
.v2 .hero .wrap { grid-template-columns: 1fr; gap: 28px; }
.v2 .hero-ticker { display: none; }
.v2 .two-up, .v2 .company { grid-template-columns: 1fr; }
.v2 .offer { min-height: 420px; }
.v2 .dots, .v2 .chip { display: none; }
.v2 .row-head { flex-direction: column; align-items: flex-start; }
.v2 .news { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
.v2 .logo-grid { grid-template-columns: repeat(2, 1fr); }
.v2 .foot { grid-template-columns: 1fr 1fr; }
.v2 .case { padding: 22px; min-height: 360px; }
}
/* =====================================================================
v2 additions: hero video, Chicago skyline stage, prose, page utilities
===================================================================== */
/* ---------- hero video ---------- */
.v2 .hero { position: relative; overflow: hidden; background: #0a0d14; }
.v2 .hero-video {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
filter: saturate(0.22) sepia(0.14) contrast(0.92) brightness(0.74);
transform: scale(1.01);
}
.v2 .hero-haze {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(180deg, rgba(12,10,8,0.24) 0%, rgba(12,10,8,0.20) 40%, rgba(12,10,8,0.62) 100%),
radial-gradient(ellipse at 50% 46%, rgba(8,7,6,0.28) 0%, rgba(8,7,6,0.08) 60%, rgba(8,7,6,0.32) 100%);
}
.v2 .hero-haze::before {
content: ""; position: absolute; inset: 0;
background: rgba(197, 162, 116, 0.10); mix-blend-mode: screen;
}
.v2 .hero-haze::after {
content: ""; position: absolute; inset: 0;
background-image: var(--v2-grain); background-size: 220px 220px;
mix-blend-mode: overlay; opacity: 0.5;
animation: v2grain 0.9s steps(3) infinite;
}
@keyframes v2grain { 0% { background-position: 0 0; } 33% { background-position: 60px -40px; } 66% { background-position: -50px 30px; } 100% { background-position: 0 0; } }
.v2 .hero .wrap { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
.v2 .hero-video { display: none; }
.v2 .hero { background: #0a0d14 url("../video/hero-poster.jpg") center / cover no-repeat; }
.v2 .hero-haze::after { animation: none; }
}
/* ---------- Chicago skyline stage ---------- */
.v2 .skyline {
position: relative; overflow: hidden;
min-height: 100vh; display: flex; flex-direction: column;
background: linear-gradient(180deg, #050505 0%, #070b1a 35%, #0b1230 70%, #12204f 100%);
padding-top: clamp(48px, 6vw, 72px);
}
.v2 .skyline::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 80%);
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 80%);
}
.v2 .skyline-head { position: relative; z-index: 2; display: grid; gap: 16px; justify-items: center; }
.v2 .skyline-head h2 { max-width: 18ch; font-size: clamp(2rem, 3.6vw, 3.4rem); }
.v2 .skyline-head .lead { max-width: 46ch; font-size: clamp(1rem, 1.2vw, 1.15rem); }
.v2 .skyline-stage {
position: relative; z-index: 1; margin-top: auto; padding-top: 110px;
width: min(1200px, 100%); margin-left: auto; margin-right: auto;
}
.v2 .skyline-stage .skyline-img { position: relative; inset: auto; }
.v2 .skyline-img {
display: block; width: 100%; height: auto; opacity: 0.92;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
}
/* widgets rise out of a rooftop along a leader line */
.v2 .skyline-art { position: relative; }
.v2 .widget { position: absolute; width: 0; height: 0; z-index: 3; pointer-events: none; }
.v2 .widget .lead-line {
position: absolute; left: 0; bottom: 0; width: 1px; height: var(--lift, 70px);
background: linear-gradient(to top, rgba(255,255,255,0.0), rgba(255,255,255,0.7));
transform: scaleY(0); transform-origin: bottom; transition: transform 0.35s var(--v2-ease);
}
.v2 .widget .lead-dot {
position: absolute; left: -3px; bottom: -3px; width: 7px; height: 7px; border-radius: 50%; background: #fff;
box-shadow: 0 0 0 4px rgba(255,255,255,0.15); opacity: 0; transition: opacity 0.3s;
}
.v2 .widget .card {
position: absolute; left: 0; bottom: var(--lift, 70px);
min-width: 190px; max-width: 250px; padding: 10px 12px 11px; border-radius: 10px;
background: rgba(255,255,255,0.96); color: #0b0b0b; font-size: 0.74rem; line-height: 1.35;
box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.6) inset;
opacity: 0; transform: translateY(14px) scale(0.94); transform-origin: bottom left;
transition: opacity 0.35s var(--v2-ease), transform 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15);
}
.v2 .widget[data-side="left"] .card { left: auto; right: 0; transform-origin: bottom right; }
.v2 .widget .card .k { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--v2-mono); font-size: 0.66rem; color: #6f6f6c; margin-bottom: 4px; }
.v2 .widget .card .k i { width: 6px; height: 6px; border-radius: 50%; background: var(--v2-accent); display: inline-block; }
.v2 .widget .card .k i.ok { background: #1f9d55; }
.v2 .widget .card .k i.warn { background: #f2733a; }
.v2 .widget .card b { font-weight: 500; display: block; font-size: 0.8rem; letter-spacing: -0.01em; }
.v2 .widget .card .row { display: flex; gap: 6px; margin-top: 8px; }
.v2 .widget .card .row span { border: 1px solid rgba(0,0,0,0.12); border-radius: 999px; padding: 3px 9px; font-size: 0.66rem; }
.v2 .widget .card .row span.pri { background: #0b0b0b; color: #fff; border-color: #0b0b0b; }
.v2 .widget .card .bar { height: 3px; background: rgba(0,0,0,0.08); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.v2 .widget .card .bar i { display: block; height: 100%; width: var(--p, 60%); background: var(--v2-accent); }
.v2 .widget.show .lead-line { transform: scaleY(1); }
.v2 .widget.show .lead-dot { opacity: 1; transition-delay: 0.1s; }
.v2 .widget.show .card { opacity: 1; transform: none; transition-delay: 0.28s; }
.v2 .widget.hide .card { opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.3s, transform 0.3s; }
.v2 .widget.hide .lead-line { transform: scaleY(0); transition-delay: 0.18s; }
.v2 .widget.hide .lead-dot { opacity: 0; }
@media (max-width: 860px) {
.v2 .skyline-stage { width: 160%; margin-left: -30%; padding-top: 150px; }
.v2 .widget .card { min-width: 150px; max-width: 180px; font-size: 0.66rem; padding: 8px 10px; }
.v2 .widget .card b { font-size: 0.72rem; }
}
/* ---------- long-form prose ---------- */
.v2 .prose { max-width: 720px; margin: 0 auto; font-size: 1.05rem; line-height: 1.7; }
.v2 .prose h2, .v2 .prose h3 { margin: 2.2em 0 0.7em; padding-top: 0.6em; border-top: 1px solid var(--v2-line); }
.v2 .prose h2 { font-size: 1.75rem; } .v2 .prose h3 { font-size: 1.3rem; }
.v2 .prose h2:first-child, .v2 .prose h3:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.v2 .prose p, .v2 .prose ul, .v2 .prose ol { margin: 0 0 1.2em; }
.v2 .prose li { margin: 0.35em 0; }
.v2 .prose a { text-decoration: underline; text-underline-offset: 3px; }
.v2 .prose img { border-radius: var(--v2-radius-sm); }
.v2 .prose blockquote { margin: 1.5em 0; padding-left: 1.2em; border-left: 2px solid var(--v2-accent); color: var(--v2-muted); }
.v2 .prose code { font-family: var(--v2-mono); font-size: 0.9em; background: var(--v2-bg-2); padding: 2px 6px; border-radius: 4px; }
.v2 .prose pre { background: var(--v2-dark); color: var(--v2-dark-fg); padding: 18px 20px; border-radius: var(--v2-radius-sm); overflow-x: auto; }
.v2 .is-dark .prose h2, .v2 .is-dark .prose h3 { border-color: var(--v2-dark-line); }
/* ---------- page utilities ---------- */
.v2 .page-hero { display: grid; gap: 18px; max-width: 900px; }
.v2 .page-hero h1 { font-size: clamp(2.4rem, 5vw, 4.6rem); max-width: 16ch; }
.v2 .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v2 .cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.v2 .tile {
border-radius: var(--v2-radius); padding: 28px; background: #fff; border: 1px solid var(--v2-line);
display: grid; gap: 10px; align-content: start;
}
.v2 .is-dark .tile { background: rgba(255,255,255,0.04); border-color: var(--v2-dark-line); }
.v2 .tile h3 { font-size: 1.25rem; }
.v2 .tile p { color: var(--v2-muted); font-size: 0.95rem; }
.v2 .tile .num { font-family: var(--v2-mono); font-size: 0.75rem; color: var(--v2-muted); }
.v2 .kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--v2-dark-line); border-radius: var(--v2-radius); overflow: hidden; }
.v2 .kv > div { background: var(--v2-dark); padding: 22px 24px; display: grid; gap: 6px; }
.v2 .kv b { font-weight: 500; font-size: 0.95rem; }
.v2 .kv span { color: var(--v2-dark-muted); font-size: 0.88rem; }
@media (max-width: 860px) {
.v2 .cards-3, .v2 .cards-2, .v2 .kv { grid-template-columns: 1fr; }
}
/* ---------- small-screen nav ---------- */
@media (max-width: 860px) {
.v2 .nav-right .btn-ghost { display: none; }
.v2 .nav .btn { height: 36px; padding: 0 14px; font-size: 0.82rem; }
.v2 .nav-inner { gap: 16px; }
.v2 .announce { font-size: 0.74rem; padding: 0 12px; text-align: center; height: auto; min-height: 36px; line-height: 1.2; gap: 8px; }
}
@media (max-width: 480px) {
.v2 .hero-ctas .btn, .v2 .offer .btn, .v2 .industry .btn { width: 100%; }
.v2 .hero { border-radius: 18px; }
.v2 .hero .wrap { padding: 56px 24px; }
.v2 .logo-cell { height: 68px; }
}
@media (max-width: 560px) {
.v2 .logo-grid { grid-template-columns: repeat(2, 1fr); }
.v2 .skyline-stage { width: 200%; margin-left: -50%; padding-top: 150px; }
}
@media (max-width: 860px) {
.v2 .skyline { min-height: 0; }
.v2 .widget { --lift: 46px !important; }
.v2 .skyline-head h2 { max-width: 14ch; }
}
/* ---------- breadcrumbs ---------- */
.v2 .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.82rem; color: var(--v2-muted); }
.v2 .crumbs a:hover { color: var(--v2-fg); text-decoration: underline; text-underline-offset: 3px; }
.v2 .crumbs .sep { opacity: 0.5; }
.v2 .crumbs [aria-current] { color: var(--v2-fg); }
.v2 .is-dark .crumbs [aria-current] { color: var(--v2-dark-fg); }
.v2 .is-dark .crumbs a:hover { color: var(--v2-dark-fg); }
/* ---------- photography (35mm treatment) ----------
Usage: 
...content...