/*
 * Homepage — United Signs
 */

/* ── Kadence reset ───────────────────────────────────────────── */
body.home .site-content,
body.home .content-area,
body.home #primary,
body.home .site-main,
body.home article.page,
body.home .entry-content { padding:0!important; margin:0!important; max-width:none!important; width:100%!important; }
body.home .entry-header { display:none!important; }

/* ── Tokens ──────────────────────────────────────────────────── */
.usg-home {
  --red:    #ED1C24;
  --red-dk: #c8102e;
  --navy:   #0c1020;
  --white:  #ffffff;
  --snow:   #f5f6fa;
  --grey:   #e2e5ef;
  --ink:    #1a1d2e;
  --muted:  #6b7280;
  --fcond:  'Barlow Condensed', sans-serif;
  --fbody:  'DM Sans', sans-serif;
  --ease:   .22s cubic-bezier(.4,0,.2,1);
  font-family: var(--fbody);
  color: var(--ink);
}

/* ── Layout ──────────────────────────────────────────────────── */
.hp-wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px,5vw,60px); }
.hp-section { padding: clamp(64px,8vw,112px) 0; }
.hp-section--light { background: var(--snow); }
.hp-section--dark  { background: var(--navy); }
.hp-section--white { background: var(--white); }

/* ── Overline ────────────────────────────────────────────────── */
.hp-overline {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fcond); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin-bottom: 10px;
}
.hp-overline::before { content:''; width:22px; height:2px; background:var(--red); flex-shrink:0; }
.hp-overline--light { color: rgba(255,255,255,.65); }
.hp-overline--light::before { background: var(--red); }

/* ── Headings ────────────────────────────────────────────────── */
.hp-h2 {
  font-family: var(--fcond); font-size: clamp(30px,4vw,52px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.05; color: var(--ink);
  margin: 0 0 6px; text-transform: uppercase;
}
.hp-h2 b     { color: var(--red); font-weight: inherit; }
.hp-h2--light{ color: #fff; }
.hp-section-head { text-align: center; margin-bottom: clamp(36px,5vw,60px); }
.hp-section-head--light .hp-h2 { color: #fff; }
.hp-section-sub { font-size: 15.5px; color: var(--muted); line-height: 1.8; max-width: 640px; margin: 18px auto 0; }

/* ── SVG Arch ────────────────────────────────────────────────── */
.hp-arch { display: flex; justify-content: center; margin: 4px 0 16px; }
.hp-arch svg { width: 56px; height: auto; display: block; }
/* Left-aligned arch in testi/legacy */
.hp-arch--left { justify-content: flex-start; }

/* ── Buttons ─────────────────────────────────────────────────── */
.hp-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 14px 28px;
  font-family: var(--fcond); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  border-radius: 8px; transition: all var(--ease);
}
.hp-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.hp-btn--red  { background: var(--red); color: #fff; box-shadow: 0 6px 20px rgba(237,28,36,.28); }
.hp-btn--red:hover { background: var(--red-dk); transform: translateY(-2px); }
.hp-btn--ghost{ background: rgba(255,255,255,.1); color:#fff; border:1.5px solid rgba(255,255,255,.28); backdrop-filter:blur(8px); }
.hp-btn--ghost:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.hp-btn--outline-light { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.35); }
.hp-btn--outline-light:hover { border-color:var(--red); color:var(--red); }

/* ══════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════ */
.hp-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: var(--navy);
  display: flex;
  align-items: flex-end;
}
.hp-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  /* Ensure video is always fully visible */
  min-width: 100%;
  min-height: 100%;
}
.hp-hero__bottom-fade {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(8,10,22,.72) 0%, rgba(8,10,22,.2) 60%, transparent 100%);
  z-index: 1; pointer-events: none;
}
/* Glass panel — sits over the bottom gradient, NOT covering the full video */
.hp-hero__panel {
  position: relative;
  z-index: 2;
  margin: 0 0 clamp(32px,5vh,64px) clamp(20px,5vw,72px);
  max-width: 560px;
  background: rgba(8,10,22,.52);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  padding: clamp(22px,3vw,38px) clamp(22px,3.5vw,42px);
}
.hp-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
  background: rgba(237,28,36,.18); border: 1px solid rgba(237,28,36,.4); border-radius: 24px;
  font-family: var(--fcond); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.9); margin-bottom: 16px;
}
.hp-badge__dot { width:7px;height:7px;border-radius:50%;background:var(--red);animation:hp-pulse 2s ease-in-out infinite;flex-shrink:0; }
@keyframes hp-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.65)}}
.hp-hero__h1 { font-family:var(--fcond); font-size:clamp(32px,4.5vw,64px); font-weight:900; line-height:1.0; letter-spacing:-.03em; text-transform:uppercase; color:#fff; margin:0 0 14px; }
.hp-hero__h1-accent { color:var(--red); display:block; }
.hp-hero__sub { font-size:clamp(13px,1.3vw,15px); color:rgba(255,255,255,.78); line-height:1.65; margin-bottom:26px; }
.hp-hero__cta { display:flex; flex-wrap:wrap; gap:12px; }

/* ══════════════════════════════════════════════════════════════
   FEATURE STRIP
══════════════════════════════════════════════════════════════ */
.hp-features { background:var(--white); border-bottom:1px solid var(--grey); }
.hp-features__grid { display:grid; grid-template-columns:repeat(4,1fr); border-left:1px solid var(--grey); }
.hp-feat {
  display: flex; align-items: center; gap: 20px;
  padding: 28px 24px;
  border-right: 1px solid var(--grey); border-top: 3px solid transparent;
  transition: border-top-color var(--ease), background var(--ease);
}
.hp-feat:hover { border-top-color: var(--red); background: rgba(237,28,36,.025); }
/* Image icon — no background box, just the image */
.hp-feat__ico {
  width: 72px; height: 72px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.hp-feat__ico img { width: 72px; height: 72px; object-fit: contain; display: block; }
.hp-feat__h { font-family:var(--fcond);font-size:16px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin:0 0 5px; }
.hp-feat__p { font-size:13px;color:var(--muted);line-height:1.65;margin:0; }

/* ══════════════════════════════════════════════════════════════
   MARQUEE
══════════════════════════════════════════════════════════════ */
.hp-marquee { background:linear-gradient(90deg,var(--red-dk),var(--red),var(--red-dk));overflow:hidden;padding:12px 0;user-select:none; }
.hp-marquee__track { display:flex;white-space:nowrap;animation:hp-marquee-scroll 40s linear infinite; }
.hp-marquee:hover .hp-marquee__track { animation-play-state:paused; }
.hp-marquee__item { flex-shrink:0;padding:0 6px;font-family:var(--fcond);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.92);display:inline-flex;align-items:center;gap:16px; }
.hp-marquee__dot { color:rgba(255,255,255,.4);font-size:9px; }
@keyframes hp-marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ══════════════════════════════════════════════════════════════
   LEGACY
══════════════════════════════════════════════════════════════ */
.hp-legacy__inner { display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,96px);align-items:start; }
.hp-legacy__tag { display:inline-flex;align-items:center;gap:8px;font-family:var(--fcond);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:20px; }
.hp-legacy__tag-dot { width:6px;height:6px;border-radius:50%;background:var(--red);flex-shrink:0; }
.hp-legacy__collage { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px; }
.hp-legacy__collage-img { aspect-ratio:4/3;border-radius:10px;background-size:cover;background-position:center;background-color:var(--grey); }
.hp-legacy__collage-img:first-child { border-radius:16px 8px 8px 8px; }

/* BBB badge */
.hp-bbb {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--snow); border: 1px solid var(--grey); border-radius: 12px;
  border-left: 4px solid #003f87; /* BBB blue */
}
.hp-bbb__seal-link { flex-shrink: 0; display: block; line-height: 0; }
.hp-bbb__seal-link img { width: 90px; height: auto; display: block; }
.hp-bbb__name { font-family:var(--fcond);font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink); }
.hp-bbb__rating { font-size:12px;font-weight:700;color:#003f87;margin-top:2px; }
.hp-bbb__sub { font-size:11px;color:var(--muted);margin-top:1px; }

.hp-legacy__right .hp-h2 { margin-bottom:6px; }
.hp-legacy__p { font-size:15px;color:var(--muted);line-height:1.82;margin-bottom:16px; }
.hp-legacy__right .hp-btn { margin-top:8px; }

/* ══════════════════════════════════════════════════════════════
   CAPABILITIES
══════════════════════════════════════════════════════════════ */
.hp-caps__grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.hp-cap-card { background:var(--white);border:1px solid var(--grey);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:border-color var(--ease),box-shadow var(--ease),transform var(--ease); }
.hp-cap-card:hover { border-color:rgba(237,28,36,.28);box-shadow:0 20px 56px rgba(237,28,36,.1);transform:translateY(-6px); }
.hp-cap-card__img { position:relative;height:240px;background-size:cover;background-position:center;background-color:var(--navy);flex-shrink:0; }
.hp-cap-card__img-over { position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(8,10,22,.55) 100%); }
.hp-cap-card__tag { position:absolute;bottom:14px;left:16px;font-family:var(--fcond);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--red);border-radius:6px;padding:4px 12px; }
.hp-cap-card__body { padding:24px 24px 22px;display:flex;flex-direction:column;flex:1; }
.hp-cap-card__h { font-family:var(--fcond);font-size:20px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);margin:0 0 10px; }
.hp-cap-card__p { font-size:13.5px;color:var(--muted);line-height:1.75;margin-bottom:16px; }
.hp-cap-card__links { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;margin-top:auto; }
.hp-cap-card__links a { display:inline-block;padding:4px 11px;background:var(--snow);border:1px solid var(--grey);border-radius:20px;font-size:12px;font-weight:500;color:var(--ink);text-decoration:none;transition:all var(--ease); }
.hp-cap-card__links a:hover { background:rgba(237,28,36,.07);border-color:rgba(237,28,36,.25);color:var(--red); }

/* ══════════════════════════════════════════════════════════════
   SERVICES
══════════════════════════════════════════════════════════════ */
.hp-svcs__grid { display:grid;grid-template-columns:repeat(5,1fr);gap:16px; }
.hp-svc-item {
  display:flex;flex-direction:column;
  background:var(--snow);border:1px solid var(--grey);border-radius:14px;
  overflow:hidden;text-decoration:none;
  transition:border-color var(--ease),box-shadow var(--ease),transform var(--ease);
}
.hp-svc-item:hover { border-color:rgba(237,28,36,.3);box-shadow:0 12px 40px rgba(237,28,36,.08);transform:translateY(-4px); }
.hp-svc-item__img { width:100%;height:140px;background-size:cover;background-position:center;background-color:var(--grey);flex-shrink:0; }
.hp-svc-item__body { padding:20px 18px;display:flex;flex-direction:column;flex:1; }
.hp-svc-item__ico { width:36px;height:36px;border-radius:8px;background:rgba(237,28,36,.08);border:1px solid rgba(237,28,36,.14);display:flex;align-items:center;justify-content:center;color:var(--red);margin-bottom:12px;flex-shrink:0; }
.hp-svc-item__ico svg { width:18px;height:18px; }
.hp-svc-item__h { font-family:var(--fcond);font-size:16px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin:0 0 8px;line-height:1.2; }
.hp-svc-item__p { font-size:12.5px;color:var(--muted);line-height:1.65;margin-bottom:14px;flex:1; }
.hp-svc-item__cta { display:inline-flex;align-items:center;gap:6px;font-family:var(--fcond);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-top:auto; }
.hp-svc-item__cta svg { width:12px;height:12px; }

/* ══════════════════════════════════════════════════════════════
   QUALITY STATEMENT
══════════════════════════════════════════════════════════════ */
.hp-quality { background:var(--navy);padding:clamp(48px,6vw,80px) 0;position:relative; }
.hp-quality::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 100% at 50% 0%,rgba(237,28,36,.12) 0%,transparent 70%);pointer-events:none; }
.hp-quality__inner { position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px; }
.hp-quality__trust { display:flex;flex-wrap:wrap;gap:24px;justify-content:center; }
.hp-quality__trust-item { display:inline-flex;align-items:center;gap:8px;font-family:var(--fcond);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55); }
.hp-quality__trust-item svg { width:16px;height:16px;flex-shrink:0;color:var(--red); }
.hp-quality__text { font-size:16px;color:rgba(255,255,255,.72);line-height:1.85;max-width:780px; }

/* ══════════════════════════════════════════════════════════════
   INDUSTRIES — Red card + compact dot grid
══════════════════════════════════════════════════════════════ */
.hp-inds__layout { display:grid;grid-template-columns:260px 1fr;gap:clamp(24px,4vw,56px);align-items:start; }
.hp-inds__card { background:linear-gradient(145deg,var(--red-dk),var(--red));border-radius:18px;padding:32px 26px;position:relative;overflow:hidden; }
.hp-inds__card-deco { position:absolute;top:-40px;right:-40px;width:180px;pointer-events:none; }
.hp-inds__card-deco svg { width:100%;height:auto; }
.hp-inds__card-h { font-family:var(--fcond);font-size:28px;font-weight:900;letter-spacing:-.01em;text-transform:uppercase;color:#fff;margin:0 0 14px;line-height:1.05;position:relative; }
.hp-inds__card-p { font-size:13px;color:rgba(255,255,255,.8);line-height:1.72;margin-bottom:26px;position:relative; }

/* Industry grid — compact dot items */
.hp-inds__grid { display:grid;grid-template-columns:repeat(3,1fr);gap:2px; }
.hp-inds__item { display:flex;align-items:center;gap:12px;padding:14px 16px;text-decoration:none;border-radius:8px;transition:background var(--ease),transform var(--ease); }
.hp-inds__item:hover { background:rgba(237,28,36,.06);transform:translateX(4px); }
.hp-inds__item-dot { width:14px;height:14px;border-radius:50%;background:var(--red);flex-shrink:0;transition:transform var(--ease); }
.hp-inds__item:hover .hp-inds__item-dot { transform:scale(1.3); }
.hp-inds__item-label { font-family:var(--fcond);font-size:16px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);transition:color var(--ease); }
.hp-inds__item:hover .hp-inds__item-label { color:var(--red); }

/* ══════════════════════════════════════════════════════════════
   STATS BAR
══════════════════════════════════════════════════════════════ */
.hp-stats-bar { background:var(--white);border-top:1px solid var(--grey);border-bottom:1px solid var(--grey); }
.hp-stats-bar__grid { display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch; }
.hp-stats-bar__item { display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(28px,4vw,52px) 24px; }
.hp-stats-bar__n { font-family:var(--fcond);font-size:clamp(44px,6vw,76px);font-weight:900;color:var(--red);line-height:1;letter-spacing:-.03em;display:block; }
.hp-stats-bar__n sup { font-size:.45em;vertical-align:super; }
.hp-stats-bar__l { font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:6px;display:block; }
.hp-stats-bar__sep { width:1px;background:var(--grey);flex-shrink:0;align-self:stretch;margin:20px 0; }

/* ══════════════════════════════════════════════════════════════
   TESTIMONIALS — Left text + right 2 cards
══════════════════════════════════════════════════════════════ */
.hp-testi__layout { display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(40px,5vw,72px);align-items:start; }
.hp-testi__left .hp-h2 { margin-bottom:6px; }
.hp-testi__desc { font-size:15px;color:var(--muted);line-height:1.82;margin-top:4px; }
.hp-testi__cards { display:flex;flex-direction:column;gap:20px; }
.hp-testi-card {
  background:linear-gradient(145deg,var(--red-dk),var(--red));
  border-radius:18px;padding:32px 30px;display:flex;flex-direction:column;gap:18px;
  position:relative;overflow:hidden;box-shadow:0 16px 48px rgba(237,28,36,.22);
}
.hp-testi-card__quote { position:absolute;top:10px;right:22px;font-family:Georgia,serif;font-size:90px;line-height:1;color:rgba(255,255,255,.08);pointer-events:none; }
.hp-testi-card__stars { display:flex;gap:3px; }
.hp-testi-card__stars svg { width:18px;height:18px;flex-shrink:0; }
.hp-testi-card__text { font-size:15px;color:rgba(255,255,255,.92);line-height:1.8; }
.hp-testi-card__meta { display:flex;align-items:center;gap:14px;border-top:1px solid rgba(255,255,255,.15);padding-top:18px; }
.hp-testi-card__avatar { width:44px;height:44px;border-radius:50%;flex-shrink:0;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-family:var(--fcond);font-size:14px;font-weight:800;color:#fff;letter-spacing:.04em; }
.hp-testi-card__name { font-family:var(--fcond);font-size:15px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.04em;line-height:1.2; }
.hp-testi-card__role { font-size:12px;color:rgba(255,255,255,.6);margin-top:2px; }

/* ══════════════════════════════════════════════════════════════
   LOGO BAND — Real images
══════════════════════════════════════════════════════════════ */
.hp-logos-band { background:var(--snow);border-top:1px solid var(--grey);border-bottom:1px solid var(--grey);padding:clamp(32px,4vw,52px) 0; }
.hp-logos-band__h { font-family:var(--fcond);font-size:clamp(14px,1.8vw,20px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center;margin:0 0 28px; }
.hp-logos__wrap { position:relative;overflow:hidden; }
.hp-logos__wrap::before,.hp-logos__wrap::after { content:'';position:absolute;top:0;bottom:0;width:80px;z-index:1;pointer-events:none; }
.hp-logos__wrap::before { left:0;background:linear-gradient(to right,var(--snow),transparent); }
.hp-logos__wrap::after  { right:0;background:linear-gradient(to left,var(--snow),transparent); }
.hp-logos__track-wrap { overflow:hidden; }
.hp-logos__track { display:flex;align-items:center;white-space:nowrap;animation:hp-logos-scroll 35s linear infinite; }
.hp-logos__track:hover { animation-play-state:paused; }
.hp-logos__item { flex-shrink:0;padding:0 32px;display:flex;align-items:center; }
.hp-logos__item img { height:44px;width:auto;max-width:120px;object-fit:contain;filter:grayscale(100%);opacity:.55;transition:filter var(--ease),opacity var(--ease);display:block; }
.hp-logos__item:hover img { filter:grayscale(0%);opacity:1; }
@keyframes hp-logos-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ══════════════════════════════════════════════════════════════
   PORTFOLIO
══════════════════════════════════════════════════════════════ */
.hp-portfolio__grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }
.hp-port-card { display:block;position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;text-decoration:none;background:rgba(255,255,255,.05); }
.hp-port-card__img { width:100%;height:100%; }
.hp-port-card__img img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.4,0,.2,1); }
.hp-port-card:hover .hp-port-card__img img { transform:scale(1.06); }
.hp-port-card__placeholder { width:100%;height:100%;background:linear-gradient(135deg,#1a1d30,#0f1220); }
.hp-port-card__over { position:absolute;inset:0;background:linear-gradient(to top,rgba(8,10,22,.9) 0%,rgba(8,10,22,.3) 45%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:20px 18px;opacity:0;transition:opacity var(--ease); }
.hp-port-card:hover .hp-port-card__over { opacity:1; }
.hp-port-card__type { display:inline-block;padding:4px 10px;background:var(--red);border-radius:4px;font-family:var(--fcond);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:8px;align-self:flex-start; }
.hp-port-card__title { font-family:var(--fcond);font-size:17px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:5px; }
.hp-port-card__loc { display:flex;align-items:center;gap:5px;font-size:12px;color:rgba(255,255,255,.6); }
.hp-port-card__loc svg { width:12px;height:12px;flex-shrink:0; }
.hp-portfolio__cta { text-align:center;margin-top:44px; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width:1200px) {
  .hp-svcs__grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1100px) {
  .hp-legacy__inner { grid-template-columns:1fr;gap:44px; }
  .hp-caps__grid    { grid-template-columns:repeat(2,1fr); }
  .hp-inds__layout  { grid-template-columns:220px 1fr; }
  .hp-inds__grid    { grid-template-columns:repeat(2,1fr); }
  .hp-testi__layout { grid-template-columns:1fr;gap:36px; }
}
@media (max-width:900px) {
  .hp-features__grid  { grid-template-columns:1fr 1fr; }
  .hp-caps__grid      { grid-template-columns:1fr;max-width:540px;margin:0 auto; }
  .hp-svcs__grid      { grid-template-columns:repeat(2,1fr); }
  .hp-inds__layout    { grid-template-columns:1fr; }
  .hp-portfolio__grid { grid-template-columns:1fr 1fr; }
  .hp-stats-bar__grid { grid-template-columns:1fr; }
  .hp-stats-bar__sep  { display:none; }
  .hp-stats-bar__item { padding:24px;border-bottom:1px solid var(--grey); }
  .hp-stats-bar__item:last-child { border-bottom:none; }

  /* Hero: panel becomes more compact, video stays fully visible */
  .hp-hero { min-height: 520px; }
  .hp-hero__panel { max-width: 90vw; margin-bottom: 28px; }
}

@media (max-width:768px) {
  .hp-features__grid { grid-template-columns:1fr 1fr; }
  .hp-feat { border-right:none; border-bottom:1px solid var(--grey); }

  /* Tablet hero: shrink panel so video shows above it */
  .hp-hero { min-height: 100svh; align-items: flex-end; }
  .hp-hero__panel {
    margin: 0 16px 24px;
    max-width: none;
    padding: 20px 22px;
  }
  .hp-hero__bottom-fade { height: 65%; }
}

@media (max-width:640px) {
  /* Mobile: full-screen video, panel anchored to bottom */
  .hp-hero {
    height: 100svh;
    min-height: 500px;
    align-items: flex-end;
  }
  /* Video stays full-screen, always covers the whole viewport */
  .hp-hero__video {
    object-position: 65% center; /* shift slightly right for portrait video framing */
  }
  .hp-hero__bottom-fade { height: 70%; }
  .hp-hero__panel {
    margin: 0 12px 20px;
    padding: 18px 20px;
    max-width: none;
    /* Slightly more transparent so video is visible behind it */
    background: rgba(8,10,22,.48);
  }
  .hp-hero__h1 { font-size: clamp(28px,8vw,44px); }
  .hp-hero__sub { font-size: 13px; margin-bottom: 20px; }
  .hp-hero__cta { flex-direction: column; gap: 10px; }
  .hp-btn { justify-content: center; width: 100%; }

  /* Feature strip: 1 column on small screens */
  .hp-features__grid { grid-template-columns: 1fr; }
  .hp-feat { border-right: none; border-bottom: 1px solid var(--grey); }

  .hp-portfolio__grid { grid-template-columns: 1fr; }
  .hp-svcs__grid { grid-template-columns: 1fr; }
  .hp-inds__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width:480px) {
  .hp-feat__ico { width: 56px; height: 56px; }
  .hp-feat__ico img { width: 56px; height: 56px; }
  .hp-inds__grid { grid-template-columns: 1fr; }
}

/* =========================================
   FEATURED PRODUCTS SECTION
   ========================================= */
.hp-products { background: var(--navy); }

.hp-prod__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.hp-prod-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.hp-prod-card:hover {
  border-color: rgba(237,28,36,.5);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

/* Card image area */
.hp-prod-card__img {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 180px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
}
.hp-prod-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.hp-prod-card:hover .hp-prod-card__img img {
  transform: scale(1.06);
}
.hp-prod-card__placeholder {
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-prod-card__placeholder svg {
  opacity: .2;
}

/* Category badge */
.hp-prod-card__cat {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--red);
  color: #fff;
  font-family: var(--fcond);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  line-height: 1.4;
}

/* Card body */
.hp-prod-card__body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.hp-prod-card__title {
  font-family: var(--fcond);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin: 0 0 8px;
}
.hp-prod-card__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 14px;
  min-height: 20px;
}
.hp-prod-card__price .woocommerce-Price-amount { color: inherit; }
.hp-prod-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fcond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-top: auto;
  transition: color var(--ease);
}
.hp-prod-card:hover .hp-prod-card__cta { color: var(--red); }
.hp-prod-card__cta svg { width: 13px; height: 13px; flex-shrink: 0; transition: transform var(--ease); }
.hp-prod-card:hover .hp-prod-card__cta svg { transform: translateX(3px); }

/* Bottom CTAs */
.hp-products__cta {
  text-align: center;
  margin-top: 48px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Responsive: 2 columns on tablet */
@media (max-width: 960px) {
  .hp-prod__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* Responsive: 2 columns on mobile (slightly smaller) */
@media (max-width: 640px) {
  .hp-prod__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hp-prod-card__body { padding: 12px 12px 14px; }
  .hp-prod-card__title { font-size: 14px; }
  .hp-products__cta { flex-direction: column; align-items: center; }
  .hp-products__cta .hp-btn { width: 100%; max-width: 320px; justify-content: center; }
}

/* Responsive: 1 column on very small screens */
@media (max-width: 380px) {
  .hp-prod__grid { grid-template-columns: 1fr; }
}