/* Static pages kit (bay-studio, 2026-10-20): the story pages, About and Contact. Same look as
   the home (Vigil register: big Funnel Display type, mono labels, paper and ink), but plain
   HTML with no Framer hydration. Colour is tokens only: the home's own values, declared once. */
@font-face { font-family: "Funnel Display"; src: url("/cdn/fonts-gstatic-com/B50bF7FGv37QNVWgE0ga--4PbZSRJXrOHcLHLoAYqGPXXcVwIZDKFA.woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Funnel Display"; src: url("/cdn/fonts-gstatic-com/B50bF7FGv37QNVWgE0ga--4PbZSRJXrOHcLHLoAYfWTXXcVwIZDKFA.woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Funnel Sans"; src: url("/cdn/fonts-gstatic-com/OpNfno8Dg9bX6Bsp3Wq69RB-VukSVv3aISFAlXmEe29NnDyL7w.woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Funnel Sans"; src: url("/cdn/fonts-gstatic-com/OpNfno8Dg9bX6Bsp3Wq69RB-VukSVv3aISFAcn6Ee29NnDyL7w.woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("/cdn/fonts-gstatic-com/2V08KIcADoYhV6w87xrTKjs4CYElh_VS9YA4TlTnQzaVMIE6j15dYY1qu86TD75kdpF2.woff2"); font-weight: 400; font-display: swap; }

:root {
  --sp-paper: #e4e6e1;
  --sp-card: #f1f2ee;
  --sp-soft: #d6d9d2;
  --sp-ink: #111310;
  --sp-ink-2: #1b1e1a;
  --sp-stone: #6b7068;
  --sp-line: rgba(17, 19, 16, 0.14);
  --sp-line-strong: rgba(17, 19, 16, 0.28);
  --sp-on-dark: #f1f2ee;
  --sp-on-dark-dim: rgba(241, 242, 238, 0.62);
  --sp-purple: #8125d9;
  --sp-purple-soft: rgba(129, 37, 217, 0.1);
  --sp-purple-on-dark: #b98cf0;
  --sp-lime: #d4ff3a;
  --sp-white: #ffffff;
  --sp-error: #b42318;
  --sp-display: "Funnel Display", "Funnel Display Placeholder", sans-serif;
  --sp-sans: "Funnel Sans", "Funnel Sans Placeholder", system-ui, sans-serif;
  --sp-mono: "Martian Mono", "Martian Mono Placeholder", ui-monospace, monospace;
  --sp-gutter: 40px;
  --sp-max: 1360px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--sp-paper); color: var(--sp-ink); font-family: var(--sp-sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, video { max-width: 100%; }
.sp-wrap { width: 100%; max-width: calc(var(--sp-max) + 2 * var(--sp-gutter)); margin: 0 auto; padding: 0 var(--sp-gutter); }
.sp-label { font-family: var(--sp-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.sp-muted { color: var(--sp-stone); }

/* ---- Chrome ---------------------------------------------------------------- */
.sp-head { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--sp-paper) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sp-head .sp-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 84px; }
.sp-logo { display: inline-flex; color: var(--sp-ink); }
.sp-logo svg { height: 40px; width: auto; display: block; }
.sp-nav { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--sp-card); border: 1px solid var(--sp-line); }
.sp-nav a { text-decoration: none; font-size: 15px; font-weight: 500; padding: 9px 16px; border-radius: 999px; display: inline-flex; gap: 8px; align-items: baseline; }
.sp-nav a span { font-family: var(--sp-mono); font-size: 9.5px; color: var(--sp-stone); }
.sp-nav a:hover { background: var(--sp-paper); }
.sp-nav a[aria-current="page"] { background: var(--sp-ink); color: var(--sp-card); }
.sp-nav a[aria-current="page"] span { color: var(--sp-on-dark-dim); }
.sp-btn { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; font-weight: 500; font-size: 16px; padding: 8px 8px 8px 22px; border-radius: 999px; background: var(--sp-purple); color: var(--sp-white); border: 0; cursor: pointer; font-family: var(--sp-sans); transition: transform .25s ease, background-color .25s ease; }
.sp-btn i { color: var(--sp-white); width: 36px; height: 36px; border-radius: 50%; background: var(--sp-ink); display: inline-grid; place-items: center; font-style: normal; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.sp-btn:hover i { transform: translateX(3px); }
.sp-btn--ink { background: var(--sp-ink); }
.sp-btn--ink i { background: var(--sp-purple); }
.sp-btn:focus-visible, .sp-nav a:focus-visible { outline: 2px solid var(--sp-purple); outline-offset: 3px; }
.sp-foot { margin-top: 0; padding: 72px 0 40px; border-top: 1px solid var(--sp-line); }
.sp-foot .sp-wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; }
.sp-foot p { color: var(--sp-stone); font-size: 15px; line-height: 1.55; max-width: 360px; }
.sp-foot ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.sp-foot ul a { text-decoration: none; font-size: 15px; }
.sp-foot ul a:hover { color: var(--sp-purple); }
.sp-foot small { grid-column: 1 / -1; color: var(--sp-stone); font-family: var(--sp-mono); font-size: 10px; letter-spacing: 0.06em; padding-top: 28px; border-top: 1px solid var(--sp-line); }

/* ---- Reveal ---------------------------------------------------------------- */
.sp-rise { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.sp-rise.in { opacity: 1; transform: none; }

/* ---- Story ----------------------------------------------------------------- */
.st-hero { padding-top: 64px; padding-bottom: 40px; }
.st-crumb { display: flex; gap: 10px; align-items: center; color: var(--sp-stone); }
.st-crumb a { text-decoration: none; }
.st-crumb a:hover { color: var(--sp-purple); }
.st-pill { display: inline-flex; padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sp-purple) 45%, transparent); background: var(--sp-purple-soft); color: var(--sp-purple); }
.st-title { font-family: var(--sp-display); font-weight: 500; font-size: clamp(64px, 11vw, 168px); line-height: 0.9; letter-spacing: -0.05em; margin: 28px 0 0; }
.st-lede { font-family: var(--sp-display); font-weight: 500; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.18; letter-spacing: -0.02em; max-width: 900px; margin: 26px 0 0; }
.st-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; border-top: 1px solid var(--sp-line); }
.st-meta div { padding: 18px 20px 0 0; }
.st-meta b { display: block; font-weight: 500; font-size: 16px; margin-top: 8px; line-height: 1.35; }
.st-media { margin: 24px 0 0; border-radius: 26px; overflow: hidden; background: var(--sp-ink-2); position: relative; aspect-ratio: 16 / 9; }
.st-media video, .st-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-media .pf-devpair { position: absolute; inset: 0; }
.st-media--photo { display: grid; place-items: center; }
.st-media--photo img { width: auto; height: 78%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 3px solid var(--sp-card); }
.st-chapter { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; padding: 96px 0 0; }
.st-chapter-head { position: sticky; top: 112px; align-self: start; }
.st-chapter h2 { font-family: var(--sp-display); font-weight: 500; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.02; letter-spacing: -0.035em; margin: 14px 0 0; }
.st-body p { font-size: 19px; line-height: 1.6; margin: 0 0 20px; max-width: 720px; color: var(--sp-ink-2); }
.st-body p.big { font-family: var(--sp-display); font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.22; letter-spacing: -0.02em; }
.st-time { list-style: none; padding: 0; margin: 8px 0 0; position: relative; }
.st-time::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--sp-line-strong); }
.st-time li { position: relative; padding: 0 0 24px 40px; }
.st-time li::before { content: ""; position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--sp-paper); border: 1.5px solid var(--sp-ink); }
.st-time li.on::before { background: var(--sp-purple); border-color: var(--sp-purple); box-shadow: 0 0 0 5px var(--sp-purple-soft); }
.st-time b { display: block; font-family: var(--sp-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--sp-stone); font-weight: 400; text-transform: uppercase; }
.st-time span { display: block; font-size: 18px; line-height: 1.45; margin-top: 4px; }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.st-tile { background: var(--sp-card); border: 1px solid var(--sp-line); border-radius: 18px; padding: 22px; transition: border-color .3s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.st-tile:hover { border-color: color-mix(in srgb, var(--sp-purple) 50%, transparent); transform: translateY(-2px); }
.st-tile small { font-family: var(--sp-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--sp-purple); }
.st-tile b { display: block; font-family: var(--sp-display); font-weight: 500; font-size: 21px; letter-spacing: -0.015em; margin: 10px 0 6px; }
.st-tile p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--sp-stone); }
.st-shift { background: var(--sp-ink-2); color: var(--sp-on-dark); border-radius: 26px; padding: 40px; display: grid; gap: 0; }
.st-shift div { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.2fr); gap: 16px; align-items: baseline; padding: 18px 0; border-top: 1px solid rgba(241, 242, 238, 0.1); }
.st-shift div:first-child { border-top: 0; padding-top: 0; }
.st-shift s { color: var(--sp-on-dark-dim); text-decoration-color: var(--sp-lime); text-decoration-thickness: 2px; font-size: 17px; }
.st-shift em { font-style: normal; color: var(--sp-lime); font-family: var(--sp-mono); }
.st-shift span { font-size: 17px; line-height: 1.45; }
.st-next { padding-top: 120px; }
.st-next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.st-next a { display: block; text-decoration: none; background: var(--sp-card); border: 1px solid var(--sp-line); border-radius: 18px; padding: 22px; transition: border-color .3s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.st-next a:hover { border-color: var(--sp-purple); transform: translateY(-3px); }
.st-next a b { display: block; font-family: var(--sp-display); font-weight: 500; font-size: 30px; letter-spacing: -0.03em; margin: 10px 0 6px; }
.st-next a p { margin: 0; color: var(--sp-stone); font-size: 15px; line-height: 1.45; }
.sp-cta { margin: 120px 0 0; background: var(--sp-ink-2); color: var(--sp-on-dark); border-radius: 32px; padding: 72px 56px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.sp-cta h2 { font-family: var(--sp-display); font-weight: 500; font-size: clamp(40px, 5.6vw, 84px); line-height: 0.96; letter-spacing: -0.045em; margin: 14px 0 0; }
.sp-cta p { color: var(--sp-on-dark-dim); font-size: 17px; line-height: 1.55; margin: 0 0 22px; }
.sp-cta .sp-label { color: var(--sp-on-dark-dim); }
.sp-main { padding-bottom: 96px; }

/* ---- About ----------------------------------------------------------------- */
.ab-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.ab-people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.ab-person { display: flex; flex-direction: column; }
.ab-person img { aspect-ratio: 3 / 4; width: 100%; height: auto; object-fit: cover; display: block; border-radius: 18px; }
.ab-person div { padding: 14px 2px 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ab-person small { font-family: var(--sp-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--sp-stone); text-transform: uppercase; }
.ab-person b { font-family: var(--sp-display); font-weight: 500; font-size: 20px; letter-spacing: -0.025em; }
.ab-person p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--sp-stone); }
.ab-person a { font-family: var(--sp-mono); font-size: 11px; color: var(--sp-ink); text-decoration: none; margin-top: auto; padding-top: 10px; }
.ab-person a:hover { color: var(--sp-purple); }
.ab-jared { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: center; background: var(--sp-ink-2); color: var(--sp-on-dark); border-radius: 26px; padding: 40px; margin-top: 40px; }
.ab-jared img { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; border: 3px solid var(--sp-card); }
.ab-jared h3 { font-family: var(--sp-display); font-weight: 500; font-size: 40px; letter-spacing: -0.035em; margin: 10px 0 12px; }
.ab-jared p { color: var(--sp-on-dark-dim); font-size: 17px; line-height: 1.55; margin: 0; max-width: 640px; }
.ab-jared .sp-label { color: var(--sp-lime); }
.ab-creds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }

/* ---- Contact flow ------------------------------------------------------------ */
.ct { min-height: calc(100vh - 84px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; padding: 56px 0 96px; align-items: start; }
.ct-side { position: sticky; top: 120px; }
.ct-side h1 { font-family: var(--sp-display); font-weight: 500; font-size: clamp(48px, 6vw, 92px); line-height: 0.94; letter-spacing: -0.045em; margin: 16px 0 0; }
html[lang="es"] .ct-side h1 { font-size: clamp(40px, 4.6vw, 70px); }
.ct-side p { color: var(--sp-stone); font-size: 18px; line-height: 1.55; max-width: 440px; margin: 22px 0 0; }
.ct-note { margin-top: 32px; display: grid; gap: 10px; }
.ct-note div { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--sp-ink-2); }
.ct-note div::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sp-purple); flex: none; }
.ct-card { background: var(--sp-card); border: 1px solid var(--sp-line); border-radius: 28px; padding: 36px; position: relative; overflow: hidden; min-height: 560px; display: flex; flex-direction: column; }
.ct-progress { display: flex; gap: 6px; margin-bottom: 36px; }
.ct-progress i { flex: 1; height: 3px; border-radius: 3px; background: var(--sp-line); overflow: hidden; position: relative; }
.ct-progress i::after { content: ""; position: absolute; inset: 0; background: var(--sp-purple); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.ct-progress i.done::after { transform: scaleX(1); }
.ct-steps { position: relative; flex: 1; }
.ct-step { display: none; }
.ct-step.on { display: block; animation: ct-in .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes ct-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ct-step .sp-label { color: var(--sp-stone); }
.ct-q { font-family: var(--sp-display); font-weight: 500; font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -0.03em; margin: 12px 0 26px; }
.ct-q em { font-style: normal; color: var(--sp-purple); }
.ct-field { display: block; width: 100%; font: 500 clamp(22px, 2.2vw, 30px)/1.3 var(--sp-display); letter-spacing: -0.02em; color: var(--sp-ink); background: transparent; border: 0; border-bottom: 2px solid var(--sp-line-strong); padding: 10px 0 12px; outline: none; transition: border-color .25s ease; border-radius: 0; }
.ct-field::placeholder { color: color-mix(in srgb, var(--sp-stone) 55%, transparent); }
.ct-field:focus { border-bottom-color: var(--sp-purple); }
.ct-field + .ct-field { margin-top: 18px; }
textarea.ct-field { resize: none; min-height: 120px; font-size: 22px; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-chip { appearance: none; cursor: pointer; font: 500 16px var(--sp-sans); color: var(--sp-ink); background: var(--sp-paper); border: 1px solid var(--sp-line); border-radius: 999px; padding: 12px 18px; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.ct-chip:hover { border-color: var(--sp-line-strong); transform: translateY(-1px); }
.ct-chip[aria-pressed="true"] { background: var(--sp-ink); color: var(--sp-card); border-color: var(--sp-ink); }
.ct-chip:focus-visible { outline: 2px solid var(--sp-purple); outline-offset: 2px; }
.ct-hint { margin-top: 16px; font-size: 14px; color: var(--sp-stone); }
.ct-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; }
.ct-back { appearance: none; background: none; border: 0; cursor: pointer; font: 500 15px var(--sp-sans); color: var(--sp-stone); padding: 8px 0; }
.ct-back:hover { color: var(--sp-ink); }
.ct-back[hidden] { visibility: hidden; display: inline; }
.ct-key { font-family: var(--sp-mono); font-size: 10px; color: var(--sp-stone); letter-spacing: 0.06em; }
.ct-sum { display: grid; gap: 0; border-top: 1px solid var(--sp-line); margin-bottom: 8px; }
.ct-sum div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--sp-line); }
.ct-sum dt { font-family: var(--sp-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--sp-stone); text-transform: uppercase; padding-top: 4px; }
.ct-sum dd { margin: 0; font-size: 17px; line-height: 1.45; }
.ct-done { text-align: left; }
.ct-done > svg { width: 64px; height: 64px; }
.ct-done > svg path, .ct-done > svg circle { fill: none; stroke: var(--sp-purple); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1s cubic-bezier(.65,0,.35,1); }
.ct-done.on > svg path, .ct-done.on > svg circle { stroke-dashoffset: 0; }
.ct-done.on > svg path { transition-delay: .45s; }
.ct-err { color: var(--sp-error); font-size: 14px; margin-top: 12px; min-height: 18px; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 1099.98px) {
  .sp-nav { display: none; }
  .sp-lang { margin-left: auto; }
  .st-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .ab-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809.98px) {
  :root { --sp-gutter: 20px; }
  .sp-head .sp-wrap { height: 68px; }
  .sp-logo svg { height: 26px; }
  .sp-head .sp-wrap { gap: 10px; }
  .sp-head .sp-btn { white-space: nowrap; font-size: 13px; padding: 5px 5px 5px 14px; gap: 8px; }
  .sp-lang { font-size: 11px; gap: 6px; }
  .sp-head .sp-btn i { width: 28px; height: 28px; }
  .st-hero { padding-top: 36px; }
  .st-chapter { grid-template-columns: 1fr; gap: 14px; padding-top: 64px; }
  .st-chapter-head { position: static; }
  .st-body p { font-size: 17px; }
  .st-grid, .st-next-grid, .ab-three, .ab-creds { grid-template-columns: 1fr; }
  .st-media { aspect-ratio: 4 / 3; border-radius: 20px; }
  .st-shift { padding: 24px; }
  .st-shift div { grid-template-columns: 1fr; gap: 4px; }
  .st-shift em { display: none; }
  .sp-cta { grid-template-columns: 1fr; padding: 44px 24px; border-radius: 24px; margin-top: 80px; }
  .sp-foot .sp-wrap { grid-template-columns: 1fr; }
  .ab-people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ab-person div { padding: 12px 2px 0; }
  .ab-person p { font-size: 13.5px; }
  .ab-jared { grid-template-columns: 1fr; padding: 28px; }
  .ab-jared img { width: 140px; height: 140px; }
  .ct { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; }
  .ct-side { position: static; }
  .ct-card { padding: 24px; min-height: 480px; border-radius: 22px; }
  .ct-sum div { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-rise { opacity: 1; transform: none; transition: none; }
  .ct-step.on { animation: none; }
  .ct-done > svg path, .ct-done > svg circle { stroke-dashoffset: 0; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- About: credentials band and the partner badge ---------------------------- */
.ab-band { margin-top: 120px; padding: 110px 0 120px; background: var(--sp-ink-2); color: var(--sp-on-dark); }
.ab-band .sp-label { color: var(--sp-on-dark-dim); }
.ab-band h2 { font-family: var(--sp-display); font-weight: 500; font-size: clamp(40px, 5.6vw, 84px); line-height: 0.96; letter-spacing: -0.045em; margin: 16px 0 0; }
.ab-band h2 em { font-style: normal; color: var(--sp-lime); }
.ab-band-head p { color: var(--sp-on-dark-dim); font-size: 18px; line-height: 1.55; max-width: 620px; margin: 22px 0 0; }
.ab-certs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.ab-cert { margin: 0; background: color-mix(in srgb, var(--sp-on-dark) 4%, transparent); border: 1px solid rgba(241, 242, 238, 0.1); border-radius: 22px; overflow: hidden; transition: border-color .3s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.ab-cert:hover { border-color: color-mix(in srgb, var(--sp-lime) 55%, transparent); transform: translateY(-3px); }
.ab-cert-img { appearance: none; display: block; width: 100%; padding: 0; border: 0; background: var(--sp-white); cursor: zoom-in; }
.ab-cert-img img { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 1082; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.ab-cert:hover .ab-cert-img img { transform: scale(1.02); }
.ab-cert figcaption { padding: 20px 22px 22px; display: grid; gap: 8px; }
.ab-cert figcaption span { font-family: var(--sp-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-lime); }
.ab-cert figcaption b { font-family: var(--sp-display); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; }
.ab-partner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 120px; padding-top: 72px; border-top: 1px solid rgba(241, 242, 238, 0.12); }
.ab-partner h2 em { color: var(--sp-purple-on-dark); }
.ab-partner p { color: var(--sp-on-dark-dim); font-size: 18px; line-height: 1.6; max-width: 560px; margin: 22px 0 0; }
.ab-partner p b { color: var(--sp-on-dark); font-weight: 700; }
/* the partner badge keeps its own colours, the way a client's logo keeps theirs */
.cpn-badge { --cpn-cream: #f4efe6; --cpn-ink: #18120f; --cpn-ink-2: #2a2320; --cpn-rule: #d2cabb; --cpn-copper: #c1693f; --cpn-white: #ffffff;
  background: var(--cpn-cream); border-radius: 22px; overflow: hidden; width: 100%; max-width: 430px; justify-self: end; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); transition: transform .6s cubic-bezier(.22,1,.36,1); }
.cpn-badge:hover { transform: translateY(-4px) rotate(-1deg); }
.cpn-badge-top { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 44px 36px; }
.cpn-claude { width: 52px; height: 52px; flex: none; }
.cpn-divider { width: 1px; align-self: stretch; min-height: 64px; background: var(--cpn-rule); flex: none; }
.cpn-text { font-family: Georgia, "Times New Roman", serif; font-size: 34px; line-height: 1; color: var(--cpn-ink); font-weight: 500; display: flex; flex-direction: column; }
.cpn-sub { font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 400; color: var(--cpn-ink-2); margin-top: 5px; }
.cpn-badge-member { background: var(--cpn-copper); color: var(--cpn-white); text-align: center; text-transform: uppercase; letter-spacing: 0.34em; font-size: 14px; font-weight: 600; padding: 15px 0; font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
.sp-zoom { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 4vw; background: rgba(17, 19, 16, 0.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: zoom-out; }
.sp-zoom[hidden] { display: none; }
.sp-zoom img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5); animation: ct-in .4s cubic-bezier(.22,1,.36,1) both; }
.sp-zoom-x { position: absolute; top: 18px; right: 22px; appearance: none; border: 0; background: none; color: var(--sp-on-dark); font-size: 36px; cursor: pointer; }
@media (max-width: 809.98px) {
  .ab-band { margin-top: 80px; padding: 72px 0 80px; }
  .ab-certs { grid-template-columns: 1fr; margin-top: 36px; }
  .ab-partner { grid-template-columns: 1fr; gap: 32px; margin-top: 72px; padding-top: 48px; }
  .cpn-badge { justify-self: stretch; }
  .cpn-badge-top { gap: 16px; padding: 32px 22px; }
  .cpn-text { font-size: 26px; }
  .cpn-sub { font-size: 15px; }
  .cpn-claude { width: 42px; height: 42px; }
}

/* ---- Story: a horizontal band, a vertical clip beside text ------------------- */
.st-band { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 64px; align-items: center; margin-top: 96px; padding: 40px; background: var(--sp-card); border: 1px solid var(--sp-line); border-radius: 28px; }
.st-band-clip { margin: 0; }
.st-band-clip video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 20px; background: var(--sp-ink-2); }
.st-band-clip figcaption { margin-top: 12px; font-family: var(--sp-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--sp-stone); text-transform: uppercase; }
.st-band-text h2 { font-family: var(--sp-display); font-weight: 500; font-size: clamp(32px, 3.8vw, 56px); line-height: 1; letter-spacing: -0.04em; margin: 14px 0 24px; max-width: 560px; }
.st-band-text p { font-size: 19px; line-height: 1.6; color: var(--sp-ink-2); margin: 0 0 16px; max-width: 560px; }
@media (max-width: 809.98px) {
  .st-band { grid-template-columns: 1fr; gap: 28px; padding: 22px; margin-top: 64px; border-radius: 22px; }
  .st-band-clip { max-width: 260px; }
  .st-band-text p { font-size: 17px; }
}

/* ---- Legal text ------------------------------------------------------------- */
.lg-body { max-width: 760px; padding-bottom: 40px; }
.lg-body h2 { font-family: var(--sp-display); font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.02em; margin: 56px 0 14px; scroll-margin-top: 110px; }
.lg-body h3 { font-family: var(--sp-display); font-weight: 500; font-size: 20px; margin: 28px 0 10px; }
.lg-body p, .lg-body li { font-size: 17px; line-height: 1.65; color: var(--sp-ink-2); }
.lg-body ul, .lg-body ol { padding-left: 22px; }
.lg-body a { color: var(--sp-purple); }

/* ---- Language switch (EN | ES) --------------------------------------------- */
.sp-nav { margin: 0 auto; }
.sp-lang { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sp-mono); font-size: 12px; letter-spacing: .08em; color: var(--sp-stone); }
.sp-lang a, .sp-lang [aria-current] { text-decoration: none; padding: 6px 2px; }
.sp-lang a { color: var(--sp-stone); transition: color .2s ease; }
.sp-lang a:hover { color: var(--sp-purple); }
.sp-lang [aria-current] { color: var(--sp-ink); }
.sp-lang a:focus-visible { outline: 2px solid var(--sp-purple); outline-offset: 3px; border-radius: 4px; }