/* ============================================================
   CAIUS · AI Management Office. Website styles.
   Built on the LOCKED brand system (branding/tokens.css).
   Visual school: Stripe (layout, density, motion). Palette,
   typography, logo and voice: CAIUS brand system v2.

   ── Brand variables used (all sourced from branding/tokens.css) ──
   COLOUR
     --caius-ink #17120f · --caius-ink-soft #2a221d · --caius-ink-70 #5a4f47
     --caius-porphyry #4b2a40 (PRIMARY) · --caius-porphyry-deep #321b2b
     --caius-porphyry-tint #724c64 · --caius-porphyry-wash #efe6ec
     --caius-bronze #9a7a4e (SECONDARY) · --caius-bronze-deep #735731 · --caius-bronze-wash #efe6d6
     --caius-travertine #f5efe4 (page bg) · --caius-travertine-2 #ece4d4 · --caius-travertine-3 #e2d8c4
     --caius-stone #d6cbb4 (borders) · --caius-stone-deep #b9ab8e
     semantic: --caius-success #4e7a66 · --caius-warning #b07c2c · --caius-error #8e2b22 · --caius-info #3a566a
     borders: --caius-border #d6cbb4 · --caius-border-ondark rgba(214,203,180,0.18)
   TYPE
     --caius-font-display Cinzel (CAPS only) · --caius-font-sans IBM Plex Sans · --caius-font-mono IBM Plex Mono
     sizes: --caius-text-hero/display/tagline/h2/h3/lede/body/small/eyebrow/label/data/caption
     tracking: --caius-tracking-wordmark .08 / -expand .16 / -eyebrow .22 / -label .16
   SPACING SCALE (4pt): --caius-space-1..32 (4 8 12 16 20 24 32 40 48 64 96 128 px)
     rhythm: --caius-section-pad clamp(64,9vw,128) · --caius-gutter clamp(20,5vw,64) · --caius-container 1180px
   RADII: --caius-radius-sm 3 · -md 5 · -lg 8 · -pill 9999
   ELEVATION: --caius-shadow-frame (floating product frames only)
   MOTION: --caius-ease · --caius-duration .15s · --caius-duration-md .30s
   ============================================================ */

/* Local additions layered on top of the locked tokens. */
:root {
  /* Soft frame shadow tuned for the layered product visuals (Stripe-school).
     Brand keeps surfaces flat; only floating product frames get elevation. */
  --frame-shadow: 0 24px 60px -38px rgba(23, 18, 15, 0.5);
  --card-shadow-hover: 0 18px 40px -30px rgba(23, 18, 15, 0.45);
  /* Product-frame corner: slightly softer than UI chrome for polish.
     ASSUMPTION: project visual spec asked for 12-16px rounded product shots;
     we land at 10px to stay close to the brand's architectural low-radius. */
  --frame-radius: 10px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--caius-travertine);
  color: var(--caius-ink);
  font-family: var(--caius-font-sans);
  font-size: var(--caius-text-body);
  line-height: var(--caius-leading-body);
  font-weight: var(--caius-weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--caius-porphyry); color: var(--caius-travertine); }

img, svg { display: block; max-width: 100%; }

a { color: var(--caius-porphyry); text-decoration: none; }
a:hover { color: var(--caius-porphyry-deep); }

h1, h2, h3, h4, p { margin: 0; }

/* Visible focus states everywhere (porphyry ring). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--caius-porphyry);
  outline-offset: 2px;
  border-radius: var(--caius-radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--caius-ink);
  color: var(--caius-travertine);
  padding: 12px 18px;
  font-family: var(--caius-font-mono);
  font-size: var(--caius-text-label);
  letter-spacing: var(--caius-tracking-label);
  text-transform: uppercase;
  z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--caius-container);
  margin-inline: auto;
  padding-inline: var(--caius-gutter);
}

.section { padding-block: var(--caius-section-pad); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }

/* Background slabs (Stripe-style alternating colour bands) */
.slab-travertine { background: var(--caius-travertine); }
.slab-travertine-2 { background: var(--caius-travertine-2); border-top: 1px solid var(--caius-stone); border-bottom: 1px solid var(--caius-stone); }
.slab-wash { background: var(--caius-porphyry-wash); border-top: 1px solid var(--caius-stone); border-bottom: 1px solid var(--caius-stone); }
.slab-ink { background: var(--caius-ink); color: var(--caius-travertine); }
.slab-porphyry { background: var(--caius-porphyry); color: var(--caius-travertine); }

.section + .section.slab-travertine { border-top: 1px solid var(--caius-stone); }

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--caius-space-3);
  font-family: var(--caius-font-mono);
  font-size: var(--caius-text-eyebrow);
  letter-spacing: var(--caius-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--caius-bronze-deep);
  margin-bottom: var(--caius-space-5);
}
.eyebrow .num {
  font-family: var(--caius-font-display);
  font-weight: var(--caius-weight-semibold);
  color: var(--caius-porphyry);
  letter-spacing: 0;
}
.eyebrow .rule { flex: 1; height: 1px; background: var(--caius-stone); min-width: 24px; }
.slab-ink .eyebrow, .slab-porphyry .eyebrow { color: var(--caius-bronze); }
.slab-ink .eyebrow .num, .slab-porphyry .eyebrow .num { color: var(--caius-bronze); }
.slab-ink .eyebrow .rule, .slab-porphyry .eyebrow .rule { background: var(--caius-border-ondark); }

.display-title {
  font-family: var(--caius-font-sans);
  font-weight: var(--caius-weight-semibold);
  font-size: var(--caius-text-display);
  line-height: var(--caius-leading-tight);
  letter-spacing: var(--caius-tracking-title);
  text-wrap: balance;
}

.lede {
  font-size: var(--caius-text-lede);
  line-height: var(--caius-leading-normal);
  color: var(--caius-ink-soft);
  max-width: 60ch;
  text-wrap: pretty;
}
.slab-ink .lede, .slab-porphyry .lede { color: var(--caius-stone-deep); }

h2.h2 { font-size: var(--caius-text-h2); font-weight: var(--caius-weight-semibold); line-height: var(--caius-leading-snug); }
h3.h3 { font-size: var(--caius-text-h3); font-weight: var(--caius-weight-semibold); line-height: var(--caius-leading-snug); }

.measure { max-width: 64ch; text-wrap: pretty; }

/* Single line on desktop, wraps on mobile via media query */
.oneline { white-space: nowrap; max-width: none; }

/* Sharp standalone line that punctuates a block (the "one line" after a scene). */
.statement {
  font-family: var(--caius-font-sans);
  font-weight: var(--caius-weight-semibold);
  font-size: var(--caius-text-h3);
  line-height: var(--caius-leading-snug);
  color: var(--caius-ink);
  text-wrap: balance;
}
.slab-ink .statement, .slab-porphyry .statement { color: var(--caius-travertine); }

/* Rationale / callout: left bronze rule, mono note (brand component spec 6). */
.note {
  border-left: 2px solid var(--caius-bronze);
  padding-left: var(--caius-space-4);
  font-family: var(--caius-font-mono);
  font-size: var(--caius-text-data);
  line-height: var(--caius-leading-normal);
  letter-spacing: 0.02em;
  color: var(--caius-ink-70);
  text-wrap: pretty;
  max-width: 72ch;
}

/* ---------- Logo lockup (mark + wordmark + expansion) ---------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--caius-space-3);
  color: var(--caius-ink);
}
.logo__mark { width: 30px; height: 30px; flex: none; color: var(--caius-porphyry); }
.logo__text { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.logo__word {
  font-family: var(--caius-font-display);
  font-weight: var(--caius-weight-semibold);
  font-size: 1.25rem;
  letter-spacing: var(--caius-tracking-wordmark);
  text-transform: uppercase;
  color: var(--caius-ink);
}
.logo__expand {
  font-family: var(--caius-font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--caius-ink-70);
}
.logo__expand .hl { color: var(--caius-bronze-deep); font-weight: 600; }

/* On dark surfaces (footer) */
.slab-ink .logo { color: var(--caius-travertine); }
.slab-ink .logo__mark { color: var(--caius-travertine); }
.slab-ink .logo__word { color: var(--caius-travertine); }
.slab-ink .logo__expand { color: var(--caius-stone-deep); }
.slab-ink .logo__expand .hl { color: var(--caius-bronze); }

/* ---------- Buttons (mono, uppercase, low radius) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--caius-space-2);
  font-family: var(--caius-font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 13px 22px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--caius-radius-sm);
  cursor: pointer;
  transition: background var(--caius-duration) var(--caius-ease),
              color var(--caius-duration) var(--caius-ease),
              border-color var(--caius-duration) var(--caius-ease),
              transform var(--caius-duration) var(--caius-ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--caius-porphyry); color: var(--caius-travertine); }
.btn--primary:hover { background: var(--caius-porphyry-deep); color: var(--caius-travertine); }

.btn--ghost { background: transparent; color: var(--caius-ink); border-color: var(--caius-ink-soft); }
.btn--ghost:hover { background: var(--caius-ink); color: var(--caius-travertine); }

.btn--ondark { background: var(--caius-bronze); color: var(--caius-ink); }
.btn--ondark:hover { background: #a9885a; color: var(--caius-ink); }

.btn--ghost-ondark { background: transparent; color: var(--caius-travertine); border-color: var(--caius-border-ondark); }
.btn--ghost-ondark:hover { background: var(--caius-travertine); color: var(--caius-ink); }

.btn--sm { font-size: 11px; padding: 9px 16px; min-height: 38px; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--caius-space-3); }

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 239, 228, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--caius-stone);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--caius-space-6);
  min-height: 68px;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--caius-space-6);
  margin-left: auto;
  list-style: none;
  padding: 0;
}
.nav__links a {
  font-family: var(--caius-font-sans);
  font-size: 13px;
  font-weight: var(--caius-weight-medium);
  color: var(--caius-ink-soft);
  letter-spacing: 0.01em;
  transition: color var(--caius-duration) var(--caius-ease);
}
.nav__links a:hover { color: var(--caius-ink); }
.nav__links a[aria-current="page"] { color: var(--caius-porphyry); }
.nav__cta { margin-left: var(--caius-space-2); }

/* ---------- Language switcher (EN / IT) ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--caius-stone);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  flex: none;
}
.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  opacity: 0.45;
  transition: opacity var(--caius-duration) var(--caius-ease),
              background var(--caius-duration) var(--caius-ease),
              box-shadow var(--caius-duration) var(--caius-ease);
}
.lang-switch__btn:hover { opacity: 0.8; }
.lang-switch__btn.is-active {
  opacity: 1;
  background: var(--caius-travertine);
  box-shadow: 0 1px 2px rgba(23, 18, 15, 0.14);
}
.lang-switch__btn:focus-visible {
  outline: 2px solid var(--caius-porphyry);
  outline-offset: 2px;
}
.lang-switch__flag {
  display: block;
  width: 22px;
  height: 15px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(23, 18, 15, 0.1);
}

/* Italian launch on hold: hide the EN/IT switcher for now. The full Italian
   translation and every data-i18n wiring stay in place, so the site renders in
   English (the default). To re-enable the flags, delete this one rule and
   restore `margin-left: 0` on `.nav__toggle` in the 768px media query (so the
   visible switcher, not the toggle, owns the right-edge alignment on mobile). */
.lang-switch { display: none; }

/* Italian copy runs a little longer than the English it replaces. Relax the
   nowrap utilities for Italian only, so longer phrases wrap instead of
   overflowing. English layout (the default) is untouched. */
html[lang="it"] .oneline { white-space: normal; }
html[lang="it"] .hero__sub { white-space: normal; }
html[lang="it"] .btn { white-space: normal; }

.nav__toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--caius-stone);
  border-radius: var(--caius-radius-sm);
  width: 44px;
  height: 44px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--caius-ink);
  position: relative;
  transition: transform var(--caius-duration) var(--caius-ease), opacity var(--caius-duration);
}
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after { position: absolute; top: 6px; }

/* Mobile full-screen menu.
   Lives as a direct child of <body> (a sibling of .nav, not inside it): the
   nav's backdrop-filter would otherwise become the containing block for this
   fixed element and trap it inside the 68px header. As a body child, fixed
   positioning resolves against the viewport so the panel fills the screen
   below the bar. */
.nav__mobile {
  display: none;
  position: fixed;
  inset: 68px 0 0 0;
  background: var(--caius-travertine);
  z-index: 99;
  padding: var(--caius-space-8) var(--caius-gutter);
  flex-direction: column;
  gap: var(--caius-space-2);
  overflow-y: auto;
}
.nav__mobile.open { display: flex; }
.nav__mobile a {
  font-size: 1.25rem;
  font-weight: var(--caius-weight-medium);
  color: var(--caius-ink);
  padding: var(--caius-space-4) 0;
  border-bottom: 1px solid var(--caius-stone);
}
.nav__mobile .btn { margin-top: var(--caius-space-4); }
body.nav-open { overflow: hidden; }

/* ---------- Hero (home) ----------
   Cover / ceremonial treatment per brand: ink-black surface, travertine
   (light) main writings, bronze (gold) supporting writings + watermark. */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--caius-border-ondark);
  color: var(--caius-travertine);
  /* Ink cover with a restrained porphyry + bronze glow (palette only). */
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(122, 76, 100, 0.30) 0%, rgba(122, 76, 100, 0) 55%),
    radial-gradient(90% 80% at 6% 0%, rgba(154, 122, 78, 0.18) 0%, rgba(154, 122, 78, 0) 52%),
    var(--caius-ink);
}
.hero__inner { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 7vw, 96px); }
.hero__arch {
  position: absolute;
  right: -4%;
  top: -8%;
  width: clamp(280px, 36vw, 560px);
  color: var(--caius-bronze); /* ceremonial gold watermark on ink cover */
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.hero__content { position: relative; z-index: 1; max-width: 960px; }

.hero__eyebrow {
  font-family: var(--caius-font-mono);
  font-size: var(--caius-text-eyebrow);
  letter-spacing: var(--caius-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--caius-bronze); /* gold supporting text */
  display: block;
  margin-bottom: var(--caius-space-6);
}

.hero__meet {
  font-family: var(--caius-font-display);
  font-weight: var(--caius-weight-medium);
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  letter-spacing: 0.18em;
  color: var(--caius-stone-deep); /* muted light, subordinate to wordmark */
  margin-bottom: var(--caius-space-1);
}
.hero__wordmark {
  font-family: var(--caius-font-display);
  font-weight: var(--caius-weight-semibold);
  text-transform: uppercase;
  font-size: var(--caius-text-hero);
  line-height: 0.9;
  letter-spacing: var(--caius-tracking-wordmark);
  color: var(--caius-travertine); /* light main writing */
  margin: 0;
}
.hero__expand {
  font-family: var(--caius-font-display);
  font-weight: var(--caius-weight-medium);
  text-transform: uppercase;
  font-size: var(--caius-text-expand, clamp(15px, 2vw, 21px));
  letter-spacing: var(--caius-tracking-expand);
  color: var(--caius-bronze); /* gold supporting text */
  margin-top: var(--caius-space-4);
}
/* On the gold expansion, highlighted C/AI/U/S pop in light for legibility. */
.hero__expand .hl { color: var(--caius-travertine); }

.hero__sub {
  font-family: var(--caius-font-sans);
  font-weight: var(--caius-weight-medium);
  font-size: clamp(1.1rem, 2.4vw, 1.55rem);
  line-height: 1.3;
  color: var(--caius-travertine); /* light main writing */
  margin-top: var(--caius-space-8);
  white-space: nowrap; /* one line on desktop, wraps on mobile via media query */
}
/* Plain-language category line: tells a stranger what CAIUS is, between the
   gold expansion and the punch tagline. Wraps freely (unlike .hero__sub). */
.hero__lead {
  font-family: var(--caius-font-sans);
  font-weight: var(--caius-weight-regular);
  font-size: var(--caius-text-lede);
  line-height: var(--caius-leading-normal);
  color: var(--caius-stone-deep);
  margin-top: var(--caius-space-8);
  max-width: 56ch;
  text-wrap: pretty;
}
/* Tagline sits a touch tighter under the category line than under the wordmark. */
.hero__lead + .hero__sub { margin-top: var(--caius-space-6); }
.hero__cta { margin-top: var(--caius-space-8); }

/* ---------- Inner-page hero (compact, stronger contrast) ---------- */
.subhero {
  border-bottom: 1px solid var(--caius-border-ondark);
  background: var(--caius-ink);
  color: var(--caius-travertine);
  position: relative;
  overflow: hidden;
}
.subhero__inner { padding-block: clamp(40px, 6vw, 72px) clamp(36px, 5vw, 64px); position: relative; z-index: 1; max-width: 760px; }
.subhero__arch {
  position: absolute; right: -2%; top: -20%;
  width: clamp(240px, 30vw, 460px);
  color: var(--caius-travertine); opacity: 0.05; z-index: 0; pointer-events: none;
}
.subhero .eyebrow { color: var(--caius-bronze); }
.subhero .eyebrow .num { color: var(--caius-bronze); }
.subhero .eyebrow .rule { background: var(--caius-border-ondark); }
.subhero__title {
  font-family: var(--caius-font-sans);
  font-weight: var(--caius-weight-semibold);
  font-size: var(--caius-text-display);
  line-height: var(--caius-leading-tight);
  letter-spacing: var(--caius-tracking-title);
  color: var(--caius-travertine);
  margin-bottom: var(--caius-space-5);
  text-wrap: balance;
}
.subhero__sub { font-size: var(--caius-text-lede); line-height: var(--caius-leading-normal); color: var(--caius-stone-deep); max-width: 58ch; text-wrap: pretty; }

/* Per-page tonal personality (deeper gradient slabs within palette). */
.subhero--porphyry { background: var(--caius-porphyry); }
.subhero--porphyry .subhero__sub { color: rgba(245, 239, 228, 0.82); }
.subhero--porphyry-deep {
  background:
    radial-gradient(100% 120% at 88% -10%, rgba(154, 122, 78, 0.22) 0%, rgba(154, 122, 78, 0) 55%),
    var(--caius-porphyry-deep);
}
.subhero--porphyry-deep .subhero__sub { color: rgba(245, 239, 228, 0.82); }
.subhero--ink-bronze {
  background:
    radial-gradient(100% 120% at 90% -10%, rgba(154, 122, 78, 0.20) 0%, rgba(154, 122, 78, 0) 55%),
    var(--caius-ink);
}

/* ---------- Section header block ---------- */
.section-head { max-width: 56ch; margin-bottom: var(--caius-space-12); }
.section-head .lede { margin-top: var(--caius-space-4); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lede { margin-inline: auto; }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: var(--caius-space-6); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-2x2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--caius-travertine-2);
  border: 1px solid var(--caius-stone);
  border-radius: var(--caius-radius-sm);
  padding: var(--caius-space-8);
  transition: transform var(--caius-duration) var(--caius-ease),
              box-shadow var(--caius-duration) var(--caius-ease),
              border-color var(--caius-duration) var(--caius-ease);
}
.card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--caius-stone-deep);
}
.card .card__title { font-family: var(--caius-font-sans); font-weight: var(--caius-weight-semibold); font-size: var(--caius-text-h3); margin-bottom: var(--caius-space-3); }
.card .card__body { color: var(--caius-ink-soft); font-size: var(--caius-text-body); text-wrap: pretty; }

/* Icon tiles */
.icon-tile {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--caius-radius-lg);
  background: var(--caius-porphyry-wash);
  color: var(--caius-porphyry);
  border: 1px solid var(--caius-stone);
  margin-bottom: var(--caius-space-5);
}
.icon-tile svg { width: 24px; height: 24px; }

/* ---------- Three-tile (home) ---------- */
.tile { background: transparent; border: none; padding: 0; }
.tile .icon-tile { background: var(--caius-bronze-wash); color: var(--caius-bronze-deep); }
.tile__title { font-weight: var(--caius-weight-semibold); font-size: var(--caius-text-h3); margin-bottom: var(--caius-space-3); }
.tile__body { color: var(--caius-ink-soft); text-wrap: pretty; }

/* ---------- Chips / tags ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--caius-space-3); }
.chip {
  font-family: var(--caius-font-mono);
  font-size: var(--caius-text-label);
  letter-spacing: var(--caius-tracking-label);
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--caius-radius-pill);
  border: 1px solid var(--caius-border-ondark);
  color: var(--caius-travertine);
  background: rgba(245, 239, 228, 0.06);
}
.tag {
  display: inline-block;
  font-family: var(--caius-font-mono);
  font-size: var(--caius-text-label);
  letter-spacing: var(--caius-tracking-label);
  text-transform: uppercase;
  color: var(--caius-bronze-deep);
  margin-bottom: var(--caius-space-4);
}

/* ---------- Product visual frames (layered, polished) ---------- */
.product-frame {
  position: relative;
  border-radius: var(--frame-radius);
}
.product-frame img {
  width: 100%;
  border-radius: var(--frame-radius);
  border: 1px solid var(--caius-stone);
  box-shadow: var(--frame-shadow);
  position: relative;
  z-index: 1;
}
/* offset layered rectangle behind, reads as a stacked product visual */
.product-frame::before {
  content: "";
  position: absolute;
  inset: 18px -16px -18px 18px;
  background: var(--caius-travertine-3);
  border: 1px solid var(--caius-stone);
  border-radius: var(--frame-radius);
  z-index: 0;
}

/* ---------- Two-column feature rows ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.split--reverse .split__media { order: -1; }
/* Wider media column for dense portrait screenshots */
.split--media-wide { grid-template-columns: 2fr 3fr; }
/* Layout hooks: positioned by the .split grid. min-width:0 lets columns
   shrink below content size, hardening against grid blowout from long
   Italian/Spanish words (i18n safeguard). */
.split__text, .split__media { min-width: 0; }

/* ---------- Steps (how it works) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--caius-space-8); counter-reset: step; }
.step { position: relative; }
.step__num {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--caius-radius-pill);
  background: var(--caius-porphyry);
  color: var(--caius-travertine);
  font-family: var(--caius-font-display);
  font-weight: var(--caius-weight-semibold);
  font-size: 1.1rem;
  margin-bottom: var(--caius-space-5);
}
.step__title { font-weight: var(--caius-weight-semibold); font-size: var(--caius-text-h3); margin-bottom: var(--caius-space-2); }
.step__body { color: var(--caius-ink-soft); }

/* ---------- Flow (vertical numbered narrative, e.g. a request end to end) ---------- */
.flow { list-style: none; counter-reset: flow; margin: 0; padding: 0; display: grid; gap: var(--caius-space-6); max-width: 760px; }
.flow li { position: relative; padding-left: 56px; counter-increment: flow; color: var(--caius-ink-soft); text-wrap: pretty; }
.flow li::before {
  content: counter(flow);
  position: absolute; left: 0; top: -2px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--caius-radius-pill);
  background: var(--caius-porphyry);
  color: var(--caius-travertine);
  font-family: var(--caius-font-display);
  font-weight: var(--caius-weight-semibold);
  font-size: 0.95rem;
}
.flow strong { color: var(--caius-ink); font-weight: var(--caius-weight-semibold); }

/* ---------- Three-column lists (Why CAIUS pressure/gap/answer) ---------- */
.col-list h3.h3 { margin-bottom: var(--caius-space-5); padding-bottom: var(--caius-space-3); border-bottom: 1px solid var(--caius-stone); }
.col-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--caius-space-4); }
.col-list li { position: relative; padding-left: var(--caius-space-6); color: var(--caius-ink-soft); text-wrap: pretty; }
.col-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 8px;
  background: var(--caius-bronze);
  border-radius: 2px;
}

/* ---------- Differentiation rows ---------- */
.diff { display: grid; gap: 0; border: 1px solid var(--caius-stone); border-radius: var(--caius-radius-sm); overflow: hidden; background: var(--caius-travertine-2); }
.diff__row { display: grid; grid-template-columns: 220px 1fr; gap: var(--caius-space-6); padding: var(--caius-space-6) var(--caius-space-8); }
.diff__row + .diff__row { border-top: 1px solid var(--caius-stone); }
.diff__key { font-family: var(--caius-font-mono); font-size: var(--caius-text-data); letter-spacing: var(--caius-tracking-data); text-transform: uppercase; color: var(--caius-porphyry); font-weight: 600; }
.diff__val { color: var(--caius-ink-soft); text-wrap: pretty; }

/* ---------- Agent grid (platform 3x3) ---------- */
.agent { display: flex; flex-direction: column; }
.agent .icon-tile { width: 40px; height: 40px; margin-bottom: var(--caius-space-4); }
.agent .icon-tile svg { width: 20px; height: 20px; }
.agent__name { font-weight: var(--caius-weight-semibold); font-size: 1.0625rem; margin-bottom: var(--caius-space-2); }
.agent__line { color: var(--caius-ink-soft); font-size: var(--caius-text-small); text-wrap: pretty; }

/* Agent clusters: group the team by the outcome it produces, not an org chart. */
.agent-cluster + .agent-cluster { margin-top: var(--caius-space-12); }
.agent-cluster__head { margin-bottom: var(--caius-space-6); }
.agent-cluster__head h3 { font-weight: var(--caius-weight-semibold); font-size: var(--caius-text-h3); }

/* ---------- Insight cards ---------- */
.insight { display: flex; flex-direction: column; gap: var(--caius-space-2); }
.insight__title { font-weight: var(--caius-weight-semibold); font-size: var(--caius-text-h3); line-height: var(--caius-leading-snug); margin-bottom: var(--caius-space-2); }
.insight__excerpt { color: var(--caius-ink-soft); margin-bottom: var(--caius-space-4); flex: 1; text-wrap: pretty; }
.insight__more { font-family: var(--caius-font-mono); font-size: var(--caius-text-label); letter-spacing: var(--caius-tracking-label); text-transform: uppercase; color: var(--caius-porphyry); }

/* ---------- Checklist (contact) ---------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--caius-space-5); }
.checklist li { display: flex; gap: var(--caius-space-4); align-items: flex-start; font-size: var(--caius-text-lede); color: var(--caius-ink-soft); }
.checklist .check {
  flex: none; width: 26px; height: 26px; margin-top: 2px;
  display: grid; place-items: center;
  border-radius: var(--caius-radius-pill);
  background: var(--caius-success); color: var(--caius-travertine);
}
.checklist .check svg { width: 14px; height: 14px; }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--caius-space-5); }
.field { display: grid; gap: var(--caius-space-2); }
.field label {
  font-family: var(--caius-font-mono);
  font-size: var(--caius-text-label);
  letter-spacing: var(--caius-tracking-label);
  text-transform: uppercase;
  color: var(--caius-ink-70);
}
.field input,
.field select,
.field textarea {
  font-family: var(--caius-font-sans);
  font-size: var(--caius-text-body);
  color: var(--caius-ink);
  background: #fff;
  border: 1px solid var(--caius-stone);
  border-radius: var(--caius-radius-sm);
  padding: 11px 14px;
  width: 100%;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--caius-porphyry); box-shadow: 0 0 0 3px rgba(75, 42, 64, 0.18); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--caius-space-5); }

.form-note { font-size: var(--caius-text-small); color: var(--caius-ink-70); }

.inline-form { display: flex; gap: var(--caius-space-3); flex-wrap: wrap; }
.inline-form input { flex: 1; min-width: 240px; }

.form-success {
  display: none;
  background: var(--caius-success-soft);
  border: 1px solid var(--caius-success);
  color: #2f5346;
  border-radius: var(--caius-radius-sm);
  padding: var(--caius-space-4) var(--caius-space-5);
  font-size: var(--caius-text-small);
}
.form-success.show { display: block; }

/* ---------- Featured guide ---------- */
.guide-card { background: var(--caius-travertine-2); border: 1px solid var(--caius-stone); border-radius: var(--caius-radius-sm); padding: clamp(28px, 4vw, 48px); }

/* ---------- CTA strip ---------- */
.cta-strip { text-align: center; }
.cta-strip .display-title { margin-bottom: var(--caius-space-8); text-wrap: balance; }
.cta-strip .btn-row { justify-content: center; }

/* ---------- Thesis bar (full-bleed Roman motto, accent band) ---------- */
/* Background comes from .slab-wash; this gives it room and the serif voice. */
/* Bar height is only as tall as the motto needs, plus ~1cm top and bottom. */
.thesis { text-align: center; padding-block: 1cm; }
.thesis__text {
  margin: 0;
  font-family: var(--caius-font-display);
  font-weight: var(--caius-weight-semibold);
  text-transform: uppercase;
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.12;
  letter-spacing: 0.04em;
  color: var(--caius-porphyry);
  text-wrap: balance;
}

/* ---------- Scenario carousel ---------- */
.carousel { position: relative; margin-top: var(--caius-space-4); }
.carousel__viewport { overflow: hidden; }
.carousel__track { display: flex; transition: transform var(--caius-duration-md) var(--caius-ease); will-change: transform; }
.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--caius-space-3);
  text-align: center;
  padding: clamp(4px, 1vw, 10px) var(--caius-space-2);
}
/* Taglines stretch across the full width and wrap only when the line will
   not fit; no narrow max-width column forcing an early break. */
.carousel__tagline {
  font-family: var(--caius-font-sans);
  font-weight: var(--caius-weight-semibold);
  font-size: clamp(24px, 3.6vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  max-width: none;
}
.carousel__line { font-size: var(--caius-text-lede); line-height: var(--caius-leading-normal); color: var(--caius-ink-soft); max-width: 60ch; text-wrap: pretty; }
.carousel__dots { display: flex; justify-content: center; gap: var(--caius-space-2); margin-top: var(--caius-space-4); }
.carousel__dot {
  width: 24px; height: 24px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  display: inline-grid; place-items: center;
}
.carousel__dot::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: var(--caius-radius-pill);
  border: 1px solid var(--caius-stone-deep);
  transition: background var(--caius-duration) var(--caius-ease), border-color var(--caius-duration) var(--caius-ease);
}
.carousel__dot.is-active::before { background: var(--caius-porphyry); border-color: var(--caius-porphyry); }
.carousel__dot:hover::before { border-color: var(--caius-porphyry); }

/* ---------- Product showcase (image-led carousel) ----------
   Distinct from the text-led scenarios: the screenshot dominates, the
   caption is a small supporting line beneath. Reuses the carousel engine
   (data-carousel + .carousel__track + .carousel__dot) for autoplay/dots. */
.showcase { position: relative; margin-top: var(--caius-space-8); }
.showcase__viewport { position: relative; overflow: hidden; border-radius: var(--frame-radius); }
.showcase__slide {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--caius-space-5);
}
/* Visible placeholder that holds the layout until a real screenshot lands:
   neutral stone field with a faint porphyry hatch and the filename in mono. */
.shot {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Lock the frame to the aspect ratio: never grow/shrink in the column slide,
     and defeat flex min-content (min-height: auto) so a tall raw image cannot
     push the frame past 16/9. */
  flex: 0 0 auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--caius-stone);
  border-radius: var(--frame-radius);
  background:
    repeating-linear-gradient(45deg, rgba(75, 42, 64, 0.06) 0 12px, rgba(75, 42, 64, 0.02) 12px 24px),
    var(--caius-travertine-3);
}
/* Absolutely fill the frame so the image's own dimensions never drive height.
   It crops to fill via object-fit: cover instead of changing the frame size. */
.shot img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--frame-radius);
}
.shot__name {
  font-family: var(--caius-font-mono);
  font-size: var(--caius-text-label);
  letter-spacing: var(--caius-tracking-label);
  text-transform: uppercase;
  color: var(--caius-ink-70);
  opacity: 0.55;
}
.showcase__caption {
  text-align: center;
  font-size: var(--caius-text-lede);
  line-height: var(--caius-leading-normal);
  color: var(--caius-ink-soft);
  text-wrap: pretty;
  /* Reserve two lines so a longer caption cannot make one slide taller than
     the others, keeping the carousel height fixed across slides. */
  min-height: calc(var(--caius-text-lede) * var(--caius-leading-normal) * 2);
  margin: 0;
}
.showcase__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--caius-radius-pill);
  border: 1px solid var(--caius-stone);
  background: rgba(245, 239, 228, 0.86);
  color: var(--caius-ink);
  cursor: pointer;
  z-index: 2;
  transition: background var(--caius-duration) var(--caius-ease), border-color var(--caius-duration) var(--caius-ease);
}
.showcase__arrow:hover { background: var(--caius-travertine); border-color: var(--caius-stone-deep); }
.showcase__arrow--prev { left: var(--caius-space-4); }
.showcase__arrow--next { right: var(--caius-space-4); }
.showcase__arrow svg { width: 20px; height: 20px; }

/* ---------- Footer ---------- */
/* Porphyry-deep (not ink) so the footer reads as distinct from the ink CTA
   band above it; a top hairline reinforces the boundary. */
.footer { background: var(--caius-porphyry-deep); color: var(--caius-travertine); border-top: 1px solid var(--caius-border-ondark); }
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--caius-space-12);
  padding-block: var(--caius-space-16);
}
.footer__tag { color: var(--caius-stone-deep); margin-top: var(--caius-space-4); max-width: 28ch; }
.footer__col h4 {
  font-family: var(--caius-font-mono);
  font-size: var(--caius-text-label);
  letter-spacing: var(--caius-tracking-label);
  text-transform: uppercase;
  color: var(--caius-bronze);
  margin-bottom: var(--caius-space-5);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--caius-space-3); }
.footer__col a { color: var(--caius-stone-deep); font-size: var(--caius-text-small); }
.footer__col a:hover { color: var(--caius-travertine); }
.footer__contact { display: grid; gap: var(--caius-space-3); }
.footer__bottom {
  border-top: 1px solid var(--caius-border-ondark);
  padding-block: var(--caius-space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--caius-space-3);
  align-items: center;
  font-family: var(--caius-font-mono);
  font-size: var(--caius-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--caius-stone-deep);
}
.footer__bottom a { color: var(--caius-stone-deep); }
.footer__bottom a:hover { color: var(--caius-travertine); }
.footer__bottom .sep { opacity: 0.5; }

/* ---------- Scroll reveal motion ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--caius-duration-md) var(--caius-ease), transform var(--caius-duration-md) var(--caius-ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   Responsive. Mobile-first breakpoints 640 / 768 / 1024 / 1280
   ============================================================ */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: var(--caius-space-6); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .diff__row { grid-template-columns: 160px 1fr; }
}

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; } /* margin-left: auto from base keeps it right-aligned while the switcher is hidden */
  .lang-switch { margin-left: auto; }
  .split { grid-template-columns: 1fr; gap: var(--caius-space-10); }
  .split--reverse .split__media { order: 0; }
  .grid-3, .grid-2, .grid-2x2 { grid-template-columns: 1fr; }
  .hero__sub { white-space: normal; }
  .oneline { white-space: normal; }
  .field-row { grid-template-columns: 1fr; }
  .diff__row { grid-template-columns: 1fr; gap: var(--caius-space-2); }
  .footer__top { grid-template-columns: 1fr; gap: var(--caius-space-8); }
  .product-frame::before { inset: 12px -10px -12px 12px; }
}

@media (max-width: 640px) {
  .hero__sub { font-size: 1.15rem; }
  .card { padding: var(--caius-space-6); }
}

/* Wider agent grid only on large screens (3x3) */
@media (min-width: 1024px) {
  .grid-3.agents { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card--hover:hover { transform: none; }
  .btn:active { transform: none; }
}