/* ===================================================================
   BRAND 2026 — loaded LAST on case studies, About and Contact.
   Re-skins the existing dark pages onto the new palette without
   touching content. Case studies stay dark (warm black / charcoal
   alternating) so the hundreds of inline light-text styles stay legible.
     warm black #111210 · charcoal #1B1D1A · warm white #F5F4EF
     gray #A8AAA4 · periwinkle #8B9CFF (fills) · #A3B0FF (accent text,
     5.2:1 even on the lightest inline card) · mint #A8E6CF
   =================================================================== */

@font-face {
	font-family: "Clash Display";
	src: url("../fonts/ClashDisplay-Semibold.woff2") format("woff2"),
	     url("../fonts/ClashDisplay-Semibold.woff") format("woff");
	font-weight: 600;
	font-display: swap;
}

body,
.page-wrapper {
	background-color: #111210 !important;
	color: #F5F4EF;
}

/* ---------- Section rhythm: two dark tones ---------- */
.single-work,
.work-one,
.solving-frame,
.project-pager,
.contact-one {
	background-color: #111210 !important;
}
.services-one {
	background-color: #1B1D1A !important;
}

/* ---------- Headings: one display face ---------- */
.single-work_title,
.single-work h1,
.auto-container > h2,
.auto-container > h3,
.solving-frame_title,
.project-pager h2,
.contact-one_heading,
.sec-title_heading {
	font-family: "Clash Display", "Inter", system-ui, sans-serif !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em;
	color: #F5F4EF;
	text-wrap: balance;
}
.chapter-num {
	color: #A3B0FF !important;
	font-family: "Inter", system-ui, sans-serif;
	font-weight: 600;
}

/* ---------- Text-only wordmark (replaces the old logo image) ---------- */
.wordmark {
	font-family: "Clash Display", "Inter", system-ui, sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0.005em;
	color: #F5F4EF !important;       /* 17:1 on the nav */
	text-decoration: none !important;
	white-space: nowrap;
	display: inline-block;
	padding: 8px 0;
}
.main-header .logo-box .logo .wordmark { max-width: none; }

/* Nav always sits on warm black so the wordmark never loses contrast */
.main-header,
.main-header.fixed-header,
.main-header .header-lower {
	background-color: rgba(17, 18, 16, 0.94) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}
.main-header .main-menu .navigation > li > a {
	color: #F5F4EF !important;
}
.mobile-menu .menu-box {
	background-color: #111210 !important;
}
.mobile-menu .nav-logo .wordmark { font-size: 22px; }

/* ---------- Scannable summary band (existing "Product Snapshot") ---------- */
.snapshot {
	background: rgba(139, 156, 255, 0.08) !important;
	border: 1px solid rgba(139, 156, 255, 0.28) !important;
	border-left: 3px solid #8B9CFF !important;
	border-radius: 14px !important;
	padding: 28px 30px !important;
}
.snapshot ul { font-size: 16px !important; line-height: 1.9 !important; }
.snapshot strong { color: #F5F4EF; }

/* ---------- Usability-test video slots (hidden until a file exists) ---------- */
.usability-clips {
	display: none;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin: 8px 0 40px;
}
.usability-clips.has-video { display: grid; }
.usability-clip[hidden] { display: none; }
.usability-clip video {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 78vh;
	margin: 0 auto;
	border-radius: 14px;
	border: 1px solid rgba(245, 244, 239, 0.14);
	background: #000;
}
.usability-clip figcaption {
	margin-top: 10px;
	font-size: 14px;
	color: #A8AAA4;
}

/* ---------- Footer ---------- */
.main-footer,
.main-footer .footer-bottom {
	background-color: #111210 !important;
	border-top: 1px solid rgba(245, 244, 239, 0.1);
}
.footer_copyright { color: #A8AAA4 !important; }

/* ---------- Focus ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid #8B9CFF !important;
	outline-offset: 3px;
}

::selection { background: #8B9CFF; color: #111210; }

/* ===================================================================
   DESIGN PRINCIPLES PASS — case studies
   Hierarchy: collapse 8 paragraph sizes into 3 and 8 heading sizes into 4.
   Legibility: nothing below 14px; body at 17px / 1.7.
   Line length: body copy capped at ~70 characters.
   =================================================================== */
.single-work p, .services-one p, .work-one p, .solving-frame p, section p,
section li {
	line-height: 1.7;
}
/* Body: 16–18px → 17px */
section p[style*="font-size: 16px"], section p[style*="font-size: 16.5px"],
section p[style*="font-size: 17px"], section p[style*="font-size: 18px"],
section li[style*="font-size: 16px"], section li[style*="font-size: 17px"] {
	font-size: 17px !important;
}
/* Secondary: 14–15px → 15px */
section [style*="font-size: 14px"], section [style*="font-size: 14.5px"],
section [style*="font-size: 15px"] {
	font-size: 15px !important;
}
/* Captions & labels: 11–13px → 14px floor */
section [style*="font-size: 11px"], section [style*="font-size: 12px"],
section [style*="font-size: 13px"] {
	font-size: 14px !important;
}
/* Line length */
section p { max-width: 72ch; }
section p[style*="text-align: center"] { margin-left: auto; margin-right: auto; }

/* Headings: four levels */
section h2 > .chapter-num, section h3 > .chapter-num { margin-right: 14px; }
section h2:has(.chapter-num), section h3:has(.chapter-num) {
	font-size: clamp(28px, 3vw, 38px) !important;
	line-height: 1.15 !important;
	margin-bottom: 28px !important;
}
section h4[style*="font-size: 24px"], section h4[style*="font-size: 28px"],
section h4[style*="font-size: 32px"] {
	font-size: 26px !important; line-height: 1.25 !important;
}
section h4[style*="font-size: 20px"], section h4[style*="font-size: 22px"] {
	font-size: 21px !important; line-height: 1.3 !important;
}
section h4[style*="font-size: 18px"], section h5 {
	font-size: 18px !important; line-height: 1.35 !important;
}
/* no-space inline variants */
section [style*="font-size:11px"], section [style*="font-size:12px"], section [style*="font-size:13px"] { font-size: 14px !important; }
section [style*="font-size:14px"], section [style*="font-size:15px"] { font-size: 15px !important; }
section p[style*="font-size:16px"], section p[style*="font-size:18px"] { font-size: 17px !important; }
section p { max-width: 72ch !important; }
/* every chapter-level heading on one size; card titles on one size */
section h2 { font-size: clamp(28px, 3vw, 38px) !important; line-height: 1.15 !important; }
section h3:not(:has(.chapter-num)) { font-size: 21px !important; line-height: 1.3 !important; }
.single-work_title, .single-work h1 { font-size: clamp(40px, 5vw, 64px) !important; line-height: 1.05 !important; }

/* ---------- About: career timeline ---------- */
.career { padding: 96px 0 120px; }
.career_title {
	font-family: "Clash Display", "Inter", system-ui, sans-serif !important;
	font-weight: 600; font-size: clamp(28px, 3vw, 38px); color: #F5F4EF; margin-bottom: 40px;
}
.career-list { list-style: none; margin: 0 0 40px; padding: 0; border-top: 1px solid rgba(245,244,239,0.12); }
.career-list li {
	display: grid; grid-template-columns: 11rem minmax(0,1fr) minmax(0,1.3fr); gap: 6px 32px;
	padding: 22px 0; border-bottom: 1px solid rgba(245,244,239,0.12); align-items: baseline;
}
.career_when { color: #A8AAA4 !important; font-size: 15px; }
.career_org { color: #F5F4EF !important; font-weight: 600; font-size: 17px; }
.career_role { color: rgba(245,244,239,0.82) !important; font-size: 17px; }
@media (max-width: 767px) { .career-list li { grid-template-columns: 1fr; } }

/* ---------- Final touches: one nav across the site ---------- */
.main-header .main-menu .navigation > li::before,
.main-header .main-menu .navigation > li::after,
.main-header .main-menu .navigation > li > a::before,
.main-header .main-menu .navigation > li > a::after { display: none !important; content: none !important; }
.main-header .main-menu .navigation > li { padding-left: 0 !important; margin-left: 36px !important; }
.main-header .main-menu .navigation > li > a {
	font-family: "Inter", system-ui, sans-serif !important;
	font-size: 15.6px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	opacity: 0.86;
	padding-left: 0 !important;
	transition: opacity 0.2s;
}
.main-header .main-menu .navigation > li > a:hover,
.main-header .main-menu .navigation > li.current > a { opacity: 1; }
.main-header .main-menu .navigation > li.nav-resume > a {
	opacity: 1;
	background: #8B9CFF;
	color: #111210 !important;
	font-weight: 600 !important;
	font-size: 14.8px !important;
	padding: 9px 18px !important;
	border-radius: 999px;
	line-height: 1 !important;
}
.main-header .main-menu .navigation > li.nav-resume > a:hover { background: #A3B0FF; }

/* Titles in the same sentence case as the homepage */
.single-work_title { text-transform: none !important; letter-spacing: -0.02em !important; }

/* No dashes before chapter numbers or eyebrows */
.chapter-num::before, .chapter-num::after,
.section-subtitle::before, .section-subtitle::after { display: none !important; content: none !important; }
.chapter-num, .section-subtitle { padding-left: 0 !important; }

/* Scrollbar in the site palette (was burgundy) */
html { scrollbar-color: #8B9CFF #111210; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #111210 !important; }
::-webkit-scrollbar-thumb { background: #8B9CFF !important; border-radius: 10px; border: 2px solid #111210; }
::-webkit-scrollbar-thumb:hover { background: #A3B0FF !important; }
::-webkit-scrollbar-corner { background: #111210; }


/* ---------- Nav states (secondary pages) ----------
   Resume is a quiet outlined action, never a filled "selected-looking" pill.
   The page you're on is the only highlighted item. */
.main-header .main-menu .navigation > li.nav-resume > a {
	background: transparent !important;
	color: #F5F4EF !important;
	border: 1px solid rgba(245, 244, 239, 0.35);
	font-weight: 500 !important;
}
.main-header .main-menu .navigation > li.nav-resume > a:hover { border-color: #F5F4EF; background: transparent !important; }
.main-header .main-menu .navigation > li.current > a {
	color: #A3B0FF !important;
	opacity: 1;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

/* ---------- Mobile menu, styled like the homepage ---------- */
.mobile-menu .menu-box { background: #111210 !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; }
.mobile-menu .menu-backdrop { background: rgba(0, 0, 0, 0.6) !important; }
.mobile-menu .nav-logo { padding: 26px 24px !important; border-bottom: 1px solid rgba(245,244,239,0.1); }
.mobile-menu .close-btn { top: 22px !important; right: 20px !important; color: #F5F4EF !important; font-size: 22px !important; }
.mobile-menu .navigation { border-top: 0 !important; padding: 12px 0 !important; }
.mobile-menu .navigation li { border-bottom: 1px solid rgba(245,244,239,0.08) !important; }
.mobile-menu .navigation li::before, .mobile-menu .navigation li::after { display: none !important; }
.mobile-menu .navigation li > a {
	font-family: "Inter", system-ui, sans-serif !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: #F5F4EF !important;
	padding: 18px 24px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
}
.mobile-menu .navigation li.current > a { color: #A3B0FF !important; box-shadow: inset 3px 0 0 #8B9CFF; }
.mobile-menu .navigation li.nav-resume > a::after { content: " ↓"; color: #A8AAA4; }
/* Snappy, full-width mobile menu (template default took 1.5s to slide in) */
.mobile-menu { width: 100% !important; max-width: 100% !important; }
.mobile-menu .menu-box { right: -100% !important; transition: right 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important; transition-delay: 0s !important; padding-top: 0 !important; }
.mobile-menu-visible .mobile-menu .menu-box { right: 0 !important; }
.mobile-menu .menu-backdrop { transition: opacity 0.25s ease !important; transition-delay: 0s !important; }