/* ═══════════════════════════════════════════════════════════════════
   Phillips Metalworks — public site
   Shop Steel, per app/DESIGN.md. Committed dark identity: the brand mark
   is built for a dark ground and the business reads as a fab shop, not a
   SaaS. Every color is declared explicitly so nothing inherits from a
   host theme. The subset woff2 is self-hosted and content-hashed, not a
   CDN and not inlined — see the note in build.py.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Oswald';
  font-style:normal;
  font-weight:200 700;
  font-display:swap;
  src:url(/assets/oswald.aabe123b.woff2) format('woff2');
}

:root{
  /* Shop Steel — dark tokens (DESIGN.md single source of truth) */
  --bg:#131417;
  --surface:#1c1e22;
  --surface2:#24262b;
  --ink:#f3f1ed;
  --muted:#9aa0a8;
  --faint:#868d96;      /* 4.98:1 on --surface; #787f87 failed AA there */
  --accent:#f26a1b;
  --accent-hi:#ff7e2e;
  --accent-ink:#17181a;
  --hdr-a:#c2530d;
  --hdr-b:#a84408;
  --ok:#46b45e;
  --line:#2c2f35;       /* decorative hairlines only */
  --line-strong:#666d76;/* interactive boundaries — 3.19:1 on --surface,
                           required because an input's fill is only 1.10:1
                           against the page, so the border IS the control */
  --edge:rgba(255,255,255,.06);

  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --t-fast:100ms;
  --t-med:150ms;
  --t-screen:200ms;
  --ease-out:cubic-bezier(.2,.8,.3,1);

  --shadow:0 1px 3px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.3);
  --wrap:78rem;
  --gut:clamp(1.15rem,4vw,2.5rem);

  color-scheme:dark;
}

/* The owner works on a very wide desktop (measured 3491px). A 72rem column
   strands most of that screen, so the wrap opens up on large displays.
   Prose still caps at ~64ch on the paragraphs themselves — only grids,
   images and bands get the extra room. */
@media (min-width:106rem){
  :root{--wrap:88rem}
}

*,*::before,*::after{box-sizing:border-box}

/* The `hidden` attribute is a UA-stylesheet rule, so ANY author class that
   sets display beats it. .calc-result{display:grid} and .wire-scale{display:flex}
   both did, which meant every `el.hidden = true` on the calculator was a
   silent no-op - and the calculator kept a STALE ANSWER on screen when the
   run length was cleared. On a page that gives electrical advice that is the
   worst failure available, so this is !important on purpose: hiding must
   never be quietly overridable by a layout rule added later. */
[hidden]{display:none !important}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* `clip`, not `hidden`, and on html rather than body. `overflow-x:hidden`
     on the body forces overflow-y to compute to auto, which turns the body
     into a scroll container - and a position:sticky masthead inside a scroll
     container sticks to that box instead of to the viewport. `clip` does the
     same clipping without creating one. The build already asserts no page
     scrolls sideways, so this is a second belt rather than the only one. */
  overflow-x:clip;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;              /* readable on a dock in sunlight; the old site was 13.6px */
  line-height:1.65;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}

img{max-width:100%; height:auto; display:block}
a{color:var(--accent-hi); text-underline-offset:3px}
a:hover{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:4px}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--accent-ink);
  padding:.85rem 1.25rem; font-weight:700; border-radius:0 0 10px 0;
}
.skip:focus{left:0}

/* viewport-fit=cover extends the layout viewport under the notch and the
   rounded corners, and only the top and bottom insets were honoured - so in
   landscape on a notched iPhone the sensor housing sat over the first 44-59px
   of content. env() resolves to 0 elsewhere, so max() collapses to --gut and
   nothing changes on any other viewport. */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto;
      padding-inline:var(--gut);                       /* fallback: max()/env() is the
         only other declaration, so a browser that cannot parse it would drop the
         gutters on every page rather than merely ignoring the notch. */
      padding-inline:max(var(--gut), env(safe-area-inset-left))
                     max(var(--gut), env(safe-area-inset-right))}

/* ── Type ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4{
  font-family:'Oswald',Impact,var(--sans);
  font-weight:600;
  text-transform:uppercase;
  text-wrap:balance;
  margin:0;
}
h1{font-size:clamp(2.05rem,6vw,3.75rem); font-weight:700; line-height:1.04; letter-spacing:.015em}
h2{font-size:clamp(1.6rem,3.6vw,2.4rem); line-height:1.1; letter-spacing:.022em}
h3{font-size:1.24rem; letter-spacing:.028em; line-height:1.2}
p{margin:0 0 1rem; max-width:64ch}
.lead{font-size:1.16rem; color:var(--muted)}

/* The eyebrow-with-hairline: the PMW family signature (DESIGN.md) */
.eyebrow{
  display:flex; align-items:center; gap:.85rem;
  font-family:'Oswald',Impact,var(--sans);
  font-weight:600; font-size:.95rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--accent-hi);
  margin:0 0 1.1rem;
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--line)}

/* ── Header ───────────────────────────────────────────────────────── */
.masthead{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg,var(--hdr-a),var(--hdr-b));
  border-bottom:1px solid rgba(0,0,0,.4);
  box-shadow:0 2px 12px rgba(0,0,0,.35);
  padding-top:env(safe-area-inset-top);
}
/* Machined chamfer, not hazard tape.
   Light catching a cut steel edge: a specular hairline, the chamfer face,
   then shadow. The header above is already the loudest thing on the page —
   this edge should sit under it, not compete. Hazard tape read as
   construction signage, which is signage, not fabrication. */
.masthead::after{
  content:""; display:block; height:5px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.24) 0 1px,
    rgba(255,255,255,.07) 1px 2px,
    rgba(0,0,0,.36)       2px 3px,
    rgba(0,0,0,.60)       3px 5px);
}
.mast-in{
  display:flex; align-items:center; gap:1rem;
  min-height:66px; padding-block:.55rem;
}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:#fff; flex:1; min-width:0; min-height:44px}
/* Bumped from 40px — the mark was hard to read at header size. */
.brand img{width:54px; height:54px; flex:none}
@media (max-width:34rem){ .brand img{width:46px; height:46px} }
.brand-name{
  font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:1.06rem; letter-spacing:.055em; text-transform:uppercase;
  line-height:1.12; color:#fff;
}
.brand-sub{
  display:block; font-family:var(--sans); font-weight:400;
  /* Solid white, not rgba(255,255,255,.82): the gradient's light end
     gives pure white only 4.63:1, so any transparency fails AA here. */
  font-size:.7rem; letter-spacing:.13em; color:#fff;
  text-transform:uppercase;
}
/* Tap-to-call, always visible. The single biggest fix vs the old site. */
.call-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:44px; padding:.5rem 1rem;
  background:#17181a; color:#fff; text-decoration:none;
  border-radius:12px; border:1px solid rgba(255,255,255,.16);
  font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:1rem; letter-spacing:.045em; white-space:nowrap;
  transition:transform var(--t-fast) var(--ease-out), background-color var(--t-med);
}
.call-btn:hover{background:#000; color:#fff}
.call-btn:active{transform:scale(.985)}
.call-btn svg{width:17px; height:17px; flex:none; fill:var(--accent-hi)}
.call-btn .cb-label{display:none}
@media (min-width:34rem){ .call-btn .cb-label{display:inline} }

/* Nav sits on its own row — no hamburger, nothing hidden (DESIGN.md: no hidden state) */
.nav{
  background:rgba(0,0,0,.22);
  border-top:1px solid rgba(0,0,0,.25);
}
/* The <ul> also carries .wrap. Do NOT use margin/padding shorthand here —
   it would out-specify .wrap and flush the nav to the viewport edge while
   the brand above it stays centred. Reset only the block axis. */
.nav ul{
  display:flex; flex-wrap:wrap; gap:.15rem;
  list-style:none;
  margin-block:0; margin-inline:auto;
  padding-block:0;
}
.nav a{
  display:flex; align-items:center; min-height:46px; padding:0 .95rem;
  color:rgba(255,255,255,.94); text-decoration:none;
  font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:.9rem; letter-spacing:.085em; text-transform:uppercase;
  border-bottom:3px solid transparent;
  transition:background-color var(--t-med), border-color var(--t-med);
}
.nav a:hover{background:rgba(0,0,0,.25); color:#fff}
/* Current-page marker. Was hazard yellow, left over from the tape motif;
   a warm off-white reads as a machined highlight and keeps the nav quiet. */
.nav a[aria-current="page"]{border-bottom-color:rgba(255,255,255,.85); color:#fff}
/* A PHONE HELD SIDEWAYS is how you read a wire table standing on a dock, and
   the masthead is sticky at full height with the nav wrapped: 173px of a
   375px-tall screen, 46% of it, permanently. Measured before this rule; 96px
   after, and every link still there.

   Shrink it rather than hiding it or unsticking it. Only the strapline goes,
   and that is repeated in the footer. Placed AFTER the rules it overrides,
   because it lost to them on source order when it sat above them. */
@media (max-height:30rem){
  .mast-in{min-height:0; padding-block:.3rem}
  .brand img{width:38px; height:38px}
  .brand-sub{display:none}
  /* 44px, not 40: CLAUDE.md's touch-target floor holds in landscape too. The
     four pixels cost nothing beside the 77 this rule saves. */
  .nav a{min-height:44px; padding:0 .7rem; font-size:.82rem; letter-spacing:.06em}
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  padding-block:clamp(4rem,10vw,7.5rem);
  background:
    radial-gradient(1100px 460px at 78% -12%, rgba(242,106,27,.16), transparent 62%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.hero::before{                          /* dot-grid ground */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg,#000,transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);
}
.hero .wrap{position:relative}
.hero-grid{display:grid; gap:clamp(2rem,4vw,3.25rem); align-items:center}
@media (min-width:62rem){
  .hero-grid{grid-template-columns:1.05fr .95fr}
}
/* The frame belongs to the figure, not to the <img>.
   The blur-up placeholder is a background on the <picture> that wraps the
   image, so a radius set on the image alone leaves the placeholder painting
   square corners behind it — a wedge of blur shows at all four corners and
   reads as a second image underneath. Rounding and clipping the figure takes
   the picture, the placeholder and the photograph together. */
.hero-media{
  margin:0; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.hero-media img{width:100%; display:block}
.hero h1{margin-bottom:1.1rem}
.hero h1 .hl{color:var(--accent-hi); display:block}
.hero .lead{max-width:52ch; margin-bottom:1.9rem}

.cta-row{display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:2.2rem}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:54px; padding:0 1.5rem; border-radius:14px;
  font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:1.06rem; letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform var(--t-fast) var(--ease-out), background-color var(--t-med), border-color var(--t-med);
}
.btn:active{transform:scale(.985)}
.btn-primary{
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  color:var(--accent-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), var(--shadow);
}
.btn-primary:hover{background:linear-gradient(180deg,#ff8c43,#e85f10); color:var(--accent-ink)}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{background:var(--surface2); color:var(--ink)}
.btn svg{width:19px; height:19px; fill:currentColor; flex:none}

/* Credential chips. These were mono micro-type sitting under the CTAs and
   read as a footnote; they are the reasons to call, so they get the
   two-tier chip treatment from DESIGN.md. The dealer credential leads. */
.trust{
  display:flex; flex-wrap:wrap; gap:.55rem;
  margin:0; padding:0; list-style:none;
}
.trust li{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem; border-radius:999px;
  background:var(--surface); border:1px solid var(--line);
  font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.trust li::before{
  content:""; flex:none; width:7px; height:7px; border-radius:2px;
  background:var(--accent);
}
.trust li:first-child{
  color:var(--ink); border-color:var(--accent);
  background:linear-gradient(180deg, rgba(242,106,27,.14), rgba(242,106,27,.06));
}
.trust li:first-child::before{background:var(--accent-hi)}

/* ── Sections ─────────────────────────────────────────────────────── */
/* Breathing room is the biggest thing separating this from a template.
   Ghidorah gives each section far more air than feels necessary, and that
   restraint is most of why it reads as expensive. */
.section{padding-block:clamp(4.25rem,9vw,7.5rem)}
.section + .section{border-top:1px solid var(--line)}
.section-alt{background:var(--surface)}
.section > .wrap > p{color:var(--muted)}

.grid{display:grid; gap:1.1rem; margin-top:2rem}
@media (min-width:44rem){ .grid-3{grid-template-columns:repeat(3,1fr)} }
@media (min-width:44rem){ .grid-2{grid-template-columns:repeat(2,1fr)} }

.card{
  background:var(--surface2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:1.5rem;
  box-shadow:inset 0 1px 0 var(--edge);
}
.section-alt .card{background:var(--bg)}
.card h3{margin-bottom:.6rem; color:var(--ink)}
.card p{color:var(--muted); font-size:.985rem; margin-bottom:0}

/* Cards that lead with a photo. The figure is edge-to-edge inside the card,
   so the padding lives on .card-body instead of .card. */
.card-media{padding:0; overflow:hidden}
.card-media .media{margin:0; border-bottom:1px solid var(--line)}
.card-media .media img{width:100%; display:block}
.card-media .card-body{padding:1.5rem}

/* Alternating copy/photo band */
.split{display:grid; gap:clamp(1.75rem,4vw,3rem); align-items:center}
@media (min-width:62rem){ .split{grid-template-columns:1fr 1fr} }
.split-media{
  margin:0; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.split-media img{width:100%; display:block}
.split-copy p{color:var(--muted)}

.tags{display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:1.6rem 0 0; list-style:none}
.tags li{
  padding:.42rem .85rem; border-radius:999px;
  background:var(--surface2); border:1px solid var(--line);
  font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:.83rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
}
.section-alt .tags li{background:var(--bg)}

/* ── Service area ─────────────────────────────────────────────────── */
.towns{display:grid; gap:.85rem; margin-top:1.9rem}
@media (min-width:38rem){ .towns{grid-template-columns:repeat(3,1fr)} }
.town{
  padding:1.15rem 1.3rem; border-radius:12px;
  background:var(--surface2); border:1px solid var(--line);
  border-left:3px solid var(--accent);
}
.section-alt .town{background:var(--bg)}
.town b{
  display:block; font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:1.08rem; letter-spacing:.035em; text-transform:uppercase; color:var(--ink);
}
.town span{font-size:.9rem; color:var(--muted)}

/* ── Closing CTA ──────────────────────────────────────────────────── */
.cta-band{
  background:linear-gradient(180deg,var(--hdr-a),var(--hdr-b));
  padding-block:clamp(2.75rem,6vw,4rem);
  text-align:center;
}
.cta-band h2{color:#fff; margin-bottom:.75rem}
.cta-band p{color:#fff; margin-inline:auto; margin-bottom:1.8rem; max-width:46ch} /* .9 alpha failed AA on hdr-a */
.cta-band .btn-primary{
  background:#17181a; color:#fff; box-shadow:var(--shadow);
  border-color:rgba(255,255,255,.18); font-size:1.22rem; min-height:60px;
}
.cta-band .btn-primary:hover{background:#000; color:#fff}
.cta-band .btn-primary svg{fill:var(--accent-hi)}
.cta-sub{
  margin:1.15rem 0 0; font-family:var(--mono); font-size:.83rem;
  color:#fff; letter-spacing:.03em; /* .82 alpha failed AA on hdr-a */
}
.cta-sub a{color:#fff; display:inline-flex; align-items:center; min-height:44px}

/* Small inline link styled as a target, not prose (used for cross-links) */
.link-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  min-height:44px; padding:0 1rem; border-radius:999px;
  background:var(--surface2); border:1px solid var(--line);
  color:var(--accent-hi); text-decoration:none;
  font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:.86rem; letter-spacing:.07em; text-transform:uppercase;
  transition:background-color var(--t-med), border-color var(--t-med);
}
.section-alt .link-btn{background:var(--bg)}
.link-btn:hover{border-color:var(--accent); color:var(--accent-hi)}

/* ── Footer (real NAP — the old site had none) ────────────────────── */
.foot{
  background:var(--surface); border-top:1px solid var(--line);
  padding-block:2.75rem; padding-bottom:calc(2.75rem + env(safe-area-inset-bottom));
}
.foot-grid{display:grid; gap:2rem}
@media (min-width:44rem){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr} }
/* h3, not h4 — the footer headings were promoted when the heading outline
   was fixed, and this selector was left pointing at a level that no longer
   exists, so the column labels had been rendering as plain headings. */
.foot h3{font-size:.88rem; letter-spacing:.11em; color:var(--accent-hi); margin-bottom:.9rem}
.foot ul{list-style:none; margin:0; padding:0}
.foot a{color:var(--muted); text-decoration:none}
.foot a:hover{color:var(--ink); text-decoration:underline}
/* Footer links are a list of destinations, not prose — they get real
   touch targets (DESIGN.md: >= 44px). */
.foot li a{display:inline-flex; align-items:center; min-height:44px}
.foot address{font-style:normal; color:var(--muted); font-size:.95rem}
.foot address a[href^="mailto:"]{display:inline-flex; align-items:center; min-height:44px}
.foot .fphone{
  font-family:'Oswald',Impact,var(--sans); font-weight:600; font-size:1.35rem;
  letter-spacing:.03em; color:var(--ink); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px;
}
.foot .fphone:hover{color:var(--accent-hi)}

/* The number takes texts, and plenty of homeowners will text who would
   never ring. Said quietly next to the number rather than shouted on the
   button, which stays the plain digits. */
.foot .fnote{
  display:inline-block; margin-left:.6rem; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
}
/* Tighten the row above rather than pulling this up with a negative
   margin — a negative margin here fights .hero .cta-row further down
   the file and the winner depends on source order. */
.cta-row:has(+ .cta-note){margin-bottom:.9rem}
.cta-note{
  margin:0 0 2.2rem; font-size:.9rem; color:var(--faint);
}
.foot-legal{
  margin-top:2.25rem; padding-top:1.35rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center;
  font-family:var(--mono); font-size:.76rem; color:var(--faint); letter-spacing:.03em;
}
/* The legal row had no anchor rule, so its two new links would have inherited
   the site link colour and sat louder than the copyright beside them. These
   are footnotes: same size and weight as the spans, underlined so they still
   read as links, and a 44px target because a thumb has to find them. */
.foot-legal a{
  color:var(--faint); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line);
  display:inline-flex; align-items:center; min-height:44px;
}
.foot-legal a:hover, .foot-legal a:focus-visible{ color:var(--ink); text-decoration-color:currentColor }
/* Facebook and Google sit together. Both are 44px targets and both carry
   an aria-label, because an icon with no text is nothing to a screen
   reader otherwise. */
.socials{display:flex; gap:.6rem; margin:0}
.social{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:11px; background:var(--surface2); border:1px solid var(--line)}
.social svg{width:20px; height:20px; fill:var(--muted)}
.social:hover svg{fill:var(--accent-hi)}

/* ═══ Interior pages ═══════════════════════════════════════════════ */

.page-head{
  position:relative;
  padding-block:clamp(3.5rem,7vw,5.5rem);
  background:
    radial-gradient(900px 380px at 74% -18%, rgba(242,106,27,.13), transparent 62%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.page-head h1{margin-bottom:1rem}
.page-head .lead{max-width:56ch; margin-bottom:0}
.page-head .cta-row{margin-top:1.9rem; margin-bottom:0}

/* Reading column for prose-led pages. Must be a CHILD of .wrap, never a
   second class on the same element — stacking them makes .narrow's max-width
   fight .wrap's margin-inline:auto, and the column ends up either centred or
   flush to the viewport instead of aligned with the heading above it. */
.narrow{max-width:48rem}
.narrow h2{margin-top:2.75rem; margin-bottom:.9rem}
.narrow h2:first-child{margin-top:0}
/* A bare URL is one unbreakable token: privacy.html's opt-out link ran
   18px past a 320px viewport, and html{overflow-x:clip} meant it could not
   be scrolled to - it was simply cut off. break-word, not anywhere: anywhere
   also shrinks min-content width and can resize grid items elsewhere. */
.narrow p{color:var(--muted); overflow-wrap:break-word}

/* Visually-hidden heading — keeps the outline complete without a redundant
   visible title above a gallery. */
.sr-head{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.callout{
  margin:2rem 0; padding:1.5rem;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:12px;
}
.section-alt .callout{background:var(--bg)}
/* A callout may sit at h2 or h3 depending on where it falls in the
   page outline; both must look identical. */
.callout h2,.callout h3{
  font-size:1.24rem; letter-spacing:.028em; text-transform:uppercase;
  margin-bottom:.7rem; max-width:none; text-align:left;
}
.callout p{color:var(--muted); margin-bottom:.85rem}

.checks{list-style:none; padding:0; margin:1.4rem 0 0; max-width:62ch}
.checks li{
  position:relative; padding-left:1.85rem; margin-bottom:1rem; color:var(--muted);
}
.checks li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:9px; height:9px; border-radius:2px; background:var(--accent);
}
.checks.tight li{margin-bottom:.65rem}
.checks strong{color:var(--ink)}

.fine{font-size:.88rem; color:var(--faint); margin-bottom:0}

/* ═══ Gallery ════════════════════════════════════════════
   These are phone photographs and roughly a third of them are portrait.
   Forcing one landscape crop on all of them cut the lift off at the frame
   edge, so the frame follows the photograph and the grid adapts instead.

   The row unit is a third of a column, which makes every frame we ship land
   on a whole number of rows: 3:2 spans 2, square spans 3, 3:4 spans 4, and a
   panorama takes two columns by 3. The gap correction keeps the spans true
   once the 1.5rem gutters are counted. Nothing sets its own aspect-ratio —
   the grid gives each tile a height and the photograph covers it, so a few
   pixels of drift show up as an imperceptible crop rather than a hole. */
.wrap:has(> .gallery){container-type:inline-size}
.gallery{
  --cols:1;
  --gal-gap:1.15rem;
  /* 100cqw is the wrap's content box, which is exactly the gallery's own
     width — measured rather than re-derived from --wrap and --gut, so the
     scrollbar cannot throw the row height off. */
  --col-w:calc((100cqw - (var(--cols) - 1)*var(--gal-gap)) / var(--cols));
  display:grid;
  gap:var(--gal-gap);
  grid-template-columns:repeat(var(--cols),1fr);
  grid-auto-rows:calc(var(--col-w)/3 - var(--gal-gap)/2);
  grid-auto-flow:row dense;
}
@media (min-width:38rem){ .gallery{--cols:2} }
@media (min-width:62rem){ .gallery{--cols:3} }

.shot{
  margin:0; background:var(--surface2); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; position:relative;
  grid-row:span 2;                 /* 3:2, the default frame */
}
.shot.sq{grid-row:span 3}
.shot.tall{grid-row:span 4}
.shot.wide{grid-row:span 2}
@media (min-width:38rem){
  .shot.wide{grid-column:span 2; grid-row:span 3}
}
.shot picture{display:block; width:100%; height:100%}
.shot img{width:100%; height:100%; display:block; object-fit:cover}

/* The file input. Browsers style these very differently, so the button is
   left alone and only the surroundings are set — a restyled file control that
   does not look like the platform's is a control people do not trust. */
.quote-form input[type="file"]{
  width:100%; padding:.7rem .8rem;
  background:var(--surface2); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:12px;
  font:inherit; font-size:.95rem;
}
.quote-form input[type="file"]::file-selector-button{
  margin-right:.9rem; padding:.55rem 1rem; min-height:38px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:9px;
  font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer;
}
.quote-form input[type="file"]::file-selector-button:hover{
  background:var(--surface2); border-color:var(--accent-hi);
}

/* ═══ Wire calculator ══════════════════════════════════════════════
   The one page on the site that runs code, and the one that should read
   as an instrument rather than a form. Inputs sit quietly on the left;
   the answer is a readout on the right that stays put while you change
   things. On a phone the readout follows the inputs, which is the order
   you fill them in anyway. */
.calc{margin:0 0 2.5rem}
.calc-grid{display:grid; gap:1.5rem; align-items:start}
@media (min-width:64rem){
  .calc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:2rem}
  /* The answer follows you down the inputs instead of scrolling away. */
  .calc-result{position:sticky; top:calc(var(--stick, 7.5rem) + 1rem)}
}

.calc-stage{
  border:1px solid var(--line); border-radius:14px;
  padding:1.3rem 1.4rem 1.5rem; margin:0 0 1.15rem;
  background:var(--surface);
}
.calc-stage legend{
  font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-hi); padding-inline:.5rem;
}
.calc-hint{font-size:.88rem; color:var(--faint); margin:0 0 1.1rem}
.calc-stage .field{margin-bottom:1.1rem}
.calc-stage .field:last-child{margin-bottom:0}

/* ── segmented choice ──────────────────────────────────────────────
   Two options should be one tap, not open-scroll-choose. Real radios
   underneath, so it keeps its keyboard behaviour and its semantics —
   the styling is only on the labels. */
.seg{margin:0 0 1.25rem}
.seg-label{
  display:block; margin-bottom:.45rem;
  font-weight:600; font-size:.95rem; color:var(--ink);
}
.seg-opts{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--line-strong); border-radius:12px;
  overflow:hidden; background:var(--surface2);
}
.seg-opts input{
  position:absolute; width:1px; height:1px; opacity:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
}
.seg-opts label{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.1rem; min-height:52px; padding:.5rem .6rem;
  font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:.98rem; letter-spacing:.05em; color:var(--muted);
  cursor:pointer; text-align:center;
  transition:background-color var(--t-med), color var(--t-med);
}
.seg-opts label small{
  font-family:var(--sans); font-weight:400; font-size:.68rem;
  letter-spacing:.1em; color:var(--faint);
}
/* Not --line-strong: this divider sits on --surface2, where that token
   only reaches 2.89:1. This value measures 3.89:1 there. */
.seg-opts label + input + label{border-left:1px solid #7a828c}
.seg-opts label:hover{background:var(--surface); color:var(--ink)}
.seg-opts input:checked + label{
  background:linear-gradient(180deg,var(--hdr-a),var(--hdr-b));
  color:#fff;
}
.seg-opts input:checked + label small{color:#fff} /* .85 alpha failed AA on the checked gradient */
.seg-opts input:focus-visible + label{
  outline:3px solid var(--accent-hi); outline-offset:-3px;
}
/* On a CHECKED option the fill is the orange gradient, and an orange ring
   on it measured 1.8:1 - invisible in exactly the state arrow-key radio
   navigation leaves you in. Ink reads at 4.1:1 against the gradient. */
.seg-opts input:checked:focus-visible + label{outline-color:var(--ink)}

/* ── the readout ───────────────────────────────────────────────────── */
.calc-inputs{min-width:0}
.calc-result{display:grid; gap:1.15rem; min-width:0}
.calc-readout{
  border:1px solid var(--line-strong); border-radius:16px;
  padding:1.5rem 1.5rem 1.35rem; background:var(--surface2);
  box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
/* A machined edge along the top, the same device as the masthead. */
.calc-readout::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-hi));
}
.calc-label{
  font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:.74rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--faint); margin:0 0 .3rem;
}
.calc-headline{
  font-family:'Oswald',Impact,var(--sans); font-weight:700;
  font-size:clamp(2.1rem,7vw,3.1rem); line-height:1; letter-spacing:.01em;
  text-transform:uppercase; color:var(--ink); margin:0;
}
/* The waiting state has to read as an absence of an answer rather than as
   a quiet one. Muted and lighter than the real headline, so nobody scans
   past it and takes it for a result. */
.calc-headline.is-waiting{
  color:var(--faint); font-weight:400;
  font-size:clamp(1.15rem,3.6vw,1.5rem); line-height:1.2;
}
.calc-headline.is-bad{color:var(--accent-hi); font-size:clamp(1.25rem,4vw,1.7rem); line-height:1.15}
.calc-sub{color:var(--muted); font-size:.94rem; margin:.7rem 0 0; max-width:46ch}

/* The conductor at true relative diameter. #14 and 2/0 are five and a
   half times apart, and a number does not convey that to somebody who
   has never held either. */
.wire-scale{
  display:flex; align-items:center; gap:.6rem;
  margin:.85rem 0 0; min-height:26px;
}
.wire-dot{
  display:block; border-radius:50%; flex:none;
  width:42px; height:42px;
  transform:scale(.3); transform-origin:center;
  background:radial-gradient(circle at 34% 30%, #d8b38a, #a9713a 55%, #6d4322);
  box-shadow:0 0 0 1px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.35);
  transition:transform var(--t-screen) var(--ease-out);
}
.wire-dot.is-aluminum{
  background:radial-gradient(circle at 34% 30%, #eef1f4, #9aa3ad 55%, #5d646c);
}
.wire-cap{font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--faint)}

/* ── the gauge ─────────────────────────────────────────────────────
   Drop as a bar against BH-USA's 4% limit — the CEILING, not the 3% target
   the tool sizes to. Do not "correct" this back: wire-ui.js draws the mark
   from VD_CEILING, and the two numbers do different jobs. The number is
   always present, so this reads without relying on colour. */
.gauge{margin:1.3rem 0 0}
.gauge-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:0 0 .45rem}
.gauge-head .calc-label{margin:0}
.gauge-value{
  font-family:'Oswald',Impact,var(--sans); font-weight:700;
  font-size:1.5rem; letter-spacing:.02em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.gauge-track{
  display:block; position:relative; height:12px; border-radius:999px;
  background:var(--bg); border:1px solid var(--line);
  overflow:hidden;
}
/* Scaled, not resized. A width transition on this element would not settle —
   the computed width stayed at its first value however long you waited — and
   transform is the right tool regardless: it composites instead of forcing
   layout on every frame. */
.gauge-fill{
  display:block; height:100%; width:100%; border-radius:999px;
  transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg,var(--ok),#6fce85);
  transition:transform 320ms var(--ease-out), background 200ms linear;
}
.gauge.is-warn .gauge-fill{background:linear-gradient(90deg,var(--accent),var(--accent-hi))}
.gauge.is-bad .gauge-fill{background:linear-gradient(90deg,#c2352f,#e5484d)}
/* BH-USA's 4% limit, drawn where it actually falls on the scale — the ceiling,
   not the 3% target; wire-ui.js positions it from VD_CEILING.

   The opacity is a contrast decision, not a style one. At .55 the mark sits at
   1.96:1 against the red fill, under 1.4.11's 3:1 for a graphical object — and
   red is exactly the state where a reader most needs to see where the line was.
   At .9 it is 3.07:1 there and 13.3:1 on the empty track.

   top/bottom are 0 because the -2px overhang never rendered: .gauge-track sets
   overflow:hidden, so it clips at its padding box. */
.gauge-mark{
  position:absolute; top:0; bottom:0;
  left:30%;
  width:2px; background:var(--ink); opacity:.9;
}
.gauge-caption{margin:.5rem 0 0; font-size:.84rem; color:var(--faint)}
@media (prefers-reduced-motion:reduce){
  .gauge-fill, .wire-dot{transition:none}
}

/* ── the numbers under it ──────────────────────────────────────────── */
.calc-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem;
  margin:1.3rem 0 0; padding-top:1.1rem; border-top:1px solid var(--line);
}
.calc-stats div{min-width:0}
.calc-stats dt{
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint); margin-bottom:.15rem;
}
.calc-stats dd{
  margin:0; font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:1.08rem; color:var(--ink); font-variant-numeric:tabular-nums;
}

/* ── verdicts, comparisons, working ────────────────────────────────── */
.calc-note{
  margin:0; padding:.9rem 1.1rem; border-radius:12px;
  border:1px solid var(--line); border-left:3px solid var(--line-strong);
  background:var(--surface); font-size:.93rem; color:var(--muted);
  max-width:none;
}
.calc-note.is-good{border-left-color:var(--ok); color:var(--ink)}
.calc-note.is-warn{border-left-color:var(--accent-hi); color:var(--ink)}
.calc-note.is-bad{border-left-color:#e5484d; color:var(--ink)}
.calc-stage .calc-note{margin-top:1rem}

.calc-compare{
  border:1px solid var(--line); border-radius:14px;
  padding:1.15rem 1.25rem 1.25rem; background:var(--surface);
}
.calc-compare .calc-note{margin-top:1rem}
.calc-table{
  width:100%; border-collapse:collapse; font-size:.93rem;
  font-variant-numeric:tabular-nums;
}
.calc-table th,.calc-table td{
  text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--line);
}
.calc-table thead th{
  font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint);
}
.calc-table tbody th{color:var(--ink); font-weight:600}
.calc-table tbody tr:last-child th,.calc-table tbody tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto; margin-bottom:1rem}

.calc-share{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin:0;
}
.calc-share .hint{margin:0; flex:1; min-width:12rem}

.calc-work{border-top:1px solid var(--line); padding-top:.2rem; margin:0}
.calc-work summary{
  cursor:pointer; list-style:none; padding:.7rem 0; min-height:44px;
  display:flex; align-items:center;
  font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:.8rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent-hi);
}
.calc-work summary::-webkit-details-marker{display:none}
/* The jacket-reading helper beside the gauge select. Same affordance and
   the same 44px target as the working panel's disclosure - it is the same
   gesture, so it should not look like a different one. */
.calc-help{margin:-.2rem 0 .2rem}
.calc-help summary{
  cursor:pointer; list-style:none; padding:.7rem 0; min-height:44px;
  display:flex; align-items:center;
  font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent-hi);
}
.calc-help summary::-webkit-details-marker{display:none}
.calc-help summary::after{
  content:""; width:6px; height:6px; margin-left:.5rem;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
}
.calc-help[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.calc-help-body{font-size:.88rem; color:var(--muted); padding-bottom:.5rem}
.calc-help-body ul{margin:.5rem 0 .7rem; padding-left:1.1rem}
.calc-help-body li{margin-bottom:.35rem}
.calc-help-body strong{color:var(--ink)}
.calc-work summary::after{
  content:""; width:7px; height:7px; margin-left:.6rem;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
}
.calc-work[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.calc-work-body{padding-bottom:.4rem}
.calc-dl{
  display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.2rem;
  margin:0 0 1rem; font-size:.9rem; font-variant-numeric:tabular-nums;
}
.calc-dl dt{color:var(--faint)}
.calc-dl dd{margin:0; color:var(--ink)}

/* Once the live calculator is running, the static table is a reference
   rather than the answer, so it steps back. */
#static-table.is-secondary{
  margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line);
}
#static-table.is-secondary h2{font-size:1.24rem; letter-spacing:.028em}

/* ═══ Contact ══════════════════════════════════════════════════════ */
.contact-grid{display:grid; gap:clamp(1.75rem,4vw,3rem); align-items:start}
@media (min-width:62rem){ .contact-grid{grid-template-columns:1fr 1.1fr} }

.phone-card{
  padding:1.9rem 1.6rem; border-radius:16px; text-align:center;
  background:linear-gradient(180deg,var(--hdr-a),var(--hdr-b));
  box-shadow:var(--shadow);
}
.pc-label{
  margin:0 0 .35rem; font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:.86rem; letter-spacing:.13em; text-transform:uppercase;
  color:#fff; /* 4.63:1 on the gradient's light end - .9 alpha failed AA */
}
/* The number itself lives in the footer and nowhere else - the owner's
   decision, and a reasonable one for a personal cell. This card sells the
   two actions instead of shouting a number at a page nobody dialed from. */
.pc-sub{
  margin:0 0 1.15rem; color:#fff; font-size:1.02rem; line-height:1.45;
  max-width:34ch; margin-inline:auto;
}
.pc-btn{background:#17181a; color:#fff; border-color:rgba(255,255,255,.2); width:100%}
.pc-btn:hover{background:#000; color:#fff}
.pc-btn svg{fill:var(--accent-hi)}
.pc-alt{margin:1.1rem 0 0; font-size:.94rem; color:rgba(255,255,255,.92)}
.pc-alt a{color:#fff; display:inline-flex; align-items:center; min-height:44px}

/* ═══ Quote form ═══════════════════════════════════════════════════ */
.contact-form h2{margin-bottom:.5rem}
.quote-form{margin-top:1.75rem; display:grid; gap:1.15rem}
.field{display:grid; gap:.42rem}
.field label{
  font-family:'Oswald',Impact,var(--sans); font-weight:600; font-size:.92rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
  display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap;
}
.req,.opt{
  font-family:var(--sans); font-weight:400; font-size:.72rem;
  letter-spacing:.04em; text-transform:uppercase; padding:.1rem .4rem;
  border-radius:5px;
}
.req{background:rgba(242,106,27,.16); color:var(--accent-hi)}
.opt{background:var(--surface2); color:var(--faint)}
.field input,.field select,.field textarea{
  width:100%; min-height:52px; padding:.75rem .9rem;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:12px;
  font-family:var(--sans); font-size:1rem; line-height:1.45;
  transition:border-color var(--t-med), background-color var(--t-med);
}
.field textarea{min-height:8rem; resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:3px solid var(--accent); outline-offset:2px; border-color:var(--accent);
}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.hint{margin:0; font-size:.86rem; color:var(--faint)}
.form-submit{width:100%; margin-top:.35rem}

/* Honeypot — off-screen rather than display:none so it still gets filled */
/* Call and text, side by side. Wraps to two rows on a narrow phone rather
   than squeezing either target below 44px. */
.cta-actions,.pc-actions{
  display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center;
  margin:0;
}
/* On the orange band a ghost button needs a white edge to read at all. */
.cta-band .btn-sms{
  border-color:rgba(255,255,255,.65); color:#fff;
}
.cta-band .btn-sms:hover{background:rgba(0,0,0,.22)}

/* A checkbox reads as a row, not a stacked label-over-control like the
   text fields. The 44px min-height is on the LABEL so the tap target is
   the words, not just the box. */
.field-check{display:flex; align-items:center; gap:.7rem; margin-bottom:1.15rem}
.field-check input{width:22px; height:22px; accent-color:var(--accent); flex:none; margin:0}
.field-check label{display:flex; align-items:center; min-height:44px; margin:0; cursor:pointer}

/* The tagline. It sits beside the location in the masthead rather than
   replacing it - the location orients a stranger and is a real local
   signal, so the slogan joins it rather than evicting it. */
.brand-dot{opacity:.55; margin:0 .15em}
.foot-tagline{
  margin:-.35rem 0 .9rem; font-family:'Oswald',Impact,var(--sans);
  font-weight:600; font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-hi);
}
.hero-tagline{color:var(--accent-hi)}

/* A quoted rule from an outside authority. Set apart deliberately: the
   whole credibility of the dock-rules page rests on the reader being able
   to see where our words stop and Georgia Power's begin. */
.rule-quote{
  margin:1.5rem 0; padding:1.25rem 1.4rem; border-radius:12px;
  background:var(--surface2); border:1px solid var(--line);
  border-left:3px solid var(--accent);
}
.rule-text{
  margin:0 0 .6rem; font-size:1.06rem; line-height:1.5; color:var(--ink);
}
.rule-src{
  font-size:.85rem; color:var(--faint); font-style:normal;
  letter-spacing:.02em;
}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ═══ Utilities ════════════════════════════════════════════════════
   Replace inline style= attributes, which a strict CSP forbids without
   'unsafe-inline'. The site ships zero inline styles and zero scripts,
   so the policy can stay tight. */
.mb0{margin-bottom:0}
.mt-s{margin-top:1.4rem}
.link-row{display:flex; flex-wrap:wrap; gap:.65rem; margin:1.4rem 0 0}

/* ═══ FAQ ══════════════════════════════════════════════════════════
   <details>/<summary> gives an accordion with zero JavaScript. The
   answers are in the DOM whether open or not, so search engines and
   screen readers get the full text either way — which is also what
   makes the FAQPage schema legitimate. */
.faq{margin-top:2rem; max-width:52rem}
.qa{
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface); margin-bottom:.75rem; overflow:hidden;
}
.section-alt .qa{background:var(--bg)}
.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:60px; padding:.9rem 1.25rem; cursor:pointer; list-style:none;
  font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:1.04rem; letter-spacing:.025em; text-transform:uppercase;
  color:var(--ink);
  transition:background-color var(--t-med);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:""; flex:none; width:11px; height:11px;
  border-right:2px solid var(--accent-hi); border-bottom:2px solid var(--accent-hi);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--t-med) var(--ease-out);
}
.qa[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.qa summary:hover{background:var(--surface2)}
.section-alt .qa summary:hover{background:var(--surface)}
/* .qa clips to its border-radius (overflow:hidden), and the summary's border
   box IS that clip rect - so the global +2px ring is painted entirely outside
   the clip and never appears. 83 accordions across 12 pages had no visible
   focus at all. Draw it inward instead. */
.qa summary:focus-visible{outline-offset:-3px}
.qa-a{padding:0 1.25rem 1.25rem; border-top:1px solid var(--line)}
.qa-a p{color:var(--muted); margin:1rem 0 0; font-size:.985rem}
.qa-a p:first-child{margin-top:1rem}

/* Town tiles are links now, so they need a press state and a real target. */
a.town{
  display:block; text-decoration:none; min-height:44px;
  transition:border-color var(--t-med), background-color var(--t-med), transform var(--t-fast) var(--ease-out);
}
a.town:hover{border-left-color:var(--accent-hi); background:var(--surface)}
.section-alt a.town:hover{background:var(--surface2)}
a.town:active{transform:scale(.99)}
a.town span{display:block}

/* Breadcrumb — visible counterpart to the BreadcrumbList schema. */
.crumbs{margin:0 0 1.1rem}
.crumbs ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  list-style:none; margin:0; padding:0;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--faint);
}
.crumbs li + li::before{content:"/"; margin-right:.5rem; color:var(--line-strong)}
.crumbs a{
  color:var(--muted); text-decoration:none;
  /* Small type, full-size hit area. DESIGN.md sets 44px and breadcrumbs
     are not an exception just because convention draws them small. */
  display:inline-flex; align-items:center; min-height:44px;
}
.crumbs a:hover{color:var(--accent-hi); text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--ink)}

/* ═══ Motion ═══════════════════════════════════════════════════════
   Scroll-driven reveals with NO JavaScript. `animation-timeline: view()`
   ties the animation to the element's own position in the scrollport, so
   there is no observer, no library, and nothing for the CSP to forbid.

   Wrapped in @supports so browsers without it simply show the content —
   the content is never hidden by default, only by the rule that also
   knows how to reveal it. Get that backwards and unsupported browsers
   render a blank page.

   DESIGN.md motion tokens: --t-screen 200ms, 8px rise, --ease-out. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes rise {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: none; }
    }
    .section > .wrap > .eyebrow,
    .section > .wrap > h2,
    .card,
    .shot,
    .town,
    .qa,
    .split-copy,
    .split-media,
    .callout,
    .towns,
    .checks li {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    /* The hero is above the fold — it should never animate in on load. */
    .hero *, .page-head * { animation: none; }
  }
}

/* ═══ Tactility ════════════════════════════════════════════════════
   DESIGN.md: "every tappable surface has a press state". Photographs get
   a slow lift on hover; the press is quick. Pointer-only, so touch users
   never see a stuck hover state. */
@media (hover: hover) and (pointer: fine) {
  .card-media .media,
  .shot picture {
    overflow: hidden;
    display: block;
  }
  .card-media .media img,
  .shot img {
    transition: transform 420ms var(--ease-out), filter 420ms var(--ease-out);
  }
  .card-media:hover .media img,
  .shot:hover img {
    transform: scale(1.035);
    filter: brightness(1.06);
  }
  .card-media, .shot {
    transition: border-color var(--t-med), box-shadow var(--t-med);
  }
  .card-media:hover, .shot:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
  }
  .split-media, .hero-media {
    transition: box-shadow 420ms var(--ease-out), border-color 420ms var(--ease-out);
  }
  .split-media:hover {
    border-color: var(--line-strong);
  }
}

/* ═══ Small details that read as care ══════════════════════════════ */
::selection{ background:var(--accent); color:var(--accent-ink); }

/* Scrollbar, on the platforms that let us style it. */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar{ width:12px; height:12px; }
  ::-webkit-scrollbar-track{ background:var(--bg); }
  ::-webkit-scrollbar-thumb{
    background:var(--surface2); border-radius:999px;
    border:3px solid var(--bg);
  }
  ::-webkit-scrollbar-thumb:hover{ background:var(--line-strong); }
}

/* Someone will print the contact page to take to the dock. */
.print-only{ display:none; }

/* ── the lake map: the entry list ──────────────────────────────────────
   The map is the picture; this list is the interface. One article id per
   labeled arm, so a pin in the SVG links to its row and :target lights it.
   Rows are plain HTML at 56px or more, so the tap target never depends on
   how far the SVG is scaled. Exposure is a WORD and a DIRECTION - never a
   distance - and the glyph beside the word repeats that fact; it is not a
   second channel. */
.lk-entries{margin-top:2.6rem; max-width:62rem}
.lk-entries h2{margin-bottom:1rem}
.lk-entries > p{color:var(--muted); max-width:62ch}
.lk-legend{
  list-style:none; margin:1.6rem 0 0; padding:1.1rem 0 0;
  border-top:1px solid var(--line);
  display:grid; gap:.9rem 1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));   /* four across inside 62rem; 15rem fell to 3+1 */
}
.lk-legend li{color:var(--muted); font-size:.95rem; line-height:1.45}
.lk-legend strong{
  display:flex; align-items:center; gap:.55rem; margin-bottom:.2rem;
  font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:.92rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
}
.lk-legend + .fine{margin-top:.9rem}
/* The glyph is a Harvey ball: how full it is is how open the arm is. Four
   states for four bands, drawn in CSS so it prints and needs no image. */
.lk-sw{
  flex:none; display:inline-block; width:.85rem; height:.85rem; border-radius:50%;
  border:2px solid var(--accent-hi); background:transparent;
}
.lk-sw--enclosed{border-color:var(--faint)}
.lk-sw--sheltered{background:conic-gradient(var(--accent-hi) 25%, transparent 0)}
.lk-sw--mixed{background:conic-gradient(var(--accent-hi) 50%, transparent 0)}
.lk-sw--open{background:var(--accent-hi)}
/* County headings echo the eyebrow-with-hairline, the family signature. */
.lk-county{
  display:flex; align-items:center; gap:.85rem; margin:2.4rem 0 .5rem;
  font-size:.95rem; letter-spacing:.11em; color:var(--accent-hi);
}
.lk-county::after{content:""; flex:1; height:1px; background:var(--line)}
.lk-county small{font-size:.78rem; letter-spacing:.1em; color:var(--faint)}
.lk-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.lk-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:1rem; align-items:center;
  min-height:56px; padding:.65rem .75rem; margin:0 -.75rem;
  border-bottom:1px solid var(--line);
}
.lk-who{min-width:0}
.lk-row h4{font-size:1.08rem; letter-spacing:.03em; line-height:1.2; color:var(--ink); text-wrap:pretty}
.lk-cty{display:block; margin-top:.1rem; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.lk-ex{display:flex; flex-direction:column; align-items:flex-end; text-align:right}
.lk-band{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:.88rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
}
.lk-dir{display:inline-flex; align-items:center; gap:.4rem; margin-top:.15rem; font-size:.9rem; color:var(--muted); white-space:nowrap}
/* One up-arrow, turned to the bearing. Eight classes because style="" is
   forbidden by the CSP and a custom property has nowhere else to live. */
.lk-arrow{display:inline-block; width:1em; text-align:center; line-height:1; color:var(--accent-hi); font-weight:700}
.lk-arrow--n{transform:none}
.lk-arrow--ne{transform:rotate(45deg)}
.lk-arrow--e{transform:rotate(90deg)}
.lk-arrow--se{transform:rotate(135deg)}
.lk-arrow--s{transform:rotate(180deg)}
.lk-arrow--sw{transform:rotate(225deg)}
.lk-arrow--w{transform:rotate(270deg)}
.lk-arrow--nw{transform:rotate(315deg)}
/* A pin was tapped: say which row it landed on, without moving anything. */
.lk-row:target{background:var(--surface); box-shadow:inset 3px 0 0 var(--accent); border-radius:0 10px 10px 0}
.lk-foot{margin-top:2rem; padding-top:1rem; border-top:1px solid var(--line); max-width:72ch}
.lk-foot strong{color:var(--muted)}

@media print {
  .lk-row{break-inside:avoid}
  .lk-county{break-after:avoid}
  .masthead, .nav, .cta-band, .crumbs, .skip, .quote-form { display:none; }
  .print-only{ display:block; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .section, .page-head, .hero{ padding-block:.75rem; border:0; }
  h1,h2,h3{ color:#000; }
  p, .lead, .card p{ color:#222; }
  a[href^="tel:"]::after{ content:" (" attr(href) ")"; }
  a[href^="tel:"]{ font-weight:700; }
  .shot, .card{ break-inside:avoid; border:1px solid #ccc; }
  /* A calculator result is a thing people print and hand to an electrician,
     so the answer and the working both have to survive the trip. */
  .calc-stage, .calc-share{ display:none; }
  .calc-readout{ border:1px solid #999; box-shadow:none; padding:1rem; }
  .calc-headline{ color:#000; }
  .calc-label, .calc-sub, .calc-dl dt{ color:#333; }
  .calc-note{ border-left:3px solid #999; background:none; color:#000; }
  .calc-work[open] .calc-work-body, .calc-work-body{ display:block !important; }
  .calc-work summary{ color:#000; }
  .calc-table th, .calc-table td{ border-bottom:1px solid #ccc; }
  .foot{ background:none; border-top:1px solid #999; }

  /* The maintenance checklist is meant to be printed and left in the
     boathouse, so it gets real attention rather than whatever falls out
     of the screen styles. Items must not split across a page break, the
     accent edge becomes a plain rule, and the stop panel keeps a heavy
     border because it is the part that matters most on a wall. */
  .print-note, .cta-row, .cta-note, .link-row, .eyebrow, .socials{ display:none; }
  .mx-item{
    break-inside:avoid; page-break-inside:avoid;
    background:none; border:1px solid #ccc; border-left:3px solid #333;
    padding:.85rem 1rem; margin-bottom:.6rem;
  }
  .mx-tag{ color:#555; }
  .mx-h{ font-size:14pt; margin-bottom:.5rem; }
  .mx-dl dt{ color:#000; }
  .mx-dl dd{ color:#222; }
  .mx-note{ color:#333; border-top:1px solid #ddd; }
  .stop-panel{
    background:none; border:2px solid #000; border-left:2px solid #000;
    break-inside:avoid;
  }
  .stop-lead, .stop-list, .stop-note{ color:#000; }
  /* A URL on the page is how somebody gets back to the live version
     months later, standing in the boathouse holding the paper.

     It is drawn from an attribute rather than written here, because this
     selector is not scoped to any page: hardcoding one URL stamped the
     maintenance checklist's address onto the bottom of EVERY printed page,
     including pages that are not it. */
  .foot::after{
    content:attr(data-print-url);
    display:block; margin-top:.5rem; font-size:9pt; color:#333;
  }
}

/* The safety stripe is the brand's signature edge. Repeating it at the
   top of the footer closes the page the same way the header opens it. */
.foot{ position:relative; }
/* Same machined edge closes the page, mirrored: the light catches the
   underside here, so the bright hairline sits at the bottom of the bevel. */
.foot::before{
  content:""; position:absolute; inset-inline:0; top:0; height:4px;
  background:linear-gradient(180deg,
    rgba(0,0,0,.55)       0 2px,
    rgba(255,255,255,.05) 2px 3px,
    rgba(255,255,255,.16) 3px 4px);
}

/* ═══ Composed section intros ══════════════════════════════════════
   Full-width sections centre their intro, with the eyebrow's hairline
   running out to BOTH sides — the PMW signature, made symmetrical.
   Only direct children, so the split bands and cards stay left-aligned
   where reading order matters. */
.section > .wrap > .eyebrow{
  justify-content:center;
  font-size:.82rem;
  letter-spacing:.19em;
  margin-bottom:1.25rem;
  /* .eyebrow is a <p>, so the global p{max-width:64ch} was clipping the
     rules and pulling the whole block off the centred h2 below it. */
  max-width:none;
}
.section > .wrap > .eyebrow::before{
  content:""; flex:1; height:1px; background:var(--line);
}
.section > .wrap > h2{
  text-align:center;
  margin-inline:auto;
  max-width:20ch;
}
.section > .wrap > h2 + p{
  text-align:center;
  margin-inline:auto;
  max-width:54ch;
  margin-bottom:0;
}
.section > .wrap > .grid,
.section > .wrap > .gallery,
.section > .wrap > .towns,
.section > .wrap > .faq{
  margin-top:3rem;
}
.section > .wrap > .faq{margin-inline:auto}

/* ═══ Ambient ground ═══════════════════════════════════════════════
   A single fixed layer behind everything: a wide, very low-opacity warm
   glow plus a fine grid. Ghidorah's page never feels like flat #000 —
   there is always something happening in the dark. Pointer-events none,
   and it costs one composited layer. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(242,106,27,.055), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(242,106,27,.035), transparent 62%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.35));
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.038) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(80% 60% at 50% 0%, #000, transparent 75%);
  -webkit-mask-image:radial-gradient(80% 60% at 50% 0%, #000, transparent 75%);
}
/* Sections that carry their own ground must stay opaque over it. */
.section-alt{background:var(--surface)}
.foot{background:var(--surface)}

/* ═══ Staggered reveals ════════════════════════════════════════════
   View timelines have no delay, so the stagger comes from shifting each
   item's entry range — later siblings finish their reveal further into
   the scroll. Reads as a sequence rather than a single pop. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .grid > *:nth-child(2), .gallery > *:nth-child(2),
    .towns > *:nth-child(2){ animation-range: entry 4% entry 50%; }
    .grid > *:nth-child(3), .gallery > *:nth-child(3),
    .towns > *:nth-child(3){ animation-range: entry 8% entry 58%; }
    .gallery > *:nth-child(5){ animation-range: entry 4% entry 50%; }
    .gallery > *:nth-child(6){ animation-range: entry 8% entry 58%; }
    .qa:nth-child(2){ animation-range: entry 3% entry 47%; }
    .qa:nth-child(3){ animation-range: entry 6% entry 52%; }
    .qa:nth-child(4){ animation-range: entry 9% entry 57%; }
  }
}

/* ═══ Quieter nav ══════════════════════════════════════════════════
   Ghidorah's nav is nearly invisible until you look for it. Ours keeps
   its 46px targets and its "nothing hidden" rule, but stops shouting. */
.nav a{
  font-size:.84rem;
  letter-spacing:.1em;
  color:rgba(255,255,255,.86);
}

/* ═══════════════════════════════════════════════════════════════════
   SPARSE PASS — pushed further toward ghidorah.ai (owner request).

   The structural move is that display type belongs to the HERO ALONE.
   Ghidorah never uses a billboard heading below the fold; section titles
   are small, heavily tracked and quiet, and the space does the work.

   Safe for conversion here because the masthead is sticky: tap-to-call
   is on screen at every scroll position, so the body can go as quiet as
   it likes without ever putting the phone number out of reach.
   ═══════════════════════════════════════════════════════════════════ */

/* The hero becomes a full field with the statement floating in it. */
.hero{
  min-height:min(88vh, 46rem);
  display:flex;
  align-items:center;
  padding-block:clamp(5rem,12vw,9rem);
}
.hero-grid{width:100%; gap:clamp(2.5rem,5vw,4.5rem)}
.hero .lead{margin-bottom:2.4rem; max-width:46ch}
.hero .cta-row{margin-bottom:2.6rem}

/* Far more air between sections. */
.section{padding-block:clamp(5.5rem,12vw,10rem)}
.page-head{padding-block:clamp(4.5rem,9vw,7rem)}

/* Section headings step down: quiet, tracked, no longer competing with
   the hero. The eyebrow above and the line below carry the meaning. */
.section > .wrap > h2{
  font-size:clamp(1.28rem,1.9vw,1.62rem);
  letter-spacing:.16em;
  font-weight:600;
  max-width:24ch;
}
.section > .wrap > .eyebrow{
  font-size:.74rem;
  letter-spacing:.26em;
  margin-bottom:1.5rem;
}
.section > .wrap > h2 + p{
  margin-top:1.15rem;
  font-size:1.02rem;
  color:var(--muted);
  max-width:50ch;
}
.section > .wrap > .grid,
.section > .wrap > .gallery,
.section > .wrap > .towns,
.section > .wrap > .faq{ margin-top:4.25rem; }

/* Split bands get the same restraint. */
.split-copy h2{
  font-size:clamp(1.28rem,1.9vw,1.62rem);
  letter-spacing:.16em;
}
.split{gap:clamp(2.5rem,5vw,4.5rem)}

/* Interior page heads keep a display h1 — it is that page's hero. */

/* Cards: more air inside, quieter edges. */
.grid{gap:1.5rem}
.gallery{--gal-gap:1.5rem}
.card-media .card-body{padding:1.75rem 1.6rem 1.9rem}
.card{padding:1.9rem 1.75rem}
/* ...but a card that leads with a photo still runs the photo edge to edge.
   Same specificity as the rule above and later in the file, so this has to
   restate itself here or the padding wins and the photograph ends up
   floating inside the card like a second, smaller picture. */
.card-media{padding:0}
.card h3{font-size:1.06rem; letter-spacing:.09em; margin-bottom:.85rem}
.card p{font-size:.95rem; line-height:1.7}
.town{padding:1.4rem 1.5rem}
.towns{gap:1.1rem}

/* FAQ: quieter, roomier. */
.qa summary{font-size:.98rem; letter-spacing:.05em; min-height:66px; padding:1.05rem 1.4rem}
.qa-a{padding:0 1.4rem 1.5rem}
.qa{margin-bottom:.9rem}

/* The masthead is sticky, so an anchored jump lands underneath it unless the
   scrollport reserves its height. MEASURED 2026-09-05, live, at several widths:
   the masthead is 167px while the nav wraps to two rows, and 119px once it fits
   on one - and it stops wrapping between 620 and 630px, nowhere near the 62rem
   this used to be paired with.

   RE-MEASURED 2026-09-05 after the pre-launch audit, because the first pass
   only measured the TWO-row case and the nav has since gained the lake map.
   Masthead height by viewport width:

       280px  243px   |  348px  216px   |  667px  173px
       320px  230px   |  351px  167px   |  676px  125px
       344px  216px   |  640px  173px   |  700px  125px

   Three bands, not two. The nav wraps to THREE rows below ~349px and does not
   collapse to one until ~672px - so the old 40rem (640px) step dropped the
   reservation to 136px while the masthead was still 173px, and there was no
   step at all for the three-row case. A deep link landed 37px under the header
   on a phone in landscape and 54px under it on a 320px phone.

   7rem (112px) was less than the masthead at EVERY width, so every deep link on
   the site landed with its heading hidden. On the calculator that put the reader
   mid-sentence in "It trips" with no heading in view at all.

   scroll-padding on the scrollport is the lever that governs a cold fragment
   navigation - verified by measurement, the browser landed the target at exactly
   this value. scroll-margin on the target ADDS to it (baseline measured 288px =
   112 + 176), which is why the two are no longer used together: one lever, sized
   to the thing it is clearing, applied on both the cold path and any
   scrollIntoView. */
html{scroll-padding-top:16rem}                                  /* 3-row nav, to 243px */
@media (min-width:22rem){ html{scroll-padding-top:11rem} }     /* 352px+, 2 rows, to 173px */
@media (min-width:44rem){ html{scroll-padding-top:8.5rem} }    /* 704px+, 1 row, to 125px */

/* On a phone the hero should fill the screen without forcing a scroll
   just to reach the first CTA — cap it and let content set the height. */
@media (max-width:61.99rem){
  .hero{min-height:0; padding-block:clamp(3rem,9vw,4.5rem)}
  .section{padding-block:clamp(4rem,11vw,6rem)}
}

/* <main> carries tabindex="-1" so the skip link moves focus, not just the
   scroll position. It must never show an outline of its own for that. */
main:focus{outline:none}

/* ═══ Deep links and the sticky masthead ══════════════════════
   This used to set scroll-margin-top on :target and on the elements the tools
   reveal. It is gone on purpose: scroll-margin on the target and scroll-padding
   on the scrollport ADD, so the pair over-scrolled a JS scrollIntoView to 288px
   while a cold fragment load - which uses scroll-padding alone - still landed
   under the masthead at 112px. Two levers, two different answers, and the
   broken one was the case that matters: somebody opening a texted link.

   The single html{scroll-padding-top} above now covers both paths, and it
   covers elements the tools reveal too, because it is a property of the
   scrollport rather than of the target. Do not reintroduce scroll-margin
   without re-measuring both paths - see the note on that rule. */

/* ═══ Focus ring on orange grounds ═════════════════════════════════
   The default ring is --accent, which measures 1.51:1 against --hdr-a
   and 1.96:1 against --hdr-b — effectively invisible, and the masthead
   is the FIRST thing a keyboard user reaches on every page. White gives
   4.63:1 / 6.01:1 / 7.56:1 on those three grounds.
   Applies anywhere the brand orange is the background. */
.masthead :focus-visible,
.cta-band :focus-visible,
.phone-card :focus-visible{
  outline-color:#fff;
}

/* ═══ The maintenance checklist ═══════════════════════════
   Each item is a <dl>, which is the honest markup: "look at" / "wrong looks
   like" / "then" really are term-description pairs. The print rules at the
   bottom of this file matter as much as these - the page is meant to end up
   on a boathouse wall. */
.mx-item{
  padding:1.6rem 1.5rem; margin-bottom:1.15rem; border-radius:14px;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--accent);
  break-inside:avoid;
}
.mx-item:last-child{margin-bottom:0}
.mx-tag{
  margin:0 0 .3rem; font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-hi);
}
.mx-h{margin:0 0 1.1rem; font-size:clamp(1.3rem,4vw,1.6rem)}
.mx-dl{margin:0 0 1rem; display:grid; gap:.55rem}
.mx-dl dt{
  font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint);
}
.mx-dl dd{margin:0 0 .5rem; color:var(--ink); line-height:1.55}
.mx-dl dd:last-child{margin-bottom:0}
.mx-note{
  margin:0; padding-top:.9rem; border-top:1px solid var(--line);
  font-size:.94rem; color:var(--muted);
}
/* Only worth saying on screen; on paper the reader is already holding it. */
.print-note{
  margin:1.4rem 0 0; font-size:.93rem; color:var(--faint);
}

/* ═══ Process steps and trust cards ════════════════════════
   The numbers here are real information - this IS a sequence, one thing after
   another - so they are drawn rather than decorative. Counter rather than the
   list marker, because the marker cannot be positioned against the rule. */
.steps{
  list-style:none; margin:1.9rem 0 0; padding:0;
  counter-reset:step;
}
.steps > li{
  counter-increment:step;
  position:relative;
  padding:0 0 2rem 3.4rem;
  border-left:1px solid var(--line);
  margin-left:1.1rem;
}
.steps > li:last-child{border-left-color:transparent; padding-bottom:0}
.steps > li::before{
  content:counter(step);
  position:absolute; left:-1.1rem; top:0;
  width:2.2rem; height:2.2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface2); border:1px solid var(--line-strong);
  font-family:'Oswald',Impact,var(--sans); font-weight:600; font-size:.95rem;
  color:var(--accent-hi);
}
.steps h3{margin:.15rem 0 .6rem; font-size:clamp(1.08rem,3vw,1.28rem)}
.steps p{margin-bottom:.7rem}

.trust-grid{display:grid; gap:1rem; margin:1.9rem 0 0}
@media (min-width:56rem){
  .trust-grid{grid-template-columns:repeat(3,1fr); gap:1.15rem}
}
.trust-card{
  padding:1.4rem; border-radius:14px;
  background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--accent);
}
.trust-card h3{margin:0 0 .7rem; font-size:1.1rem}
.trust-card p{margin-bottom:.8rem; font-size:.97rem}

/* ═══ The motor troubleshooter ══════════════════════════════
   The tree lives in the markup so the page works with scripting blocked.
   These rules dress it either way: without JavaScript every step and every
   outcome is visible and the page reads as a document, which is also what
   gets indexed. With it, troubleshoot.js hides all but one panel. */

/* The fork. The whole point of the page is that two faults look identical,
   so they are set side by side and the ANSWERS are what differ visually. */
.fork{
  display:grid; gap:1rem; margin:1.9rem 0;
  grid-template-columns:1fr;
}
@media (min-width:44rem){
  .fork{grid-template-columns:1fr 1fr; gap:1.15rem}
}
.fork-side{
  padding:1.35rem 1.4rem; border-radius:14px;
  background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--line-strong);
  display:flex; flex-direction:column; gap:.6rem;
}
.fork-side:first-child{border-top-color:var(--accent)}
.fork-side:last-child{border-top-color:#e5484d}
.fork-when{
  margin:0; font-size:.95rem; color:var(--muted);
}
.fork-what{
  margin:0; font-family:'Oswald',Impact,var(--sans); font-weight:700;
  font-size:clamp(1.5rem,5vw,1.95rem); line-height:1; color:var(--ink);
  letter-spacing:.01em;
}
.fork-why{margin:0; color:var(--ink)}
.fork-do{
  margin:0; font-weight:600; color:var(--ink);
  padding-top:.6rem; border-top:1px solid var(--line);
}

/* The standing safety panel. Always visible, in both modes, above the tool -
   it is not an outcome and must not depend on reaching one. */
.stop-panel{
  margin:1.9rem 0; padding:1.35rem 1.4rem; border-radius:14px;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid #e5484d;
}
.stop-lead{margin:0 0 .7rem; font-weight:600; color:var(--ink)}
.stop-list{margin:0 0 .9rem; padding-left:1.15rem; color:var(--ink)}
.stop-list li{margin-bottom:.35rem}
.stop-note{color:var(--muted); font-size:.95rem}

/* The tool itself. */
.ts{margin:0 0 1.6rem}
.ts-hint{margin:0 0 1rem; color:var(--faint); font-size:.93rem}

.ts-step{margin:0 0 1.6rem}
.ts-q{
  margin:0 0 1rem; font-size:clamp(1.15rem,3.6vw,1.4rem);
  color:var(--ink); line-height:1.25;
}
.ts-q:focus{outline:none}

.ts-opts{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
.ts-opt{
  display:block; min-height:44px; padding:.85rem 1.05rem;
  border:1px solid var(--line-strong); border-radius:12px;
  background:var(--surface2); color:var(--ink); text-decoration:none;
  line-height:1.35;
  transition:background var(--t-fast) var(--ease-out),
             border-color var(--t-fast) var(--ease-out);
}
.ts-opt:hover{background:var(--surface); border-color:var(--accent)}

/* An outcome. Tone is carried on the left edge and the tag, never by colour
   alone - the tag says "Stop" in words for the same reason. */
.ts-out{
  padding:1.5rem; border-radius:14px;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--line-strong);
}
.ts-out.is-warn{border-left-color:var(--accent)}
.ts-out.is-stop{border-left-color:#e5484d}
.ts-out p{color:var(--ink)}
.ts-tag{
  margin:0 0 .4rem; font-family:'Oswald',Impact,var(--sans); font-weight:600;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint);
}
.ts-out.is-warn .ts-tag{color:var(--accent-hi)}
.ts-out.is-stop .ts-tag{color:#ff6b6f}
.ts-h{
  margin:0 0 1rem; font-size:clamp(1.2rem,3.8vw,1.5rem);
  color:var(--ink); line-height:1.25;
}
.ts-h:focus{outline:none}
/* The sentence the page exists to deliver. */
.ts-shout{
  margin:0 0 1rem; padding:.8rem 1rem; border-radius:10px;
  background:var(--bg); border:1px solid var(--line-strong);
  font-weight:600; font-size:1.03rem; color:var(--ink);
}
.ts-next{color:var(--muted)}
.ts-reset{margin:1.2rem 0 0}
.ts-nav{display:flex; flex-wrap:wrap; gap:.7rem; margin:1.2rem 0 0}

/* Blur-up. The placeholder is the picture's own background; the real image
   paints over it as soon as it arrives. No JavaScript, and nothing to fade
   because there is never a moment of empty grey to fade from. */
.lq{
  display:block;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ── the lake map ──────────────────────────────────────────────────────
   The drawing is one inline SVG with its own viewBox, so it scales to the
   column with no media queries and no second request. It is deliberately
   allowed to be tall on a phone: this lake is 30 km across and squashing it
   to fit a screen would make the arms unreadable, which is the whole point
   of drawing it. */
.lakemap-frame{margin:0 0 1.6rem; padding:0}
/* The lake is 30 km across with 28 arms named on it. Fit that to a 375 px
   column and the labels render at three pixels — technically present and
   humanly useless. So the drawing keeps a legible minimum width and the
   FRAME scrolls sideways instead, the same bargain the wide tables make.
   The body never scrolls sideways; only this box does. */
.lakemap-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:14px}
.lakemap{
  display:block; width:100%; min-width:1100px; height:auto;
  border-radius:14px; border:1px solid var(--line);
  background:var(--bg);
}
.lakemap-frame figcaption{margin-top:.8rem}
@media print{
  /* The notice is inside the artwork, so printing the map prints the
     disclaimer with it — same reason it is in the SVG rather than the page. */
  .lakemap{border:1px solid #000; break-inside:avoid}
}


/* Blur-up placeholders, generated. One per image. */
.lq-g-boathouse{background-image:url(data:image/webp;base64,UklGRpQAAABXRUJQVlA4IIgAAAAQBACdASoUAA0APt1apkyopSOiMAgBEBuJZACdFRGAaIdjFMBvFhQCAAD+2fjDUq2TKNT1ckZkmxzzEN2KObs8t8wfBzVK0PUhTLC8kA4BOlMoLKLpFcuKu6fv0BQxYYUQ8XEx571DBNvz8mNWziNlzL2uXGlOuIly0oD14+SJTjeFdTa6N7wA)}.lq-g-bracket{background-image:url(data:image/webp;base64,UklGRsAAAABXRUJQVlA4ILQAAADwBACdASoUABQAPt1mq1EopSOiqAgBEBuJZAC1GxglvAdVO+p9tmGA2+FVC4S4mwAA/KrrKhCPxjerQ3lD2DGe1XfbRkdb1wRm0NeHyJTxYLqeitp4thvvLB2sqyB2yuMEfF+vQoQeBnLrR+AHp2g791qjEQjyjBpiE8eCj1zZ5A5CwOTQtWQgfFFu8NJlC4R2CDzPAMBeSgNQ9vZCVfex5cthg3ZlkpIxjH5uZLeH+cFaQAA=)}.lq-g-bunks-blue{background-image:url(data:image/webp;base64,UklGRpwAAABXRUJQVlA4IJAAAAAQBACdASoUAAoAPt1apkyopSOiMAgBEBuJYgCdMoMluwAAIb79/wWqAAD1kXOvRDCbNto5bq7sGFl7DAHI8l4jv7nr/kT6PMYSzZFQTeg8nFXS9QKgWW9FqqmMlsSkRDA3UCWQudVcW6Np+bE61WHcB3Tec0SKgBy5Juq7szsMkAZ7DJOVbFL1FA2q6xQAAAA=)}.lq-g-cable{background-image:url(data:image/webp;base64,UklGRpwAAABXRUJQVlA4IJAAAADwAwCdASoUAA0APt1apkyopSOiMAgBEBuJZACdH8GJ/gJNh6dE+++wAP6izQwJrrwUctdVD3rrgX8sZyEY0O4YDOLRMxetkG5XEeytNaGxyin8lEwL/0JPYuUJ74QbnH226IiUpQDtyhgfOA4xnBnqsgaAWh7/XEMJxvipmOgVcUx9QB6hnHabwENgut8MwAA=)}.lq-g-dock{background-image:url(data:image/webp;base64,UklGRr4AAABXRUJQVlA4ILIAAACQBQCdASoUABsAPtFQokyoJKMiN/qoAQAaCWwAnQAhzcBWxATNcIspNtWchk8AIvaWY69+AAD+dnISNckHhIJ/b6i4ckZLbEL5o9LKp0lHxt6n9b7qyb5gf/oV6zr6yPFsa2sJCRP7Txs/twIe+dc+3yHigdEeW5QM2xu5+f0TTfGueziX+ly52dinYshM0eJzKvBS5xTJYO5MZMsLwiBLnOqkAiFL0B0nfbPREDy4AAAA)}.lq-g-double{background-image:url(data:image/webp;base64,UklGRqgAAABXRUJQVlA4IJwAAADQAwCdASoUAA8APt1apkyopSOiMAgBEBuJZgC06CPTlgEyochCsEAA/tvjPNLJSfTbZIl1KDygjc1ehiZWr/CfDspVYMqLMV4M/z2tspkb/k+A0+kVjVieQ4eQhMdTlGQ1IrR8I9H5B9+xcw/V/kKK77N4l1SnAd1qj1WlHuCpvDpaLFBciIv8MBpaoXFfw3h/Ae9a/UetwJd44AA=)}.lq-g-hull{background-image:url(data:image/webp;base64,UklGRp4AAABXRUJQVlA4IJIAAAAwBACdASoUAAoAPt1cpkyopSOiMAgBEBuJZgC06Yt8ys/xz1i3oEtEUAAA/oSzdvMPuvXlDn2r41qW9QBPNCvyWOo2/nn0zXnhPyLesET8x16A5PtI4Z38WKw3EacGflsl+15y6dNMRRO9md67VdesYUZPvs//gtciVHXeziBnkwFw1VIp318yI035hFh7bAAAAA==)}.lq-g-overhead{background-image:url(data:image/webp;base64,UklGRp4AAABXRUJQVlA4IJIAAACwBACdASoUAA8APt1apkyopSOiMAgBEBuJYgCsEf/3ZmBghQyTfxMBJa/BX2AAAP5xdDHLrgEqOLm9sZ9rsMxA2RkQ0CeyxVXYNKVH9D5RkhHN2/QIckol8LeLBlQ2SazdxSyrtFhhFFWr5TDrwp+AC9U5mvQUayPyVyqzSEM4hqWtnjjCoyUTrSjFUDR0BlAAAA==)}.lq-g-redboat{background-image:url(data:image/webp;base64,UklGRuAAAABXRUJQVlA4INQAAABQBQCdASoUABQAPt1orVEopaQiqAgBEBuJagCdITuBm+34rd2UqNlorUevC9F65OVPJgAA/PlLjCKslJj4d391I4j1VK1fBwVuhd3HbnPabRNFIdZmtpZ6MtQjrRcKa4aNxHj48OOAQdh2HYU+Psl4l7B9uMU90GodbzsAtHlgBE5pTI4O123ZzmERZOCN0Qoc6tTL0/GDj/hQEzOMfWGXmw9gIqHQM2+sD0tM3D68I312sYYwBZAqI83EeIA9qjOnRhx1u6+vOSdzuf3/nGCeLBgAAA==)}.lq-hero{background-image:url(data:image/webp;base64,UklGRqoAAABXRUJQVlA4IJ4AAAAwBACdASoUAAwAPt1cpkyopSOiMAgBEBuJbACdMoADQ5F45QgJiqGwlAAA/jQVjIwr6WkXpeRP6ITLjJ8wUa1OWNN5peVDXkLh99fzyLZZYTgt5SwbbCCGO0wk2O9vcCj5gzyEganDUcBm9PgB2o5sDAul0XT9CaGASKxn3Utxxy3EN+VyfA55G2OwSV/r8XT0WCZlb+WpzS8nUEgAAA==)}.lq-install{background-image:url(data:image/webp;base64,UklGRqwAAABXRUJQVlA4IKAAAABwBACdASoUAA8APt1apkyopSOiMAgBEBuJYgCdL5A4AChcdOmLFrc9qzRZqAD9eIk+Mz9+suJiJNiOAhzbsGMdoSh9VqZJblZCRuEaUdvEGwG550XEoiNdit1/wjmTMIsQ2rfiNV9GZaZ62ISm/yXKmZkk0fcM40INEkh9h/Yyp/2rmLtdtWAZaLZ1pu8yxrj5G9n+50HH/Q22ob0ewAAA)}.lq-lake{background-image:url(data:image/webp;base64,UklGRq4AAABXRUJQVlA4IKIAAACQBACdASoUAA8APt1apkyopSOiMAgBEBuJaACdMoMjkn/LsAU6xkyeCDlWd+AA/r6JtYVE33nVOSk5eID95pgiPL6q86zymRA+aWxXBILtBdeMCiFuaGnnYrdiRUN77k9Otf7Aw0lao+OMCNmbxP9HGMkrAD2QENcf4ys3C1X5NuuoyzHNXEQ6xr5CxJKq1KtMiP5ugnxXxW7e0EkHYzZ1QAA=)}.lq-mods{background-image:url(data:image/webp;base64,UklGRpQAAABXRUJQVlA4IIgAAAAwBACdASoUAA8APt1apkyopSOiMAgBEBuJQBOmUGMEz/gNDfdL6gHZUrAA/nMfIxGSvA8LLiamJ1C9AjJWS0gHcqJJC3Ef3YmkXiLUFTjwOi0yxfctgArLB/JsRmspOpRzXvv4au/WHdyBGSgTPruZ/AX8ChFAsbwMu2s1L8mu5Yy0+Q4i4AAA)}.lq-n-blue-water{background-image:url(data:image/webp;base64,UklGRqIAAABXRUJQVlA4IJYAAACwAwCdASoUAA0APt1apkyopSOiMAgBEBuJYwAAW+Je9VNmlvPdlADOP2+UVhb8UE5Lws0l6xMByep6f3zbuWFKlzUtoe7/tS6SQVDXeIYKUsnxyDwM9EoRZJBqcZf+Gj09xOSWI791tAm85wABbVve0MG1s6taTJmpG/py/xkYv+fxNkgvy+8o0Zl4JeoJCmKaLUMXAgA=)}.lq-n-boat-on-lift{background-image:url(data:image/webp;base64,UklGRp4AAABXRUJQVlA4IJIAAAAQBACdASoUAA8APt1apkyopSOiMAgBEBuJYgCdIIjBs/NwUBmd28qX7AD+wHPCzZRX8T6N3erf7AMHXVzqV9gYpY4MK8nIk4b1areYd+RnSy0Zr4wRyLt4ahSJ6j0Z1NBm4mRMDKia+0n96/Xo5lDf38R657wVzCltoZRyZe3iJrrFoE/EuXJ4xNNMIRgNZ4AAAA==)}.lq-n-bunks-open{background-image:url(data:image/webp;base64,UklGRsAAAABXRUJQVlA4ILQAAADwBACdASoUABQAPt1mrFEopSQiqAgBEBuJQBgbsYEKRV1P6naAFQHYbeulCVOyp4AA/NlE+yT/7Bn3PZLYOfbYBL4rq+H5uV71K99B1NPitMgsnwc/ps41Wx9fFWSzv0wHeaY5RKX7gkqPF6+Y3/rw54Bi75KyXRhoujeWDhyB4Z+BS/C78IPPLFRmdxKakoY1NGymABPo/J8shIOcWJHWssBX1GJpgewTwIftrl04YAAAAAA=)}.lq-n-cove{background-image:url(data:image/webp;base64,UklGRugAAABXRUJQVlA4INwAAABwBQCdASoUABsAPt1iqU4opaOiMBgIARAbiWMAAC+Xm5RV1QTwpspbx4yTbxrSb0Hs9AYAAP7j6SXhAm1wpzxejCVwyOkVVHbMhl0A5zGR4H2NAbtO7UIoNi7oqxyeeGZitFYodgNAbR9ycwYa1/SnmUF6vn36QqR5zxBBVaYNUyzpTEtitEknFvwPEluOlNqYiE/XshfdnipLvGDMTP5Viq3ajaDdHzqOBrKkkrT8+Bnrb7GSkFnchzN882us51urY2/AmhpGpEuubMPV0Pnf0VJERQAd/ueHAAAA)}.lq-n-covered-dock{background-image:url(data:image/webp;base64,UklGRuAAAABXRUJQVlA4INQAAACwBQCdASoUABsAPt1epkyopSOiMAgBEBuJQBadZdU0IF4rXjilHJB34uUqYF6uEvyhHsHkD6AA/roHnZ0+5B7TiP4DtOmXOBcz2yZK7ST40AITr7hg/XWkl8dRatHRcDJlGqciNkbiYUNmRVJw0ErG6wsoTqkV7eJIcsNItXRZ3M6jOfPCQmcA99/wuhP2p+9xBc7qlp0vnNeFz1b53o3/8JRFcAnqBYXR6s8zwysV7Y73pSs+ORTgJwdjUvdCNBxUsaflJaSgVO+FQw02RQQgHgAAAA==)}.lq-n-double-lift{background-image:url(data:image/webp;base64,UklGRqAAAABXRUJQVlA4IJQAAAAQBACdASoUAA0APt1apkyopSOiMAgBEBuJaAC7ACK4eolq+/UDtMfsoAD+5TlGS/u6ixwgeIyN21zLbaxufdl0lYbFpAnXOfXMPbxHR/NVFztM2vwizAVEFdEBDD6oIu7w1v35GindaZhv2nKAMDUe6jjLtqiwj47wS40vPtqW/eSET/fzQDhR4fOZ3paxM8idgAAA)}.lq-n-golden-hour{background-image:url(data:image/webp;base64,UklGRtAAAABXRUJQVlA4IMQAAABwBQCdASoUABQAPt1mqlEopSOiqAgBEBuJQBOiP/xvAuE8ysr+gkGoVz3R2qKNASz8GWBIAP7o8WVXdiOQIEdFliMRrmvx/aSRXfa70dYnRwgCAVFl1f5+a3U3nwe4IAaIVvL6sj5FkCE4NH/JM9Qs39HZh297wPSlkT7aD7VlqLdoW3p7rvDF0R0lyWG7TCqCVUmcYbel0JjLsiydV3NKzepW2EdOkj+43UXEkXzkyqDbR6G6PZZ28hjy8KxoCuE1X5AA)}.lq-n-monterey{background-image:url(data:image/webp;base64,UklGRsAAAABXRUJQVlA4ILQAAAAQBACdASoUABQAPt1kqU+opSOiKAqpEBuJYwC0+f/gG1l90hNy4JGvkAD+J4qSAmoscdi50+2gav8i4EddAgUX6qI64eYz46LBiTjVqNb8KIA/xHIRCN+WNbacWD2d0ZUeSlwhNWEJ9bkhlGePaf3N/R4YD5KawrNWFK7qoLljFwya1wWR1uZjhWys8GbfqpIGADguWlWx6HymZ+t//wMpc56i6FzUVzHBqHii3M/l918aAAA=)}.lq-n-motor{background-image:url(data:image/webp;base64,UklGRuAAAABXRUJQVlA4INQAAABQBQCdASoUABsAPt1gpk4opaMiMBgIARAbiUAWnQaGnOTU/DPmijze5Cu/7Si6yLSAPZAA/nXQfY7k/j83ww0g3mdXF+qiMybhngA/6vl+xO7hI3zEwwstFi7azy4D8THZR0Nwng3St/69moalhcIefTeUsZ9/n4PEErDcZquuucHRXKberScHiDfZ553aIzpUOv/ZVKLDN3j4a4OXuYad1aSzJVOo5dL+cYQXqJeKtWsUZ/MrKFa3xq/aFuK5Yq5lsfefPfPHVgq0QVZJWnFLTbRAAA==)}.lq-n-new-timber{background-image:url(data:image/webp;base64,UklGRgABAABXRUJQVlA4IPQAAAAwBgCdASoUABsAPt1irE8opaSiKAqpEBuJQBOmUGUnDut/8Ww6ZGDpjPbnNSXjIS2N9QdCYfrE0zVoAP6o6Mm2ujiJYk+ExOVpaOuKJ3yCZ41n4bROqgmIdXok50w8q9Vj7VErNkHKfM43mhNow78N7NIsGx2jsgN6dZKPsmIB8pCWybZPT/YhyW14cBFk3IP0Umcws8CCF+iwYDkbK+KhJ8KRrBXhx8NWTbScH61lY15DznJVLFQtj+af6Jc7jzSlJ6i5kEdJ8L0kJTGyRu9eK298GYR0Ezo0+FPi/iJof9gSvpRQvchtaBwDvzNCPTKGAAAA)}.lq-n-pontoon-alongside{background-image:url(data:image/webp;base64,UklGRvIAAABXRUJQVlA4IOYAAADwBQCdASoUABsAPt1cqU6opKOiMBgIARAbiUATplwV/8Wwmcm6x9yNTGHOYV68eMC6U19WyPLv0AD+8OwUKy2VVN3O7cI9Yc5UPPOqjI7rZZo5KjSoAA/WszLQrOUvUGm9wtnP2VclAb/KvpGA+/h/IVwknHF4tEiGU2sZksPyEcWN2zEIKakh3UQMD6zTkzXsXsJkxss3MtPwI0QN09qQRFGjPu+2YJVdB1dznsZZL9km0bzOhlmoQ7ZH2N4K0Avl2WU5+Vqvfp2E5HfrF5zKJNCDBVHXjgM4178lix/XN8LbuLAAAA==)}.lq-n-riprap{background-image:url(data:image/webp;base64,UklGRo4AAABXRUJQVlA4IIIAAADQAwCdASoUAA0APt1apkyopSOiMAgBEBuJYgCdABbVyGcF8ykk8vwA/uNp1qstNRdH9/niBh7hlZMT9tXZBXj7+3lZNfkPp5XJPqQAf8lNU3nJlVgRMS2FHujSxY474n7HA8db3vSd5Q0BMvOLm9LwFzfSuFwHwZ4UUQJHqztN22YA)}.lq-n-timber-lake{background-image:url(data:image/webp;base64,UklGRqAAAABXRUJQVlA4IJQAAAAQBACdASoUAA0APt1apkyopSOiMAgBEBuJYgCdACHpKa4caqsGzBqxUAD+0XlgT2L/h1TwaZtFmWbPMtc8FF1tPPiCzurKLtlNhjqo663RZpcENk1ieUaEQymoM1Hz497H+oAmJa+o8xBkUYB2+j+CaQEKc93AlWj7fOWcB/SjhbLsKi/XhIdf2UfaQFCfxJKQJkAA)}.lq-n-warm-timber{background-image:url(data:image/webp;base64,UklGRpAAAABXRUJQVlA4IIQAAADwAwCdASoUAA0APt1cpkyopSOiMAgBEBuJQBWGUGSxiRJcVNYd9lYQAP7vKQZgZX6UYACYnqd8jDFAQJndmrMvwlpJuuKLdfmfi7GMiqBxxMKJ6R6ePOs31Gi2LfLbtKdW4zB3k+/zqnH9g5DHKSNwTK73oeG4XrC7ElrmmhfYrp2AAAA=)}.lq-n-wide-warm{background-image:url(data:image/webp;base64,UklGRsoAAABXRUJQVlA4IL4AAAAwBQCdASoUABsAPt1epkyopSOiMAgBEBuJYwCsACB9PwoDe0g+nd30ts3bfyGuXhzgaAD+6PFlYcP2j60WNcy+h0cYFxexHWCRaWebP/DvPdfIO54uhPBG920lW3WAWoMlKr2EVwBJN9Hxn6VW0yR4HoS9uFx0GcO1ysWMbtksDXAHsmEfgYtz1nB12y10BiHGq7Hh3vK8xPHnfh++EeXzx4uEmTK1gq+RZ9SmTSmhBhyLnWLHJk3OLiCbiAAA)}.lq-pontoon{background-image:url(data:image/webp;base64,UklGRrIAAABXRUJQVlA4IKYAAACwAwCdASoUAA8APt1apkyopSOiMAgBEBuJbACdABMBhawfBfhugADMUzjjDlTGmoCx/8tygs4mEnm0Xa/iIR7r6FpHcZfgwrz8vXBEVyKWnM2hM4526V87YSdlcq4kWut5RAYMdWxaD3NG5ao/MVYOMF0BApfcs/RqHi61eGtDlNlJTr8AMlEHi9K8Emge2rrjV20H7eT6mH/0cbDrB3wMnU64vAAA)}.lq-repair{background-image:url(data:image/webp;base64,UklGRq4AAABXRUJQVlA4IKIAAABQBACdASoUAA8APt1apkyopSOiMAgBEBuJQBOmUDX/xbIqrc1zOtgbAYdAAM4CYRYhLdrGKrCPngCJsbJYqb6jKNRpsau5gPXpC/pKsdT4zFAVLxV555flXTwd505nLqb6zZuHgKxKJfovQhuZInU5a37Np/igN8ZrWS/z9n9aooFcmPHgGL2zeYGJH9eHd73ZrDve7N/JursyrLjLAdxAAAA=)}.lq-secured{background-image:url(data:image/webp;base64,UklGRtwAAABXRUJQVlA4INAAAACwBQCdASoUABQAPt1mrFCopSQiqAgBEBuJbACdMoMsoIBzyWmAALHn4GuCXLvYhwpe6BSWclgA/nWCrV9FmqSH6dDXnntBmKfC8aPKY7WTpc6ZMgnSYwmKW6ie0mqTt3cVTIeV9dojynPj2wCchp2PlUHhueeA3cMFmFuwXreWEGVtgIBWZfR5dHNwYjzQSqRcGM2b/XKpT1BsiGIl2Z+cQ3TbNV6HyzkkY71NJAIxfBdGYL3vd42piPkkYIENV8D24zFw/Z5L/iycxndYAAAA)}.lq-svc-cable{background-image:url(data:image/webp;base64,UklGRqQAAABXRUJQVlA4IJgAAAAQBACdASoUAA8APt1apkyopSOiMAgBEBuJYgCdMoKCAHoKEhniXgZYeAD+oXKP8TlJqB+ggZQ/P/2YLlgSxXr6Ycs+ZzZM7e6hNg81crdxEsB7Mz8jDPOQc50+vWhFdIgdYQBHorjrWh2k8IaJ64oQj8oRuM2KUNAkIr51DUhhv8quGxd+PmESqbA0UiG2QV0bfVhgegAAAA==)}.lq-svc-install{background-image:url(data:image/webp;base64,UklGRqwAAABXRUJQVlA4IKAAAAAwBACdASoUAA8APt1apkyopSOiMAgBEBuJZACdAB9HJJc9ORZu51mm6XAA/uUoa6irtGNMsS1KMqkfd+Ap4Rbqg34YPUXwhvtfIddpyrP1ornWDq28VICGYeFVtV/jClWgHr6anmCT/GdN3EWCHY9dHgGvD3HQead04UdNzqTzlsE/Eql8egEFQyxx8+es/d74ytmofis5ItgafEPqMAAA)}.lq-svc-levels{background-image:url(data:image/webp;base64,UklGRq4AAABXRUJQVlA4IKIAAAAwBACdASoUAA8APt1apkyopSOiMAgBEBuJYwCAAAjiBdMuDJaaqvNulQAA/q3Gja6kWwNunb8lJa+cCNNWj/v2m2Spki7+ouYvrLhKGm1NYxPvVts5DaEmLwTyj99fQoqV+Fd/d8v+f9BiWCp/k4/I9bxZclK8iDsmBYxja16OXQcnwdLtsSMJRu3KKn/V5ZqO88hWL4MS7xiAQcAF3rKgAAA=)}.lq-svc-mods{background-image:url(data:image/webp;base64,UklGRsAAAABXRUJQVlA4ILQAAADwBACdASoUABQAPt1mq1EopSOiqAgBEBuJZAC1GxglvAdVO+p9tmGA2+FVC4S4mwAA/KrrKhCPxjerQ3lD2DGe1XfbRkdb1wRm0NeHyJTxYLqeitp4thvvLB2sqyB2yuMEfF+vQoQeBnLrR+AHp2g791qjEQjyjBpiE8eCj1zZ5A5CwOTQtWQgfFFu8NJlC4R2CDzPAMBeSgNQ9vZCVfex5cthg3ZlkpIxjH5uZLeH+cFaQAA=)}.lq-svc-repair{background-image:url(data:image/webp;base64,UklGRq4AAABXRUJQVlA4IKIAAABQBACdASoUAA8APt1apkyopSOiMAgBEBuJQBOmUDX/xbIqrc1zOtgbAYdAAM4CYRYhLdrGKrCPngCJsbJYqb6jKNRpsau5gPXpC/pKsdT4zFAVLxV555flXTwd505nLqb6zZuHgKxKJfovQhuZInU5a37Np/igN8ZrWS/z9n9aooFcmPHgGL2zeYGJH9eHd73ZrDve7N/JursyrLjLAdxAAAA=)}