/* ===================================================================
   MERIDIAN INDUSTRIES — Typography & Spacing Pass
   Loaded AFTER elevate.css. Same colors, same layout structure —
   just bigger, more readable text and real breathing room between
   cards/sections instead of the flush 2px "mosaic" grids.
   =================================================================== */

/* ---------- BASE SCALE BUMP ---------- */
/* Every rem-based size on the site scales off this. Modest, global lift. */
html{font-size:17.5px;}
body{line-height:1.7;}

/* ---------- PARAGRAPHS / DESCRIPTIONS: bigger, but NOT loose.
   1.9 line-height on short 1-line card blurbs was inflating card
   height and creating dead space — 1.6 is readable without bloating. ---------- */
.hero-desc,.about-text p,.acard-desc,.cap-desc,.wcard-desc,.qpillar-desc,
.prod-intro,.s-desc,.qiso-text,.industry-modal-support,
.contact-row span,.contact-row a,.qblock p,.pc-desc,.modal-desc,
.apps-intro,.itag-desc{
  font-size:1rem!important;
  line-height:1.62!important;
}
/* Longer flowing copy (multi-paragraph About text) can keep the airier rhythm */
.about-text p{line-height:1.8!important;}

/* ---------- LABELS / TAGS / EYEBROWS: raise the floor on legibility ---------- */
/* Anything under 0.68rem (≈10.7px at 16px root) was genuinely too small. */
.s-tag,.hero-eyebrow,.hero-tagline,.strip-label,.qblock-title,
.cap-tag,.pdetail-grade,.mat-card-name,.itag-label,.cbadge-name,
.footer-contact-label,.fcol-title,.breadcrumb,.pc-grade,.modal-mat,
.spec-tab{
  font-size:0.82rem!important;
  letter-spacing:0.14em!important;
}
.qtag,.mat-symbol,.tab-btn{
  font-size:0.86rem!important;
}
.cbl{
  font-size:0.78rem!important;
  letter-spacing:0.2em!important;
}
.cbv{
  font-size:1rem!important;
  line-height:1.75!important;
}
.strip-val,.mat-card-desc,.cbadge-desc,.footer-contact-val,.footer-col ul li a,
.footer-desc,.footer-tagline,.pc-apps,.app-tag,.ind-item,
.specs-tbl td{
  font-size:0.88rem!important;
  line-height:1.7!important;
}

/* ---------- CARD TITLES: a touch larger for hierarchy ---------- */
.acard-title,.cap-title,.wcard-title,.qpillar-title,.pc-name,
.modal-name,.contact-info-card h3{
  font-size:1.22rem!important;
  line-height:1.35!important;
}

/* ---------- NAV: slightly larger, still compact ---------- */
.nav-links a{font-size:0.8rem!important;}
.nav-cta{font-size:0.76rem!important;}

/* ---------- FORM FIELDS: readable input text ---------- */
.cinput,.cselect,.ctextarea,input,select,textarea{
  font-size:0.98rem!important;
}
.clabel,.form-field label{font-size:0.82rem!important;}

/* ---------- SPACING: open up the flush "mosaic" grids ---------- */
/* NOTE: default grid stretch (cards in a row match the tallest) is what
   we want — that's what made row heights uniform originally. Overriding
   it with align-items:start was the bug that made cards different sizes
   within the same row. Removed. Root-cause fix instead: kept description
   lengths within a row balanced so no card needs to stretch dramatically. */
.about-cards{gap:18px!important;}
.acard{border-radius:var(--radius-card,18px);}

.cap-grid{gap:18px!important;}
.why-grid{gap:18px!important;}
.quality-pillars{gap:18px!important;margin-bottom:24px!important;}
.quality-bottom{gap:20px!important;}
.quality-media{gap:14px!important;margin-bottom:20px!important;}
.mat-grid{gap:14px!important;}
.prod-grid{gap:22px!important;}
.photo-row{gap:10px!important;}
.cap-photos-grid{gap:14px!important;}
.qblock-tags{gap:10px!important;}
.footer-soc{gap:12px!important;}
.footer-grid{gap:48px!important;}
.ccard{margin-bottom:14px!important;padding:20px 22px!important;}

/* Translucent tinted glass panel — NOT solid opaque block (that was the
   "downgrade" bug: it looked like generic flat card-UI blocks instead of
   the site's original layered glass-over-photography look). Opacity here
   is high enough to stay legible against any background, low enough that
   the underlying photo/texture still shows through. */
.acard,.wcard,.qpillar,.qblock,.cap-card{
  background:rgba(30,49,69,0.62)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  border:1px solid rgba(200,151,42,0.22)!important;
  box-shadow:0 6px 22px rgba(0,0,0,0.22)!important;
}
.cbadge{padding:22px 20px!important;}

/* ---------- SECTION RHYTHM: more air between major sections ---------- */
section{padding:112px 56px!important;}
.hero{padding-top:150px!important;padding-bottom:190px!important;}
.s-tag{margin-bottom:18px!important;}
.s-title{margin-bottom:8px!important;}
.about-grid{margin-top:64px!important;}
.cap-grid{margin-top:40px!important;}
.why-grid{margin-top:56px!important;}

/* ---------- CARD INTERNAL PADDING: a little more room to breathe ---------- */
.acard{padding:32px 26px!important;}
.wcard{padding:40px 28px!important;}
.qblock{padding:28px 26px!important;}
/* cap-card and qpillar keep their own page-defined padding as-is */

/* ---------- RESPONSIVE: keep nav from overflowing at the larger sizes ---------- */
@media(max-width:1150px){
  .nav-links a{font-size:0.74rem!important;}
}
@media(max-width:900px){
  html{font-size:16.5px;}
  section{padding:64px 20px!important;}
  .hero{padding-top:64px!important;}
}