/* ==========================================================================
   Nolah Electrical
   Design notes:
   - One typeface (Archivo variable), using WIDTH as the contrast axis rather
     than a second family. Display type is expanded; body sits at normal width.
   - Amber is a graphic accent only. It never carries text on a light
     background, where its contrast ratio is too low to read.
   - The hero "busbar" is the one bold device: a single-line-diagram motif
     borrowed from switchboard schedules. Everything else stays quiet.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  /* Surfaces and text. Neutrals carry a blue cast taken from the logo
     rather than being pure grey. */
  --ink:        #06162E;
  --ink-700:    #0E2951;
  --ink-500:    #1C3A63;
  --steel:      #3A4F6B;
  --mute:       #56687F;
  --line:       #D7DFEA;
  --line-soft:  #E8EEF5;
  --wash:       #F2F6FB;
  --paper:      #FFFFFF;

  /* Brand blue, sampled from the logo. --brand clears AA both as a fill
     behind white text and as text on white, so one value covers buttons,
     links and icons. --brand-bright is its counterpart on dark surfaces. */
  --brand:        #0A5FC4;
  --brand-700:    #0049A6;
  --brand-bright: #4D9BFF;
  --brand-pale:   #A5D1FF;
  --brand-dim:    rgba(10, 95, 196, .16);

  /* Type */
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --measure: 68ch;

  /* Rhythm */
  --gap:    clamp(1rem, 2.5vw, 1.75rem);
  --bay:    clamp(3.5rem, 8vw, 6.5rem);
  --radius: 3px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variation-settings: 'wght' 400, 'wdth' 100;
  color: var(--steel);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  color: var(--ink);
  margin: 0 0 .6em;
  line-height: 1.12;
  letter-spacing: -.022em;
  font-variation-settings: 'wght' 700, 'wdth' 108;
}

h1 { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.15rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.3rem); }
h3 { font-size: 1.2rem; font-variation-settings: 'wght' 650, 'wdth' 104; }
h4 { font-size: 1.02rem; font-variation-settings: 'wght' 650, 'wdth' 100; }

p { margin: 0 0 1.1rem; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration-color: var(--brand-700);
    text-underline-offset: .18em; }
a:hover { color: var(--ink-500); }

strong, b { font-variation-settings: 'wght' 650, 'wdth' 100; color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}
.hero :focus-visible, .page-head :focus-visible, .bay--ink :focus-visible,
.site-footer :focus-visible, .drawer :focus-visible, .utility :focus-visible {
  outline-color: var(--brand-bright);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--ink); color: #fff; padding: .85rem 1.25rem;
}
.skip-link:focus { left: .5rem; top: .5rem; color: #fff; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 1.25rem; }
.bay  { padding-block: var(--bay); }
.bay--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.bay--wash  { background: var(--wash); }
.bay--ink   { background: var(--ink); color: #AFBDCE; }
.bay--ink h2, .bay--ink h3, .bay--ink h4 { color: #fff; }

.lede { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.55;
        color: var(--ink-500); max-width: 58ch; }
.bay--ink .lede { color: #B9C6D6; }

/* Section opener: a short amber rule, not a tracked-out caps label. */
.opener { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.opener::before {
  content: ""; display: block; width: 2.5rem; height: 3px;
  background: var(--brand); margin-bottom: 1.1rem;
}
.opener h2 { margin-bottom: .55rem; }
.opener--mid { text-align: center; }
.opener--mid::before { margin-inline: auto; }
.opener--mid .lede { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem; padding: .85rem 1.5rem; border: 2px solid transparent;
  border-radius: var(--radius); font: inherit; font-size: 1rem;
  font-variation-settings: 'wght' 650, 'wdth' 100;
  letter-spacing: -.01em; text-decoration: none; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--brand { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn--brand:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }

/* Used on the dark hero and page headers, where a blue button on a blue
   ground would not carry enough separation. */
.btn--white { background: #fff; color: var(--ink); border-color: #fff; }
.btn--white:hover { background: var(--brand-pale); border-color: var(--brand-pale); color: var(--ink); }

.btn--ink   { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--ink:hover   { background: var(--ink-700); border-color: var(--ink-700); color: #fff; }

.btn--line  { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--line:hover  { border-color: var(--ink); color: var(--ink); }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.utility {
  background: var(--ink); color: #9DACC0; font-size: .82rem;
  padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.utility .wrap { display: flex; justify-content: space-between;
                 align-items: center; gap: 1rem; flex-wrap: wrap; }
.utility a { color: #fff; text-decoration: none; }
.utility a:hover { color: var(--brand-bright); }
.utility .licence { display: inline-flex; align-items: center; gap: .45rem; }
.utility .licence::before {
  content: ""; width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--brand-bright); flex: none;
}

.masthead {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.masthead .wrap { display: flex; align-items: center; gap: 1.25rem;
                  min-height: 74px; }

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none;
         margin-right: auto; flex: none; }
.brand img { max-height: 46px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text .nm { font-size: 1.22rem; color: var(--ink);
                  font-variation-settings: 'wght' 720, 'wdth' 112;
                  letter-spacing: -.025em; }
.brand-text .sub { font-size: .7rem; color: var(--mute);
                   font-variation-settings: 'wght' 500, 'wdth' 100; }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  padding: .55rem .8rem; border-radius: var(--radius); text-decoration: none;
  color: var(--ink-500); font-size: .97rem;
  font-variation-settings: 'wght' 550, 'wdth' 100;
  position: relative;
}
.nav a:hover { color: var(--ink); background: var(--wash); }
.nav a[aria-current] { color: var(--ink); }
.nav a[aria-current]::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .22rem;
  height: 2px; background: var(--brand);
}
.nav-toggle { display: none; }

@media (max-width: 991px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; gap: .5rem;
                background: none; border: 1px solid var(--line);
                border-radius: var(--radius); padding: .6rem .85rem;
                color: var(--ink); font: inherit; font-size: .95rem; cursor: pointer; }
  .masthead .btn-quote { display: none; }
}
@media (min-width: 992px) { .nav-toggle { display: none; } }

/* Offcanvas menu */
.drawer { background: var(--ink); color: #fff; }
.drawer .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.12); }
.drawer .offcanvas-title { color: #fff; font-variation-settings: 'wght' 650, 'wdth' 108; }
.drawer .btn-close { filter: invert(1) grayscale(1); opacity: .8; }
.drawer nav a {
  display: block; padding: .8rem 0; color: #CBD6E3; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.08); font-size: 1.05rem;
}
.drawer nav a:hover, .drawer nav a[aria-current] { color: var(--brand-bright); }
.drawer .sub-links a { padding-left: 1rem; font-size: .95rem; color: #9DACC0; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; background: var(--ink); color: #C2CFDE;
  overflow: hidden; isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture { display: contents; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* The equipment sits on the right of the photo; anchor there so narrower
     screens crop the empty left side rather than the switchboard. */
  object-position: right center;
}

/* The supplied photo is already graded to navy on its left, so on wide
   screens the overlay only reinforces the text column and leaves the
   equipment untouched. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* Bottom fade, so the credential strip always sits on dark rather than
       on the pipework that runs down the lower edge of the photo. */
    linear-gradient(180deg, rgba(5,20,42,0) 58%, rgba(5,20,42,.88) 100%),
    /* Side fade covering the headline, which on laptops reaches across the
       switchboard door. Clears fully before the comms cabinet. */
    linear-gradient(90deg,
      rgba(5,20,42,.92) 0%, rgba(5,20,42,.84) 36%, rgba(5,20,42,.58) 56%,
      rgba(5,20,42,.18) 74%, rgba(5,20,42,0) 88%);
}

/* Matches the photo's own left edge, so on screens wider than the image
   there is no visible seam where it ends. */
.hero--photo { background: #05142A; }

/* Below desktop the text sits on top of the equipment, so it needs a much
   firmer wash to stay readable. */
@media (max-width: 991px) {
  .hero__media img { object-position: 78% center; }
  .hero__media::after {
    background: linear-gradient(180deg,
      rgba(5,20,42,.70) 0%, rgba(5,20,42,.78) 50%, rgba(5,20,42,.94) 100%);
  }
}
/* Schematic motif, drawn when there is no photograph yet. */
.hero__grid {
  position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 85% 70% at 72% 35%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 72% 35%, #000 20%, transparent 78%);
}
.hero__inner { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 5vw, 3.5rem); }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .9rem; color: var(--brand-bright); margin-bottom: 1.35rem;
  font-variation-settings: 'wght' 550, 'wdth' 100;
}
.hero__eyebrow::before {
  content: ""; width: 1.75rem; height: 2px; background: var(--brand-bright); flex: none;
}

.hero h1 {
  color: #fff; max-width: 17ch;
  font-size: clamp(2.5rem, 1.1rem + 4.8vw, 4.5rem);
  line-height: 1.02; letter-spacing: -.035em;
  font-variation-settings: 'wght' 720, 'wdth' 115;
  margin-bottom: 1.25rem;
  /* Evens out the line lengths so no single word is left stranded on the
     last line. Browsers without support simply wrap normally. */
  text-wrap: balance;
}
.hero__sub { font-size: clamp(1.05rem, 1rem + .45vw, 1.28rem); color: #B5C3D4;
             max-width: 50ch; margin-bottom: 2rem; line-height: 1.55; }

/* The busbar: a single-line-diagram rule with credentials dropping off it. */
.busbar { border-top: 2px solid var(--brand-bright); margin-top: clamp(2.5rem, 6vw, 4rem); }
.busbar__row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.busbar__item { position: relative; padding: 1.5rem 1.25rem 1.6rem 0; }
.busbar__item::before {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 1.05rem;
  background: var(--brand-bright);
}
.busbar__item + .busbar__item { padding-left: 1.25rem; }
.busbar__item + .busbar__item::before { left: 0; }
.busbar__k { display: block; color: #fff; font-size: 1rem; line-height: 1.3;
             font-variation-settings: 'wght' 650, 'wdth' 104; margin-bottom: .2rem; }
.busbar__v { display: block; color: #8EA0B6; font-size: .86rem; line-height: 1.4; }

@media (max-width: 767px) {
  .busbar__row { grid-template-columns: repeat(2, 1fr); }
  .busbar__item, .busbar__item + .busbar__item { padding: 1.1rem 1rem 1.2rem; padding-left: .9rem; }
  .busbar__item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */
/* Separate cards rather than one joined grid: with photos, each service
   reads as its own object. */
.svc-grid {
  display: grid; gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Two across on tablets, one on phones. Six services divide evenly into
   three and two, so no row is ever left with a gap in it. */
@media (max-width: 991px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } }

.svc {
  --card-radius: 8px;
  display: flex; flex-direction: column; min-width: 0;
  background: var(--paper); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--card-radius);
  overflow: hidden;
  /* A faint shadow only, so the cards sit on the page without looking like
     floating panels. */
  box-shadow: 0 1px 2px rgba(6, 22, 46, .04);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.svc:hover {
  border-color: rgba(10, 95, 196, .45);
  box-shadow: 0 10px 28px -12px rgba(6, 22, 46, .28);
  transform: translateY(-2px);
}
.svc:focus-visible { outline-offset: 3px; }
.svc:hover .svc__name { color: var(--brand); }
.svc__name { transition: color .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .svc, .svc:hover { transition: none; transform: none; }
}

.svc__media { display: block; overflow: hidden; background: var(--wash); }
.svc__media picture { display: block; }
.svc__media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .4s ease;
}
.svc:hover .svc__media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .svc__media img, .svc:hover .svc__media img { transition: none; transform: none; }
}

/* Fallback for browsers without aspect-ratio (pre-2021 Safari): the
   intrinsic width and height attributes keep the box the right shape. */
@supports not (aspect-ratio: 4 / 3) {
  .svc__media { position: relative; padding-top: 75%; }
  .svc__media img { position: absolute; inset: 0; height: 100%; }
}

.svc__body {
  display: flex; flex-direction: column; gap: .6rem; flex: 1;
  padding: 1.5rem 1.6rem 1.6rem;
}
.svc__name { color: var(--ink); font-size: 1.14rem; line-height: 1.25;
             font-variation-settings: 'wght' 680, 'wdth' 106;
             letter-spacing: -.018em; }
.svc__text { color: var(--mute); font-size: .95rem; line-height: 1.55;
             margin: 0; flex: 1; }
.svc__go { display: inline-flex; align-items: center; gap: .4rem;
           color: var(--ink); font-size: .9rem;
           font-variation-settings: 'wght' 600, 'wdth' 100; }
.svc__go svg { width: .8rem; height: .8rem; color: var(--brand); }

/* --------------------------------------------------------------------------
   Sectors / Why
   -------------------------------------------------------------------------- */
.panels { display: grid; gap: var(--gap);
          grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }

.panel { background: var(--paper); border: 1px solid var(--line);
         border-radius: var(--radius); padding: 1.9rem 1.7rem; }
.panel h3 { margin-bottom: .55rem; }
.panel p  { color: var(--mute); font-size: .97rem; margin: 0; }

.reasons { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem);
           grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.reason { border-top: 2px solid rgba(77,155,255,.5); padding-top: 1.1rem; }
.reason h3 { font-size: 1.08rem; margin-bottom: .45rem; }
.reason p  { font-size: .96rem; color: #9DACC0; margin: 0; }

/* --------------------------------------------------------------------------
   Work gallery
   -------------------------------------------------------------------------- */
.work-grid { display: grid; gap: var(--gap);
             grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); }
.work-item { border: 1px solid var(--line); border-radius: var(--radius);
             overflow: hidden; background: var(--paper); }
.work-item figure { margin: 0; }
.work-item img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.work-item figcaption { padding: 1rem 1.15rem 1.15rem; }
.work-item .t { color: var(--ink); font-size: 1rem;
                font-variation-settings: 'wght' 650, 'wdth' 102; display: block; }
.work-item .m { color: var(--mute); font-size: .86rem; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filters button {
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-500);
  border-radius: 999px; padding: .45rem 1rem; font: inherit; font-size: .9rem;
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.filters button:hover { border-color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.quotes { display: grid; gap: var(--gap);
          grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.quote { background: var(--paper); border: 1px solid var(--line);
         border-radius: var(--radius); padding: 1.75rem 1.7rem; }
.quote blockquote { margin: 0 0 1.1rem; color: var(--ink-500); font-size: 1rem;
                    line-height: 1.6; }
.quote cite { font-style: normal; color: var(--ink); font-size: .95rem;
              font-variation-settings: 'wght' 650, 'wdth' 100; }
.quote .where { color: var(--mute); font-size: .86rem; }
.stars { display: flex; gap: .15rem; margin-bottom: .9rem; color: var(--brand); }
.stars svg { width: 1rem; height: 1rem; }

/* --------------------------------------------------------------------------
   Service areas
   -------------------------------------------------------------------------- */
.areas { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
         grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.area-group h3 { font-size: .98rem; margin-bottom: .75rem;
                 padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.area-group ul { list-style: none; margin: 0; padding: 0;
                 columns: 1; font-size: .95rem; }
.area-group li { padding: .22rem 0; color: var(--steel); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 820px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.2rem 2.5rem 1.2rem 0;
  position: relative; color: var(--ink); font-size: 1.06rem; line-height: 1.4;
  font-variation-settings: 'wght' 620, 'wdth' 102;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .35rem; top: 1.55rem;
  width: 11px; height: 11px; border-right: 2px solid var(--steel);
  border-bottom: 2px solid var(--steel); transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }
.faq summary:hover { color: var(--ink-500); }
.faq .answer { padding: 0 2.5rem 1.4rem 0; color: var(--steel); }
.faq .answer p { font-size: 1rem; }

/* --------------------------------------------------------------------------
   Service page detail
   -------------------------------------------------------------------------- */
/* Sub-page header. One photo shared by every inner page, set here rather
   than in the templates so all eight pick it up from one place.

   The photo is graded to navy on its left, where the heading sits, so on
   wide screens the overlay only reinforces the text column. The plain url()
   line is the fallback for browsers without image-set(). */
.page-head {
  --ph-fade: linear-gradient(90deg,
      rgba(7,23,43,.94) 0%, rgba(7,23,43,.84) 30%, rgba(7,23,43,.45) 52%,
      rgba(7,23,43,.08) 68%, rgba(7,23,43,0) 78%);
  color: #B5C3D4;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  /* Matches the photo's own left edge, so wide screens show no seam. */
  background-color: #05152B;
  background-repeat: no-repeat;
  /* Two layers, so two values each: the overlay always fills the box
     exactly, and only the photo is sized and shifted. A single value would
     apply to both, pushing the overlay sideways and leaving a strip. */
  background-size: 100% 100%, cover;
  /* Anchored right and slightly high, keeping the electrician's head and
     the logo on his back in frame as the header gets shorter. */
  /* Pushed slightly past the right edge, trimming the tool bag rather than
     the electrician, so he sits clear of the text column. Any strip this
     exposes on the far left is the same navy as the photo's own edge. */
  background-position: 0 0, right -5vw top 22%;
  background-image: var(--ph-fade), url('../img/page-head/electrician-meter-2000.jpg');
  background-image: var(--ph-fade), image-set(
      url('../img/page-head/electrician-meter-2000.webp') type('image/webp'),
      url('../img/page-head/electrician-meter-2000.jpg') type('image/jpeg'));
}
@media (max-width: 1280px) {
  .page-head {
    background-image: var(--ph-fade), url('../img/page-head/electrician-meter-1280.jpg');
    background-image: var(--ph-fade), image-set(
        url('../img/page-head/electrician-meter-1280.webp') type('image/webp'),
        url('../img/page-head/electrician-meter-1280.jpg') type('image/jpeg'));
  }
}
/* Small laptops: the text column barely narrows but the viewport does, so
   the photo moves further right to keep the logo clear of the paragraph. */
@media (min-width: 1100px) and (max-width: 1199px) {
  .page-head { background-position: 0 0, right -13vw top 22%; }
}
/* Below 1100px there is no room for text and photo side by side, so the
   heading runs across the electrician and the wash is firm enough to keep it
   readable while the photo still shows through. */
@media (max-width: 1099px) {
  .page-head {
    --ph-fade: linear-gradient(180deg, rgba(7,23,43,.78) 0%, rgba(7,23,43,.88) 100%);
    background-position: 0 0, 72% 20%;
  }
}
@media (max-width: 640px) {
  .page-head {
    background-image: var(--ph-fade), url('../img/page-head/electrician-meter-800.jpg');
    background-image: var(--ph-fade), image-set(
        url('../img/page-head/electrician-meter-800.webp') type('image/webp'),
        url('../img/page-head/electrician-meter-800.jpg') type('image/jpeg'));
  }
}
.page-head h1 { color: #fff; max-width: 20ch; }
.page-head .lede { color: #B5C3D4; }

/* On desktop the text has to finish before the electrician starts, so the
   column is narrower and inner-page headings sit a step below the home
   hero. Keeps the logo on his back uncovered. */
@media (min-width: 992px) {
  .page-head h1 {
    font-size: clamp(2.1rem, 1.3rem + 1.6vw, 2.6rem);
    max-width: 17ch; text-wrap: balance;
  }
  .page-head .lede { max-width: 40ch; }
}

.crumbs { font-size: .85rem; color: #8EA0B6; margin-bottom: 1.25rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem;
             margin: 0; padding: 0; }
.crumbs a { color: #B5C3D4; text-decoration: none; }
.crumbs a:hover { color: var(--brand-bright); }
.crumbs li + li::before { content: "/"; color: #4E6080; margin-right: .45rem; }

.col-main { display: grid; gap: clamp(2rem, 5vw, 3.5rem);
            grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .col-main { grid-template-columns: minmax(0, 1fr) 320px; } }

.prose h2 { margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.75rem; }
.prose ul { padding-left: 0; list-style: none; margin: 0 0 1.4rem; max-width: var(--measure); }
.prose ul li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; background: var(--brand); border-radius: 1px;
}

.notice { background: var(--wash); border-left: 3px solid var(--brand);
          padding: 1.25rem 1.5rem; border-radius: var(--radius); margin: 2rem 0; }
.notice h3 { font-size: .98rem; margin-bottom: .4rem; }
.notice p { font-size: .95rem; margin: 0; color: var(--steel); }

.aside-card { background: var(--wash); border: 1px solid var(--line);
              border-radius: var(--radius); padding: 1.6rem; position: sticky; top: 96px; }
.aside-card h3 { font-size: 1.05rem; }
.aside-card ul { list-style: none; margin: 0; padding: 0; }
.aside-card li { border-bottom: 1px solid var(--line); }
.aside-card li:last-child { border-bottom: 0; }
.aside-card li a { display: block; padding: .7rem 0; text-decoration: none;
                   color: var(--ink-500); font-size: .95rem; }
.aside-card li a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-card { background: var(--paper); border: 1px solid var(--line);
             border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .92rem; color: var(--ink);
               margin-bottom: .35rem;
               font-variation-settings: 'wght' 620, 'wdth' 100; }
.field .hint { color: var(--mute); font-variation-settings: 'wght' 400, 'wdth' 100; }
.field input, .field select, .field textarea {
  width: 100%; padding: .75rem .9rem; border: 1px solid var(--line);
  border-radius: var(--radius); font: inherit; font-size: 1rem;
  color: var(--ink); background: var(--paper);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--ink); outline: 3px solid var(--brand-dim); outline-offset: 0;
}
.field--error input, .field--error textarea, .field--error select { border-color: #B3261E; }
.field .err { color: #B3261E; font-size: .86rem; margin-top: .3rem; display: block; }
.field-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.hp { position: absolute !important; left: -9999px !important; }

.alert { padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.5rem;
         font-size: .97rem; }
.alert--ok  { background: #EDF7ED; border-left: 3px solid #2E7D32; color: #1B4D20; }
.alert--bad { background: #FDECEC; border-left: 3px solid #B3261E; color: #8A1C16; }

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */
.closer { background: var(--wash); border-top: 1px solid var(--line); }
.closer__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start;
                grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .closer__grid { grid-template-columns: 1fr 1fr; } }
.closer h2 { max-width: 16ch; }
.callout { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem;
           padding-top: 1.75rem; border-top: 1px solid var(--line); }
.callout__num { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); color: var(--ink);
                text-decoration: none; letter-spacing: -.02em;
                font-variation-settings: 'wght' 700, 'wdth' 110; }
.callout__num:hover { color: var(--brand-700); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #94A5BA; padding-block: clamp(3rem, 6vw, 4.5rem) 0;
               font-size: .94rem; }
.site-footer h3 { color: #fff; font-size: .92rem; margin-bottom: 1rem;
                  font-variation-settings: 'wght' 650, 'wdth' 104; }
.site-footer a { color: #B5C3D4; text-decoration: none; }
.site-footer a:hover { color: var(--brand-bright); }
.footer-grid { display: grid; gap: clamp(2rem, 4vw, 3rem);
               grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .5rem; }
.footer-brand .brand-text .nm { color: #fff; }
.footer-brand p { color: #8EA0B6; font-size: .92rem; max-width: 34ch; margin-top: 1rem; }

.credentials { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .3rem;
               font-size: .88rem; color: #8EA0B6; }
.credentials span b { color: #fff; font-variation-settings: 'wght' 600, 'wdth' 100; }

.socials { display: flex; gap: .6rem; margin-top: 1.25rem; }
.socials a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.18);
             border-radius: var(--radius); display: grid; place-items: center; }
.socials a:hover { border-color: var(--brand-bright); background: rgba(77,155,255,.12); }
.socials svg { width: 17px; height: 17px; }

.footer-bottom { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-block: 1.5rem;
                 border-top: 1px solid rgba(255,255,255,.1);
                 display: flex; justify-content: space-between; gap: 1rem;
                 flex-wrap: wrap; font-size: .86rem; color: #7C8DA3; }
.footer-bottom ul { list-style: none; display: flex; gap: 1.25rem;
                    flex-wrap: wrap; margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   Utilities / empty states
   -------------------------------------------------------------------------- */
.empty { border: 1px dashed var(--line); border-radius: var(--radius);
         padding: 2.5rem 1.5rem; text-align: center; color: var(--mute);
         background: var(--wash); }
.empty p { margin-inline: auto; }
.center { text-align: center; }
.mt-cta { margin-top: clamp(2rem, 4vw, 3rem); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media print {
  .masthead, .utility, .closer, .site-footer, .btn-row { display: none; }
  body { color: #000; }
}

/* Photo at the top of each service page. */
.svc-photo { margin: 0 0 2.5rem; border-radius: var(--radius); overflow: hidden;
             background: var(--wash); }
.svc-photo picture { display: block; }
.svc-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* Text with a photo beside it (About, and any text page given an image).
   Text keeps its reading width; the photo takes the remaining column and
   stays in view while the text scrolls on longer pages. */
.page-split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
.page-split > .prose { min-width: 0; }
.page-split__media { margin: 0; border-radius: 8px; overflow: hidden; background: var(--wash); }
.page-split__media picture { display: block; }
.page-split__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 992px) {
  .page-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .page-split__media { position: sticky; top: 112px; }
}

/* --------------------------------------------------------------------------
   Licences
   Set in a wide, tracked numeral style so the numbers read as credentials
   rather than body copy, with the brand blue rule between them.
   -------------------------------------------------------------------------- */
.lic-strip { display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap;
             font-variant-numeric: tabular-nums; }
.lic-strip__icon { flex: none; }
.lic-strip__num { letter-spacing: .1em; font-variation-settings: 'wght' 600, 'wdth' 112; }
.lic-strip__sep { font-variation-settings: 'wght' 500, 'wdth' 100; }
.lic-strip--dark  { color: #fff; }
.lic-strip--dark  .lic-strip__icon, .lic-strip--dark  .lic-strip__sep { color: var(--brand-bright); }
.lic-strip--light { color: var(--ink); }
.lic-strip--light .lic-strip__icon, .lic-strip--light .lic-strip__sep { color: var(--brand); }

.lic-panel { border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
             padding: 1.4rem 1.5rem; }
.lic-panel__title { display: flex; align-items: center; gap: .5rem; font-size: 1rem;
                    margin: 0 0 1rem; }
.lic-panel__title svg { color: var(--brand); }
.lic-panel__list { margin: 0; display: grid; gap: 1rem; }
.lic-panel__item { padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.lic-panel__item:first-child { padding-top: 0; border-top: 0; }
.lic-panel dt { font-size: .82rem; color: var(--mute); margin-bottom: .15rem;
                font-variation-settings: 'wght' 500, 'wdth' 100; }
.lic-panel__num { margin: 0; color: var(--ink); font-size: 1.35rem; line-height: 1.2;
                  letter-spacing: .08em; font-variant-numeric: tabular-nums;
                  font-variation-settings: 'wght' 700, 'wdth' 112; }
.lic-panel__covers { margin: .2rem 0 0; font-size: .88rem; color: var(--steel); }
.lic-panel__note { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line-soft);
                   font-size: .88rem; color: var(--steel); }

/* Sits under the About text, or inside a sidebar card that already has a
   frame of its own. */
.page-split__aside { display: grid; gap: 1.5rem; align-content: start; }
.aside-card .lic-panel { border: 0; padding: 0; background: transparent; }
.aside-card .lic-panel__num { font-size: 1.2rem; }
.utility__lic { display: inline-flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.callout-lic { margin-top: 1rem; font-size: .95rem; }
.notice__lic { margin-top: .6rem !important; padding-top: .6rem; border-top: 1px solid var(--line); }
.page-split__media { position: static; }
@media (min-width: 992px) { .page-split__aside { position: sticky; top: 112px; } }

/* --------------------------------------------------------------------------
   Services dropdown (desktop). "Services" stays a link to the overview page;
   the chevron button opens the menu for keyboard and touch, and hover opens
   it for a mouse. While closed its links are hidden, so tabbing past
   "Services" does not walk through all seven of them.
   -------------------------------------------------------------------------- */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav > .nav-dd > .nav-dd__link { padding-right: .3rem; }
.nav-dd__toggle {
  display: grid; place-items: center; width: 26px; height: 32px; margin-left: -.1rem;
  background: none; border: 0; border-radius: var(--radius); color: var(--ink-500);
  cursor: pointer; padding: 0;
}
.nav-dd__toggle:hover { color: var(--ink); background: var(--wash); }
.nav-dd__chev { transform: rotate(90deg); transition: transform .18s ease; }
.nav-dd.is-open .nav-dd__chev,
.nav-dd:hover .nav-dd__chev { transform: rotate(-90deg); }

.nav-dd__menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  width: min(640px, calc(100vw - 2rem));
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 18px 40px -18px rgba(6, 22, 46, .35);
  padding: .6rem; z-index: 1040;
  /* Hidden but still in the layout, so it can fade rather than snap. */
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
/* An invisible bridge across the gap, so moving the pointer from "Services"
   down into the menu does not close it. */
.nav-dd__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }

.nav-dd:hover .nav-dd__menu,
.nav-dd__menu:focus-within,
.nav-dd.is-open .nav-dd__menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}
/* Closed with Escape: stays shut even while the pointer is still over it. */
.nav-dd.is-dismissed .nav-dd__menu { opacity: 0; visibility: hidden; }

.nav-dd__list { list-style: none; margin: 0; padding: 0; display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem; }
.nav .nav-dd__item {
  display: flex; gap: .8rem; align-items: flex-start; padding: .75rem .8rem;
  border-radius: 7px; color: var(--ink); font-variation-settings: 'wght' 400, 'wdth' 100;
}
.nav .nav-dd__item:hover { background: var(--wash); }
.nav .nav-dd__item[aria-current]::after { display: none; }
.nav .nav-dd__item[aria-current] { background: var(--wash); }
.nav-dd__icon {
  flex: none; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(10, 95, 196, .08); color: var(--brand);
}
.nav-dd__item:hover .nav-dd__icon { background: var(--brand); color: #fff; }
.nav-dd__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.nav-dd__name { font-size: .93rem; line-height: 1.3; color: var(--ink);
                font-variation-settings: 'wght' 650, 'wdth' 102; }
.nav-dd__desc { font-size: .8rem; line-height: 1.4; color: var(--mute); }

.nav .nav-dd__all {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  margin-top: .45rem; padding: .7rem; border-top: 1px solid var(--line-soft);
  border-radius: 0 0 6px 6px; color: var(--brand); font-size: .9rem;
  font-variation-settings: 'wght' 620, 'wdth' 100;
}
.nav .nav-dd__all:hover { background: var(--wash); color: var(--brand-700); }
.nav .nav-dd__all::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-dd__menu, .nav-dd__chev { transition: none; }
}

/* --------------------------------------------------------------------------
   Google reviews (Featurable)
   Cards share the service cards' border, radius and spacing so the reviews
   read as part of the site rather than a dropped-in widget.
   -------------------------------------------------------------------------- */
.rv {
  /* Positioned, so screen-reader-only text inside a card is laid out
     against the card and stays clipped by the carousel track, instead of
     escaping it and widening the page. */
  position: relative;
  display: flex; flex-direction: column; gap: .85rem; height: 100%;
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: 1.5rem 1.5rem 1.4rem; box-shadow: 0 1px 2px rgba(6, 22, 46, .04);
}
.rv__head { display: flex; align-items: center; gap: .8rem; }
.rv__avatar {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
  overflow: hidden; background: rgba(10, 95, 196, .1); display: grid; place-items: center;
}
.rv__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv__initials { font-size: .82rem; color: var(--brand); letter-spacing: .02em;
                font-variation-settings: 'wght' 700, 'wdth' 100; }
.rv__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rv__name { color: var(--ink); font-size: .97rem; font-variation-settings: 'wght' 650, 'wdth' 102; }
.rv__date { color: var(--mute); font-size: .82rem; }

.rv__stars { display: inline-flex; gap: .12rem; }
.rv__stars .on  { color: var(--brand); }
.rv__stars .off { color: var(--line); }
.rv__stars svg { display: block; }

.rv__text { color: var(--steel); font-size: .97rem; line-height: 1.6; }
.rv__text p { margin: 0 0 .7rem; }
.rv__text p:last-child { margin-bottom: 0; }

/* Carousel cards keep an even height: long reviews are cut to six lines. */
.rv--clamp .rv__text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
  overflow: hidden; flex: 1;
}
.rv--clamp .rv__text p { display: inline; margin: 0; }
.rv--clamp .rv__text p + p::before { content: " "; }
.rv__more { margin-top: auto; font-size: .88rem; color: var(--brand);
            font-variation-settings: 'wght' 620, 'wdth' 100; text-decoration: none; }
.rv__more:hover { text-decoration: underline; }

/* Rating summary */
.rv-sum { display: flex; align-items: center; gap: 1.25rem 1.75rem; flex-wrap: wrap; }
.rv-sum__score { display: flex; align-items: center; gap: .9rem; }
.rv-sum__num { font-size: 2.6rem; line-height: 1; letter-spacing: -.03em;
               font-variation-settings: 'wght' 720, 'wdth' 110; }
.rv-sum__score > span:last-child { display: flex; flex-direction: column; gap: .3rem; }
.rv-sum__count { font-size: .9rem; }
.rv-sum--light .rv-sum__num { color: var(--ink); }
.rv-sum--light .rv-sum__count { color: var(--mute); }
.rv-sum--dark .rv-sum__num { color: #fff; }
.rv-sum--dark .rv-sum__count { color: #B5C3D4; }
.rv-sum--dark .rv__stars .on  { color: var(--brand-bright); }
.rv-sum--dark .rv__stars .off { color: rgba(255,255,255,.25); }

/* Home page band */
.rv-band__top { display: flex; justify-content: space-between; align-items: flex-end;
                gap: 1.5rem 3rem; flex-wrap: wrap; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.rv-band__foot { display: flex; align-items: center; justify-content: space-between;
                 gap: 1rem 2rem; flex-wrap: wrap; margin-top: clamp(1.75rem, 3vw, 2.25rem); }
.rv-credit { margin: 0; font-size: .82rem; color: var(--mute); }
.rv-credit a { color: var(--steel); }

/* Carousel */
.rv-car { position: relative; }
.rv-car__track {
  --rv-gap: clamp(1rem, 2vw, 1.5rem);
  position: relative;
  display: flex; gap: var(--rv-gap); list-style: none; margin: 0; padding: .25rem .1rem 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.rv-car__track::-webkit-scrollbar { display: none; }
.rv-car__track:focus-visible { outline-offset: 4px; }
.rv-car__slide { flex: 0 0 calc((100% - 2 * var(--rv-gap)) / 3); scroll-snap-align: start; min-width: 0; }
@media (max-width: 991px) { .rv-car__slide { flex-basis: calc((100% - var(--rv-gap)) / 2); } }
/* On phones a sliver of the next card shows, which signals there is more. */
@media (max-width: 599px) { .rv-car__slide { flex-basis: 86%; } }
@media (prefers-reduced-motion: reduce) { .rv-car__track { scroll-behavior: auto; } }

.rv-car__nav { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .5rem; }
.rv-car__nav[hidden] { display: none; }
.rv-car__btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.rv-car__btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.rv-car__btn:disabled { opacity: .4; cursor: default; }
.rv-car__prev { transform: rotate(180deg); }

/* Testimonials page: a row-based grid, so reviews read left to right,
   newest first. Cards in a row share a height; long reviews are cut to six
   lines and open in place. */
.rv-grid {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 991px) { .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .rv-grid { grid-template-columns: minmax(0, 1fr); } }

.rv--fold .rv__text { flex: 1; }
.rv--fold:not(.is-open) .rv__text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
  overflow: hidden;
}
.rv--fold:not(.is-open) .rv__text p { display: inline; margin: 0; }
.rv--fold:not(.is-open) .rv__text p + p::before { content: " "; }
/* Grid rows stretch the cards to a shared height. */
.rv-grid > .rv { height: auto; }

.rv__toggle {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem;
  margin-top: auto; padding: .2rem 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .88rem; color: var(--brand);
  font-variation-settings: 'wght' 620, 'wdth' 100;
}
.rv__toggle:hover .rv__toggle-label { text-decoration: underline; }
.rv__toggle::after {
  content: ""; width: .45em; height: .45em; margin-top: -.2em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.rv__toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: .2em; }
.rv__toggle[hidden] { display: none; }

.rv:target { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }
.rv__more[hidden] { display: none; }

/* Reviews loaded in the browser: placeholder cards while they arrive. */
[data-rv-summary]:empty, [data-rv-credit]:empty { display: none; }
.rv--ghost { min-height: 16rem; background: var(--wash); border-color: transparent; box-shadow: none;
             animation: rv-pulse 1.4s ease-in-out infinite alternate; }
@keyframes rv-pulse { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rv--ghost { animation: none; } }