/* ============================================================
   Sparkez Electrical — homepage hero (index.html only)
   Desktop ≥981px : full-bleed photo + L→R gradient + glass form
   Mobile  ≤980px : clean photo anchored to the buttons, dark panel
   Type           : Fraunces 700 (display) + Source Sans 3 (text)
   Scale          : Major Third, base 1rem = 16px, ratio 1.25
   All font sizes in rem so browser zoom / Dynamic Type scale.
   ============================================================ */

/* Tokens are scoped to the hero + its header so they cannot leak
   into the rest of index.html (which uses the site's own palette).
   Note --orange is deliberately re-pointed inside this scope only,
   so the shared .btn-primary picks up the hero's action colour. */
/* Brand palette — sampled directly from the logo:
   navy #001871 (45% of logo) · white #ffffff (43%) · orange #fa4c03 (4%).
   No gold/brass anywhere. White on brand navy = 15.3:1 contrast. */
.vhero,
.site-header.hero-over{
  --navy-900:#000a24;   /* deepest ground — hero fallback, dark sections */
  --navy-800:#00124a;   /* mobile form panel                            */
  --navy:#001871;       /* brand navy, straight from the logo           */
  --white:#ffffff;
  --white-70:rgba(255,255,255,.74);
  --white-45:rgba(255,255,255,.45);
  --orange:#fa4c03;     /* brand orange, straight from the logo         */
  --orange-d:#d93f02;
  --photo-blend:#302e2a;/* = the photo's own top-edge colour, so it blends seamlessly */

  --glass:rgba(0,0,0,.18);
  --glass-line:rgba(255,255,255,.22);
  --field:rgba(0,0,0,.30);

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;

  /* Major-Third ladder */
  --fs-caption:.75rem;      /* 12px   */
  --fs-label:.8125rem;      /* 13px   */
  --fs-small:.875rem;       /* 14px   */
  --fs-nav:.90625rem;       /* 14.5px */
  --fs-btn:.96875rem;       /* 15.5px */
  --fs-body:1rem;           /* 16px   */
  --fs-body-lg:1.125rem;    /* 18px   */
  --fs-form-title:1.875rem; /* 30px   */
  --fs-display-min:2.875rem;/* 46px   */
  --fs-display-max:4.768rem;/* 76.3px — true Major-Third step; largest size Fraunces 700 holds on 2 lines */

  /* vertical rhythm — evenly stepped, same ladder */
  --sp-3:1.125rem;   /* 18px */
  --sp-5:1.75rem;    /* 28px */
  --sp-6:2.1875rem;  /* 35px */
}

/* ---------- header over the photo ---------- */
.site-header.hero-over{
  position:absolute;top:0;left:0;right:0;z-index:5;
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;
}
.site-header.hero-over .header-inner{flex-wrap:wrap;row-gap:var(--space-2)}
.site-header.hero-over .brand-name{color:var(--white);font-family:var(--sans);font-weight:600}
.site-header.hero-over .brand-name span{color:var(--orange)}
.site-header.hero-over .nav a,
.site-header.hero-over .nav .dropdown>button{
  font-family:var(--sans);font-weight:400;font-size:var(--fs-nav);color:var(--white-70);letter-spacing:0;
}
.site-header.hero-over .nav a:hover,
.site-header.hero-over .nav .dropdown>button:hover,
.site-header.hero-over .nav a[aria-current="page"]{color:var(--white)}
.site-header.hero-over .header-quote{
  font-family:var(--sans);font-weight:600;font-size:var(--fs-btn);letter-spacing:0;
  background:var(--orange-ink);color:#fff;border-radius:999px;padding:.69em 1.16em;
}
.site-header.hero-over .header-quote:hover{background:var(--orange-ink-d)}
.site-header.hero-over .nav-toggle span{background:var(--white)}
.site-header.hero-over .nav .header-fb{color:var(--white)}
.site-header.hero-over .nav .header-fb:hover{background:var(--orange);color:#fff}
.site-header.hero-over .dropdown-menu a{font-family:var(--sans);color:var(--ink)}
.site-header.hero-over .dropdown-menu a:hover{color:var(--orange-ink)}

/* ---------- hero shell ---------- */
.vhero{
  position:relative;min-height:100svh;display:grid;align-items:center;
  overflow:hidden;isolation:isolate;
  background:var(--navy-900);color:var(--white);font-family:var(--sans);
}
.vhero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:url(../images/hero-photo-desktop.jpg);
  background-size:cover;background-position:center 78%;
}
.vhero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.56) 30%, rgba(0,0,0,.14) 58%, rgba(0,0,0,0) 80%),
    linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 76%, rgba(0,0,0,.28) 100%);
}
.vhero-wrap{
  /* width:100% is required: .vhero is a grid and auto margins alone
     suppress stretch, shrinking this to max-content. */
  width:100%;max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:1.22fr .78fr;gap:clamp(32px,5vw,80px);
  padding:calc(120px + env(safe-area-inset-top,0px)) var(--gutter) 72px;
}

/* ---------- copy ---------- */
.vhero-copy h1{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(var(--fs-display-min),5.4vw,var(--fs-display-max));
  line-height:1.0;letter-spacing:-.012em;
  margin:0 0 var(--sp-3);color:var(--white);
  max-width:13ch;              /* holds 2 lines, no single-word orphan */
  text-wrap:balance;
}
.vhero-copy .vhero-sub{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(.8125rem,.95vw,.875rem);
  line-height:1.4;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange-lift);margin:0 0 var(--sp-5);
}
.vhero-copy p{
  font-weight:400;
  font-size:clamp(var(--fs-body),1.15vw,var(--fs-body-lg));
  line-height:1.7;letter-spacing:.006em;  /* light-on-dark compensation */
  max-width:52ch;color:var(--white-70);margin:0 0 var(--sp-6);
}

/* ---------- buttons ---------- */
.vhero-actions{display:flex;gap:var(--space-3)}
/* Call button — identical treatment to "Get a quote" and "Send enquiry" */
.vhero .call{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  padding:.97em 1.42em;border:0;border-radius:999px;
  background:var(--orange-ink);color:#fff;text-decoration:none;
  font-family:var(--sans);font-weight:600;font-size:var(--fs-btn);letter-spacing:0;
}
.vhero .call svg{width:1em;height:1em;stroke:#fff;fill:none;stroke-width:1.8;flex:none}
.vhero .call:hover{background:var(--orange-ink-d)}
.vhero .quote-link{display:none}
.vhero .mobile-photo{display:none}

.vhero-panel-wrap{display:contents}

/* ---------- form panel (keeps .form-card so main.js + Formspree still work) ---------- */
.vhero .form-card{
  background:var(--glass);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  border:1px solid var(--glass-line);border-radius:14px;padding:var(--space-5);
  box-shadow:0 30px 60px -36px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
}
.vhero .form-head h2{
  font-family:var(--serif);font-weight:600;font-size:1.5rem;
  line-height:1.1;letter-spacing:-.005em;margin:0 0 var(--space-1);color:var(--white);
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.vhero .form-head p{
  margin:0 0 var(--space-4);font-weight:400;font-size:var(--fs-small);
  line-height:1.5;color:var(--white-70);
}
.vhero .field{margin-bottom:var(--space-3)}
.vhero .field label{
  display:block;font-family:var(--sans);font-weight:400;font-size:var(--fs-label);
  line-height:1.4;color:var(--white-70);margin:0 0 var(--space-1);
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.vhero .field .req{color:var(--orange);font-style:normal}
.vhero .field input,
.vhero .field textarea{
  width:100%;background:var(--field);border:1px solid var(--glass-line);border-radius:8px;
  color:var(--white);padding:.68em .85em;
  font-family:var(--sans);font-weight:400;
  font-size:var(--fs-body);           /* 16px floor — stops iOS zoom-on-focus */
  line-height:1.5;outline:none;
}
.vhero .field textarea{min-height:4.25rem;resize:vertical}
.vhero .field input::placeholder,
.vhero .field textarea::placeholder{color:rgba(255,255,255,.42)}
.vhero .field input:focus,
.vhero .field textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(250,76,3,.28)}
.vhero form button[type="submit"]{
  width:100%;background:var(--orange-ink);color:#fff;border:0;border-radius:999px;
  padding:.82em 1.16em;font-family:var(--sans);font-weight:600;font-size:var(--fs-btn);
  letter-spacing:0;cursor:pointer;
}
.vhero form button[type="submit"]:hover{background:var(--orange-ink-d)}
.vhero .form-note{
  margin:var(--space-3) 0 0;text-align:center;font-size:var(--fs-caption);
  line-height:1.5;color:rgba(255,255,255,.55);font-weight:400;
}
.vhero .form-error{color:#ffb4a6;text-align:center}
/* success state (shown by main.js) */
.vhero .form-success a{color:var(--orange-lift)}
.vhero .form-success h3{font-family:var(--serif);font-weight:600;font-size:1.5rem;line-height:1.1;color:var(--white)}
.vhero .form-success p{font-weight:400;font-size:var(--fs-small);line-height:1.6;color:var(--white-70)}

/* ---------- focus visibility — white reads on navy and on orange ---------- */
.vhero a:focus-visible,
.vhero button:focus-visible,
.vhero input:focus-visible,
.vhero textarea:focus-visible,
.site-header.hero-over a:focus-visible,
.site-header.hero-over button:focus-visible{outline:2px solid var(--white);outline-offset:3px;border-radius:4px}

/* ============================================================
   Mobile / tablet ≤980px — no gradient, photo anchored to buttons
   ============================================================ */
@media (max-width:980px){
  .vhero{display:block;min-height:0;overflow:hidden;background:var(--photo-blend)}
  .vhero::before,.vhero::after{display:none}
  .vhero-wrap{display:block;width:auto;padding:0}

  .vhero-copy{position:relative;z-index:1;padding:calc(104px + env(safe-area-inset-top,0px)) var(--gutter) 0}
  .vhero-copy h1{
    font-size:clamp(2.75rem,12.5vw,3.5rem);   /* 44 → 56px */
    max-width:none;text-shadow:0 2px 18px rgba(0,0,0,.55);
  }
  .vhero-copy .vhero-sub{font-size:clamp(.75rem,3.2vw,.8125rem);text-shadow:0 1px 10px rgba(0,0,0,.6)}
  .vhero-copy p{
    max-width: 62ch;margin-bottom:var(--space-5);color:var(--white);
    text-shadow:0 1px 14px rgba(0,0,0,.7);
  }

  .vhero-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
  .vhero .quote-link{
    display:inline-flex;align-items:center;border-radius:999px;
    background:var(--orange-ink);color:#fff;text-decoration:none;
    font-family:var(--sans);font-weight:600;
  }
  .vhero .quote-link:hover{background:var(--orange-ink-d)}
  .vhero .call,.vhero .quote-link{justify-content:center;padding:.9em .77em;font-size:var(--fs-btn);white-space:nowrap}

  /* photo: 128vw wide, centred, pulled up so the lit niche lands just
     under the buttons. Anchored to the buttons via the image's own
     aspect ratio (1673/900 = 1.8592) — never to viewport height, so it
     lands identically on every phone and in in-app browsers. */
  .vhero .mobile-photo{
    display:block;position:relative;z-index:0;
    margin:calc(-0.6701 * 1.28 * 1.8592 * 100vw - 40px) 0 0 -14vw;
    width:128vw;
  }
  .vhero .mobile-photo img{display:block;width:100%;height:auto}

  /* phone: no inline form — the hero CTA goes to the contact page form instead */
  .vhero-panel-wrap{display:none}
}

@media (prefers-reduced-motion: reduce){
  .vhero *,.site-header.hero-over *{transition:none!important;animation:none!important}
}

/* ---------- mobile header corrections ----------
   The site's mobile nav drops down as an opaque white panel, so the
   over-photo white link colours must revert inside it. The header's
   "Get a quote" is hidden on mobile (it collided with the wordmark and
   the hero already offers the same button next to Call). */
@media (max-width:980px){
  .site-header.hero-over .header-quote{display:none}
  .site-header.hero-over .nav-toggle span{background:var(--white)}
}
/* 860px, not 980 — this is where the nav actually becomes the opaque
   white drop-down panel, so the over-photo white link colours must
   revert exactly here and not 120px early. */
@media (max-width:860px){
  .site-header.hero-over .nav{background:#fff}
  .site-header.hero-over .nav a,
  .site-header.hero-over .nav .dropdown>button,
  .site-header.hero-over .nav a[aria-current="page"]{
    color:var(--ink);font-family:var(--sans);font-size:1.05rem;
  }
  .site-header.hero-over .nav a:hover,
  .site-header.hero-over .nav .dropdown>button:hover{color:#fc4c02}
  .site-header.hero-over .nav .header-fb{color:var(--ink)}
}

/* ============================================================
   Contact page — same hero treatment as the homepage, with the
   enquiry form as the subject rather than a secondary panel.
   Differences from the homepage hero, all deliberate:
     · the photo stays as the background at every width (the
       homepage swaps to a separate anchored image on mobile)
     · the form is NEVER hidden — on this page it IS the page
   ============================================================ */
.contact-hero::before{background-image:url(../images/contact-hero.jpg);background-position:center 72%}
.contact-hero .vhero-sub{margin:0 0 var(--sp-3)}
.contact-hero .vhero-copy h1{max-width:14ch}
.contact-hero .breadcrumb{margin-bottom:var(--sp-5)}
.contact-hero .quote-aside{margin-top:var(--sp-6)}
.contact-hero .quote-aside a,.contact-hero .quote-aside .row{color:var(--white)}
.contact-hero .quote-aside .ic{background:rgba(255,255,255,.12)}
.contact-hero .quote-aside a:hover .ic{background:var(--orange-ink)}
.contact-hero .quote-aside small{color:#fff}
.contact-hero .quote-aside small a{color:#fff}

@media (max-width:980px){
  /* The homepage hides its photo and form here — this page keeps both. */
  .contact-hero{background:var(--ink-2)}          /* same navy as the footer — the form runs into it */
  /* The photo backs the copy block itself rather than the whole section, so
     its bottom edge always lands exactly where the form starts — whatever the
     copy length or viewport width. No overlay, as on the homepage photo. */
  .contact-hero::before,.contact-hero::after{display:none}
  .contact-hero .vhero-copy{
    background-image:url(../images/contact-hero-mobile.jpg);  /* 200KB, not the 1.1MB desktop file */
    background-size:cover;
    background-position:center 62%;
    padding-bottom:var(--sp-6);
  }
  /* the form reads as part of the ground, not a card floating on it */
  .contact-hero .form-card{
    background:var(--ink-2);
    border:1px solid rgba(255,255,255,.09);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:none;
  }
  .contact-hero .vhero-panel-wrap{display:block;margin-top:0}
  .contact-hero .mobile-photo{display:none}
}