/* ==========================================================================
   Components. Built on design-system.css.
   ========================================================================== */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--dark); color: #fff;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  text-decoration: none; font-weight: 600;
}
.skip:focus { left: var(--s-4); top: var(--s-4); }

/* ---------- Call bar ------------------------------------------------------ */
.callbar {
  background: var(--dark);
  color: rgba(255,255,255,.8);
  font-size: .875rem;
}
.callbar__in {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-2) var(--s-5); flex-wrap: wrap;
  padding-block: .62rem;
}
.callbar__dot {
  width: .5em; height: .5em; border-radius: 50%;
  background: var(--go); flex: none;
  box-shadow: 0 0 0 3px rgba(30,158,98,.22);
}
.callbar a { color: var(--volt); text-decoration: none; font-weight: 600; }
.callbar a:hover { text-decoration: underline; }
.callbar__item { display: inline-flex; align-items: center; gap: var(--s-2); }
@media (max-width: 980px) { .callbar__item--hide { display: none; } }

/* ---------- Masthead ------------------------------------------------------ */
/* Dark. The supplied logo lockup is white artwork, so it only reads on a dark
   ground, and the masthead then sits continuous with the hero. */
.masthead {
  position: sticky; top: 0; z-index: 1200;
  background: rgba(22,24,28,.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule-dark);
  color: #fff;
}
.masthead__in { display: flex; align-items: center; gap: var(--s-4); padding-block: var(--s-4); }
.masthead__logo { display: flex; align-items: center; text-decoration: none; margin-right: auto; min-width: 0; }
.masthead__logo img { height: 44px; width: auto; aspect-ratio: 208 / 70; object-fit: contain; }
@media (max-width: 900px) { .masthead__in .btn--alert { display: none; } }
@media (max-width: 560px) { .masthead__logo img { height: 34px; } }

.nav { display: flex; align-items: center; gap: var(--s-1); }
@media (max-width: 1040px) { .nav { display: none; } }
.nav__link {
  display: inline-flex; align-items: center; gap: .35em;
  font-weight: 500; font-size: .96rem;
  color: rgba(255,255,255,.8); text-decoration: none;
  padding: .55rem .8rem; border-radius: var(--r-pill);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link:hover { background: rgba(255,255,255,.1); color: #fff; }

.nav__item { position: relative; }
.nav__drop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1205;
  min-width: 21rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--lift-3);
  padding: var(--s-3);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop { opacity: 1; visibility: visible; transform: none; }
.nav__drop a {
  display: block; padding: .55rem .75rem;
  font-size: .93rem; color: var(--ink-2); text-decoration: none;
  border-radius: var(--r-sm);
}
.nav__drop a:hover { background: var(--volt-soft); color: var(--ink); }

.burger {
  display: none; align-items: center; gap: var(--s-2);
  background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid var(--rule-dark); border-radius: var(--r-pill);
  padding: .68rem 1.05rem; cursor: pointer; font-weight: 600; font-size: .94rem;
}
.burger:hover { background: rgba(255,255,255,.18); }
@media (max-width: 1040px) { .burger { display: inline-flex; } }

.mobnav { display: none; border-top: 1px solid var(--rule-dark); background: var(--dark-2); }
.mobnav[data-open="true"] { display: block; }
.mobnav a { display: block; padding: .85rem 0; border-bottom: 1px solid var(--rule-dark); color: #fff; text-decoration: none; font-weight: 600; }
.mobnav__sub a { padding-left: var(--s-4); font-weight: 400; font-size: .93rem; color: rgba(255,255,255,.72); }

/* ---------- Hero ---------------------------------------------------------- */
.hero { position: relative; background: var(--dark); color: #fff; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 12% 0%, rgba(255,196,0,.16), transparent 62%);
}
.hero__in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 6rem) clamp(2.5rem, 5vw, 4.5rem);
}
@media (max-width: 980px) { .hero__in { grid-template-columns: 1fr; } }

.hero__title { font-size: var(--t-hero); line-height: var(--lh-tight); letter-spacing: -.04em; font-weight: 800; }
.hero__title em { font-style: normal; color: var(--volt); }
.hero__lede { font-size: clamp(1.06rem, 1.3vw, 1.22rem); color: rgba(255,255,255,.78); max-width: 46ch; margin-top: var(--s-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* Proof line. A sentence with the numbers inside it, not a stat template. */
.proofline {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--rule-dark);
  font-size: var(--t-small); color: rgba(255,255,255,.72);
}
.proofline strong { color: #fff; font-weight: 600; }
.proofline .stars { vertical-align: -2px; }

/* ---------- Quote form ---------------------------------------------------- */
.quote {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-xl);
  box-shadow: var(--lift-3);
  overflow: hidden;
}
.quote__head { padding: var(--s-6) var(--s-6) var(--s-4); }
.quote__title { font-size: 1.45rem; font-weight: 700; letter-spacing: -.028em; }
.quote__sub { font-size: .95rem; color: var(--ink-2); margin-top: var(--s-2); }
.quote__body { padding: 0 var(--s-6) var(--s-5); display: grid; gap: var(--s-4); }
.quote__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 620px) { .quote__row { grid-template-columns: 1fr; } }
.quote__foot {
  padding: var(--s-4) var(--s-6) var(--s-6);
  font-size: var(--t-small); color: var(--ink-3); text-align: center;
}
.quote__foot a { font-weight: 600; color: var(--ink); }

/* ---------- Trust row ----------------------------------------------------- */
.trust { background: var(--volt); color: var(--volt-ink); }
.trust__in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: var(--s-5) var(--s-6); padding-block: var(--s-6);
}
.trust__item { display: grid; gap: .15rem; }
.trust__label { font-weight: 700; font-size: 1rem; display: flex; align-items: center; gap: .5em; }
.trust__label svg { flex: none; }
.trust__note { font-size: .875rem; color: rgba(58,43,0,.72); line-height: 1.5; }

/* ==========================================================================
   Services grid. Horizontal cards: photo left, copy right, action top right.
   ========================================================================== */
.svcgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 900px) { .svcgrid { grid-template-columns: 1fr; } }

.svc {
  position: relative;
  display: grid;
  grid-template-columns: 13.5rem 1fr;
  align-items: stretch;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--lift-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.svc:hover { transform: translateY(-3px); box-shadow: var(--lift-3); border-color: var(--rule-2); }
@media (max-width: 560px) { .svc { grid-template-columns: 8.5rem 1fr; } }
@media (max-width: 400px) { .svc { grid-template-columns: 1fr; } }

.svc__media { position: relative; overflow: hidden; background: var(--bg-2); min-height: 11rem; }
.svc__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.svc:hover .svc__media img { transform: scale(1.045); }
@media (max-width: 400px) { .svc__media { min-height: 9rem; } }

.svc__body {
  padding: var(--s-5) var(--s-6) var(--s-5) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-2);
  justify-content: center;
}
.svc__title { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; padding-right: 2.5rem; }
.svc__text  { font-size: .9rem; color: var(--ink-2); line-height: 1.55; }
.svc__tag   { align-self: flex-start; margin-top: var(--s-1); }

.svc__go {
  position: absolute; top: var(--s-4); right: var(--s-4);
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-2); color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.svc:hover .svc__go { background: var(--volt); color: var(--volt-ink); transform: translate(2px, -2px); }

/* ---------- Reviews marquee (sits under the hero) ------------------------ */
.rmq { padding-block: var(--s-7) var(--s-8); background: var(--bg); }
.rmq--dark { background: var(--dark-2); color: #fff; }
.rmq__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s-3) var(--s-5); margin-bottom: var(--s-5);
}
.rmq__title { font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 650; letter-spacing: -.022em; }
.rmq__meta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: .9rem; color: var(--ink-3);
}
.rmq--dark .rmq__meta { color: rgba(255,255,255,.62); }
.rmq .trace { --trace-dur: 96s; }

.rmqcard {
  flex: none;
  width: clamp(17rem, 27vw, 22rem);
  margin: 0;
  padding: var(--s-5);
  display: grid;
  gap: var(--s-3);
  align-content: start;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
}
.rmq--dark .rmqcard { background: var(--dark-3); border-color: var(--rule-dark); }
.rmqcard__top { display: flex; align-items: center; gap: var(--s-3); }
.rmqcard__g { margin-left: auto; }
.rmqcard__text {
  margin: 0; font-size: .93rem; line-height: 1.58; color: var(--ink-2);
}
.rmq--dark .rmqcard__text { color: rgba(255,255,255,.78); }
.rmq--dark .rev__name { color: #fff; }
.rmq--dark .rev__meta { color: rgba(255,255,255,.5); }
.rmq--dark .rev__avatar { background: rgba(255,196,0,.16); color: var(--volt); }

/* ---------- Jobs marquee frames ------------------------------------------ */
.trace__frame {
  flex: none;
  width: clamp(14rem, 24vw, 20rem);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--dark-2);
  position: relative;
}
.trace__frame img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; }
.trace__frame figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s-6) var(--s-4) var(--s-4);
  background: linear-gradient(to top, rgba(10,11,13,.92), rgba(10,11,13,.55) 55%, transparent);
  color: #fff;
}
.trace__cap strong { display: block; font-size: .9rem; font-weight: 650; }
.trace__detail {
  display: block; margin-top: .18rem;
  font-size: .8rem; line-height: 1.4; color: rgba(255,255,255,.72);
}

/* ---------- Reviews ------------------------------------------------------- */
.stars { display: inline-flex; gap: 1.5px; color: #F5A623; line-height: 0; }
.stars svg { fill: currentColor; }

.revgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: var(--s-5); }

.rev {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: grid; gap: var(--s-3);
  align-content: start;
  box-shadow: var(--lift-1);
}
.rev__top { display: flex; align-items: center; gap: var(--s-3); }
.rev__avatar {
  width: 2.5rem; height: 2.5rem; flex: none;
  display: grid; place-items: center;
  background: var(--volt-soft); color: #6B5200;
  border-radius: 50%; font-weight: 700; font-size: 1rem;
}
.rev__who { display: grid; gap: .05rem; min-width: 0; }
.rev__name { font-weight: 600; font-size: .975rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rev__meta { font-size: .8125rem; color: var(--ink-3); }
.rev__text { font-size: .95rem; line-height: 1.6; color: var(--ink-2); }
.rev__text--clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rev__more {
  justify-self: start; background: none; border: 0; padding: 0; cursor: pointer;
  font-size: .9rem; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--volt-deep); text-decoration-thickness: 2px;
}

/* The reviews wall. Reviews vary a lot in length, so a fixed grid leaves
   ragged gaps. CSS columns let each card take the height it needs and keeps
   the wall tight. Reading order stays top to bottom within a column, which is
   fine for an unordered set of testimonials. */
.revwall {
  columns: 5 17rem;
  column-gap: var(--s-5);
}
@media (max-width: 1500px) { .revwall { columns: 4 17rem; } }
@media (max-width: 1180px) { .revwall { columns: 3 16rem; } }
@media (max-width: 860px)  { .revwall { columns: 2 15rem; } }
@media (max-width: 560px)  { .revwall { columns: 1; } }
.revwall .rev {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: var(--s-5);
  display: block;
}
.revwall .rev > * + * { margin-top: var(--s-3); }
.revwall .rev[hidden] { display: none; }

.revsum {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6);
  padding: var(--s-5) var(--s-6);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-6);
  box-shadow: var(--lift-1);
}
.revsum__score { font-size: 2.4rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.revsum__meta { font-size: .95rem; color: var(--ink-2); }
.revsum__src { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); font-size: .9rem; color: var(--ink-2); }

/* ---------- Steps and tables ---------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s-5); }
.step { display: grid; gap: var(--s-2); align-content: start; }
.step__n {
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--volt); color: var(--volt-ink);
  font-weight: 700; font-size: .95rem;
}
.step h3 { font-size: 1.0625rem; }
.step p { font-size: .92rem; color: var(--ink-2); }
.section--dark .step p { color: rgba(255,255,255,.7); }

.spec-wrap { overflow-x: auto; border-radius: var(--r-lg); }
.spec { width: 100%; font-size: .95rem; }
.spec th, .spec td { text-align: left; padding: 1rem 1.15rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.spec thead th { font-weight: 600; font-size: .9rem; color: var(--ink-2); background: var(--bg-2); border-bottom: 1px solid var(--rule-2); }
.spec tbody tr:last-child td { border-bottom: 0; }
.spec td:last-child { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* ---------- Feature list -------------------------------------------------- */
.ticks { display: grid; gap: var(--s-4); }
.tick { display: flex; gap: var(--s-3); align-items: flex-start; }
.tick svg { flex: none; margin-top: .22em; color: var(--volt-deep); }
.tick strong { font-weight: 650; }
.tick span { color: var(--ink-2); }
.section--dark .tick span { color: rgba(255,255,255,.72); }

/* ---------- Suburb links -------------------------------------------------- */
.burbs { columns: 4 11rem; column-gap: var(--s-6); }
@media (max-width: 900px) { .burbs { columns: 2 9rem; } }
@media (max-width: 480px) { .burbs { columns: 1; } }
.burbs a {
  display: block; padding: .4rem 0; font-size: .93rem;
  color: var(--ink-2); text-decoration: none; break-inside: avoid;
}
.burbs a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--volt-deep); }
.section--dark .burbs a { color: rgba(255,255,255,.72); }
.section--dark .burbs a:hover { color: #fff; }

/* ---------- FAQ ----------------------------------------------------------- */
.faq { display: grid; gap: var(--s-3); }
.faq__item { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
.section--volt .faq__item { border-color: rgba(58,43,0,.14); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: var(--s-5); font-weight: 650; font-size: 1.03rem; color: var(--ink);
}
.faq__q svg { flex: none; transition: transform var(--dur) var(--ease); color: var(--ink-3); }
.faq__q[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq__a { padding: 0 var(--s-5) var(--s-5); color: var(--ink-2); max-width: 70ch; }
.faq__a[hidden] { display: none; }

/* ==========================================================================
   What you get. A checklist reads as inclusions; a grid of identical cards
   reads as filler.
   ========================================================================== */
.getlist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--s-4) var(--s-7);
  list-style: none; margin: 0; padding: 0;
}
.getlist__item {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
}
.section--dark .getlist__item { border-bottom-color: var(--rule-dark); }
.getlist__check {
  flex: none; width: 1.65rem; height: 1.65rem; margin-top: .1rem;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(30,158,98,.14); color: var(--go);
}
.section--dark .getlist__check { background: rgba(46,190,120,.18); color: #46D17F; }
.getlist__item strong { display: block; font-weight: 650; font-size: 1.02rem; margin-bottom: .18rem; }
.getlist__item span span { display: block; font-size: .93rem; line-height: 1.55; color: var(--ink-2); }
.section--dark .getlist__item span span { color: rgba(255,255,255,.7); }

/* ==========================================================================
   Process. A numbered track with a connecting rule, not stacked boxes.
   ========================================================================== */
.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--s-6);
  list-style: none; margin: 0; padding: 0;
  counter-reset: flow;
}
.flow__step { position: relative; display: grid; gap: var(--s-3); align-content: start; }
/* Connecting rule between steps, hidden on the last and when wrapped. */
.flow__step::after {
  content: ""; position: absolute; top: 1.1rem; left: 3.1rem; right: calc(var(--s-6) * -1);
  height: 2px; background: var(--rule-2);
}
.flow__step:last-child::after { display: none; }
@media (max-width: 780px) { .flow__step::after { display: none; } }
.flow__n {
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--volt); color: var(--volt-ink);
  font-weight: 700; font-size: 1rem; position: relative; z-index: 1;
}
.flow__title { font-size: 1.06rem; }
.flow__text { font-size: .93rem; color: var(--ink-2); line-height: 1.55; }
.section--dark .flow__text { color: rgba(255,255,255,.7); }

/* ==========================================================================
   Compatibility layer for markup written against the earlier class names.
   These render in the current design language rather than leaving bare
   stacked text.
   ========================================================================== */

/* Generic card grid. Same card language as .svcgrid. */
.circuits { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--s-5); }
.circuit {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: var(--lift-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.circuit:hover { transform: translateY(-3px); box-shadow: var(--lift-3); }
.circuit__media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-2); }
.circuit__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.circuit__body { padding: var(--s-5); display: grid; gap: var(--s-2); flex: 1; }
.circuit__title { font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; }
.circuit__text { font-size: .92rem; color: var(--ink-2); line-height: 1.55; }
.circuit__go { margin-top: auto; padding-top: var(--s-3); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: .45em; }
.section--dark .circuit { background: var(--dark-2); border-color: var(--rule-dark); color: #fff; }
.section--dark .circuit__text { color: rgba(255,255,255,.72); }

/* Stat block, restyled without the mono and caps it used to carry. */
.readout { display: grid; gap: .15rem; }
.readout__value { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.readout__unit  { font-size: .45em; font-weight: 600; opacity: .6; }
.readout__label { font-size: .9rem; color: var(--ink-3); }
.section--dark .readout__label, .hero .readout__label { color: rgba(255,255,255,.62); }

/* Eyebrow labels are banned, so any left in older markup collapse away. */
.plate { display: none !important; }

.u-ratio-4x3 { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--r-lg); }
.u-ratio-16x9 { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--r-lg); }
.u-ratio-1x1 { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-lg); }
.u-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Long form local content.
   Volume is the point, so the job of the layout is to make a long read feel
   navigable: a sticky contents rail, a narrow measure, and generous space
   between blocks so nothing reads as a dump.
   ========================================================================== */
.longform { background: var(--bg-2); }
.longform__in {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 1000px) { .longform__in { grid-template-columns: 1fr; } }

.longform__sticky { position: sticky; top: 6.5rem; }
@media (max-width: 1000px) { .longform__sticky { position: static; } }

.longform__railtitle {
  font-size: .875rem; font-weight: 650; color: var(--ink-3);
  margin-bottom: var(--s-3);
}
.longform__toc { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: .1rem; }
.longform__toc a {
  display: flex; align-items: baseline; gap: .6em;
  padding: .5rem .75rem;
  font-size: .9rem; line-height: 1.4; color: var(--ink-2);
  text-decoration: none; border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* A small marker dot rather than a side border. The thick side-tab accent is
   a tell, and the dot reads as a list marker, which is what this actually is. */
.longform__toc a::before {
  content: ""; flex: none;
  width: .36em; height: .36em; border-radius: 50%;
  background: var(--rule-2);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.longform__toc a:hover { background: var(--paper); color: var(--ink); }
.longform__toc a:hover::before { background: var(--volt-deep); transform: scale(1.4); }

.longform__cta {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--lift-1);
}
.longform__cta p { font-size: .92rem; color: var(--ink-2); margin-bottom: var(--s-3); }

.longform__body { max-width: 46rem; }
.longform__block + .longform__block { margin-top: var(--s-8); }
.longform__h {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  letter-spacing: -.028em;
  margin-bottom: var(--s-4);
  scroll-margin-top: 6.5rem;
}
.longform__body p { font-size: 1.04rem; line-height: 1.72; color: var(--ink-2); max-width: 68ch; }
.longform__body p + p { margin-top: var(--s-4); }
/* First line of each block carries a touch more weight, so the eye lands. */
.longform__block > p:first-of-type { color: var(--ink); }

/* ---------- Layout helper ------------------------------------------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---------- Footer -------------------------------------------------------- */
.foot { background: var(--dark); color: rgba(255,255,255,.72); }
.foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--s-7); padding-block: var(--s-9) var(--s-7); }
@media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot__grid { grid-template-columns: 1fr; } }
.foot h3 { font-size: .95rem; color: #fff; margin-bottom: var(--s-4); }
.foot a { color: rgba(255,255,255,.72); text-decoration: none; display: block; padding: .3rem 0; font-size: .93rem; }
.foot a:hover { color: var(--volt); }
.foot__base {
  border-top: 1px solid var(--rule-dark); padding-block: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  font-size: .875rem;
}

/* ---------- Sticky mobile actions ---------------------------------------- */
.stickycall { display: none; }
@media (max-width: 760px) {
  .stickycall {
    position: fixed; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); z-index: 1100;
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2);
  }
  .stickycall a {
    display: flex; align-items: center; justify-content: center; gap: .5em;
    padding: .95rem .75rem; text-decoration: none; font-weight: 650; font-size: .96rem;
    border-radius: var(--r-pill); box-shadow: var(--lift-3);
  }
  .stickycall__call { background: var(--alert); color: #fff; }
  .stickycall__quote { background: var(--volt); color: var(--volt-ink); }
  body { padding-bottom: 4.5rem; }
}

/* ---------- Filter chips (reviews page) ---------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .875rem; font-weight: 600; line-height: 1;
  padding: .58em .95em; border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink-2);
  border: 1px solid var(--rule-2); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip--on { background: var(--volt); color: var(--volt-ink); border-color: var(--volt-deep); }

/* Leaflet ships its own stacking order up to z-index 1000. Isolating the map
   keeps those panes inside their own context so nothing escapes over the
   sticky masthead. */
.svcarea__map { position: relative; z-index: 0; isolation: isolate; }
.svcarea .leaflet-pane,
.svcarea .leaflet-top,
.svcarea .leaflet-bottom { z-index: auto; }
.foot__grid img { aspect-ratio: 208 / 70; height: 44px; width: auto; object-fit: contain; }

/* ==========================================================================
   Job rail. Square frames moving right to left at a constant speed.
   Continuous, not stepped: the stepped version read as stalling.
   Caption sits under the image so it never covers the work.
   ========================================================================== */
.jobrail {
  --rail-cols: 4;
  --rail-speed: 52s;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
@media (max-width: 1100px) { .jobrail { --rail-cols: 3; --rail-speed: 44s; } }
@media (max-width: 780px)  { .jobrail { --rail-cols: 2; --rail-speed: 36s; } }
@media (max-width: 460px)  { .jobrail { --rail-cols: 1.35; --rail-speed: 30s; } }

.jobrail__track {
  display: flex;
  gap: var(--s-4);
  width: max-content;
  margin: 0; padding: 0 var(--shell-pad); list-style: none;
  animation: jobrail-run var(--rail-speed) linear infinite;
  will-change: transform;
}
.jobrail:hover .jobrail__track,
.jobrail:focus-within .jobrail__track { animation-play-state: paused; }
@keyframes jobrail-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .jobrail__track { animation: none; }
  .jobrail { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

.jobrail__item {
  flex: none;
  width: calc((min(100vw, var(--shell-max)) - var(--shell-pad) * 2 - (var(--rail-cols) - 1) * var(--s-4)) / var(--rail-cols));
  display: grid;
  gap: var(--s-3);
  align-content: start;
}
.jobrail__item picture {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  border: 1px solid var(--rule);
}
.jobrail__item img { width: 100%; height: 100%; object-fit: cover; }
.jobrail__cap {
  display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap;
  font-size: .9rem; font-weight: 600; color: var(--ink);
  padding-inline: var(--s-1);
}
.jobrail__cap--plain { font-weight: 500; color: var(--ink-2); font-size: .875rem; }
.jobrail__cap em {
  font-style: normal; font-size: .75rem; font-weight: 600;
  color: #146B42; background: rgba(30,158,98,.12);
  padding: .2em .55em; border-radius: var(--r-pill);
}
.section--dark .jobrail__cap { color: #fff; }

/* ==========================================================================
   Services index. Its own hero and its own hierarchy, so the page does not
   read as the homepage grid repeated.
   ========================================================================== */
.svchero { position: relative; background: var(--dark); color: #fff; overflow: hidden; }
.svchero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 85% 0%, rgba(255,196,0,.18), transparent 60%);
}
.svchero__in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding-block: clamp(3rem, 6vw, 6rem) clamp(2.5rem, 4vw, 4rem);
}
@media (max-width: 900px) { .svchero__in { grid-template-columns: 1fr; } }
.svchero__title {
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 1.02; letter-spacing: -.04em; font-weight: 800;
}
.svchero__title em { font-style: normal; color: var(--volt); }
.svchero__lede {
  font-size: clamp(1.04rem, 1.3vw, 1.2rem);
  color: rgba(255,255,255,.78); max-width: 46ch; margin-top: var(--s-5);
}
.svchero__jump { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.svchero__jump a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: .9rem 1.15rem;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--rule-dark);
  border-radius: var(--r-md);
  color: #fff; text-decoration: none; font-weight: 600; font-size: .97rem;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.svchero__jump a:hover { background: rgba(255,196,0,.16); transform: translateX(3px); }
.svchero__jump svg { color: var(--volt); flex: none; }

.svchero__proof {
  position: relative; z-index: 1;
  border-top: 1px solid var(--rule-dark);
  padding-block: var(--s-5);
  font-size: var(--t-small); color: rgba(255,255,255,.72);
}
.svchero__proof .shell { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.svchero__proof strong { color: #fff; font-weight: 600; }

/* Featured services: image on top, so they do not echo the .svc card. */
.bigrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--s-5); }
.big {
  display: grid; grid-template-rows: auto 1fr;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-lg); overflow: hidden;
  text-decoration: none; color: inherit; box-shadow: var(--lift-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.big:hover { transform: translateY(-4px); box-shadow: var(--lift-3); }
.big__media { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-2); }
.big__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.big:hover .big__media img { transform: scale(1.05); }
.big__body { padding: var(--s-5); display: grid; gap: var(--s-2); align-content: start; }
.big__title {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  font-size: 1.18rem; font-weight: 700; letter-spacing: -.022em;
}
.big__title svg { color: var(--ink-3); flex: none; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.big:hover .big__title svg { color: var(--volt-deep); transform: translate(2px,-2px); }
.big__text { font-size: .92rem; color: var(--ink-2); line-height: 1.55; }

/* The remaining services as a compact row list. */
.svclist { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.svclist__row {
  display: grid; grid-template-columns: 4.5rem 1fr auto;
  align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-md); text-decoration: none; color: inherit;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.svclist__row:hover { border-color: var(--ink-3); transform: translateX(3px); }
.svclist__thumb { aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-2); }
.svclist__thumb img { width: 100%; height: 100%; object-fit: cover; }
.svclist__text strong { display: block; font-size: 1.02rem; font-weight: 650; }
.svclist__text span { display: block; font-size: .89rem; color: var(--ink-2); line-height: 1.5; }
.svclist__go { color: var(--ink-3); }
.svclist__row:hover .svclist__go { color: var(--volt-deep); }
@media (max-width: 560px) {
  .svclist__row { grid-template-columns: 3.5rem 1fr; }
  .svclist__go { display: none; }
}

/* Reviews page hero. Same world as the others, its own proportions. */
.revhero .shell { padding-block: clamp(3rem, 5.5vw, 5.5rem) clamp(2.5rem, 4vw, 4rem); position: relative; z-index: 1; }
.revhero__title { max-width: 20ch; }
.revhero .proofline { max-width: 60ch; }