/* ==========================================================================
   RTD Electrical & Contracting Services — editorial layer (2026)
   --------------------------------------------------------------------------
   The site's shared design voice, scoped to `body.ed` and loaded by every
   page on top of css/styles.css. The hero and the transparent-over-hero
   header stay scoped to `body.home`, because index.html is the only page
   with a hero behind them.

   The system, in short:
   · Three surfaces rotate down the page — paper, bone, ink — plus one
     saturated orange band. No two neighbours share a surface.
   · Headlines collide two voices: Barlow Condensed uppercase (RTD's existing
     display face) with exactly one line swapped to Playfair Display italic.
   · Display leading sits at .95, copy at 1.7. The gap is the tone of voice.
   · Tracking lives at the extremes: -.005em on display, +.22em on the small
     kicker labels, +.1em on buttons. Nothing sits in the middle but body copy.
   · Every size, leading and tracking is a token from the ladder in
     css/styles.css. Nothing here invents one.
   · Corners are 2px. Circles only for icon bubbles. Photos get long, soft,
     heavily negative-spread shadows; flat UI gets none.
   · One easing curve for every transition.
   ========================================================================== */

body.ed {
  /* Accent — RTD logo orange, used like ink. No second hue. */
  --o: #F36B21;
  --o-bright: #FF7C33;
  --o-deep: #B84A0A;      /* small text on light surfaces (AA) */
  --o-serif: #C9500F;     /* the italic accent on light surfaces (AA) */
  --o-ink: #231100;       /* text sitting on an orange fill */

  /* Surfaces */
  --d: #181818;           /* ink */
  --d-soft: #212121;      /* raised rows on ink */
  --d-line: rgba(255, 255, 255, 0.12);
  --bone: #F6F4EF;        /* the warm off-white */
  --l-line: rgba(24, 24, 24, 0.12);

  --txt: #45464B;
  --txt-dim: #6E6F73;
  --on-d: rgba(255, 255, 255, 0.72);
  --on-d-dim: rgba(255, 255, 255, 0.55);

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --sect-y: clamp(4.25rem, 8.6vw, 7rem);

  /* "Corners are 2px" applies to the components inherited from styles.css too. */
  --radius: 2px;

  background: #fff;
}

/* ──────────────────────────────────────────────── Surfaces */
.ed .h-sect { padding-block: var(--sect-y); position: relative; }
.ed .h-sect--paper { background: #fff; }
.ed .h-sect--bone  { background: var(--bone); }
.ed .h-sect--ink   { background: var(--d); }
/* A page close is a headline and its actions on one line, not a full section. */
.ed .h-sect--slim { padding-block: clamp(2.8rem, 5.2vw, 4.2rem); }

/* ──────────────────────────────────────────────── Type */
.ed .h-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.78rem;
  margin: 0 0 1.05rem;
  font-family: var(--font-head);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--o-deep);
}
.ed .h-kicker::before {
  content: "";
  flex: none;
  width: 30px;
  height: 2px;
  background: var(--o);
}
.ed .h-kicker--light { color: var(--o); }
.ed .h-kicker--on-orange { color: var(--o-ink); }
.ed .h-kicker--on-orange::before { background: var(--o-ink); }
.ed .h-kicker--center { justify-content: center; }
/* The orange rule on its own, without kicker text above a headline. */
.ed .h-kicker--rule { display: flex; margin-bottom: 1.35rem; }

.ed .h-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-display);   /* display leading below 1 — on purpose */
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: #141414;
  text-wrap: balance;
}
.ed .h-sect--ink .h-title { color: #fff; }

/* Headlines that live inside a half-width column step down a scale. */
.ed .h-title--sub { font-size: var(--fs-h3); }

/* The signature move: one line of the headline swapped to serif italic.
   Same size, same leading — only the voice and the colour change. */
.ed .h-serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--o-serif);
}
.ed .h-sect--ink .h-serif { color: var(--o); }

.ed .h-lede {
  margin: 1.15rem 0 0;
  max-width: 560px;
  font-size: var(--fs-lede);
  line-height: var(--lh-copy);
  color: var(--txt);
}
.ed .h-sect--ink .h-lede { color: var(--on-d); }
.ed .h-lede + .h-lede { margin-top: 0.9rem; }

.ed .h-fine {
  margin: 1.1rem 0 0;
  max-width: 560px;
  font-size: var(--fs-xs);
  line-height: var(--lh-sm);
  color: var(--txt-dim);
}
.ed .h-sect--ink .h-fine { color: var(--on-d-dim); }

/* ──────────────────────────────────────────────── Buttons */
.ed .btn {
  gap: 0.6rem;
  padding: 15px 26px;
  border-width: 2px;
  border-radius: 2px;
  white-space: nowrap;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ed .btn-lg { padding: 18px 34px; }

.ed .btn-primary { background: var(--o); border-color: var(--o); color: var(--o-ink); box-shadow: none; }
.ed .btn-primary:hover {
  background: var(--d); border-color: var(--d); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(243, 107, 33, 0.7);
}
.ed .btn-dark { background: var(--d); border-color: var(--d); color: #fff; }
.ed .btn-dark:hover { background: var(--o); border-color: var(--o); color: var(--o-ink); transform: translateY(-2px); }

.ed .btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.ed .btn-outline-light:hover { background: #fff; border-color: #fff; color: var(--d); transform: translateY(-2px); }

.ed .btn-outline-dark { background: transparent; border-color: rgba(24, 24, 24, 0.42); color: var(--d); }
.ed .btn-outline-dark:hover { background: var(--d); border-color: var(--d); color: #fff; transform: translateY(-2px); }

.ed .btn-on-orange { background: var(--o-ink); border-color: var(--o-ink); color: #fff; }
.ed .btn-on-orange:hover { background: #fff; border-color: #fff; color: var(--o-ink); transform: translateY(-2px); }

.ed .h-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }

/* ──────────────────────────────────────────────── Header over the hero */
.home .site-header {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.home .site-header.is-scrolled { background: var(--d); border-bottom-color: rgba(255, 255, 255, 0.08); }

/* ──────────────────────────────────────────────── Hero */
.home .hero {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: min(100vh, 900px);
  padding-block: calc(var(--header-h) + clamp(1.6rem, 3.2vw, 3.2rem)) 0;
}
.home .hero > .wrap { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; }
.home .hero-inner { max-width: 940px; }

/* With the mark above it the heading reads as the line under a logo, not as
   a poster headline — so it drops to a scale that sits beside the credential
   line. Still the two voices, still exactly one of them in the serif. */
.home .hero h1 {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  text-wrap: balance;
  color: #fff;
}
.home .hero h1 .h-serif { color: var(--o); }

/* ──────────────────────────────────────────────── Capability marquee */
.ed .marquee {
  overflow: hidden;
  padding-block: 1.15rem;
  background: var(--d);
  border-top: 3px solid var(--o);
  border-bottom: 3px solid var(--o);
}
.ed .marquee__track {
  display: flex;
  width: max-content;
  animation: rtd-marquee 42s linear infinite;
}
.ed .marquee:hover .marquee__track { animation-play-state: paused; }
.ed .marquee__group { display: flex; flex: 0 0 auto; align-items: center; }
.ed .marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 1.9rem;
  padding-right: 1.9rem;
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-head);
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}
/* Solid, outline, solid, outline — the whole trick of the strip. */
.ed .marquee__item:nth-child(2n) {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--o);
}
.ed .marquee__dot { color: var(--o); -webkit-text-stroke: 0; font-size: 0.6em; }
@supports not (-webkit-text-stroke: 1px red) {
  .ed .marquee__item:nth-child(2n) { color: var(--o); }
}
@keyframes rtd-marquee { to { transform: translateX(-50%); } }

/* ──────────────────────────────────────────────── Shared bits */
.ed .h-head { max-width: 640px; }
.ed .h-head--wide { max-width: 760px; }

.ed .h-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
}

.ed .h-checks { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.72rem; }
.ed .h-checks--2 { grid-template-columns: 1fr 1fr; gap: 0.72rem 1.8rem; }
.ed .h-checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: var(--fs-body);
  line-height: var(--lh-sm);
  color: #2C2C2E;
}
.ed .h-sect--ink .h-checks li { color: rgba(255, 255, 255, 0.86); }
.ed .h-checks li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border-radius: 50%;
  background-color: var(--o);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231100' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
  background-size: 13px 13px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Photos float; flat UI does not. */
.ed .h-media { position: relative; }
.ed .h-media img {
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.62);
}
.ed .h-media--4x3 img { aspect-ratio: 4 / 3; object-fit: cover; }
.ed .h-media--16x9 img { aspect-ratio: 16 / 9; object-fit: cover; }
.ed .h-media--5x4 img { aspect-ratio: 1161 / 941; object-fit: cover; }
.ed .h-media--21x9 img { aspect-ratio: 21 / 9; object-fit: cover; }

/* Preferred over the fixed frames above: set --arn to the photo's own
   width/height and nothing is cropped at any screen size. */
.ed .h-media img { aspect-ratio: var(--arn, auto); object-fit: cover; }
.ed .h-media figcaption {
  margin-top: 0.9rem;
  font-size: var(--fs-xs);
  line-height: var(--lh-sm);
  color: var(--txt-dim);
}
.ed .h-sect--ink .h-media figcaption { color: var(--on-d-dim); }

.ed .h-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.2rem, 5vw, 4.4rem);
  align-items: center;
}

/* ──────────────────────────────────────────────── 04 · Services list */
/* The brief's row: numeral | photo | copy. The kit's photo is 403px wide at
   4:3 in a 1232px container; 6fr:7fr gives the same ~403px photo in this
   1112px wrap and scales it down with the row below that. All five service
   photos are 4:3 too, so the frame shows each one whole at every width.
   Title and body stack in the copy column, since RTD's titles are too long
   to sit beside the copy at this photo size; the photo spans both of their
   rows and the height it adds is split evenly between them, so the pair
   centres on it. */
.ed .svc-list { margin-top: clamp(2.4rem, 4.6vw, 3.6rem); }
.ed .svc-row {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 6fr) minmax(0, 7fr) 48px;
  column-gap: clamp(0.9rem, 2.7vw, 2.4rem);
  row-gap: clamp(0.55rem, 1vw, 0.85rem);
  align-items: center;
  padding: clamp(1.5rem, 2.7vw, 2.4rem) clamp(0.6rem, 1.4vw, 1.1rem);
  margin-inline: clamp(-1.1rem, -1.4vw, -0.6rem);
  border-top: 1px solid var(--d-line);
  text-decoration: none;
  color: inherit;
  transition: background-color .35s var(--ease);
}
.ed .svc-row:last-child { border-bottom: 1px solid var(--d-line); }
.ed .svc-row:hover { background: rgba(255, 255, 255, 0.04); }

.ed .svc-row__n,
.ed .svc-row__fig,
.ed .svc-row__a { grid-row: 1 / 3; }
.ed .svc-row__n { grid-column: 1; }
.ed .svc-row__fig { grid-column: 2; }
.ed .svc-row__t { grid-row: 1; grid-column: 3; align-self: end; }
.ed .svc-row__b { grid-row: 2; grid-column: 3; align-self: start; }
.ed .svc-row__a { grid-column: 4; }

.ed .svc-row__n {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1;               /* a numeral: set solid so it sits on the row */
  color: var(--o);
}
.ed .svc-row__fig {
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
  background: #1c1b1a;
}
.ed .svc-row__fig img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.03) brightness(0.94);
  transition: transform .55s var(--ease), filter .45s var(--ease);
}
.ed .svc-row:hover .svc-row__fig img {
  transform: scale(1.055);
  filter: none;
}

.ed .svc-row__t {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: #fff;
  transition: color .3s var(--ease);
}
.ed .svc-row:hover .svc-row__t { color: var(--o); }
.ed .svc-row__b { margin: 0; font-size: var(--fs-body); line-height: var(--lh-copy); color: var(--on-d); }

.ed .svc-row__a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.ed .svc-row:hover .svc-row__a {
  background: var(--o);
  border-color: var(--o);
  color: var(--o-ink);
  transform: translateX(4px);
}

/* ──────────────────────────────────────────────── 06 · Store + rentals media stack */
.ed .media-stack { position: relative; padding-bottom: clamp(0rem, 3vw, 3.2rem); }
.ed .media-stack__b {
  position: absolute;
  right: clamp(-1.6rem, -2vw, -0.8rem);
  bottom: 0;
  width: 42%;
  max-width: 260px;
}
.ed .media-stack__b img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 5px solid var(--stack-edge, #fff);
  box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.6);
}

/* ──────────────────────────────────────────────── 07 · Work strip (full bleed) */
/* Every card is the same 16:9 frame, sized by --gal-w and nothing else, so a
   photo's own proportions never set a card's width. Each photo is cropped to
   the frame with object-fit: cover; the card's inline --pos says where the
   crop falls, so the subject stays in it. */
.ed .gallery { --gal-w: min(800px, 74vw); padding-block: var(--sect-y); background: var(--bone); }
.ed .gallery__head { margin-bottom: clamp(1.9rem, 3.6vw, 2.8rem); }
.ed .gallery__track {
  /* Lines the first card up with the heading column. The matching
     scroll-padding keeps the snap points on that line too; without it,
     mandatory snapping scrolls the padding away and the cards hug the
     screen edge. */
  --gal-pad: max(clamp(20px, 4.5vw, 34px), calc((100% - 1180px) / 2 + clamp(20px, 4.5vw, 34px)));
  display: flex;
  align-items: flex-start;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gal-pad);
  scrollbar-width: none;
  padding-inline: var(--gal-pad);
  padding-block: 4px 8px;
}
.ed .gallery__track::-webkit-scrollbar { display: none; }
.ed .gallery__track:focus-visible { outline: 2px solid var(--o); outline-offset: -4px; }

.ed .gal-card {
  position: relative;
  flex: 0 0 var(--gal-w);
  width: var(--gal-w);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 2px;
  scroll-snap-align: start;
  box-shadow: 0 26px 54px -30px rgba(0, 0, 0, 0.6);
}
/* Out of flow, so the image can never size the card. */
.ed .gal-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: transform .6s var(--ease);
}
.ed .gal-card:hover img { transform: scale(1.045); }
/* Dark only behind the caption: held level up to the top of the small orange
   label so it clears AA on pale ground, then clear above it. */
.ed .gal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 6, 5, 0.84) 64px, rgba(8, 6, 5, 0.38) 116px, rgba(8, 6, 5, 0) 170px);
}
.ed .gal-card__cap { position: absolute; z-index: 2; left: 1.25rem; right: 1.25rem; bottom: 1.2rem; }
.ed .gal-card__cat {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--o);
}
.ed .gal-card__t {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: var(--fs-h5);
  line-height: var(--lh-head);
  color: #fff;
}

.ed .gallery__hint {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.4rem 0 0;
  font-family: var(--font-head);
  font-size: var(--fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--txt-dim);
}

/* ──────────────────────────────────────────────── 08 · Orange band */
.ed .band { background: var(--o); color: var(--o-ink); padding-block: clamp(2.6rem, 4.8vw, 4rem); }
.ed .band .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.6rem 2.5rem;
}
.ed .band__body { max-width: 640px; }
.ed .band__t {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--o-ink);
}
.ed .band__t .h-serif { display: block; color: #fff; font-size: 1.1em; }
/* The emergency headline is one voice with no serif line under it, so it is
   set at the phone number's scale to hold its weight opposite it. */
.ed .band__t--lg { font-size: var(--fs-h2); }
.ed .band__p { margin: 1rem 0 0; font-size: var(--fs-body); line-height: var(--lh-copy); color: rgba(35, 17, 0, 0.88); }
.ed .band__side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; text-align: right; }
.ed .band__phone {
  display: inline-block;
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  color: var(--o-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.ed .band__phone:hover { color: #fff; }
.ed .band__note {
  font-family: var(--font-head);
  font-size: var(--fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: rgba(35, 17, 0, 0.88);
}

/* ──────────────────────────────────────────────── 09 · Contact rows */
.ed .c-rows { margin-top: clamp(1.6rem, 3vw, 2.2rem); border: 1px solid rgba(255, 255, 255, 0.08); }
.ed .c-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem clamp(1rem, 2vw, 1.4rem);
  background: var(--d-soft);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: #fff;
  text-decoration: none;
  transition: background-color .3s var(--ease);
}
.ed .c-row:last-child { border-bottom: 0; }
.ed a.c-row:hover { background: #2B2B2B; }
.ed .c-row__i {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--o);
  color: var(--o-ink);
}
.ed .c-row__l {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--on-d-dim);
}
.ed .c-row__v {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-num);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  line-height: var(--lh-snug);
  color: #fff;
}
.ed a.c-row:hover .c-row__v { color: var(--o); }
.ed .c-row__v small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--on-d-dim);
}

.ed .hours-rows { margin-top: 1.1rem; }
.ed .hours-rows li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  padding-block: 0.72rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-sm);
  color: var(--on-d);
}
.ed .hours-rows li:last-child { border-bottom: 0; }
.ed .hours-rows .day { font-weight: 600; color: #fff; }
.ed .hours-rows .day em {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--on-d-dim);
}
.ed .hours-rows .time {
  font-family: var(--font-head);
  font-size: var(--fs-num);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  line-height: var(--lh-head);
  color: #fff;
  white-space: nowrap;
}

/* ──────────────────────────────────────── Subpage banner
   The same two-voice headline as the homepage hero, at page-title scale. The
   type is the base layer's h1 (--fs-display); only the accent colour is new. */
.ed .page-banner { padding-block: clamp(3.4rem, 7vw, 5.6rem); }
.ed .page-banner h1 .h-serif { color: var(--o); }
.ed .page-banner .h-lede { color: rgba(255, 255, 255, 0.76); max-width: 600px; }
.ed .page-banner .h-actions { margin-top: 1.9rem; }

/* ──────────────────────────────────────── Electrical · Residential
   electrical.html only (#residential). A 4:3 landscape photo beside the
   copy on tighter padding than a standard section, with the copy hung from
   the photo's top edge rather than centred on it. The text column runs a
   little wider so the checklist keeps two columns down to small laptops;
   stacked, the copy leads and the photo follows. */
.ed #residential { padding-block: clamp(3rem, 6vw, 5rem); }
.ed #residential .h-split { gap: clamp(1.75rem, 4.6vw, 4rem); align-items: start; }
.ed #residential .h-split .h-media { order: 0; }
.ed #residential .h-media img { box-shadow: 0 22px 40px -26px rgba(0, 0, 0, 0.42); }
.ed #residential .h-lede { margin-top: 1rem; }
.ed #residential .h-checks { max-width: 560px; margin-top: 1.4rem; }
.ed #residential .h-checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.25rem; }

@media (min-width: 1001px) {
  .ed #residential .h-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
@media (max-width: 540px) {
  .ed #residential .h-checks--2 { grid-template-columns: minmax(0, 1fr); }
}

/* ──────────────────────────────────────── Electrical · Commercial
   electrical.html only (#commercial). The same measurements as
   Electrical · Residential above, so the pair reads as one layout on two
   surfaces. Its photo is portrait, so the 4:3 frame (set by --arn in the
   markup) crops ceiling and floor only, never the sides, and holds on the
   panel and the receptacles and cable runs to its right. The shared flip
   already puts the copy first when stacked. */
.ed #commercial { padding-block: clamp(3rem, 6vw, 5rem); }
.ed #commercial .h-split { gap: clamp(1.75rem, 4.6vw, 4rem); align-items: start; }
.ed #commercial .h-media img { object-position: 50% 64%; box-shadow: 0 22px 40px -26px rgba(0, 0, 0, 0.42); }
.ed #commercial .h-lede { margin-top: 1rem; }
.ed #commercial .h-checks { max-width: 560px; margin-top: 1.4rem; }
.ed #commercial .h-checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.25rem; }

@media (min-width: 1001px) {
  .ed #commercial .h-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
@media (max-width: 540px) {
  .ed #commercial .h-checks--2 { grid-template-columns: minmax(0, 1fr); }
}

/* Every lede on the page below the banner is one short sentence; balancing
   keeps a single word from wrapping onto a line of its own. */
.ed #residential .h-lede,
.ed #commercial .h-lede,
.ed #our-work .h-lede,
.ed #get-in-touch .h-lede { text-wrap: balance; }

/* ──────────────────────────────────────── Electrical · Our electrical work
   electrical.html only (#our-work). Two equal columns of identical 5:4
   frames, one column on phones. The photo fills its frame with
   object-fit: cover; the figure's inline --pos picks where the frame sits
   on the photo. Corners are square and there is no shadow or shade: the
   photo and its orange label are all there is. The row gap is wider than
   the column gap so each label reads with the photo above it. */
.ed #our-work .work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem) clamp(14px, 2vw, 24px);
  margin-top: clamp(2.1rem, 4vw, 3rem);
}
.ed #our-work .work-grid figure { margin: 0; }
.ed #our-work .work-grid img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  border-radius: 0;
  background: var(--d-soft);
}
.ed #our-work .work-grid figcaption {
  margin-top: 0.95rem;
  font-family: var(--font-head);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--o);
}

@media (max-width: 560px) {
  .ed #our-work .work-grid { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
}

/* ──────────────────────────────────────── Electrical · Get in touch
   electrical.html only (#get-in-touch). The heading and its line sit to
   the left with the two contact buttons opposite, on the bottom line. The
   heading block gets a smaller basis than its max-width so the row holds
   together on desktop; on narrow screens the buttons wrap underneath. */
.ed #get-in-touch .h-head { flex: 1 1 24rem; }
.ed #get-in-touch .h-actions { margin-top: 0; }

/* ──────────────────────────────────────── Generators · Hero
   generators.html (.gen-hero). The Construction hero (.con-hero, below)
   shares these rules and changes only where its photo sits and, beside the
   title, how deep the fade runs. One photograph across the banner, with
   a black fade laid over it from the left: near-solid behind the title,
   easing off through the middle, gone before the generator. There is no
   panel edge anywhere; the dark side and the photo are one surface.

   The generator stands in the middle of its photo, and the title needs the
   left half, so the photo is not simply laid edge to edge. It is sized off
   the banner's height and pinned by the generator itself: left: 70% plus
   translateX(-46.5%) puts the machine's centre line (46.5% across the
   photo) at 70% across the banner at every desktop width. That brings the
   photo's own left edge in from the screen edge, under the darkest part of
   the fade, and the mask feathers that edge away so it never reads as a
   line. min-width keeps the right-hand side covered on very wide screens.

   Stacked (1040px and under) a landscape photo cannot fill a banner taller
   than it is wide without cropping the generator, so it runs across the
   top at close to its own proportions (4:3 on phones, so the machine is
   not shrunk to a strip) and the same black rises up through the lawn to
   take the title. --gh-band is the photo's height, and the copy starts
   from it, so the title always lands on the darkened grass below the
   generator's pad. */
.ed .gen-hero,
.ed .con-hero {
  --gh-ink: 10, 9, 8;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 44vw, 760px);
  padding-block: 0;
  background: rgb(var(--gh-ink));
}
.ed .gen-hero > .wrap,
.ed .con-hero > .wrap { width: 100%; padding-block: clamp(3.4rem, 7vw, 5.6rem); }
.ed .gen-hero__copy,
.ed .con-hero__copy { max-width: calc(50% - clamp(2rem, 4vw, 3.5rem)); }
.ed .gen-hero__photo,
.ed .con-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
}
.ed .gen-hero__photo img,
.ed .con-hero__photo img {
  position: absolute;
  top: 50%;
  left: 70%;
  width: auto;
  min-width: 62%;
  max-width: none;
  height: 124%;
  object-fit: cover;
  transform: translate(-46.5%, -43%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%);
  mask-image: linear-gradient(90deg, transparent, #000 22%);
}
.ed .gen-hero__photo::after,
.ed .con-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(var(--gh-ink), 0.4) 0%,
      rgba(var(--gh-ink), 0) 22%,
      rgba(var(--gh-ink), 0) 72%,
      rgba(var(--gh-ink), 0.32) 100%),
    linear-gradient(90deg,
      rgba(var(--gh-ink), 0.96) 0%,
      rgba(var(--gh-ink), 0.94) 16%,
      rgba(var(--gh-ink), 0.9) 26%,
      rgba(var(--gh-ink), 0.82) 34%,
      rgba(var(--gh-ink), 0.7) 41%,
      rgba(var(--gh-ink), 0.55) 47%,
      rgba(var(--gh-ink), 0.38) 53%,
      rgba(var(--gh-ink), 0.22) 59%,
      rgba(var(--gh-ink), 0.1) 65%,
      rgba(var(--gh-ink), 0.03) 71%,
      rgba(var(--gh-ink), 0) 77%);
}

@media (max-width: 1040px) {
  .ed .gen-hero,
  .ed .con-hero {
    --gh-band: min(56.28vw, max(58vh, 320px), 560px);
    display: block;
    min-height: 0;
  }
  .ed .gen-hero > .wrap,
  .ed .con-hero > .wrap { padding-block: calc(var(--gh-band) * 0.78) clamp(2.8rem, 7vw, 4rem); }
  .ed .gen-hero__copy,
  .ed .con-hero__copy { max-width: 640px; }
  .ed .gen-hero__photo,
  .ed .con-hero__photo { bottom: auto; height: var(--gh-band); }
  .ed .gen-hero__photo img,
  .ed .con-hero__photo img {
    top: 0;
    left: 0;
    width: 100%;
    min-width: 0;
    height: 100%;
    object-position: 47% 55%;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .ed .gen-hero__photo::after,
  .ed .con-hero__photo::after {
    background: linear-gradient(180deg,
      rgba(var(--gh-ink), 0.3) 0%,
      rgba(var(--gh-ink), 0) 20%,
      rgba(var(--gh-ink), 0) 44%,
      rgba(var(--gh-ink), 0.2) 54%,
      rgba(var(--gh-ink), 0.45) 62%,
      rgba(var(--gh-ink), 0.7) 70%,
      rgba(var(--gh-ink), 0.87) 78%,
      rgba(var(--gh-ink), 0.95) 86%,
      rgba(var(--gh-ink), 0.985) 94%,
      rgb(var(--gh-ink)) 100%);
  }
}
@media (max-width: 560px) {
  .ed .gen-hero { --gh-band: min(75vw, max(58vh, 320px), 560px); }
}

/* ──────────────────────────────────────── Construction · Hero
   contracting.html only (.con-hero). Everything above applies except where
   the photo sits and, beside the title, how deep the fade runs. The cottage
   is not one object in the middle of its frame like the generator: it runs
   nearly the full width of a wide panorama (4000 x 1848), from 16% to 98%
   across and 15% to 97% down.

   So the photo is not scaled past the banner's height, which would cut off
   the roof or the posts, and it is pinned by its right-hand edge, so none
   of the building is cropped and the deck and its railings run out across
   the clear side of the banner. The sunroom on the left of the house sits
   under the fade with the title, as the siding does on Generators, and the
   photo's own left edge, where it falls inside the banner, is feathered
   away by the same mask. min-width is lifted so very wide screens get more
   black on the left rather than a photo enlarged until the roof and posts
   are cropped.

   "and renovations." is a hair wider than the half-width copy column, so
   beside the photo it is held to one line, as "and service." is; the title
   then breaks into three lines like the Generators one. That line ends 46
   to 51% across, over white window frames and a glass door, where the
   Generators fade has already half let go. So this fade holds a little
   more black out to just past the end of the line, then lets go over a
   shorter run and is gone by 78%, a step past the Generators 77%. The
   orange line then clears 3:1 against the rendered pixels from 1041px to
   3440px.

   Stacked, 54vw gives the photo a band about 1.85:1, so the sides lose
   only trees: object-position keeps the trimmed strip almost all on the
   left, clear of the house. */
.ed .con-hero__photo img {
  top: 0;
  left: auto;
  right: 0;
  min-width: 0;
  height: 100%;
  transform: none;
}

@media (min-width: 1041px) {
  .ed .con-hero h1 .h-serif { white-space: nowrap; }
  .ed .con-hero__photo::after {
    background:
      linear-gradient(180deg,
        rgba(var(--gh-ink), 0.4) 0%,
        rgba(var(--gh-ink), 0) 22%,
        rgba(var(--gh-ink), 0) 72%,
        rgba(var(--gh-ink), 0.32) 100%),
      linear-gradient(90deg,
        rgba(var(--gh-ink), 0.96) 0%,
        rgba(var(--gh-ink), 0.94) 16%,
        rgba(var(--gh-ink), 0.9) 26%,
        rgba(var(--gh-ink), 0.85) 34%,
        rgba(var(--gh-ink), 0.8) 41%,
        rgba(var(--gh-ink), 0.78) 47%,
        rgba(var(--gh-ink), 0.72) 52%,
        rgba(var(--gh-ink), 0.48) 58%,
        rgba(var(--gh-ink), 0.25) 64%,
        rgba(var(--gh-ink), 0.1) 70%,
        rgba(var(--gh-ink), 0.03) 74%,
        rgba(var(--gh-ink), 0) 78%);
  }
}
@media (max-width: 1040px) {
  .ed .con-hero { --gh-band: min(54vw, max(58vh, 320px), 560px); }
  .ed .con-hero__photo img { object-position: 88% 55%; }
}

/* ──────────────────────────────────────── Generators · Portable or standby
   generators.html only (#types). The heading leads; under it the three
   kinds of generator sit as ruled rows beside the GP6500E photo. The photo
   is a wide panorama, so its 4:3 frame (--arn in the markup) trims the
   sides only, keeping the front generator from the handle to the wheel and
   matching the height of the three rows. Each row stacks its title over
   its two lines of copy to suit the half column. Stacked, the photo sits
   between the heading and the rows: whole on tablets, back in the 4:3
   frame on phones so the generator is not shrunk to a strip. */
.ed #types .h-split { margin-top: clamp(2rem, 3.8vw, 2.9rem); }
.ed #types .rows { margin-top: 0; }
.ed #types .rows > li { grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
.ed #types .h-media img { object-position: 40% 50%; }

@media (max-width: 1040px) {
  .ed #types .h-media img { aspect-ratio: 1844 / 853; }
}
@media (max-width: 560px) {
  .ed #types .h-media img { aspect-ratio: 4 / 3; }
}

/* ──────────────────────────────────────── Generators · GenerLink
   generators.html only (#generlink). The installed GenerLink on the left
   and the copy on the right, on the shared .h-split: the same arrangement
   as the sales section above it, so it needs no rules of its own. */

/* ──────────────────────────────────────── Photo set
   Rows are composed in the markup rather than packed automatically, so each
   one is a deliberate mix of orientations. Inside a row every figure grows in
   proportion to its own photo's aspect ratio (--arn is width/height), which
   lands the row on a single height with nothing cropped, stretched or forced
   into a shared frame. --ph-cap stops a sparse row running away vertically. */
.ed .ph {
  --ph-cap: 30rem;
  --ph-unit: 0px;        /* a length, so the figure multiplies it by its own --arn */
  display: grid;
  gap: 14px;
  margin-top: clamp(2.1rem, 4vw, 3rem);
}
.ed .ph--tall, .ed .ph--feature { --ph-cap: 38rem; }
.ed .ph__row {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.ed .ph figure {
  flex: var(--arn, 1.333) 1 calc(var(--arn, 1.333) * var(--ph-unit));
  min-width: 0;
  max-width: calc(var(--arn, 1.333) * var(--ph-cap));
  margin: 0;
}
.ed .ph img {
  width: 100%;
  aspect-ratio: var(--arn, 4 / 3);
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 26px 54px -30px rgba(0, 0, 0, 0.55);
}
.ed .h-sect--ink .ph img { box-shadow: 0 26px 54px -26px rgba(0, 0, 0, 0.85); }
.ed .ph figcaption {
  margin-top: 0.8rem;
  font-size: var(--fs-xs);
  line-height: var(--lh-sm);
  color: var(--txt-dim);
}
.ed .ph figcaption b {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--o-deep);
}
.ed .h-sect--ink .ph figcaption { color: var(--on-d-dim); }
.ed .h-sect--ink .ph figcaption b { color: var(--o); }

/* ──────────────────────────────────────── Ruled rows
   Replaces the bordered cards: a heading and a line of copy per item,
   separated by hairlines. Nothing boxed, nothing to decorate. */
.ed .rows { margin-top: clamp(2rem, 3.8vw, 2.9rem); border-top: 1px solid var(--l-line); }
.ed .rows > li, .ed .rows > div {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: 0.4rem clamp(1.4rem, 3.4vw, 3rem);
  padding-block: clamp(1.15rem, 2.1vw, 1.7rem);
  border-bottom: 1px solid var(--l-line);
}
.ed .rows__t {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  color: #141414;
}
.ed .rows__b { margin: 0; font-size: var(--fs-body); line-height: var(--lh-copy); color: var(--txt); }
.ed .h-sect--ink .rows { border-top-color: var(--d-line); }
.ed .h-sect--ink .rows > li, .ed .h-sect--ink .rows > div { border-bottom-color: var(--d-line); }
.ed .h-sect--ink .rows__t { color: #fff; }
.ed .h-sect--ink .rows__b { color: var(--on-d); }

/* A plain ruled inventory list where each line is a category, not a pitch. */
.ed .tags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0 clamp(1.4rem, 3vw, 2.6rem);
  margin: 1.7rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--l-line);
}
.ed .tags li {
  padding-block: 0.62rem;
  border-bottom: 1px solid var(--l-line);
  font-family: var(--font-head);
  font-size: var(--fs-h6);
  font-weight: 600;             /* a list entry, not a title */
  letter-spacing: var(--ls-head-sm);
  line-height: var(--lh-head);
  text-transform: uppercase;
  color: #2C2C2E;
}
.ed .h-sect--ink .tags { border-top-color: var(--d-line); }
.ed .h-sect--ink .tags li { border-bottom-color: var(--d-line); color: rgba(255, 255, 255, 0.88); }

/* ──────────────────────────────────────── Cross-page links
   One hairline row pointing at the page that already covers a subject,
   in place of repeating that page's content here. */
.ed .xlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem clamp(1.6rem, 3.6vw, 3rem);
  margin-top: clamp(2.2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--l-line);
}
.ed .h-sect--ink .xlinks { border-top-color: var(--d-line); }
.ed .xlink {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-head);
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: var(--ls-btn);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--o-deep);
  text-decoration: none;
  transition: color .3s var(--ease), gap .3s var(--ease);
}
.ed .xlink svg { flex: none; }
.ed .xlink:hover { color: #141414; gap: 0.95rem; }
.ed .h-sect--ink .xlink { color: var(--o); }
.ed .h-sect--ink .xlink:hover { color: #fff; }

/* ──────────────────────────────────────── Hours and address, on ink
   Carried on the two pages that own them: the store and contact. */
.ed .fact-head {
  margin: 0 0 0.2rem;
  font-family: var(--font-head);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--o-deep);
}
.ed .h-sect--ink .fact-head { color: var(--o); }
.ed .addr {
  margin: 0.55rem 0 0;
  font-family: var(--font-head);
  font-size: var(--fs-num-md);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  line-height: var(--lh-snug);
}
.ed .addr a { color: #141414; text-decoration: none; }
.ed .addr a:hover { color: var(--o-deep); }
.ed .h-sect--ink .addr a { color: #fff; }
.ed .h-sect--ink .addr a:hover { color: var(--o); }

/* The band carries actions as well as a phone number on the pages whose
   close is a quote or a rental rather than an emergency. */
.ed .band__side .h-actions { margin-top: 0; justify-content: flex-end; }

/* ──────────────────────────────────────── Facts pair
   Address and hours, side by side under a hairline. Used on the two pages
   that own them: the store and contact. */
.ed .facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  margin-top: clamp(2.4rem, 4.4vw, 3.4rem);
  padding-top: clamp(1.6rem, 2.8vw, 2.2rem);
  border-top: 1px solid var(--l-line);
}
.ed .h-sect--ink .facts { border-top-color: var(--d-line); }
.ed .facts .hours-list { margin-top: 0.5rem; }
.ed .facts .hours-note { color: var(--txt-dim); }

/* The store page runs three of them (address, hours and phone), so the one
   line answers where, when and how to reach the counter. Two up on tablets,
   stacked on phones. */
.ed #hours .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ed #hours .facts .h-actions { margin-top: 1.25rem; }
@media (max-width: 900px) {
  .ed #hours .facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .ed #hours .facts { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────── Components inherited from
   styles.css, brought into the editorial voice. */
.ed .cat-chip { border-radius: 2px; padding: 9px 14px; }
.ed .channel .label { color: var(--o-deep); }
.ed .form-card { box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.5); }
/* A panel heading, a step under the section headings around it. */
.ed .form-card h3 { font-size: var(--fs-h4); }

@media (max-width: 700px) {
  .ed .facts { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* ──────────────────────────────────────────────── Motion */
@media (prefers-reduced-motion: reduce) {
  .ed .marquee__track { animation: none; }
  .ed .btn:hover,
  .ed .svc-row:hover .svc-row__a { transform: none; }
  .ed .svc-row:hover .svc-row__fig img { transform: none; }
  .ed .gal-card:hover img { transform: none; }
}

/* ──────────────────────────────────────────────── Responsive */
/* Only the collapsed dropdown gets a surface. Above this width the header
   is transparent over the hero and the photograph runs under the nav. */
@media (max-width: 1000px) {
  .home .site-nav { background: var(--d); }
}

@media (max-width: 1040px) {
  .ed .h-split { grid-template-columns: 1fr; gap: 2.4rem; }
  .ed .h-split .h-media, .ed .h-split .media-stack { order: -1; }
  .ed .h-split--flip .h-media, .ed .h-split--flip .media-stack { order: 0; }
  .ed .svc-row { grid-template-columns: 56px minmax(0, 6fr) minmax(0, 7fr) 46px; }
  /* The copy column is under 300px wide here, so the service title takes the
     step below rather than wrapping a two-word service onto two lines. */
  .ed .svc-row__t { font-size: var(--fs-h4); }
}

@media (max-width: 860px) {
  /* The brief's hero is 100vh at every width. It held `auto` here only
     because the old spec rail made the frame taller than a phone screen. */
  .home .hero { padding-bottom: clamp(1.4rem, 4vw, 2.2rem); }
  .home .hero > .wrap { padding-block: clamp(1rem, 4vw, 2.5rem) 0; }
  .ed .h-checks--2 { grid-template-columns: 1fr; }
  .ed .media-stack { padding-bottom: 0; }
  .ed .media-stack__b { position: static; width: 100%; max-width: none; margin-top: 12px; }
  .ed .media-stack__b img { aspect-ratio: 16 / 9; border-width: 0; }
  .ed .band .wrap { flex-direction: column; align-items: flex-start; }
  .ed .band__side { align-items: flex-start; text-align: left; }
}

@media (max-width: 560px) {
  .home .hero-ctas .btn, .ed .h-actions .btn { width: 100%; }
  .ed .h-head-row { align-items: flex-start; }

  /* The hero headline is three sentences on one line; on a phone it takes
     the step down rather than breaking mid-sentence. */
  .home .hero h1 { font-size: var(--fs-h4); }
  /* A two-column inventory list on a phone column: the control step. */
  .ed .tags li { font-size: var(--fs-btn); }

  /* Give the row copy the full width; the arrow rides with the title. */
  .ed .svc-row { grid-template-columns: 48px minmax(0, 1fr) 42px; column-gap: 0.85rem; }
  .ed .svc-row__fig { grid-row: 1; grid-column: 1 / -1; margin-bottom: 0.3rem; }
  .ed .svc-row__n { grid-row: 2; grid-column: 1; font-size: var(--fs-h4); }
  /* The title shares its line with the numeral and the arrow here, so it
     steps down the ladder rather than wrapping in a 1fr column. */
  .ed .svc-row__t { grid-row: 2; grid-column: 2; align-self: center; font-size: var(--fs-h5); }
  .ed .svc-row__b { grid-row: 3; grid-column: 2 / 4; }
  .ed .svc-row__a { grid-row: 2; grid-column: 3; width: 40px; height: 40px; align-self: center; }

  .ed .gallery { --gal-w: 86vw; }
  .ed .gal-card::after { background: linear-gradient(to top, rgba(8, 6, 5, 0.84) 54px, rgba(8, 6, 5, 0.36) 92px, rgba(8, 6, 5, 0) 132px); }
  .ed .gal-card__cap { left: 1rem; right: 1rem; bottom: 1rem; }
}

/* ──────────────────────────────────────── Responsive: shared components */
@media (max-width: 860px) {
  .ed .rows > li, .ed .rows > div { grid-template-columns: 1fr; gap: 0.55rem; }
  /* A composed row of four is too tight here, so give each figure a basis and
     let the row wrap: landscapes take a line, portraits pair up. */
  .ed .ph { --ph-unit: 11rem; --ph-cap: 34rem; gap: 12px; }
  .ed .ph__row { flex-wrap: wrap; }
  /* The store's trio of 4:3 photographs wraps to a pair and a single here.
     Half the row less half its gap is exactly what each of the pair gets, so
     capping every figure there lands the single on that same width, centred
     under them, instead of letting it run to the full column. */
  .ed #shelves .ph__row + .ph__row figure { max-width: calc(50% - 6px); }
}

@media (max-width: 560px) {
  .ed .ph { --ph-unit: 20rem; --ph-cap: 30rem; gap: 10px; }
  /* Narrower than the pair is worth: the store's trio stacks one to a line
     here, each photograph across the full column. */
  .ed #shelves .ph__row + .ph__row figure { max-width: none; }
  .ed .band__side .h-actions { justify-content: flex-start; }
  .ed .xlinks { gap: 0.8rem; }
}