/* ==========================================================================
   BRIGHT WAVE ELECTRIC — info / legal page layer.
   Loads AFTER assets/css/site.css and serves the four static document pages:
   privacy-policy, terms-conditions, about-us and contact-us. It adds only the
   layout those pages need — a photo-free hero with the quote form beside it,
   a sticky table of contents for the long legal documents, the doc section
   rhythm, and the image+copy blocks About Us / Contact Us use. Every colour,
   font, spacing step and rule comes from the site.css tokens; nothing new is
   introduced here.
   ========================================================================== */

/* ── breadcrumb (same component as the service and location layers) ──── */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:22px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute)}
.crumb a{color:var(--ink-mute);transition:color .22s var(--ease)}
.crumb .sep{color:var(--copper);opacity:.7}
.crumb [aria-current]{color:var(--copper)}

/* ── 01 · HERO — no photo; the quote form takes the right column ────── */
.info-hero{position:relative;z-index:2;display:grid;
  grid-template-columns:70px 1.24fr 1.06fr;gap:0 46px;align-items:start}
.info-hero h1{font-size:clamp(31px,4.3vw,58px)}
.info-hero .rail{min-height:380px}
.info-form{opacity:0;animation:fadeUp .95s var(--ease) 1.5s forwards}
.info-form .sheet{margin:0}

/* ── 02 · LONG DOCUMENT ─────────────────────────────────────────────── */
/* The contents list sits in the hero, under the buttons: it is exactly the
   block that balances a legal page's short hero copy against the tall quote
   form, and it shows the shape of the document before the reader scrolls. */
.doc-toc{margin-top:34px;border-top:2px solid var(--ink);padding-top:18px;
  opacity:0;animation:fadeUp .9s var(--ease) 1.6s forwards}
.doc-toc-h{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-mute);margin-bottom:12px;font-weight:400}
.doc-toc ol{counter-reset:toc;list-style:none;columns:2;column-gap:30px}
.doc-toc li{counter-increment:toc;break-inside:avoid}
.doc-toc a{display:flex;gap:10px;padding:7px 0;font-size:12.6px;line-height:1.4;
  color:var(--ink-soft);border-bottom:1px solid var(--line-soft);
  transition:color .22s var(--ease)}
.doc-toc a::before{content:counter(toc,decimal-leading-zero);flex:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--copper);
  padding-top:.3em;opacity:.75}

/* a legal document reads at a measure, not at the full shell width — the
   lists then finish close to where the paragraphs do */
.doc-body{min-width:0;margin-top:44px;max-width:920px}
.doc-sec{scroll-margin-top:calc(var(--bar) + 26px)}
.doc-sec+.doc-sec{margin-top:clamp(38px,4.6vh,56px);padding-top:clamp(30px,3.8vh,46px);
  border-top:1px solid var(--line-soft)}
.doc-sec>.h3{margin-bottom:18px}
.doc-sec .body-p+.body-p{margin-top:16px}
.doc-sec .body-p+.doc-list,.doc-sec .doc-list+.body-p{margin-top:20px}

/* the doc's own bullet lists */
.doc-list{border-top:1px solid var(--line)}
.doc-list li{position:relative;padding:13px 0 13px 28px;
  border-bottom:1px solid var(--line-soft);font-size:14.6px;line-height:1.62;
  color:var(--ink-soft)}
.doc-list li::before{content:"";position:absolute;left:2px;top:1.4em;width:11px;height:2px;
  background:var(--copper)}
.doc-list--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;
  border-top:0}
.doc-list--2 li{border-top:1px solid var(--line-soft)}

/* the closing Contact block, as the homepage's leader plate */
.doc-contact{margin-top:26px}
.doc-contact .ld .v a{color:var(--copper);border-bottom:1px solid rgba(150,80,31,.35)}
.doc-contact .ld .k{flex:none}
@media(hover:hover){.doc-toc a:hover{color:var(--copper)}}

/* ── About / Contact · image beside copy ────────────────────────────── */
.info-media{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;
  margin-top:38px}
.info-media.flip>.info-media-copy{order:2}
.info-media .ip-shot{aspect-ratio:4/3}
.info-media .body-p+.body-p{margin-top:16px}

/* ── generic info list, two columns like the service pages ──────────── */
.info-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;
  margin-top:28px}
.info-list li{position:relative;padding:13px 0 13px 26px;
  border-bottom:1px solid var(--line-soft);font-size:14.6px;line-height:1.62;
  color:var(--ink-soft)}
.info-list li::before{content:"";position:absolute;left:2px;top:1.42em;width:11px;height:2px;
  background:var(--copper)}

/* ── hours / reach-us plate pairing ─────────────────────────────────── */
.info-split{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:start;
  margin-top:34px}
.info-split .plate{margin-top:0}
.info-split .leaders .v{text-align:right}
.info-split .leaders .v a{color:var(--copper)}

/* ── closing band (reuses the homepage .emg strip with a photo) ─────── */
.info-emg{margin-top:0}
.info-emg .kicker{margin-bottom:20px}
.info-emg .kicker .num{color:var(--copper-bright)}
.info-emg .kicker .rule{background:var(--line-lt)}
.info-emg .kicker .lbl{color:#a79c88}
.info-emg .h2{color:var(--paper);margin-bottom:18px}
.info-emg .h2 .cop{color:var(--copper-bright)}
.info-emg p{color:#c9c0ad;font-size:15.3px;line-height:1.72;max-width:60ch}
.info-emg p+p{margin-top:15px}
.info-emg .btn--primary{border-color:var(--copper-bright);color:var(--copper-bright)}
.info-emg .acts{animation:none;opacity:1;margin-top:26px}

/* ── closing CTA column pair (About Us) ─────────────────────────────── */
.info-cta{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:start}
.info-cta .body-p+.body-p{margin-top:18px}
.info-cta a.tel{color:var(--copper);border-bottom:1px solid rgba(150,80,31,.35)}

/* ── responsive ─────────────────────────────────────────────────────── */
@media(max-width:1080px){
  .info-hero{grid-template-columns:70px 1.1fr 1fr;gap:0 34px}
}
@media(max-width:980px){
  /* once the hero stacks the form leads, the copy follows — an `order`
     swap only, so the H1 still precedes the form in the DOM. */
  .info-hero{grid-template-columns:1fr;gap:0}
  .info-hero .rail{display:none}
  .info-form{order:-1;margin:0 0 40px;animation-delay:1.2s}
  .info-hero .hero-lead{order:0}
  .info-media,.info-split,.info-cta{grid-template-columns:1fr;gap:34px}
  .info-media.flip>.info-media-copy{order:1}
  .info-media figure{order:-1}
  .info-emg{grid-template-columns:1fr}
  .info-emg .emg-shot{min-height:230px;order:1}
  .info-emg .emg-body{order:2}
}
@media(max-width:760px){
  .doc-toc ol{columns:1}
  .doc-list--2,.info-list{grid-template-columns:1fr;gap:0}
  .doc-list--2{border-top:1px solid var(--line)}
  .doc-list--2 li{border-top:0}
  .info-split .leaders .v{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .info-form,.doc-toc{opacity:1!important;transform:none!important}
}

/* ── link contrast: the site default is `inherit`, which reads as body ink ─ */
.info-hero .hero-lede a,.doc-sec .body-p a,.doc-sec .doc-list a,
.info-media-copy .body-p a{color:var(--copper);
  border-bottom:1px solid rgba(150,80,31,.35)}

/* ── the doc's one-line opening hours, given the plate's display weight ── */
.info-hours{padding-top:20px;font-family:var(--grot);font-weight:700;
  text-transform:uppercase;font-size:clamp(18px,2.1vw,25px);line-height:1.22;
  letter-spacing:-.015em}
.info-hours .cop{color:var(--copper)}
.info-reach{max-width:640px;margin-top:22px}

/* narrow screens: the dotted leader has no room left, so the doc's
   "Label: value" lines stack instead of squeezing the value off the edge */
@media(max-width:620px){
  .doc-contact .ld{display:block}
  .doc-contact .ld .dots{display:none}
  .doc-contact .ld .v{display:block;margin-top:5px;overflow-wrap:anywhere}
  .info-split .leaders .v{text-align:left}
}

/* a doc list set beside a photo drops to one column, and the pair aligns
   from the top rather than centring on the taller of the two */
.info-media--top{align-items:start}
.info-list--1{grid-template-columns:1fr;margin-top:20px}