@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../f/5628567856d60d71.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../f/5d91eb5d522a0308.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(../f/4d6a56168573c731.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(../f/c68530044e7c4ce6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../f/920711de9ae96c18.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../f/6438d7b8ea9c7c39.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --brand-color: #0c1d3b;
  --brand-accent: #c19a4e;
  --brand-ink: #3a3b38;
  --brand-bg: #f8f6f5;
  --brand-surface: #ffffff;
  --brand-display: Playfair Display, Georgia, Times New Roman, serif;
  --brand-font: Montserrat, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
}
/*
 * Editorial — the first theme.
 *
 * Extracted from Amarfil Capital's design system (their tokens: spacing, typography, radii,
 * shadows, motion), with every colour taken out: colour is the brand's. What is left is how a
 * page is built — private-banking editorial: a generous serif display scale, wide gutters, square
 * corners, short accent rules, low warm shadows and restrained reveals.
 *
 * Only `--theme-*` variables are declared here, and anything derived from colour reads a
 * `--brand-*` variable with a neutral fallback. `tests/unit/services/core/test_themes.py` holds
 * both.
 */
:root {
  /* One lever for the whole scale above the wide breakpoint: every size is in rem, so the design
     grows with the screen and stops growing before the first screen overflows. */
  --theme-root-size-wide: clamp(0.875rem, min(0.54vw + 0.514rem, 2.05vh), 1.375rem);

  /* Spacing */
  --theme-space-1: 0.25rem;
  --theme-space-2: 0.5rem;
  --theme-space-3: 0.75rem;
  --theme-space-4: 1rem;
  --theme-space-5: 1.5rem;
  --theme-space-6: 2rem;
  --theme-space-7: 3rem;
  --theme-space-8: 4rem;
  --theme-space-9: 6rem;
  --theme-space-10: 8rem;
  --theme-gutter: clamp(1.5rem, 5vw, 4.5rem);
  --theme-container: 77.5rem;
  --theme-section-padding: clamp(3rem, 7vw, 6.875rem);

  /* Shape: essentially square, a hint of radius on controls only */
  --theme-radius-none: 0px;
  --theme-radius-sm: 2px;
  --theme-radius-md: 4px;
  --theme-border-width: 1px;
  --theme-rule-width: 2px;
  --theme-rule-length: 2.375rem;
  --theme-card-padding: 2.5rem 2.25rem;

  /* Hairlines and shadows, tinted by the brand; the fallbacks are the neutral the report uses,
     so a tenant with no brand gets grey, never another firm's colour */
  --theme-hairline: color-mix(in srgb, var(--brand-ink, #14161a) 14%, var(--brand-bg, #ffffff));
  --theme-shadow-sm: 0 1px 2px color-mix(in srgb, var(--brand-ink, #14161a) 5%, transparent);
  --theme-shadow-card: 0 18px 40px -24px color-mix(in srgb, var(--brand-color, #14161a) 22%, transparent);
  --theme-shadow-lift: 0 30px 60px -30px color-mix(in srgb, var(--brand-color, #14161a) 35%, transparent);

  /* Type scale: editorial, generous */
  --theme-fs-display-1: clamp(3.5rem, 7vw, 6rem);
  --theme-fs-display-2: clamp(2.75rem, 5vw, 4.25rem);
  --theme-fs-h1: 2.75rem;
  --theme-fs-h2: 2rem;
  --theme-fs-h3: 1.625rem;
  --theme-fs-lead: 1.25rem;
  --theme-fs-body: 1.0625rem;
  --theme-fs-small: 0.9375rem;
  --theme-fs-eyebrow: 0.8125rem;
  --theme-fs-button: 0.8125rem;
  --theme-fw-regular: 400;
  --theme-fw-medium: 500;
  --theme-fw-semibold: 600;
  --theme-fw-bold: 700;
  --theme-fw-display: 800;
  --theme-lh-tight: 1.05;
  --theme-lh-heading: 1.15;
  --theme-lh-body: 1.65;
  --theme-ls-eyebrow: 0.22em;
  --theme-ls-button: 0.18em;
  --theme-ls-tight: -0.01em;
  --theme-eyebrow-case: uppercase;
  --theme-button-case: uppercase;
  --theme-button-padding: 1.375rem 2.75rem;

  /* Motion: fades and short upward reveals, no bounce */
  --theme-ease: cubic-bezier(.22, .61, .36, 1);
  --theme-dur-fast: 160ms;
  --theme-dur-med: 320ms;
  --theme-dur-reveal: 640ms;
  --theme-dur-art: 900ms;
  --theme-reveal-distance: 1.5rem;
  --theme-lift: -4px;

  /* Imagery: warm, desaturated, so the accent stays the only strong colour */
  --theme-image-filter: saturate(.45) sepia(.18) brightness(1.05) contrast(.93);
}


/*
 * A tenant's public website — how every section is drawn.
 *
 * Nothing here is any tenant's. Colours and type come from the brand (`--brand-*`), how things are
 * built — spacing, shapes, scale, motion — from the theme (`--theme-*`); every read carries a
 * neutral fallback, so a tenant with no brand and no theme still gets a well-made page. The steps
 * between colours are derived with color-mix, like the report and the slides.
 *
 * Small accent text uses the accent mixed 70% with black: the accent itself is often too light to
 * read as text (Amarfil's gold is 2.44:1 on their ivory). That 70% is `ACCENT_TEXT_MIX` in
 * `services/core/branding.py` and must stay equal in report-theme.css, slide-theme.css and here.
 */

:root {
  --s-bg: var(--brand-bg, #ffffff);
  --s-surface: var(--brand-surface, #ffffff);
  --s-ink: var(--brand-ink, #14161a);
  --s-heading: color-mix(in srgb, var(--brand-ink, #14161a) 35%, #000);
  --s-body: color-mix(in srgb, var(--brand-ink, #14161a) 78%, var(--brand-bg, #ffffff));
  --s-brand: var(--brand-color, var(--brand-ink, #14161a));
  --s-brand-deep: color-mix(in srgb, var(--brand-color, var(--brand-ink, #14161a)) 70%, #000);
  --s-accent: var(--brand-accent, #2a78d6);
  --s-accent-text: color-mix(in srgb, var(--brand-accent, #2a78d6) 70%, #000);
  --s-accent-soft: color-mix(in srgb, var(--brand-accent, #2a78d6) 30%, var(--brand-bg, #ffffff));
  --s-accent-on-dark: color-mix(in srgb, var(--brand-accent, #2a78d6) 88%, #fff);
  --s-alt-bg: color-mix(in srgb, var(--brand-bg, #ffffff) 45%, #ffffff);
  --s-on-dark: color-mix(in srgb, var(--brand-bg, #ffffff) 92%, #fff);
  --s-on-dark-soft: color-mix(in srgb, var(--brand-bg, #ffffff) 82%, var(--brand-color, #14161a));
  --s-hairline: var(--theme-hairline, rgba(0, 0, 0, 0.12));
  --s-display: var(--brand-display, Georgia, Times New Roman, serif);
  --s-font: var(--brand-font, -apple-system, Segoe UI, Helvetica, Arial, sans-serif);
  --s-gutter: var(--theme-gutter, clamp(1.25rem, 5vw, 4rem));
  --s-radius: var(--theme-radius-sm, 4px);
  --s-ease: var(--theme-ease, ease);
  --s-topbar: calc(4.875rem + 1px);
  --s-art-opacity: 1;
}

@media (min-width: 900px) {
  :root { font-size: var(--theme-root-size-wide, 1rem); }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--s-bg);
  color: var(--s-heading);
  font-family: var(--s-font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--s-accent-text); text-decoration: none; }
a:hover { color: var(--s-heading); }
em { font-style: italic; }
p { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
::selection { background: var(--s-accent-soft); color: var(--s-heading); }
:focus-visible { outline: 2px solid var(--s-accent-text); outline-offset: 0.1875rem; border-radius: var(--s-radius); }
[id] { scroll-margin-top: var(--s-topbar); }

.site-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.site-skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 20; padding: 0.75rem 1rem;
  background: var(--s-heading); color: var(--s-bg);
}
.site-skip:focus { top: 1rem; color: var(--s-bg); }

/* ─── Eyebrow ─────────────────────────────────────────────────────────── */

.site-eyebrow {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 1.125rem; max-width: 100%;
  font-family: var(--s-font);
  font-size: var(--theme-fs-eyebrow, 0.8125rem);
  font-weight: var(--theme-fw-semibold, 600);
  letter-spacing: var(--theme-ls-eyebrow, 0.2em);
  text-transform: var(--theme-eyebrow-case, uppercase);
  color: var(--s-accent-text);
}
.site-eyebrow::before {
  content: ""; display: inline-block; flex: 0 0 auto;
  width: var(--theme-rule-length, 2.375rem); height: var(--theme-rule-width, 2px);
  background: var(--s-accent);
}

/* ─── Headings ────────────────────────────────────────────────────────── */

.site-heading {
  font-family: var(--s-display);
  font-weight: var(--theme-fw-display, 700);
  color: var(--s-heading);
}
.site-heading em { font-weight: var(--theme-fw-medium, 500); }
h1.site-heading {
  font-size: var(--theme-fs-display-1, clamp(2.5rem, 6vw, 4.5rem));
  line-height: var(--theme-lh-tight, 1.05);
  letter-spacing: var(--theme-ls-tight, -0.01em);
  margin-top: 1.375rem;
}
h2.site-heading {
  font-size: var(--theme-fs-display-2, clamp(2rem, 4.5vw, 3.5rem));
  line-height: var(--theme-lh-heading, 1.15);
  margin-top: 1.375rem;
}

.s-body, .s-hero-lead, .s-card-text {
  font-family: var(--s-font);
  color: var(--s-body);
  line-height: var(--theme-lh-body, 1.65);
  font-size: var(--theme-fs-body, 1.0625rem);
}
.s-body { margin-top: 1.5rem; }
.s-body p + p { margin-top: 1em; }

/* ─── Buttons ─────────────────────────────────────────────────────────── */

.site-button {
  display: inline-flex; align-items: center; gap: 0.875rem;
  font-family: var(--s-font);
  font-weight: var(--theme-fw-semibold, 600);
  font-size: var(--theme-fs-button, 0.8125rem);
  letter-spacing: var(--theme-ls-button, 0.16em);
  text-transform: var(--theme-button-case, uppercase);
  line-height: 1;
  padding: var(--theme-button-padding, 1.125rem 2rem);
  border-radius: var(--s-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--theme-dur-fast, 160ms) var(--s-ease),
              box-shadow var(--theme-dur-fast, 160ms) var(--s-ease),
              filter var(--theme-dur-fast, 160ms) var(--s-ease);
}
.site-button:hover { transform: translateY(-2px); box-shadow: var(--theme-shadow-card, 0 12px 30px -18px rgba(0, 0, 0, .3)); }
.site-button:active { transform: translateY(0) scale(.985); box-shadow: none; filter: brightness(.92); }
.site-button--solid, .site-button--solid:hover { background: var(--s-heading); border-color: var(--s-heading); color: var(--s-bg); }
.site-button--accent, .site-button--accent:hover { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-brand-deep); }
.site-button--compact { padding: 0.875rem 1.25rem; }
.site-button-arrow { font-size: 1.25em; font-weight: var(--theme-fw-regular, 400); }
.s-actions { margin-top: 2.25rem; }

/* ─── Header ──────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem var(--s-gutter);
  background: var(--s-bg);
  border-bottom: 1px solid var(--s-hairline);
  transition: box-shadow var(--theme-dur-med, 320ms) var(--s-ease);
}
.js.is-scrolled .site-header { box-shadow: var(--theme-shadow-card, 0 12px 30px -18px rgba(0, 0, 0, .3)); }
.site-brand { display: inline-flex; align-items: center; color: var(--s-heading); }
.site-logo { height: 2.375rem; width: auto; display: block; }
.site-wordmark { font-family: var(--s-display); font-weight: var(--theme-fw-bold, 700); font-size: 1.25rem; }
.site-nav { display: flex; align-items: center; gap: 2rem; }
.site-nav-list { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.site-nav-link {
  display: inline-flex; align-items: center; gap: 1.125rem;
  font-size: var(--theme-fs-eyebrow, 0.8125rem);
  font-weight: var(--theme-fw-semibold, 600);
  letter-spacing: var(--theme-ls-eyebrow, 0.2em);
  text-transform: var(--theme-eyebrow-case, uppercase);
  color: var(--s-heading);
  transition: color var(--theme-dur-fast, 160ms) var(--s-ease);
}
.site-nav-link::after {
  content: ""; display: inline-block; width: var(--theme-rule-length, 2.375rem);
  height: var(--theme-rule-width, 2px); background: var(--s-accent);
}
.site-nav-link:hover, .site-nav-link[aria-current="page"] { color: var(--s-accent-text); }
.site-menu-toggle { display: none; }
.site-top-sentinel { height: 0; }

/* ─── Sections ────────────────────────────────────────────────────────── */

.s { padding: var(--theme-section-padding, clamp(3rem, 7vw, 6rem)) var(--s-gutter); }
.s-measure, .s-head { max-width: 46em; }

.s-hero {
  display: grid;
  grid-template-columns: minmax(0, 44em) minmax(0, min(37.5rem, 781px));
  justify-content: center; align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
  padding-top: 2.75rem; padding-bottom: 2.75rem;
}
main > .s-hero:first-child { min-height: calc(100vh - var(--s-topbar)); min-height: calc(100dvh - var(--s-topbar)); }
.s-hero--text { grid-template-columns: minmax(0, 52em); justify-content: start; }
.s-hero-copy { min-width: 0; }
.s-hero-lead { font-size: var(--theme-fs-lead, 1.25rem); line-height: 1.6; max-width: 28em; margin-top: 1.625rem; }
.s-hero-lead + .s-actions { margin-top: 2.25rem; }
.s-hero-art { margin: 0; display: flex; align-items: center; justify-content: center; min-width: 0; }
.s-hero-img, .s-split-img {
  display: block; width: 100%; height: auto; object-fit: contain;
  filter: var(--theme-image-filter, none);
}
.s-hero-img { max-width: min(37.5rem, 781px); max-height: calc(100dvh - var(--s-topbar) - 5.5rem); opacity: var(--s-art-opacity); }

.is-framed { position: relative; padding: 1.375rem; border: 1px solid var(--s-hairline); }
.is-framed::before, .is-framed::after {
  content: ""; position: absolute; width: 2.875rem; height: 2.875rem; pointer-events: none;
}
.is-framed::before { top: -1px; left: -1px; border-top: var(--theme-rule-width, 2px) solid var(--s-accent); border-left: var(--theme-rule-width, 2px) solid var(--s-accent); }
.is-framed::after { bottom: -1px; right: -1px; border-bottom: var(--theme-rule-width, 2px) solid var(--s-accent); border-right: var(--theme-rule-width, 2px) solid var(--s-accent); }

.s-cards { background: var(--s-alt-bg); border-top: 1px solid var(--s-hairline); }
.s-cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; margin-top: 3.5rem; }
.s-cards-grid--1 { grid-template-columns: minmax(0, 40rem); }
.s-cards-grid--2, .s-cards-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-head + .s-cards-grid { margin-top: 3.5rem; }
.s-cards > .s-cards-grid:first-child { margin-top: 0; }
.s-card-slot { display: grid; }
.s-card {
  position: relative;
  background: var(--s-surface);
  border: 1px solid var(--s-hairline);
  border-radius: var(--s-radius);
  box-shadow: var(--theme-shadow-card, 0 12px 30px -18px rgba(0, 0, 0, .3));
  padding: var(--theme-card-padding, 2.25rem 2rem);
  transition: transform var(--theme-dur-med, 320ms) var(--s-ease), box-shadow var(--theme-dur-med, 320ms) var(--s-ease);
}
.s-card:hover { transform: translateY(var(--theme-lift, -4px)); box-shadow: var(--theme-shadow-lift, 0 20px 40px -20px rgba(0, 0, 0, .35)); }
.s-card.has-rule::before {
  content: ""; position: absolute; top: 0; left: 2.25rem;
  width: 2.5rem; height: var(--theme-rule-width, 2px); background: var(--s-accent);
}
.s-card-number { font-family: var(--s-display); font-style: italic; font-size: 1.25rem; color: var(--s-accent-text); }
.s-card-title {
  font-family: var(--s-display); font-size: var(--theme-fs-h3, 1.5rem);
  font-weight: var(--theme-fw-bold, 700); color: var(--s-heading); margin: 1.125rem 0 0.875rem;
}
.s-card-number + .s-card-title { margin-top: 1.125rem; }
.s-card > .s-card-title:first-child { margin-top: 0; }

.s-cta { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: center; }
.s-cta-action { justify-self: end; }
.s-cta--dark { background: var(--s-brand); }
.s-cta--dark .site-eyebrow { color: var(--s-accent-on-dark); }
.s-cta--dark .site-heading { color: var(--s-on-dark); }
.s-cta--light { background: var(--s-alt-bg); border-top: 1px solid var(--s-hairline); }

.s-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.s-split--image-left .s-split-art { order: -1; }
.s-split--text { grid-template-columns: minmax(0, 46em); }
.s-split-art { margin: 0; }

.s-missing { min-height: 60vh; display: grid; align-content: center; }

/* ─── Footer ──────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--s-brand-deep);
  color: var(--s-on-dark-soft);
  padding: 3rem var(--s-gutter);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.site-footer-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.25rem; }
.site-footer-name { font-family: var(--s-display); font-size: 1.25rem; font-weight: var(--theme-fw-bold, 700); color: var(--s-on-dark); }
.site-footer-tagline {
  font-size: 0.75rem; letter-spacing: var(--theme-ls-eyebrow, 0.2em);
  text-transform: var(--theme-eyebrow-case, uppercase); color: var(--s-accent-on-dark);
}
.site-footer-note { margin-top: 1.75rem; font-size: 0.8125rem; line-height: 1.6; max-width: 60em; }
.site-footer-note p + p { margin-top: 0.75em; }

/* ─── Motion ──────────────────────────────────────────────────────────── */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--theme-reveal-distance, 1.5rem));
  transition: opacity var(--theme-dur-reveal, 600ms) var(--s-ease), transform var(--theme-dur-reveal, 600ms) var(--s-ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .s-cards-grid .s-card-slot:nth-child(3n+2) { transition-delay: 110ms; }
.js .s-cards-grid .s-card-slot:nth-child(3n) { transition-delay: 220ms; }
.js .s-hero-img {
  opacity: 0; transform: scale(1.04);
  transition: opacity var(--theme-dur-art, 900ms) var(--s-ease), transform var(--theme-dur-art, 900ms) var(--s-ease);
  transition-delay: 120ms;
}
.js .s-hero-img.is-loaded { opacity: var(--s-art-opacity); transform: none; }

/* Inside Orcinus's editor every section shows at once: a person edits what is below the fold too. */
.is-editing [data-reveal] { opacity: 1; transform: none; transition: none; }
.is-editing .s-hero-img { opacity: var(--s-art-opacity); transform: none; transition: none; }
.is-editing html, html.is-editing { scroll-behavior: auto; }

/* ─── Small screens ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
  :root { --s-art-opacity: .35; }
  .s-hero { grid-template-columns: minmax(0, 1fr); align-content: start; position: relative; }
  .s-hero-copy { position: relative; z-index: 1; }
  .s-hero-lead { color: var(--s-ink); }
  .s-hero-art { position: absolute; inset: auto 0 0 0; z-index: 0; pointer-events: none; justify-content: flex-end; }
  .s-hero-art.is-framed { border: 0; padding: 0; }
  .s-hero-art.is-framed::before, .s-hero-art.is-framed::after { display: none; }
  .s-hero-img {
    max-height: 58vh; max-width: none; width: auto;
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 45%, transparent 88%);
            mask-image: linear-gradient(to top, #000 0%, #000 45%, transparent 88%);
  }
  .s-cards-grid, .s-cards-grid--2, .s-cards-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .s-cta, .s-split { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .s-cta-action { justify-self: start; }
  .s-split--image-left .s-split-art { order: 0; }

  .js .site-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; background: transparent; border: 1px solid var(--s-hairline);
    border-radius: var(--s-radius); color: var(--s-heading); cursor: pointer;
  }
  .site-menu-bars, .site-menu-bars::before, .site-menu-bars::after {
    display: block; width: 1.125rem; height: 2px; background: currentColor; position: relative;
  }
  .site-menu-bars::before, .site-menu-bars::after { content: ""; position: absolute; left: 0; }
  .site-menu-bars::before { top: -6px; }
  .site-menu-bars::after { top: 6px; }
  .js .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 1.25rem;
    padding: 1.5rem var(--s-gutter) 2rem; background: var(--s-bg);
    border-bottom: 1px solid var(--s-hairline); box-shadow: var(--theme-shadow-card, none);
  }
  .js .site-nav.is-open { display: flex; }
  .site-nav-list { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .site-header { flex-wrap: wrap; }
  /* One thing in the menu stays in the header, as on a desk: folding it would cost a tap. */
  .site-header--single { flex-wrap: nowrap; }
  .js .site-header--single .site-nav {
    display: flex; position: static; flex-direction: row; align-items: center;
    padding: 0; background: none; border: 0; box-shadow: none;
  }
  .site-header--single .site-nav-list { flex-direction: row; align-items: center; }
}

@media (max-width: 600px) {
  h1.site-heading { font-size: clamp(2.25rem, 9vw, 3rem); }
  h2.site-heading { font-size: clamp(2rem, 8vw, 2.75rem); }
  .s-hero-lead { font-size: var(--theme-fs-body, 1.0625rem); }
  .site-button { padding: 1.125rem 2rem; }
  .site-footer-row { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .site-button:hover, .s-card:hover { transform: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .s-hero-img { opacity: var(--s-art-opacity); transform: none; }
}

/*
 * Where the chat sits, in the editor's preview only: the published page carries the chat itself,
 * loaded from Orcinus. Same size, place and colours as the chat's own closed bubble, so what the
 * person sees while editing is where visitors will find it — without a live chat in the editor.
 */
.site-chat-standin {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 50;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--s-brand);
  color: var(--s-bg);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--s-ink) 30%, transparent);
  cursor: pointer;
}
.site-chat-standin svg { width: 26px; height: 26px; }
.site-chat-standin[hidden] { display: none; }

/* "Ver borrador" only: the chat's real box, in its sample mode, where the bubble was — sized like the
   frame a live site gets, and shown once the sample says it loaded (chat-sample.js). */
.site-chat-sample {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: 84px;
  height: 84px;
  border: 0;
  background: transparent;
  color-scheme: normal;
  visibility: hidden;
}
.site-chat-sample.is-ready { visibility: visible; }
.site-chat-sample.is-open { width: min(400px, 100vw); height: min(620px, 100vh); }