/* ============================================================
   Service pages — five compositions, one brand.

   Loaded by panel upgrades, surge protection, lighting, residential
   wiring and smart home. Everything is scoped under body.svc and
   then under a per-page class, so no page can reach another and the
   seven pages that do not load this file cannot move at all.

   The shared part is deliberately small: a bleed helper, the reveal
   motion, and form controls. Layout, surface and rhythm are written
   per page, because one skeleton skinned five ways reads as a
   template no matter how good the skin is. Each page instead takes
   its cue from its own subject:

     panel     a ledger, spine down the left, tabular facts
     surge     centred and symmetric, layered, no body photography
     lighting  warm, lit from above, built around a photo mosaic
     wiring    a continuous run, junction dots, alternating sides
     smart     a control surface, bento cards, hairlines, air
   ============================================================ */

body.svc{overflow-x:clip}
.svc main{max-width:var(--shell);position:relative}
.svc main > section:first-child{margin-top:0}
.svc .bleed{width:100vw;margin-inline:calc(50% - 50vw)}
.svc .shell{display:block;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.svc .crumbs{max-width:none;margin:0 0 clamp(1.4rem,3vw,2.2rem)}
.svc h2{padding-left:0}
.svc h2::before{display:none}          /* each page draws its own heading mark */
.svc .svc-page > section,
.svc .svc-page > figure,
.svc .svc-page > div{margin-block:clamp(3.25rem,7vw,5.5rem)}

/* ---------- motion (shared) ----------
   Reveals are opt-in from js/reveal.js: the hidden state only exists once that
   script sets .rv-on, so no-JS and reduced-motion visitors never meet a blank
   section. Small distances, flat easing: the page settles, it does not fly. */
html.rv-on .rv{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:var(--rvd,0ms)}
html.rv-on [data-rv="scale"].rv{transform:translateY(14px) scale(.975)}
/* the settled state has to come after the direction variants and match their
   weight, or a [data-rv] element stays transformed forever — which left every
   scale reveal permanently at 0.975 and short of its own layout box */
html.rv-on .rv.is-in,
html.rv-on [data-rv].rv.is-in{opacity:1;transform:none}

/* contact panel + quote form now live in css/styles.css, one canonical block */

/* ---------- other services (shared shell, per-page accent) ---------- */
.svc .svc-also{max-width:none}
.svc .svc-also h2{
  padding-top:var(--s-4);border-top:1px solid var(--hair);
  font-size:clamp(1.4rem,2.1vw,1.85rem);margin-bottom:var(--s-4)}


/* ============================================================
   1. PANEL UPGRADES — the ledger
   A service panel is a column of labelled positions, so the facts are
   set as a rule-ruled ledger rather than a card grid. The spine and
   ticks that used to run down the left are gone — a vertical rule with
   markers reads as a chronology, which this is not.
   ============================================================ */
.pg-panel .pnl-lead{
  position:relative;margin:0;
  max-width:54ch;font-size:clamp(1.2rem,2.1vw,1.6rem);line-height:1.55;
  color:var(--text);text-wrap:pretty}

/* facts as a ruled ledger: two columns, hairlines on every edge */
.pg-panel .pnl-facts{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:0;padding:0;list-style:none;
  border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.pg-panel .pnl-facts li{
  display:flex;flex-direction:column;gap:.4rem;
  padding:clamp(1rem,2.2vw,1.5rem) clamp(1rem,2.4vw,1.75rem);
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  background:linear-gradient(180deg,rgba(159,212,240,.045),transparent)}
.pg-panel .pnl-facts b{
  font-family:Montserrat,sans-serif;font-size:.66rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.pg-panel .pnl-facts span{color:var(--text);font-size:.97rem;line-height:1.5}

/* No spine, no ticks: a vertical rule with markers down it reads as a
   chronology, and these are three aspects of one job, not three dates. */
.pg-panel .pnl-body{position:relative}
.pg-panel .pnl-sec{position:relative;margin-block:clamp(2.5rem,6vw,4.25rem)}
.pg-panel .pnl-sec h2{font-size:clamp(1.5rem,2.4vw,2.1rem);margin-bottom:var(--s-3);color:#fff}
.pg-panel .pnl-copy p{font-size:1.05rem;line-height:1.78;color:var(--muted);margin-bottom:var(--s-3)}
.pg-panel .pnl-copy p:last-child{margin-bottom:0}
.pg-panel .pnl-sec-shot,
.pg-panel .pnl-sec-figure{display:grid;gap:clamp(1.75rem,4.5vw,3.5rem);align-items:center}
/* photo leads on Signs, copy leads on Sizing */
.pg-panel .pnl-sec-shot{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
/* the changeout photo is a tall portrait, so it takes a narrow column and
   lets the copy hold the width rather than towering over it */
.pg-panel .pnl-sec-figure{grid-template-columns:minmax(0,1fr) minmax(0,.52fr)}
/* copy and note sit side by side, so the right half is not dead space; the
   before/after then runs the full width beneath them */
.pg-panel .pnl-sec-wide{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.68fr);
  gap:clamp(1.75rem,4vw,3rem);align-items:center}
.pg-panel .pnl-sec-wide .pnl-copy{max-width:none}
.pg-panel .pnl-sec-wide .pnl-note{margin:0}
.pg-panel .pnl-sec-wide .pnl-ba{grid-column:1/-1;margin-top:clamp(1.75rem,4vw,3rem)}
.pg-panel .pnl-shot img,
.pg-panel .pnl-figure img{
  display:block;width:100%;height:auto;border-radius:var(--radius);
  border:1px solid rgba(159,212,240,.24);box-shadow:var(--lift)}
.pg-panel .pnl-figure{margin:0}
.pg-panel .pnl-figure figcaption{
  position:relative;margin-top:var(--s-3);padding-top:.8rem;max-width:46ch;
  font-size:.88rem;line-height:1.55;color:var(--muted)}
.pg-panel .pnl-figure figcaption::before{
  content:"";position:absolute;top:0;left:0;width:3rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),transparent)}
/* a rounded card now the spine is gone, rather than a tag clipped to it */
.pg-panel .pnl-note{
  margin:var(--s-4) 0 0;padding:var(--s-4);border-radius:var(--radius);
  border:1px solid rgba(231,162,0,.3);border-left:3px solid var(--gold);
  background:linear-gradient(90deg,rgba(231,162,0,.12),rgba(27,60,92,.5) 60%)}
.pg-panel .pnl-note p{margin:0;color:var(--text);font-size:1.03rem;line-height:1.65}

@media(max-width:900px){
  .pg-panel .pnl-sec-shot,.pg-panel .pnl-sec-figure{grid-template-columns:1fr}
  .pg-panel .pnl-shot,.pg-panel .pnl-figure{max-width:30rem}
}
@media(max-width:620px){
  .pg-panel .pnl-facts{grid-template-columns:1fr}
}

/* ============================================================
   2. SURGE PROTECTION — layered defence
   Protection is a diagram, not a photograph, so this page carries no
   body imagery at all. It is the only symmetric page in the set:
   everything centres on one axis and the sections read as successive
   layers, each one inset a little further and lit at its edge.
   ============================================================ */
.pg-surge .srg-open{text-align:center}
.pg-surge .srg-open .crumbs{display:flex;justify-content:center;gap:.15rem}
.pg-surge .srg-lead{
  margin:0 auto;max-width:56ch;text-align:center;
  font-size:clamp(1.2rem,2.1vw,1.6rem);line-height:1.55;color:var(--text);text-wrap:pretty}

.pg-surge .srg-facts{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.7rem,1.8vw,1.1rem);
  margin:0 auto;padding:0;list-style:none;max-width:56rem}
.pg-surge .srg-facts li{
  position:relative;display:flex;flex-direction:column;gap:.45rem;align-items:center;
  text-align:center;padding:clamp(1.1rem,2.4vw,1.6rem);border-radius:var(--radius);
  border:1px solid var(--hair);
  background:radial-gradient(120% 100% at 50% 0%,rgba(61,131,203,.16),transparent 70%),rgba(27,60,92,.42)}
.pg-surge .srg-facts li::before{
  content:"";position:absolute;top:-1px;left:22%;right:22%;height:1px;
  background:linear-gradient(90deg,transparent,var(--neon),transparent)}
.pg-surge .srg-facts b{
  font-family:Montserrat,sans-serif;font-size:.66rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.pg-surge .srg-facts span{color:var(--text);font-size:.97rem;line-height:1.5}

.pg-surge .srg-layers{display:flex;flex-direction:column;align-items:center;gap:clamp(1rem,2.6vw,1.9rem)}
/* Left-aligned now: centred body copy was the least readable thing on the
   site, and the concentric stepping already carries the "layers" idea without
   needing the text to be centred too. */
.pg-surge .srg-layer{
  position:relative;isolation:isolate;width:100%;text-align:left;
  padding:clamp(1.5rem,3.4vw,2.4rem);
  border-radius:var(--radius);border:1px solid var(--hair);
  background:linear-gradient(165deg,rgba(27,60,92,.66),rgba(16,40,61,.32));
  box-shadow:0 18px 44px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.pg-surge .srg-layer::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(58% 68% at 6% 0%,rgba(159,212,240,.11),transparent 62%)}
.pg-surge .srg-layer:hover{
  border-color:rgba(159,212,240,.34);transform:translateY(-3px);
  box-shadow:0 26px 56px rgba(0,0,0,.36)}
.pg-surge .srg-layer:hover .feat-mark{border-color:rgba(231,162,0,.6)}
/* each layer sits a little further in than the last */
.pg-surge .srg-layer:nth-child(1){max-width:100%}
.pg-surge .srg-layer:nth-child(2){max-width:92%}
.pg-surge .srg-layer:nth-child(3){max-width:84%}
.pg-surge .srg-tick{display:none;
  position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:clamp(3rem,10vw,6rem);height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.pg-surge .srg-layer h2{
  font-size:clamp(1.45rem,2.3vw,2rem);margin-bottom:var(--s-3);text-wrap:balance;color:#fff}
.pg-surge .srg-layer p{
  margin:0 0 var(--s-3);max-width:70ch;font-size:1.05rem;line-height:1.76;color:var(--muted)}
.pg-surge .srg-layer p:last-child{margin-bottom:0}
.pg-surge .srg-note{
  margin:var(--s-4) 0 0;max-width:64ch;padding:var(--s-4);
  border-radius:var(--radius);border:1px solid rgba(231,162,0,.36);
  background:radial-gradient(120% 140% at 50% 0%,rgba(231,162,0,.16),transparent 70%),rgba(9,24,38,.5)}
.pg-surge .srg-note p{margin:0;color:var(--text);max-width:none}

@media(max-width:620px){
  .pg-surge .srg-facts{grid-template-columns:1fr}
  .pg-surge .srg-layer:nth-child(2),
  .pg-surge .srg-layer:nth-child(3){max-width:100%}
}

/* ============================================================
   3. LIGHTING — pools of light
   The only page where gold is spent freely, because the subject is
   light. Sections are lit from above by soft blooms, the facts sit on
   a warm band, and the best photography in the set gets a mosaic and
   a full-bleed dusk close.
   ============================================================ */
.pg-light .lgt-open{position:relative}
.pg-light .lgt-open::before{
  content:"";position:absolute;left:-10%;right:20%;top:-40%;height:200%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 42% at 26% 50%,rgba(231,162,0,.16),transparent 70%)}
.pg-light .lgt-lead{
  margin:0;max-width:52ch;font-size:clamp(1.22rem,2.2vw,1.68rem);line-height:1.52;
  color:var(--text);text-wrap:pretty}

.pg-light .lgt-strip{
  padding-block:clamp(1.5rem,3.2vw,2.4rem);border-block:1px solid rgba(231,162,0,.22);
  background:linear-gradient(180deg,rgba(231,162,0,.09),rgba(231,162,0,.02))}
.pg-light .lgt-facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;padding:0;list-style:none}
.pg-light .lgt-facts li{
  position:relative;display:flex;flex-direction:column;gap:.45rem;
  padding-inline:clamp(.9rem,2.2vw,1.8rem)}
.pg-light .lgt-facts li:first-child{padding-left:0}
.pg-light .lgt-facts li + li::before{
  content:"";position:absolute;left:0;top:.1rem;bottom:.1rem;width:1px;
  background:linear-gradient(180deg,transparent,rgba(231,162,0,.4),transparent)}
.pg-light .lgt-facts b{
  font-family:Montserrat,sans-serif;font-size:.66rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.pg-light .lgt-facts span{color:var(--text);font-size:.97rem;line-height:1.5}

.pg-light .lgt-sec h2{color:#fff;
  font-size:clamp(1.45rem,2.4vw,2.05rem);margin-bottom:var(--s-3);
  text-shadow:0 0 34px rgba(231,162,0,.22)}
.pg-light .lgt-copy p{font-size:1.05rem;line-height:1.78;color:var(--muted);margin-bottom:var(--s-3)}
.pg-light .lgt-copy p:last-child{margin-bottom:0}
.pg-light .lgt-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.68fr);
  gap:clamp(1.75rem,4.5vw,3.5rem);align-items:center}
.pg-light .lgt-shot img{
  display:block;width:100%;height:auto;border-radius:var(--radius);
  border:1px solid rgba(231,162,0,.26);box-shadow:0 26px 60px rgba(0,0,0,.42)}
/* Photo left, copy right, both stretched so the columns finish level. The
   centring this section used to carry does not survive a two-column split —
   centred text in a narrow column beside a photo reads as a mistake. */
.pg-light .lgt-centred{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3.25rem);align-items:stretch}
.pg-light .lgt-centred h2{text-align:left}
.pg-light .lgt-centred .lgt-copy{
  max-width:none;margin-inline:0;display:flex;flex-direction:column;justify-content:center}
.pg-light .lgt-sec .lgt-figure{margin:0;display:flex;align-self:stretch;height:100%;min-height:0}
.pg-light .lgt-sec .lgt-figure picture{
  display:block;flex:1;min-height:0;overflow:hidden;border-radius:var(--radius)}
.pg-light .lgt-sec .lgt-figure img{
  display:block;width:100%;height:100%;object-fit:cover;
  border:1px solid rgba(231,162,0,.22);border-radius:var(--radius);box-shadow:var(--lift)}
@media(max-width:860px){
  .pg-light .lgt-centred{grid-template-columns:1fr}
  .pg-light .lgt-sec .lgt-figure{min-height:0;max-width:30rem}
  .pg-light .lgt-sec .lgt-figure img{height:clamp(13rem,42vw,20rem)}
}

/* taller: at the old height the lantern was cropped to a sliver */
.pg-light .lgt-dusk{position:relative;overflow:hidden;padding-block:clamp(4.5rem,10vw,7.5rem);min-height:clamp(22rem,42vh,30rem);display:flex;align-items:center}
.pg-light .lgt-dusk-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;
  z-index:-2;filter:brightness(.62) saturate(1.05)}
.pg-light .lgt-dusk::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48% 60% at 24% 44%,rgba(231,162,0,.2),transparent 68%),
    linear-gradient(90deg,rgba(10,26,41,.88) 4%,rgba(10,26,41,.46) 56%,rgba(10,26,41,.14)),
    linear-gradient(180deg,rgba(16,40,61,.5),transparent 26%,transparent 76%,rgba(16,40,61,.6))}
.pg-light .lgt-dusk-copy{max-width:38rem}   /* ch here is body-sized and wrapped the h2 early */
.pg-light .lgt-dusk-copy h2{color:#fff}
.pg-light .lgt-dusk-copy p{color:#DCE8F4}
.pg-light .lgt-note{
  margin:var(--s-4) 0 0;padding:var(--s-4);border-radius:var(--radius);
  border:1px solid rgba(231,162,0,.32);
  background:linear-gradient(150deg,rgba(231,162,0,.14),rgba(27,60,92,.5) 55%)}
.pg-light .lgt-note p{margin:0;color:var(--text);font-size:1.03rem;line-height:1.65;max-width:none}

@media(max-width:900px){
  .pg-light .lgt-split{grid-template-columns:1fr}
  .pg-light .lgt-shot{max-width:28rem}
  .pg-light .lgt-facts{grid-template-columns:repeat(2,1fr);row-gap:var(--s-4)}
  .pg-light .lgt-facts li:nth-child(odd){padding-left:0}
  .pg-light .lgt-facts li:nth-child(odd)::before{display:none}
}
@media(max-width:620px){
  .pg-light .lgt-mosaic{grid-template-columns:1fr}
  .pg-light .lgt-mosaic figure:first-child{margin-top:0}
  .pg-light .lgt-facts{grid-template-columns:1fr}
  .pg-light .lgt-facts li{padding:var(--s-2) 0}
  .pg-light .lgt-facts li + li::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
}

/* ============================================================
   4. RESIDENTIAL WIRING — the run
   A circuit is a route between points, so the page is one continuous
   line with a junction dot at every section and the copy alternating
   either side of it. Chips, not cards, for the facts.
   ============================================================ */
.pg-wiring .wir-lead{
  margin:0;max-width:56ch;font-size:clamp(1.2rem,2.1vw,1.6rem);line-height:1.55;
  color:var(--text);text-wrap:pretty}
.pg-wiring .wir-facts{
  display:flex;flex-wrap:wrap;gap:clamp(.6rem,1.6vw,1rem);margin:0;padding:0;list-style:none}
.pg-wiring .wir-facts li{
  display:flex;flex-direction:column;gap:.3rem;flex:1 1 15rem;
  padding:clamp(.85rem,1.8vw,1.15rem) clamp(1rem,2vw,1.4rem);
  border:1px solid var(--hair);border-radius:999px;
  background:rgba(27,60,92,.45)}
.pg-wiring .wir-facts b{
  font-family:Montserrat,sans-serif;font-size:.63rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.pg-wiring .wir-facts span{color:var(--text);font-size:.93rem;line-height:1.45}

/* The centre line and its junction dots are gone: they read as a timeline,
   and this is four parallel services, not a sequence of events. */
.pg-wiring .wir-run{position:relative}
.pg-wiring .wir-row{
  position:relative;display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  grid-template-columns:1fr 1fr;margin-block:clamp(2.25rem,5.5vw,4rem)}
.pg-wiring .wir-a .wir-copy{grid-column:1;padding-right:clamp(1rem,2.5vw,2rem)}
.pg-wiring .wir-a .wir-shot{grid-column:2;padding-left:clamp(1rem,2.5vw,2rem)}
.pg-wiring .wir-b .wir-copy{grid-column:2;padding-left:clamp(1rem,2.5vw,2rem)}
.pg-wiring .wir-row h2{font-size:clamp(1.45rem,2.3vw,2rem);margin-bottom:var(--s-3);color:#fff}
.pg-wiring .wir-copy p{font-size:1.04rem;line-height:1.76;color:var(--muted);margin-bottom:var(--s-3)}
.pg-wiring .wir-copy p:last-child{margin-bottom:0}
.pg-wiring .wir-shot img{
  display:block;width:100%;height:auto;border-radius:var(--radius);
  border:1px solid rgba(159,212,240,.24);box-shadow:var(--lift)}
.pg-wiring .wir-note{
  margin:0;padding:var(--s-4);border-radius:var(--radius);
  border:1px solid rgba(159,212,240,.28);border-left:3px solid var(--neon);
  background:linear-gradient(90deg,rgba(159,212,240,.1),rgba(27,60,92,.45) 65%)}
.pg-wiring .wir-note p{margin:0;color:var(--text);font-size:1.03rem;line-height:1.65}


@media(max-width:820px){
  .pg-wiring .wir-row{grid-template-columns:1fr;padding-left:clamp(1.5rem,5vw,2.25rem)}
  .pg-wiring .wir-a .wir-copy,.pg-wiring .wir-b .wir-copy,
  .pg-wiring .wir-a .wir-shot{grid-column:1;padding-inline:0}
  .pg-wiring .wir-shot{max-width:28rem}
}

/* ============================================================
   5. SMART HOME & LUTRON — control surface
   Almost no photography exists for this service, so rather than pad
   it out this page leans the other way: a product-UI aesthetic built
   from hairlines, micro-labels and negative space. It is the quietest
   page in the set, which is the point.
   ============================================================ */
.pg-smart .sm-lead{
  margin:0;max-width:50ch;font-size:clamp(1.24rem,2.3vw,1.75rem);line-height:1.5;
  letter-spacing:-.01em;color:var(--text);text-wrap:pretty}

/* the facts read as a device status bar */
.pg-smart .sm-facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;padding:0;list-style:none;
  border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;
  background:rgba(9,24,38,.42)}
.pg-smart .sm-facts li{
  display:flex;flex-direction:column;gap:.5rem;padding:clamp(1rem,2.2vw,1.5rem);
  border-right:1px solid var(--hair)}
.pg-smart .sm-facts li:last-child{border-right:0}
.pg-smart .sm-facts b{
  position:relative;padding-left:1rem;
  font-family:Montserrat,sans-serif;font-size:.63rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.pg-smart .sm-facts b::before{
  content:"";position:absolute;left:0;top:.34em;width:6px;height:6px;border-radius:50%;
  background:var(--neon);box-shadow:0 0 10px rgba(159,212,240,.8)}
.pg-smart .sm-facts span{color:var(--text);font-size:.95rem;line-height:1.5}

/* bento: the first card takes the full width, the rest pair off */
.pg-smart .sm-bento{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.4vw,1.6rem)}
.pg-smart .sm-card{
  position:relative;isolation:isolate;
  padding:clamp(1.5rem,3.4vw,2.4rem);border-radius:var(--radius);border:1px solid var(--hair);
  background:linear-gradient(165deg,rgba(27,60,92,.66),rgba(16,40,61,.32));
  box-shadow:0 18px 44px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.pg-smart .sm-card::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(58% 68% at 6% 0%,rgba(159,212,240,.11),transparent 62%)}
.pg-smart .sm-card:hover{
  border-color:rgba(159,212,240,.34);transform:translateY(-3px);
  box-shadow:0 26px 56px rgba(0,0,0,.36)}
.pg-smart .sm-card:hover .feat-mark{border-color:rgba(231,162,0,.6)}
.pg-smart .sm-card-lead{
  grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.46fr);
  gap:clamp(1.5rem,3.5vw,2.75rem);align-items:center}
.pg-smart .sm-card-shot{position:relative}
.pg-smart .sm-card-shot picture{display:block;overflow:hidden;border-radius:12px}
.pg-smart .sm-card-shot img{
  display:block;width:100%;height:clamp(12rem,20vw,15.5rem);object-fit:cover;
  border:1px solid rgba(159,212,240,.22);border-radius:12px;
  transition:transform .6s var(--ease)}
.pg-smart .sm-card-lead:hover .sm-card-shot img{transform:scale(1.04)}

.pg-smart .sm-card h2{font-size:clamp(1.4rem,2.2vw,1.9rem);margin-bottom:var(--s-3);color:#fff}
.pg-smart .sm-card p{font-size:1.03rem;line-height:1.76;color:var(--muted);margin-bottom:var(--s-3)}
.pg-smart .sm-card p:last-child{margin-bottom:0}
.pg-smart .sm-note{
  margin:0;padding:0;border:0;background:none}
.pg-smart .sm-note p{
  margin:0;padding-left:clamp(1rem,2.2vw,1.5rem);border-left:2px solid var(--gold);
  color:var(--text);font-size:1.03rem;line-height:1.68}

@media(max-width:820px){
  .pg-smart .sm-facts{grid-template-columns:repeat(2,1fr)}
  .pg-smart .sm-facts li:nth-child(2n){border-right:0}
  .pg-smart .sm-facts li:nth-child(-n+2){border-bottom:1px solid var(--hair)}
}
@media(max-width:820px){
  .pg-smart .sm-card-lead{grid-template-columns:1fr}
  .pg-smart .sm-card-shot{max-width:24rem}
}
@media(max-width:620px){
  .pg-smart .sm-bento{grid-template-columns:1fr}
  .pg-smart .sm-facts{grid-template-columns:1fr}
  .pg-smart .sm-facts li{border-right:0;border-bottom:1px solid var(--hair)}
  .pg-smart .sm-facts li:last-child{border-bottom:0}
}

/* FAQ now lives in css/styles.css, one canonical accordion */


/* ============================================================
   New service photography — placements added with the second image drop
   ============================================================ */

/* panel: the before/after is the page's proof, so it runs wide under the copy */
.pg-panel .pnl-ba{margin:var(--s-5) 0 0;max-width:none}
.pg-panel .pnl-ba picture{display:block;overflow:hidden;border-radius:var(--radius)}
.pg-panel .pnl-ba img{
  display:block;width:100%;height:auto;border-radius:var(--radius);
  border:1px solid rgba(159,212,240,.24);box-shadow:var(--lift)}

/* three photos across the full width of the "What a Panel Upgrade Includes"
   row. The client set is all 3:4 portrait, so the columns are portrait too and
   the images fill their cells rather than letterboxing. */
.pg-panel .pnl-trio{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.9rem,2vw,1.5rem)}
.pg-panel .pnl-trio figure{margin:0}
.pg-panel .pnl-trio picture{display:block;height:100%}
.pg-panel .pnl-trio img{aspect-ratio:3/4;object-fit:cover}

/* surge: each layer is now copy beside a photo, and the layers alternate —
   three photos stacked down the same edge read as a list of thumbnails rather
   than three layers of protection. The middle one takes the opposite side. */
.pg-surge .srg-layer{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.52fr);
  gap:clamp(1.5rem,3.5vw,2.75rem);align-items:center}
.pg-surge .srg-flip{grid-template-columns:minmax(0,.52fr) minmax(0,1fr)}
.pg-surge .srg-flip .srg-copy{grid-column:2;grid-row:1}
.pg-surge .srg-flip .srg-shot{grid-column:1;grid-row:1}
.pg-surge .srg-copy{min-width:0}
.pg-surge .srg-shot picture{display:block;overflow:hidden;border-radius:12px}
.pg-surge .srg-shot img{
  display:block;width:100%;height:clamp(11rem,18vw,14rem);object-fit:cover;
  border:1px solid rgba(159,212,240,.22);border-radius:12px;
  transition:transform .6s var(--ease)}
.pg-surge .srg-layer:hover .srg-shot img{transform:scale(1.04)}

/* wiring: the run alternates, so the photo takes whichever side the copy does not */
.pg-wiring .wir-b .wir-shot{grid-column:1;grid-row:1;padding-right:clamp(1rem,2.5vw,2rem);padding-left:0}


/* smart: a card that leads with an image rather than a mark */
.pg-smart .sm-card-media{display:flex;flex-direction:column}
.pg-smart .sm-card-top{margin:calc(-1 * clamp(1.5rem,3.4vw,2.4rem)) calc(-1 * clamp(1.5rem,3.4vw,2.4rem)) var(--s-4);
  overflow:hidden;border-radius:var(--radius) var(--radius) 0 0}
.pg-smart .sm-card-top picture{display:block}
.pg-smart .sm-card-top img{
  display:block;width:100%;height:clamp(9rem,15vw,12rem);object-fit:cover;
  transition:transform .6s var(--ease)}
.pg-smart .sm-card-media:hover .sm-card-top img{transform:scale(1.04)}

@media(max-width:900px){
  .pg-surge .srg-layer{grid-template-columns:1fr}
  /* stacked, every layer reverts to copy-then-photo in DOM order */
  .pg-surge .srg-flip .srg-copy,
  .pg-surge .srg-flip .srg-shot{grid-column:1;grid-row:auto}
  .pg-surge .srg-shot{max-width:26rem}
  .pg-wiring .wir-b .wir-shot{grid-column:1;padding-inline:0}
}


/* ---------- opening: a crossfading gallery beside the lead ----------
   The two shots that used to sit in a mosaic under "Recessed Lighting" now
   open the page, fading between each other beside the lead paragraph. Pure
   CSS: two stacked frames on one keyframe loop, the second offset by half the
   cycle. No script, and it holds on the first frame under reduced motion. */
.pg-light .lgt-open-grid{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3.25rem);align-items:center}
.pg-light .lgt-open-copy{min-width:0}
.pg-light .lgt-gallery{
  position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);
  border:1px solid rgba(231,162,0,.22);box-shadow:var(--lift)}
.pg-light .lgt-gallery picture{position:absolute;inset:0;display:block;opacity:0}
.pg-light .lgt-gallery picture:first-child{opacity:1}
.pg-light .lgt-gallery img{display:block;width:100%;height:100%;object-fit:cover}
/* a warm floor so the two frames share a tone as they cross */
.pg-light .lgt-gallery::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(16,40,61,.12),transparent 40%,rgba(16,40,61,.42))}
@media(prefers-reduced-motion:no-preference){
  /* Negative delay, not positive: a positive one leaves the second frame on
     its base opacity until it starts, then pops to full. Starting it half a
     cycle in means it is already mid-loop on load. */
  .pg-light .lgt-gallery picture{animation:lgtFade 13s linear infinite}
  .pg-light .lgt-gallery picture:nth-child(2){animation-delay:-6.5s}
}
/* The visible window runs past half the cycle so the incoming frame is already
   fading up while the outgoing one is still fading down. Without that overlap
   the gallery went black at the handover and for the first half second. */
@keyframes lgtFade{
  0%,42%{opacity:1}
  50%,92%{opacity:0}
  100%{opacity:1}
}


@media(max-width:860px){
  .pg-light .lgt-open-grid{grid-template-columns:1fr}
  .pg-light .lgt-gallery{max-width:30rem}
}

@media(max-width:900px){
  .pg-panel .pnl-sec-wide{grid-template-columns:1fr}
  .pg-panel .pnl-trio{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* three portrait columns get too narrow to read on a phone, so the trio
   stacks to one column and each photo gets the full width. */
@media(max-width:620px){
  .pg-panel .pnl-trio{grid-template-columns:1fr;max-width:26rem;margin-inline:auto}
}