/* Neftco Mechanical, Trade Bold direction themed to his real Wix brand.
   Linked AFTER components.css. Light, photo-forward.
   Accent: ember orange #E2592B. Navy #0B2A4A. Signal blue #1E76C8.
   Display: Barlow Condensed. Body: Inter. */

:root {
  /* Ember orange accent, his primary CTA / call-now color */
  --color-accent: #E2592B;
  --color-accent-hover: #F26B3A;
  --color-accent-contrast: #ffffff;

  /* Light base from his Wix palette */
  --color-bg: #FFFFFF;
  --color-surface: #F4F7FB;
  --color-border: #DCE4EE;
  --color-text: #20303F;
  --color-text-muted: #51647A;

  /* Dark sections use navy with light text */
  --color-dark-bg: #0B2A4A;
  --color-dark-text: #EAF1F9;
  --color-dark-muted: #A9BFD6;

  /* Signal blue, secondary accent for links */
  --color-blue: #1E76C8;

  --font-display: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Bigger hero presence */
  --fs-hero: clamp(2.6rem, 7vw, 4.75rem);
}

/* Headings ink: navy. Heavy condensed display for trade confidence */
h1, h2, h3, h4 { color: #0C1A2B; }
h1, h2, h3 { font-weight: 700; letter-spacing: 0; }
.hero h1 { letter-spacing: -0.01em; }

/* Secondary links use signal blue */
a { color: var(--color-blue); }
a:hover { color: var(--color-accent); }

/* Topbar: always-visible call strip above the header, navy */
.topbar {
  background: var(--color-dark-bg);
  color: var(--color-dark-text);
  font-size: var(--fs-small);
}
.topbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding-block: var(--space-2);
}
.topbar a { color: var(--color-dark-text); font-weight: var(--fw-semibold); }
.topbar a:hover { color: #fff; }
.topbar__call { display: inline-flex; align-items: center; gap: var(--space-2); }
.topbar__badges { display: flex; flex-wrap: wrap; gap: var(--space-4); color: var(--color-dark-muted); }
.topbar__badges strong { color: var(--color-dark-text); }
@media (max-width: 560px) { .topbar__badges { display: none; } }

/* Brand logo in header/footer */
.nav__brand img { height: 44px; width: auto; }
.site-footer .nav__brand img { height: 52px; background: #fff; padding: 6px 10px; border-radius: var(--radius-sm); }

/* Hero: light, photo-forward split. Real photo lives in .hero__media */
.hero--bold { background: var(--color-surface); }
.hero--bold .eyebrow { color: var(--color-accent); }
.hero__media img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Trust bar under hero */
.trust--hero { color: var(--color-text-muted); gap: var(--space-6); margin-top: var(--space-2); }
.trust--hero strong { color: var(--color-text); }
.trust__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.trust__item svg { width: 22px; height: 22px; color: var(--color-accent); flex: none; }

/* Founder badge over the hero photo (person-forward trust) */
.hero__media--stacked { position: relative; }
.founder-badge {
  display: flex; align-items: center; gap: var(--space-3); margin: 0;
  position: absolute; left: var(--space-4); bottom: var(--space-4); right: var(--space-4);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--space-3) var(--space-4);
}
.founder-badge img {
  width: 56px; height: 56px; border-radius: 999px; object-fit: cover; flex: none;
  border: 2px solid var(--color-accent);
}
.founder-badge figcaption strong { display: block; font-family: var(--font-display); font-size: 1.15rem; color: #0C1A2B; }
.founder-badge figcaption span { font-size: var(--fs-small); color: var(--color-text-muted); }

/* Founder photo feature in the home why-us block */
.founder-feature { display: grid; gap: var(--space-2); }
.founder-feature .about-photo { max-width: 420px; }
.founder-feature__cap { font-size: var(--fs-small); }

/* Service area: text + map */
.area-layout { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 880px) { .area-layout { grid-template-columns: 1fr 1.1fr; gap: var(--space-12); } }
.area-info .areas { margin-block: var(--space-2) var(--space-2); }
.area-map {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--color-border);
}
.area-map iframe { display: block; width: 100%; height: 380px; border: 0; }

/* Feature / section images */
.feature-img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feature-img--wide { aspect-ratio: 16 / 10; }
.about-photo { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* Big trust badge row */
.badges { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .badges { grid-template-columns: repeat(3, 1fr); } }
.badge-card {
  display: flex; align-items: center; gap: var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: var(--space-4) var(--space-6); background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}
.badge-card svg { width: 36px; height: 36px; color: var(--color-accent); flex: none; }
.badge-card strong { display: block; font-family: var(--font-display); font-size: 1.25rem; color: #0C1A2B; }
.badge-card span { font-size: var(--fs-small); color: var(--color-text-muted); }

/* Section heading helper */
.section__head { max-width: var(--container-narrow); margin-bottom: var(--space-8); }

/* Card accent: ember top rule on hover */
.card { border-top: 4px solid transparent; }
.card:hover { border-top-color: var(--color-accent); }

/* Why-us list with check marks */
.checks { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.checks li { display: flex; gap: var(--space-3); align-items: flex-start; }
.checks svg { width: 24px; height: 24px; color: var(--color-accent); flex: none; margin-top: 2px; }

/* Big number stats on navy band */
.stats { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 4vw, 3rem); color: var(--color-accent); line-height: 1; }
.stat__label { font-size: var(--fs-small); color: var(--color-dark-muted); margin-top: var(--space-2); }

/* Final CTA band, ember */
.cta-band { background: var(--color-accent); color: #fff; }
.cta-band h2, .cta-band p { color: #fff; }
.cta-band .btn--primary { background: #fff; color: var(--color-accent); }
.cta-band .btn--primary:hover { background: var(--color-dark-bg); color: #fff; }
.cta-band .btn--ghost { color: #fff; border-color: #fff; }
.cta-band .btn--ghost:hover { background: #fff; color: var(--color-accent); }

/* Contact info list */
.info { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.info li { display: flex; gap: var(--space-3); align-items: flex-start; }
.info svg { width: 24px; height: 24px; color: var(--color-accent); flex: none; margin-top: 2px; }
.info strong { display: block; font-family: var(--font-display); font-size: 1.1rem; color: #0C1A2B; }

/* Footer social links */
.social { display: flex; gap: var(--space-4); }
.social a { display: inline-flex; color: var(--color-dark-text); }
.social a:hover { color: var(--color-accent); }
.social svg { width: 24px; height: 24px; }