/* ============================================
   STIGG — Operational Intelligence for Modern Business
   Design tokens
   ============================================ */
:root {
  --navy-deep: #465872;
  --navy-darker: #2b3646;
  --navy-ink: #374559;
  --red: #1a6793;
  --red-bright: #0f77b3;
  --cyan: #4fb0e8;
  --amber: #3baff2;
  --off-white: #f9f9f9;
  --paper: #f3f2ee;
  --ink: #0a1730;
  --ink-soft: #4a5468;
  --line: rgba(70, 88, 114, 0.14);
  --line-dark: rgba(79, 176, 232, 0.22);

  /* Homepage-only accents — additive, layered on top of the brand palette
     above rather than replacing it, so dashboard pages (which reuse the
     tokens above) are unaffected. Recolored onto the same cool hue as the
     brand palette, at a punchier saturation, for a "pop" accent family. */
  --coral: #3cb8ff;
  --coral-deep: #2aa2e8;
  --coral-soft: #ccecff;
  --amber-glow: #48bcff;
  --cream: #ecf7fd;
  --cream-warm: #e0f1fb;

  --teal-deep: #013452;
  --teal-ink: #022438;
  --teal-mid: #5797bc;
  --teal-light: #77b2d4;
  --stone-gray: #a5abaf;

  --ink-black: #465872;
  --blush: #dcf2ff;
  --red-soft: #d7e9f4;

  /* A single warm accent, used sparingly (hero highlight word, hero CTA,
     and the "How We Work" dark band) — everything else stays in the cool
     blue family so this stands out instead of blending in. */
  --pop-warm: #e2872f;
  --pop-warm-bright: #f0993f;
  --pop-warm-soft: rgba(226, 135, 47, 0.16);

  /* Accents scoped to the hero's automation-card montage only — each card
     gets one fixed accent so five different automations stay visually
     distinct at a glance. Picked bright enough to read as stroke/text
     color against the montage's dark, n8n-style canvas background. */
  --automation-orange: #f0993f;
  --automation-blue: #4f8fe8;
  --automation-green: #34c281;
  --automation-red: #ef5b5b;
  --automation-silver: #e2e8f2;
  --automation-check: #34c281;

  /* Fixed-meaning status colors — deliberately NOT theme variables like
     --red/--pop-warm above. These carry real meaning (paid vs. overdue,
     flagged vs. clear) on client dashboard pages, including inside
     client-branded scopes like .meridian-theme, so they must never shift
     just because a brand palette changes. See internal-dashboard-content.php
     for the same principle applied to the internal ops dashboard. */
  --status-good: #1f8a5e;
  --status-warning: #8a5a00;
  --status-critical: #b91c3c;

  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --max-width: 1180px;
  --section-pad: clamp(48px, 7vw, 88px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

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

a {
  color: inherit;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pop-warm);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--pop-warm);
  display: inline-block;
}

.eyebrow--light {
  color: var(--pop-warm-bright);
}

.eyebrow--light::before {
  background: var(--pop-warm-bright);
}

/* Homepage-only eyebrow variant — kept separate from .eyebrow above
   since that class is also used on the client dashboard pages. */
.hp-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pop-warm);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}

.hp-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--pop-warm);
  display: inline-block;
}

/* Compound selector (not just .hp-eyebrow--light) so this reliably outranks
   section-level "p" color rules like .hero__copy p / .contact__copy p,
   wherever this variant gets used. */
.hp-eyebrow.hp-eyebrow--light {
  color: var(--pop-warm-bright);
}

.hp-eyebrow.hp-eyebrow--light::before {
  background: var(--pop-warm-bright);
}

/* ============================================
   NAV
   ============================================ */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(249, 249, 249, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s ease;
}

.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 92px;
}

.site-nav__tenant {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink);
  margin-right: auto;
  white-space: nowrap;
}

.site-nav__logo img {
  height: 42px;
  width: auto;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.site-nav__links a:not(.site-nav__cta) {
  text-decoration: none;
  color: var(--ink);
  position: relative;
  padding-bottom: 4px;
}

.site-nav__links a:not(.site-nav__cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width 0.25s ease;
}

.site-nav__links a:not(.site-nav__cta):hover::after {
  width: 100%;
}

.site-nav__links li {
  display: flex;
  align-items: center;
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav__portal {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--navy-deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.site-nav__portal::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  display: inline-block;
}

.site-nav__portal:hover {
  color: var(--red-bright);
  border-color: var(--red-bright);
}

.site-nav__utility {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--navy-deep);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.site-nav__utility:hover {
  color: var(--red);
  border-color: var(--red);
}

.site-nav__cta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  text-decoration: none;
  background: var(--pop-warm);
  color: var(--off-white);
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--pop-warm);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.site-nav__cta:hover {
  background: var(--pop-warm-bright);
  border-color: var(--pop-warm-bright);
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  background: var(--cream);
  color: var(--ink-black);
  padding: 132px 0 128px;
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: none;
}

/* Soft radial glow behind the headline/diagram for depth — pure decoration,
   sits behind everything (z-index 0) so it never competes with content. */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 42% at 50% 20%, rgba(226, 135, 47, 0.10), transparent 70%),
    radial-gradient(ellipse 65% 55% at 50% 62%, rgba(79, 176, 232, 0.16), transparent 72%);
}

.hero .wrap {
  position: relative;
  z-index: 1;
  max-width: 1360px;
}

/* Two-column layout — copy left, diagram right, both in view together at
   load instead of stacked (which forced a scroll to see the visual). */
.hero__grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  align-items: center;
  gap: 48px;
}

.hero__text {
  text-align: left;
}

.hero__copy {
  opacity: 0;
  animation: copy-in 0.7s ease forwards;
}

.hero__copy--bottom {
  margin-top: 20px;
  animation-delay: 0.5s;
}

@keyframes copy-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero__copy h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}

/* Two-beat headline: a smaller, quieter "problem" line, then a bigger,
   bolder "promise" line right under it — the size contrast itself is what
   sells the impact, not just raw scale. Sized down slightly from the
   full-width centered version since this now shares the row with the
   diagram instead of owning the full wrap width. */
.hero__lede {
  display: block;
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.hero__punch {
  display: block;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.12;
}

.hero__copy h1 em {
  font-style: normal;
  color: var(--pop-warm);
}

.hero__copy p {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(4, 29, 74, 0.75);
  max-width: 48ch;
  margin: 0 0 32px;
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.btn {
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.btn--primary {
  background: var(--red);
  color: var(--off-white);
  border: 1px solid var(--red);
}

.btn--primary:hover {
  background: var(--red-bright);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--off-white);
  border: 1px solid rgba(249, 249, 249, 0.3);
}

.btn--ghost:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

/* Homepage-only warm button treatment — scoped to .hero so the
   shared .btn classes used on other pages (login, dashboards) are
   untouched. */
.hero .btn {
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: 999px;
  padding: 15px 30px;
}

.hero .btn--primary {
  background: var(--pop-warm);
  border-color: transparent;
}

.hero .btn--primary:hover {
  background: var(--pop-warm-bright);
  transform: translateY(-2px);
}

.hero .btn--ghost {
  color: var(--ink-black);
  border-color: rgba(4, 29, 74, 0.3);
}

.hero .btn--ghost:hover {
  border-color: var(--red);
  color: var(--red);
  background: rgba(4, 29, 74, 0.04);
}

/* AUTOMATION MONTAGE — five real automation workflows, each rendered as a
   miniature n8n-style engineering canvas: icon-labeled node tiles,
   checkmark badges overlapping each node's corner, straight right-angle
   connector traces (not curves), and a dark dot-grid canvas so every card
   reads as a genuine workflow-tool screenshot. The five cards are
   scattered, overlapped only at their edges, and lightly rotated — a
   loose photo-pile montage where every workflow stays almost fully
   readable, with Billing landing on top of the stack. */
.hero__montage {
  position: relative;
  width: 100%;
  max-width: 610px;
  height: 800px;
}

.automation-card {
  position: absolute;
  width: 210px;
  background: #12151c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  opacity: 0;
  transform: translateY(0) rotate(var(--r, 0deg));
  animation: card-in 0.6s ease forwards;
  transition: transform 0.2s ease, z-index 0.2s ease, box-shadow 0.2s ease;
}

.automation-card:hover {
  transform: rotate(0deg) scale(1.04) !important;
  z-index: 20 !important;
  box-shadow: 0 30px 60px -14px rgba(0, 0, 0, 0.6), 0 10px 24px rgba(0, 0, 0, 0.35);
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(18px) rotate(var(--r, 0deg)); }
  to { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }
}

.hero__montage .automation-card:nth-child(1) { animation-delay: 0.35s; }
.hero__montage .automation-card:nth-child(2) { animation-delay: 0.48s; }
.hero__montage .automation-card:nth-child(3) { animation-delay: 0.61s; }
.hero__montage .automation-card:nth-child(4) { animation-delay: 0.74s; }
.hero__montage .automation-card:nth-child(5) { animation-delay: 0.87s; }

.automation-card--po { --accent: var(--automation-blue); }
.automation-card--onboarding { --accent: var(--automation-green); }
.automation-card--maintenance { --accent: var(--automation-red); }
.automation-card--lease { --accent: var(--automation-silver); }
.automation-card--billing { --accent: var(--automation-orange); }

.automation-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.automation-card__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: #eef2f8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.automation-card__title .automation-card__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.automation-card__active {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.03em;
  color: var(--automation-check);
}

.automation-card__active::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--automation-check);
}

/* Faint dot-grid, same texture language as a real workflow-tool canvas. */
.automation-card__canvas {
  padding: 8px 10px 4px;
  background-color: #0e1117;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 16px 16px;
}

.automation-card__flow {
  display: block;
  width: 100%;
  height: auto;
}

.automation-card__connector {
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 1.6;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.automation-card__dot {
  fill: rgba(255, 255, 255, 0.4);
}

.automation-card__node-box {
  fill: #1a2029;
  stroke: var(--accent);
  stroke-width: 1.4;
}

/* Each node's icon inherits the card's accent color, matching the node
   tile's stroke — a single-color line icon rather than a colorful app
   logo, which keeps the schematic feel consistent across all five cards. */
.automation-card__icon {
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A same-color-as-canvas circle sits behind the checkmark badge so it
   reads as a clean cutout overlapping the node tile's corner, the same
   way n8n's own "configured" badge notches into its node icon. */
.automation-card__check-cutout {
  fill: #0e1117;
}

.automation-card__check-bg {
  fill: #12151c;
  stroke: var(--automation-check);
  stroke-width: 1.3;
}

.automation-card__check-mark {
  stroke: var(--automation-check);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.automation-card__step-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.01em;
  fill: rgba(215, 222, 235, 0.75);
}

/* Sits behind each caption so it masks the connector trace wherever a
   line happens to pass near the text, keeping every label legible. */
.automation-card__label-bg {
  fill: rgba(14, 17, 23, 0.82);
}

/* Below the point where the montage shares a row with the text column,
   overlap/rotation gets replaced with a plain stacked list — legible on
   narrow screens matters more than the collage effect there. */
@media (max-width: 960px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero__montage {
    max-width: none;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .automation-card {
    position: static !important;
    width: 100% !important;
    transform: none !important;
  }

  .automation-card:hover {
    transform: none !important;
  }
}

/* ============================================
   SECTION shared
   ============================================ */
.section {
  padding: var(--section-pad) 0;
}

.section--paper {
  background: var(--paper);
}

/* ============================================
   DIAGONAL SECTION DIVIDERS (homepage)
   Each slanted section's top edge is cut on a
   consistent diagonal, then pulled up over the
   section above it so the two backgrounds meet
   at a seam instead of a flat horizontal line.
   ============================================ */
.slant-top {
  position: relative;
  clip-path: polygon(0 0, 100% 64px, 100% 100%, 0 100%);
  margin-top: -64px;
  padding-top: calc(var(--section-pad) + 32px);
}

.slant-top--reverse {
  position: relative;
  clip-path: polygon(0 64px, 100% 0, 100% 100%, 0 100%);
  margin-top: -64px;
  padding-top: calc(var(--section-pad) + 32px);
}

.slant-top:first-of-type,
header.hero + .slant-top {
  margin-top: -64px;
}

@media (max-width: 700px) {
  .slant-top {
    clip-path: polygon(0 0, 100% 32px, 100% 100%, 0 100%);
    margin-top: -32px;
    padding-top: calc(var(--section-pad) + 16px);
  }

  .slant-top--reverse {
    clip-path: polygon(0 32px, 100% 0, 100% 100%, 0 100%);
    margin-top: -32px;
    padding-top: calc(var(--section-pad) + 16px);
  }
}

.section-head {
  max-width: 640px;
  margin: 0 0 56px;
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

/* ============================================
   ABOUT
   ============================================ */
.about {
  background: #ffffff;
}

.about__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: start;
}

.about__statement {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 29px);
  line-height: 1.35;
  font-weight: 500;
  color: var(--navy-deep);
  margin: 0;
}

.about__statement .accent {
  color: var(--pop-warm);
}

.about__detail p {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.about__tags {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 24px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(4, 29, 74, 0.1);
}

/* Plain labels, not buttons — no fill/border/pill shape, just a small
   marker dot so the list still reads as a set of distinct capabilities. */
.about__tags span {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.about__tags span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pop-warm);
  display: inline-block;
  flex-shrink: 0;
}

/* ============================================
   PROCESS (numbered — real sequence)
   ============================================ */
.process {
  position: relative;
  background: var(--navy-darker);
  color: var(--off-white);
  overflow: hidden;
  isolation: isolate;
}

.process .section-head h2 {
  color: var(--off-white);
  font-family: var(--font-display);
}

.process .section-head .eyebrow,
.process .section-head .hp-eyebrow {
  color: var(--pop-warm);
}

.process .section-head .eyebrow::before,
.process .section-head .hp-eyebrow::before {
  background: var(--pop-warm);
}

.process__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.process__item {
  background: rgba(249, 249, 249, 0.05);
  border: 1px solid rgba(249, 249, 249, 0.14);
  border-radius: 18px;
  padding: 36px 30px 40px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.process__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(226, 135, 47, 0.18);
  border-color: rgba(226, 135, 47, 0.4);
}

.process__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--pop-warm);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 24px;
}

.process__item h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--off-white);
}

.process__item p {
  font-size: 17px;
  color: rgba(249, 249, 249, 0.68);
  margin: 0 0 20px;
}

.process__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pop-warm-soft), rgba(249, 249, 249, 0.04));
  display: flex;
  align-items: center;
  justify-content: center;
}

.process__icon svg {
  width: 26px;
  height: 26px;
}

/* ============================================
   PRINCIPLES strip
   ============================================ */
.principles {
  background: var(--cream);
}

.principles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.principles__item {
  background: var(--off-white);
  border: 1px solid rgba(4, 29, 74, 0.08);
  border-radius: 18px;
  padding: 30px 26px;
  box-shadow: 0 10px 30px rgba(10, 23, 48, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.principles__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(60, 184, 255, 0.14);
}

.principles__item h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--red);
  margin: 0 0 12px;
}

.principles__item p {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.6;
}

/* ============================================
   CONTACT
   ============================================ */
.contact {
  position: relative;
  background: #ffffff;
  color: var(--ink-black);
  overflow: hidden;
  isolation: isolate;
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.contact__copy h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  color: var(--ink-black);
}

.contact__copy p {
  font-size: 18px;
  color: rgba(4, 29, 74, 0.72);
  margin: 0;
  max-width: 42ch;
}

.contact__card {
  background: var(--off-white);
  color: var(--ink-black);
  padding: 44px 40px;
  border-radius: 20px;
  border: 2px solid var(--red);
  box-shadow: 0 20px 50px rgba(185, 28, 60, 0.12);
}

.contact__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(4, 29, 74, 0.1);
  font-size: 15px;
}

.contact__row:first-child {
  padding-top: 0;
}

.contact__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.contact__row dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0;
}

.contact__row dd {
  margin: 0;
  text-align: right;
}

.contact__row a {
  color: var(--ink-black);
  text-decoration: none;
}

.contact__row a:hover {
  color: var(--red-bright);
}

/* ============================================
   PORTAL LOGIN
   ============================================ */
.portal-body {
  background: var(--cream);
}

.portal {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 150px 0 90px;
  background: var(--cream);
  color: var(--ink-black);
  overflow: hidden;
  isolation: isolate;
}

.portal__wrap {
  display: flex;
  justify-content: center;
}

.portal__card {
  width: 100%;
  max-width: 440px;
  background: var(--off-white);
  border-radius: 20px;
  border: 2px solid var(--red);
  box-shadow: 0 20px 50px rgba(185, 28, 60, 0.12);
  padding: 30px 34px 28px;
}

.portal__card h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.portal__intro {
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(4, 29, 74, 0.68);
  margin: 0 0 16px;
  max-width: 42ch;
}

.portal__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.portal__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.portal__field label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--red-bright);
}

.portal__field-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.portal__forgot {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: rgba(4, 29, 74, 0.55);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.portal__forgot:hover {
  color: var(--red-bright);
  border-color: var(--red-bright);
}

.portal__field input[type="email"],
.portal__field input[type="password"] {
  /* Deliberately not var(--font-body): that pulls in the async-loaded
     IBM Plex Sans, which swaps in after first paint and makes typed/
     placeholder text visibly change font mid-interaction. These two
     fields stick to the system stack so they render consistently from
     the first frame. */
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  color: var(--ink-black);
  background: rgba(4, 29, 74, 0.03);
  border: 1px solid rgba(4, 29, 74, 0.15);
  border-radius: 12px;
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.portal__field input[type="email"]::placeholder,
.portal__field input[type="password"]::placeholder {
  color: rgba(4, 29, 74, 0.35);
}

/* Browser autofill (e.g. Chrome filling a saved login on page load)
   renders with its own internal font/size/background until the field is
   focused, ignoring the plain "color"/"background" rules above — hence
   the visible font/size jump the moment you click in. -webkit-text-fill-color
   and the giant-transition trick are the only reliable way to force it to
   match our actual input styling from the first frame. */
.portal__field input[type="email"]:-webkit-autofill,
.portal__field input[type="password"]:-webkit-autofill,
.portal__field input[type="email"]:-webkit-autofill:hover,
.portal__field input[type="password"]:-webkit-autofill:hover,
.portal__field input[type="email"]:-webkit-autofill:focus,
.portal__field input[type="password"]:-webkit-autofill:focus {
  /* !important is required here — Chrome's autofill stylesheet wins the
     cascade on font-family/font-size even at equal specificity; color
     doesn't need it because -webkit-text-fill-color is a separate,
     non-competing property, but the font properties do. */
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: normal !important;
  -webkit-text-fill-color: var(--ink-black);
  -webkit-box-shadow: 0 0 0 1000px rgba(4, 29, 74, 0.03) inset;
  box-shadow: 0 0 0 1000px rgba(4, 29, 74, 0.03) inset;
  caret-color: var(--ink-black);
  transition: background-color 5000s ease-in-out 0s;
}

.portal__field input[type="email"]:focus,
.portal__field input[type="password"]:focus {
  border-color: var(--red);
  background: rgba(255, 255, 255, 0.9);
}

.portal__checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(4, 29, 74, 0.72);
  cursor: pointer;
}

.portal__checkbox input {
  accent-color: var(--red);
  width: 15px;
  height: 15px;
}

.portal .btn {
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: 999px;
  padding: 13px 28px;
}

.portal .btn--primary {
  background: var(--red);
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(60, 184, 255, 0.35);
}

.portal .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(60, 184, 255, 0.45);
}

.portal__submit {
  justify-content: center;
  margin-top: 4px;
  cursor: pointer;
  font-size: 14px;
}

.portal__note {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--red-bright);
  min-height: 16px;
}

.portal__note--error {
  color: var(--red-bright);
}

.portal__divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(4, 29, 74, 0.45);
}

.portal__divider::before,
.portal__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(4, 29, 74, 0.12);
}

.portal__helper {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(4, 29, 74, 0.65);
  margin: 0 0 8px;
}

.portal__contact-link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--red-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(224, 32, 42, 0.4);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.portal__contact-link:hover {
  color: var(--ink-black);
  border-color: var(--ink-black);
}

@media (max-width: 560px) {
  .portal {
    padding: 120px 0 60px;
  }

  .portal__card {
    padding: 32px 24px 28px;
  }
}

.dash-demo-flag {
  margin: 0;
  background: var(--amber);
  color: var(--navy-darker);
}

.dash-demo-flag .wrap {
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-align: center;
}

/* ============================================
   DASHBOARD — upsell
   ============================================ */
.dash-upsell {
  background: var(--off-white);
  color: var(--ink);
  padding-top: 116px;
  padding-bottom: 100px;
}

.dash-upsell .section-head h2 {
  color: var(--navy-deep);
  max-width: 760px;
  font-size: clamp(28px, 3.6vw, 40px);
}

.dash-upsell .section-head h2 .brand-highlight {
  color: var(--pop-warm);
}

.upsell-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 36px;
}

.upsell-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--cyan);
  border-radius: 2px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.upsell-card__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0a6ba3;
  border: 1px solid rgba(59, 175, 242, 0.5);
  padding: 4px 10px;
  border-radius: 2px;
}

.upsell-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  color: var(--navy-deep);
}

.upsell-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  flex-grow: 1;
}

.upsell-card__cta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--navy-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(4, 29, 74, 0.3);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.upsell-card__cta:hover {
  color: var(--red);
  border-color: var(--red);
}

.dash-upsell__note {
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 70ch;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

/* ============================================
   WIDGET DASHBOARD — the "wow" client-overview template
   (first shipped on Meridian's page). A simpler hero, then any
   number of labeled widget groups made of these card types:
   a stat tile, a meter, a donut, a small bar chart, or a compact
   list. Chart marks (gauges/donut/bars) deliberately use a
   colorblind-validated chart palette, NOT the site's decorative
   brand tokens — this is meant to read as an analytics product,
   consistent from client to client, not a themed marketing page.
   Fixed-meaning colors (--status-good/warning/critical) still
   carry the same meaning here as everywhere else on the site.
   ============================================ */
:root {
  --chart-surface: #ffffff;
  --chart-blue: #2a78d6;
  --chart-orange: #eb6834;
  --chart-track: #e7e5e0;
  --chart-ink: #16181d;
  --chart-ink-soft: #63687a;
  --chart-muted: #9a9fae;
}

.dash-hero {
  background: var(--navy-darker);
  color: var(--off-white);
  padding: 44px 0 40px;
}

.dash-hero__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.dash-hero .eyebrow { margin-bottom: 10px; }

.dash-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 600;
  margin: 0 0 6px;
}

.dash-hero p {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(249, 249, 249, 0.6);
  margin: 0;
}

.dash-hero__status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--status-good);
  flex-shrink: 0;
  padding-top: 6px;
}

.dash-hero__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-good);
  box-shadow: 0 0 0 0 rgba(31, 138, 94, 0.55);
  animation: dash-pulse 2s ease-out infinite;
  flex-shrink: 0;
}

.widget-body {
  background: var(--paper);
  padding: 40px 0 80px;
}

.widget-group {
  margin-bottom: 44px;
}

.widget-group:last-child {
  margin-bottom: 0;
}

.widget-group__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-deep);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.widget-group__title::before {
  content: "";
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--pop-warm);
  display: inline-block;
}

.widget-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.widget-card {
  background: var(--chart-surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 20px 22px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
}

.widget-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(11, 20, 40, 0.12);
}

.widget-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.widget-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--chart-ink);
  margin: 0;
}

.widget-card__expand {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--chart-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-12 { grid-column: span 12; }

@media (max-width: 1050px) {
  .col-span-3, .col-span-4, .col-span-5, .col-span-6, .col-span-7, .col-span-8 { grid-column: span 6; }
}
@media (max-width: 680px) {
  .col-span-3, .col-span-4, .col-span-5, .col-span-6, .col-span-7, .col-span-8, .col-span-12 { grid-column: span 12; }
}

/* Stat tile */
.stat-tile__value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--chart-ink);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-tile__value--warning { color: var(--status-warning); }

.stat-tile__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--chart-ink-soft);
  margin-bottom: 14px;
}

.stat-tile__spark {
  width: 100%;
  height: 30px;
  margin-top: auto;
}

.stat-tile__spark polyline {
  fill: none;
  stroke: var(--chart-blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Meter (radial gauge) — severity fill, per dataviz skill: the fill
   carries state (good/warning/critical), the track is a neutral gray. */
.meter {
  display: flex;
  align-items: center;
  gap: 18px;
}

.meter svg { flex-shrink: 0; }

.meter__value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  fill: var(--chart-ink);
}

.meter__caption {
  font-size: 13px;
  color: var(--chart-ink-soft);
  line-height: 1.5;
}

.meter__caption strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.meter__caption strong.state--good { color: var(--status-good); }
.meter__caption strong.state--warning { color: var(--status-warning); }
.meter__caption strong.state--critical { color: var(--status-critical); }

/* Donut + legend */
.donut-widget { display: flex; align-items: center; gap: 20px; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.donut-legend__row { display: flex; align-items: center; gap: 8px; color: var(--chart-ink-soft); }
.donut-legend__swatch { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.donut-legend__row strong { color: var(--chart-ink); font-family: var(--font-mono); }

/* Bar chart axis labels */
.bar-axis-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  fill: var(--chart-muted);
}

/* Compact list widgets (e.g. Needs Review / Recent Activity previews) */
.widget-list { display: flex; flex-direction: column; gap: 10px; }
.widget-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.widget-list__row:last-child { border-bottom: none; padding-bottom: 0; }
.widget-list__row span:first-child { color: var(--chart-ink); font-weight: 500; }
.widget-list__reason { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; color: var(--status-warning); }
.widget-list__status--overdue { color: var(--status-critical); }
.widget-list__more { font-family: var(--font-mono); font-size: 12px; color: var(--red); margin-top: 12px; }

/* Drill-down modal */
.drilldown-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 40, 0.55);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.drilldown-backdrop.is-open { display: flex; }
.drilldown-modal {
  background: #fff;
  border-radius: 8px;
  max-width: 620px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  padding: 30px 32px;
}
.drilldown-modal__close {
  float: right;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--chart-muted);
}
.drilldown-modal h3 {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0 0 6px;
  color: var(--navy-deep);
}
.drilldown-modal p.modal-sub { color: var(--chart-ink-soft); font-size: 14px; margin: 0 0 20px; }
.drilldown-modal table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.drilldown-modal th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; color: var(--chart-muted); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.drilldown-modal td { padding: 10px 0; border-bottom: 1px solid var(--line); }
.drilldown-modal tr:last-child td { border-bottom: none; }

@media (max-width: 900px) {
  .meridian-logo {
    width: min(100%, 480px);
  }

  .upsell-grid {
    grid-template-columns: 1fr;
  }
}

.meridian-logo {
  width: clamp(420px, 46vw, 760px);
  max-width: 100%;
  height: auto;
  margin: 10px 0 0;
  display: block;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: var(--navy-darker);
  color: rgba(249, 249, 249, 0.55);
  padding: 48px 0;
}

/* Homepage-only: footer matches the light gray nav bar instead of
   staying dark navy. Scoped so dashboard pages (dark nav + dark
   footer) are unaffected. */
body:not(.meridian-theme) .site-footer {
  background: var(--off-white);
  color: var(--ink-soft);
  border-top: 2px solid var(--red);
}

.slant-footer {
  position: relative;
  clip-path: polygon(0 0, 100% 40px, 100% 100%, 0 100%);
  margin-top: -40px;
  padding-top: 56px;
}

@media (max-width: 700px) {
  .slant-footer {
    clip-path: polygon(0 0, 100% 24px, 100% 100%, 0 100%);
    margin-top: -24px;
    padding-top: 48px;
  }
}

.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.site-footer img {
  height: 30px;
  opacity: 0.9;
}

.site-footer small {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1100px) {
  .hero__copy p {
    max-width: none;
  }
}

@media (max-width: 900px) {
  .about__grid,
  .contact__grid {
    grid-template-columns: 1fr;
  }

  .process__list,
  .principles__grid {
    grid-template-columns: 1fr;
  }

  .site-nav__links {
    gap: 16px;
  }

  .site-nav__links li:not(:last-child) {
    display: none;
  }

  .site-nav__tenant {
    display: none;
  }

  .contact__row dd {
    text-align: right;
  }
}

@media (max-width: 480px) {
  .site-nav__portal {
    font-size: 0;
  }

  .site-nav__portal::before {
    width: 9px;
    height: 9px;
  }
}

@media (max-width: 560px) {
  .wrap {
    padding: 0 20px;
  }

  .hero {
    padding: 150px 0 80px;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    justify-content: center;
  }

  .contact__card {
    padding: 28px;
  }

  .contact__row {
    flex-direction: column;
    gap: 4px;
  }

  .contact__row dd {
    text-align: left;
  }
}