/* .section / .section-head live in base.css (loaded sitewide). */

/* ============ Hero ============ */
.hero {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-5);
  display: grid;
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
  gap: var(--space-5);
}
.hero-quadrant {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: var(--space-3);
}
.hero-quadrant__tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-section-tint);
  border: 1px solid var(--color-border);
  transition: transform 0.22s var(--ease-standard), box-shadow 0.22s var(--ease-standard), border-color 0.22s var(--ease-standard), background 0.22s var(--ease-standard);
}
.hero-quadrant__tile:hover {
  transform: translateY(-3px);
  background: #fff;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
/* Entrance order (animation itself lives in base.css): the carousel first — it
   holds the LCP element — then the four tiles in reading order. */
.hero-carousel[data-load] { animation-delay: 0s; }
.hero-quadrant__tile[data-load]:nth-child(1) { animation-delay: 0.06s; }
.hero-quadrant__tile[data-load]:nth-child(2) { animation-delay: 0.12s; }
.hero-quadrant__tile[data-load]:nth-child(3) { animation-delay: 0.18s; }
.hero-quadrant__tile[data-load]:nth-child(4) { animation-delay: 0.24s; }
.hero-quadrant__tile { position: relative; }
.hero-quadrant__tile svg {
  width: 48px; height: 48px;
  padding: 11px;
  margin-bottom: auto;
  border-radius: 50%;
  background: var(--color-primary-tint);
  color: var(--color-primary);
  transition: background 0.22s var(--ease-standard), color 0.22s var(--ease-standard);
}
.hero-quadrant__tile:hover svg { background: var(--color-primary); color: #fff; }
/* Reserve two lines each so labels/hints line up across tiles even when one
   wraps ("Request a / Quote" used to sit ~30px above "Datasheet / Library"). */
.hero-quadrant__label { margin-top: var(--space-4); padding-right: var(--space-5); font-size: 0.9375rem; font-weight: 700; line-height: 1.25; color: var(--color-navy); min-height: 2.5em; }
.hero-quadrant__hint { font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.35; min-height: 2.7em; }
/* arrow affordance: these tiles are actions, not decoration */
.hero-quadrant__tile::after {
  content: "\2192";
  position: absolute;
  right: var(--space-4);
  top: var(--space-4);          /* top-right, level with the icon: a bottom arrow collided with the hint text at 375px */
  font-size: 1.125rem;
  line-height: 1;
  color: var(--color-primary);
  transition: transform 0.22s var(--ease-standard);
}
.hero-quadrant__tile:hover::after { transform: translateX(4px); }

.hero-carousel {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 500px;
  background: var(--color-navy);
}
/* Slides are stacked in ONE grid cell (not absolutely positioned), so the
   carousel is as tall as its tallest slide at every width. The absolute
   version clipped slide 1's eyebrow and overlapped its CTA with the controls
   at 375px (critique, 2026-09-21). */
.hero-carousel__track { display: grid; min-height: 500px; }
.hero-carousel__slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: var(--space-8) var(--space-10) 104px;   /* bottom room for the slideshow controls */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-standard), visibility 0.5s;
}
/* `inherit`, NOT `visible`: the carousel carries [data-load], which the .js
   FOUC guard keeps `visibility:hidden` until GSAP reveals it. An explicit
   `visible` here punched through that guard, so slide 1 painted on the first
   frame and then snapped hidden before fading in (motion review P0). */
.hero-carousel__slide.is-active { opacity: 1; visibility: inherit; }
/* Navy wash keeps every slide's white text well above AA over any photo. */
.hero-carousel__slide--1 {
  background:
    linear-gradient(105deg, rgba(7, 20, 51, 0.94) 0%, rgba(11, 29, 74, 0.86) 52%, rgba(11, 29, 74, 0.5) 100%),
    url('/assets/img/placeholder/hero-slide-1.jpg') center/cover no-repeat;
}
.hero-carousel__slide--2 {
  background:
    linear-gradient(105deg, rgba(7, 20, 51, 0.94) 0%, rgba(11, 29, 74, 0.84) 55%, rgba(37, 99, 235, 0.45) 100%),
    url('/assets/img/placeholder/hero-slide-2.jpg') center/cover no-repeat;
}
.hero-carousel__slide--3 {
  background:
    linear-gradient(105deg, rgba(7, 20, 51, 0.94) 0%, rgba(11, 29, 74, 0.84) 55%, rgba(11, 29, 74, 0.5) 100%),
    url('/assets/img/placeholder/hero-slide-3.jpg') center/cover no-repeat;
}
.hero-carousel__eyebrow {
  color: var(--color-electric-light);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-4);
}
.hero-carousel__slide h1,
.hero-carousel__slide h2 {
  color: #fff;
  font-size: clamp(1.875rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  max-width: 20ch;
  margin-bottom: var(--space-4);
}
.hero-carousel__sub {
  color: rgba(255, 255, 255, 0.92);     /* .74 dipped to ~4.5:1 over the photo's lightest edge on phones (audit) */
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.6;
  max-width: 56ch;
  margin-bottom: var(--space-6);
}
.hero-carousel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-2); }
.hero-carousel__link { color: #fff; font-weight: 600; }
.hero-carousel__link:hover { color: var(--color-electric-light); }
.hero-carousel__link span { display: inline-block; transition: transform 0.2s var(--ease-standard); }
.hero-carousel__link:hover span { transform: translateX(4px); }

.hero-carousel__controls {
  position: absolute;
  left: var(--space-10);
  bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  z-index: 2;
}
.hero-carousel__pause {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}
.hero-carousel__pause:hover { background: rgba(255, 255, 255, 0.14); }
.hero-carousel__pause svg { width: 14px; height: 14px; }
.hero-carousel__dots { display: flex; gap: var(--space-2); }
.hero-carousel__dot {
  width: 28px; height: 28px;
  position: relative;
}
.hero-carousel__dot::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 24px; height: 4px;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.2s var(--ease-standard), width 0.2s var(--ease-standard);
}
.hero-carousel__dot:hover::after { background: rgba(255, 255, 255, 0.65); }
.hero-carousel__dot.is-active::after { background: #fff; width: 32px; }

/* ============ Trust band ============ */
.trust { padding-block: var(--space-6) 0; }
.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.trust-strip__card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
}
.trust-strip__card > svg {
  width: 44px; height: 44px;
  padding: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-primary-tint);
  color: var(--color-primary);
}
.trust-strip__card h3 { font-size: 1rem; font-weight: 700; margin-bottom: var(--space-1); }
.trust-strip__card p { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.5; }

/* ============ Categories ============ */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.category-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon label" "icon count";
  column-gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  transition: transform 0.22s var(--ease-standard), box-shadow 0.22s var(--ease-standard), border-color 0.22s var(--ease-standard);
}
.category-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.category-tile__icon {
  grid-area: icon;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  transition: background 0.22s var(--ease-standard), color 0.22s var(--ease-standard);
}
.category-tile:hover .category-tile__icon { background: var(--color-primary); color: #fff; }
.category-tile__icon svg { width: 28px; height: 28px; }
.category-tile__label { grid-area: label; align-self: end; font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--color-navy); }
.category-tile__count { grid-area: count; align-self: start; font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 2px; }

/* ============ About snapshot ============ */
.about-snapshot {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--space-10);
  align-items: center;
  padding-block: var(--space-10);
}
.about-snapshot__copy h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: var(--space-4); }
.about-snapshot__copy p { color: var(--color-text-muted); margin-bottom: var(--space-4); max-width: 62ch; }
.about-snapshot__copy .btn { margin-top: var(--space-2); }
.about-snapshot .detail-card { background: #fff; }

/* ============ Sectors ============ */
.sectors-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-4);
}
.sector-tile {
  display: block;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: transform 0.22s var(--ease-standard), box-shadow 0.22s var(--ease-standard);
}
.sector-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sector-tile__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.sector-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease-standard); }
.sector-tile:hover .sector-tile__media img { transform: scale(1.05); }
.sector-tile h3 { font-size: 0.875rem; font-weight: 700; line-height: 1.3; padding: var(--space-3) var(--space-4); }

/* ============ Brand row (text-only, see index.php note) ============ */
.brand-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); }
.brand-row__logo {
  display: flex; align-items: center; justify-content: center;
  height: 88px;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  text-align: center;
}
.brand-row__logo span { font-size: 0.9375rem; font-weight: 700; color: var(--color-text-muted); letter-spacing: -0.005em; }
/* tiles that link into the catalog look and feel clickable; plain tiles don't */
a.brand-row__logo { transition: border-color 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard); }
a.brand-row__logo:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
a.brand-row__logo:hover span { color: var(--color-primary); }

/* ============ Featured products carousel ============ */
.featured-row { position: relative; }
.featured-row__scroller {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-block: var(--space-2) var(--space-4);
  scrollbar-width: thin;
}
.featured-row__nav {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: background 0.15s var(--ease-standard), color 0.15s var(--ease-standard);
}
.featured-row__nav:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.featured-row__nav svg { width: 18px; height: 18px; }
.featured-row__nav--prev { left: -20px; }
.featured-row__nav--next { right: -20px; }

/* ============ Services grid ============ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.service-tile {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  transition: transform 0.22s var(--ease-standard), box-shadow 0.22s var(--ease-standard);
}
.service-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.service-tile__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.service-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.service-tile__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); flex: 1; }
.service-tile h3 { font-size: 1.0625rem; font-weight: 700; }
.service-tile p { font-size: 0.875rem; color: var(--color-text-muted); }
.service-tile__more { margin-top: auto; padding-top: var(--space-2); font-size: 0.875rem; font-weight: 600; color: var(--color-primary); }

/* ============ CTA banner ============ */
.cta-banner {
  max-width: var(--container-max);
  margin: var(--space-10) auto 0;
  padding-inline: var(--space-5);
}
.cta-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-10) var(--space-10);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(37, 99, 235, 0.55) 0%, rgba(37, 99, 235, 0) 60%),
    var(--color-navy);
}
.cta-banner__inner h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.125rem); margin-bottom: var(--space-2); }
.cta-banner__inner p { color: var(--color-on-navy-muted); max-width: 52ch; }
.cta-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Touch screens have no real hover: :hover sticks after a tap, leaving a
   card lifted/shadowed until the next tap elsewhere (motion review). */
@media (hover: none) {
  .hero-quadrant__tile:hover,
  .category-tile:hover,
  .sector-tile:hover,
  .service-tile:hover { transform: none; box-shadow: none; }
  .hero-quadrant__tile:hover::after { transform: none; }
  .sector-tile:hover .sector-tile__media img { transform: none; }
}

/* ============================= Responsive ============================= */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; }
  .hero-quadrant { grid-template-columns: repeat(4, minmax(0, 1fr)); order: 2; }
  .hero-quadrant__tile { min-height: 132px; }
  .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sectors-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-snapshot { grid-template-columns: 1fr; gap: var(--space-6); }
  .featured-row__nav--prev { left: -8px; }
  .featured-row__nav--next { right: -8px; }
}

@media (max-width: 767px) {
  .hero { padding: var(--space-4); gap: var(--space-4); }
  .hero-quadrant { grid-template-columns: 1fr 1fr; }
  .hero-carousel, .hero-carousel__track { min-height: 0; }
  .hero-carousel__slide { padding: var(--space-5) var(--space-5) 84px; justify-content: flex-start; }
  /* Tighter type so "Request a Quote" clears the fold on a 667px-tall phone
     (it sat at ~704px). The client's headline and sub-headline stay in full. */
  .hero-carousel__slide h1, .hero-carousel__slide h2 { font-size: 1.75rem; margin-bottom: var(--space-3); }
  .hero-carousel__eyebrow { margin-bottom: var(--space-2); }
  .hero-carousel__sub { font-size: 0.9375rem; line-height: 1.5; margin-bottom: var(--space-5); }
  .hero-carousel__controls { left: var(--space-5); }
  .trust-strip { grid-template-columns: 1fr; }
  .categories-grid { gap: var(--space-3); }
  .category-tile { grid-template-columns: 1fr; grid-template-areas: "icon" "label" "count"; row-gap: var(--space-2); padding: var(--space-4); }
  .sectors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-grid { grid-template-columns: 1fr; }
  .section { padding-block: var(--space-8); padding-inline: var(--space-4); }
  .section--tint > .section__inner { padding-inline: var(--space-4); }
  .about-snapshot { padding-block: var(--space-8); }
  .featured-row__nav { display: none; }
  .cta-banner { padding-inline: var(--space-4); }
  .cta-banner__inner { padding: var(--space-8) var(--space-5); }
  .cta-banner__actions, .cta-banner__actions .btn { width: 100%; }
}