/* =====================================================================
   VIVA MEDIA BASE: element defaults, ROLE classes (the ones to design
   with), the template's utility classes (to match live markup), colour
   utilities and layout patterns. Load after fonts.css + tokens.css.

   Design with the role classes: .vm-display, .vm-h1 … .vm-h6, .vm-eyebrow,
   .vm-lead, .vm-body, .vm-small, .vm-label, .vm-quote, .vm-stat,
   .vm-button-text. They read the type roles in tokens.css §10, follow the
   dialect of their page (data-dialect="signature" or the editorial
   default) and step down at every breakpoint, so a heading or paragraph
   renders pixel for pixel like the live site wherever it lands.
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--vm-type-text-font);
  font-size: 16px;
  line-height: 24px;
  color: var(--vm-color-text-body);
  background: var(--vm-color-secondary);
  /* No font-smoothing override: the live site renders with the browser default. */
}
img, video, svg { max-width: 100%; vertical-align: middle; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--vm-type-heading-weight); }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--vm-color-focus);
  outline-offset: 3px;
}
:where(.on-dark, .black-bg, .vm-room--dark, .vm-room--night) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--vm-color-focus-inverse);
}

/* =====================================================================
   1. ROLE CLASSES: design with these
   ===================================================================== */
.vm-display, .vm-h1, .vm-h2, .vm-h3, .vm-h4, .vm-h5, .vm-h6 {
  font-family: var(--vm-type-heading-font);
  font-weight: var(--vm-type-heading-weight);
  letter-spacing: var(--vm-type-heading-track);
  color: var(--vm-color-text);
}
.vm-display { font-size: var(--vm-type-display-size); line-height: var(--vm-type-display-lh); }
.vm-h1 { font-size: var(--vm-type-h1-size); line-height: var(--vm-type-h1-lh); }
.vm-h2 { font-size: var(--vm-type-h2-size); line-height: var(--vm-type-h2-lh); }
.vm-h3 { font-size: var(--vm-type-h3-size); line-height: var(--vm-type-h3-lh); }
.vm-h4 { font-size: var(--vm-type-h4-size); line-height: var(--vm-type-h4-lh); }
.vm-h5 { font-size: var(--vm-type-h5-size); line-height: var(--vm-type-h5-lh); }
.vm-h6 { font-size: var(--vm-type-h6-size); line-height: var(--vm-type-h6-lh); }
.vm-eyebrow {
  font-family: var(--vm-type-text-font); font-weight: var(--vm-type-eyebrow-weight);
  font-size: var(--vm-type-eyebrow-size); line-height: var(--vm-type-eyebrow-lh);
  letter-spacing: var(--vm-type-eyebrow-track); text-transform: uppercase;
}
.vm-lead  { font-family: var(--vm-type-text-font); font-weight: var(--vm-type-text-weight); font-size: var(--vm-type-lead-size); line-height: var(--vm-type-lead-lh); }
.vm-body  { font-family: var(--vm-type-text-font); font-weight: var(--vm-type-text-weight); font-size: var(--vm-type-body-size); line-height: var(--vm-type-body-lh); }
.vm-small { font-family: var(--vm-type-text-font); font-weight: var(--vm-type-text-weight); font-size: var(--vm-type-small-size); line-height: var(--vm-type-small-lh); }
.vm-label {
  font-family: var(--vm-type-text-font); font-weight: var(--vm-type-label-weight);
  font-size: var(--vm-type-label-size); line-height: var(--vm-type-label-lh);
  letter-spacing: var(--vm-type-label-track); text-transform: uppercase;
}
.vm-quote { font-family: var(--vm-type-text-font); font-weight: var(--vm-type-text-weight); font-size: var(--vm-type-quote-size); line-height: var(--vm-type-quote-lh); }
.vm-stat  { font-family: var(--vm-type-stat-font); font-weight: var(--vm-type-stat-weight); font-size: var(--vm-type-stat-size); line-height: var(--vm-type-stat-lh); }
.vm-button-text    { font-family: var(--vm-button-font); font-weight: var(--vm-type-button-weight); font-size: var(--vm-type-button-size); line-height: var(--vm-type-button-lh); }
.vm-button-text-lg { font-family: var(--vm-button-font); font-weight: var(--vm-type-button-lg-weight); font-size: var(--vm-type-button-lg-size); line-height: var(--vm-type-button-lg-lh); }
.vm-button-text-sm { font-family: var(--vm-button-font); font-weight: var(--vm-type-button-sm-weight); font-size: var(--vm-type-button-sm-size); line-height: var(--vm-type-button-sm-lh); }
.vm-measure { max-width: var(--vm-measure-lead); }

/* Default role colours per room (measured pairing, see guidelines/component-framework.md §4) */
.vm-eyebrow, .vm-label { color: var(--vm-color-text-muted-strong); }            /* #4f4f4f on warm, white, mist */
.vm-muted { color: var(--vm-color-text-muted-strong); }
:is(.vm-room--dark, .vm-room--night) :is(.vm-eyebrow, .vm-label, .vm-muted) { color: var(--vm-text-muted-dark); }        /* #a6a6a6 */
.vm-room--dark :is(.vm-lead, .vm-body, .vm-small) { color: var(--vm-color-text-inverse-muted); }                        /* 70% white = #b8b8b8 on ink */
.vm-room--night :is(.vm-lead, .vm-body, .vm-small) { color: var(--vm-color-text-inverse); }                             /* white on black */
.vm-room--accent :is(.vm-eyebrow, .vm-label, .vm-muted) { color: var(--vm-color-accent-ink); }                          /* indigo on lavender */

/* Section header pattern: eyebrow → title → lead → actions, spaced by the measured roles */
.vm-section-head > .vm-eyebrow + * { margin-top: var(--vm-space-eyebrow-title); }
.vm-section-head > :is(.vm-display, .vm-h1) + :is(.vm-lead, .vm-body) { margin-top: var(--vm-space-display-text); }
.vm-section-head > :is(.vm-h2, .vm-h3, .vm-h4) + :is(.vm-lead, .vm-body) { margin-top: var(--vm-space-title-text); }
.vm-section-head > :is(.vm-lead, .vm-body) + :is(.vm-lead, .vm-body) { margin-top: var(--vm-space-paragraph); }
.vm-section-head > .vm-actions { margin-top: var(--vm-space-text-action); display: flex; flex-wrap: wrap; gap: var(--vm-gap-s); align-items: center; }
.vm-section-head + .vm-section-body { margin-top: var(--vm-space-header-content); }
/* Card pattern */
.vm-card { padding: var(--vm-card-pad); border-radius: var(--vm-card-radius); }
.vm-card > :is(.vm-h4, .vm-h5, .vm-h6) + * { margin-top: var(--vm-space-card-title-text); }
.vm-card > * + :is(.vm-button, .vm-actions) { margin-top: var(--vm-space-card-action); }
/* Grid pattern */
.vm-grid { display: grid; gap: var(--vm-grid-gap); }
.vm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991px) { .vm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .vm-grid--2, .vm-grid--3, .vm-grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* Older aliases kept for specimens written before the role layer existed */
.vm-display-hero    { font: 600 clamp(52px, 6.3vw, 80px)/1.04 var(--vm-font-display); letter-spacing: var(--vm-tracking-tight); }
.vm-display-section { font: 600 clamp(44px, 4.8vw, 64px)/1.07 var(--vm-font-display); letter-spacing: var(--vm-tracking-tight); }
.vm-display-cta     { font: 600 clamp(48px, 5.5vw, 72px)/1.08 var(--vm-font-display); letter-spacing: var(--vm-tracking-tight); }
.vm-title           { font: 600 var(--vm-h4)/var(--vm-h4-lh) var(--vm-font-display); letter-spacing: var(--vm-tracking-tight); }
.vm-title-card      { font: 600 30px/1.12 var(--vm-font-display); letter-spacing: var(--vm-tracking-tight); }
.vm-title-small     { font: 600 var(--vm-h6)/var(--vm-h6-lh) var(--vm-font-display); letter-spacing: var(--vm-tracking-tight); }
.vm-eyebrow-text    { font: 700 13px/1.5 var(--vm-font-body); letter-spacing: var(--vm-tracking-eyebrow); text-transform: uppercase; }

/* =====================================================================
   2. TEMPLATE UTILITY CLASSES (live Webflow names, declared values)
   These reproduce the BaseCom template's style-guide classes exactly as
   declared. On live, section-specific overrides change the phone sizes of
   heading3 (and others); use the role classes above for new work.
   ===================================================================== */
.heading1, .heading2, .heading3, .heading4,
.subheading1, .subheading2, .subheading3, .subheading4 {
  font-family: var(--vm-font-display); font-weight: 600; letter-spacing: 0;
}
.heading1 { font-size: var(--vm-fs-heading1); line-height: var(--vm-lh-heading1); }
.heading2 { font-size: var(--vm-fs-heading2); line-height: var(--vm-lh-heading2); }
.heading3 { font-size: var(--vm-fs-heading3); line-height: var(--vm-lh-heading3); }
.heading4 { font-size: var(--vm-fs-heading4); line-height: var(--vm-lh-heading4); }
.heading5 { font-family: var(--vm-font-body); font-weight: 700; font-size: var(--vm-fs-heading5); line-height: 1; letter-spacing: 0; }
.subheading1 { font-size: var(--vm-fs-subheading1); line-height: var(--vm-lh-subheading1); }
.subheading2 { font-size: var(--vm-fs-subheading2); line-height: var(--vm-lh-subheading2); }
.subheading3 { font-size: var(--vm-fs-subheading3); line-height: var(--vm-lh-subheading3); }
.subheading4 { font-size: var(--vm-fs-subheading4); line-height: var(--vm-lh-subheading4); }
.body-01, .body-02, .body-03, .caption-01, .caption-02, .button-01, .button-02, .testimonial-01, .testimonial-02 {
  font-family: var(--vm-font-body); letter-spacing: 0;
}
.body-01 { font-size: var(--vm-fs-body-01); line-height: var(--vm-lh-body-01); }
.body-02 { font-size: var(--vm-fs-body-02); line-height: var(--vm-lh-body-02); }
.body-03 { font-size: var(--vm-fs-body-03); line-height: var(--vm-lh-body-03); }
.caption-01 { font-size: var(--vm-fs-caption-01); line-height: var(--vm-lh-caption-01); font-weight: 700; }
.caption-02 { font-size: 16px; line-height: 1.5; font-weight: 400; }
.button-01 { font-size: var(--vm-fs-button-01); line-height: var(--vm-lh-button-01); font-weight: 700; }
.button-02 { font-size: var(--vm-fs-button-02); line-height: var(--vm-lh-button-02); font-weight: 600; }
.testimonial-01 { font-size: var(--vm-fs-testimonial-01); line-height: var(--vm-lh-testimonial-01); }
.testimonial-02 { font-size: var(--vm-fs-testimonial-02); line-height: var(--vm-lh-testimonial-02); }

/* =====================================================================
   3. COLOUR UTILITIES (template names)
   ===================================================================== */
.background-bg { background-color: var(--vm-warm); }
.white-bg { background-color: var(--vm-white); }
.off-white-bg { background-color: var(--vm-cream); }
.black-bg { background-color: var(--vm-night); }
.yellow-bg { background-color: var(--vm-gold); }
.purple-bg { background-color: var(--vm-lavender); }
.red-bg { background-color: var(--vm-rose); }
.green-bg { background-color: var(--vm-sage); }
.off-yellow-bg { background-color: var(--vm-brass); }
.off-purple-bg { background-color: var(--vm-indigo); }
.off-red-bg { background-color: var(--vm-wine); }
.off-green-bg { background-color: var(--vm-forest); }
.white-text { color: var(--vm-white); }
.black-text { color: var(--vm-night); }
.yellow-text { color: var(--vm-gold); }
.purple-text { color: var(--vm-lavender); }
.red-text { color: var(--vm-rose); }
.green-text { color: var(--vm-sage); }
.off-yellow-text { color: var(--vm-brass); }
.off-purple-text { color: var(--vm-indigo); }
.off-red-text { color: var(--vm-wine); }
.off-green-text { color: var(--vm-forest); }

/* =====================================================================
   4. LAYOUT: container, rooms, section rhythm
   ===================================================================== */
.vm-container { width: 100%; max-width: calc(var(--vm-container) + 2 * var(--vm-gutter)); margin-inline: auto; padding-inline: var(--vm-gutter); }
.vm-section { padding-block: var(--vm-section-pad); }                 /* editorial rhythm: 120 → 72 */
.vm-section--legacy { padding-block: 120px; }                         /* signature rhythm: 120 → 100 → 60 */
[data-dialect="signature"] .vm-section { padding-block: 120px; }
.vm-room--page { background: var(--vm-color-secondary); color: var(--vm-color-on-secondary); }
.vm-room--paper { background: var(--vm-color-surface); color: var(--vm-color-text); }
.vm-room--mist { background: var(--vm-color-surface-alt); color: var(--vm-color-text); }
.vm-room--night { background: var(--vm-night); color: var(--vm-white); }   /* signature dark */
.vm-room--dark { background: var(--vm-black); color: var(--vm-white); }    /* editorial dark */
.vm-room--accent { background: var(--vm-color-accent); color: var(--vm-color-on-accent); }
:is(.vm-room--night, .vm-room--dark) :is(.vm-display, .vm-h1, .vm-h2, .vm-h3, .vm-h4, .vm-h5, .vm-h6) { color: var(--vm-color-text-inverse); }

/* Scroll reveal (the live IX2 "slide in bottom" preset) */
.vm-reveal { opacity: 0; transform: translateY(var(--vm-reveal-distance)); transition: opacity var(--vm-duration-reveal) var(--vm-ease-reveal), transform var(--vm-duration-reveal) var(--vm-ease-reveal); }
.vm-reveal.is-in { opacity: 1; transform: none; }

/* =====================================================================
   5. BREAKPOINT STEPS for classes (token steps live in tokens.css)
   ===================================================================== */
@media (min-width: 1280px) { .heading5 { font-size: 40px; } }
@media (max-width: 767px) {
  .heading5 { font-size: 32px; }
  .vm-section--legacy, [data-dialect="signature"] .vm-section { padding-block: var(--vm-section-legacy-tablet); }
  .vm-display-hero { font-size: clamp(38px, 10.25vw, 46px); line-height: 1.08; }
  .vm-display-section { font-size: 36px; line-height: 1.13; }
  .vm-display-cta { font-size: 40px; }
  .vm-title { font-size: var(--vm-h5); line-height: var(--vm-h5-lh); }
  .vm-title-card { font-size: 28px; }
  .vm-eyebrow-text { font-size: 11px; }
}
@media (max-width: 479px) {
  .vm-section--legacy, [data-dialect="signature"] .vm-section { padding-block: var(--vm-section-legacy-mobile); }
}
@media (max-width: 359px) {
  .vm-display-hero { font-size: 36px; }
  .vm-display-section { font-size: 32px; }
  .vm-display-cta { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .vm-reveal { opacity: 1; transform: none; }
}