/* =========================
   Site-wide variables and defaults.
   This is where the file defines the main colors, text colors, animation timing,
   and the width limit reused across the page.
   ========================= */
:root {
  /* Dark colors used by the main page background and dark sections. */
  /* Store some colors as plain RGB numbers so they can be reused inside rgba(...). */
  --bg-rgb: 20 13 30;
  --bg: #140d1e;
  --ink-rgb: 33 24 32;
  --ink: #211820;
  --ink-soft: #575264;
  /* Light colors used by pale sections, panels, and lighter text treatments. */
  --light-rgb: 241 238 247;
  --light: #f1eef7;
  --light-soft: #d8d1df;
  --line-dark: rgba(var(--ink-rgb), 0.12);
  --line-light: rgba(var(--light-rgb), 0.14);
  --accent-rgb: 133 95 192;
  --accent: #855fc0;
  --accent-warm-rgb: 116 137 180;
  --accent-warm: #7489b4;
  --header-bg: rgba(var(--bg-rgb), 0.78);
  --surface-dark: #170f22;
  --surface-light-rgb: 216 222 234;
  --surface-light: #d8deea;
  /* Text colors are split by background type so text stays readable on both dark and light areas. */
  --text-on-dark: #f1eef7;
  --text-on-dark-muted: #d8d1df;
  --text-on-light: #211820;
  --text-on-light-muted: #4a5061;
  /* Reuse one animation curve so movement feels consistent across the site. */
  --ease-fluid: cubic-bezier(0.32, 0.72, 0, 1);
  /* Main content width:
     - on large screens, stop the layout from getting too wide
     - on small screens, keep a left/right gutter instead of touching the edges */
  --layout: min(1280px, calc(100% - 2rem));
  background: var(--bg);
  color: var(--light);
  font-family: "Public Sans", sans-serif;
  scroll-behavior: smooth;
}

/* Make element sizing easier to reason about:
   padding and borders stay inside the declared width/height. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove the browser's default page margin and let the document fill the screen height. */
html,
body {
  margin: 0;
  min-height: 100%;
}

/* Base page styles for the dark outer shell behind all sections. */
body {
  background-color: var(--surface-dark);
  color: var(--light);
  line-height: 1.65;
  overflow-x: hidden;
}

/* Links do not force the browser's default blue.
   Instead, they inherit the text color of whatever section they are inside. */
a {
  color: inherit;
  text-decoration: none;
}

/* Inputs and buttons should use the same typography as the surrounding content. */
button,
input,
textarea {
  font: inherit;
}

/* Reusable page container:
   center the content and keep it within the width defined in --layout. */
.layout {
  width: var(--layout);
  margin: 0 auto;
}

/* Let long words, URLs, or labels wrap instead of pushing the layout wider than the screen. */
h1,
h2,
h3,
p,
li,
summary {
  overflow-wrap: anywhere;
}

/* =========================
   Header and navigation
   Sticky top bar, brand block, nav links, and hover/focus effects.
   ========================= */

/* Sticky header:
   it stays pinned to the top and can switch colors when it passes over dark or light sections. */
.site-header {
  --header-text: var(--text-on-dark);
  --header-muted: var(--text-on-dark-muted);
  --header-line: rgba(var(--light-rgb), 0.16);
  --header-surface-bg: linear-gradient(180deg, rgba(var(--bg-rgb), 0.92), rgba(var(--bg-rgb), 0.8));
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-surface-bg);
  color: var(--header-text);
  backdrop-filter: blur(14px);
  transition:
    background 220ms var(--ease-fluid),
    color 220ms var(--ease-fluid),
    border-color 220ms var(--ease-fluid);
}

/* Header and footer both use a simple inner grid for alignment. */
.site-header-inner,
.site-footer-inner {
  display: grid;
  gap: 1rem;
  align-items: center;
}

.site-header-inner {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 4.7rem;
  border-bottom: 1px solid var(--header-line);
}

/* When the header sits over a light section, switch to darker text and a lighter background
   so the header stays readable. */
.site-header[data-surface="light"] {
  --header-text: var(--text-on-light);
  --header-muted: var(--text-on-light-muted);
  --header-line: rgba(var(--ink-rgb), 0.12);
  --header-surface-bg: linear-gradient(180deg, rgba(var(--surface-light-rgb), 0.94), rgba(var(--surface-light-rgb), 0.84));
}

/* Grid and flex children are often "too stubborn" to shrink on their own.
   min-width: 0 lets long text wrap inside the column instead of overflowing out of it. */
.brand,
.hero-main,
.hero-visual,
.hero-side,
.section-title-group,
.split-copy,
.experience-aside,
.timeline-list,
.faq-list,
.contact-copy,
.chat-stage {
  min-width: 0;
}

/* Site name and role are stacked on top of each other. */
.brand {
  display: inline-flex;
  flex-direction: column;
  gap: 0.14rem;
}

.brand-name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--header-text);
}

.brand-role {
  color: var(--header-muted);
  font-size: 0.8rem;
}

/* Let the nav fill the remaining header track and pin the links to the right edge.
   That way the last tab aligns with the right edge of the hero image on desktop.
   If there is not enough room, links can still wrap to the next line. */
.site-nav {
  display: flex;
  width: 100%;
  justify-self: stretch;
  justify-content: flex-end;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 0.45rem;
  margin-left: clamp(0.75rem, 1.4vw, 1.25rem);
  color: var(--header-text);
}

.language-switcher label {
  color: var(--header-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.language-switcher select {
  min-height: 2.25rem;
  padding: 0 1.95rem 0 0.72rem;
  border: 1px solid var(--header-line);
  border-radius: 999px;
  background-color: rgba(var(--light-rgb), 0.08);
  color: var(--header-text);
  cursor: pointer;
}

.site-header[data-surface="light"] .language-switcher select {
  background-color: rgba(var(--ink-rgb), 0.04);
}

.language-switcher select option {
  background: #ffffff;
  color: var(--text-on-light);
}

/* Header links always follow the current header color theme. */
.site-header .site-nav a,
.site-header .header-link {
  color: var(--header-text);
  transition: color 250ms var(--ease-fluid);
}

.site-header .site-nav a:hover,
.site-header .site-nav a:focus-visible,
.site-header .header-link:hover,
.site-header .header-link:focus-visible {
  color: var(--header-text);
}

/* All of these links/buttons use the same animated underline effect. */
.site-nav a,
.header-link,
.hero-links a,
.contact-links a,
.chat-form button {
  position: relative;
}

/* Build the underline with a pseudo-element.
   It starts hidden and grows in from left to right on hover/focus. */
.site-nav a::after,
.header-link::after,
.hero-links a::after,
.contact-links a::after,
.chat-form button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.14rem;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-warm));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms var(--ease-fluid);
}

.site-nav a:hover::after,
.header-link:hover::after,
.hero-links a:hover::after,
.contact-links a:hover::after,
.chat-form button:hover::after,
.site-nav a:focus-visible::after,
.header-link:focus-visible::after,
.hero-links a:focus-visible::after,
.contact-links a:focus-visible::after,
.chat-form button:focus-visible::after {
  transform: scaleX(1);
}

/* This wrapper holds two copies of the same label on top of each other.
   That makes the text look like it "flips" when hovered or focused. */
.link-flip {
  display: inline-grid;
  overflow: hidden;
  line-height: 1.1;
}

.link-flip > span {
  grid-area: 1 / 1;
  transition: transform 400ms var(--ease-fluid);
}

.link-flip > span:last-child {
  transform: translateY(120%);
}

/* On hover/focus:
   - the first label moves up and out
   - the second label slides up into its place */
.site-nav a:hover .link-flip > span:first-child,
.site-nav a:focus-visible .link-flip > span:first-child,
.header-link:hover .link-flip > span:first-child,
.header-link:focus-visible .link-flip > span:first-child,
.hero-links a:hover .link-flip > span:first-child,
.hero-links a:focus-visible .link-flip > span:first-child,
.contact-links a:hover .link-flip > span:first-child,
.contact-links a:focus-visible .link-flip > span:first-child,
.chat-form button:hover .link-flip > span:first-child,
.chat-form button:focus-visible .link-flip > span:first-child {
  transform: translateY(-120%);
}

.site-nav a:hover .link-flip > span:last-child,
.site-nav a:focus-visible .link-flip > span:last-child,
.header-link:hover .link-flip > span:last-child,
.header-link:focus-visible .link-flip > span:last-child,
.hero-links a:hover .link-flip > span:last-child,
.hero-links a:focus-visible .link-flip > span:last-child,
.contact-links a:hover .link-flip > span:last-child,
.contact-links a:focus-visible .link-flip > span:last-child,
.chat-form button:hover .link-flip > span:last-child,
.chat-form button:focus-visible .link-flip > span:last-child {
  transform: translateY(0);
}

/* Hide animation overflow without creating extra scrollbars. */
.page-main {
  overflow: clip;
}

/* =========================
   Shared section themes and layout shells
   These rules define the default colors and grid structures reused by many sections.
   ========================= */

/* Default color setup for dark sections such as the hero and contact areas. */
.hero-band,
.ink-section,
.contact-band {
  --section-text: var(--text-on-dark);
  --section-muted: var(--text-on-dark-muted);
  --section-line: var(--line-light);
  background-color: var(--surface-dark);
  background-image: none;
  color: var(--section-text);
}

/* Alternate color setup for light sections that look more like paper/cards. */
.paper-section {
  --section-text: var(--text-on-light);
  --section-muted: var(--text-on-light-muted);
  --section-line: var(--line-dark);
  background-color: var(--surface-light);
  background-image: none;
  color: var(--section-text);
}

/* Extra space above and below the hero so it feels like the opening panel of the page. */
.hero-band {
  --hero-scan-top: 0px;
  --hero-scan-shell-height: auto;
  position: relative;
  padding: 1.75rem 0 3.8rem;
  background:
    radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.18), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(var(--accent-warm-rgb), 0.16), transparent 24%),
    linear-gradient(180deg, #1a1226 0%, #140d1e 50%, #120c1b 100%);
  overflow: clip;
}

.contact-band {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100svh;
  background:
    radial-gradient(circle at 16% 22%, rgba(var(--accent-rgb), 0.22), transparent 28%),
    radial-gradient(circle at 84% 74%, rgba(var(--accent-warm-rgb), 0.2), transparent 24%),
    linear-gradient(180deg, #171021 0%, #140d1e 48%, #120b19 100%);
  overflow: clip;
}

.contact-band::before {
  content: "";
  position: absolute;
  inset: clamp(0.9rem, 1.8vw, 1.4rem);
  border: 1px solid rgba(var(--light-rgb), 0.07);
  border-radius: clamp(1.5rem, 3vw, 2.4rem);
  background:
    linear-gradient(180deg, rgba(var(--light-rgb), 0.02), rgba(var(--light-rgb), 0.01)),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.04), transparent 42%);
  pointer-events: none;
}

.contact-band .layout {
  position: relative;
  z-index: 1;
}

.editorial-section.contact-band {
  padding: clamp(5.5rem, 8vw, 6.6rem) 0 0;
}

/* Shared three-column layout used by section headers below the hero. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(22rem, 0.82fr);
  gap: clamp(1.25rem, 2vw, 2rem);
}

/* Shared two-column layout used in split sections, the FAQ block, and contact area. */
.split-section,
.faq-block,
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 2rem;
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(19rem, 0.94fr);
  grid-template-areas:
    "main visual"
    "side visual";
  gap: clamp(1rem, 1.6vw, 1.85rem);
  min-height: clamp(31rem, calc(100svh - 11rem), 43rem);
  align-items: start;
  padding-bottom: 1.6rem;
}

/* Small uppercase labels used for dates, section codes, and similar metadata. */
.section-code,
.item-code,
.timeline-date {
  color: var(--section-muted, var(--accent-warm));
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  display: inline-grid;
  justify-items: start;
  align-content: start;
  gap: 0.06rem;
}

.timeline-date > span {
  display: block;
  white-space: nowrap;
}

.timeline-date-divider {
  line-height: 1;
}

.section-kicker {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}

.section-title-group {
  display: grid;
  align-content: start;
  gap: 0.75rem;
}

.section-inline-heading {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
}

.section-title-group > .section-label {
  display: none;
}

/* Main display headings use a technical sans serif so the page feels more precise and modern. */
.hero-main h1,
.section-title-group h2,
.split-intro h2,
.faq-intro h2,
.contact-copy h2,
.chat-intro h2,
.case-card h3 {
  margin: 0;
  font-family: "IBM Plex Sans", "Public Sans", sans-serif;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
}

.hero-main h1 {
  max-width: 12ch;
  font-size: clamp(3rem, 5.6vw, 5rem);
  line-height: 0.97;
}

.hero-main {
  grid-area: main;
  display: grid;
  align-content: start;
  gap: 0.9rem;
  padding-top: 0.25rem;
}

.hero-main .section-kicker {
  margin-bottom: 0.15rem;
}

/* Wrapper used when JavaScript splits a title into separate lines for reveal animation. */
.display-title {
  max-width: 12ch;
  margin: 0;
  padding-left: 0;
  text-wrap: balance;
}

body[data-language="de"] .hero-main h1,
body[data-language="de"] .display-title {
  max-width: 14ch;
  font-size: clamp(2.8rem, 5.15vw, 4.65rem);
}

/* Small intro labels above headings all share the same uppercase styling. */
.eyebrow,
.section-label {
  margin: 0;
  color: var(--section-muted, currentColor);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.74rem;
  font-weight: 700;
}

/* Supporting paragraphs use the softer "muted" color for the current section. */
.hero-note,
.hero-summary,
.section-intro,
.contact-copy p,
.chat-intro p,
.faq-answer,
.timeline-row p:last-child,
.timeline-summary-list {
  color: var(--section-muted, var(--light-soft));
}

.hero-summary {
  max-width: 38rem;
  margin: 0;
  font-size: clamp(1.02rem, 1.7vw, 1.18rem);
}

/* Portrait panel used as the main visual anchor in the hero. */
.hero-visual {
  grid-area: visual;
  display: grid;
  gap: 0.5rem;
  position: relative;
  align-self: start;
  width: 100%;
  margin: 0;
}

.hero-visual-frame {
  --hero-reveal-progress: 0%;
  --hero-overlay-opacity: 1;
  position: relative;
  aspect-ratio: 6 / 7;
  overflow: hidden;
  border: 1px solid rgba(var(--light-rgb), 0.16);
  border-radius: 1.8rem;
  background: linear-gradient(180deg, rgba(var(--light-rgb), 0.06), rgba(var(--light-rgb), 0.02));
  box-shadow:
    inset 0 0 0 1px rgba(var(--light-rgb), 0.05),
    0 1.8rem 4rem rgba(7, 5, 11, 0.34);
}

.hero-visual-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--hero-overlay-opacity);
  background:
    linear-gradient(180deg, rgba(var(--bg-rgb), 0.02), rgba(var(--bg-rgb), 0.08) 48%, rgba(var(--bg-rgb), 0.42) 100%),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-warm-rgb), 0.03));
  will-change: opacity;
}

.hero-visual-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 81%;
  filter: saturate(0.92) contrast(1.02) brightness(0.96);
  transform-origin: center 68%;
  transform: scale(1.28);
}

.hero-visual-image--bw {
  z-index: 1;
  clip-path: inset(var(--hero-reveal-progress) 0 0 0);
  filter: grayscale(1) contrast(1.18) brightness(0.48);
  pointer-events: none;
  will-change: clip-path;
}

.hero-visual-caption {
  position: static;
  display: grid;
  gap: 0.25rem;
  padding: 0 0.2rem;
}

.hero-visual-caption strong {
  font-family: "IBM Plex Sans", "Public Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.hero-visual-caption span {
  color: var(--section-muted, var(--light-soft));
  font-size: 0.9rem;
}

/* Right side of the hero:
   this panel holds context, quick facts, and the primary actions. */
.hero-side {
  grid-area: side;
  display: grid;
  align-content: end;
  gap: 0.9rem;
  padding: 0;
}

.hero-note {
  margin: 0;
  max-width: 34rem;
  font-size: 0.98rem;
}

.hero-side-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(14rem, 0.92fr);
  column-gap: clamp(2rem, 3vw, 3.1rem);
  row-gap: 1rem;
  align-items: start;
}

/* Quick facts list:
   short label on the left, matching value on the right. */
.hero-facts {
  display: grid;
  margin: 0;
  align-content: start;
}

.hero-side-grid > .hero-facts {
  padding-right: clamp(0.9rem, 1.8vw, 1.6rem);
}

.hero-language-panel {
  display: grid;
  align-content: start;
  gap: 0.95rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--section-line, var(--line-light));
}

.hero-language-title {
  margin: 0;
  color: rgba(var(--light-rgb), 0.98);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero-language-list {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-language-item {
  display: grid;
  grid-template-columns: max-content auto;
  align-items: center;
  justify-content: start;
  gap: 0.45rem;
}

.hero-language-name {
  color: rgba(var(--light-rgb), 0.82);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.hero-language-level {
  padding: 0.16rem 0.55rem 0.2rem;
  border: 1px solid rgba(var(--light-rgb), 0.12);
  border-radius: 999px;
  background: rgba(var(--light-rgb), 0.05);
  color: rgba(var(--light-rgb), 0.82);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.hero-fact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--section-line, var(--line-light));
}

.hero-fact:last-child {
  border-bottom: 1px solid var(--section-line, var(--line-light));
}

.hero-fact dt {
  color: rgba(var(--light-rgb), 0.98);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero-fact dd {
  margin: 0;
  color: var(--section-muted, rgba(var(--light-rgb), 0.96));
}

/* Small inline link groups, used for hero and contact actions. */
.hero-links,
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
}

.hero-links a {
  display: inline-flex;
  align-items: center;
  min-height: 3.05rem;
  font-weight: 600;
}

.hero-chat-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.05rem;
  padding: 0.82rem 1.15rem;
  border: 1px solid rgba(241, 238, 247, 0.2);
  border-radius: 1rem;
  background:
    radial-gradient(circle at top left, rgba(241, 238, 247, 0.16), transparent 46%),
    linear-gradient(135deg, rgba(133, 95, 192, 0.9), rgba(116, 137, 180, 0.82));
  color: #f1eef7;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 1rem 2.1rem rgba(7, 5, 11, 0.28),
    0 0 0 1px rgba(133, 95, 192, 0.16);
  font-family: "IBM Plex Sans", "Public Sans", sans-serif;
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  white-space: nowrap;
  transition:
    transform 220ms var(--ease-fluid),
    box-shadow 220ms var(--ease-fluid),
    border-color 220ms var(--ease-fluid),
    background 220ms var(--ease-fluid);
}

.hero-chat-cta:hover,
.hero-chat-cta:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(241, 238, 247, 0.3);
  background:
    radial-gradient(circle at top left, rgba(241, 238, 247, 0.2), transparent 46%),
    linear-gradient(135deg, rgba(147, 106, 208, 0.95), rgba(125, 145, 188, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1.2rem 2.6rem rgba(7, 5, 11, 0.34),
    0 0 0 6px rgba(133, 95, 192, 0.16);
}

.hero-links a.hero-chat-cta::after {
  content: none;
}

/* These lists are styled manually, so remove the browser's default bullets and spacing. */
.hero-points,
.statement-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 0.2rem;
}

.hero-points li {
  position: relative;
  min-height: 100%;
  padding: 1.15rem 1rem 1rem;
  border: 1px solid rgba(var(--light-rgb), 0.14);
  border-radius: 1.15rem;
  background:
    linear-gradient(180deg, rgba(var(--light-rgb), 0.06), rgba(var(--light-rgb), 0.02)),
    rgba(var(--bg-rgb), 0.28);
  color: rgba(var(--light-rgb), 0.9);
  box-shadow: inset 0 0 0 1px rgba(var(--light-rgb), 0.04);
}

.hero-points li::before {
  content: "";
  display: block;
  width: 0.56rem;
  height: 0.56rem;
  margin-bottom: 0.85rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-warm));
  box-shadow: 0 0 0 0.35rem rgba(var(--accent-rgb), 0.1);
}

.statement-list li {
  padding: 0.82rem 0;
  border-top: 1px solid var(--section-line, var(--line-light));
}

/* Compact rail below the hero for tools and recurring technologies. */
.hero-tool-rail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 1.4rem;
  align-items: center;
  padding-top: 0.85rem;
  border-top: 1px solid var(--section-line, var(--line-light));
}

.hero-tool-rail-title {
  margin: 0;
  color: rgba(var(--light-rgb), 0.98);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-tool-list {
  gap: 0.6rem;
}

.hero-tool-list li {
  padding: 0.46rem 0.8rem;
  border: 1px solid rgba(var(--light-rgb), 0.12);
  border-radius: 999px;
  background: rgba(var(--light-rgb), 0.04);
  color: rgba(var(--light-rgb), 0.84);
}

.experience-layout {
  --experience-section-gap: 0.85rem;
  --experience-meta-col: clamp(5.3rem, 6.2vw, 5.9rem);
  --experience-head-gap: clamp(0.8rem, 1.1vw, 1rem);
  --experience-row-gap: clamp(1.15rem, 1.8vw, 1.45rem);
  --experience-timeline-offset: clamp(1.35rem, 1.9vw, 1.7rem);
  position: relative;
  display: grid;
  grid-template-columns: minmax(18rem, 0.84fr) minmax(0, 1.16fr);
  gap: clamp(1.6rem, 2.3vw, 2.6rem);
  align-items: start;
}

.experience-aside {
  display: grid;
  gap: 1rem;
  align-self: start;
  padding-right: clamp(0.3rem, 0.8vw, 0.7rem);
}

.experience-current,
.experience-facet,
.approach-card {
  border-radius: 1.35rem;
}

.experience-current {
  display: grid;
  grid-template-columns: var(--experience-meta-col) minmax(0, 1fr);
  column-gap: var(--experience-head-gap);
  row-gap: var(--experience-section-gap);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.experience-head-grid {
  display: grid;
  grid-template-columns: var(--experience-meta-col) minmax(0, 1fr);
  column-gap: var(--experience-head-gap);
  align-items: start;
}

.experience-current-copy,
.experience-role-copy {
  display: grid;
  align-content: start;
  gap: 0.42rem;
  min-width: 0;
}

.experience-current h3,
.approach-card h3 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
}

.experience-current .detail-card-label,
.experience-facet .detail-card-label {
  margin: 0;
}

.experience-current .detail-card-label {
  grid-column: 1 / -1;
}

.experience-current .timeline-date {
  grid-column: 1;
  grid-row: 2;
  width: var(--experience-meta-col);
}

.experience-current-copy {
  grid-column: 1 / -1;
  grid-row: 3;
}

.experience-facet > p:not(.detail-card-label),
.approach-card p {
  margin: 0;
  color: var(--section-muted, var(--ink-soft));
}

.experience-facets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.65rem 2.2rem;
  align-items: start;
  margin-top: 0.6rem;
}

.experience-current-stack {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

.experience-facet {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 0.48rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.experience-facet .detail-card-label {
  color: var(--section-muted, var(--ink-soft));
  font-family: "Public Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.25;
  text-transform: uppercase;
}

.experience-facet > p:not(.detail-card-label) {
  font-size: 1rem;
  line-height: 1.65;
}

.experience-divider {
  display: none;
}

.experience-timeline-column {
  position: relative;
  display: grid;
  gap: var(--experience-section-gap);
  align-content: start;
  min-width: 0;
}

.experience-timeline-column::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0.35rem;
  left: 0;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(66, 53, 74, 0.14) 0%,
    rgba(66, 53, 74, 0.58) 18%,
    rgba(66, 53, 74, 0.62) 50%,
    rgba(66, 53, 74, 0.52) 82%,
    rgba(66, 53, 74, 0.14) 100%
  );
  box-shadow:
    1px 0 0 rgba(255, 255, 255, 0.38),
    0 0 0.7rem rgba(66, 53, 74, 0.08);
}

.experience-timeline-label {
  margin: 0;
  padding-left: var(--experience-timeline-offset);
}

.experience-timeline {
  position: relative;
  padding-left: var(--experience-timeline-offset);
  border-top: 0;
}

.experience-timeline::before {
  content: none;
}

.experience-timeline::after {
  content: none;
}

.experience-row {
  grid-template-columns: minmax(0, 1.22fr) minmax(16rem, 0.78fr);
  gap: var(--experience-row-gap);
  align-items: start;
}

.experience-row:first-child {
  padding-top: 0;
}

.experience-row > *,
.experience-row-head > * {
  min-width: 0;
}

.experience-row-head {
  min-width: 0;
}

.experience-row .timeline-date {
  padding-right: 0;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  line-height: 1.35;
}

.experience-tags,
.timeline-tags {
  margin-top: 0.9rem;
}

.tag-list.experience-tags {
  gap: 0.55rem;
  align-items: center;
  padding: 0;
}

.experience-current-stack .experience-tags {
  margin-top: 0;
}

.tag-list.experience-tags li {
  padding: 0.32rem 0.58rem;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  border-radius: 0.45rem;
  background: rgba(var(--light-rgb), 0.34);
  color: var(--section-muted, var(--ink-soft));
  font-size: 0.92rem;
  line-height: 1.35;
  box-shadow: inset 0 1px 0 rgba(var(--light-rgb), 0.48);
}

.timeline-tags li {
  background: rgba(var(--ink-rgb), 0.04);
}

.experience-row .timeline-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.experience-row .timeline-tags li {
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 1.35;
}

.timeline-summary-list {
  display: grid;
  gap: 0.45rem;
  padding-left: 1.05rem;
  line-height: 1.52;
}

.timeline-summary-list li::marker {
  color: var(--section-text, var(--ink));
  font-size: 0.82em;
}

.framework-section {
  background:
    linear-gradient(180deg, rgba(241, 238, 247, 0.96), rgba(216, 222, 234, 0.92));
}

.framework-shell {
  display: grid;
  grid-template-columns: minmax(15rem, 0.5fr) minmax(0, 1.5fr);
  gap: clamp(1.6rem, 3vw, 3.3rem);
  align-items: start;
}

.framework-intro {
  position: sticky;
  top: 6.8rem;
  display: grid;
  align-content: start;
  gap: 1rem;
  padding-top: 0.1rem;
}

.framework-kicker {
  align-items: center;
  gap: 0.8rem;
}

.framework-title-label {
  margin: 0;
  color: var(--section-muted, currentColor);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.framework-lead {
  max-width: 11ch;
  margin: 0;
  color: var(--section-text, var(--ink));
  font-family: "IBM Plex Sans", "Public Sans", sans-serif;
  font-size: clamp(2rem, 3.8vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-wrap: balance;
}

.framework-content {
  display: grid;
  gap: 1rem;
}

.framework-band {
  position: relative;
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.3rem, 2.3vw, 1.85rem);
  border: 1px solid rgba(33, 24, 32, 0.1);
  border-radius: 1.65rem;
  background:
    linear-gradient(180deg, rgba(241, 238, 247, 0.82), rgba(241, 238, 247, 0.58)),
    linear-gradient(135deg, rgba(133, 95, 192, 0.05), rgba(116, 137, 180, 0.025));
  box-shadow:
    inset 0 1px 0 rgba(241, 238, 247, 0.85),
    0 1.4rem 2.8rem rgba(46, 38, 60, 0.07);
  overflow: clip;
}

.framework-band::before {
  content: "";
  position: absolute;
  left: 1.35rem;
  right: 1.35rem;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(133, 95, 192, 0), rgba(133, 95, 192, 0.26), rgba(116, 137, 180, 0));
}

.framework-band-copy {
  display: grid;
  gap: 0.55rem;
  max-width: 40rem;
}

.framework-band-copy p,
.framework-band-copy h3 {
  margin: 0;
}

.framework-band-copy h3 {
  font-family: "IBM Plex Sans", "Public Sans", sans-serif;
  font-size: clamp(1.55rem, 2.35vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}

.framework-band-copy > p:last-child {
  color: var(--section-muted, var(--ink-soft));
  line-height: 1.72;
}

.framework-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.framework-pillar {
  display: grid;
  align-content: start;
  gap: 0.72rem;
  min-height: 100%;
  padding: 1.05rem 1rem 1.1rem;
  border: 1px solid rgba(33, 24, 32, 0.08);
  border-radius: 1.15rem;
  background:
    linear-gradient(180deg, rgba(241, 238, 247, 0.86), rgba(241, 238, 247, 0.62)),
    rgba(33, 24, 32, 0.015);
}

.framework-pillar-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.framework-pillar h4 {
  margin: 0;
  font-family: "IBM Plex Sans", "Public Sans", sans-serif;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.framework-pillar p {
  margin: 0;
  color: var(--section-muted, var(--ink-soft));
  line-height: 1.68;
}

.framework-principles {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.framework-principle {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.95rem;
  align-items: start;
  padding: 0.95rem 0;
  border-top: 1px solid rgba(33, 24, 32, 0.08);
}

.framework-principle:first-child {
  padding-top: 0;
  border-top: 0;
}

.framework-principle-index {
  color: var(--section-muted, var(--ink-soft));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-top: 0.22rem;
}

.framework-principle span:last-child {
  color: var(--section-text, var(--ink));
  line-height: 1.58;
}

.contact-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(19rem, 0.84fr);
  gap: clamp(2.2rem, 4vw, 5rem);
  align-items: start;
  flex: 1;
  min-height: 0;
  padding: 0;
}

.contact-shell .contact-copy {
  display: grid;
  align-content: start;
  gap: 1rem;
  max-width: 40rem;
}

.contact-shell .contact-copy h2 {
  max-width: none;
  font-size: clamp(4.4rem, 9vw, 7.5rem);
  line-height: 0.9;
}

.contact-summary {
  max-width: 29rem;
  margin: 0;
  font-size: clamp(1.04rem, 1.45vw, 1.18rem);
  line-height: 1.78;
  color: rgba(var(--light-rgb), 0.78);
}

.contact-link-list {
  position: relative;
  display: grid;
  justify-items: stretch;
  align-content: center;
  gap: 1rem;
  width: min(100%, 23rem);
  margin-left: auto;
}

.contact-link-list::before {
  content: "";
  position: absolute;
  inset: auto -1.8rem -2rem auto;
  width: clamp(8rem, 24vw, 13rem);
  height: clamp(8rem, 24vw, 13rem);
  border-radius: 2rem;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.18), transparent 70%);
  filter: blur(4px);
  pointer-events: none;
}

.contact-link-list a {
  position: relative;
  display: grid;
  gap: 0.55rem;
  width: 100%;
  padding: 1.2rem 1.35rem 1.3rem;
  border: 1px solid rgba(var(--light-rgb), 0.14);
  border-radius: 1.45rem;
  background:
    linear-gradient(180deg, rgba(var(--light-rgb), 0.12), rgba(var(--light-rgb), 0.04)),
    rgba(var(--bg-rgb), 0.24);
  box-shadow:
    0 1.45rem 3rem rgba(7, 5, 11, 0.24),
    inset 0 1px 0 rgba(var(--light-rgb), 0.08);
  backdrop-filter: blur(18px);
  overflow: hidden;
  transition:
    transform 280ms var(--ease-fluid),
    border-color 280ms var(--ease-fluid),
    background 280ms var(--ease-fluid),
    box-shadow 280ms var(--ease-fluid);
}

.contact-link-list a::before {
  content: "Canal directo";
  color: rgba(var(--light-rgb), 0.56);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.contact-link-list a:hover,
.contact-link-list a:focus-visible {
  transform: translateY(-0.28rem);
  border-color: rgba(var(--light-rgb), 0.28);
  background:
    linear-gradient(180deg, rgba(var(--light-rgb), 0.16), rgba(var(--light-rgb), 0.06)),
    rgba(var(--bg-rgb), 0.2);
  box-shadow:
    0 1.85rem 3.6rem rgba(7, 5, 11, 0.3),
    inset 0 1px 0 rgba(var(--light-rgb), 0.12);
}

.contact-link-label {
  display: block;
  max-width: 100%;
  font-family: "IBM Plex Sans", "Public Sans", sans-serif;
  font-size: clamp(1.55rem, 2.5vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.contact-link-label .link-flip {
  display: inline-grid;
  width: 100%;
  line-height: 0.98;
}

.contact-footer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  min-height: 4.5rem;
  margin-top: auto;
  border-top: 1px solid var(--line-light);
  color: var(--light);
  font-size: 0.84rem;
}

.contact-footer p {
  margin: 0;
}

/* Standard top/bottom spacing for the main sections below the hero. */
.editorial-section {
  padding: clamp(5.5rem, 8vw, 6.6rem) 0 4.2rem;
  scroll-margin-top: 6rem;
}

.section-head {
  align-items: start;
  margin-bottom: 2.4rem;
}

.section-head--compact {
  grid-template-columns: 1fr;
  margin-bottom: 1.4rem;
}

/* Heading sizes for the main section titles. */
.section-title-group h2,
.split-intro h2,
.faq-intro h2 {
  font-size: clamp(2.2rem, 4.4vw, 4.6rem);
}

#experiencia .section-title-group h2 {
  max-width: 33rem;
}

.contact-copy h2 {
  max-width: 12ch;
  font-size: clamp(2.2rem, 4.2vw, 4.3rem);
}

.chat-intro h2 {
  max-width: 12ch;
  font-size: clamp(1.9rem, 3vw, 2.9rem);
}

/* Keep intro paragraphs from getting too wide, which makes them easier to read. */
.section-intro,
.split-lead {
  margin: 0;
  max-width: 34rem;
}

/* Three-card grid used for compact details, summaries, or capability lists. */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.detail-card {
  padding: 1.25rem;
  border: 1px solid var(--section-line, var(--line-dark));
  background: transparent;
}

/* Reusable small uppercase label style inside cards and subsections. */
.detail-card-label,
.subsection-label {
  margin: 0 0 0.95rem;
  color: var(--section-muted, currentColor);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Rounded tag pills for tools, skills, or topic labels. */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag-list li {
  padding: 0.42rem 0.72rem;
  border: 1px solid var(--section-line, var(--line-dark));
  border-radius: 999px;
  background: transparent;
  color: var(--section-muted, currentColor);
}

/* Default paragraph styling inside cards and smaller text blocks. */
.detail-card > p:not(.detail-card-label),
.subsection-copy {
  margin: 0;
  color: var(--section-muted, var(--ink-soft));
}

.detail-card-copy p {
  margin: 0 0 1rem;
}

.detail-list {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--section-muted, var(--ink-soft));
}

.detail-list li strong {
  color: var(--section-text, var(--ink));
}

/* Give these lists the same top divider so they all begin with a clean visual boundary. */
.pillar-list,
.timeline-list,
.faq-list {
  border-top: 1px solid var(--section-line, currentColor);
}

/* Each row has three parts:
   1. a small code/date column
   2. the main heading
   3. supporting description text */
.pillar-row,
.timeline-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(11rem, 18rem) 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--section-line, currentColor);
}

.pillar-row h3,
.timeline-row h3 {
  margin: 0;
  font-size: 1.28rem;
  letter-spacing: -0.04em;
}

.pillar-row p,
.timeline-row p,
.timeline-summary-list {
  margin: 0;
}

.timeline-row.experience-row {
  grid-template-columns: minmax(0, 1.22fr) minmax(16rem, 0.78fr);
  gap: var(--experience-row-gap);
}

/* Case cards:
   every project shares the same structure and the desktop version can pin
   the viewport while vertical scroll translates the cards horizontally. */
.case-section {
  --case-sticky-top: 0px;
  --case-panel-height: auto;
  --case-track-progress: 0px;
  --case-shell-bleed: clamp(1rem, 5vw, 4rem);
}

.case-scroll-shell,
.case-scroll-sticky,
.case-scroll-viewport {
  min-width: 0;
}

.case-scroll-shell {
  position: relative;
}

.case-scroll-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem;
  margin-bottom: 1.4rem;
  padding-bottom: 1.25rem;
}

.case-scroll-head .section-title-group {
  max-width: 40rem;
}

.case-scroll-head .section-title-group h2 {
  max-width: 12ch;
}

.case-scroll-head--static {
  grid-template-columns: 1fr;
  padding-bottom: 0;
}

.case-progress {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  margin: 0;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(var(--light-rgb), 0.12);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(var(--light-rgb), 0.06), rgba(var(--light-rgb), 0.03));
  color: rgba(var(--light-rgb), 0.68);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.case-progress-current {
  color: rgba(var(--light-rgb), 0.98);
}

.case-progress-divider,
.case-progress-total {
  color: rgba(var(--light-rgb), 0.54);
}

.case-card-head p,
.timeline-company {
  margin: 0;
  color: var(--section-muted, var(--light));
}

.case-marker {
  white-space: nowrap;
}

.case-card {
  display: grid;
  align-content: start;
  gap: 1.1rem;
  min-width: 0;
  padding: 1.35rem;
  border: 1px solid rgba(var(--light-rgb), 0.12);
  border-radius: 1.55rem;
  background:
    linear-gradient(180deg, rgba(var(--light-rgb), 0.07), rgba(var(--light-rgb), 0.03)),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-warm-rgb), 0.05));
  box-shadow: inset 0 0 0 1px rgba(var(--light-rgb), 0.03);
}

.case-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}

.case-card-summary {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
}

.case-card-sector {
  margin: 0;
  max-width: 42ch;
  color: rgba(var(--light-rgb), 0.72);
  font-size: clamp(0.98rem, 1.2vw, 1.12rem);
  line-height: 1.45;
}

.case-card h3 {
  max-width: 18ch;
  font-size: clamp(1.95rem, 3.8vw, 4rem);
}

.case-card-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.case-detail {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(var(--light-rgb), 0.12);
}

.case-detail-label {
  margin: 0;
  color: var(--section-muted, var(--light-soft));
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 700;
}

.case-detail p:last-child {
  margin: 0;
  color: rgba(var(--light-rgb), 0.92);
}

.case-card-stack {
  margin: 0;
}

.case-card-stack li {
  background: rgba(var(--light-rgb), 0.04);
}

.case-card--fallback {
  gap: 1.2rem;
}

.case-project-list {
  display: grid;
  gap: 1.35rem;
}

.case-section[data-case-scroll-ready="true"] .case-scroll-sticky {
  position: sticky;
  top: var(--case-sticky-top);
}

.case-section[data-case-scroll-ready="true"] .case-scroll-head {
  padding-inline: var(--case-shell-bleed);
}

.case-section[data-case-scroll-ready="true"] .case-scroll-shell {
  width: calc(100% + (var(--case-shell-bleed) * 2));
  margin-inline: calc(var(--case-shell-bleed) * -1);
}

.case-section[data-case-scroll-ready="true"] .case-scroll-viewport {
  min-width: 0;
  height: var(--case-panel-height);
  width: calc(100% - (var(--case-shell-bleed) * 2));
  margin-inline: auto;
  overflow: clip;
}

.hero-scan-shell {
  position: relative;
}

.hero-band[data-hero-scan-ready="true"] .hero-scan-shell {
  height: var(--hero-scan-shell-height);
}

.hero-band[data-hero-scan-ready="true"] .hero-layout {
  position: sticky;
  top: var(--hero-scan-top);
}

.case-section[data-case-scroll-ready="true"] .case-project-list {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
}

.case-card--project {
  --case-card-layer-a: rgb(var(--surface-light-rgb) / 0.16);
  --case-card-layer-b: rgb(var(--accent-rgb) / 0.18);
  --case-card-border: rgb(var(--light-rgb) / 0.18);
  gap: 1.45rem;
  padding: 1.6rem 1.7rem 1.7rem;
  border-color: var(--case-card-border);
  background:
    radial-gradient(circle at top right, rgb(var(--light-rgb) / 0.14), transparent 40%),
    linear-gradient(180deg, rgb(var(--surface-light-rgb) / 0.16), rgb(var(--light-rgb) / 0.05)),
    linear-gradient(135deg, var(--case-card-layer-a), var(--case-card-layer-b));
  box-shadow:
    0 1.45rem 3.7rem rgba(7, 5, 11, 0.22),
    inset 0 0 0 1px rgba(var(--light-rgb), 0.05);
}

.case-card--project > * {
  position: relative;
  z-index: 1;
}

.case-card--project .case-card-summary {
  align-content: start;
  gap: 1.05rem;
}

.case-card--project h3 {
  max-width: 22ch;
  font-size: clamp(1.65rem, 2.35vw, 2.85rem);
  line-height: 1.02;
}

.case-card--project .case-card-sector {
  max-width: 36ch;
  line-height: 1.5;
}

.case-card--project .case-card-stack {
  margin-top: 0.65rem;
  gap: 0.65rem;
}

.case-card--project .case-card-body {
  gap: 1rem;
}

.case-card--project .case-detail {
  min-height: 0;
}

.case-card--project .case-detail p:last-child {
  max-width: 34ch;
}

.case-section[data-case-scroll-ready="true"] .case-card--project {
  position: absolute;
  inset: 0 0 clamp(3.25rem, 6vh, 4.75rem) 0;
  grid-template-rows: auto auto minmax(0, 1fr);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(108%, 0, 0);
  filter: saturate(0.94) brightness(0.92);
  will-change: transform, opacity, filter;
  transition:
    transform 820ms cubic-bezier(0.24, 0.78, 0.2, 1),
    opacity 260ms linear,
    filter 420ms cubic-bezier(0.2, 0.78, 0.16, 1),
    box-shadow 420ms cubic-bezier(0.2, 0.78, 0.16, 1),
    border-color 420ms cubic-bezier(0.2, 0.78, 0.16, 1);
}

.case-section[data-case-scroll-ready="true"] .case-card--project:nth-child(4n + 1) {
  --case-card-layer-a: rgb(var(--surface-light-rgb) / 0.14);
  --case-card-layer-b: rgb(var(--accent-rgb) / 0.24);
  --case-card-border: rgb(var(--accent-rgb) / 0.24);
}

.case-section[data-case-scroll-ready="true"] .case-card--project:nth-child(4n + 2) {
  --case-card-layer-a: rgb(var(--surface-light-rgb) / 0.13);
  --case-card-layer-b: rgb(var(--accent-warm-rgb) / 0.26);
  --case-card-border: rgb(var(--accent-warm-rgb) / 0.24);
}

.case-section[data-case-scroll-ready="true"] .case-card--project:nth-child(4n + 3) {
  --case-card-layer-a: rgb(var(--surface-light-rgb) / 0.2);
  --case-card-layer-b: rgb(var(--accent-warm-rgb) / 0.12);
  --case-card-border: rgb(var(--surface-light-rgb) / 0.24);
}

.case-section[data-case-scroll-ready="true"] .case-card--project:nth-child(4n + 4) {
  --case-card-layer-a: rgb(var(--surface-light-rgb) / 0.16);
  --case-card-layer-b: rgb(var(--accent-rgb) / 0.16);
  --case-card-border: rgb(var(--light-rgb) / 0.22);
}

.case-section[data-case-scroll-ready="true"] .case-card--project .case-card-head,
.case-section[data-case-scroll-ready="true"] .case-card--project .case-card-summary,
.case-section[data-case-scroll-ready="true"] .case-card--project .case-card-body {
  transition:
    opacity 320ms cubic-bezier(0.24, 0.8, 0.2, 1),
    transform 520ms cubic-bezier(0.24, 0.8, 0.2, 1),
    filter 320ms cubic-bezier(0.24, 0.8, 0.2, 1);
}

.case-section[data-case-scroll-ready="true"] .case-card--project .case-card-head,
.case-section[data-case-scroll-ready="true"] .case-card--project .case-card-body {
  opacity: 0;
  transform: translateY(0.4rem);
}

.case-section[data-case-scroll-ready="true"] .case-card--project .case-card-summary {
  opacity: 0;
  transform: translateY(0.3rem);
}

.case-section[data-case-scroll-ready="true"] .case-card--project h3 {
  color: rgba(var(--light-rgb), 0.74);
  transition:
    color 620ms cubic-bezier(0.22, 0.8, 0.2, 1),
    text-shadow 620ms cubic-bezier(0.22, 0.8, 0.2, 1);
}

.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="active"] {
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  filter: none;
  border-color: var(--case-card-border);
  box-shadow:
    0 1.7rem 4.4rem rgba(7, 5, 11, 0.36),
    inset 0 0 0 1px rgba(var(--light-rgb), 0.08);
}

.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="active"] .case-card-head,
.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="active"] .case-card-summary,
.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="active"] .case-card-body {
  opacity: 1;
  transform: none;
  filter: none;
}

.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="active"] h3 {
  color: rgba(var(--light-rgb), 0.99);
  text-shadow: 0 0 1rem rgba(var(--light-rgb), 0.08);
}

.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="previous"] {
  z-index: 2;
  opacity: 1;
  pointer-events: none;
  transform: translate3d(-108%, 0, 0);
  filter: saturate(0.94) brightness(0.9);
  box-shadow:
    0 1rem 2.4rem rgba(7, 5, 11, 0.18),
    inset 0 0 0 1px rgba(var(--light-rgb), 0.04);
}

.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="previous"] .case-card-head,
.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="previous"] .case-card-summary,
.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="previous"] .case-card-body {
  opacity: 1;
  transform: none;
}

.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="next"] {
  z-index: 2;
  opacity: 1;
  pointer-events: none;
  transform: translate3d(108%, 0, 0);
  filter: saturate(0.96) brightness(0.94);
  box-shadow:
    0 1rem 2.6rem rgba(7, 5, 11, 0.16),
    inset 0 0 0 1px rgba(var(--light-rgb), 0.04);
}

.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="next"] .case-card-head,
.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="next"] .case-card-summary,
.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="next"] .case-card-body {
  opacity: 1;
  transform: none;
}

.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="future"] {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(118%, 0, 0);
  filter: blur(4px) saturate(0.8) brightness(0.8);
}

.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="future"] .case-card-head,
.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="future"] .case-card-summary,
.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="future"] .case-card-body {
  opacity: 0;
  transform: translateY(0.4rem);
}

.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="past"] {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-118%, 0, 0);
  filter: blur(4px) saturate(0.8) brightness(0.78);
}

.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="past"] .case-card-head,
.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="past"] .case-card-summary,
.case-section[data-case-scroll-ready="true"] .case-card--project[data-case-state="past"] .case-card-body {
  opacity: 0;
  transform: translateY(0.2rem);
}

.case-section[data-case-scroll-ready="true"] .case-card--project .case-card-body {
  min-height: 0;
  align-content: start;
}

/* Inside split sections, these stacked groups keep key statements separate from extra explanation. */
.split-copy {
  display: grid;
  gap: 1.4rem;
}

.statement-group {
  display: grid;
  gap: 0.85rem;
}

.statement-list li {
  color: var(--section-muted, currentColor);
}

.subsection-copy {
  max-width: 34rem;
}

/* Intro layout with:
   - a narrow column for the label/code
   - a wider column for the heading and intro text */
.split-intro {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "code label"
    "title title";
  gap: 0.65rem 0.85rem;
  align-items: start;
}

.split-intro > .section-code {
  grid-area: code;
}

.split-intro > div {
  display: contents;
}

.split-intro > div > .section-label {
  grid-area: label;
  align-self: center;
}

.split-intro > div > h2,
.split-intro > h2 {
  grid-area: title;
}

.split-lead {
  color: var(--section-muted, var(--ink-soft));
}

.question-list {
  display: grid;
  gap: 0.7rem;
}

.question-list p {
  margin: 0;
  padding-top: 0.82rem;
  border-top: 1px solid var(--section-line, var(--line-dark));
  color: var(--section-muted, var(--ink));
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
}

/* The FAQ section is split into an intro column and the accordion list itself. */
.faq-block {
  margin-top: 2.8rem;
}

.faq-intro,
.faq-list {
  min-width: 0;
}

/* Same min-width fix again:
   allow nested grid children to shrink and wrap instead of forcing overflow. */
.case-card-body > *,
.pillar-row > *,
.timeline-row > *,
.contact-layout > *,
.split-section > *,
.faq-block > * {
  min-width: 0;
}

/* Each FAQ item uses the native details/summary pattern as an accordion row. */
.faq-item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--section-line, var(--line-dark));
}

.faq-item summary {
  /* Hide the browser's default marker so the summary looks like the site's own text styling. */
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-answer {
  padding-top: 0.85rem;
}

.faq-answer p,
.faq-answer ul,
.faq-answer ol {
  margin: 0 0 0.85rem;
}

.faq-answer ul,
.faq-answer ol {
  padding-left: 1.2rem;
}

/* Contact area uses the same two-column structure, aligned from the top. */
.contact-layout {
  align-items: start;
}

.contact-copy {
  display: grid;
  gap: 1rem;
}

.contact-copy p,
.chat-intro p {
  color: var(--section-muted, var(--light));
}

/* The chat promo column is separated from the contact copy with left padding and a left border. */
.chat-stage {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding-left: 1.5rem;
  border-left: 1px solid var(--section-line, var(--line-light));
}

.chat-intro {
  display: grid;
  gap: 0.7rem;
}

.chat-intro p,
.chat-stage-copy {
  margin: 0;
}

.chat-stage-copy {
  color: var(--section-muted, var(--light));
  max-width: 32rem;
}

/* =========================
  Contact and chat UI
  Button styles, floating widget behavior, and chat message/form layouts.
  ========================= */

.chat-stage-button,
.chat-widget-toggle,
.chat-widget-icon-button {
  border: 1px solid var(--section-line, rgba(var(--light-rgb), 0.16));
  background: transparent;
  color: inherit;
  font: inherit;
}

.chat-stage-button {
  width: fit-content;
  padding: 0.9rem 1.1rem;
  border-radius: 999px;
  background: rgba(var(--light-rgb), 0.05);
  color: var(--section-text, var(--light));
  cursor: pointer;
  transition:
    transform 220ms var(--ease-fluid),
    background 220ms var(--ease-fluid),
    border-color 220ms var(--ease-fluid);
}

.chat-stage-button:hover,
.chat-stage-button:focus-visible {
  transform: translateY(-1px);
  background: rgba(var(--light-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.48);
}

.chat-widget {
  --widget-collapsed-width: min(16.8rem, calc(100vw - 2rem));
  --widget-expanded-width: min(28rem, calc(100vw - 2rem));
  --widget-reading-width: min(58rem, calc(100vw - 4rem));
  position: fixed;
  right: 2rem;
  bottom: 1.5rem;
  z-index: 30;
  display: grid;
  justify-items: end;
  align-content: end;
  gap: 0.9rem;
  width: var(--widget-collapsed-width);
  max-height: calc(100svh - 3rem);
  color: var(--widget-text);
  pointer-events: none;
  transition: width 220ms var(--ease-fluid);
}

.chat-widget[data-open="true"] {
  width: var(--widget-expanded-width);
  gap: 0;
}

.chat-widget[data-open="true"][data-expanded="true"] {
  top: auto;
  right: 2rem;
  bottom: 2rem;
  display: block;
  width: min(48rem, calc(100vw - 4rem));
  height: min(43rem, calc(100svh - 4rem));
  max-height: calc(100svh - 4rem);
  align-content: stretch;
}

.chat-widget[data-surface="dark"] {
  --widget-text: #211820;
  --widget-muted: #6a6277;
  --widget-panel-bg: linear-gradient(180deg, rgba(244, 241, 249, 0.98), rgba(235, 230, 243, 0.96));
  --widget-panel-border: rgba(var(--ink-rgb), 0.12);
  --widget-panel-shadow:
    0 1.5rem 3.4rem rgba(7, 5, 11, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.42);
  --widget-hero-bg:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.16), transparent 32%),
    linear-gradient(135deg, #3d314f 0%, #855fc0 56%, #7489b4 100%);
  --widget-hero-text: #f8f6fb;
  --widget-hero-meta: rgba(248, 246, 251, 0.82);
  --widget-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 244, 251, 0.92));
  --widget-card-border: rgba(var(--ink-rgb), 0.08);
  --widget-card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    0 0.7rem 1.55rem rgba(var(--ink-rgb), 0.08);
  --widget-assistant-bg: rgba(238, 234, 245, 0.9);
  --widget-assistant-text: #261d2d;
  --widget-message-border: rgba(var(--ink-rgb), 0.08);
  --widget-user-bg: linear-gradient(135deg, #855fc0, #7489b4);
  --widget-user-text: #f8f6fb;
  --widget-user-border: rgba(var(--accent-rgb), 0.42);
  --widget-error-bg: linear-gradient(135deg, rgba(201, 91, 126, 0.16), rgba(244, 155, 111, 0.14));
  --widget-error-text: #7e324c;
  --widget-error-border: rgba(201, 91, 126, 0.24);
  --widget-meta-bg: rgba(var(--ink-rgb), 0.05);
  --widget-meta-text: #6d6679;
  --widget-input-bg: rgba(255, 255, 255, 0.96);
  --widget-input-border: rgba(var(--ink-rgb), 0.12);
  --widget-input-placeholder: #7d758a;
  --widget-send-bg: linear-gradient(135deg, #855fc0, #7489b4);
  --widget-send-bg-hover: linear-gradient(135deg, #936ad0, #7d91bc);
  --widget-send-ink: #f8f6fb;
  --widget-close-bg: rgba(18, 13, 31, 0.16);
  --widget-close-bg-hover: rgba(18, 13, 31, 0.24);
  --widget-toggle-bg: linear-gradient(180deg, rgba(247, 244, 251, 0.96), rgba(236, 231, 244, 0.94));
  --widget-toggle-bg-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 239, 248, 0.95));
  --widget-toggle-border: rgba(var(--ink-rgb), 0.1);
  --widget-toggle-shadow:
    0 1rem 2.3rem rgba(7, 5, 11, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.48);
  --widget-toggle-text: #211820;
  --widget-toggle-muted: #6a6277;
  --widget-toggle-icon-bg: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-warm-rgb), 0.14));
  --widget-toggle-icon-border: rgba(var(--accent-rgb), 0.1);
  --widget-toggle-icon-ink: #6e50a8;
  --typing-dot: rgba(var(--accent-rgb), 0.62);
}

.chat-widget[data-surface="light"] {
  --widget-text: #f1eef7;
  --widget-muted: #cdc6d9;
  --widget-panel-bg: linear-gradient(180deg, rgba(20, 13, 30, 0.98), rgba(32, 23, 44, 0.96));
  --widget-panel-border: rgba(var(--light-rgb), 0.12);
  --widget-panel-shadow:
    0 1.8rem 4rem rgba(7, 5, 11, 0.36),
    0 0 0 1px rgba(var(--light-rgb), 0.06);
  --widget-hero-bg:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.14), transparent 34%),
    linear-gradient(135deg, #312542 0%, #855fc0 56%, #5c709d 100%);
  --widget-hero-text: #f8f6fb;
  --widget-hero-meta: rgba(241, 238, 247, 0.78);
  --widget-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  --widget-card-border: rgba(var(--light-rgb), 0.12);
  --widget-card-shadow:
    inset 0 1px 0 rgba(var(--light-rgb), 0.05),
    0 0.8rem 1.7rem rgba(0, 0, 0, 0.18);
  --widget-assistant-bg: rgba(255, 255, 255, 0.08);
  --widget-assistant-text: #f1eef7;
  --widget-message-border: rgba(var(--light-rgb), 0.12);
  --widget-user-bg: linear-gradient(135deg, #855fc0, #7489b4);
  --widget-user-text: #f8f6fb;
  --widget-user-border: rgba(var(--light-rgb), 0.16);
  --widget-error-bg: linear-gradient(135deg, rgba(201, 91, 126, 0.22), rgba(244, 155, 111, 0.18));
  --widget-error-text: #ffd6e2;
  --widget-error-border: rgba(201, 91, 126, 0.28);
  --widget-meta-bg: rgba(var(--light-rgb), 0.09);
  --widget-meta-text: #cdc6d9;
  --widget-input-bg: rgba(var(--light-rgb), 0.08);
  --widget-input-border: rgba(var(--light-rgb), 0.16);
  --widget-input-placeholder: #bcb4c9;
  --widget-send-bg: linear-gradient(135deg, #855fc0, #7489b4);
  --widget-send-bg-hover: linear-gradient(135deg, #956dd2, #8196c0);
  --widget-send-ink: #f8f6fb;
  --widget-close-bg: rgba(var(--light-rgb), 0.1);
  --widget-close-bg-hover: rgba(var(--light-rgb), 0.16);
  --widget-toggle-bg: linear-gradient(180deg, rgba(20, 13, 30, 0.95), rgba(32, 23, 44, 0.93));
  --widget-toggle-bg-hover: linear-gradient(180deg, rgba(27, 18, 39, 0.98), rgba(38, 28, 51, 0.96));
  --widget-toggle-border: rgba(var(--light-rgb), 0.1);
  --widget-toggle-shadow:
    0 1.15rem 2.7rem rgba(7, 5, 11, 0.32),
    0 0 0 1px rgba(var(--light-rgb), 0.06);
  --widget-toggle-text: #f1eef7;
  --widget-toggle-muted: #cdc6d9;
  --widget-toggle-icon-bg: rgba(var(--light-rgb), 0.08);
  --widget-toggle-icon-border: rgba(var(--light-rgb), 0.08);
  --widget-toggle-icon-ink: #f1eef7;
  --typing-dot: rgba(var(--light-rgb), 0.76);
}

.chat-widget > * {
  pointer-events: auto;
}

.chat-widget-panel {
  width: 100%;
  height: min(39rem, calc(100svh - 3rem));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.72rem;
  max-height: 100%;
  padding: 0.72rem;
  border: 1px solid var(--widget-panel-border);
  border-radius: 1.8rem;
  background: var(--widget-panel-bg);
  box-shadow: var(--widget-panel-shadow);
  backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem) scale(0.98);
  transform-origin: bottom right;
  transition:
    opacity 220ms var(--ease-fluid),
    transform 220ms var(--ease-fluid),
    visibility 220ms step-end;
  color: var(--widget-text);
  overflow: hidden;
}

.chat-widget[data-expanded="true"] .chat-widget-panel {
  height: 100%;
}

.chat-widget[data-open="true"] .chat-widget-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    opacity 220ms var(--ease-fluid),
    transform 220ms var(--ease-fluid),
    visibility 0ms;
}

.chat-widget-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.92rem 0.95rem;
  border-radius: 1.25rem;
  background: var(--widget-hero-bg);
  color: var(--widget-hero-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1rem 2rem rgba(30, 22, 42, 0.18);
}

.chat-widget-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.72rem;
  align-items: center;
  min-width: 0;
}

.chat-widget-avatar-shell {
  position: relative;
  width: 3.4rem;
  height: 3.4rem;
}

.chat-widget-avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
  transform: scale(1.14);
  transform-origin: center 18%;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.56);
  box-shadow: 0 0.5rem 1rem rgba(18, 13, 31, 0.22);
}

.chat-widget-kicker,
.chat-widget-toggle-label,
.chat-message-role {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.chat-widget-kicker {
  color: var(--widget-hero-meta);
}

.chat-widget .chat-intro {
  display: grid;
  gap: 0.08rem;
}

.chat-widget .chat-intro h2 {
  max-width: none;
  font-size: clamp(1.12rem, 2vw, 1.24rem);
  line-height: 1.02;
  color: var(--widget-hero-text);
}

.chat-widget-status {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin: 0;
  color: var(--widget-hero-meta);
  font-size: 0.76rem;
  line-height: 1.3;
}

.chat-widget-icon-button {
  width: 2.15rem;
  height: 2.15rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.18);
  background: var(--widget-close-bg);
  color: rgba(255, 255, 255, 0.96);
  cursor: pointer;
  transition:
    transform 220ms var(--ease-fluid),
    background 220ms var(--ease-fluid),
    border-color 220ms var(--ease-fluid);
}

.chat-widget-icon-button svg {
  grid-area: 1 / 1;
  width: 1rem;
  height: 1rem;
}

.chat-widget-expand-close {
  opacity: 0;
}

.chat-widget[data-expanded="true"] .chat-widget-expand-open {
  opacity: 0;
}

.chat-widget[data-expanded="true"] .chat-widget-expand-close {
  opacity: 1;
}

.chat-widget-close span {
  font-size: 1.18rem;
  line-height: 1;
}

.chat-widget-icon-button:hover,
.chat-widget-icon-button:focus-visible {
  transform: translateY(-1px);
  background: var(--widget-close-bg-hover);
  border-color: rgba(255, 255, 255, 0.34);
}

.chat-widget-header-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.chat-widget-mode-action,
.chat-widget-fit-link,
.chat-template-button,
.chat-fit-followup {
  border: 1px solid var(--widget-input-border);
  background: rgba(var(--light-rgb), 0.08);
  color: var(--widget-text);
  transition:
    transform 220ms var(--ease-fluid),
    border-color 220ms var(--ease-fluid),
    background 220ms var(--ease-fluid),
    opacity 220ms var(--ease-fluid);
}

.chat-widget-fit-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.15rem;
  padding: 0.55rem 0.78rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--widget-hero-text);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.chat-widget-mode-action {
  min-height: 2.15rem;
  padding: 0.56rem 0.82rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
}

.chat-widget-mode-action[aria-pressed="true"] {
  border-color: rgba(var(--accent-rgb), 0.34);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-warm-rgb), 0.16));
  color: var(--widget-text);
}

.chat-widget-mode-action:hover,
.chat-widget-mode-action:focus-visible,
.chat-widget-fit-link:hover,
.chat-widget-fit-link:focus-visible,
.chat-template-button:hover,
.chat-template-button:focus-visible,
.chat-fit-followup:hover,
.chat-fit-followup:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.34);
}

.chat-widget-mode-action:disabled,
.chat-template-button:disabled,
.chat-fit-followup:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

.chat-surface,
.chat-compose {
  display: grid;
  min-height: 0;
  padding: 0.78rem;
  border: 1px solid var(--widget-card-border);
  border-radius: 1.35rem;
  background: var(--widget-card-bg);
  box-shadow: var(--widget-card-shadow);
}

.chat-compose {
  gap: 0.7rem;
}

.chat-surface--conversation {
  min-height: 0;
}

.chat-widget .chat-messages {
  max-height: none;
  min-height: 0;
  height: 100%;
  margin: 0;
  display: grid;
  gap: 0.7rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.06rem 0.2rem 0.06rem 0.05rem;
  align-content: start;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.3) transparent;
}

.chat-widget .chat-messages[data-empty="true"] {
  display: grid;
  align-content: end;
}

.chat-widget .chat-messages::-webkit-scrollbar {
  width: 0.4rem;
}

.chat-widget .chat-messages::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.24);
}

.chat-widget .chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-form {
  display: grid;
  gap: 0;
  margin: 0;
}

.chat-widget .chat-form label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.chat-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}

.chat-context-label {
  flex: 1 1 auto;
  margin: 0;
  color: var(--widget-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.chat-template-button,
.chat-fit-followup {
  flex-shrink: 0;
  min-height: 2.2rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.chat-template-button[hidden] {
  display: none;
}

.chat-compose-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: end;
}

.chat-form textarea::placeholder {
  color: var(--widget-input-placeholder);
}

.chat-widget .chat-form textarea {
  width: 100%;
  min-height: 3.05rem;
  max-height: 13.75rem;
  padding: 0.82rem 1rem;
  border: 1px solid var(--widget-input-border);
  border-radius: 1.15rem;
  background: var(--widget-input-bg);
  color: var(--widget-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  resize: none;
  transition:
    border-color 220ms var(--ease-fluid),
    box-shadow 220ms var(--ease-fluid),
    transform 220ms var(--ease-fluid);
}

.chat-widget .chat-form textarea:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 4px rgba(var(--accent-rgb), 0.1);
}

.chat-widget .chat-form textarea:disabled {
  opacity: 0.72;
}

.chat-widget .chat-form button {
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--widget-send-bg);
  color: var(--widget-send-ink);
  cursor: pointer;
  box-shadow: 0 0.8rem 1.7rem rgba(var(--accent-rgb), 0.24);
  transition:
    transform 220ms var(--ease-fluid),
    box-shadow 220ms var(--ease-fluid),
    background 220ms var(--ease-fluid),
    opacity 220ms var(--ease-fluid);
}

.chat-widget .chat-form button svg,
.chat-widget-toggle-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.chat-widget .chat-form button:hover,
.chat-widget .chat-form button:focus-visible {
  transform: translateY(-1px);
  background: var(--widget-send-bg-hover);
  box-shadow: 0 1rem 2rem rgba(var(--accent-rgb), 0.28);
}

.chat-widget .chat-form button::after {
  content: none;
}

.chat-widget .chat-form button:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

.chat-messages {
  display: grid;
  gap: 0.7rem;
}

.chat-message {
  width: min(92%, 22rem);
  display: grid;
  gap: 0.34rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--widget-message-border);
  border-radius: 1.18rem;
  background: var(--widget-assistant-bg);
  color: var(--widget-assistant-text);
  box-shadow: 0 0.55rem 1.15rem rgba(var(--ink-rgb), 0.07);
}

.chat-widget[data-expanded="true"] .chat-message {
  width: min(78%, 36rem);
}

.chat-message--assistant,
.chat-message--error {
  justify-self: start;
  border-top-left-radius: 0.42rem;
}

.chat-message--user {
  justify-self: end;
  background: var(--widget-user-bg);
  color: var(--widget-user-text);
  border-color: var(--widget-user-border);
  border-top-right-radius: 0.42rem;
}

.chat-message--error {
  background: var(--widget-error-bg);
  color: var(--widget-error-text);
  border-color: var(--widget-error-border);
}

.chat-message-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.chat-message-role {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: var(--widget-muted);
}

.chat-message--user .chat-message-role {
  color: rgba(248, 246, 251, 0.72);
}

.chat-message--error .chat-message-role {
  color: currentColor;
}

.chat-message-text {
  margin: 0;
  color: currentColor;
  font-size: 0.91rem;
  line-height: 1.48;
}

.chat-message-body {
  display: grid;
  gap: 0.5rem;
}

.chat-message--pending .chat-message-text {
  min-height: 1rem;
}

.chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.chat-typing span {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: var(--typing-dot);
  animation: chat-typing 1s infinite ease-in-out;
}

.chat-typing span:nth-child(2) {
  animation-delay: 120ms;
}

.chat-typing span:nth-child(3) {
  animation-delay: 240ms;
}

.chat-message--fit-card {
  width: 100%;
}

.chat-fit-analysis {
  display: grid;
  gap: 0.8rem;
  padding: 0.1rem 0;
}

.chat-fit-analysis[data-state="grounded"],
.chat-fit-analysis[data-state="pendiente"],
.chat-fit-analysis[data-state="no disponible"] {
  padding: 0;
}

.chat-fit-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.chat-fit-metric {
  display: grid;
  gap: 0.14rem;
  min-width: 7rem;
  padding: 0.56rem 0.7rem;
  border: 1px solid var(--widget-message-border);
  border-radius: 0.95rem;
  background: rgba(var(--ink-rgb), 0.03);
}

.chat-fit-metric span {
  color: var(--widget-muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chat-fit-metric strong {
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}

.chat-fit-summary {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.52;
}

.chat-fit-sections {
  display: grid;
  gap: 0.75rem;
}

.chat-fit-section {
  display: grid;
  gap: 0.42rem;
}

.chat-fit-section-title {
  margin: 0;
  color: var(--widget-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.chat-fit-list {
  display: grid;
  gap: 0.42rem;
  margin: 0;
  padding-left: 1.1rem;
}

.chat-fit-list li {
  font-size: 0.88rem;
  line-height: 1.45;
}

.chat-fit-evidence {
  display: grid;
  gap: 0.55rem;
}

.chat-fit-evidence-item {
  display: grid;
  gap: 0.22rem;
  padding: 0.68rem 0.78rem;
  border: 1px solid var(--widget-message-border);
  border-radius: 0.95rem;
  background: rgba(var(--ink-rgb), 0.03);
}

.chat-fit-evidence-item strong {
  font-size: 0.86rem;
  letter-spacing: -0.01em;
}

.chat-fit-evidence-item p,
.chat-fit-evidence-item span {
  margin: 0;
}

.chat-fit-evidence-item p {
  font-size: 0.84rem;
  line-height: 1.45;
}

.chat-fit-evidence-item span {
  color: var(--widget-muted);
  font-size: 0.73rem;
}

.chat-fit-followups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.chat-widget-toggle {
  width: var(--widget-collapsed-width);
  max-width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  align-items: center;
  padding: 0.64rem 0.78rem 0.64rem 0.72rem;
  border-radius: 1.35rem;
  border-color: var(--widget-toggle-border);
  background: var(--widget-toggle-bg);
  box-shadow: var(--widget-toggle-shadow);
  color: var(--widget-toggle-text);
  cursor: pointer;
  transition:
    transform 220ms var(--ease-fluid),
    background 220ms var(--ease-fluid),
    border-color 220ms var(--ease-fluid),
    box-shadow 220ms var(--ease-fluid),
    opacity 180ms var(--ease-fluid);
}

.chat-widget-toggle-avatar-shell {
  position: relative;
  width: 2.9rem;
  height: 2.9rem;
}

.chat-widget-toggle-avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
  transform: scale(1.1);
  transform-origin: center 18%;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 0.45rem 0.9rem rgba(var(--ink-rgb), 0.14);
}

.chat-widget[data-open="true"] .chat-widget-toggle {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  width: 0;
  height: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  box-shadow: none;
}

.chat-widget-toggle:hover,
.chat-widget-toggle:focus-visible {
  transform: translateY(-1px);
  background: var(--widget-toggle-bg-hover);
  border-color: rgba(var(--accent-rgb), 0.32);
  box-shadow:
    0 1.15rem 2.7rem rgba(7, 5, 11, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 0 6px rgba(var(--accent-rgb), 0.1);
}

.chat-widget-indicator {
  position: absolute;
  right: 0.08rem;
  bottom: 0.1rem;
  width: 0.74rem;
  height: 0.74rem;
  border: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-warm));
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5);
  animation: chat-pulse 2.4s infinite;
}

.chat-widget-toggle-copy {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  text-align: left;
}

.chat-widget-toggle-label {
  color: var(--widget-toggle-muted);
}

.chat-widget-toggle-copy strong {
  font-size: 0.92rem;
  letter-spacing: -0.02em;
}

.chat-widget-toggle-copy span {
  color: var(--widget-toggle-muted);
  font-size: 0.75rem;
}

/* =========================
   Dedicated vacancy-fit workspace
   ========================= */
.job-fit-page {
  min-height: calc(100svh - 4.7rem);
  padding: clamp(2rem, 6rem, 6rem) 0 3rem;
  background:
    linear-gradient(180deg, #171021 0%, #140d1e 42%, #111622 100%);
  color: var(--text-on-dark);
}

.job-fit-shell {
  display: grid;
  grid-template-columns: minmax(15rem, 0.34fr) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}

.job-fit-intro {
  position: sticky;
  top: 6.2rem;
  display: grid;
  gap: 1rem;
  min-width: 0;
  padding-top: 0.25rem;
}

.job-fit-intro h1,
.job-fit-panel h2 {
  margin: 0;
  font-family: "IBM Plex Sans", "Public Sans", sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.02;
}

.job-fit-intro h1 {
  max-width: 8ch;
  font-size: 4rem;
}

.job-fit-intro p {
  max-width: 28rem;
  margin: 0;
  color: rgba(var(--light-rgb), 0.78);
}

.job-fit-intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  align-items: center;
  padding-top: 0.3rem;
}

.job-fit-intro-actions a,
.job-fit-intro-actions button {
  display: inline-flex;
  align-items: center;
  min-height: 2.85rem;
  color: var(--text-on-dark);
  font-weight: 600;
}

.job-fit-intro-actions button {
  justify-content: center;
  padding: 0.72rem 1rem;
  border: 1px solid rgba(var(--light-rgb), 0.18);
  border-radius: 999px;
  background: rgba(var(--light-rgb), 0.06);
  cursor: pointer;
}

.job-fit-tool {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 1rem;
  min-height: min(43rem, calc(100svh - 8.4rem));
}

.job-fit-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: 1rem;
  border: 1px solid rgba(var(--light-rgb), 0.12);
  border-radius: 1.35rem;
  background:
    linear-gradient(180deg, rgba(241, 238, 247, 0.1), rgba(241, 238, 247, 0.055));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1.4rem 3rem rgba(7, 5, 11, 0.22);
  backdrop-filter: blur(18px);
}

.job-fit-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(var(--light-rgb), 0.1);
}

.job-fit-panel-head .detail-card-label {
  margin-bottom: 0.35rem;
  color: rgba(var(--light-rgb), 0.62);
}

.job-fit-panel h2 {
  color: var(--text-on-dark);
  font-size: 1.2rem;
}

.job-fit-form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.9rem;
  min-height: 0;
  margin: 0;
  padding-top: 0.9rem;
}

.job-fit-form label {
  color: rgba(var(--light-rgb), 0.72);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.job-fit-form textarea {
  width: 100%;
  min-height: 25rem;
  padding: 1rem;
  border: 1px solid rgba(var(--light-rgb), 0.14);
  border-radius: 1rem;
  background: rgba(var(--light-rgb), 0.08);
  color: var(--text-on-dark);
  resize: vertical;
  line-height: 1.55;
  outline: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.job-fit-form textarea::placeholder {
  color: rgba(var(--light-rgb), 0.5);
}

.job-fit-form textarea:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 4px rgba(var(--accent-rgb), 0.14);
}

.job-fit-form-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  align-items: center;
}

.job-fit-primary-action,
.job-fit-secondary-action,
.job-fit-followup {
  min-height: 2.6rem;
  border: 1px solid rgba(var(--light-rgb), 0.14);
  border-radius: 999px;
  color: var(--text-on-dark);
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 220ms var(--ease-fluid),
    border-color 220ms var(--ease-fluid),
    background 220ms var(--ease-fluid),
    opacity 220ms var(--ease-fluid);
}

.job-fit-primary-action {
  padding: 0.75rem 1.15rem;
  border-color: rgba(var(--accent-rgb), 0.45);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-warm-rgb), 0.9));
  color: #f8f6fb;
  box-shadow: 0 0.9rem 1.8rem rgba(var(--accent-rgb), 0.2);
}

.job-fit-secondary-action,
.job-fit-followup {
  padding: 0.62rem 0.9rem;
  background: rgba(var(--light-rgb), 0.075);
}

.job-fit-primary-action:hover,
.job-fit-primary-action:focus-visible,
.job-fit-secondary-action:hover,
.job-fit-secondary-action:focus-visible,
.job-fit-followup:hover,
.job-fit-followup:focus-visible,
.job-fit-intro-actions button:hover,
.job-fit-intro-actions button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.46);
}

.job-fit-primary-action:disabled,
.job-fit-secondary-action:disabled,
.job-fit-followup:disabled {
  opacity: 0.62;
  cursor: wait;
  transform: none;
}

.job-fit-result {
  min-height: 0;
  overflow-y: auto;
  padding-top: 0.9rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.32) transparent;
}

.job-fit-result::-webkit-scrollbar {
  width: 0.42rem;
}

.job-fit-result::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.28);
}

.job-fit-empty-state,
.job-fit-pending,
.job-fit-error {
  display: grid;
  align-content: center;
  min-height: 100%;
  gap: 0.7rem;
  padding: 1.2rem;
  border: 1px dashed rgba(var(--light-rgb), 0.16);
  border-radius: 1rem;
  color: rgba(var(--light-rgb), 0.72);
}

.job-fit-pending {
  justify-items: start;
}

.job-fit-error {
  border-color: rgba(201, 91, 126, 0.36);
  color: #ffd6e2;
  background: rgba(201, 91, 126, 0.08);
}

.job-fit-empty-state p,
.job-fit-pending p {
  margin: 0;
}

.job-fit-empty-kicker {
  color: var(--text-on-dark);
  font-family: "IBM Plex Sans", "Public Sans", sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
}

.job-fit-analysis {
  display: grid;
  gap: 1rem;
}

.job-fit-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.job-fit-metric,
.job-fit-result-section,
.job-fit-evidence-item {
  border: 1px solid rgba(var(--light-rgb), 0.12);
  border-radius: 1rem;
  background: rgba(var(--light-rgb), 0.07);
}

.job-fit-metric {
  display: grid;
  gap: 0.22rem;
  padding: 0.8rem 0.9rem;
}

.job-fit-metric span,
.job-fit-result-title {
  color: rgba(var(--light-rgb), 0.58);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.job-fit-metric strong {
  color: var(--text-on-dark);
  font-family: "IBM Plex Sans", "Public Sans", sans-serif;
  font-size: 1.24rem;
  font-weight: 600;
}

.job-fit-summary {
  margin: 0;
  padding: 0.95rem 1rem;
  border-left: 3px solid rgba(var(--accent-rgb), 0.72);
  color: rgba(var(--light-rgb), 0.86);
  background: rgba(var(--light-rgb), 0.055);
  border-radius: 0.9rem;
}

.job-fit-result-grid {
  display: grid;
  gap: 0.75rem;
}

.job-fit-result-section {
  display: grid;
  gap: 0.6rem;
  padding: 0.9rem;
}

.job-fit-result-title {
  margin: 0;
}

.job-fit-result-list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.1rem;
  color: rgba(var(--light-rgb), 0.84);
}

.job-fit-result-list li {
  line-height: 1.48;
}

.job-fit-evidence-list {
  display: grid;
  gap: 0.6rem;
}

.job-fit-evidence-item {
  display: grid;
  gap: 0.28rem;
  padding: 0.75rem 0.8rem;
  background: rgba(0, 0, 0, 0.08);
}

.job-fit-evidence-item strong {
  color: var(--text-on-dark);
}

.job-fit-evidence-item p,
.job-fit-evidence-item span {
  margin: 0;
}

.job-fit-evidence-item p {
  color: rgba(var(--light-rgb), 0.82);
  line-height: 1.45;
}

.job-fit-evidence-item span {
  color: rgba(var(--light-rgb), 0.56);
  font-size: 0.78rem;
}

.job-fit-followups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

/* Simplified job-fit surface: keep the page task-first and card-based. */
.job-fit-page {
  min-height: calc(100svh - 4.7rem);
  padding: clamp(1.2rem, 2.8vw, 2.4rem) 0;
  background: linear-gradient(180deg, #171021 0%, #101622 100%);
}

.job-fit-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.job-fit-intro {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: end;
  padding: clamp(0.4rem, 1.5vw, 0.9rem) 0 clamp(0.65rem, 2vw, 1.1rem);
  border-bottom: 1px solid rgba(var(--light-rgb), 0.16);
  color: var(--light);
}

.job-fit-intro-copy {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.job-fit-kicker {
  margin: 0;
  color: rgba(var(--light-rgb), 0.68);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.job-fit-intro h1 {
  max-width: none;
  margin: 0;
  color: var(--light);
  font-size: clamp(2.3rem, 6vw, 5.4rem);
  letter-spacing: 0;
  line-height: 0.92;
}

.job-fit-intro p {
  max-width: 50rem;
  color: rgba(var(--light-rgb), 0.72);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
}

.job-fit-intro-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0;
}

.job-fit-intro-actions a,
.job-fit-intro-actions button,
.job-fit-primary-action,
.job-fit-secondary-action,
.job-fit-followup {
  min-height: 2.55rem;
  border-radius: 999px;
  font-size: 0.88rem;
  line-height: 1;
}

.job-fit-intro-actions a,
.job-fit-intro-actions button {
  color: var(--light);
  white-space: nowrap;
}

.job-fit-intro-actions button {
  border-color: rgba(var(--light-rgb), 0.2);
  background: rgba(var(--light-rgb), 0.08);
  color: var(--light);
}

.job-fit-secondary-action,
.job-fit-followup {
  border-color: rgba(var(--ink-rgb), 0.12);
  background: rgba(var(--ink-rgb), 0.04);
  color: var(--text-on-light);
}

.job-fit-tool {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem;
  min-height: clamp(28rem, calc(100svh - 16rem), 37rem);
}

.job-fit-panel {
  grid-template-rows: auto minmax(0, 1fr);
  padding: 1rem;
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  border-radius: 1.35rem;
  background: linear-gradient(180deg, rgba(246, 243, 251, 0.98), rgba(239, 235, 246, 0.96));
  color: var(--text-on-light);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 1.1rem 2.5rem rgba(7, 5, 11, 0.24);
  backdrop-filter: none;
}

.job-fit-panel-head {
  align-items: center;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
}

.job-fit-panel-head .detail-card-label {
  margin-bottom: 0.28rem;
  color: var(--text-on-light-muted);
}

.job-fit-panel h2 {
  color: var(--text-on-light);
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
}

.job-fit-form {
  gap: 0.75rem;
  padding-top: 0.85rem;
}

.job-fit-form label {
  color: var(--text-on-light-muted);
  font-size: 0.72rem;
}

.job-fit-form textarea {
  min-height: 0;
  height: 100%;
  padding: 1rem;
  border: 1px solid rgba(var(--ink-rgb), 0.13);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-on-light);
  font-size: 0.98rem;
  line-height: 1.55;
  resize: none;
}

.job-fit-form textarea::placeholder {
  color: #70697c;
}

.job-fit-form-actions {
  align-items: center;
}

.job-fit-primary-action {
  border-color: rgba(var(--accent-rgb), 0.34);
  background: linear-gradient(135deg, #855fc0, #7489b4);
  color: #f8f6fb;
}

.job-fit-result {
  padding-top: 0.85rem;
  color: var(--text-on-light);
}

.job-fit-empty-state,
.job-fit-pending,
.job-fit-error {
  min-height: 100%;
  padding: 1rem;
  border: 1px dashed rgba(var(--ink-rgb), 0.13);
  background: rgba(255, 255, 255, 0.54);
  color: var(--text-on-light-muted);
}

.job-fit-empty-kicker {
  color: var(--text-on-light);
}

.job-fit-metric,
.job-fit-result-section,
.job-fit-evidence-item {
  border-color: rgba(var(--ink-rgb), 0.1);
  background: rgba(255, 255, 255, 0.58);
}

.job-fit-metric span,
.job-fit-result-title {
  color: var(--text-on-light-muted);
}

.job-fit-metric strong,
.job-fit-evidence-item strong {
  color: var(--text-on-light);
}

.job-fit-summary {
  color: var(--text-on-light);
  background: rgba(255, 255, 255, 0.56);
}

.job-fit-result-list,
.job-fit-evidence-item p {
  color: var(--text-on-light-muted);
}

.job-fit-evidence-item span {
  color: #70697c;
}

/* Typography polish for generated chat and analysis copy. */
.chat-widget .chat-intro h2 {
  font-size: 1.08rem;
  letter-spacing: 0;
  line-height: 1.12;
}

.chat-widget-status,
.chat-context-label,
.chat-message-text,
.chat-widget .chat-form textarea,
.job-fit-result,
.job-fit-form textarea {
  font-family: "Public Sans", sans-serif;
  letter-spacing: 0;
}

.chat-message {
  border-radius: 1rem;
}

.chat-message-text {
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.56;
}

.chat-widget .chat-form textarea {
  font-size: 0.9rem;
  line-height: 1.45;
}

.job-fit-form textarea {
  font-size: 0.96rem;
  font-weight: 400;
  line-height: 1.58;
}

.job-fit-analysis {
  gap: 0.85rem;
}

.job-fit-metric {
  padding: 0.72rem 0.82rem;
}

.job-fit-metric strong {
  font-size: 1.05rem;
  letter-spacing: 0;
}

.job-fit-summary,
.job-fit-result-list li,
.job-fit-evidence-item p {
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.58;
}

.job-fit-result-section {
  padding: 0.82rem;
}

.job-fit-evidence-item strong {
  font-size: 0.92rem;
  letter-spacing: 0;
}

/* =========================
   Footer, animation helpers, accessibility, and breakpoints
   ========================= */

/* Keep the footer visually simple so it does not compete with the main content. */
.site-footer {
  background-color: var(--surface-dark);
}

.site-footer-inner {
  grid-template-columns: 1fr auto;
  min-height: 4.5rem;
  border-top: 1px solid var(--line-light);
  color: var(--light);
  font-size: 0.84rem;
}

.site-footer-inner p {
  margin: 0;
}

/* Animation used by the pulsing dot in the chat launcher. */
@keyframes chat-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.48);
  }

  70% {
    box-shadow: 0 0 0 0.7rem rgba(var(--accent-rgb), 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
  }
}

@keyframes chat-typing {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }

  40% {
    transform: translateY(-0.12rem);
    opacity: 1;
  }
}

/* Reveal animation system.
   Elements start hidden and slightly offset.
   JavaScript adds .is-visible when it is time for them to animate into place. */
[data-reveal] {
  opacity: 0;
  transition:
    opacity 600ms var(--ease-fluid),
    transform 600ms var(--ease-fluid);
  will-change: opacity, transform;
}

[data-reveal="up"] {
  transform: translateY(2.2rem);
}

[data-reveal="left"] {
  transform: translateX(-2.2rem);
}

[data-reveal="right"] {
  transform: translateX(2.2rem);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-reveal="lines"] {
  opacity: 1;
}

/* Special reveal mode for headings split into separate lines.
   Each line slides upward into place instead of the whole heading fading in at once. */
[data-reveal="lines"] .line-mask > span {
  transform: translateY(115%);
  transition: transform 700ms var(--ease-fluid);
  will-change: transform;
}

[data-reveal="lines"].is-visible .line-mask > span {
  transform: translateY(0);
}

[data-reveal="lines"].is-visible .line-mask:nth-child(1) > span {
  transition-delay: 80ms;
}

[data-reveal="lines"].is-visible .line-mask:nth-child(2) > span {
  transition-delay: 150ms;
}

[data-reveal="lines"].is-visible .line-mask:nth-child(3) > span {
  transition-delay: 220ms;
}

[data-reveal="lines"].is-visible .line-mask:nth-child(4) > span {
  transition-delay: 290ms;
}

/* Visible focus outline for keyboard users on the main interactive elements. */
.site-nav a:focus-visible,
.language-switcher select:focus-visible,
.header-link:focus-visible,
.hero-links a:focus-visible,
.hero-chat-cta:focus-visible,
.contact-links a:focus-visible,
.chat-stage-button:focus-visible,
.chat-widget-toggle:focus-visible,
.chat-widget-icon-button:focus-visible,
.chat-widget-fit-link:focus-visible,
.chat-form input:focus-visible,
.chat-form button:focus-visible,
.job-fit-form textarea:focus-visible,
.job-fit-primary-action:focus-visible,
.job-fit-secondary-action:focus-visible,
.job-fit-followup:focus-visible,
.faq-item summary:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.55);
  outline-offset: 4px;
}

/* If the user prefers reduced motion, turn off almost all movement and reveal offsets. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  [data-reveal],
  [data-reveal="lines"] .line-mask > span {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Large-tablet breakpoint:
   keep the hero in two columns while simplifying the rest of the page. */
@media (max-width: 1240px) {
  .section-head {
    grid-template-columns: 1fr;
  }

  .case-card--project h3 {
    max-width: 20ch;
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  }

  .hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.82fr);
    grid-template-areas:
      "main visual"
      "side visual";
    min-height: auto;
  }

  .hero-side {
    max-width: none;
  }

  .hero-points {
    grid-template-columns: 1fr;
  }

  .hero-visual-frame {
    aspect-ratio: 6 / 7;
  }

}

/* Tablet breakpoint:
   stack the main content grids and simplify the chat promo column. */
@media (max-width: 1100px) {
  .section-head,
  .split-section,
  .faq-block,
  .contact-layout,
  .framework-shell,
  .job-fit-shell,
  .job-fit-tool {
    grid-template-columns: 1fr;
  }

  .job-fit-intro {
    position: static;
    max-width: 38rem;
  }

  .job-fit-intro h1 {
    max-width: none;
  }

  .job-fit-tool {
    min-height: 0;
  }

  .job-fit-form textarea {
    min-height: 18rem;
  }

  .case-project-list {
    gap: 1.2rem;
  }

  .case-progress {
    display: none;
  }

  .hero-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "visual"
      "side";
  }

  .split-intro {
    grid-template-columns: auto 1fr;
  }

  .hero-layout {
    padding-bottom: 2rem;
  }

  .hero-points,
  .case-card-body,
  .detail-grid {
    grid-template-columns: 1fr 1fr;
  }

  .experience-layout,
  .approach-principles,
  .contact-shell {
    grid-template-columns: 1fr;
  }

  .framework-intro {
    position: static;
    max-width: 38rem;
  }

  .framework-lead {
    max-width: 36rem;
  }

  .contact-shell {
    flex: 1;
    min-height: 0;
    gap: 2.4rem;
    align-items: start;
  }

  .contact-link-list {
    width: min(100%, 26rem);
    margin-left: 0;
  }

  .experience-aside {
    padding-right: 0;
    border-right: 0;
    box-shadow: none;
  }

  .experience-divider {
    display: none;
  }

  .experience-timeline {
    padding-left: 0;
    border-left: 0;
    box-shadow: none;
  }

  .experience-timeline::before {
    content: none;
  }

  .experience-timeline::after {
    content: none;
  }

  .experience-facets,
  .approach-grid,
  .approach-principle-list {
    grid-template-columns: 1fr 1fr;
  }

  .hero-tool-rail {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .hero-tool-rail-title {
    white-space: normal;
  }

  .hero-visual {
    justify-self: start;
    max-width: 34rem;
  }

  .hero-visual-frame {
    aspect-ratio: 5 / 6;
  }

  .hero-side {
    max-width: 38rem;
    align-content: start;
    gap: 0.9rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
  }

  .hero-fact {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .detail-card:last-child {
    grid-column: 1 / -1;
  }

  .chat-stage {
    padding-left: 0;
    border-left: 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--section-line, var(--line-light));
  }
}

/* Mobile breakpoint:
   use smaller side gutters, scale down headings, and let the chat widget stretch across the screen. */
@media (max-width: 760px) {
  :root {
    --layout: min(1280px, calc(100% - 1.1rem));
  }

  .site-header-inner,
  .site-footer-inner {
    grid-template-columns: 1fr;
    justify-items: start;
    padding: 0.8rem 0;
  }

  .site-nav {
    justify-content: flex-start;
  }

  .hero-band {
    padding-top: 1.5rem;
  }

  .hero-layout {
    gap: 1.15rem;
  }

  .hero-main h1 {
    max-width: 11ch;
    font-size: clamp(3rem, 13vw, 4.7rem);
    line-height: 0.97;
  }

  .display-title {
    max-width: 11ch;
  }

  .hero-points,
  .case-card-body,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .experience-facets,
  .approach-grid,
  .approach-principle-list {
    grid-template-columns: 1fr;
  }

  .hero-side {
    padding: 1rem;
  }

  .hero-side-grid {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .hero-side-grid > .hero-facts {
    padding-right: 0;
  }

  .hero-language-panel {
    max-width: 24rem;
  }

  .hero-fact {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .hero-visual {
    max-width: none;
  }

  .hero-visual-frame {
    aspect-ratio: 4 / 5;
    border-radius: 1.3rem;
  }

  .hero-visual-caption {
    padding: 0;
  }

  .pillar-row,
  .timeline-row {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .timeline-row.experience-row {
    grid-template-columns: 1fr;
  }

  .experience-head-grid {
    grid-template-columns: 1fr;
    row-gap: 0.4rem;
  }

  .experience-current,
  .approach-card,
  .case-card--project,
  .case-card--fallback {
    padding: 1.15rem;
  }

  .experience-current {
    grid-template-columns: 1fr;
    row-gap: 0.55rem;
  }

  .experience-current .detail-card-label,
  .experience-current .timeline-date,
  .experience-current-copy {
    grid-column: 1;
  }

  .experience-current .timeline-date,
  .experience-current-copy {
    grid-row: auto;
    width: auto;
  }

  .editorial-section {
    padding: 4.4rem 0 3.2rem;
    scroll-margin-top: 5.4rem;
  }

  .editorial-section.contact-band {
    min-height: 100svh;
    padding: 4.4rem 0 0;
  }

  .contact-shell {
    flex: 1;
    min-height: 0;
    padding: 0;
    align-items: start;
  }

  .contact-shell .contact-copy h2 {
    max-width: none;
    font-size: clamp(3.8rem, 18vw, 5.9rem);
  }

  .framework-lead {
    max-width: 12ch;
    font-size: clamp(2rem, 7.2vw, 3rem);
  }

  .framework-band {
    padding: 1.05rem;
    border-radius: 1.2rem;
  }

  .framework-pillars {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .framework-pillar,
  .framework-principle {
    gap: 0.7rem;
  }

  .framework-pillar h4 {
    font-size: 1.15rem;
  }

  .contact-summary {
    max-width: 24rem;
  }

  .contact-link-list {
    width: 100%;
    gap: 0.85rem;
  }

  .contact-link-list a {
    padding: 1.05rem 1.1rem 1.15rem;
    border-radius: 1.15rem;
  }

  .contact-link-label {
    font-size: clamp(1.35rem, 8vw, 1.72rem);
  }

  .contact-footer {
    grid-template-columns: 1fr;
    justify-items: start;
    padding: 0.8rem 0;
  }

  .contact-copy h2,
  .chat-intro h2,
  .section-title-group h2,
  .split-intro h2,
  .faq-intro h2 {
    text-wrap: pretty;
  }

  .chat-widget {
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    width: auto;
    max-height: calc(100svh - 1.5rem);
  }

  .chat-widget[data-open="true"][data-expanded="true"] {
    top: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    width: auto;
    height: calc(100svh - 1.5rem);
    max-height: calc(100svh - 1.5rem);
    align-content: stretch;
  }

  .chat-widget[data-open="true"] {
    height: calc(100svh - 1.5rem);
    align-content: stretch;
  }

  .chat-widget-panel {
    width: 100%;
    height: 100%;
    gap: 0.8rem;
    padding: 0.9rem;
    border-radius: 1.55rem;
  }

  .chat-widget-hero {
    grid-template-columns: 1fr;
    padding: 0.9rem;
    border-radius: 1.35rem;
  }

  .chat-widget-profile {
    gap: 0.65rem;
  }

  .chat-widget-header-actions {
    justify-content: start;
    flex-wrap: wrap;
  }

  .chat-widget-fit-link {
    min-height: 2.35rem;
  }

  .chat-widget-icon-button {
    justify-self: end;
    width: 2.35rem;
    height: 2.35rem;
  }

  .chat-widget .chat-intro h2 {
    font-size: 1.16rem;
  }

  .chat-surface {
    padding: 0.82rem;
  }

  .chat-compose {
    padding: 0.72rem;
  }

  .chat-context-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }

  .chat-message {
    width: 100%;
  }

  .chat-widget-toggle {
    width: 100%;
  }

  .chat-widget .chat-form textarea {
    min-height: 3rem;
  }

  .chat-widget .chat-form button {
    width: 3rem;
    height: 3rem;
  }

  .job-fit-page {
    padding: 2.8rem 0 2rem;
  }

  .job-fit-shell,
  .job-fit-tool,
  .job-fit-panel,
  .job-fit-form {
    gap: 0.85rem;
  }

  .job-fit-intro h1 {
    font-size: 3.2rem;
  }

  .job-fit-intro-actions,
  .job-fit-form-actions {
    align-items: stretch;
  }

  .job-fit-intro-actions button,
  .job-fit-primary-action,
  .job-fit-secondary-action {
    width: 100%;
  }

  .job-fit-panel {
    padding: 0.82rem;
    border-radius: 1.15rem;
  }

  .job-fit-panel-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .job-fit-form textarea {
    min-height: 16rem;
  }

  .job-fit-form-actions {
    flex-direction: column-reverse;
  }

  .job-fit-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 820px) {
  .chat-widget-panel {
    gap: 0.75rem;
    padding: 0.8rem;
  }

  .chat-widget .chat-intro h2 {
    font-size: clamp(1.02rem, 2vw, 1.14rem);
  }

  .chat-widget-hero,
  .chat-surface,
  .chat-compose {
    padding: 0.75rem;
  }

  .chat-surface--conversation {
    min-height: 8.25rem;
  }

  .chat-widget .chat-form textarea {
    min-height: 2.85rem;
  }

  .chat-widget .chat-form button {
    width: 2.85rem;
    height: 2.85rem;
  }

  .chat-message {
    padding: 0.72rem 0.8rem;
  }
}

@media (max-width: 900px) {
  .job-fit-page {
    padding: 0.85rem 0 1.6rem;
  }

  .job-fit-intro {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    padding: 0.8rem;
    border-radius: 1.1rem;
  }

  .job-fit-intro h1 {
    font-size: clamp(1.45rem, 6.8vw, 1.95rem);
  }

  .job-fit-intro p {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .job-fit-intro-actions {
    align-items: center;
    gap: 0.5rem;
  }

  .job-fit-intro-actions a,
  .job-fit-intro-actions button {
    width: auto;
    flex: 1 1 0;
    justify-content: center;
    min-height: 2.45rem;
  }

  .job-fit-tool {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .job-fit-panel {
    min-height: auto;
    padding: 0.8rem;
    border-radius: 1.1rem;
  }

  .job-fit-input-panel {
    min-height: min(29rem, calc(100svh - 12rem));
  }

  .job-fit-output-panel {
    min-height: 18rem;
  }

  .job-fit-panel-head {
    flex-direction: row;
    align-items: center;
  }

  .job-fit-form textarea {
    min-height: 16rem;
  }

  .job-fit-form-actions {
    flex-direction: row;
  }

  .job-fit-primary-action,
  .job-fit-secondary-action {
    width: auto;
  }
}