/* =====================================================================
   CM Beyer component structure, applied to this site's components.
   ---------------------------------------------------------------------
   Load order: cmb.css -> cc-identity.css -> cc-sections.css -> THIS.
   "CMB structure, our identity" (owner brief): the site's cards / stats /
   forms / tables adopt CM Beyer's exact component STRUCTURE (padding, hover
   lift, the label/title/text/link rhythm, field + table styling) while
   keeping this site's identity — the teal top-borders, gold accents and
   photographic hero come from cc-identity, which loads first; this layer
   only sets the structural properties CM Beyer defines, in the site's own
   teal/gray tokens so the colour identity is preserved.
   ===================================================================== */

/* ─── CARDS — CM Beyer .card anatomy on the site's card components ───── */
.feature, .company-card, .cc-pcard, .cc-structure-card, .cc-mark-card, .compare__card {
	background: #fff;
	border: 1px solid var(--gray-200);
	padding: 1.75rem;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature--link:hover, .cc-pcard:hover, .company-card:hover, .cc-structure-card:hover, .cc-mark-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(17,103,106,.09);
	border-color: var(--gray-300);
}
/* title / text / label / link rhythm (CM Beyer sizes) */
.feature h3, .company-card h3, .cc-pcard h3, .cc-structure-card h3, .cc-mark-card h3 {
	font-size: 1.15rem; font-weight: 700; line-height: 1.35; margin: 0 0 .5rem;
	transition: color .2s ease;
}
.feature--link:hover h3, .cc-pcard:hover h3 { color: var(--teal); }
.feature p, .company-card p, .cc-pcard p, .cc-structure-card p {
	font-size: .9rem; color: var(--gray-500); line-height: 1.6; margin: 0 0 1rem;
}
.cc-pcard__meta, .feature__label {
	display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: .08em; color: var(--teal); margin-bottom: .35rem;
}
.feature__more, .cc-pcard__go {
	display: inline-block; margin-top: auto; font-size: .85rem; font-weight: 600; color: var(--teal);
}
.feature--link:hover .feature__more, .cc-pcard:hover .cc-pcard__go { text-decoration: underline; }

/* ─── STATS — CM Beyer stat treatment ──────────────────────────────── */
.stat { text-align: center; }
.stat__num { font-size: 2rem; font-weight: 700; color: var(--teal); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__label { font-size: .82rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-top: .25rem; }

/* ─── FORMS — CM Beyer .form-row field styling ─────────────────────── */
.ct-f label, .contact-form label, .search-form label {
	display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: .06em; color: var(--gray-500); margin-bottom: .4rem;
}
.ct-f input, .ct-f textarea, .ct-f select,
.contact-form input, .contact-form textarea, .contact-form select {
	width: 100%; padding: .7rem .9rem; border: 1px solid var(--gray-300);
	font-family: var(--font-body); font-size: .92rem; background: #fff; border-radius: 2px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.ct-f input:focus, .ct-f textarea:focus, .ct-f select:focus,
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
	outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(17,103,106,.12);
}

/* ─── TABLES — CM Beyer hairline rows + tabular numerals ────────────── */
.ct, .cc-tm { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ct th, .cc-tm th { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	color: var(--gray-500); text-align: left; padding: .7rem .8rem; border-bottom: 2px solid var(--gray-300); }
.ct td, .cc-tm td { padding: .7rem .8rem; border-bottom: 1px solid var(--gray-200); color: var(--gray-700); font-size: .9rem; }
.ct--zebra tbody tr:nth-child(odd) { background: var(--gray-50); }

/* card-tighten — cards were too loose (equal-height stretch pushed the CTA
   far below the text, leaving big whitespace). Tighter padding, and the
   link sits just under the text instead of being pushed to the card foot. */
.feature, .company-card, .cc-pcard, .cc-structure-card, .cc-mark-card { padding: 1.4rem 1.5rem; }
.feature p, .cc-pcard p, .company-card p, .cc-structure-card p { margin: 0 0 .85rem; }
.feature__more, .cc-pcard__go { margin-top: .2rem; }
.features, .cc-pgrid, .backlink-grid, .companies { align-items: start; }

/* ── Card icon badge — CM Beyer's own icon treatment (hp-why-icon / hp-svc-icon)
   applied to the .card component so the directory/signpost grids read as CM
   Beyer's icon cards instead of plain text cards. Teal-tinted rounded square,
   brand-stroke Lucide glyph, left-aligned to match the card's label/title. */
.card__icon{width:46px;height:46px;border-radius:12px;background:rgba(17,103,106,.08);
  display:flex;align-items:center;justify-content:center;margin:0 0 1.05rem;flex:none;
  transition:background .2s ease,transform .2s ease}
.card__icon svg{width:23px;height:23px;stroke:var(--brand);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.card--link:hover .card__icon{background:rgba(17,103,106,.14)}
.card--link:hover .card__icon svg{transform:scale(1.08)}