/* ============================================================
   HOME — EpoxyOn (engineering)  [template-parts/home-engineering.php]
   Fluid / rem-based (scales with the root font-size). Front page only.
   ============================================================ */

/* On the engineering home, the nav overlays the full-bleed hero */
body.home.site-engineering .site-header{
  position:absolute; top:0; left:0; right:0; z-index:20;
  background:transparent; border-bottom:0;
}

/* ---- Hero ---- */
.home-hero{
  min-height:40rem; display:flex; align-items:flex-end;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  color:#fff;
}
.hero-body{ padding-top:7.5rem; padding-bottom:4rem; }
.hero-headline, .hero-sub, .hero-ctas{ max-width:40rem; }
.hero-headline{ display:flex; flex-direction:column; gap:0.125rem; }
.hero-headline span{ font-family:var(--font-display); font-weight:800; letter-spacing:-.016em; line-height:1.02; }
.hero-headline .l1{ font-size:3.875rem; color:#fff; }
.hero-headline .l2{ font-size:3.875rem; color:var(--brand-accent); }
.hero-headline .l3{ font-size:1.6875rem; font-weight:700; letter-spacing:.01em; line-height:1.12; color:#fff; }
.hero-sub{ margin:1.375rem 0 0; color:#D7DDD0; font-size:0.9375rem; line-height:1.5; }
.hero-ctas{ display:flex; gap:0.875rem; margin-top:1.375rem; flex-wrap:wrap; }
.btn-outline{ background:transparent; color:#fff; border:1.4px solid #fff; }
.btn-outline:hover{ background:rgba(255,255,255,.12); }

/* ---- Why UQESH (dark) ---- */
.home-why{ padding-top:4rem; padding-bottom:2.5rem; }
.why-head{ max-width:47.5rem; display:flex; flex-direction:column; gap:0.625rem; }
.eyebrow-lg{ font-family:var(--font-display); font-weight:800; font-size:1.375rem; letter-spacing:.02em; color:#fff; margin:0; }
.why-statement{ color:var(--text-secondary); font-size:1.03rem; font-weight:500; line-height:1.4; margin:0; }
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.875rem; margin-top:1.875rem; }
.why-item{ display:flex; gap:0.8125rem; }
.why-icon{ color:var(--brand-accent); width:2.25rem; height:2.25rem; flex:none; }
.why-title{ color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.1875rem; margin:0 0 0.25rem; }
.why-desc{ color:var(--text-secondary); font-size:0.8125rem; line-height:1.45; margin:0; }

/* ---- Shared: light content bands + section headers ---- */
.home-services, .home-sectors, .home-projects, .home-tech{ background:var(--bg); color:var(--text-primary); }
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.375rem; }
.section-title{ font-family:var(--font-display); font-weight:800; font-size:1.375rem; letter-spacing:.015em; color:var(--text-primary); margin:0; }
.view-all{ font-family:var(--font-display); font-weight:700; font-size:0.781rem; letter-spacing:.04em; color:var(--text-primary); }
.view-all.accent{ color:var(--brand-accent); }
.view-all:hover{ color:var(--brand); }

/* ---- Services (light) ---- */
.home-services{ padding-top:2.75rem; padding-bottom:4.5rem; }
.svc-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.125rem; }
.svc-card{ display:flex; flex-direction:column; border:1px solid var(--line); transition:border-color .15s ease; }
.svc-img{ display:block; height:11.125rem; background-size:cover; background-position:center; }
.svc-txt{ display:flex; flex-direction:column; gap:0.3125rem; padding:0.8125rem 0.875rem 1rem; }
.svc-name{ font-family:var(--font-display); font-weight:700; font-size:0.9375rem; color:var(--text-primary); }
.svc-desc{ color:var(--text-secondary); font-size:0.781rem; line-height:1.4; }
.svc-card:hover{ border-color:var(--brand-accent); }

/* ---- Sectors (light) ---- */
.home-sectors{ padding-top:1.25rem; padding-bottom:3.25rem; }
.sector-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:0.875rem; }
.sector-tile{ min-height:18.125rem; border-radius:0.5rem; overflow:hidden; display:flex; align-items:flex-end; padding:0.75rem 0.875rem; background-size:cover; background-position:center; transition:transform .2s ease; }
.sector-tile:hover{ transform:translateY(-0.1875rem); }
.sector-label{ color:#fff; font-family:var(--font-display); font-weight:700; font-size:0.8125rem; }

/* ---- Colour System (dark accent) ---- */
.home-colour{ background:#1B1E1B; padding-block:3.25rem; }
.colour-inner{ display:flex; gap:3rem; align-items:flex-start; }
.colour-text{ width:21.25rem; flex:none; }
.colour-title{ color:#fff; font-family:var(--font-display); font-weight:800; font-size:1.375rem; margin:0 0 0.75rem; }
.colour-sub{ color:#A9B0A6; font-size:0.875rem; line-height:1.5; margin:0; }
.colour-grid{ flex:1; display:flex; flex-direction:column; gap:0.75rem; }
.colour-viewrow{ text-align:right; }
.view-colours{ color:#CFD4CB; font-family:var(--font-display); font-weight:700; font-size:0.75rem; letter-spacing:.06em; }
.swatch-row{ display:flex; gap:0.625rem; }
.swatch{ flex:1; height:3.875rem; border-radius:0.1875rem; }

/* ---- Projects (light) ---- */
.home-projects{ padding-top:3.5rem; padding-bottom:2.5rem; }
.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.125rem; }
.proj-card{ display:block; height:15rem; background-size:cover; background-position:center; border-radius:0.125rem; }

/* ---- Technical Support (light) ---- */
.home-tech{ padding-top:1rem; padding-bottom:4rem; }
.tech-title{ margin-bottom:1.625rem; }
.tech-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.875rem; }
.tech-item{ display:flex; gap:0.75rem; }
.tech-icon{ color:var(--text-primary); width:2.25rem; height:2.25rem; flex:none; }
.tech-name{ font-family:var(--font-display); font-weight:700; font-size:0.8125rem; letter-spacing:.04em; color:var(--text-primary); margin:0 0 0.25rem; }
.tech-desc{ color:var(--text-secondary); font-size:0.781rem; line-height:1.4; margin:0; }

/* ---- Get a Quote (dark) ---- */
.home-quote{ background-size:cover; background-position:center; padding-block:3.5rem; color:#fff; }
.quote-inner{ max-width:41.25rem; }
.quote-title{ font-family:var(--font-display); font-weight:800; font-size:1.875rem; color:#fff; margin:0 0 0.5rem; }
.quote-sub{ color:#C7CEC2; font-size:0.875rem; line-height:1.45; margin:0 0 1.375rem; }
.quote-form{ display:flex; flex-direction:column; gap:0.8125rem; }
.qf-row{ display:flex; gap:0.8125rem; }
.qf-row > *{ flex:1 1 0; min-width:0; }
.qf-row-2 > select{ flex:2 1 0; }   /* design: company 211 : project-type 435 ≈ 1:2 */
.quote-form input, .quote-form select, .quote-form textarea{
  font-family:var(--font-body); font-size:0.8125rem; color:#232925;
  background:#fff; border:0; border-radius:0.25rem; padding:0.8125rem 0.9375rem; width:100%;
}
.quote-form input::placeholder, .quote-form textarea::placeholder{ color:#8A8F88; font-size:0.719rem; font-weight:600; letter-spacing:.05em; }
.quote-form select{ color:#8A8F88; font-size:0.719rem; font-weight:600; letter-spacing:.05em; }
.qf-submit{ align-self:flex-start; width:auto; }

/* ---- Home responsive ---- */
@media (max-width:1100px){
  .svc-grid{ grid-template-columns:repeat(3,1fr); }
  .sector-grid{ grid-template-columns:repeat(3,1fr); }
  .why-grid, .tech-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  .hero-headline .l1, .hero-headline .l2{ font-size:2.75rem; }
  .hero-headline .l3{ font-size:1.25rem; }
  .colour-inner{ flex-direction:column; gap:1.5rem; }
  .colour-text{ width:auto; }
  .proj-grid{ grid-template-columns:1fr; }
  .svc-grid, .sector-grid{ grid-template-columns:1fr 1fr; }
  .qf-row{ flex-direction:column; }
}