/*!
Theme Name: Honos
Theme URI:
Author: Honos Servizi Srl
Author URI:
Description: Kava child theme per Honos Servizi Srl. Design token (palette grigio antracite + rosso accent, tipografia Inter) portati dal sito statico originale.
Template: kava
Version: 0.1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: honos
*/

:root {
  --honos-dark:        #222831;
  --honos-mid:         #393e46;
  --honos-accent:      #e74c3c;
  --honos-accent-dark: #c0392b;
  --honos-bg:          #f8f9fa;
  --honos-bg-alt:      #eeeeee;
  --honos-white:       #ffffff;
  --honos-text:        #2d2d2d;
  --honos-text-muted:  #6c757d;
  --honos-border:      #dee2e6;
  --honos-radius:      6px;
  --honos-shadow:      0 4px 20px rgba(0, 0, 0, 0.08);

  /* Aliases matching the original static site's css/style.css variable
     names, so that stylesheet's component rules (hero, cards, buttons,
     etc.) can be ported below verbatim without renaming every var(). */
  --dark:        var(--honos-dark);
  --mid:         var(--honos-mid);
  --accent:      var(--honos-accent);
  --accent-dark: var(--honos-accent-dark);
  --bg:          var(--honos-bg);
  --bg-alt:      var(--honos-bg-alt);
  --white:       var(--honos-white);
  --text:        var(--honos-text);
  --text-muted:  var(--honos-text-muted);
  --border:      var(--honos-border);
  --radius:      var(--honos-radius);
  --shadow:      var(--honos-shadow);
  --transition:  all 0.25s ease;
}

/*
 * NOTE: Kava dynamically generates wp-content/themes/kava/theme.css from
 * Customizer settings and enqueues it AFTER this child stylesheet, so it
 * wins any cascade tie. The design-critical overrides below use
 * !important deliberately to stay authoritative regardless of that load
 * order — this isn't sloppiness, it's the standard way to override a
 * parent theme's dynamic Customizer CSS.
 */

body {
  font-family: 'Inter', sans-serif !important;
  color: var(--honos-text) !important;
  background-color: var(--honos-white) !important;
}

a {
  color: var(--honos-accent) !important;
}
a:hover {
  color: var(--honos-accent-dark) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600 !important;
  /* No !important on color: Elementor's per-widget heading color (e.g. white
     titles on dark hero/CTA sections) is set via an ID-scoped selector,
     which already beats this bare-tag rule on specificity alone. Forcing
     !important here would make it impossible to ever set a white heading. */
  color: var(--honos-dark);
}
.page-title {
  color: var(--honos-dark) !important;
}

/* Top bar */
.top-panel {
  background-color: var(--honos-mid) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 0.8rem !important;
  padding: 0.35rem 0 !important;
  /* Kava applies its own boxed ".container" class (max-width ~1200px) here
     too — override it so the top bar's content spans the full width, not
     just its background. */
  max-width: none !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.top-panel a {
  color: rgba(255, 255, 255, 0.75) !important;
}
.top-panel a:hover {
  color: var(--honos-white) !important;
}
.honos-top-bar-item {
  margin-right: 1.25rem;
  display: inline-block;
}
.top-panel .site-description {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Header / nav */
.site-header,
.site-header__wrap {
  background-color: var(--honos-dark) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.site-header__wrap {
  /* Same Kava boxed ".container" override as .top-panel above — the
     logo/nav content should span full width, not sit in a ~1200px box. */
  max-width: none !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.site-header .site-logo a {
  color: var(--honos-white) !important;
}
.site-header .main-navigation a {
  color: #e0e0e0 !important;
}
.site-header .main-navigation a:hover,
.site-header .main-navigation .current-menu-item > a {
  color: var(--honos-accent) !important;
}
.site-header .sub-menu {
  background-color: #1c2230 !important;
}
.site-header .menu-item.btn-contattaci {
  margin-left: 0.5rem;
}
.site-header .menu-item.btn-contattaci > a {
  background-color: var(--honos-accent) !important;
  color: var(--honos-white) !important;
  border-radius: var(--honos-radius);
  padding: 0.55rem 1.2rem !important;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.site-header .menu-item.btn-contattaci > a:hover {
  background-color: var(--honos-accent-dark) !important;
}

/*
 * Kava's own responsive-menu JS (assets/js/theme-script.js) hardcodes a
 * 640px threshold for switching to the hamburger menu, with no filter/hook
 * to configure it, AND its "open" class is present by default at any width
 * above that threshold (not a reliable open/closed signal) — CSS alone
 * fighting its inline styles was unreliable. The actual breakpoint (1400px,
 * comfortable margin above the ~1280px point where this menu starts
 * wrapping) is now enforced by js/nav-breakpoint.js, which takes over the
 * toggle button entirely. Minimal styling for the mobile dropdown state
 * only below.
 */
.site-header .main-navigation {
  position: relative;
}
.site-header .main-navigation .mobile-menu-toggle-button {
  /* Kava's own theme.css positions this absolutely with `left: -45px`,
     assuming a layout context that leaves room for it to poke out to the
     left of the nav wrapper — since we bypass Kava's own class toggling
     (js/nav-breakpoint.js), that context never gets set up and the button
     ends up off-screen. Reposition it to the right edge of the nav instead. */
  position: absolute !important;
  left: auto !important;
  right: 0 !important;
  top: 0 !important;
  background: none;
  border: none;
  box-shadow: none !important;
  color: var(--honos-white);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}
@media (max-width: 1399px) {
  .site-header .main-navigation-inner {
    width: 100%;
    padding-top: 3rem;
  }
  .site-header #main-menu {
    flex-direction: column;
    align-items: flex-start !important;
    width: 100%;
  }
  .site-header .menu-item.btn-contattaci {
    margin-left: 0;
    margin-top: 0.5rem;
  }
}

/* Footer */
.site-footer,
.footer-widget-area {
  background-color: var(--honos-dark) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}
.honos-footer {
  padding: 3rem 20px 1.5rem;
}
.honos-footer__columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}
.honos-footer__col {
  flex: 1 1 200px;
  min-width: 180px;
}
.honos-footer__col--about {
  flex: 2 1 280px;
}
.honos-footer__col h4 {
  color: var(--honos-white) !important;
  font-size: 1rem;
  margin-bottom: 1rem;
}
.honos-footer__col p,
.honos-footer__col li {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
}
.honos-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.honos-footer__col ul li {
  margin-bottom: 0.5rem;
}
.honos-footer__col a {
  color: rgba(255, 255, 255, 0.65) !important;
}
.honos-footer__col a:hover {
  color: var(--honos-accent) !important;
}
.honos-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.5rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}
.honos-footer__bottom a {
  color: rgba(255, 255, 255, 0.5) !important;
}
.honos-footer__bottom a:hover {
  color: var(--honos-accent) !important;
}

/* ============================================================
 * Component library ported from the original static site's
 * css/style.css (Bootstrap 5 + custom). Applied directly to the
 * hand-built HTML emitted by scripts/migrate/*.php via Elementor
 * text-editor/HTML widgets — these are new classes with no Kava
 * equivalent, so no !important/cascade fights here.
 * ============================================================ */

/* === HERO (HOMEPAGE) === */
.hero {
  background: linear-gradient(135deg, var(--dark) 0%, var(--mid) 100%);
  min-height: 82vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(231,76,60,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.03) 0%, transparent 40%);
  pointer-events: none;
}
.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.hero-content { position: relative; z-index: 2; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(231,76,60,0.15);
  border: 1px solid rgba(231,76,60,0.3);
  color: #ff8070;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.3rem 0.8rem;
  border-radius: 50px;
  margin-bottom: 1.5rem;
  letter-spacing: 0.03em;
}
.hero h1 {
  color: var(--white) !important;
  font-size: 2.9rem;
  font-weight: 700;
  line-height: 1.18;
  margin-bottom: 1.2rem;
}
.hero h1 span { color: var(--accent) !important; }
.hero .lead {
  color: rgba(255,255,255,0.78);
  font-size: 1.05rem;
  margin-bottom: 2rem;
  max-width: 580px;
}
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* === BUTTONS === */
.btn-accent {
  background-color: var(--accent);
  color: var(--white) !important;
  border: 2px solid var(--accent);
  padding: 0.7rem 1.8rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}
.btn-accent:hover {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(231,76,60,0.4);
  color: var(--white) !important;
}
.btn-outline-light-custom {
  background: transparent;
  color: rgba(255,255,255,0.85) !important;
  border: 2px solid rgba(255,255,255,0.35);
  padding: 0.7rem 1.8rem;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.95rem;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}
.btn-outline-light-custom:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.7);
  color: var(--white) !important;
}
.btn-service {
  color: var(--accent) !important;
  font-weight: 600;
  font-size: 0.85rem;
  border: 1.5px solid var(--accent);
  padding: 0.4rem 1rem;
  border-radius: var(--radius);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
}
.btn-service:hover {
  background-color: var(--accent);
  color: var(--white) !important;
}
.btn-white {
  background: var(--white);
  color: var(--accent) !important;
  border: 2px solid var(--white);
  padding: 0.7rem 2rem;
  border-radius: var(--radius);
  font-weight: 600;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}
.btn-white:hover { background: transparent; color: var(--white) !important; }

/* === PAGE HEADER (pagine interne) === */
.page-header {
  background: linear-gradient(135deg, var(--dark) 0%, var(--mid) 100%);
  padding: 3.5rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}
.page-header-inner { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.page-header h1 {
  color: var(--white) !important;
  font-size: 2.1rem;
  margin-bottom: 0.4rem;
}
.page-header .sub { color: rgba(255,255,255,0.7); font-size: 1rem; margin: 0; }
.honos-breadcrumb { padding: 0; margin: 0 0 0.8rem; font-size: 0.85rem; }
.honos-breadcrumb a { color: rgba(255,255,255,0.6) !important; }
.honos-breadcrumb a:hover { color: rgba(255,255,255,0.9) !important; }
.honos-breadcrumb .current { color: rgba(255,255,255,0.45); }

/* === SEZIONI === */
.section-light { background-color: var(--white); padding: 5rem 0; }
.section-grey  { background-color: var(--bg); padding: 5rem 0; }
.section-dark  { background-color: var(--dark); padding: 5rem 0; color: var(--white); }
.honos-container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

.section-heading { margin-bottom: 3rem; }
.section-title { font-size: 1.85rem; font-weight: 700; color: var(--dark) !important; margin-bottom: 0.4rem; }
.section-title.light { color: var(--white) !important; }
.section-subtitle { color: var(--text-muted); font-size: 1.02rem; margin-bottom: 0; }
.section-subtitle.light { color: rgba(255,255,255,0.65); }
.divider {
  width: 48px;
  height: 4px;
  background-color: var(--accent);
  border-radius: 2px;
  margin: 0.6rem 0 1rem;
}
.divider.center { margin: 0.6rem auto 1rem; }

/* === SERVICE CARDS (homepage) === */
.service-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  padding: 2rem 1.8rem;
  height: 100%;
  transition: var(--transition);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}
.service-card .card-icon {
  color: var(--accent);
  font-size: 2.2rem;
  margin-bottom: 1rem;
  line-height: 1;
}
.service-card h3 { font-size: 1.1rem; font-weight: 600; color: var(--dark) !important; margin-bottom: 0.9rem; }
.service-card ul { list-style: none; padding: 0; margin-bottom: 1.5rem; flex: 1; }
.service-card ul li {
  padding: 0.28rem 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}
.service-card ul li::before {
  content: '';
  width: 6px;
  height: 6px;
  background-color: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.5rem;
}

/* === CONTENT BLOCKS (pagine servizio) === */
.content-block {
  background: var(--white);
  border-radius: var(--radius);
  border-left: 4px solid var(--accent);
  padding: 2rem;
  margin-bottom: 1.8rem;
  box-shadow: var(--shadow);
}
.content-block h2 { font-size: 1.3rem; color: var(--dark) !important; margin-bottom: 0.8rem; }
.content-block p { color: var(--text-muted); margin-bottom: 0.5rem; }
.content-block p:last-child { margin-bottom: 0; }

/* === SIDEBAR === */
.sidebar-widget {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}
.sidebar-widget h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark) !important;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
.sidebar-nav { list-style: none; padding: 0; margin: 0; }
.sidebar-nav li a {
  color: var(--text-muted) !important;
  font-size: 0.875rem;
  padding: 0.35rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.sidebar-nav li:last-child a { border-bottom: none; }
.sidebar-nav li a:hover { color: var(--accent) !important; padding-left: 4px; }
.sidebar-nav li a i { color: var(--accent); font-size: 0.8rem; }

/* === FORM CONTATTO === */
.contact-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 2rem;
  box-shadow: var(--shadow);
}
.contact-card h3 { font-size: 1.15rem; margin-bottom: 1.2rem; }
.form-label { font-weight: 500; font-size: 0.88rem; color: var(--dark); margin-bottom: 0.3rem; }
.form-control, .form-select {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 0.9rem;
  font-size: 0.9rem;
  transition: var(--transition);
  color: var(--text);
  width: 100%;
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(231,76,60,0.12);
  outline: none;
}
.form-control::placeholder { color: #aaa; }
.honeypot { display: none !important; }

/* === CTA BANNER === */
.cta-banner {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: var(--white);
  padding: 3.5rem 2rem;
  border-radius: var(--radius);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 70% 50%, rgba(255,255,255,0.06) 0%, transparent 60%);
}
.cta-banner h3 { color: var(--white) !important; font-size: 1.7rem; margin-bottom: 0.5rem; position: relative; }
.cta-banner p  { color: rgba(255,255,255,0.85); margin-bottom: 1.5rem; position: relative; }

/* === CEMUT PROMO CARD === */
.cemut-block {
  background: linear-gradient(135deg, var(--dark) 0%, #1a2030 100%);
  border-radius: var(--radius);
  padding: 3rem 2.5rem;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.cemut-block::after {
  content: 'CEMUT';
  position: absolute;
  right: -15px;
  bottom: -25px;
  font-size: 9rem;
  font-weight: 800;
  color: rgba(255,255,255,0.04);
  pointer-events: none;
  line-height: 1;
}
.cemut-block h3 { color: var(--white) !important; font-size: 1.6rem; margin-bottom: 0.6rem; }
.cemut-block p  { color: rgba(255,255,255,0.75); margin-bottom: 1.5rem; }
.cemut-block ul { list-style: none; padding: 0; margin-bottom: 2rem; }
.cemut-block ul li {
  padding: 0.3rem 0;
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.cemut-block ul li i { color: var(--accent); }

/* === STATS === */
.stat-item { text-align: center; padding: 2rem 1rem; }
.stat-number { font-size: 3rem; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 0.5rem; }
.stat-label { color: var(--text-muted); font-size: 0.88rem; }
.stat-label.light { color: rgba(255,255,255,0.65); }
.stat-divider { width: 1px; background: var(--border); align-self: stretch; }

/* === SETTORI SERVITI === */
.sector-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.82rem;
  padding: 0.35rem 0.8rem;
  border-radius: 50px;
  margin: 0.25rem;
  transition: var(--transition);
}
.sector-badge:hover { border-color: var(--accent); color: var(--accent); }
.sector-badge i { color: var(--accent); font-size: 0.75rem; }

/* === GEO COVERAGE === */
.geo-block {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 2rem;
  box-shadow: var(--shadow);
}
.geo-block h4 { font-size: 1rem; margin-bottom: 1rem; }
.geo-tag {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 0.2rem 0.7rem;
  border-radius: 50px;
  margin: 0.2rem;
}

/* === CONTATTI PAGE === */
.info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.info-icon {
  width: 44px;
  height: 44px;
  background: rgba(231,76,60,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.info-item h5 { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 0.2rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.info-item p  { font-size: 0.97rem; color: var(--dark) !important; margin: 0; font-weight: 500; }
.map-container { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.map-container iframe { width: 100%; height: 380px; border: 0; display: block; }

/* === CHI SIAMO === */
.team-highlight {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 2rem;
  border-left: 4px solid var(--accent);
}
.curiosity-box {
  background: linear-gradient(135deg, var(--mid) 0%, var(--dark) 100%);
  border-radius: var(--radius);
  padding: 2rem;
  color: var(--white);
}
.curiosity-box h4 { color: var(--accent) !important; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.8rem; }
.curiosity-box p  { color: rgba(255,255,255,0.78); font-size: 0.93rem; margin: 0; }

/* === PARTNERS PAGE === */
.partner-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: var(--transition);
  box-shadow: var(--shadow);
  height: 100%;
}
.partner-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.1); }
.partner-icon {
  width: 48px;
  height: 48px;
  background: rgba(231,76,60,0.08);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.partner-card h5 { font-size: 0.97rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--dark) !important; }
.partner-card p  { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

/* === ALERT (JetFormBuilder messages) === */
.alert-honos-success {
  background: #d4edda; border: 1px solid #b8dfc3; color: #1a5c2e;
  padding: 1rem 1.3rem; border-radius: var(--radius); font-size: 0.9rem;
}
.alert-honos-error {
  background: #fde8e8; border: 1px solid #f5c6c6; color: #922020;
  padding: 1rem 1.3rem; border-radius: var(--radius); font-size: 0.9rem;
}

/* Bootstrap-like grid/utility shims (Bootstrap isn't loaded in WP; these
   just give our hand-built HTML the layout behaviors the classes imply) */
.row { display: flex; flex-wrap: wrap; margin: 0 -0.75rem; }
.row.g-3 > * { padding: 0 0.5rem; margin-bottom: 1rem; }
.row.g-4 > * { padding: 0 0.75rem; margin-bottom: 1.5rem; }
.row.g-5 > * { padding: 0 1rem; margin-bottom: 2rem; }
.col-6 { flex: 0 0 50%; max-width: 50%; box-sizing: border-box; padding: 0 0.75rem; }
.text-center { text-align: center; }
.d-flex { display: flex; }

/* === RESPONSIVE === */
@media (max-width: 991.98px) {
  .hero h1 { font-size: 2.1rem; }
}
@media (max-width: 767.98px) {
  .hero { min-height: auto; padding: 3rem 0; }
  .hero h1 { font-size: 1.8rem; }
  .section-light, .section-grey, .section-dark { padding: 3.5rem 0; }
  .service-card { margin-bottom: 1rem; }
  .stat-divider { display: none; }
}
@media (max-width: 575.98px) {
  .hero h1 { font-size: 1.55rem; }
  .hero-cta .btn-accent,
  .hero-cta .btn-outline-light-custom { width: 100%; justify-content: center; }
  .page-header h1 { font-size: 1.7rem; }
}
.site-footer .footer-bottom {
  display: none;
}