/* Townloom "clay" theme, shared with townloom.com (src/styles.css, .tl-clay block).
   Site-wide chrome and tokens. Load after every other stylesheet; legacy rules keep
   working because they read the shared tokens re-set here. */
:root {
  color-scheme: light;
  --ink: #0d0d0f;
  --midnight: #0d0d0f;
  --navy: #0d0d0f;
  --panel-dark: #0d0d0f;
  --surface-inverse: #0d0d0f;
  --muted: #55534e;
  --muted-2: #77746d;
  --gray-600: #55534e;
  --bg: #fff;
  --paper: #fff;
  --paper-2: #f3f2ee;
  --white: #fff;
  --surface: #f3f2ee;
  --surface-2: #e9e7e0;
  --pale: #f3f2ee;
  --line: #e4e2dc;
  --line-soft: #eeece7;
  --rule: #e4e2dc;
  --rule-soft: #eeece7;
  --gray-200: #e4e2dc;
  /* teal from the townloom palette, darkened one step so text links pass AA */
  --accent: #0b7469;
  --accent-text: #0b7469;
  --accent-hover: #085a52;
  --accent-soft: #e3f1ee;
  --signal: #0b7469;
  --signal-dark: #085a52;
  --f-sans: "Onest", ui-sans-serif, system-ui, sans-serif;
  --f-display: "Onest", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "Onest", ui-sans-serif, system-ui, sans-serif;
  --radius: 12px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  /* townloom tokens */
  --c-warm: #f3f2ee;
  --c-lime: #d6e82a;
  --c-lime-hi: #e3f34a;
  --c-plum: #3b0b31;
  --c-sun: #f7c948;
  --c-teal: #0e8a7e;
  --gut: clamp(12px, 5.6vw, 80px);
  --pad: clamp(24px, 3.4vw, 48px);
  --r-xl: clamp(28px, 3.3vw, 48px);
  --r-md: 24px;
  --ink-soft: #55534e;
  --mist: #f3f2ee;
}
body { font: 400 16px/1.55 var(--f-sans); letter-spacing: normal; }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.035em; }
h1, h2 { line-height: 1.02; }
:where(a, button, [tabindex]):focus-visible { outline: 2px solid #3a5af9; outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--c-lime); color: var(--ink); }

/* Buttons: dark primary, warm soft secondary, 12px corners (clay-btn-dark / -soft). */
.btn {
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid transparent;
  border-radius: 12px;
  font: 500 1rem/1.2 var(--f-sans);
  letter-spacing: normal;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
}
/* hero-sized (clay-btn-lime / clay-btn-ghost-light) */
.btn-lime, .btn-light, .btn-ghost-light { min-height: 48px; padding: 0 1.25rem; font-size: 1.0625rem; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-ghost, .btn-outline { background: var(--c-warm); border-color: var(--c-warm); color: var(--ink); }
.btn-lime { background: var(--c-lime); border-color: var(--c-lime); color: var(--ink); }
.btn-light { background: #fff; border-color: #fff; color: var(--ink); }
.btn-ghost-light { background: #fff; border-color: var(--ink); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: #2a2a2e; border-color: #2a2a2e; color: #fff; transform: none; }
  .btn-ghost:hover, .btn-outline:hover { background: #e9e7e0; border-color: #e9e7e0; color: var(--ink); transform: none; }
  .btn-lime:hover { background: var(--c-lime-hi); border-color: var(--c-lime-hi); transform: none; }
  .btn-light:hover { background: #f1f1ee; border-color: #f1f1ee; transform: none; }
  .btn-ghost-light:hover { background: #f1f1ee; transform: none; }
}
.text-link { color: var(--ink); font-weight: 500; text-decoration-color: currentColor; text-underline-offset: 3px; }

/* Navigation: white floating card with rounded bottom corners (clay-nav). */
html nav:not(#clay-nav), html nav.is-solid, html nav.story-nav {
  background: #fff !important;
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 10px 30px -20px rgb(0 0 0 / 0.25);
  color: var(--ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (min-width: 901px) {
  html nav:not(#clay-nav) { left: 36px; right: 36px; border-radius: 0 0 20px 20px; }
  nav .nav-inner { height: 60px; padding: 0 12px 0 24px; max-width: none; justify-content: flex-start; gap: 1.5rem; }
  /* clay-nav-links: links sit beside the logo, CTA pushed right */
  nav .nav-links { flex: 1; }
  nav .nav-links li:has(> .nav-cta) { margin-left: auto; }
}
nav .logo, footer .logo { color: var(--ink); font-weight: 600; }
.logo .num-2, footer .footer-brand .logo > span > span { color: var(--c-teal); }
nav .nav-links { gap: 0.25rem; }
nav .nav-links a, nav .nav-mega-trigger { padding-inline: 0.65rem; color: var(--ink); font: 400 0.9375rem/1.3 var(--f-sans); }
nav .nav-links a:not(.nav-cta):hover, nav .nav-mega-trigger:hover { color: var(--ink-soft, #55534e); border-color: transparent; }
nav .nav-links a.nav-cta {
  margin-left: 0.5rem;
  padding: 0 1.1rem;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--ink) !important;
  color: #fff !important;
  font-weight: 500;
}
@media (hover: hover) and (pointer: fine) { nav .nav-links a.nav-cta:hover { background: #2a2a2e !important; } }
nav .industry-dropdown .nav-mega-panel {
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.3);
}
@media (min-width: 901px) { nav .industry-dropdown .nav-mega-panel { width: 320px; margin-top: 8px; } }
nav .nav-links .industry-dropdown-links a { color: var(--ink); font-size: 15px; border-radius: 10px; }
nav .nav-links .industry-dropdown-links a:hover,
nav .nav-links .industry-dropdown-links a:focus-visible,
nav .nav-links .industry-dropdown-links a[aria-current] { background: var(--c-warm); color: var(--ink); }
.mobile-nav-toggle { border-color: var(--line); border-radius: 12px; color: var(--ink); }
@media (max-width: 900px) {
  nav .nav-links a, nav .nav-mega-trigger { color: var(--ink) !important; }
  nav .nav-links a.nav-cta { background: transparent !important; color: var(--ink) !important; }
  nav .industry-dropdown .nav-mega-panel { background: transparent; box-shadow: none; }
}

/* Footer: warm card with rounded top corners and a big wordmark at the base (clay-footer). */
footer {
  position: relative;
  --end: clamp(240px, 24vw, 340px);
  margin: var(--end) var(--gut) 0;
  padding: 56px 0 40px;
  isolation: isolate;
  color: #3d3b37;
}
/* clay-end: the hero footage fills the gap above the footer card and fades up into the page. */
footer::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: calc(-1 * var(--end)) calc(-1 * var(--gut)) 0;
  background: linear-gradient(#fff 10%, rgb(255 255 255 / 0) 77%), url("/assets/images/video-posters/ai2see-cv2.webp") 50% 40% / cover;
  pointer-events: none;
}
footer::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: #f4f3f0;
}
footer .container { padding-inline: var(--pad); max-width: none; }
footer .footer-grid { gap: 2rem; }
footer h3, footer h4 {
  margin-bottom: 1.1rem;
  color: var(--ink);
  font: 600 0.75rem/1.4 var(--f-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
footer .footer-brand p { color: var(--muted); font-size: 0.9375rem; }
footer a { font-size: 0.9375rem; }
footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
footer .footer-bottom { border-top: 1px solid #e2e0da; color: var(--muted); font-size: 0.875rem; }
footer .social-btn { border: 0; border-radius: 12px; background: #fff; color: var(--ink); }
footer .social-btn:hover { background: var(--ink); color: #fff; text-decoration: none; }
.footer-wordmark {
  margin: 48px 0 28px;
  color: var(--ink);
  font: 600 clamp(52px, 6.5vw, 96px)/0.85 var(--f-display);
  letter-spacing: -0.05em;
  user-select: none;
}
.footer-wordmark span { color: var(--c-teal); }
@media (max-width: 640px) {
  footer { margin-inline: 0; }
  footer::before { inset-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* Legacy page motion (mobile-nav.js .enter, card-blow) re-timed to townloom's
   tl-arrive and tl-blow so every page moves the same way. */
@keyframes enter-once { from { opacity: 0.35; translate: 0 16px; } to { opacity: 1; translate: none; } }
@keyframes card-blow {
  0% { opacity: 0; transform: scale(0.9); }
  68% { opacity: 1; transform: scale(1.02); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  main :is(h1, h2, h3, p, li, .start-path strong).enter-wait { opacity: 0.35; translate: 0 16px; }
}
main :is(h1, h2, h3, p, li, .start-path strong).enter { animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
main :is(.sector-link, .blog-card).enter { animation-duration: 0.8s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }

/* Page titles on blog, posts and careers share the home hero's heavy ink title and lime marker. */
body .page-title, .root .hero-title { font-weight: 800; letter-spacing: -0.055em; line-height: 0.95; }
.root .hero-title em {
  margin: 0 -0.06em;
  padding: 0 0.06em;
  background: linear-gradient(transparent 58%, var(--c-lime) 58%, var(--c-lime) 90%, transparent 90%);
  color: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Careers: footer wordmark in ink (editorial-pages.css paints it the page colour) and the note banner as an ink card. */
footer .footer-brand .logo > span { color: var(--ink); }
footer .footer-brand .logo > span > span { color: var(--c-teal); }
.spec-banner { padding: clamp(40px, 5vw, 68px) clamp(24px, 4vw, 48px); border-radius: var(--r-xl); background: var(--ink); color: #fff; }
.spec-banner h2 { color: #fff; font-weight: 800; letter-spacing: -0.045em; }
.spec-banner p { color: rgb(255 255 255 / 0.72); }
.spec-banner .btn { background: var(--c-lime); color: var(--ink); }
.spec-banner .btn:hover { background: var(--c-lime-hi); }