/* ============================================================
   SysTech Design — HOME PAGE styles (front-page.php)
   Enqueued only on the front page (see functions-snippet.php).
   Requires systech-global.css (CSS variables + header/footer).
   ============================================================ */

html, body { overflow-x: hidden; }

/* Divi wraps the home page code module in .et_pb_section_0, which adds
   padding-top: 50px on smaller screens. The home page needs none of it. */
.et_pb_section_0.et_pb_section { padding-top: 0 !important; }

.st-home, .st-home *, .st-home *::before, .st-home *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.st-home {
  font-family: var(--st-font-body);
  background: #fff;
  color: var(--st-black);
}
.st-home img { max-width: 100%; }

/* Subtle grid overlay on light sections */
.st-caps, .st-adv-section, .st-about, .st-cases-bg, .st-training {
  background-image: linear-gradient(rgba(0,0,0,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── Buttons ── */
.st-btn-green {
  background: var(--st-green); color: #fff;
  font-family: var(--st-font-head); font-size: 13px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 14px 30px; text-decoration: none;
  transition: background .2s; display: inline-block;
  border: none; cursor: pointer; border-radius: 0;
}
.st-btn-green:hover { background: var(--st-green-dark); color: #fff; }
/* Slider secondary button: matte semi-transparent brand blue with black
   text. Alpha 0.92 keeps black ≥ 4.5:1 (WCAG AA) even over a fully
   black slide image (worst case 4.8:1; solid blue on hover 5.8:1). */
.st-btn-outline-white {
  background: rgba(78,139,191,0.92); color: #000;
  border: none;
  font-family: var(--st-font-head); font-size: 13px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 14px 30px; text-decoration: none;
  transition: background .2s; display: inline-block;
}
.st-btn-outline-white:hover { background: var(--st-blue); color: #000; }
.st-btn-green-sm {
  background: var(--st-green); color: #fff;
  font-family: var(--st-font-head); font-size: 12px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 11px 24px; text-decoration: none;
  transition: background .2s; display: inline-block;
}
.st-btn-green-sm:hover { background: var(--st-green-dark); color: #fff; }
/* Body secondary button (View All Cases / View All Posts): black text
   on a light semi-transparent tint of the brand blue (≈13:1 on the
   light section backgrounds — WCAG AA). */
.st-btn-blue-outline {
  background: rgba(78,139,191,0.22); color: #000;
  border: none;
  font-family: var(--st-font-head); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 12px 24px; text-decoration: none;
  transition: background .2s; display: inline-block;
}
.st-btn-blue-outline:hover { background: rgba(78,139,191,0.4); color: #000; }

/* ============================================================
   HERO SLIDER
   ============================================================ */
/* FIXED HEIGHT ACROSS SLIDES: every slide is stacked in the SAME grid
   cell (grid-area 1/1), so all slides — visible or not — contribute to
   sizing and the hero always takes the height of the TALLEST slide.
   The height therefore never changes as slides advance. Inactive slides
   are faded out (opacity 0) but keep their layout space, so they hold
   the height. Slider controls are position:absolute → they are NOT grid
   items and don't affect the height. */
.st-hero {
  position: relative;
  overflow: hidden;
  background: var(--st-black);
  display: grid;
}
.st-slide {
  grid-area: 1 / 1; min-width: 0;
  position: relative;
  opacity: 0; transition: opacity 1s ease;
  background-size: cover; background-position: center top;
  /* Invisible slides must not swallow clicks on the active slide's buttons */
  pointer-events: none;
}
.st-slide.st-active { opacity: 1; pointer-events: auto; z-index: 1; animation: stHeroPan 14s ease-out forwards; }
@keyframes stHeroPan {
  from { background-position: center 0px; }
  to   { background-position: center -100px; }
}
/* Bottom-anchored pan variant */
.st-slide.st-pan-bottom { background-position: center bottom -100px; }
.st-slide.st-pan-bottom.st-active { animation: stHeroPanBottom 14s ease-out forwards; }
@keyframes stHeroPanBottom {
  from { background-position: center bottom -100px; }
  to   { background-position: center bottom 0; }
}
/* Video-background slide: the <video> fills the slide behind the overlay */
.st-slide-video-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  background: var(--st-black);
  pointer-events: none;
}
.st-slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.05) 100%);
}
.st-slide-content {
  /* Positioned so it paints — and stays clickable — above the overlay. */
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(420px, 62vh, 640px);
  /* bottom padding reserves the dots/arrows zone so tall slides never
     collide with the slider controls */
  padding: 40px clamp(24px, 7vw, 100px) 110px;
  /* Wider column than the old 860px: long headings/paragraphs wrap into
     fewer lines, keeping even the tallest slide within the min-height
     band so the hero stays about one screen tall (above the fold). */
  width: min(100%, 1180px);
}
.st-slide-eyebrow {
  font-family: var(--st-font-head); font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--st-green-light); margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}
.st-slide-eyebrow::before { content: ''; width: 32px; height: 2px; background: var(--st-green); display: block; flex-shrink: 0; }
.st-slide-h1 {
  font-family: var(--st-font-head); font-size: clamp(28px, 4.5vw, 64px);
  font-weight: 900; color: #fff; line-height: 1.08;
  margin-bottom: 20px; letter-spacing: -0.01em;
}
.st-slide-h1 em { font-style: normal; color: var(--st-green-light); }
.st-slide-p {
  /* no max-width — the text spans the content column so it never wraps
     into extra lines that push the buttons down into the controls */
  font-size: clamp(14px, 1.6vw, 17px); color: rgba(255,255,255,0.82); line-height: 1.65;
  margin-bottom: 32px; font-weight: 300;
}
.st-slide-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* Slider controls */
.st-slider-controls {
  position: absolute; bottom: 28px; left: clamp(24px, 7vw, 100px);
  display: flex; align-items: center; gap: 10px; z-index: 10;
}
.st-slider-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.4); border: 2px solid rgba(255,255,255,0.6);
  cursor: pointer; padding: 0;
  transition: background .2s, transform .2s;
}
.st-slider-dot.st-active { background: var(--st-green); border-color: var(--st-green); transform: scale(1.2); }
.st-slider-arrows {
  position: absolute; bottom: 20px; right: clamp(16px, 4vw, 60px);
  display: flex; gap: 8px; z-index: 10;
}
.st-slider-arrow {
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 0; padding: 0;
}
.st-slider-arrow:hover { background: var(--st-green); border-color: var(--st-green); }

/* Slide text entrance */
@keyframes stFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.st-slide.st-active .st-slide-eyebrow { animation: stFadeUp .5s .2s both; }
.st-slide.st-active .st-slide-h1 { animation: stFadeUp .5s .35s both; }
.st-slide.st-active .st-slide-p { animation: stFadeUp .5s .5s both; }
.st-slide.st-active .st-slide-btns { animation: stFadeUp .5s .65s both; }

/* Smaller screens (tablets included): drop the tall min-height so the
   hero hugs its tallest slide's content, disable the background pan,
   and tighten the control positions. The grid stack still fixes the
   height to the tallest slide, so there's no jump between slides. */
@media (max-width: 1200px) {
  .st-slide.st-active { animation: none; background-position: center; }
  .st-slide.st-pan-bottom { background-position: center; }
  .st-slide-content {
    min-height: 0;
    width: 100%;
    padding: 48px clamp(20px, 5vw, 40px) 128px;
  }
  .st-slider-controls { bottom: 36px; left: clamp(20px, 5vw, 40px); }
  .st-slider-arrows { bottom: 24px; right: clamp(20px, 5vw, 40px); }
}

/* ============================================================
   QUICK LINKS BAR
   ============================================================ */
.st-quick-bar {
  /* brand blue + the same subtle line grid as the light sections
     (same 40px size), drawn in faint white. Keep background-color +
     background-image as separate properties: the `background:`
     shorthand would wipe the grid. */
  background-color: var(--st-blue);
  background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  display: flex; flex-wrap: wrap; overflow: hidden;
}
.st-quick-link {
  flex: 1 1 16%; min-width: 200px;
  padding: 18px 20px;
  display: flex; align-items: center;
  border-right: 1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  text-decoration: none; color: #fff; transition: background .2s;
}
.st-quick-link:hover { background: rgba(0,0,0,0.15); color: #fff; }
.st-quick-link-text { font-family: var(--st-font-head); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.3; }
.st-quick-link-sub { font-size: 11px; font-weight: 400; opacity: 0.75; margin-top: 1px; }
@media (max-width: 640px) {
  .st-quick-link { flex-basis: 50%; min-width: 150px; padding: 14px 16px; }
}

/* ============================================================
   SECTION STRUCTURE
   ============================================================ */
.st-section-wrap {
  padding: clamp(48px, 8vw, 80px) clamp(20px, 5.5vw, 80px);
  max-width: 1400px; margin: 0 auto;
}
.st-section-label {
  font-family: var(--st-font-head); font-size: 11px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--st-green); margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.st-section-label::before { content: ''; width: 24px; height: 2px; background: var(--st-green); flex-shrink: 0; }
.st-section-label.st-muted { color: var(--st-gray-mid); margin-top: 32px; }
.st-section-label.st-muted::before { background: var(--st-gray-mid); }
.st-section-h2 {
  font-family: var(--st-font-head); font-size: clamp(26px, 3vw, 42px);
  font-weight: 800; color: var(--st-black); line-height: 1.1;
  margin-bottom: 14px; letter-spacing: -0.01em;
}
.st-section-desc { font-size: 16px; color: var(--st-gray); line-height: 1.7; max-width: 640px; }
.st-lead { font-size: 16px; color: var(--st-gray); line-height: 1.7; margin: 16px 0; max-width: 520px; }

/* ============================================================
   CAPABILITIES
   ============================================================ */
.st-caps-intro { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; flex-wrap: wrap; gap: 24px; }
.st-caps-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: #e5e8e0; border: 1px solid #e5e8e0;
}
.st-cap-card {
  background: #fff;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; overflow: hidden;
  transition: box-shadow .2s; cursor: pointer;
}
.st-cap-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.12); z-index: 1; }
.st-cap-img { height: 150px; overflow: hidden; background: #ddd; }
.st-cap-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.st-cap-card:hover .st-cap-img img { transform: scale(1.05); }
.st-cap-body { padding: 18px 16px 22px; flex: 1; display: flex; flex-direction: column; background: #fff; }
.st-cap-num { font-family: var(--st-font-head); font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--st-green); margin-bottom: 8px; }
.st-cap-title { font-family: var(--st-font-head); font-size: 14px; font-weight: 700; color: var(--st-black); margin-bottom: 8px; line-height: 1.25; }
.st-cap-desc { font-size: 12px; color: var(--st-gray); line-height: 1.6; flex: 1; }
.st-cap-more { margin-top: 12px; font-family: var(--st-font-head); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--st-green); }
@media (max-width: 1200px) { .st-caps-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .st-caps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .st-caps-grid { grid-template-columns: 1fr; } .st-cap-img { height: 180px; } }

/* ============================================================
   ADVANTAGE (photo tiles + stats)
   ============================================================ */
.st-adv-section { background: var(--st-gray-light); }
.st-adv-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.st-adv-img { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.st-adv-tile { aspect-ratio: 1 / 1; overflow: hidden; background: #ddd; }
.st-adv-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.st-adv-tile:hover img { transform: scale(1.05); }
.st-adv-img-badge {
  position: absolute; bottom: 24px; left: 24px;
  background: var(--st-green); color: #fff;
  font-family: var(--st-font-head); font-size: 13px; font-weight: 800;
  padding: 12px 20px; letter-spacing: 0.04em;
}
.st-adv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0; }
.st-stat-box { background: #fff; padding: 22px 20px; border-left: 4px solid var(--st-green); }
.st-stat-box.st-stat-blue { border-left-color: var(--st-blue); }
.st-stat-num { font-family: var(--st-font-head); font-size: clamp(32px, 3vw, 42px); font-weight: 900; color: var(--st-green); line-height: 1; }
.st-stat-box.st-stat-blue .st-stat-num { color: var(--st-blue); }
.st-stat-num sup { font-size: 0.55em; }
.st-stat-label { font-size: 12px; color: var(--st-gray); margin-top: 4px; line-height: 1.4; }
.st-adv-list { display: flex; flex-direction: column; }
.st-adv-item { padding: 14px 0; border-bottom: 1px solid #e0e4d8; display: flex; gap: 14px; align-items: flex-start; }
.st-adv-item:last-child { border-bottom: none; }
.st-adv-dot { width: 6px; height: 6px; background: var(--st-green); margin-top: 7px; flex-shrink: 0; border-radius: 50%; }
.st-adv-item-title { font-family: var(--st-font-head); font-size: 13px; font-weight: 700; color: var(--st-black); margin-bottom: 2px; }
.st-adv-item-desc { font-size: 13px; color: var(--st-gray); line-height: 1.5; }
@media (max-width: 1000px) {
  .st-adv-inner { grid-template-columns: 1fr; }
  .st-adv-img { order: 2; }
}
@media (max-width: 420px) { .st-adv-stats { grid-template-columns: 1fr; } }

/* ============================================================
   ABOUT / WHO WE ARE
   ============================================================ */
.st-about-inner { display: grid; grid-template-columns: 3fr 2fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.st-about-body { font-size: 16px; line-height: 1.8; color: var(--st-gray); margin-bottom: 24px; }
.st-about-body strong { color: var(--st-black); font-weight: 600; }
.st-industry-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.st-chip {
  font-family: var(--st-font-head); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 7px 14px; background: var(--st-gray-light);
  color: var(--st-gray-dark); border: 1px solid #dde3d5;
  transition: background .2s, color .2s;
}
.st-chip:hover { background: var(--st-green); color: #fff; border-color: var(--st-green); }
.st-assoc-title { font-family: var(--st-font-head); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; color: var(--st-green); margin-bottom: 20px; }
.st-assoc-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.st-assoc-logo-box {
  background: #fff; border: 1px solid #e0e5d8;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; height: 90px;
}
.st-assoc-logo-box img { max-width: 100%; max-height: 60px; width: auto; object-fit: contain; filter: grayscale(20%); }
.st-office-box { margin-top: 28px; background: var(--st-gray-light); padding: 24px; border-left: 4px solid var(--st-green); }
.st-office-box-label { font-family: var(--st-font-head); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--st-green); margin-bottom: 10px; }
.st-office-box-addr { font-size: 14px; color: var(--st-gray); line-height: 1.8; }
.st-office-box-phone { font-family: var(--st-font-head); font-size: 18px; font-weight: 700; color: var(--st-blue); margin-top: 8px; }
.st-office-box-phone a { color: var(--st-blue); text-decoration: none; }
@media (max-width: 1000px) { .st-about-inner { grid-template-columns: 1fr; } }

/* ============================================================
   CASE STUDIES + BLOG CARDS
   ============================================================ */
.st-cases-bg { background: var(--st-gray-light); }
.st-cases-bg.st-bordered { border-top: 1px solid #e5e8e0; }
.st-cases-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; flex-wrap: wrap; gap: 16px; }
.st-cases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.st-case-card { background: #fff; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: box-shadow .2s; }
.st-case-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.12); }
.st-case-img { height: 200px; overflow: hidden; background: #ddd; }
.st-case-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.st-case-card:hover .st-case-img img { transform: scale(1.04); }
.st-case-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.st-case-tag { font-family: var(--st-font-head); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; color: var(--st-blue); margin-bottom: 8px; }
.st-case-title { font-family: var(--st-font-head); font-size: 16px; font-weight: 700; color: var(--st-black); line-height: 1.25; margin-bottom: 8px; }
.st-case-loc { font-size: 12px; color: var(--st-gray-mid); margin-bottom: 10px; }
/* Flat card icons: blue location pins for case studies, green calendar for blog */
.st-case-loc .st-ico { color: var(--st-blue); margin-right: 3px; }
#blog .st-case-loc .st-ico { color: var(--st-green); }
.st-case-excerpt { font-size: 13px; color: var(--st-gray); line-height: 1.6; flex: 1; }
.st-case-read { margin-top: 16px; font-family: var(--st-font-head); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--st-green); }

/* ============================================================
   SUPPLY HOUSE + TRAINING
   ============================================================ */
.st-training { background: #fff; }
.st-training-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 60px); align-items: start; }
.st-supply-grid-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 24px; }
.st-supply-link {
  background: var(--st-gray-light); border: 1px solid #e0e5d8;
  padding: 14px 16px; text-decoration: none;
  font-family: var(--st-font-head); font-size: 12px; font-weight: 600;
  color: var(--st-gray-dark); text-transform: uppercase; letter-spacing: 0.06em;
  transition: background .2s, color .2s, border-color .2s;
  display: flex; align-items: center; gap: 8px;
}
.st-supply-link::before { content: '\2192'; color: var(--st-green); flex-shrink: 0; font-weight: 700; }
.st-supply-link:hover { background: #fff; color: var(--st-green); border-color: var(--st-green); }
.st-training-features { margin: 24px 0; display: flex; flex-direction: column; gap: 12px; }
.st-training-feat { display: flex; gap: 12px; align-items: flex-start; }
.st-feat-check { color: var(--st-green); font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.st-feat-text { font-size: 14px; color: var(--st-gray); line-height: 1.5; }
.st-feat-text strong { color: var(--st-black); }
@media (max-width: 1000px) { .st-training-inner { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .st-supply-grid-links { grid-template-columns: 1fr; } }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .st-home *, .st-home *::before, .st-home *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .st-slide { transition: none; }
}