/* ==========================================================================
   SALTD Electrical — v2 restyle, OVERRIDE LAYER
   Built 2026-10-16. Loads AFTER saltd.css and only contains what changes.

   WHY THIS EXISTS, NOT A REWRITE
   saltd.css is 649 lines of load-bearing, heavily-commented decisions — the
   82% scrim contrast floor, the subgrid caption alignment, the myenergi mark
   placement maths. Rewriting it to change how things LOOK would put all of
   that at risk for no reason. This layer is additive and legible as a diff.
   If Andre signs off, these rules get folded into saltd.css properly and this
   file is deleted. It is not a second stylesheet to maintain.

   THE PROBLEM IT SOLVES
   Andre, 2026-10-16: the site "looks like a Claude website". He was right,
   and it was diagnosable rather than vague. Five tells, all of them the
   default output of every site generator since about 2023:

     1. White card, 1px border, 3px coloured accent bar, 6px corners
     2. Hover lift + soft shadow on every interactive thing
     3. Uppercase letter-spaced micro-caps used on EIGHT different components,
        so nothing is distinguished by it any more
     4. An identical arrow-slide CTA repeated six times
     5. Amber applied to every structural element, which flattens hierarchy —
        when everything is accented, nothing is

   THE RULES THIS LAYER ENFORCES
     · Square corners. No radius anywhere except the focus ring.
     · Nothing lifts on hover. Hover changes colour or reveals, never floats.
     · Amber is for ACTIONS AND THE BRAND ONLY — buttons, the urgent band,
       links, the h1 emphasis, the header rule. Structural dividers are
       charcoal hairlines. This is the single biggest change in the file.
     · Micro-caps survive in exactly two places: .eyebrow and footer headings.
       Everywhere else goes sentence case and is distinguished by weight,
       size and colour instead.
     · Photos do structural work rather than sitting in bordered boxes.

   Token names, fonts and colours are untouched — this is the approved brand,
   and the brand was never the problem.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Square everything

   The 6px radius is the single most recognisable template tell, and it is on
   almost every component. One sweep is cheaper and more consistent than
   hunting each rule. The focus ring keeps its own geometry — that is an
   accessibility affordance, not decoration.
   -------------------------------------------------------------------------- */
.card,.pillar,.qcard,.shot,.shot img,.badge,.ph-box,.aside,.form-msg,
.field input,.field select,.field textarea,.btn,.skip,.callbar a,
.step::before,.lockup,.reviews-live{border-radius:0}


/* --------------------------------------------------------------------------
   2. Nothing floats

   .btn, .pillar and .shot all translateY on hover. Three components doing the
   same trick reads as a theme, not as a considered interaction. Hover now
   changes colour, width or reveals — it never lifts off the page.
   -------------------------------------------------------------------------- */
.btn:hover{transform:none}
.btn:active{transform:none}


/* --------------------------------------------------------------------------
   3. Typography and section rhythm

   Bigger, tighter headings and more vertical air. This alone does more to
   shift the feel than any single component change, because the old h2 sat
   close enough to body size that the page read as one flat texture.
   -------------------------------------------------------------------------- */
h2{font-size:clamp(1.8rem,4.2vw,3rem);letter-spacing:-.028em;margin-bottom:20px}
h3{letter-spacing:-.015em}
.lede{font-size:1.2rem;max-width:58ch}
.sec{padding:clamp(72px,10vw,126px) 0}

/* The eyebrow keeps its micro-caps — it is one of only two places that still
   does — but gains a short rule so it reads as a marker rather than as the
   same small uppercase text used by six other components. */
.eyebrow{display:flex;align-items:center;gap:13px;letter-spacing:.15em;font-size:.72rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--amber);flex:none}
.eyebrow-dark::before{background:var(--charcoal)}


/* --------------------------------------------------------------------------
   4. Cards — accent bar out, top rule in

   Was: white box, 1px border all round, 3px amber left bar, 6px corners.
   Now: no box at all. A 2px charcoal rule across the top, content hanging
   beneath it. Amber is gone from the light version entirely — on dark the
   rule goes amber because charcoal on charcoal is invisible.
   -------------------------------------------------------------------------- */
.card,.sec-alt .card{
  background:transparent;border:0;border-top:2px solid var(--charcoal);
  padding:22px 0 0;
}
.card h3{font-size:1.25rem;margin-bottom:10px}
.card p{font-size:1rem;color:var(--ink-2)}
.sec-dark .card{border-top-color:var(--amber)}
.sec-dark .card p{color:var(--on-dark-2)}
.grid-3,.grid-2{gap:40px}


/* --------------------------------------------------------------------------
   5. Pillars → the job board

   The six homepage tiles are now photographs of Andre's own work with the
   heading laid over a charcoal wash. This is the one component on the site
   that a competitor cannot copy, because it is made of his photos.

   4:3 IS NOT A TASTE DECISION. The same six rendered at 3:4 portrait cut the
   SALTD sticker in half on switchboard-after-rcbos and the ute badge in half
   on commercial-workshop-hoists — the two frames where the brand appears in
   the photograph itself. 4:3 keeps both intact. If the tile ratio is ever
   changed, re-check those two frames before anything else.

   The gutter is 4px, not 0 and not 20px. At 0 the six photos read as one
   confusing collage; at 20px they read as cards again, which is the thing
   this whole file exists to kill.

   Every battery photo in the library is portrait (all four of them), so the
   battery tile is a 4:3 crop out of a 3:4 source and survives on luck rather
   than on coverage. Next battery job needs landscape frames.
   -------------------------------------------------------------------------- */
.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:44px}
.job{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  background:var(--charcoal);text-decoration:none;
}
.job img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.88) contrast(1.04);
  transition:transform .5s var(--ease),filter .35s var(--ease);
}
.job:hover img,.job:focus-visible img{transform:scale(1.045);filter:saturate(1) contrast(1.04)}
/* Gradient, not a flat scrim: the headings sit in the bottom third, so that is
   where the ink needs to be. Keeping the top of the frame nearly clear is what
   lets the photo still read as a photo. */
.job .shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(29,29,31,.88) 0%,rgba(29,29,31,.45) 42%,rgba(29,29,31,.08) 100%);
}
.job .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 22px 20px;color:var(--white)}
.job .cap h3{font-size:1.18rem;color:var(--white)}
/* The amber rule growing on hover replaces the six identical "FIND OUT MORE →"
   links. Same affordance, no repeated text, and it costs no vertical space. */
.job .rule{
  display:block;width:26px;height:3px;background:var(--amber);margin-bottom:12px;
  transition:width .28s var(--ease);
}
.job:hover .rule,.job:focus-visible .rule{width:56px}
.job:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* The seventh tile — rental safety checks. Spans the grid instead of sitting in
   the 3-column flow, which is what stops an odd seventh tile orphaning.
   aspect-ratio comes off .job and goes onto the image, because a 4:3 frame at
   full wrap width would be 810px tall and swallow the screen. 3.9:1 lands it at
   about 277px — taller than a letterbox strip, short enough that the six square
   tiles above it still lead.
   object-position is low because the ceramic fuses are in the lower two-thirds
   of that frame; the top is chipboard. */
.job-wide{grid-column:1/-1;aspect-ratio:auto}
.job-wide img{aspect-ratio:3.9/1;height:auto;object-position:50% 58%}
/* Stronger scrim than the square tiles, and it is not optional. The wide tile
   is the only one carrying body copy, and its caption fills about 40% of a
   277px frame where a square tile's heading fills 20% of an 810px one — so the
   text reaches well up into the thin part of the standard gradient. Measured
   against this photo (pale chipboard across the top two-thirds), the stock
   gradient put the caption at 3.80:1, under the 4.5 floor. These stops measure
   5.70:1 worst case with the caption still at --on-dark-2.
   Re-measure if the photo is ever swapped. */
.job-wide .shade{
  background:linear-gradient(to top,
    rgba(29,29,31,.93) 0%,rgba(29,29,31,.72) 46%,rgba(29,29,31,.14) 100%);
}
.job-wide .cap{padding:26px 26px 24px}
.job-wide .cap h3{font-size:1.35rem;margin-bottom:6px}
.job-wide .cap p{color:var(--on-dark-2);font-size:.97rem;max-width:62ch;margin:0}


/* .pillar survives on 404.html only — that page lists the six services with a
   sentence each rather than a photo, because a 404 should be a signpost and
   not a gallery. It inherits the card treatment above so the two pages agree,
   and the arrow-slide CTA goes with it. */
.pillar{
  background:transparent;border:0;border-top:2px solid var(--charcoal);
  padding:22px 0 0;
}
.pillar:hover{transform:none;box-shadow:none;border-top-color:var(--amber-deep)}
.pillar h3{font-size:1.25rem;margin-bottom:10px;flex:none}
.pillar p{flex:1}
.pillar .go{
  font-family:var(--body);font-weight:700;font-size:.95rem;
  text-transform:none;letter-spacing:0;color:var(--charcoal);
}
.pillar:hover .go{color:var(--amber-deep)}
.pillars{gap:40px}


/* --------------------------------------------------------------------------
   6. Steps — the numbered circle goes

   A 44px charcoal disc with a centred numeral is stock. Replaced with the
   index set small above a rule, which is how a job sheet numbers things.
   content is re-declared only to add the leading zero. Do NOT add
   counter-increment here — saltd.css line 320 already increments on .step
   itself, so declaring it again on the pseudo-element counts twice and the
   steps read 02 / 04 / 06.
   -------------------------------------------------------------------------- */
.step{padding-top:20px;border-top:2px solid var(--charcoal)}
.step::before{
  content:"0" counter(s);
  display:block;width:auto;height:auto;background:none;
  color:var(--slate);font-family:var(--display);font-weight:800;
  font-size:.95rem;letter-spacing:.08em;margin-bottom:14px;
}
.step h3{font-size:1.2rem}
.step p{font-size:1rem}
.sec-dark .step{border-top-color:var(--amber)}
.sec-dark .step::before{background:none;color:var(--amber)}


/* --------------------------------------------------------------------------
   7. Service areas — amber underline to charcoal, sentence case

   .area h3 was .8rem uppercase with .12em tracking and a 2px amber underline.
   That is the micro-caps treatment AND the amber accent in one component, on
   a list of suburb names that needs neither.
   -------------------------------------------------------------------------- */
.area h3{
  font-size:1.05rem;text-transform:none;letter-spacing:-.01em;
  font-weight:800;color:var(--charcoal);
  border-bottom:2px solid var(--charcoal);padding-bottom:10px;
}
.sec-dark .area h3{color:var(--white);border-bottom-color:var(--amber)}
.areas{gap:34px}


/* --------------------------------------------------------------------------
   8. Photos — out of their boxes

   .shot was a bordered, rounded container with the caption in a white bar
   under a divider. The frame added nothing the photo didn't already have.
   Caption drops to a plain line of body text with no bar and no divider.

   display:flex and flex:1 0 auto are preserved deliberately — they are what
   keeps side-by-side captions of different lengths ending on the same
   baseline. The subgrid rules in saltd.css depend on this and are untouched.
   -------------------------------------------------------------------------- */
.shot{border:0;background:transparent}
.shot figcaption{
  background:transparent;border-top:0;padding:11px 0 0;
  font-family:var(--body);font-weight:600;font-size:.87rem;
  text-transform:none;letter-spacing:0;color:var(--ink-2);
}


/* --------------------------------------------------------------------------
   9. The remaining micro-caps

   Eight components used .7–.8rem uppercase with .06–.18em tracking: eyebrow,
   field labels, figcaptions, the GBP link, badges, area headings, stat labels
   and the pillar CTA. Survivors: .eyebrow (above) and footer headings. The
   rest are differentiated by weight and colour, which is what those
   properties are for.
   -------------------------------------------------------------------------- */
.field label{
  font-family:var(--body);font-weight:700;font-size:.89rem;
  text-transform:none;letter-spacing:0;color:var(--charcoal);
}
.gbp{
  font-family:var(--body);font-weight:700;font-size:1rem;
  text-transform:none;letter-spacing:0;color:var(--charcoal);
  border-bottom:2px solid var(--charcoal);
}
.gbp:hover{gap:15px;color:var(--amber-deep);border-bottom-color:var(--amber-deep)}
.sec-dark .gbp{color:var(--white);border-bottom-color:var(--amber)}
.stat .l{font-family:var(--body);font-weight:600;text-transform:none;letter-spacing:0}

/* The badge keeps its amber fill — it carries "myenergi Product Champion",
   which is an earned accreditation and one of the few things on the site that
   has genuinely earned a highlight. Squared only. */
.badge{letter-spacing:.08em}


/* --------------------------------------------------------------------------
   10. Buttons, quote card, aside
   -------------------------------------------------------------------------- */
.btn{letter-spacing:.05em}
/* Square white block on charcoal. The 44px drop shadow was doing the same
   "floating card" job as the hover lift and reads the same way. */
.qcard{box-shadow:none;border:1px solid rgba(255,255,255,.16)}
.aside{
  background:transparent;border:0;border-left:2px solid var(--charcoal);
  padding:3px 0 3px 20px;
}
.sec-alt .aside{background:transparent}
.sec-dark .aside{border-left-color:var(--amber);color:var(--on-dark-2)}


/* --------------------------------------------------------------------------
   11. Responsive

   Mirrors the breakpoints already in saltd.css so the job board collapses on
   the same beats as the grid it replaced. Two across before one, because six
   single-file photos is a very long homepage on a phone.
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  .grid-3,.grid-2{gap:32px}
}
@media(max-width:820px){
  .jobs{grid-template-columns:repeat(2,1fr)}
  /* grid-column:1/-1 keeps spanning on its own; the frame just needs to get
     taller as it gets narrower or the caption runs out of room. */
  .job-wide img{aspect-ratio:3/1}
}
@media(max-width:620px){
  .jobs{grid-template-columns:repeat(2,1fr);gap:3px}
  .job .cap{padding:15px 15px 14px}
  .job .cap h3{font-size:.95rem}
  .job .rule{width:20px;height:2px;margin-bottom:8px}
  /* On a phone the wide tile is the only one carrying body copy, so it keeps
     a larger heading than the squares and needs the padding back. */
  .job-wide img{aspect-ratio:16/10}
  .job-wide .cap{padding:16px 16px 15px}
  .job-wide .cap h3{font-size:1.1rem;margin-bottom:5px}
  .job-wide .cap p{font-size:.88rem}
  .areas{gap:26px}
}