@import url("tokens.css");





:root {
 --font-sans: 'Manrope', sans-serif;
 --font-display: 'Cormorant Garamond', Georgia, serif;
 --color-background: var(--background); --color-foreground: var(--foreground);
 --color-card: var(--card); --color-card-foreground: var(--foreground);
 --color-popover: var(--background); --color-popover-foreground: var(--foreground);
 --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground);
 --color-secondary: var(--secondary); --color-secondary-foreground: var(--foreground);
 --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground);
 --color-accent: var(--accent); --color-accent-foreground: var(--foreground);
 --color-border: var(--border); --color-input: var(--border); --color-ring: var(--foreground);
 --color-destructive: var(--foreground); --color-destructive-foreground: var(--background);
 --color-inverse: var(--inverse); --color-inverse-foreground: var(--inverse-foreground);
 --radius-md: 4px; --radius-lg: 6px;
}
:root { --background: oklch(0.995 0 0); --foreground: oklch(0.19 0 0); --primary: oklch(0.19 0 0); --primary-foreground: oklch(0.995 0 0); --secondary: oklch(0.96 0 0); --muted: oklch(0.965 0 0); --muted-foreground: oklch(0.51 0 0); --accent: oklch(0.94 0 0); --border: oklch(0.88 0 0); --card: oklch(0.995 0 0); --inverse: oklch(0.17 0 0); --inverse-foreground: oklch(0.98 0 0); --inverse-background: var(--inverse); --inverse-muted: oklch(0.72 0 0); --inverse-border: oklch(0.33 0 0); --hero-overlay: linear-gradient(90deg, oklch(0.1 0 0 / .75), oklch(0.1 0 0 / .08)); --hero-shade: linear-gradient(90deg, oklch(0.1 0 0 / .8), oklch(0.1 0 0 / .1) 90%); --overlay: oklch(0.1 0 0 / .55); --shadow-dialog: 0 24px 80px oklch(0 0 0 / .2); }
 * { border-color: var(--border); } body { margin:0; background:var(--background); color:var(--foreground); font-family:var(--font-sans); font-size:14px; -webkit-font-smoothing:antialiased; } h1,h2,h3,p { margin:0; } a { text-decoration:none; color:inherit; } button,input { font:inherit; } ::selection { background:var(--foreground); color:var(--background); }
.frame { width:min(1320px, calc(100% - 112px)); margin-inline:auto; }
.masthead { height:91px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand-image { width:170px; height:51px; object-fit:contain; }
.main-nav { display:flex; align-items:center; gap:31px; height:100%; }
.main-nav a { font-size:12px; height:100%; display:flex; align-items:center; position:relative; color:var(--muted-foreground); }
.main-nav a.active { color:var(--foreground); }
.main-nav a.active:after { content:''; height:2px; background:var(--foreground); position:absolute; bottom:21px; left:0; right:0; }
.header-actions { display:flex; gap:17px; align-items:center; }
.eyebrow { font-size:10px; letter-spacing:2px; line-height:1.7; text-transform:uppercase; font-weight:600; }
.private-label { font-size:10px; letter-spacing:1.5px; display:flex; gap:7px; align-items:center; white-space:nowrap; }
.mobile-menu { display:none; }
.hero { position:relative; height:560px; color:var(--inverse-foreground); overflow:hidden; }
.hero-image { width:100%; height:100%; object-fit:cover; object-position:center 55%; position:absolute; inset:0; }
.hero:after { content:''; position:absolute; inset:0; background:var(--hero-shade); }
.hero-inner { position:relative; z-index:1; padding-top:88px; }
.hero h1 { font-family:var(--font-display); font-size:78px; font-weight:400; line-height:1.04; margin:22px 0; max-width:580px; }
.hero-copy { max-width:365px; line-height:1.9; font-size:13px; opacity:.8; }
.hero-links { display:flex; align-items:center; gap:27px; margin-top:31px; }
.hero-bottom { position:absolute; bottom:29px; z-index:1; left:0; right:0; display:flex; justify-content:space-between; align-items:center; font-size:10px; letter-spacing:1.6px; text-transform:uppercase; }
.hero-bottom span { display:flex; align-items:center; gap:9px; }
.overview-strip { display:grid; grid-template-columns:1.5fr repeat(3,1fr); border-bottom:1px solid var(--border); padding-block:31px; gap:30px; }
.overview-strip>div:not(:first-child) { border-left:1px solid var(--border); padding-left:38px; }
.stat-number { font-family:var(--font-display); font-size:35px; line-height:1; }
.stat-label { display:block; color:var(--muted-foreground); margin-top:9px; font-size:11px; }
.overview-strip .intro { font-family:var(--font-display); font-size:24px; max-width:240px; line-height:1.25; }
.section { padding-block:62px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:30px; }
.section-heading h2 { font-family:var(--font-display); font-weight:400; font-size:43px; margin-top:8px; line-height:1.1; }
.section-description { color:var(--muted-foreground); max-width:350px; font-size:12px; line-height:1.8; }
.portal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:23px; }
.portal-tile { border:1px solid var(--border); padding:28px; position:relative; min-height:231px; transition:background .2s, transform .2s; }
.portal-tile:hover { background:var(--muted); transform:translateY(-3px); }
.tile-top { display:flex; align-items:center; justify-content:space-between; color:var(--muted-foreground); }
.portal-tile h3 { font-family:var(--font-display); font-size:29px; font-weight:500; margin:31px 0 12px; }
.portal-tile p { font-size:12px; line-height:1.8; max-width:275px; color:var(--muted-foreground); }
.tile-footer { display:flex; align-items:center; justify-content:space-between; margin-top:24px; font-size:10px; letter-spacing:1.2px; text-transform:uppercase; }
.dash-stats { display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--border); }
.dash-stat { padding:31px 30px 33px; border-left:1px solid var(--border); }
.dash-stat:first-child { border-left:0; padding-left:0; }
.dash-stat strong { display:block; font-family:var(--font-display); font-size:38px; font-weight:400; line-height:1; margin-top:12px; }
.dash-stat p { font-size:11px; line-height:1.7; color:var(--muted-foreground); margin-top:10px; }
.dash-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:23px; }
.dash-card { border:1px solid var(--border); padding:28px; transition:background .2s, transform .2s; }
.dash-card:hover { background:var(--muted); transform:translateY(-3px); }
.dash-card h3 { font-family:var(--font-display); font-size:33px; font-weight:500; margin:26px 0 10px; }
.dash-sectors { font-size:12px; line-height:1.8; color:var(--muted-foreground); }
.dash-card dl { margin-top:24px; border-top:1px solid var(--border); }
.dash-card dl>div { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--border); font-size:11px; }
.dash-card dt { color:var(--muted-foreground); text-transform:uppercase; letter-spacing:1.2px; font-size:9px; padding-top:2px; }
.dash-card dd { text-align:right; }
.model-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:23px; }
.model-point { border-top:1px solid var(--foreground); padding-top:18px; }
.model-point p { font-size:13px; line-height:1.85; margin-top:12px; }
.dash-caveat { margin-top:38px; background:var(--muted); padding:26px 30px; font-size:12px; line-height:1.9; color:var(--muted-foreground); }
.dash-timeline-note { font-size:11px; color:var(--muted-foreground); }
.motto-band { background:var(--muted); padding:56px 0; text-align:center; }
.motto-band h2 { font-family:var(--font-display); font-size:47px; font-weight:400; margin:12px 0 13px; }
.motto-band p { font-size:12px; color:var(--muted-foreground); }
.reading-layout { display:grid; grid-template-columns:1fr 1.9fr; gap:70px; }
.document-row { display:flex; align-items:center; gap:20px; padding:20px 0; border-bottom:1px solid var(--border); }
.document-row:first-child { border-top:1px solid var(--border); }
.document-row:hover .document-name { text-decoration:underline; text-underline-offset:5px; }
.document-number { color:var(--muted-foreground); font-size:10px; width:23px; }
.document-name { font-size:13px; }
.document-type { color:var(--muted-foreground); font-size:10px; margin-top:5px; }
.document-row>svg:last-child { margin-left:auto; }
.footer { border-top:1px solid var(--border); padding:33px 0 24px; }
.footer-top { display:flex; align-items:center; justify-content:space-between; }
.footer-bottom { display:flex; justify-content:space-between; margin-top:29px; font-size:10px; color:var(--muted-foreground); }
.footer-note { font-family:var(--font-display); font-size:21px; }
.page-heading { padding:57px 0 43px; border-bottom:1px solid var(--border); }
.breadcrumb { font-size:11px; color:var(--muted-foreground); display:flex; align-items:center; gap:8px; margin-bottom:30px; }
.page-heading h1 { font-family:var(--font-display); font-size:66px; font-weight:400; line-height:1.1; margin:10px 0 18px; }
.page-intro { color:var(--muted-foreground); line-height:1.8; max-width:650px; }
.library-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:28px; border-bottom:1px solid var(--border); }
.search-field { display:flex; align-items:center; gap:12px; border:1px solid var(--border); padding:13px 16px; width:360px; background:var(--background); }
.search-field input { background:transparent; border:0; outline:none; width:100%; }
.filter-group { display:flex; gap:4px; flex-wrap:wrap; }
.library-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding-block:32px 60px; }
.library-item { border:1px solid var(--border); padding:24px; min-height:160px; display:flex; flex-direction:column; }
.library-item:hover { background:var(--muted); }
.library-item h2 { font-family:var(--font-display); font-size:24px; line-height:1.2; font-weight:500; margin:16px 0 18px; }
.library-item .tile-footer { margin-top:auto; color:var(--muted-foreground); }
.reader-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:65px; padding-block:45px 70px; }
.reader-aside { position:sticky; top:25px; align-self:start; }
.reader-aside a { display:block; font-size:12px; padding:12px 0; color:var(--muted-foreground); border-bottom:1px solid var(--border); }
.reader { min-width:0; font-size:14px; line-height:1.9; overflow-wrap:anywhere; }
.reader h1 { font-family:var(--font-display); font-size:39px; line-height:1.2; font-weight:500; margin:30px 0 20px; }
.reader main>h1:first-child { display:none; }
.reader h2 { font-family:var(--font-display); font-size:32px; font-weight:500; line-height:1.3; margin:32px 0 15px; }
.reader h3 { font-size:17px; margin:25px 0 10px; }
.reader p { margin:13px 0; }
.reader ul,.reader ol { padding-left:23px; margin:15px 0; }
.reader a { text-decoration:underline; text-underline-offset:3px; }
.reader table { width:100%; border-collapse:collapse; font-size:11px; margin:22px 0; }
.reader td,.reader th { text-align:left; padding:12px 10px; vertical-align:top; border:1px solid var(--border); }
.reader th { background:var(--muted); }
.reader pre { white-space:pre-wrap; font-size:12px; }
.reader section { margin:30px 0; }
.search-overlay { position:fixed; inset:0; background:var(--overlay); z-index:30; display:flex; align-items:flex-start; justify-content:center; padding:100px 20px 30px; }
.search-dialog { background:var(--background); width:min(650px,100%); box-shadow:var(--shadow-dialog); padding:25px; max-height:75vh; display:flex; flex-direction:column; }
.dialog-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.dialog-title h2 { font-family:var(--font-display); font-size:32px; }
.search-dialog .search-field { width:100%; }
.search-results { overflow:auto; margin-top:15px; }
.empty-state { padding:50px 0; color:var(--muted-foreground); }
@media (min-width:1600px) { .hero { height:610px; } }
@media (max-width:1100px) { .frame { width:calc(100% - 64px); } .main-nav { gap:19px; } .private-label { display:none; } .reading-layout { gap:40px; } }
@media (max-width:760px) { .frame { width:calc(100% - 40px); } .masthead { height:76px; } .brand-image { width:145px; height:44px; } .main-nav { display:none; } .main-nav.open { display:flex; position:absolute; top:76px; left:0; right:0; height:auto; background:var(--background); z-index:20; padding:15px 25px; flex-direction:column; align-items:start; gap:0; border-bottom:1px solid var(--border); } .main-nav a { padding:13px 0; } .main-nav a.active:after { bottom:6px; } .mobile-menu { display:inline-flex; } .header-actions { gap:5px; } .hero { height:530px; } .hero-inner { padding-top:64px; } .hero h1 { font-size:59px; max-width:330px; } .hero-image { object-position:60% center; } .hero-copy { max-width:290px; font-size:12px; } .hero-bottom { font-size:8px; letter-spacing:1px; } .hero-bottom>span:last-child { display:none; } .hero-links { gap:14px; } .overview-strip { grid-template-columns:repeat(3,1fr); gap:10px; padding-block:24px; } .overview-strip>div:first-child { grid-column:1/-1; padding-bottom:15px; } .overview-strip .intro { max-width:none; font-size:23px; } .overview-strip>div:not(:first-child) { padding-left:13px; } .overview-strip>div:nth-child(2) { border-left:0; padding-left:0; } .stat-number { font-size:30px; } .stat-label { font-size:9px; line-height:1.5; } .section { padding-block:40px; } .section-heading { flex-direction:column; align-items:start; gap:12px; } .section-heading h2 { font-size:36px; } .portal-grid,.library-grid { grid-template-columns:1fr; gap:14px; } .portal-tile { min-height:210px; padding:25px; } .portal-tile h3 { margin-top:25px; } .motto-band h2 { font-size:36px; } .reading-layout { grid-template-columns:1fr; gap:25px; } .footer-top { align-items:start; flex-direction:column; gap:15px; } .footer-bottom { flex-direction:column; gap:10px; } .page-heading { padding-top:35px; } .page-heading h1 { font-size:47px; } .library-toolbar { align-items:start; flex-direction:column; } .search-field { width:100%; } .reader-layout { grid-template-columns:1fr; gap:20px; } .reader-aside { position:static; display:flex; flex-wrap:wrap; gap:10px; } .reader-aside .eyebrow { width:100%; } .reader-aside a { padding:6px 0; margin-right:12px; } .reader table { display:block; overflow-x:auto; } .dash-stats { grid-template-columns:1fr 1fr; } .dash-stat { padding:20px 16px 22px; } .dash-stat:nth-child(odd) { border-left:0; padding-left:0; } .dash-stat strong { font-size:30px; } .dash-cards,.model-grid { grid-template-columns:1fr; gap:14px; } .search-overlay { padding-top:40px; } }
@media (prefers-reduced-motion:no-preference) { .hero-inner { animation:reveal .7s ease-out; } @keyframes reveal { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } }

*, *::before, *::after { box-sizing: border-box; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--foreground); outline-offset: 2px;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.07; letter-spacing: 0; }
p { line-height: 1.8; }
em { font-weight: 400; }
img, svg { max-width: 100%; height: auto; display: block; }

.enterprise-site .site-wrap { max-width: 1400px; margin-inline: auto; width: calc(100% - 112px); }
.enterprise-site .eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0; line-height: 1.5; text-transform: uppercase; }
.enterprise-site .identity-strip { background: var(--primary); color: var(--primary-foreground); height: 30px; font-size: 8px; }
.enterprise-site .identity-strip .site-wrap { height: 100%; display: flex; justify-content: space-between; align-items: center; }
.enterprise-site .site-header { position: relative; background: var(--background); z-index: 20; border-bottom: 1px solid var(--border); }
.enterprise-site .header-inner { height: 90px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.enterprise-site .logo-link { display:block; width:190px; flex-shrink:0; }
.enterprise-site .logo-link img { width: 240px; max-width: none; height: 72px; margin-left: -28px; object-fit: contain; }
.enterprise-site .desktop-nav { display:flex; gap:32px; align-self:stretch; align-items:center; }
.enterprise-site .desktop-nav a { font-size:11px; color:var(--muted-foreground); position:relative; height:100%; display:flex; align-items:center; transition:color .2s; }
.enterprise-site .desktop-nav a:hover, .enterprise-site .desktop-nav .nav-active { color:var(--foreground); }
.enterprise-site .desktop-nav .nav-active:after { content:''; position:absolute; bottom:24px; height:1px; background:var(--foreground); width:100%; }
.enterprise-site .header-projects { font-size:10px; }
.enterprise-site .mobile-menu-toggle, .enterprise-site .mobile-nav { display:none; }
.enterprise-site .home-hero { min-height: 580px; height: calc(100svh - 236px); max-height: 740px; position:relative; color:var(--primary-foreground); display:flex; flex-direction:column; justify-content:center; }
.enterprise-site .hero-photo, .enterprise-site .hero-wash { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.enterprise-site .hero-wash { background:var(--hero-overlay); }
.enterprise-site .hero-content { position:relative; padding-block:60px 120px; }
.enterprise-site .hero-content .eyebrow { margin-bottom:24px; }
.enterprise-site .hero-content h1 { font-size:86px; max-width:700px; line-height:1.02; }
.enterprise-site .hero-content p.hero-description { margin-top:24px; max-width:410px; font-size:13px; line-height:1.8; color:color-mix(in oklch,var(--primary-foreground) 80%,transparent); }
.enterprise-site .hero-content .hero-cta { margin-top:28px; font-size:11px; gap:36px; }
.enterprise-site .hero-bottom { position:absolute; bottom:0; left:0; width:100%; }
.enterprise-site .hero-bottom .site-wrap { display:flex; align-items:center; justify-content:space-between; padding-block:20px; border-top:1px solid color-mix(in oklch,var(--primary-foreground) 28%,transparent); font-size:9px; }
.enterprise-site .hero-bottom span { display:flex; align-items:center; gap:10px; }
.enterprise-site .hero-caption { font-size:8px; opacity:.65; }
.enterprise-site .stats-bar { border-bottom:1px solid var(--border); }
.enterprise-site .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); padding-block:33px; }
.enterprise-site .stat { display:flex; align-items:center; gap:20px; padding-left:34px; border-left:1px solid var(--border); }
.enterprise-site .stat:first-child { border-left:0; padding-left:0; }
.enterprise-site .stat strong { font-family:var(--font-display); font-size:48px; font-weight:400; line-height:1; }
.enterprise-site .stat p { font-size:10px; line-height:1.6; }
.enterprise-site .stat p span { color:var(--muted-foreground); font-size:9px; }
.enterprise-site .section { padding-block:88px; }
.enterprise-site .section-muted { background:var(--muted); }
.enterprise-site .section-dark, .enterprise-site .page-intro, .enterprise-site .note-band, .enterprise-site .source-content .band--tint { --background:var(--inverse-background); --foreground:var(--inverse-foreground); --muted:var(--inverse-background); --muted-foreground:var(--inverse-muted); --border:var(--inverse-border); --ring:var(--inverse-foreground); background:var(--background); color:var(--foreground); }
.enterprise-site .section-heading { display:grid; grid-template-columns:1fr 2fr; gap:50px; margin-bottom:46px; }
.enterprise-site .section-heading h2 { font-size:48px; max-width:700px; }
.enterprise-site .about-grid { display:grid; grid-template-columns:1fr 2fr; gap:50px; }
.enterprise-site .about-text { display:grid; grid-template-columns:1fr 1fr; gap:45px; }
.enterprise-site .about-text p { font-size:13px; color:var(--muted-foreground); }
.enterprise-site .about-text p:first-child { color:var(--foreground); }
.enterprise-site .section-number { color:var(--muted-foreground); font-size:10px; margin-bottom:14px; }
.enterprise-site .domain-list { margin-left:calc((100% - 50px)/3 + 50px); }
.enterprise-site .domain-row { border-top:1px solid var(--border); }
.enterprise-site .domain-row:last-child { border-bottom:1px solid var(--border); }
.enterprise-site .domain-row a { display:grid; grid-template-columns:42px 1fr 25px; align-items:center; padding:26px 0; gap:14px; transition:padding .25s; }
.enterprise-site .domain-row a:hover { padding-left:10px; }
.enterprise-site .domain-number { font-size:10px; color:var(--muted-foreground); align-self:start; padding-top:6px; }
.enterprise-site .domain-row h3 { font-size:27px; }
.enterprise-site .domain-row p { font-size:11px; color:var(--muted-foreground); margin-top:8px; }
.enterprise-site .domain-row svg { width:19px; }
.enterprise-site .section-link { margin-top:27px; }
.enterprise-site .projects-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:38px; }
.enterprise-site .projects-heading h2 { font-size:48px; margin-top:12px; }
.enterprise-site .feature-project { display:grid; grid-template-columns:1.12fr 1fr; gap:64px; align-items:center; }
.enterprise-site .project-image { position:relative; margin:0; }
.enterprise-site .project-image img { width:100%; display:block; aspect-ratio:1.4; object-fit:cover; }
.enterprise-site .project-image figcaption { color:var(--muted-foreground); font-size:9px; padding-top:8px; }
.enterprise-site .project-copy h3 { font-size:44px; margin-top:21px; }
.enterprise-site .project-copy p { font-size:13px; color:var(--muted-foreground); margin-top:23px; }
.enterprise-site .status-label { display:inline-flex; align-items:center; gap:8px; font-size:9px; text-transform:uppercase; }
.enterprise-site .status-dot { width:5px; height:5px; background:var(--foreground); border-radius:100%; }
.enterprise-site .project-secondary { display:grid; grid-template-columns:1fr 1fr; gap:56px; margin-top:48px; }
.enterprise-site .project-secondary article { border-top:1px solid var(--border); padding-top:24px; }
.enterprise-site .project-secondary h3 { font-size:29px; margin:17px 0 12px; }
.enterprise-site .project-secondary p { color:var(--muted-foreground); font-size:12px; }
.enterprise-site .business-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:35px; }
.enterprise-site .business-item { border-top:1px solid var(--foreground); padding-top:25px; }
.enterprise-site .business-item .business-meta { display:flex; justify-content:space-between; font-size:9px; color:var(--muted-foreground); }
.enterprise-site .business-item h3 { font-size:37px; margin-block:28px 15px; }
.enterprise-site .business-item p { font-size:12px; color:var(--muted-foreground); }
.enterprise-site .business-item a { display:inline-flex; align-items:center; gap:16px; font-size:11px; border-bottom:1px solid var(--foreground); padding-bottom:8px; margin-top:24px; }
.enterprise-site .record-list { border-top:1px solid var(--border); }
.enterprise-site .record-row { display:grid; grid-template-columns:90px 1fr 1.4fr; padding:25px 0; border-bottom:1px solid var(--border); align-items:center; gap:25px; }
.enterprise-site .record-row .year { font-family:var(--font-display); font-size:29px; }
.enterprise-site .record-row h3 { font-family:var(--font-sans); font-size:12px; font-weight:500; }
.enterprise-site .record-row p { font-size:12px; color:var(--muted-foreground); }
.enterprise-site .site-footer { background:var(--primary); color:var(--primary-foreground); padding-block:70px 30px; }
.enterprise-site .footer-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:65px; border-bottom:1px solid color-mix(in oklch,var(--primary-foreground) 20%,transparent); }
.enterprise-site .footer-top .eyebrow { color:color-mix(in oklch,var(--primary-foreground) 55%,transparent); margin-bottom:20px; }
.enterprise-site .footer-top h2 { font-size:56px; }
.enterprise-site .footer-bottom { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:30px; padding-top:40px; }
.enterprise-site .footer-name { font-size:22px; font-weight:600; margin-bottom:12px; }
.enterprise-site .footer-bottom p:not(.footer-name) { font-size:10px; color:color-mix(in oklch,var(--primary-foreground) 55%,transparent); }
.enterprise-site .footer-bottom nav { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-content:start; font-size:10px; }
.enterprise-site .copyright { text-align:right; }
.enterprise-site .page-intro { padding-block:73px 65px; border-bottom:1px solid var(--border); }
.enterprise-site .page-intro h1 { font-size:78px; margin-top:23px; max-width:900px; }
.enterprise-site .intro-text { font-size:16px; color:var(--muted-foreground); margin-top:25px; max-width:580px; }
.enterprise-site .domain-detail { display:grid; grid-template-columns:65px 1fr 1fr; gap:40px; border-top:1px solid var(--border); padding-block:40px; }
.enterprise-site .domain-detail h2 { font-size:36px; }
.enterprise-site .domain-detail .partner { font-size:13px; margin-top:14px; color:var(--muted-foreground); }
.enterprise-site .domain-detail .description { font-size:14px; color:var(--muted-foreground); }
.enterprise-site .note-band { background:var(--muted); padding-block:45px; }
.enterprise-site .note-band .site-wrap { display:grid; grid-template-columns:1fr 2fr; gap:50px; }
.enterprise-site .note-band h2 { font-size:29px; }
.enterprise-site .note-band p { color:var(--muted-foreground); font-size:13px; max-width:720px; }
.enterprise-site .manufacturing-visual { margin:0; padding-bottom:50px; }
.enterprise-site .manufacturing-visual img { width:100%; height:480px; object-fit:cover; }
.enterprise-site .manufacturing-visual figcaption { padding-top:8px; font-size:10px; color:var(--muted-foreground); }
.enterprise-site .source-content .band { padding-block:55px; border-top:1px solid var(--border); }
.enterprise-site .source-content .band--tint { background:var(--muted); }
.enterprise-site .source-content .wrap { max-width:1400px; margin-inline:auto; width:calc(100% - 112px); }
.enterprise-site .source-content .split { display:grid; grid-template-columns:1fr 2fr; gap:50px; }
.enterprise-site .source-content h2 { font-size:36px; }
.enterprise-site .source-content h3 { font-size:28px; margin-bottom:12px; }
.enterprise-site .source-content .ordinal { font-size:10px; margin-bottom:16px; text-transform:uppercase; }
.enterprise-site .source-content .func { font-size:12px; color:var(--muted-foreground); margin-top:16px; }
.enterprise-site .source-content p { font-size:13px; margin-bottom:18px; }
.enterprise-site .source-content .cols-2 { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.enterprise-site .source-content .card { padding-block:20px; }
.enterprise-site .source-content ul { padding:0; list-style:none; }
.enterprise-site .source-content .row { display:grid; grid-template-columns:25px 1fr; gap:10px; padding-block:20px; border-bottom:1px solid var(--border); }
.enterprise-site .source-content .row .fn { grid-column:2; font-size:13px; color:var(--muted-foreground); }
.enterprise-site .source-content .num { font-size:10px; padding-top:7px; }
.enterprise-site .source-content .name { font-family:var(--font-display); font-size:29px; }
.enterprise-site .source-content a { text-decoration:underline; text-underline-offset:4px; }
.enterprise-site .source-content dl { margin:20px 0; }
.enterprise-site .source-content dt { font-size:12px; font-weight:600; margin-top:24px; }
.enterprise-site .source-content dd { margin:8px 0 0; font-size:13px; line-height:1.8; color:var(--muted-foreground); }
@keyframes reveal {
.enterprise-site from { opacity:0; transform:translateY(15px); }
.enterprise-site to { opacity:1; transform:translateY(0); }
}
.enterprise-site .hero-content { animation:reveal .8s ease-out; }
.enterprise-site .family-hero { padding-block:82px 70px; }
.enterprise-site .family-hero h1 { font-size:86px; max-width:800px; margin-top:28px; }
.enterprise-site .family-hero .intro-text { max-width:550px; }
.enterprise-site .family-path { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:28px; border-top:1px solid var(--border); }
.enterprise-site .family-path h3 { font-size:31px; }
.enterprise-site .family-path p { color:var(--muted-foreground); font-size:13px; max-width:520px; margin-top:12px; }
.enterprise-site .family-paths { margin-top:44px; }
@media(min-width:1600px) {
.enterprise-site .home-hero { max-height:780px; }
}
@media(max-width:1100px) {
.enterprise-site .site-wrap, .enterprise-site .source-content .wrap { width:calc(100% - 64px); }
.enterprise-site .desktop-nav { gap:20px; }
.enterprise-site .header-inner { gap:15px; }
.enterprise-site .logo-link { width:150px; }
.enterprise-site .logo-link img { width:205px; margin-left:-24px; }
.enterprise-site .stat { gap:12px; padding-left:20px; }
.enterprise-site .stat strong { font-size:40px; }
.enterprise-site .feature-project { gap:40px; }
}
@media(max-width:800px) {
.enterprise-site .family-hero { padding-block:55px; }
.enterprise-site .family-hero h1 { font-size:60px; }
.enterprise-site .site-wrap, .enterprise-site .source-content .wrap { width:calc(100% - 40px); }
.enterprise-site .identity-strip { height:27px; }
.enterprise-site .identity-strip span:last-child { font-size:7px; }
.enterprise-site .header-inner { height:73px; }
.enterprise-site .desktop-nav, .enterprise-site .header-projects { display:none; }
.enterprise-site .mobile-menu-toggle { display:inline-flex; }
.enterprise-site .mobile-nav { display:flex; flex-direction:column; padding:10px 20px 24px; border-top:1px solid var(--border); }
.enterprise-site .mobile-nav a { display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--border); font-size:13px; }
.enterprise-site .home-hero { min-height:550px; height:calc(100svh - 185px); max-height:680px; }
.enterprise-site .hero-content { padding-block:50px 90px; }
.enterprise-site .hero-content h1 { font-size:65px; }
.enterprise-site .hero-content p.hero-description { font-size:12px; max-width:330px; }
.enterprise-site .hero-photo { object-position:60% center; }
.enterprise-site .hero-bottom .site-wrap { align-items:flex-end; gap:20px; font-size:8px; }
.enterprise-site .hero-caption { max-width:120px; text-align:right; font-size:7px; }
.enterprise-site .stats-grid { grid-template-columns:repeat(2,1fr); padding-block:23px; row-gap:25px; }
.enterprise-site .stat { padding-left:20px; }
.enterprise-site .stat:nth-child(3) { border:0; padding-left:0; }
.enterprise-site .stat strong { font-size:40px; }
.enterprise-site .section { padding-block:56px; }
.enterprise-site .section-heading, .enterprise-site .about-grid { grid-template-columns:1fr; gap:20px; }
.enterprise-site .section-heading { margin-bottom:30px; }
.enterprise-site .section-heading h2, .enterprise-site .projects-heading h2 { font-size:39px; }
.enterprise-site .about-text { gap:24px; }
.enterprise-site .domain-list { margin-left:0; }
.enterprise-site .domain-row h3 { font-size:26px; }
.enterprise-site .projects-heading { align-items:start; gap:20px; }
.enterprise-site .projects-heading a { font-size:10px; }
.enterprise-site .feature-project { grid-template-columns:1fr; gap:28px; }
.enterprise-site .project-copy h3 { font-size:37px; }
.enterprise-site .project-copy p { margin-top:15px; }
.enterprise-site .project-secondary { gap:25px; }
.enterprise-site .business-grid { gap:22px; }
.enterprise-site .business-item h3 { font-size:30px; }
.enterprise-site .business-item .business-meta { flex-direction:column; gap:8px; }
.enterprise-site .record-row { grid-template-columns:65px 1fr 1.4fr; gap:15px; }
.enterprise-site .footer-top h2 { font-size:44px; }
.enterprise-site .footer-top { gap:30px; }
.enterprise-site .footer-top a { font-size:10px; padding-inline:15px; }
.enterprise-site .footer-bottom { grid-template-columns:1fr 1fr; }
.enterprise-site .copyright { grid-column:1/-1; text-align:left; }
.enterprise-site .page-intro { padding-block:50px; }
.enterprise-site .page-intro h1 { font-size:60px; }
.enterprise-site .domain-detail { grid-template-columns:30px 1fr; gap:20px; }
.enterprise-site .domain-detail .description { grid-column:2; }
.enterprise-site .note-band .site-wrap, .enterprise-site .source-content .split { grid-template-columns:1fr; gap:20px; }
.enterprise-site .source-content .band { padding-block:40px; }
.enterprise-site .manufacturing-visual img { height:350px; }
}
@media(max-width:500px) {
.enterprise-site .family-hero h1 { font-size:51px; }
.enterprise-site .family-path { flex-direction:column; align-items:start; }
.enterprise-site .hero-content h1 { font-size:54px; }
.enterprise-site .hero-content .eyebrow { font-size:9px; }
.enterprise-site .hero-content p.hero-description { max-width:285px; }
.enterprise-site .hero-content .hero-cta { margin-top:24px; }
.enterprise-site .stats-grid { column-gap:10px; }
.enterprise-site .stat strong { font-size:37px; }
.enterprise-site .stat p { font-size:9px; }
.enterprise-site .stat p span { font-size:8px; }
.enterprise-site .stat { gap:12px; padding-left:14px; }
.enterprise-site .about-text { grid-template-columns:1fr; gap:20px; }
.enterprise-site .projects-heading { flex-direction:column; gap:10px; }
.enterprise-site .project-secondary, .enterprise-site .business-grid { grid-template-columns:1fr; gap:35px; }
.enterprise-site .business-item .business-meta { flex-direction:row; }
.enterprise-site .business-item h3 { margin-top:22px; font-size:37px; }
.enterprise-site .record-row { grid-template-columns:52px 1fr; }
.enterprise-site .record-row p { grid-column:2; }
.enterprise-site .record-row .year { grid-row:1/3; }
.enterprise-site .footer-top { flex-direction:column; align-items:start; padding-bottom:40px; }
.enterprise-site .footer-bottom { gap:35px; }
.enterprise-site .footer-top h2 { font-size:46px; }
.enterprise-site .page-intro h1 { font-size:51px; }
.enterprise-site .intro-text { font-size:14px; }
.enterprise-site .domain-detail h2 { font-size:31px; }
.enterprise-site .source-content .cols-2 { grid-template-columns:1fr; gap:10px; }
.enterprise-site .source-content h2 { font-size:31px; }
.enterprise-site .manufacturing-visual img { height:280px; }
}
@media(prefers-reduced-motion:reduce) {
.enterprise-site *, .enterprise-site *::before, .enterprise-site *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
.enterprise-site { --font-sans: 'DM Sans', sans-serif; --font-display: 'Libre Caslon Display', Georgia, serif; font-family:var(--font-sans); }
.enterprise-site h1, .enterprise-site h2, .enterprise-site h3 { font-family:var(--font-display); font-weight:400; line-height:1.07; letter-spacing:0; }
.enterprise-site p { line-height:1.8; }
.enterprise-site .hero-bottom { bottom:0; letter-spacing:0; text-transform:none; display:block; }
.enterprise-site .page-intro { max-width:none; }
.enterprise-site .hero-content { animation:none; }
.enterprise-site .project-index { display:flex; flex-wrap:wrap; gap:16px 30px; padding-block:24px; font-size:11px; }
.enterprise-site .project-index a { border-bottom:1px solid var(--border); padding-bottom:7px; }
.enterprise-site .source-content .tw { overflow-x:auto; }
.enterprise-site .source-content table { width:100%; border-collapse:collapse; margin-block:20px; font-size:12px; }
.enterprise-site .source-content th, .enterprise-site .source-content td { border-bottom:1px solid var(--border); text-align:left; padding:18px 16px; vertical-align:top; line-height:1.8; }
.enterprise-site .source-content th { width:30%; font-weight:500; }
.enterprise-site .footer-bottom { margin-top: 0; }
.enterprise-site .footer-bottom nav a { color: var(--primary-foreground); }
.enterprise-site .hero-bottom { font-size: 9px; }
.enterprise-site .family-bridge p { color:var(--muted-foreground); max-width:600px; }
@media (max-width:500px) {
.enterprise-site .home-hero { min-height:0; height:560px; }
.enterprise-site .hero-content h1 { font-size:50px; }
.enterprise-site .hero-content { padding-block:30px 90px; }
}
@media (prefers-reduced-motion:no-preference) {
.enterprise-site .hero-content { animation:reveal .8s ease-out; }
}

/* ===========================================================================
   THE MENU — BLACK, WITH WHITE TEXT AND WHITE BUTTONS
   The design's menus are white. At the client's request both sites are black.
   The two sites now share the same header markup, so these rules are declared
   twice: once unscoped (the family vault) and once under .enterprise-site,
   which block B styles at higher specificity.
   =========================================================================*/

.site-header,
.enterprise-site .site-header {
  background: var(--primary);
  color: var(--primary-foreground);
  border-bottom: 1px solid var(--inverse-border);
}

.identity-strip,
.enterprise-site .identity-strip {
  background: #000;
  color: var(--primary-foreground);
}

/* navigation links: white */
.site-header .desktop-nav a,
.enterprise-site .site-header .desktop-nav a {
  color: var(--primary-foreground);
  opacity: .78;
}
.site-header .desktop-nav a:hover,
.site-header .desktop-nav .nav-active,
.enterprise-site .site-header .desktop-nav a:hover,
.enterprise-site .site-header .desktop-nav .nav-active {
  color: var(--primary-foreground);
  opacity: 1;
}
.site-header .desktop-nav .nav-active:after,
.enterprise-site .site-header .desktop-nav .nav-active:after {
  background: var(--primary-foreground);
}

/* buttons: white text on a white rule, inverted on hover */
.site-header .header-projects,
.site-header .btn--editorial,
.enterprise-site .site-header .header-projects,
.enterprise-site .site-header .btn--editorial {
  color: var(--primary-foreground);
  border-color: var(--primary-foreground);
  background: transparent;
  opacity: 1;
}
.site-header .header-projects:hover,
.site-header .btn--editorial:hover,
.enterprise-site .site-header .header-projects:hover,
.enterprise-site .site-header .btn--editorial:hover {
  background: var(--primary-foreground);
  color: var(--primary);
}
.site-header .logo-link img,
.enterprise-site .site-header .logo-link img { filter: none; }

/* ===========================================================================
   MOBILE NAVIGATION — the burger and the panel are hidden until asked for,
   and the panel is built for a thumb: full-width rows, generous targets.
   =========================================================================*/

.mobile-menu,
.btn.mobile-menu { display: none; }
.mobile-nav,
.enterprise-site .mobile-nav { display: none; }

@media (max-width: 800px) {
  .site-header .mobile-menu-toggle,
  .enterprise-site .mobile-menu-toggle { display: inline-flex; }
  .site-header .desktop-nav,
  .enterprise-site .desktop-nav,
  .site-header .header-projects,
  .enterprise-site .header-projects { display: none; }

  .mobile-nav.open {
    display: flex;
    flex-direction: column;
    padding: 6px 0 14px;
    background: var(--primary);
    border-top: 1px solid var(--inverse-border);
  }
  .mobile-nav.open a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 15px 20px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--primary-foreground);
    border-bottom: 1px solid var(--inverse-border);
  }
  .mobile-nav.open a:active { background: color-mix(in oklch, var(--primary-foreground) 12%, transparent); }
  .mobile-nav.open a svg { width: 17px; height: 17px; opacity: .8; }
  /* the last item needs no rule under it */
  .mobile-nav.open a:last-child { border-bottom: 0; }
  .mobile-nav.open a#searchOpenMobile { border-top: 1px solid var(--inverse-border); }
  .header-inner { gap: 12px; }
}

@media (max-width: 760px) {
  .site-header .mobile-menu-toggle,
  .enterprise-site .mobile-menu-toggle { display: inline-flex; }
}

/* ===========================================================================
   FINAL OVERRIDES
   Declared last, and with the .enterprise-site prefix where block B competes,
   so nothing above can win on order or specificity.
   =========================================================================*/

/* The `hidden` attribute must win. The design sets display:flex on
   .search-overlay, which otherwise overrides it and leaves an invisible
   overlay swallowing every click on the page. */
[hidden] { display: none !important; }
.library-item[hidden] { display: none !important; }

/* The search overlay is class-driven, so `hidden` and `.open` never fight. */
.search-overlay { display: none; }
.search-overlay.open { display: flex; }

/* The mobile panel opens only on .open, on both sites. */
.mobile-nav { display: none; }
.enterprise-site .mobile-nav { display: none; }

@media (max-width: 800px) {
  .mobile-nav.open,
  .enterprise-site .mobile-nav.open {
    display: flex;
    flex-direction: column;
    padding: 6px 0 14px;
    background: var(--primary);
    border-top: 1px solid var(--inverse-border);
  }
  .mobile-nav.open a,
  .enterprise-site .mobile-nav.open a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 15px 20px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--primary-foreground);
    border-bottom: 1px solid var(--inverse-border);
  }
  .mobile-nav.open a:last-child,
  .enterprise-site .mobile-nav.open a:last-child { border-bottom: 0; }
  .mobile-nav.open a#searchOpenMobile { border-top: 1px solid var(--inverse-border); }
  .site-header .desktop-nav,
  .enterprise-site .site-header .desktop-nav,
  .site-header .header-projects,
  .enterprise-site .site-header .header-projects { display: none; }
  .site-header .mobile-menu-toggle,
  .enterprise-site .site-header .mobile-menu-toggle { display: inline-flex; }
}

/* ===========================================================================
   BUTTONS  (restored — this block had been lost)
   The design expresses these as Tailwind variant classes in
   src/components/ui/button.tsx: default, secondary, outline, ghost, link,
   hero, heroLink, editorial, inverse, text, filter, icon.
   =========================================================================*/

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; white-space: nowrap; border-radius: var(--radius-md, 4px);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  line-height: 1; cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s;
  border: 0; background: transparent; color: inherit; padding: 0;
}
/* The icon must never be the click target: a click that lands on the <svg> or
   its <path>/<line> has to reach the button underneath. */
.btn svg, .btn svg * { pointer-events: none; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.btn:disabled { pointer-events: none; opacity: .5; cursor: not-allowed; }

.btn--default   { background: var(--primary); color: var(--primary-foreground); height: 36px; padding-inline: 16px; }
.btn--secondary { background: var(--secondary); color: var(--foreground); height: 36px; padding-inline: 16px; }
.btn--outline   { border: 1px solid var(--border); background: var(--background); color: var(--foreground); height: 36px; padding-inline: 16px; }
.btn--outline:hover { background: var(--accent); }
.btn--ghost     { height: 36px; width: 36px; padding: 0; color: inherit; }
.btn--ghost:hover { background: var(--accent); }
.btn--link      { color: var(--primary); text-underline-offset: 4px; height: auto; }
.btn--link:hover { text-decoration: underline; }

.btn--hero      { border-radius: 0; background: var(--background); color: var(--foreground); height: 44px; padding-inline: 20px; font-size: 12px; }
.btn--hero:hover { background: var(--secondary); }
.btn--hero-link { border-radius: 0; color: var(--inverse-foreground); height: 44px; padding-inline: 8px; font-size: 12px; }
.btn--hero-link:hover { background: color-mix(in oklch, var(--inverse-foreground) 10%, transparent); }
.btn--editorial { border-radius: 0; border: 1px solid currentColor; color: inherit; padding-inline: 16px; min-height: 38px; font-size: 12px; }
.btn--editorial:hover { background: var(--muted); color: var(--foreground); }
.btn--inverse   { border-radius: 0; border: 1px solid currentColor; color: inherit; padding-inline: 20px; min-height: 38px; font-size: 12px; }
.btn--inverse:hover { background: color-mix(in oklch, currentColor 12%, transparent); }
.btn--text      { border-radius: 0; color: inherit; padding: 0; height: auto; font-size: 12px; text-underline-offset: 4px; }
.btn--text:hover { text-decoration: underline; }
.btn--filter    { border-radius: 0; color: var(--muted-foreground); font-size: 12px; height: 34px; padding-inline: 14px; }
.btn--filter:hover { background: var(--muted); }
.btn--filter[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); }
.btn--icon      { height: 38px; width: 38px; padding: 0; }

/* ===========================================================================
   THE VAULT HEADER
   Block B scopes its header rules to .enterprise-site, and the vault's
   <body class="portal"> has no such ancestor. So the vault never got
   `display:flex` on its nav (it fell back to block, 16px tall) and never got
   the burger hidden above the breakpoint — a visible, dead control on desktop.
   These are the class-neutral equivalents.
   =========================================================================*/

.desktop-nav {
  display: flex;
  gap: 32px;
  align-self: stretch;
  align-items: center;
}
.mobile-menu-toggle { display: none; }

@media (max-width: 1100px) { .desktop-nav { gap: 20px; } }

@media (max-width: 800px) {
  .desktop-nav { display: none; }
  .mobile-menu-toggle { display: inline-flex; }
}
@media (max-width: 800px) {
  .mobile-nav.open button.mobile-nav-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 15px 20px;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.3;
    text-align: left;
    color: var(--primary-foreground);
    background: transparent;
    border: 0;
    border-top: 1px solid var(--inverse-border);
    border-bottom: 1px solid var(--inverse-border);
    cursor: pointer;
  }
  .mobile-nav.open button.mobile-nav-action:active {
    background: color-mix(in oklch, var(--primary-foreground) 12%, transparent);
  }
}

/* ===========================================================================
   THE VAULT HEADER — the public header, class for class
   Every one of these rules lives inside .enterprise-site in the design's block
   B. The vault reuses the same class names, so without them its header had no
   container width, no 90px bar and an unstretched logo. Reproduced here against
   body.portal, keeping the portal's own typography.
   =========================================================================*/

body.portal .site-wrap { max-width: 1400px; margin-inline: auto; width: calc(100% - 112px); }
body.portal .identity-strip {
  background: #000;
  color: var(--primary-foreground);
  height: 30px;
  font-size: 8px;
}
body.portal .identity-strip .site-wrap {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body.portal .site-header {
  background: var(--primary);
  color: var(--primary-foreground);
  border-bottom: 1px solid var(--inverse-border);
}
body.portal .header-inner {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
body.portal .logo-link { display: block; width: 190px; flex-shrink: 0; }
body.portal .logo-link img {
  width: 240px;
  max-width: none;
  height: 72px;
  margin-left: -28px;
  object-fit: contain;
}
body.portal .header-projects { font-size: 10px; }

@media (max-width: 1100px) {
  body.portal .site-wrap { width: calc(100% - 64px); }
  body.portal .header-inner { gap: 15px; }
  body.portal .logo-link { width: 150px; }
  body.portal .logo-link img { width: 205px; margin-left: -24px; }
}
@media (max-width: 800px) {
  body.portal .site-wrap { width: calc(100% - 40px); }
  body.portal .identity-strip { height: 27px; }
  body.portal .header-inner { height: 73px; }
}

/* ===========================================================================
   ONE BLACK
   The identity strip was forced to #000 while the header, footer and mobile
   panel used var(--primary) — three different blacks, and the logo carried a
   fourth. Every surface now uses var(--primary), and the logo has no background
   of its own, so the mark and the bars always match.
   =========================================================================*/

.identity-strip,
.enterprise-site .identity-strip,
body.portal .identity-strip { background: var(--primary); color: var(--primary-foreground); }

.site-header,
.enterprise-site .site-header,
body.portal .site-header { background: var(--primary); color: var(--primary-foreground); }

.site-footer,
.enterprise-site .site-footer,
body.portal .site-footer { background: var(--primary); color: var(--primary-foreground); }

.mobile-nav.open,
.enterprise-site .mobile-nav.open { background: var(--primary); }

/* the logo is transparent, so it inherits the bar and can never mismatch */
.logo-link img { background: transparent; }

/* ===========================================================================
   PHOTOGRAPHIC PLATES
   The generated images are dark, monochrome and empty of people, matching the
   three photographs the design already ships. They sit inside .reader, so they
   are constrained to the reading column.
   =========================================================================*/

.plate { margin: 0 0 34px; }
.plate img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--primary);
}
.plate figcaption {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--muted-foreground);
}
@media (max-width: 800px) { .plate img { aspect-ratio: 3 / 2; } }

/* ===========================================================================
   REGISTER LISTS
   The archive uses <ul><li><div><span>…</span><span>…</span></div></li> for its
   registers — the watches, the places, the offices. No rule existed for it, so
   every span ran together on one line. Laid out as a row here.
   =========================================================================*/

.reader ul li > div {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
  gap: 4px 22px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.reader ul li:last-child > div { border-bottom: 0; }
.reader ul li > div > span:first-child { color: var(--foreground); }
.reader ul li > div > span:not(:first-child) { color: var(--muted-foreground); font-size: 12px; }
.reader ul li > div > span:last-child:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 800px) {
  .reader ul li > div { grid-template-columns: 1fr; gap: 3px; }
  .reader ul li > div > span:last-child:not(:first-child) { text-align: left; }
}

/* ===========================================================================
   THE DARK THEME
   The design declares `@custom-variant dark (&:is(.dark *))` and never uses it.
   This is that theme: a black reading ground with near-white text, in the
   manner of Twitter's dark mode. Selected by .dark on <html>, set by theme.js
   and remembered per visitor.

   Only the semantic layer is overridden. Every component reads those tokens,
   so nothing else has to change.
   =========================================================================*/

html.dark {
  --background: #000000;
  --foreground: #ffffff;

  --primary: #000000;
  --primary-foreground: #ffffff;

  --secondary: #16181c;
  --muted: #16181c;
  --muted-foreground: #b4b4b4;
  --accent: #1c1e22;
  --border: #2f3336;
  --card: #000000;

  /* An "inverse" section in dark mode is a RAISED surface, not a light one:
     slightly lighter than the page, with light text on it. Setting the
     foreground to black here produced black-on-dark-grey at 1.18:1. */
  --inverse: #16181c;
  --inverse-background: #16181c;
  --inverse-foreground: #ffffff;
  --inverse-muted: #b4b4b4;
  --inverse-border: #2f3336;

  --overlay: oklch(0 0 0 / .78);
  --shadow-dialog: 0 24px 80px oklch(0 0 0 / .7);
}

/* The header, footer and mobile panel are already black; in dark mode they sit
   flush with the page, so the separating rule does the work. */
html.dark .site-header,
html.dark .enterprise-site .site-header,
html.dark .site-footer,
html.dark .enterprise-site .site-footer,
html.dark .identity-strip,
html.dark .enterprise-site .identity-strip,
html.dark .mobile-nav.open,
html.dark .enterprise-site .mobile-nav.open { background: #000000; }

html.dark .identity-strip,
html.dark .enterprise-site .identity-strip { border-bottom: 1px solid var(--border); }

/* Sections that were dark-on-light invert cleanly because they read tokens. */
html.dark .band--tint,
html.dark .section-muted,
html.dark .source-content .band--tint,
html.dark .motto-band,
html.dark .dash-caveat { background: var(--muted); }

/* The generated plates are near-black already; lift them very slightly so a
   photograph on a black page still reads as an image rather than a hole. */
html.dark .plate img,
html.dark .hero-photo,
html.dark .hero-image,
html.dark .manufacturing-visual img,
html.dark .project-image img { filter: brightness(1.06) contrast(1.02); }

/* Table headers in the reading column. */
html.dark .reader th { background: var(--muted); color: var(--foreground); }
html.dark .reader td, html.dark .reader th { border-color: var(--border); }

/* The toggle itself. */
.theme-toggle { gap: 7px; }
.theme-toggle svg { width: 15px; height: 15px; }

@media print { html.dark { --background: #fff; --foreground: #000; } }

/* Marks a page whose text has been rewritten from the admin panel. */
.edited-note {
  margin: 0 0 18px;
  padding: 8px 12px;
  border-left: 2px solid var(--border);
  font-size: 11px;
  color: var(--muted-foreground);
}
html.dark .edited-note { border-left-color: var(--border); }

/* ===========================================================================
   RESPONSIVE TABLES
   A table read on a phone is the worst case for the reader: the header scrolls
   out of view and a row of bare cells means nothing. Below 720px each row
   becomes a labelled block, using the data-label the build stamps on every
   cell from its column heading. Above that the table is a table.
   =========================================================================*/

@media (max-width: 720px) {
  .reader table,
  .enterprise-site table {
    display: block;
    width: 100%;
    border-collapse: separate;
    border: 0;
  }
  .reader thead,
  .enterprise-site table thead { display: none; }

  .reader tbody,
  .enterprise-site table tbody { display: block; }

  .reader tr,
  .enterprise-site table tr {
    display: block;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--muted);
  }

  .reader td,
  .reader th,
  .enterprise-site table td,
  .enterprise-site table th {
    display: block;
    width: auto;
    border: 0;
    padding: 0;
    text-align: left;
  }

  /* the cell's column heading, carried down from the build */
  .reader td[data-label]::before,
  .enterprise-site table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }

  .reader td[data-label] + td[data-label],
  .enterprise-site table td[data-label] + td[data-label] { margin-top: 10px; }

  /* a row that leads with its own heading reads as the block's title */
  .reader tr > th[scope="row"],
  .reader tr > th:first-child,
  .enterprise-site table tr > th[scope="row"],
  .enterprise-site table tr > th:first-child {
    margin-bottom: 8px;
    font-size: 15px;
    color: var(--foreground);
  }
  .reader tr > th:not(:first-child),
  .enterprise-site table tr > th:not(:first-child) { margin-top: 10px; }
}

/* Between 720px and 1000px a wide table may still overflow; let it scroll
   rather than crush the columns. */
@media (min-width: 721px) and (max-width: 1000px) {
  .reader table, .enterprise-site table { display: block; overflow-x: auto; }
}

/* ===========================================================================
   A VENTURE FEATURE
   The first project gets a place on the landing page rather than sitting in a
   list of documents.
   =========================================================================*/

.venture-feature { max-width: 46rem; }
.venture-lead {
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.5;
  color: var(--foreground);
  margin: 0 0 18px;
}
.venture-feature p { color: var(--muted-foreground); line-height: 1.65; }
.venture-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 18px;
  margin: 28px 0 26px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.venture-facts dt {
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 5px;
}
.venture-facts dd { margin: 0; font-size: 15px; color: var(--foreground); }
.venture-links { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 700px) {
  .venture-facts { gap: 14px; }
  .venture-links .btn { width: 100%; justify-content: center; }
}