/* Murcielago Global Solutions
   Palette sampled from the client logo, 2026-08-16. See brand-assets.md in the vault.
   Reworked 2026-08-18: one seamless cream ground instead of alternating stripes,
   dimension from floating cards and shadows, Copper Hill as the gauge. */

:root {
  --green:        #1A3A2F;
  --green-deep:   #12291F;
  --green-soft:   #2E5548;
  --orange:       #FB702D;
  --orange-deep:  #D9561A;
  --sand:         #EBCA9D;
  --sand-pale:    #F8F0E4;
  --sand-line:    #E2D3BC;
  --cream:        #FAF5EB;
  --white:        #FFFFFF;
  --ink:          #1C2521;
  --muted:        #5B6E66;

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --r-card: 8px;
  --shadow-rest:  0 14px 34px rgba(26,58,47,.13);
  --shadow-hover: 0 24px 48px rgba(26,58,47,.12);
  --shadow-float: 0 26px 64px rgba(26,58,47,.2);

  --wrap: 1180px;
  --gut: 32px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* One continuous ground. Sections sit transparent on it; only the deliberate
   dark green breaks and the footer interrupt it. */
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink);
  background: linear-gradient(180deg,
    #BFD3C7 0%, var(--cream) 15%, #FFFFFF 38%, #F3E7D2 58%, #FFFFFF 76%, #B8CEC1 100%);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--green);
  line-height: 1.15;
  margin: 0 0 .6em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.6rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.95rem, 3.4vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.45rem); }
h4 { font-size: 1.05rem; }

/* The italic accent word. On light ground it goes deep orange, on dark ground sand.
   This is the one place orange is allowed to be type, and only on cream or white. */
h1 em, h2 em { font-style: italic; color: var(--orange-deep); }
.hero h1 em, .page-hero h1 em, .sec-green h2 em { color: var(--sand); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 780px; }

/* ---------- Shared type helpers ---------- */

.eyebrow {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 11px;
}
.eyebrow.centered { justify-content: center; }

.lede { font-size: 1.19rem; line-height: 1.68; color: var(--muted); }

/* Any lede sitting on a dark ground. --muted is a dark green and disappears there. */
.hero .lede,
.page-hero .lede,
.sec-green .lede,
.on-dark .lede { color: rgba(255,255,255,.84); }

.rule-orange { width: 74px; height: 5px; background: var(--orange); border: 0; margin: 0 0 30px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 16px 32px;
  border: 2px solid transparent;
  border-radius: 3px;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  cursor: pointer;
}
.btn-primary { background: var(--orange); color: var(--white); border-color: var(--orange); }
.btn-primary:hover { background: var(--orange-deep); border-color: var(--orange-deep); }

.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,.09); }

.btn-outline { background: transparent; color: var(--green); border-color: var(--green); }
.btn-outline:hover { background: var(--green); color: var(--white); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ---------- Header ---------- */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(250,245,235,.8);
  border-bottom: 1px solid rgba(226,211,188,.4);
  transition: background-color .25s ease, border-color .25s ease;
}
.site-header.scrolled {
  background: rgba(250,245,235,.96);
  border-bottom-color: rgba(226,211,188,.65);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; min-height: 94px;
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; }
.brand img { height: 56px; width: auto; }
.brand-text {
  font-family: var(--serif); font-weight: 700; font-size: 1.18rem;
  color: var(--green); line-height: 1.2; letter-spacing: -0.01em;
}
.brand-text span {
  display: block; font-family: var(--sans); font-size: .6rem; font-weight: 600;
  letter-spacing: .17em; color: var(--orange-deep); margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 34px; }
.nav > a, .nav .has-menu > a {
  font-size: .88rem; font-weight: 600; color: var(--green);
  text-decoration: none; padding: 6px 0; position: relative;
}
.nav > a::after, .nav .has-menu > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}
.nav > a:hover::after, .nav > a[aria-current="page"]::after,
.nav .has-menu > a:hover::after, .nav .has-menu > a[aria-current="page"]::after { transform: scaleX(1); }
.nav .btn { padding: 13px 26px; font-size: .76rem; }
.nav .btn::after { display: none; }

/* Solutions dropdown. Pure CSS, keyboard reachable via focus-within. */
.has-menu { position: relative; display: flex; align-items: center; }
.has-menu .caret { font-size: .6rem; margin-left: 6px; opacity: .55; }
.menu {
  position: absolute; top: 100%; left: -18px; padding-top: 14px;
  display: none; z-index: 60;
}
.menu-inner {
  background: var(--white); border-radius: 8px;
  box-shadow: 0 18px 44px rgba(26,58,47,.16);
  border: 1px solid rgba(226,211,188,.55);
  padding: 10px; min-width: 268px;
}
.has-menu:hover .menu, .has-menu:focus-within .menu { display: block; }
.menu-inner a {
  display: block; padding: 11px 14px; border-radius: 5px;
  font-size: .88rem; font-weight: 600; color: var(--green); text-decoration: none;
}
.menu-inner a:hover { background: var(--sand-pale); }

/* ---------- Sections ---------- */

section { padding: 104px 0; }

/* Legacy class from the striped version. Kept so old markup does not break,
   but it no longer paints. The ground is continuous now. */
.sec-sand { background: transparent; }

.sec-green { background: var(--green); color: rgba(255,255,255,.86); position: relative; overflow: hidden; }
.sec-green h1, .sec-green h2, .sec-green h3, .sec-green h4 { color: var(--white); }
.sec-green::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 34%;
  background:
    repeating-linear-gradient(135deg,
      rgba(235,202,157,.05) 0 2px,
      transparent 2px 16px);
  pointer-events: none;
}
.sec-green .wrap { position: relative; z-index: 1; }
.sec-tight { padding: 68px 0; }

.sec-head { max-width: 760px; margin-bottom: 58px; }
.sec-head.centered { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Hero ---------- */

.hero {
  background: var(--green);
  color: rgba(255,255,255,.85);
  padding: 118px 0 168px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 42%;
  background:
    repeating-linear-gradient(135deg,
      rgba(235,202,157,.055) 0 2px,
      transparent 2px 16px);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.35fr .95fr; gap: 68px; align-items: center; }
.hero h1 { color: var(--white); margin-bottom: .38em; }
.hero .lede { max-width: 560px; }

.hero-card {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(235,202,157,.26);
  border-left: 5px solid var(--orange);
  border-radius: 0;
  padding: 34px 34px 30px;
}
.hero-card h4 {
  color: var(--sand); font-family: var(--sans); font-size: .74rem;
  font-weight: 700; letter-spacing: .17em; text-transform: uppercase; margin-bottom: 14px;
}
.hero-card p { font-size: 1.03rem; line-height: 1.66; color: rgba(255,255,255,.9); }

/* ---------- Stat band ----------
   No longer a flat sand stripe. A white card floating up over the hero's bottom
   edge, which is where the page gets its depth. */

.stat-band { background: transparent; padding: 0 0 26px; position: relative; z-index: 5; }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  background: var(--white);
  border-radius: 10px;
  box-shadow: var(--shadow-float);
  padding: 48px 34px;
  margin-top: -78px;
}
.stat { text-align: center; padding: 0 16px; border-left: 2px solid rgba(26,58,47,.1); }
.stat:first-child { border-left: 0; }
.stat .num {
  font-family: var(--serif); font-weight: 700; font-size: clamp(2rem, 3.4vw, 2.75rem);
  color: var(--green); line-height: 1; margin-bottom: 10px; display: block;
}
.stat .cap {
  font-size: .78rem; font-weight: 600; letter-spacing: .085em;
  text-transform: uppercase; color: var(--green-soft); line-height: 1.5;
}

/* A page that opens with a stat card needs less headroom on the next section. */
.stat-band + section { padding-top: 84px; }

/* ---------- Cards ---------- */

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

.card {
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rest);
  padding: 38px 34px 34px;
  display: flex; flex-direction: column;
}
.card h3 { margin-bottom: .5em; }
.card p { color: var(--muted); font-size: 1rem; }
.card .card-foot { margin-top: auto; padding-top: 22px; }
.card-link {
  font-size: .78rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--orange-deep); text-decoration: none;
}
.card-link:hover { text-decoration: underline; }
.card-num {
  font-family: var(--serif); font-style: italic; font-size: 1.05rem; font-weight: 700;
  color: var(--orange); margin-bottom: 14px; display: block;
}

/* ---------- Approach steps ---------- */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 12px; }
.step { padding: 0 30px; border-left: 2px solid rgba(235,202,157,.3); }
.step:first-child { border-left: 0; padding-left: 0; }
.step .step-n {
  font-family: var(--serif); font-size: 2.4rem; font-weight: 700;
  color: var(--orange); line-height: 1; display: block; margin-bottom: 16px;
}
.step h3 { color: var(--white); font-size: 1.28rem; margin-bottom: .45em; }
.step p { font-size: .95rem; color: rgba(255,255,255,.74); }

/* ---------- Case studies ---------- */

.case {
  background: var(--white);
  border: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-rest);
  display: flex; flex-direction: column;
}
.case-top { background: var(--green); padding: 32px 32px 28px; }
.case-figure {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.6rem, 4.4vw, 3.6rem);
  color: var(--sand); line-height: 1; display: block; margin-bottom: 10px;
}
.case-title {
  font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.78);
}
.case-body { padding: 30px 32px 34px; }
.case-body > p { color: var(--muted); font-size: .97rem; margin-bottom: 20px; }
.case-body ul { margin: 0; padding: 0; list-style: none; }
.case-body li {
  position: relative; padding-left: 24px; margin-bottom: 11px;
  font-size: .94rem; line-height: 1.6; color: var(--ink);
}
.case-body li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 11px; height: 2px; background: var(--orange);
}
.case-body li:last-child { margin-bottom: 0; }

/* ---------- Checklist ---------- */

.check { margin: 0; padding: 0; list-style: none; }
.check li {
  position: relative; padding-left: 30px; margin-bottom: 14px; line-height: 1.62;
}
.check li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 14px; height: 2px; background: var(--orange);
}
.cols-2 { column-count: 2; column-gap: 46px; }
.cols-2 li { break-inside: avoid; }

/* ---------- Split ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: center; }
.split.wide-left { grid-template-columns: 1.15fr .85fr; }

.pull {
  border-left: 5px solid var(--orange);
  padding: 6px 0 6px 30px;
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--green);
}
.sec-green .pull { color: var(--white); }

/* A side panel that needs to read as its own object on the cream ground. */
.panel {
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rest);
  border: 1px solid rgba(226,211,188,.6);
  padding: 38px 36px;
}
.panel-label {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--orange-deep);
  font-weight: 700; margin: 0 0 20px;
}

/* ---------- Q&A blocks (the words buyers actually search) ---------- */

.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.qa {
  background: var(--white);
  border-radius: var(--r-card);
  border-left: 4px solid var(--orange);
  box-shadow: var(--shadow-rest);
  padding: 30px 32px 28px;
}
.qa h3 { font-size: 1.16rem; margin-bottom: .45em; letter-spacing: 0; }
.qa h3::before { content: "\201C"; }
.qa h3::after { content: "\201D"; }
.qa p { color: var(--muted); font-size: .96rem; }
.qa .card-link { display: inline-block; margin-top: 14px; }
.qa-list { display: grid; gap: 18px; max-width: 880px; }

/* ---------- Solutions overview rows ---------- */

.sol-row {
  background: var(--white);
  border-radius: 10px;
  box-shadow: var(--shadow-rest);
  border: 1px solid rgba(226,211,188,.55);
  padding: 50px 52px;
  display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px;
  margin-bottom: 28px;
}
.sol-row:hover { border-color: var(--orange); }
.sol-row .sol-n {
  font-family: var(--serif); font-style: italic; font-weight: 700;
  font-size: 2.1rem; color: var(--orange); line-height: 1; display: block; margin-bottom: 18px;
}
.sol-row h2 { font-size: clamp(1.6rem, 2.6vw, 2.05rem); }

/* ---------- Industries ---------- */

.tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.tag {
  border: 1px solid rgba(226,211,188,.9);
  background: var(--white);
  box-shadow: var(--shadow-rest);
  padding: 11px 24px;
  font-size: .84rem; font-weight: 600;
  color: var(--green);
  border-radius: 3px;
}
.sec-green .tag { background: transparent; border-color: rgba(235,202,157,.35); color: var(--sand); box-shadow: none; }

/* ---------- Team ---------- */

.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.person {
  border: 1px solid rgba(226,211,188,.6);
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rest);
  padding: 30px 28px;
  border-bottom: 4px solid var(--sand);
}
.person.lead { border-bottom-color: var(--orange); }
.person .initials {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--sand); color: var(--green);
  font-family: var(--serif); font-weight: 700; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.person h3 { font-size: 1.15rem; margin-bottom: .25em; }
.person .role {
  font-size: .85rem; color: var(--muted); font-weight: 500;
}

/* ---------- CTA band ----------
   A rounded sand card floating on the cream, not a full-bleed stripe. */

.cta-band { background: transparent; padding: 26px 0 110px; text-align: center; }
.cta-band .wrap > .cta-inner,
.cta-inner {
  background: var(--sand);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(26,58,47,.1);
  padding: 74px 40px;
}
.cta-band h2 { max-width: 720px; margin-left: auto; margin-right: auto; }
.cta-band p { max-width: 620px; margin-left: auto; margin-right: auto; color: var(--green-soft); }
.cta-band .btn-row { justify-content: center; }

/* ---------- Page hero (inner pages) ---------- */

.page-hero { background: var(--green); color: rgba(255,255,255,.84); padding: 176px 0 96px; position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 42%;
  background:
    repeating-linear-gradient(135deg,
      rgba(235,202,157,.055) 0 2px,
      transparent 2px 16px);
  pointer-events: none;
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { color: var(--white); font-size: clamp(2.3rem, 4.4vw, 3.3rem); }
.page-hero .lede { max-width: 720px; }
.page-hero .eyebrow { color: var(--sand); }
.page-hero .btn-row { margin-top: 30px; }

/* Inner pages that float a stat card need the extra hero depth too. */
.page-hero.deep { padding-bottom: 150px; }

/* ---------- Contact ---------- */

.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 62px; align-items: start; }
.contact-list { margin: 0; padding: 0; list-style: none; }
.contact-list li { margin-bottom: 26px; }
.contact-list .lbl {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--orange-deep); margin-bottom: 5px;
}
.contact-list a { font-weight: 600; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

form .field { margin-bottom: 20px; }
form label {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--green); margin-bottom: 7px;
}
form input, form select, form textarea {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--sand-line); border-radius: 4px;
  font-family: var(--sans); font-size: .97rem; color: var(--ink);
  background: var(--white);
}
form input:focus, form select:focus, form textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(251,112,45,.13);
}
form textarea { min-height: 132px; resize: vertical; }
.form-note { font-size: .84rem; color: var(--muted); margin-top: 14px; }

/* The form itself reads as an object on the cream ground. */
.form-panel {
  background: var(--white);
  border-radius: 10px;
  box-shadow: var(--shadow-rest);
  border: 1px solid rgba(226,211,188,.55);
  padding: 44px 42px;
}

/* ---------- Footer ---------- */

.site-footer { background: var(--green-deep); color: rgba(255,255,255,.6); padding: 72px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 44px; }
.site-footer h4 {
  color: var(--sand); font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; margin-bottom: 18px;
}
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: 11px; font-size: .93rem; }
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: var(--sand); }
.footer-brand img { height: 62px; margin-bottom: 20px; }
.footer-brand p { font-size: .93rem; line-height: 1.65; max-width: 300px; }
.footer-bar {
  margin-top: 52px; padding-top: 26px;
  border-top: 1px solid rgba(235,202,157,.16);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: .84rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .hero-grid, .split, .split.wide-left, .contact-grid, .sol-row, .qa-grid { grid-template-columns: 1fr; }
  .hero-grid, .split, .split.wide-left, .contact-grid { gap: 44px; }
  .sol-row { gap: 30px; padding: 40px 36px; }
  .grid-3, .team { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .step:nth-child(3) { border-left: 0; padding-left: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .stat:nth-child(3) { border-left: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 38px; }
  .nav { gap: 22px; }
}

@media (max-width: 760px) {
  :root { --gut: 22px; }
  section { padding: 68px 0; }
  .hero { padding: 76px 0 120px; }
  .stats { margin-top: -56px; padding: 36px 24px; }
  .grid-3, .grid-2, .team, .steps, .stats { grid-template-columns: 1fr; }
  .step, .stat { border-left: 0; padding-left: 0; }
  .step { border-top: 2px solid rgba(235,202,157,.3); padding-top: 28px; }
  .step:first-child { border-top: 0; padding-top: 0; }
  .cols-2 { column-count: 1; }
  .nav a:not(.btn), .nav .has-menu { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .sol-row { padding: 34px 26px; }
  .cta-inner { padding: 56px 26px; }
  .form-panel { padding: 32px 24px; }

  /* The header is the one row that cannot wrap, so it gets explicit room to shrink.
     Without min-width:0 the brand block refuses to compress and pushes the button
     off the right edge. */
  .header-inner { gap: 14px; min-height: 70px; }
  .hero.hero-center { padding: 140px 0 90px; }
  .page-hero { padding: 128px 0 70px; }
  .brand { min-width: 0; gap: 10px; }
  .brand img { height: 38px; }
  .brand-text { font-size: .82rem; min-width: 0; }
  .brand-text span { font-size: .48rem; letter-spacing: .13em; }
  .nav .btn { padding: 11px 15px; font-size: .66rem; letter-spacing: .07em; white-space: nowrap; }
}

@media (max-width: 560px) {
  /* Below this the wordmark and the button cannot both fit legibly. The mark wins,
     because the button is the only way to convert on a phone. */
  .brand-text { display: none; }
  .brand img { height: 42px; }
}

/* ---------- Centered hero (homepage) ---------- */

.hero.hero-center { padding: 210px 0 130px; text-align: center; }
.hero-center h1 { margin-bottom: .35em; }
.hero-center .lede { max-width: 740px; margin: 0 auto; }
.hero-center .btn-row { justify-content: center; }

/* ---------- Stats ticker ----------
   The aggregate numbers move across the screen in a continuous band. */

.ticker {
  background: var(--white);
  border-top: 1px solid rgba(226,211,188,.5);
  border-bottom: 1px solid rgba(226,211,188,.5);
  box-shadow: 0 18px 44px rgba(26,58,47,.07);
  overflow: hidden;
  padding: 30px 0;
  position: relative;
  z-index: 5;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-move 30s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-group { display: flex; align-items: center; }
.tick { display: flex; align-items: baseline; gap: 14px; white-space: nowrap; }
.tick .num {
  font-family: var(--serif); font-weight: 700; font-size: 2rem;
  color: var(--green); line-height: 1;
}
.tick .cap {
  font-size: .76rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--green-soft);
}
.tick-sep {
  width: 26px; height: 3px; background: var(--orange);
  margin: 0 44px; flex-shrink: 0; align-self: center;
}
@keyframes ticker-move { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; flex-wrap: wrap; width: auto; }
  .ticker-group[aria-hidden="true"] { display: none; }
}

/* ---------- Scroll reveal ----------
   Elements fade and rise as they enter the viewport. site.js tags them;
   without JavaScript nothing is hidden. */

.reveal {
  opacity: 0; transform: translateY(38px) scale(.94);
  transition: opacity .6s ease, transform .65s cubic-bezier(.3,1.35,.45,1);
}
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce), print {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Approach step cards ---------- */

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step-card {
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-top: 3px solid var(--sand);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rest);
  padding: 36px 30px 32px;
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.step-card .step-n {
  font-family: var(--serif); font-weight: 700; font-size: 2rem;
  color: var(--sand); line-height: 1; display: block; margin-bottom: 16px;
  transition: color .35s ease;
}
.step-card h3 { font-size: 1.24rem; margin-bottom: .45em; }
.step-card p { font-size: .94rem; color: var(--muted); }
.step-card.active {
  border-color: var(--orange);
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}
.step-card.active .step-n { color: var(--orange); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .grid-4 { grid-template-columns: 1fr; } }
.approach-line {
  margin-top: 32px; text-align: center;
  font-family: var(--serif); font-style: italic; font-weight: 700;
  font-size: 1.25rem; color: var(--green);
}
/* A lone card in the last row of a 3-column grid sits centered, not orphaned left. */
@media (min-width: 1001px) { .grid-3 .card-solo { grid-column: 2; } }

/* ---------- Animated CTA card ---------- */

.cta-inner { position: relative; overflow: hidden; }
.cta-inner > * { position: relative; z-index: 1; }
.cta-inner::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; left: 0; width: 34%; z-index: 0;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg) translateX(-180%);
  animation: cta-sheen 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cta-sheen {
  0%, 30%  { transform: skewX(-18deg) translateX(-180%); }
  80%, 100% { transform: skewX(-18deg) translateX(480%); }
}
.cta-inner.reveal { transform: translateY(38px) scale(.93); }
.cta-inner.reveal.in-view { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cta-inner::after { animation: none; }
}

/* ---------- Load animation: hero text drops in ---------- */

@media (prefers-reduced-motion: no-preference) {
  @keyframes drop-in {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: none; }
  }
  .hero-center h1, .page-hero h1 { animation: drop-in .65s ease .08s backwards; }
  .hero-center .lede, .page-hero .lede, .page-hero .eyebrow { animation: drop-in .65s ease .24s backwards; }
  .hero-center .btn-row { animation: drop-in .65s ease .4s backwards; }
}

/* ---------- Tag marquees (broker services, industries) ---------- */

.tag-ticker { overflow: hidden; width: 100%; padding: 8px 0; }
.tag-track { display: flex; width: max-content; animation: ticker-move 24s linear infinite; }
.tag-track.reverse { animation-direction: reverse; }
.tag-ticker:hover .tag-track { animation-play-state: paused; }
.tag-group { display: flex; gap: 14px; padding-right: 14px; }
.tag-group .tag { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .tag-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .tag-group[aria-hidden="true"] { display: none; }
}

/* Closing line under the Why Work With Us split. */
.why-closing {
  margin: 54px auto 0;
  max-width: 720px;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--green);
}


/* ---------- 2026-09-14 revision, from Victor's implementation brief ----------
   Same palette, same type. New components for the standard inner-page anatomy
   (hero, signs, checks, capabilities, outcome, questions, CTA), the proof wall,
   and the partner-network role split. */

/* Credibility strip. The moving ticker is gone: the brief gives each metric a
   caption and a sub-caption, which a marquee cannot carry legibly. */
.stats { padding: 44px 30px 40px; }
.stat .num { font-size: clamp(2.3rem, 3.8vw, 3.1rem); }
.stat .sub {
  display: block; margin-top: 9px; font-size: .86rem; line-height: 1.5;
  color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0;
}

/* Nav CTA is long. Under 560px the short form shows instead. */
.nav .btn .short { display: none; }

/* Why work with us: pain on the left, edge on the right, orange rule kept. */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.why h3 { font-size: clamp(1.5rem, 2.3vw, 1.95rem); line-height: 1.2; margin-bottom: .7em; }
.why p { font-size: 1.02rem; }
.why .why-right { border-left: 5px solid var(--orange); padding-left: 36px; }
.why .why-right h3 { font-size: clamp(1.8rem, 2.8vw, 2.4rem); }
.hi { color: var(--orange-deep); font-style: italic; }

/* Signs you may have a problem: short recognition cards, scanned before the
   technical lists. */
.signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sign {
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-left: 4px solid var(--orange);
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(26,58,47,.07);
  padding: 20px 24px;
  font-size: .98rem; line-height: 1.55; color: var(--ink);
  display: flex; align-items: center;
}

/* Capability panels sit three across; their lists run tighter than body checks. */
.panel .check li { font-size: .95rem; margin-bottom: 10px; line-height: 1.55; }
.panel .check li::before { top: .55em; width: 12px; }

/* What success looks like: one strong outcome block on the authority colour. */
.outcome {
  background: var(--green); color: var(--white);
  border-radius: 10px; box-shadow: var(--shadow-float);
  padding: 54px 58px;
  display: grid; grid-template-columns: 240px 1fr; gap: 44px; align-items: center;
  position: relative; overflow: hidden;
}
.outcome::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 30%;
  background: repeating-linear-gradient(135deg, rgba(235,202,157,.06) 0 2px, transparent 2px 16px);
  pointer-events: none;
}
.outcome > * { position: relative; z-index: 1; }
.outcome .panel-label { color: var(--sand); margin: 0; }
.outcome p {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.4; color: var(--white); margin: 0;
}

/* Supplier line, used where the brief asks for it. */
.note {
  background: var(--white); border-left: 4px solid var(--orange); border-radius: 6px;
  box-shadow: var(--shadow-rest); padding: 24px 30px; font-size: 1rem; color: var(--ink);
}
.note strong {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--orange-deep); margin-bottom: 8px;
}

/* Proof wall. Metric first, descriptor second, then four labelled rows. */
.case-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
.case-top { padding: 36px 36px 30px; }
.case-ind {
  display: block; margin-top: 10px; font-size: .9rem; font-weight: 500;
  color: rgba(255,255,255,.66); letter-spacing: 0; text-transform: none;
}
.case-body { padding: 32px 36px 36px; }
.case-steps { margin: 0; display: grid; grid-template-columns: 118px 1fr; column-gap: 24px; row-gap: 18px; }
.case-steps dt {
  font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--orange-deep); padding-top: 4px;
}
.case-steps dd { margin: 0; font-size: .98rem; line-height: 1.6; color: var(--ink); }
.case-steps dd.result { font-weight: 600; color: var(--green); }
.case-mini .case-body p { color: var(--ink); font-size: 1rem; margin: 0; }

/* Partner network: who advises and who executes, side by side, so nobody reads
   MGS as the broker, forwarder or warehouse. */
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
/* Scoped to .roles: a bare .role also matches .person .role, the job title in a
   team tile, which was picking up this panel's 38px padding on the About page. */
.roles .role { border-radius: var(--r-card); padding: 38px 38px 34px; }
.roles .role .panel-label { margin-bottom: 14px; }
.roles .role h3 { margin-bottom: .6em; }
.role.mgs { background: var(--green); color: rgba(255,255,255,.88); box-shadow: var(--shadow-float); }
.role.mgs .panel-label { color: var(--sand); }
.role.mgs h3 { color: var(--white); }
.role.mgs .check li { color: rgba(255,255,255,.88); }
.role.partner { background: var(--white); border: 1px solid var(--sand-line); box-shadow: var(--shadow-rest); }

/* Redirect stubs for retired filenames. */
.stub { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 160px 0 80px; }

@media (max-width: 1000px) {
  .signs, .roles, .case-grid { grid-template-columns: 1fr 1fr; }
  .why { grid-template-columns: 1fr; gap: 40px; }
  .outcome { grid-template-columns: 1fr; gap: 18px; padding: 44px 40px; }
}
@media (max-width: 760px) {
  .signs, .roles, .case-grid { grid-template-columns: 1fr; }
  .why .why-right { padding-left: 22px; }
  .outcome { padding: 36px 26px; }
  .case-top { padding: 28px 26px 24px; }
  .case-body { padding: 26px 26px 30px; }
  .role { padding: 30px 26px; }
  .stats { padding: 32px 22px 28px; }
}
@media (max-width: 1000px) {
  .nav .btn .long { display: none; }
  .nav .btn .short { display: inline; }
}
@media (max-width: 560px) {
  /* Stacked CTAs read as one column, not two widths. */
  .hero .btn-row .btn, .page-hero .btn-row .btn, .cta-inner .btn-row .btn { width: 100%; text-align: center; }
  .nav .btn .long { display: none; }
  .nav .btn .short { display: inline; }
  .case-steps { grid-template-columns: 1fr; row-gap: 6px; }
  .case-steps dd { margin-bottom: 12px; }
}

/* ---------- Revision round 2, 2026-09-28 ----------
   From Victor's "MGS Website Revision Instructions" (MGS - Website V2.pdf).
   The centering asks, kept in one block so they are easy to review or revert. */

/* Solution cards: contents centered within the card. */
.card { text-align: center; align-items: center; }
.card .card-foot { width: 100%; }

/* A lone tile in the last row of the signs grid sits centered rather than
   orphaned on the left, with its own text centered. Same pattern as
   .grid-3 .card-solo above. Applies to the 7-tile pages. */
@media (min-width: 1001px) {
  .signs > .sign:last-child:nth-child(3n+1) {
    grid-column: 2;
    text-align: center;
    justify-content: center;
  }
}

/* Solutions page: the main section heading block centered. */
.page-hero.hero-centered .wrap { text-align: center; }
.page-hero.hero-centered .eyebrow { justify-content: center; }
.page-hero.hero-centered .lede { margin-left: auto; margin-right: auto; }
.page-hero.hero-centered .btn-row { justify-content: center; }

/* Contact form result message, shown in place after a Web3Forms submission. */
.form-status {
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink);
}
.form-status.ok  { background: rgba(26,58,47,.07);  border-left: 4px solid var(--green); }
.form-status.err { background: rgba(232,110,42,.09); border-left: 4px solid var(--orange); }