/* ============================================================
   HERO QUICK QUOTE + COLOUR — Mathie Electrical homepage
   1. Aurora: slow teal/copper light moving through the hero
      so the black has depth and warmth instead of flatness.
   2. An always-open two-step questionnaire in the hero, no
      popup, no click to reveal. Answer, tap, done.
   ============================================================ */

/* ---------- 1. Colour ------------------------------------------------ */
.hero-aurora{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.hero-aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.hero-aurora .a1{width:56vw;height:56vw;left:-14vw;top:-18vw;background:radial-gradient(circle,rgba(0,168,158,.55),transparent 65%);animation:aur1 19s ease-in-out infinite alternate}
.hero-aurora .a2{width:44vw;height:44vw;right:-10vw;top:6vh;background:radial-gradient(circle,rgba(217,130,43,.34),transparent 65%);animation:aur2 23s ease-in-out infinite alternate}
.hero-aurora .a3{width:38vw;height:38vw;left:28vw;bottom:-16vw;background:radial-gradient(circle,rgba(0,133,125,.42),transparent 65%);animation:aur1 27s ease-in-out infinite alternate-reverse}
@keyframes aur1{from{transform:translate(0,0) scale(1)}to{transform:translate(9vw,6vh) scale(1.14)}}
@keyframes aur2{from{transform:translate(0,0) scale(1)}to{transform:translate(-7vw,8vh) scale(1.1)}}
/* warm the shade so the photo reads teal-navy, not void-black */
.hero .hero-shade{background:linear-gradient(178deg,rgba(4,10,12,.42) 0%,rgba(4,14,16,.6) 44%,rgba(2,8,10,.93) 78%,#04090b 100%),linear-gradient(64deg,rgba(0,133,125,.2),transparent 55%)!important}

/* ---------- 2. Layout: text left, questionnaire right ---------------- */
@media(min-width:1140px){
  .hero-content{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:44px;align-items:end;width:100%;max-width:1440px}
  .hero-txt{grid-column:1;min-width:0}
  /* card rides high-right: hangs from the top of the hero and hugs the edge */
  .hero-content > .hq{grid-column:2;grid-row:1;align-self:start;margin-top:-14px;justify-self:end;width:400px}
  /* flip to `questionnaire on the left` by adding class hq-left to .hero-content */
  .hero-content.hq-left .hero-txt{grid-column:2}
  .hero-content.hq-left > .hq{grid-column:1}
  /* the headline shares the row with a 400px card now, so it sizes
     to its column instead of the full viewport */
  .hero-content h1{font-size:clamp(3.6rem,7vw,8.2rem)}
  .hero-content .hero-badge{justify-self:start}
  /* one primary action per hero: the card leads, the slab stands down
     to its quiet links so we're not shouting twice */
  .hero-txt .cta-main{display:none}
  .hero-txt .cta-alt{margin-top:0}
}
@media(max-width:1139px){.hq{display:none}} /* mobile keeps the one-tap call-back button */

/* ---------- 3. The card ---------------------------------------------- */
.hq{
  position:relative;
  background:linear-gradient(168deg,#ffffff,#f2f6f5);
  border:1px solid rgba(255,255,255,.85);
  border-radius:16px;
  padding:24px 24px 22px;
  box-shadow:0 34px 90px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.9) inset;
  opacity:0;animation:hu .9s 1.3s var(--ease) both;
}
.hq::before{content:'';position:absolute;top:0;left:20px;right:20px;height:2px;
  background:linear-gradient(90deg,transparent,var(--cu,#D9822B) 25%,var(--teal2) 70%,transparent)}
.hq-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.hq-dot{width:9px;height:9px;border-radius:50%;background:var(--teal2);box-shadow:0 0 12px var(--teal2);animation:hqPulse 2.2s infinite}
@keyframes hqPulse{0%,100%{opacity:1}50%{opacity:.35}}
.hq h2{font-family:var(--fh);font-weight:800;font-size:1.42rem;letter-spacing:.05em;text-transform:uppercase;color:#101418;margin:0}
.hq-sub{font-family:var(--fb);font-size:.85rem;color:rgba(16,20,24,.6);margin:0 0 16px}

/* progress */
.hq-prog{display:flex;gap:6px;margin-bottom:16px}
.hq-prog i{flex:1;height:3px;border-radius:2px;background:rgba(16,20,24,.12);overflow:hidden;position:relative}
.hq-prog i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--teal),var(--teal2));transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.hq-prog i.on::after{transform:scaleX(1)}

/* steps */
.hq-step{display:none}
.hq-step.on{display:block;animation:hqIn .4s cubic-bezier(.16,1,.3,1)}
@keyframes hqIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

.hq-chips{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.hq-chip{
  display:flex;align-items:center;gap:9px;
  padding:12px 13px;
  background:#fff;
  border:1px solid rgba(16,20,24,.16);border-radius:10px;
  color:#1a2126;cursor:pointer;text-align:left;
  font-family:var(--fh);font-weight:600;font-size:.88rem;letter-spacing:.05em;text-transform:uppercase;
  transition:border-color .2s,background .2s,transform .2s var(--spring,cubic-bezier(.22,1.12,.36,1));
}
.hq-chip svg{flex:none;color:#00857d}
.hq-chip:hover{border-color:#00857d;background:rgba(0,168,158,.09);transform:translateY(-2px);box-shadow:0 6px 16px rgba(16,20,24,.1)}
.hq-chip.sel{border-color:#00857d;background:rgba(0,168,158,.14);box-shadow:0 0 0 1px #00857d inset}

.hq-field{margin-bottom:11px}
.hq-field input{
  width:100%;padding:12px 13px;
  background:#fff;color:#101418;
  border:1px solid rgba(16,20,24,.2);border-radius:9px;
  font-family:var(--fb);font-size:.98rem;
  transition:border-color .2s,box-shadow .2s;
}
.hq-field input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,168,158,.15)}
.hq-field input::placeholder{color:rgba(16,20,24,.38)}
.hq-picked{
  display:inline-flex;align-items:center;gap:7px;
  margin-bottom:13px;padding:6px 11px;border-radius:99px;
  background:rgba(0,168,158,.12);border:1px solid rgba(0,133,125,.45);
  font-family:var(--fh);font-weight:700;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:#00655f;
}
.hq-picked button{background:none;border:0;color:inherit;cursor:pointer;font-size:.95rem;line-height:1;padding:0;opacity:.7}
.hq-picked button:hover{opacity:1}

.hq-send{
  width:100%;padding:14px;margin-top:3px;
  border:0;border-radius:9px;cursor:pointer;
  background:linear-gradient(135deg,var(--teal),var(--teal2));color:var(--black);
  font-family:var(--fh);font-weight:800;font-size:.98rem;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 8px 24px rgba(0,168,158,.3);
  transition:transform .22s cubic-bezier(.22,1.12,.36,1),box-shadow .3s,opacity .2s;
}
.hq-send:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 13px 34px rgba(0,168,158,.44)}
.hq-send:disabled{opacity:.6;cursor:default}
.hq-alt{margin:12px 0 0;text-align:center;font-family:var(--fb);font-size:.8rem;color:rgba(16,20,24,.5)}
.hq-alt a{color:#00857d;text-decoration:none;font-weight:600}
.hq-err{margin-top:10px;padding:9px 12px;border-radius:8px;display:none;
  background:rgba(217,130,43,.12);border:1px solid rgba(196,112,30,.45);
  color:#8a4d0f;font-family:var(--fb);font-size:.84rem}
.hq-err.show{display:block}

.hq-done{display:none;text-align:center;padding:24px 0 14px}
.hq-done.show{display:block;animation:hqIn .4s cubic-bezier(.16,1,.3,1)}
.hq-done .hq-tick{width:54px;height:54px;margin:0 auto 14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--teal),var(--teal2));color:var(--black);
  box-shadow:0 0 34px rgba(0,168,158,.45)}
.hq-done h3{font-family:var(--fh);font-weight:800;font-size:1.3rem;letter-spacing:.05em;text-transform:uppercase;color:#101418;margin:0 0 8px}
.hq-done p{font-family:var(--fb);font-size:.9rem;line-height:1.55;color:rgba(16,20,24,.62);margin:0}
.hq-done p a{color:#00857d;text-decoration:none;font-weight:600}

@media(prefers-reduced-motion:reduce){
  .hero-aurora i{animation:none}
  .hq{animation-duration:.01s}
  .hq-step.on,.hq-done.show{animation:none}
  .hq-dot{animation:none}
}

/* ---------- Brands we install (homepage strip) ---------------------- */
.brands{padding:34px 0 8px}
.brands-l{font-family:var(--fh);font-weight:600;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.38);text-align:center;margin:0 0 16px}
.brands-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 34px}
.brands-row .bw{font-family:var(--fh);font-weight:700;font-size:1.06rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.34);transition:color .3s;white-space:nowrap}
.brands-row .bw:hover{color:var(--teal2)}
@media(max-width:640px){.brands-row{gap:9px 20px}.brands-row .bw{font-size:.9rem}}

/* ---------- Hero slideshow ------------------------------------------ */
.hero-slides{position:absolute;inset:0}
.hero-slide-wrap{position:absolute;inset:0;display:block}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease;will-change:opacity}
.hero-slide.act{opacity:1}
.hero-slide:nth-child(1){object-position:50% 38%}
.hero-slide:nth-child(2){object-position:60% 30%}
.hero-slide:nth-child(3){object-position:50% 50%}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}}

/* hamburger is a real button now */
button.hbg{background:none;border:0;padding:0;cursor:pointer}

/* ---------- Latest from the tools (Instagram grid) ------------------ */
.igfeed{padding:90px 0 70px}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.ig-tile{position:relative;display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--border,rgba(255,255,255,.09));isolation:isolate}
.ig-tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1),filter .5s}
.ig-tile:hover img{transform:scale(1.05);filter:saturate(1.08)}
.ig-cap{position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;
  background:linear-gradient(180deg,transparent 42%,rgba(3,5,6,.88));
  opacity:0;transition:opacity .4s}
.ig-tile:hover .ig-cap,.ig-tile:focus-visible .ig-cap{opacity:1}
.ig-cap-in{font-family:var(--fb);font-size:.83rem;line-height:1.5;color:rgba(255,255,255,.92)}
.ig-tile::after{content:'';position:absolute;top:12px;right:12px;width:22px;height:22px;opacity:.85;
  background:no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4.2"/><circle cx="17.3" cy="6.7" r="1.15" fill="white" stroke="none"/></svg>')}
@media(max-width:860px){.ig-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
@media(hover:none){.ig-cap{opacity:1;background:linear-gradient(180deg,transparent 62%,rgba(3,5,6,.85))}.ig-cap-in{font-size:.76rem}}