/* ==========================================================================
   Vasari - www.vasari.art
   The single public marketing site. Three co-equal segments: consumer
   (/watch), art professionals (/codex), institutional (/institutions).
   ========================================================================== */

/* ---------- Fonts ----------
   Brand pair per vasari-kb design/brand-canon.md (2026-08-14):
   Montserrat = brand sans (body, nav, buttons, eyebrows),
   Cormorant Garamond = brand serif (display/hero). Sora/Prompt retired. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-var-latin.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+2074, 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('../fonts/montserrat-var-latin-ext.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-var-latin.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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-var-latin-ext.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;
}

/* ---------- Design tokens ---------- */
:root {
  --teal: #60b8ba;
  --teal-dark: #358c8b;
  --orange: #ff6b35;
  --ink: #000;
  --ink-70: rgba(0, 0, 0, 0.7);
  --ink-55: rgba(0, 0, 0, 0.55);
  --rule: rgba(0, 0, 0, 0.14);
  --paper: #fff;
  --paper-alt: #f6f7f7;
  --panel: rgba(24, 30, 38, 0.62);

  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;

  --header-h: 92px;
  --page-max: 1328px;
  --gutter: clamp(20px, 4vw, 56px);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.01em;
}
p {
  margin: 0 0 1.05em;
}
p:last-child {
  margin-bottom: 0;
}
strong,
b {
  font-weight: 600;
}
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  background: #fff;
  font-size: 14px;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: clamp(56px, 8vw, 110px);
}
.section--tight {
  padding-block: clamp(40px, 5vw, 64px);
}
.section--alt {
  background: var(--paper-alt);
}
.stack > * + * {
  margin-top: 1.05em;
}

/* Cap an image's width without letting the cap beat the container.
   Set the ceiling with --cap; a bare `max-width: 560px` would overflow a
   narrower viewport, min() will not. */
.img-cap {
  width: min(var(--cap, 100%), 100%);
  margin-inline: auto;
}

/* Display type scale, matched to the Wix source */
.t-hero {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.7vw, 38px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--teal);
  letter-spacing: 0;
}
.t-xl {
  font-size: clamp(32px, 4.6vw, 50px);
  line-height: 1.2;
}
.t-lg {
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.25;
}
.t-md {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.3;
}
.t-page {
  font-size: clamp(40px, 6vw, 62px);
  line-height: 1.08;
}
.lede {
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--ink-70);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 14px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  transition: background-color 0.18s ease, color 0.18s ease,
    border-color 0.18s ease, opacity 0.18s ease;
}
.btn--outline {
  border-color: var(--orange);
  color: var(--orange);
  background: #fff;
}
.btn--outline:hover {
  background: var(--orange);
  color: #fff;
}
.btn--pill {
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  padding-inline: 24px;
}
.btn--pill:hover {
  background: var(--teal-dark);
}
.btn--solid {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn--solid:hover {
  background: #333;
}
.btn--wide {
  width: 100%;
  max-width: 278px;
}
.link-more {
  display: inline-block;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.link-more:hover {
  color: var(--teal);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 34px);
}
.site-header__logo {
  flex: 0 0 auto;
}
.site-header__logo img {
  width: clamp(130px, 15vw, 188px);
}
.site-header__nav {
  display: none;
  gap: 26px;
  font-size: 15px;
}
.site-header__nav a {
  text-decoration: none;
}
.site-header__nav a:hover {
  color: var(--teal);
}
.site-header__nav a[aria-current='page'] {
  color: var(--teal);
}
.site-header__end {
  flex: 0 0 auto;
  margin-left: auto; /* pins the CTA + burger to the right edge at every width */
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Hamburger */
.burger {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  gap: 5px;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}
.burger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.burger[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Drawer ---------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.24s ease, visibility 0.24s ease;
}
.drawer[data-open='true'] {
  visibility: visible;
  opacity: 1;
}
.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  border: 0;
  width: 100%;
  cursor: pointer;
}
.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 88vw);
  background: #fff;
  box-shadow: -14px 0 44px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  padding: 26px var(--gutter) 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 0.75, 0.3, 1);
}
.drawer[data-open='true'] .drawer__panel {
  transform: none;
}
.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}
.drawer__top img {
  width: 150px;
}
.drawer__close {
  width: 42px;
  height: 42px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}
.drawer__nav {
  display: flex;
  flex-direction: column;
}
.drawer__nav a {
  padding: 13px 0;
  font-size: 17px;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.drawer__nav a:hover {
  color: var(--teal);
}
.drawer__nav a[aria-current='page'] {
  color: var(--teal);
}
.drawer__foot {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.is-locked {
  overflow: hidden;
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  min-height: min(78vh, 720px);
  display: grid;
  align-items: center;
  padding-block: clamp(48px, 8vw, 96px);
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16),
    rgba(0, 0, 0, 0.1) 45%,
    rgba(0, 0, 0, 0.22)
  );
}
.hero__mark {
  text-align: center;
  margin-bottom: clamp(28px, 5vw, 58px);
}
.hero__mark img {
  width: clamp(230px, 32vw, 460px);
  margin-inline: auto;
  filter: drop-shadow(0 2px 14px rgba(255, 255, 255, 0.5));
}
.hero__mark .t-hero {
  margin-top: 18px;
}
.hero__panel {
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(24px, 3.4vw, 40px) clamp(22px, 3.4vw, 44px);
  background: var(--panel);
  backdrop-filter: blur(3px);
  color: #fff;
}
.hero__panel .hero__claim {
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 1.4em;
}
.hero__panel p {
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 300;
  line-height: 1.55;
}

/* ---------- Split / collage sections ---------- */
.split {
  display: grid;
  gap: clamp(28px, 4.5vw, 68px);
  align-items: center;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
  .split--media-right > .split__media {
    order: 2;
  }
}
.split__media img {
  width: 100%;
}
.split__body {
  max-width: 620px;
}

/* Artwork credit card */
.artcard figure {
  margin: 0;
}
.artcard img {
  width: 100%;
  box-shadow: var(--shadow);
}
.artcard figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  text-align: right;
}
.artcard figcaption a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.artcard figcaption a:hover {
  color: var(--teal);
}

.duo {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
}
@media (min-width: 820px) {
  .duo {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .duo > :nth-child(2) {
    margin-top: clamp(40px, 7vw, 96px);
  }
}

/* ---------- Store badges ---------- */
.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
}
.badges a {
  display: block;
  transition: opacity 0.18s ease;
}
.badges a:hover {
  opacity: 0.78;
}
.badges img {
  height: 46px;
  width: auto;
}

/* ---------- Logo band ---------- */
.logoband {
  padding-block: clamp(40px, 6vw, 76px);
  text-align: center;
}
.logoband img {
  width: clamp(200px, 26vw, 330px);
  margin-inline: auto;
}

/* ---------- Cards (news / whitepapers) ---------- */
.cards {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule);
}
.card__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper-alt);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__body {
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 16px;
}
.card__title {
  font-size: 18px;
  line-height: 1.34;
  font-weight: 400;
}
.card__body .link-more {
  margin-top: auto;
  align-self: flex-start;
}

/* ---------- Prose (legal + long copy) ---------- */
.prose {
  max-width: 74ch;
}
.prose h2 {
  font-size: clamp(22px, 2.2vw, 27px);
  margin: 2em 0 0.6em;
}
.prose h3 {
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 400;
  margin: 1.7em 0 0.5em;
}
.prose p,
.prose li {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ink-70);
}
.prose a {
  color: var(--teal-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.prose ul,
.prose ol {
  padding-left: 1.25em;
  margin: 0 0 1.05em;
}
.prose li + li {
  margin-top: 0.45em;
}
.prose .meta {
  font-size: 14px;
  color: var(--ink-55);
  margin-bottom: 2em;
}
.prose address {
  font-style: normal;
  color: var(--ink-70);
  font-size: 15.5px;
  line-height: 1.68;
}

/* ---------- Steps (art stick / tv guides) ---------- */
.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 22px;
}
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 52px;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 15px;
  font-weight: 400;
}
.steps h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 4px 0 8px;
}
.steps ul {
  margin: 0;
  padding-left: 1.15em;
  color: var(--ink-70);
}
.steps ul li + li {
  margin-top: 0.4em;
}

.callout {
  padding: 20px 24px;
  background: rgba(96, 184, 186, 0.1);
  border-left: 3px solid var(--teal);
  font-size: 15px;
  color: var(--ink-70);
}

/* Device blocks on the TV page */
.device {
  padding-block: clamp(34px, 4vw, 52px);
  border-top: 1px solid var(--rule);
}
.device:first-of-type {
  border-top: 0;
}
.device__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
}
.device__head h2 {
  font-size: clamp(24px, 2.6vw, 32px);
}

/* ---------- Contact ---------- */
.contact {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
}
@media (min-width: 900px) {
  .contact {
    grid-template-columns: minmax(280px, 0.8fr) 1.2fr;
  }
}
.contact__detail a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.contact__detail a:hover {
  color: var(--teal);
}
.contact__detail p {
  margin: 0 0 6px;
}

.form-grid {
  display: grid;
  gap: 18px 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .form-grid .field--full {
    grid-column: 1 / -1;
  }
}
.field label {
  display: block;
  font-size: 14px;
  margin-bottom: 7px;
}
.field input,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--ink);
  padding: 10px 12px;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea {
  min-height: 96px;
  resize: vertical;
  border: 1px solid var(--ink);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 1px 0 0 var(--teal);
}
.field--invalid input,
.field--invalid textarea {
  border-color: #c0392b;
}
.field__error {
  display: none;
  margin-top: 6px;
  font-size: 13px;
  color: #c0392b;
}
.field--invalid .field__error {
  display: block;
}
.form-actions {
  margin-top: 26px;
}
.form-status {
  margin-top: 16px;
  font-size: 15px;
  min-height: 1.4em;
}
.form-status[data-tone='ok'] {
  color: var(--teal-dark);
}
.form-status[data-tone='err'] {
  color: #c0392b;
}

/* ---------- Footer ---------- */
.site-footer {
  padding-block: clamp(44px, 6vw, 72px);
  border-top: 1px solid var(--rule);
  background: var(--paper-alt);
}
.site-footer__grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .site-footer__grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}
.site-footer h2 {
  font-size: 20px;
  margin-bottom: 14px;
}
.site-footer a {
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--teal);
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 15px;
}
.site-footer__logo img {
  width: 168px;
  margin-bottom: 16px;
}
.social {
  display: flex;
  gap: 14px;
  margin-top: 18px;
}
.social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  transition: background-color 0.18s ease, color 0.18s ease,
    border-color 0.18s ease;
}
.social a:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.site-footer__legal {
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ink-55);
}
.site-footer__legal nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

/* ---------- Page header for interior pages ---------- */
.pagehead {
  position: relative;
  padding-block: clamp(52px, 7vw, 96px);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-alt);
  isolation: isolate;
}
.pagehead--art {
  background: #0f1118;
  color: #fff;
  border-bottom: 0;
}
.pagehead--art .lede {
  color: rgba(255, 255, 255, 0.76);
}
.pagehead__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.pagehead__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.pagehead p {
  max-width: 62ch;
}

/* ---------- Placeholder pages ---------- */
.placeholder {
  min-height: 52vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(60px, 9vw, 120px);
}
.placeholder__inner {
  max-width: 52ch;
}
.placeholder img {
  width: 168px;
  margin: 0 auto 30px;
}

/* ---------- Responsive header behaviour ---------- */
@media (min-width: 900px) {
  .site-header__nav {
    display: flex;
  }
}
@media (max-width: 620px) {
  .site-header__end .btn--pill {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   Single-site components
   Added for the www.vasari.art consolidation. Every colour below resolves to
   a token in :root - no new hex values (vasari-kb design/brand-canon.md).
   ========================================================================== */

/* ---------- The three co-equal segments ----------
   One grid, one card, no featured state. Nothing here may give a segment more
   visual weight than the other two: no accent border on one, no scale, no
   ordering cue. If you restyle one, restyle all three. */
.segments {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .segments {
    grid-template-columns: repeat(3, 1fr);
  }
}
.segment {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--teal);
}
.segment h3 {
  margin: 0 0 14px;
  /* Sized so the longest of the three ("Art Professionals") stays on one line
     at the narrowest three-column width. If a segment is ever renamed to
     something longer, re-check all three together - a lone wrapped heading
     reads as a hierarchy the page does not have. */
  font-size: clamp(23px, 2.3vw, 29px);
}
.segment h3 a {
  text-decoration: none;
  color: inherit;
}
.segment h3 a:hover {
  color: var(--teal-dark);
}
.segment .lede {
  margin: 0;
}
.segment__list {
  list-style: none;
  margin: 22px 0 24px;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 15px;
}
.segment__list a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.segment__list a:hover {
  color: var(--teal-dark);
  border-bottom-color: var(--teal);
}
.segment > p:last-child {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 4px;
}

/* ---------- Live coverage line ----------
   Populated at runtime from the codex app. Reads as prose, scans as figures.
   Never hardcode the numbers into the markup. */
.coverage {
  margin: 26px 0 0;
  max-width: 76ch;
  font-size: 13.5px;
  line-height: 2;
  color: var(--ink-55);
}
.coverage b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--teal-dark);
}

/* On the dark pagehead the default ink is invisible. This stayed latent while
   /api/coverage was 404ing and the element never unhid - if you add a new
   surface for [data-coverage], check its contrast with the endpoint LIVE. */
.pagehead--art .coverage {
  color: rgba(255, 255, 255, 0.66);
}
.pagehead--art .coverage b {
  color: var(--teal);
}

/* ---------- Link cards (persona doors, vertical doors) ---------- */
.card--persona {
  padding: clamp(22px, 2.4vw, 30px);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.card--persona:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}
.card--persona .card__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 27px);
  line-height: 1.15;
  margin-bottom: 10px;
}
.card--persona:hover .card__title {
  color: var(--teal-dark);
}
.card--persona .card__body {
  display: block;
  padding: 0;
  color: var(--ink-70);
  font-size: 15px;
}
.cards--verticals {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

/* ---------- Stat cards ---------- */
.cards--stats {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.cards--stats .card__body {
  padding: clamp(22px, 2.4vw, 30px);
}
.stat {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 50px);
  line-height: 1;
  color: var(--teal-dark);
  margin: 0 0 14px;
}

/* ---------- Small print ---------- */
.note {
  font-size: 13px;
  color: var(--ink-55);
  margin: 0;
}

/* ---------- Centred call-to-action panel ----------
   Distinct from .callout, which is a left-ruled inline aside. */
.cta-panel {
  text-align: center;
  padding: clamp(34px, 5vw, 62px) clamp(20px, 4vw, 56px);
  background: rgba(96, 184, 186, 0.1);
  border: 1px solid var(--rule);
}
.cta-panel > :first-child {
  margin-top: 0;
}
.cta-panel > :last-child {
  margin-bottom: 0;
}

/* ---------- Contact: styled segmented control ----------
   Native radios are visually hidden and the label is the control, so no bare
   browser chrome appears (house rule: no native form controls). */
.segmented {
  border: 0;
  padding: 0;
  margin: 0 0 26px;
}
.segmented legend {
  font-size: 14px;
  margin-bottom: 10px;
  padding: 0;
}
.segmented__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.segmented input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.segmented label {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 14px;
  color: var(--ink-70);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.segmented label:hover {
  border-color: var(--teal);
  color: var(--ink);
}
.segmented input:checked + label {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--ink);
  font-weight: 500;
}
.segmented input:focus-visible + label {
  outline: 2px solid var(--teal-dark);
  outline-offset: 2px;
}

/* ---------- Drawer section headings ---------- */
.drawer__group {
  display: block;
  margin: 22px 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}
.drawer__nav > .drawer__group:first-of-type {
  margin-top: 18px;
}

/* ---------- Footer: five columns once there is room ---------- */
@media (min-width: 780px) {
  .site-footer__grid--segments {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}
@media (min-width: 1080px) {
  .site-footer__grid--segments {
    grid-template-columns: 1.5fr repeat(4, 1fr);
  }
}


/* ---------- Home hero ----------
   The headline here is the thesis of the whole site, so it has to read at a
   glance. Teal display type over a pale sky does not, hence a deeper veil and
   white type for this hero only - other pageheads keep the teal treatment. */
.hero--home .hero__bg::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.34),
    rgba(0, 0, 0, 0.42) 45%,
    rgba(0, 0, 0, 0.5)
  );
}
.hero--home .t-hero {
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  font-size: clamp(26px, 3.6vw, 42px);
  max-width: 30ch;
  margin-inline: auto;
  text-wrap: balance;
}
.hero--home .hero__mark img {
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.4));
}

/* Kicker: the category descriptor, sitting under the wordmark so it reads as
   part of the brand lockup and frames the headline rather than competing with
   it. White rather than the teal .eyebrow uses, because the veil over the hero
   photograph is lighter and more variable than a flat dark panel. */
.hero--home .hero__kicker {
  margin: 14px 0 0;
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.hero--home .hero__mark .t-hero {
  margin-top: 12px;
}


/* Card grids following a heading need air; several pages place one directly
   after an h2 or a lede. */
h2 + .cards,
.lede + .cards,
h2 + .segments {
  margin-top: clamp(24px, 3vw, 38px);
}


/* ---------- Vasari Black price line ----------
   The one place on this site that states a price. Consumer D2C only; the
   Codex plans are quoted on /membership and never here. */
.price-line {
  margin: 26px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.price-line__amount {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1;
  color: var(--teal);
}
.price-line__unit {
  font-size: 16px;
  color: #fff;
}
.price-line__alt {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  flex-basis: 100%;
}