/* ═══════════════════════════════════════════════════════════════
   MERIDIAN15 — BRAND SYSTEM  v1.0
   Single source of truth. Load this after meridianfifteen.webflow.css
   on every page.
   ═══════════════════════════════════════════════════════════════ */

/* ── GLOBAL SAFETY ──────────────────────────────────────────── */
/* Prevent overflow from oversized media on narrow viewports */
img, video, iframe { max-width: 100%; height: auto; }
/* Prevent horizontal scroll from rogue elements */
html, body { overflow-x: clip; }

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --m15-black:      #000000;
  --m15-white:      #ffffff;
  --m15-offwhite:   #f2f0ec;   /* warm off-white for alternating sections */
  --m15-red:        #FF1500;
  --m15-red-dark:   #d91200;
  --m15-text-dim:   rgba(255,255,255,0.55);
  --m15-border:     rgba(255,255,255,0.08);

  /* Typography */
  --m15-font:       'Montserrat', sans-serif;

  /* Motion */
  --m15-ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --m15-dur:        0.9s;

  /* Spacing */
  --m15-section-pad: 120px 64px;
  --m15-container:   1200px;

  /* ── BUTTON SHAPE — edit once, applies everywhere ── */
  --m15-btn-radius: 2px;          /* sharp, editorial */
  --m15-btn-pad:    18px 36px;
  --m15-btn-font:   11px;
  --m15-btn-track:  0.1em;
}

/* ── BASE ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
a, a:hover, a:visited { text-decoration: none !important; }

/* ── BUTTON COMPONENTS ───────────────────────────────────────── */

/* Primary — red fill */
.m15-btn,
.hs-cta-btn,
.pf-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--m15-red) !important;
  color: var(--m15-white) !important;
  font-family: var(--m15-font) !important;
  font-size: var(--m15-btn-font) !important;
  font-weight: 700 !important;
  letter-spacing: var(--m15-btn-track) !important;
  text-transform: uppercase !important;
  padding: var(--m15-btn-pad) !important;
  border-radius: var(--m15-btn-radius) !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
  white-space: nowrap !important;
}
.m15-btn:hover,
.hs-cta-btn:hover,
.pf-cta-btn:hover {
  background: var(--m15-red-dark) !important;
  transform: translateY(-1px) !important;
  color: var(--m15-white) !important;
}
.m15-btn svg,
.hs-cta-btn svg,
.pf-cta-btn svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2;
  transition: transform 0.2s;
}
.m15-btn:hover svg,
.hs-cta-btn:hover svg,
.pf-cta-btn:hover svg { transform: translateX(4px); }

/* Outline — white border, transparent fill */
.m15-btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
  color: var(--m15-white) !important;
  font-family: var(--m15-font) !important;
  font-size: var(--m15-btn-font) !important;
  font-weight: 700 !important;
  letter-spacing: var(--m15-btn-track) !important;
  text-transform: uppercase !important;
  padding: var(--m15-btn-pad) !important;
  border-radius: var(--m15-btn-radius) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, color 0.2s ease !important;
}
.m15-btn-outline:hover {
  border-color: var(--m15-white) !important;
  color: var(--m15-white) !important;
}

/* ── NAV CTA BUTTON — standardise border-radius ─────────────── */
.nav-cta-btn {
  border-radius: var(--m15-btn-radius) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 10px 20px !important;
}

/* ── OFF-WHITE SECTION UTILITY ───────────────────────────────── */
.m15-section-light {
  background: var(--m15-offwhite) !important;
  color: var(--m15-black) !important;
}
.m15-section-dark {
  background: var(--m15-black) !important;
  color: var(--m15-white) !important;
}

/* ── EYEBROW LABEL (small ALL-CAPS label above headings) ─────── */
.m15-eyebrow {
  font-family: var(--m15-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--m15-red);
  display: block;
  margin-bottom: 24px;
}
/* on light backgrounds */
.m15-section-light .m15-eyebrow { color: var(--m15-red); }

/* ── SECTION LABEL (dim uppercase, not red) ──────────────────── */
.m15-section-label {
  font-family: var(--m15-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}
.m15-section-light .m15-section-label { color: rgba(0,0,0,0.3); }

/* ── PILL TAG (small bordered label) ────────────────────────── */
.m15-tag {
  display: inline-block;
  font-family: var(--m15-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 100px;          /* pills stay round — only CTA buttons are sharp */
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.6);
  transition: color 0.25s, border-color 0.25s;
}
.m15-tag:hover { color: var(--m15-red); border-color: rgba(255,21,0,0.35); }
.m15-section-light .m15-tag {
  border-color: rgba(0,0,0,0.15);
  color: rgba(0,0,0,0.5);
}

/* ── SCROLL REVEAL ANIMATION (shared across pages) ───────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--m15-dur) var(--m15-ease),
              transform var(--m15-dur) var(--m15-ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left {
  opacity: 0; transform: translateX(-40px);
  transition: opacity var(--m15-dur) var(--m15-ease),
              transform var(--m15-dur) var(--m15-ease);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-delay-1 { transition-delay: 0.1s !important; }
.reveal-delay-2 { transition-delay: 0.2s !important; }
.reveal-delay-3 { transition-delay: 0.32s !important; }

/* ── PORTFOLIO NAV — override to match Webflow nav visually ──── */
.pf-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9000 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 40px !important;
  height: 72px !important;
  background: transparent !important;
  transition: background 0.35s ease !important;
  border-bottom: 1px solid transparent !important;
}
.pf-nav.scrolled {
  background: rgba(0,0,0,0.96) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
/* Logo: match Webflow brand size exactly */
.pf-nav-logo { flex: 0 0 160px !important; }
.pf-nav-logo img {
  height: 40px !important;
  width: auto !important;
  display: block !important;
}
/* Nav links */
.pf-nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: auto !important;
  list-style: none !important;
  padding: 0 !important;
}
.pf-nav-links a {
  font-family: var(--m15-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.65) !important;
  padding: 8px 14px !important;
  letter-spacing: 0.01em !important;
  transition: color 0.2s !important;
}
.pf-nav-links a:hover,
.pf-nav-links a.active { color: #fff !important; }
/* "Work With Us" last link becomes a CTA button */
.pf-nav-links li:last-child a {
  background: var(--m15-red) !important;
  color: var(--m15-white) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 10px 20px !important;
  border-radius: var(--m15-btn-radius) !important;
  margin-left: 16px !important;
  transition: background 0.2s ease !important;
}
.pf-nav-links li:last-child a:hover {
  background: var(--m15-red-dark) !important;
}

/* ── FOOTER ──────────────────────────────────────────────────── */
/* Shared footer link style */
.hs-footer a,
.pf-footer a {
  color: rgba(255,255,255,0.45);
  transition: color 0.2s;
}
.hs-footer a:hover,
.pf-footer a:hover { color: #fff; }

/* ── TYPOGRAPHY SCALE (headings) ─────────────────────────────── */
/* Section heading — large editorial */
.m15-heading-xl {
  font-family: var(--m15-font);
  font-size: clamp(48px, 7vw, 100px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.m15-heading-lg {
  font-family: var(--m15-font);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.025em;
}
.m15-heading-md {
  font-family: var(--m15-font);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
/* Body copy */
.m15-body {
  font-family: var(--m15-font);
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,0.6);
}
.m15-section-light .m15-body { color: rgba(0,0,0,0.55); }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 991px) {
  :root { --m15-section-pad: 80px 32px; }
  .pf-nav { padding: 0 24px !important; }
}
@media (max-width: 767px) {
  :root { --m15-section-pad: 60px 20px; }
  .pf-nav-links { display: none !important; }   /* portfolio mobile: hide links (Webflow nav handles others) */
}
@media (max-width: 480px) {
  :root {
    --m15-section-pad: 40px 16px;
    --m15-btn-pad: 16px 28px;
  }
  /* Enlarge tap targets to meet WCAG 44px minimum */
  .nav-cta-btn {
    padding: 14px 22px !important;
    font-size: 11px !important;
  }
  .pf-nav-links li:last-child a {
    padding: 14px 22px !important;
  }
  .pf-nav { padding: 0 16px !important; }
  /* Button breathing room on phones */
  .m15-btn,
  .hs-cta-btn,
  .pf-cta-btn {
    padding: 16px 28px !important;
    font-size: 11px !important;
  }
  /* Headline tightening for narrow viewports */
  .m15-h2 { font-size: clamp(28px, 8vw, 40px); }
  .m15-eyebrow { font-size: 10px; letter-spacing: 2px; }
}