/* ==========================================================================
   Kamili Perfect Engineering: Site Stylesheet
   Layout/structure modeled on juwelenergy.com (navbar, hero, core-values
   carousel, footer). Colors are pulled from the Kamili logo (green "K" mark
   on black). Every color used on the site references one of the variables
   below, so any future re-theming is a one-file edit.
   ========================================================================== */

:root {
  /* --- Brand palette (from the Kamili logo: green "K" mark on black) --- */
  --color-primary: #1a1c1f;       /* navbar / dark sections (logo's near-black) */
  --color-primary-dark: #0c0d0f;  /* deeper shade for hover/active states */
  --color-accent: #7db82c;        /* CTA/active-link accent (logo green) */
  --color-accent-dark: #5f8f20;

  /* --- Neutrals --- */
  --color-bg: #ffffff;
  --color-bg-alt: #f4f5f6;        /* section alternation, footer bg */
  --color-text: #24272b;
  --color-text-muted: #5c6570;
  --color-border: #e2e4e7;
  --color-white: #ffffff;

  /* --- Type --- */
  --font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- Layout --- */
  --container-width: 1200px;
  --nav-height: 84px;
  --radius: 6px;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.08);
  --transition: 0.2s ease;
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

section { position: relative; }

.section-pad { padding: 88px 0; }

@media (max-width: 768px) {
  .section-pad { padding: 56px 0; }
}

/* Visible keyboard focus (accessibility floor) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Eyebrow / section heading ---------- */
.section-heading {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 48px;
}

.section-heading h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.section-heading p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: var(--color-primary);
  transition: background var(--transition);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.navbar__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-white);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.2px;
}

.navbar__logo-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-dark);
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.navbar__links a {
  color: var(--color-white);
  font-size: 0.98rem;
  font-weight: 500;
  padding: 8px 0;
  position: relative;
}

.navbar__links a.active,
.navbar__links a:hover {
  color: var(--color-accent);
}

.navbar__links a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--color-accent);
}

.navbar__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.navbar__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-white);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.navbar__toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar__toggle.open span:nth-child(2) {
  opacity: 0;
}

.navbar__toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
  .navbar__toggle { display: flex; }

  .navbar__links {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--color-primary);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }

  .navbar__links.open {
    max-height: 400px;
  }

  .navbar__links a {
    width: 100%;
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .navbar__links li:last-child a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .navbar__links a:active {
    background: rgba(255, 255, 255, 0.05);
  }

  /* The bottom-underline active indicator is a desktop-nav treatment;
     in the stacked mobile menu it renders awkwardly against the row
     dividers, so the accent text color alone marks the active page. */
  .navbar__links a.active::after {
    display: none;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 610px;
  display: flex;
  align-items: center;
  color: var(--color-white);
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.hero--page {
  min-height: 410px;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Hero photos are pre-cropped server-side to a wide banner aspect with a
   deliberately chosen focal point (see assets/images generation), so a
   plain cover fill here needs little to no further cropping. */
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s ease;
}

.hero__slide.active { opacity: 1; }

@media (max-width: 760px) {
  .hero { min-height: 460px; }
  .hero--page { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}

/* Responsive hero art direction: separate crops shot/cropped for mobile
   (portrait-friendly, close to source aspect) vs desktop (wide banner,
   cropped from the high-res 4K originals with a deliberate focal point).
   See CORRECTIONS: "Main hero for mobile" vs "Main Hero for Large screen". */
.bg-hero-piling { background-image: url('../assets/images/hero-mobile-piling.jpg'); }
.bg-hero-hvac { background-image: url('../assets/images/hero-mobile-hvac.jpg'); }
.bg-hero-substation { background-image: url('../assets/images/hero-mobile-substation.jpg'); }
.bg-hero-blueprint { background-image: url('../assets/images/hero-mobile-blueprint.jpg'); }
.bg-hero-construction { background-image: url('../assets/images/hero-mobile-construction.jpg'); }
.bg-hero-hardhat { background-image: url('../assets/images/hero-mobile-hardhat.jpg'); }

@media (min-width: 761px) {
  .bg-hero-piling { background-image: url('../assets/images/hero-desktop-piling.jpg'); }
  .bg-hero-hvac { background-image: url('../assets/images/hero-desktop-hvac.jpg'); }
  .bg-hero-substation { background-image: url('../assets/images/hero-desktop-substation.jpg'); }
  .bg-hero-blueprint { background-image: url('../assets/images/hero-desktop-blueprint.jpg'); }
  .bg-hero-construction { background-image: url('../assets/images/hero-desktop-construction.jpg'); }
  .bg-hero-hardhat { background-image: url('../assets/images/hero-desktop-hardhat.jpg'); }
}

.hero__media .placeholder-block {
  height: 100%;
  border-radius: 0;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 28px;
}

.hero__media .placeholder-block__inner {
  max-width: 220px;
  opacity: 0.55;
}

/* Logo lockup (real image, includes wordmark) */
.brand-logo {
  height: 46px;
  width: auto;
  display: block;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 22, 26, 0.82) 0%, rgba(20, 22, 26, 0.45) 65%, rgba(20, 22, 26, 0.2) 100%);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.hero__content h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 20px;
}

.hero__content p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 32px;
  max-width: 520px;
}

.hero--page .hero__content h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 10px; }
.hero--page .hero__content p { margin-bottom: 0; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  transition: all var(--transition);
}

.btn--pill-light {
  background: var(--color-white);
  color: var(--color-primary);
}

.btn--pill-light:hover {
  background: var(--color-accent);
  color: var(--color-white);
}

.btn--accent {
  background: var(--color-accent);
  color: var(--color-white);
}

.btn--accent:hover { background: var(--color-accent-dark); }

.btn--outline {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}

.btn--outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ==========================================================================
   Placeholder media block (stand-in until real photos arrive)
   ========================================================================== */
.placeholder-block {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #3a3f47 0%, #23262b 100%);
  color: rgba(255, 255, 255, 0.65);
  border-radius: var(--radius);
  font-size: 0.85rem;
  padding: 20px;
  min-height: 160px;
}

.placeholder-block--light {
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.03) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #e9eaec 0%, #d8dade 100%);
  color: var(--color-text-muted);
}

.placeholder-block__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.placeholder-block__inner svg { width: 32px; height: 32px; opacity: 0.8; }

.placeholder-block__label {
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* ==========================================================================
   Intro / "We are" section
   ========================================================================== */
.intro {
  background: var(--color-bg-alt);
}

.intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.intro__col h3 {
  color: var(--color-primary);
  font-size: 1.3rem;
  margin-bottom: 12px;
}

.intro__col p {
  color: var(--color-text-muted);
}

.accordion-item {
  border-bottom: 1px solid var(--color-border);
  padding: 18px 0;
}

.accordion-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.accordion-item__head h3 { margin: 0; }

.accordion-item__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.accordion-item.open .accordion-item__icon { transform: rotate(180deg); }

.accordion-item__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition);
}

.accordion-item.open .accordion-item__body {
  max-height: 400px;
  padding-top: 14px;
}

.accordion-item__body p { color: var(--color-text-muted); }

@media (max-width: 800px) {
  .intro__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   Core values carousel
   ========================================================================== */
.values-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: thin;
  min-width: 0;
}

.values-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.values-row > .values-carousel {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 700px) {
  .values-row [data-carousel-prev],
  .values-row [data-carousel-next] {
    display: none;
  }
}

.values-carousel::-webkit-scrollbar { height: 6px; }
.values-carousel::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

.value-card {
  position: relative;
  flex: 0 0 260px;
  width: 260px;
  min-width: 260px;
  height: 340px;
  border-radius: var(--radius);
  overflow: hidden;
  scroll-snap-align: start;
  color: var(--color-white);
}

.value-card .placeholder-block {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

.value-card__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.value-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15,16,18,0.88) 10%, rgba(15,16,18,0.15) 65%);
  z-index: 1;
}

.value-card__text {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
}

.value-card__text .eyebrow-tag {
  color: var(--color-accent);
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
}

.value-card__text p { font-size: 0.92rem; color: rgba(255,255,255,0.9); }

/* ==========================================================================
   Cards: services / stats / team / news
   ========================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .card-grid { grid-template-columns: 1fr; }
}

.service-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: box-shadow var(--transition), transform var(--transition);
  overflow: hidden;
}

.service-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.service-card__media {
  margin: -32px -28px 20px;
  height: 170px;
  overflow: hidden;
  position: relative;
}

.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card__media .service-card__icon {
  position: absolute;
  left: 20px;
  bottom: -22px;
  margin: 0;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.service-card--with-media h3 {
  margin-top: 6px;
}

.service-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.service-card__icon svg { width: 24px; height: 24px; }

.service-card h3 {
  color: var(--color-primary);
  font-size: 1.15rem;
  margin-bottom: 10px;
}

.service-card p { color: var(--color-text-muted); font-size: 0.95rem; }

.service-card ul {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.service-card ul li {
  font-size: 0.92rem;
  color: var(--color-text);
  padding-left: 18px;
  position: relative;
}

.service-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---------- Expandable service card details ---------- */
.service-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}

.service-card__toggle:hover { color: var(--color-accent-dark); }

.service-card__toggle .chevron {
  display: inline-block;
  transition: transform 0.25s ease;
  font-size: 0.75rem;
}

.service-card.expanded .service-card__toggle .chevron {
  transform: rotate(180deg);
}

.service-card__details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.service-card.expanded .service-card__details {
  max-height: 600px;
}

.service-card__details ul {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.service-card__details ul li {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  padding-left: 18px;
  position: relative;
  margin-bottom: 8px;
}

.service-card__details ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .service-card__details,
  .service-card__toggle .chevron { transition: none; }
}

/* ---------- Stats strip ---------- */
.stats-strip {
  background: var(--color-primary);
  color: var(--color-white);
}

.stats-strip .card-grid {
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}

@media (max-width: 700px) {
  .stats-strip .card-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

.stat-item .stat-num {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-accent);
  display: block;
}

.stat-item .stat-label {
  color: rgba(255,255,255,0.75);
  font-size: 0.92rem;
  margin-top: 6px;
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  background: var(--color-primary-dark);
  color: var(--color-white);
  text-align: center;
}

.cta-band h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom: 16px;
}

.cta-band p {
  color: rgba(255,255,255,0.8);
  max-width: 560px;
  margin: 0 auto 28px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: var(--color-bg-alt);
  padding: 72px 0 28px;
  border-top: 1px solid var(--color-border);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.logo-chip {
  display: inline-flex;
  align-items: center;
  background: var(--color-primary);
  padding: 14px 20px;
  border-radius: var(--radius);
}

.logo-chip .brand-logo { height: 40px; }

/* Standalone campaign artwork (posters that already include their own
   text/logo baked in), shown intact, never covered by our own headline text */
.feature-poster {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.feature-poster img { width: 100%; display: block; }

.footer__brand p {
  margin-top: 16px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  max-width: 340px;
}

.footer__brand .read-more { color: var(--color-primary); font-weight: 600; text-decoration: underline; }

.footer h4 {
  color: var(--color-primary);
  margin-bottom: 18px;
  font-size: 1.02rem;
}

.footer__links li { margin-bottom: 10px; }
.footer__links a { color: var(--color-text-muted); font-size: 0.95rem; }
.footer__links a:hover { color: var(--color-primary); text-decoration: underline; }

.footer__contact p, .footer__contact address {
  font-style: normal;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.footer__contact strong { color: var(--color-primary); display: block; margin-bottom: 4px; }

.social-row {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.social-row a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.social-row a:hover { background: var(--color-accent); }
.social-row svg { width: 17px; height: 17px; }

.footer__bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

@media (max-width: 800px) {
  .footer__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-info-item {
  display: flex;
  gap: 16px;
  margin-bottom: 28px;
}

.contact-info-item .icon-badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info-item .icon-badge svg { width: 20px; height: 20px; }

.contact-info-item h4 { color: var(--color-primary); margin-bottom: 4px; }
.contact-info-item p { color: var(--color-text-muted); font-size: 0.95rem; }

.form-group { margin-bottom: 20px; }

.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: var(--color-primary);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--color-accent);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}

.form-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 10px;
}

.map-embed {
  margin-top: 24px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

.map-embed iframe {
  display: block;
  width: 100%;
}

/* ==========================================================================
   Careers page
   ========================================================================== */
.job-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.job-item h3 { color: var(--color-primary); margin-bottom: 6px; }
.job-item span.tag {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-right: 14px;
}

.perks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

@media (max-width: 900px) { .perks-grid { grid-template-columns: repeat(2, 1fr); } }

.perk-item .service-card__icon { margin: 0 auto 16px; }

/* ==========================================================================
   Breadcrumb / page hero eyebrow
   ========================================================================== */
.breadcrumb {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
  margin-bottom: 14px;
}

.breadcrumb a { color: rgba(255,255,255,0.9); text-decoration: underline; }

/* Utility */
.text-center { text-align: center; }
.mt-32 { margin-top: 32px; }