/* M.E.G.A — Miki Electrical Group Australia
   Light rebuild, 17 Aug 2026. Replaces the dark gallery.

   Direction: an electrical schedule on warm drawing paper. Services read as a
   numbered index with ruled separators, the way a switchboard schedule or a
   drawing title block does. Chosen because the client cut the imagery back and
   asked for services listed high, which kills the gallery premise the dark
   theme was built on. Rules and tabular numerals carry the structure that
   photography used to carry.

   Every neutral is tinted warm (hue ~60). No #fff, no #000.
   Contrast verified in scratch/miki-contrast.js — all pairs pass, including
   the hairlines, which are structural here rather than decorative. */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground:     oklch(0.980 0.004 70);   /* #faf8f6 warm paper */
  --raised:     oklch(0.955 0.007 68);   /* #f3efeb panel */
  --edge:       oklch(0.845 0.009 66);   /* #d0cbc6 quiet hairline */
  --rule:       oklch(0.650 0.013 62);   /* #958e87 structural rule, 3.06:1 */
  --type:       oklch(0.245 0.014 58);   /* #261f1a */
  --type-dim:   oklch(0.475 0.012 60);   /* #615b56, 6.32:1 */
  --brass:      oklch(0.505 0.115 58);   /* #94510e, 5.75:1 on ground */
  --brass-deep: oklch(0.420 0.100 56);   /* #753c05 hover */

  /* Ink panel. One inverted band, not a theme. */
  --ink:        oklch(0.220 0.014 60);
  --ink-type:   oklch(0.960 0.006 70);
  --ink-dim:    oklch(0.760 0.012 65);
  --ink-edge:   oklch(0.380 0.014 60);
  --brass-lit:  oklch(0.780 0.110 70);

  --gap:     clamp(4rem, 9vw, 7.5rem);
  --pad:     clamp(1.25rem, 5vw, 4rem);
  --measure: 66ch;
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--type);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
a:hover { color: var(--brass-deep); }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }

.wrap { padding-inline: var(--pad); max-width: 1320px; margin-inline: auto; }
/* Long-form body copy. Two things it needs that the global type rules do not
   give it. A subhead needs more space above than below so it binds to the text
   it introduces instead of floating between two blocks, and `h1, h2, h3 {
   margin: 0 }` leaves it flush on both sides. And a prose block following a
   .section-head has nothing to separate them, unlike .sched, .steps, .quotes
   and .areas-grid, which all carry their own top margin. */
.prose { max-width: var(--measure); margin-inline: auto; }
/* Space below is in `em` so it tracks the heading, and it is deliberately a
   little under the ~19px paragraph gap rather than half of it. Tighter than
   that and the subhead reads as cramped against its own first line. */
.prose > h2 { margin-top: clamp(2.25rem, 4.5vw, 3rem); margin-bottom: 0.7em; }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin-top: clamp(2rem, 4vw, 2.75rem); margin-bottom: 0.7em; }
.prose > h3:first-child { margin-top: 0; }
.section-head + .prose { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ---- prose rail ---------------------------------------------------------
   A single 66ch column inside a 1320px wrap left roughly 600px of the page
   empty for the whole length of a long prose section, which read as a broken
   two-column layout rather than a deliberate measure. This puts the subhead in
   a left rail and its paragraphs in the main column, so the width gets used
   without stretching a line of body copy past a readable length.

   Same label-left, detail-right idiom as .sched-row, so it is the site's own
   pattern rather than a new one. Below 62rem it collapses back to the stacked
   rhythm, which is what a phone needs anyway. */

/* NOTE: .prose-rail deliberately does NOT drop the measure here. Until the
   rail actually engages the block is still a single column, and without the
   cap it ran to 120 characters a line between 900 and 1150px. The cap is
   released inside the media query below and nowhere else. */
.topic > h3 { margin-bottom: 0.7em; }
.topic + .topic { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* 72rem, not the 56rem the section head uses. The columns below are the SAME
   ratio as .section-head so the rail lands under the h2 and the body copy
   lands under the lede -- but at 56rem that body column is only about 40
   characters, so the rail cannot start as early as the head does. */
@media (min-width: 72rem) {
  .prose-rail { max-width: none; }
  .topic {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: 3rem;
    align-items: start;
  }
  .topic > h3 { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .topic > p { grid-column: 2; }
  /* Lead paragraphs have no subhead. They stay in the main column so the
     rail edge holds, rather than sliding left and breaking the alignment. */
  .topic-lead > p { grid-column: 2; }
}

.skip {
  position: absolute; left: -9999px;
  background: var(--type); color: var(--ground);
  padding: 0.75rem 1.25rem; font-weight: 600; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---- type ------------------------------------------------------------- */

h1, h2, h3 {
  font-stretch: 118%;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 1.3rem + 2.1vw, 3rem); line-height: 1.12; }
h3 { font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem); line-height: 1.25; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.label {
  font-size: 0.72rem;
  font-weight: 600;
  font-stretch: 105%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--type-dim);
  margin: 0 0 1.25rem;
}

.lede { font-size: clamp(1.08rem, 1rem + 0.5vw, 1.3rem); color: var(--type-dim); line-height: 1.55; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---- buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 48px; padding: 0.8rem 1.5rem;
  font: inherit; font-weight: 600; font-stretch: 105%;
  text-decoration: none; border: 1px solid transparent;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
/* Ink, not brass. The client asked for monochrome; brass is reserved for the
   schedule numerals, links and rules so it stays under 10% of the surface. */
.btn-primary { background: var(--type); color: var(--ground); }
.btn-primary:hover { background: var(--brass-deep); color: var(--ground); }
.btn-ghost { border-color: var(--rule); color: var(--type); }
.btn-ghost:hover { border-color: var(--type); background: var(--raised); color: var(--type); }

/* ---- header ----------------------------------------------------------- */

.site-header {
  position: relative; z-index: 30;
  border-bottom: 1px solid var(--edge);
  background: var(--ground);
}
.header-inner {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem var(--pad);
  max-width: 1320px; margin-inline: auto;
}
.site-header .brand { margin-right: auto; display: block; line-height: 0; }
/* The client lockup is 2.48:1, not the 3.17:1 of the retired M.E.G.A mark, so
   the same width renders noticeably taller. Held narrower to keep the header
   from growing; the three text lines still read at this size. */
.site-header .brand img { width: clamp(124px, 15vw, 168px); }
.header-actions { display: flex; gap: 0.5rem; align-items: center; }
/* The sticky bar carries call and text on phones, so the header would be the
   same two actions twice in one viewport. */
.header-actions { display: none; }
@media (min-width: 62rem) { .header-actions { display: flex; } }

/* ---- nav -------------------------------------------------------------- */
/* <details> throughout, so every menu opens with scripting off. The JS at the
   bottom of the page only adds outside-click and Escape, which are niceties. */

.nav { display: none; }
@media (min-width: 62rem) {
  .nav { display: flex; align-items: center; gap: 1.75rem; margin-right: 1.75rem; }
}
.nav a { color: var(--type); text-decoration: none; font-size: 0.925rem; font-weight: 500; }
.nav a:hover { color: var(--brass); }

.nav details { position: relative; }
.nav details[open]::before {
  content: ''; position: absolute; top: 100%; left: -1rem;
  width: 17rem; height: 0.9rem;
}
.nav summary,
.menu-toggle summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.925rem; font-weight: 500; color: var(--type);
}
.nav summary::-webkit-details-marker,
.menu-toggle summary::-webkit-details-marker { display: none; }
.nav summary:hover { color: var(--brass); }
.nav summary::after {
  content: ''; width: 0.42em; height: 0.42em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.nav details[open] > summary::after { transform: translateY(0.1em) rotate(-135deg); }

.nav-menu {
  position: absolute; top: calc(100% + 0.9rem); left: -1rem;
  min-width: 17rem; padding: 0.6rem;
  background: var(--ground);
  border: 1px solid var(--edge);
  box-shadow: 0 18px 40px -22px oklch(0.245 0.014 58 / 0.4);
  display: grid; gap: 1px;
}
.nav-menu a {
  display: block; padding: 0.6rem 0.8rem; font-size: 0.9rem;
  transition: background-color 0.2s var(--ease);
}
.nav-menu a:hover { background: var(--raised); color: var(--brass); }

/* Mobile disclosure */
.menu-toggle { margin-left: auto; }
@media (min-width: 62rem) { .menu-toggle { display: none; } }
.menu-toggle > summary {
  min-height: 44px; padding: 0 0.25rem;
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
}
.menu-panel {
  position: absolute; inset-inline: 0; top: 100%;
  background: var(--ground); border-bottom: 1px solid var(--edge);
  /* Bottom padding clears the fixed call bar, which would otherwise sit on top
     of the last button in the panel. */
  padding: 0.5rem var(--pad) 5.5rem;
  box-shadow: 0 24px 40px -28px oklch(0.245 0.014 58 / 0.45);
  /* The taller client lockup pushed the header down far enough that the panel
     ran past the bottom of a 390x844 screen. Scroll inside the panel rather
     than making the whole page scroll to reach the last link. */
  max-height: calc(100svh - 5.25rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* :not(.btn) is load-bearing. A bare `.menu-panel a` rule out-specifies
   .btn-primary, which set the call button's label to the dark body colour on a
   dark fill and rendered it as an unreadable black block. */
.menu-panel a:not(.btn) { display: block; padding: 0.75rem 0; border-top: 1px solid var(--edge); text-decoration: none; color: var(--type); }
.menu-panel .sub a { padding-left: 1rem; color: var(--type-dim); font-size: 0.925rem; }
.menu-panel .menu-cta { display: grid; gap: 0.5rem; margin-top: 1.5rem; }

/* ---- hero ------------------------------------------------------------- */
/* Split, not full-bleed. A photograph behind the headline is what forced the
   scrim work on the dark build; side by side there is nothing to scrim. */

.hero { border-bottom: 1px solid var(--edge); }
.hero-inner {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  padding-block: clamp(2.5rem, 6vw, 5rem) 0;
}
@media (min-width: 58rem) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: center; gap: clamp(2.5rem, 5vw, 5rem);
    padding-block: clamp(3rem, 6vw, 6rem);
  }
}
.hero-body h1 { max-width: 16ch; }
.hero-body .lede { max-width: 44ch; margin-top: 1.35rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }
.hero-actions .btn { flex: 1 1 12rem; }
@media (min-width: 32rem) { .hero-actions .btn { flex: 0 0 auto; } }

.hero-figure { margin: 0; position: relative; }
.hero-figure img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 58% 50%;
}
@media (min-width: 58rem) { .hero-figure img { aspect-ratio: 5 / 6; } }

/* Trust strip. Rules on both sides, tabular figures, reads as a title block. */
.trust {
  display: flex; flex-wrap: wrap; align-items: center;
  /* Three credentials now, not two. The gap is tuned so all three sit on one
     line on a laptop and wrap to two tidy rows on a phone. */
  gap: 0.6rem clamp(0.9rem, 2vw, 1.5rem);
  margin-top: 2.25rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem; color: var(--type-dim);
}
.trust b { color: var(--type); font-weight: 600; }
.trust-rating { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; }
.trust-rating:hover { color: var(--brass); }
.stars { display: inline-flex; gap: 1px; color: var(--brass); }
.stars svg { width: 0.95em; height: 0.95em; fill: currentColor; }
.g-mark { width: 1.05em; height: 1.05em; flex: none; }

/* ---- service schedule -------------------------------------------------
   The spine of the page. Numbered rows, ruled top and bottom, whole row is
   the link. Explicitly not a card grid: no boxes, no icons, no shadows. */

.sched { border-top: 1px solid var(--rule); margin-top: clamp(2.5rem, 5vw, 4rem); }
.sched-row {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: start; gap: 0.5rem 1.25rem;
  padding: clamp(1.35rem, 3vw, 1.9rem) 0;
  border-bottom: 1px solid var(--edge);
  text-decoration: none; color: var(--type);
  transition: background-color 0.3s var(--ease);
}
.sched-row:last-child { border-bottom: 1px solid var(--rule); }
/* Background fill plus the arrow slide, and nothing else. An earlier version
   also animated padding-inline to indent the row on hover, which animates a
   layout property and thrashes on every frame. The arrow carries the cue. */
.sched-row:hover { background: var(--raised); color: var(--type); }
.sched-num {
  font-variant-numeric: tabular-nums; font-stretch: 105%;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--brass); padding-top: 0.42em; min-width: 2.1rem;
}
.sched-name { font-stretch: 118%; font-weight: 600; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); letter-spacing: -0.015em; line-height: 1.2; text-wrap: pretty; hyphens: none; }
.sched-desc { grid-column: 2; color: var(--type-dim); font-size: 0.95rem; margin: 0.4rem 0 0; max-width: 54ch; }
.sched-go { grid-row: 1; grid-column: 3; padding-top: 0.35em; color: var(--brass); transition: transform 0.3s var(--ease); }
.sched-row:hover .sched-go { transform: translateX(0.25rem); }
.sched-go svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.75; }

@media (min-width: 52rem) {
  .sched-row { grid-template-columns: 3.5rem minmax(0, 16rem) minmax(0, 1fr) auto; align-items: baseline; }
  .sched-desc { grid-column: 3; grid-row: 1; margin: 0; }
  .sched-go { grid-column: 4; }
}
/* Names like "Renovations and maintenance" need a wider column before they sit
   on one line. Only worth granting once the viewport can spare it. */
@media (min-width: 72rem) {
  .sched-row { grid-template-columns: 3.5rem minmax(0, 20.5rem) minmax(0, 1fr) auto; }
}

/* ---- process ----------------------------------------------------------- */

.process { background: var(--raised); border-block: 1px solid var(--edge); }
.steps { display: grid; gap: 0; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 50rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { padding: 1.5rem 0; border-top: 1px solid var(--rule); }
@media (min-width: 50rem) { .step { padding: 1.5rem clamp(1rem, 2vw, 1.75rem) 0 0; } }
.step-num {
  font-variant-numeric: tabular-nums; font-stretch: 105%;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; color: var(--brass);
  display: block; margin-bottom: 0.85rem;
}
.step h3 { margin-bottom: 0.5rem; }
.step p { color: var(--type-dim); font-size: 0.95rem; margin: 0; }

/* Second call to action, under the four steps. The steps answer "what happens
   if I ring", so the button belongs at the end of that answer rather than
   waiting for the contact section at the very bottom. */
.steps-cta {
  display: flex; flex-wrap: wrap; gap: 0.7rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule);
}
.steps-cta .btn { flex: 1 1 14rem; }
@media (min-width: 32rem) { .steps-cta .btn { flex: 0 0 auto; } }

/* ---- compliance (ink band) --------------------------------------------
   The one inverted section. Different audience, different mindset: booking a
   legally required job, not browsing. The tonal shift marks the change. */

.compliance { background: var(--ink); color: var(--ink-type); }
.compliance h2 { color: var(--ink-type); }
.compliance .label { color: var(--ink-dim); }
.compliance .lede, .compliance p { color: var(--ink-dim); }
.compliance-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 56rem) {
  .compliance-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(3rem, 6vw, 5.5rem); }
}
.compliance-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.compliance-list li { border-top: 1px solid var(--ink-edge); padding: 1.1rem 0; }
.compliance-list a { color: var(--brass-lit); text-decoration: none; font-stretch: 118%; font-weight: 600; font-size: 1.1rem; }
.compliance-list a:hover { text-decoration: underline; }
.compliance-list p { margin: 0.35rem 0 0; font-size: 0.93rem; color: var(--ink-dim); }
.compliance .btn-primary { background: var(--ink-type); color: var(--ink); margin-top: 2rem; }
.compliance .btn-primary:hover { background: var(--brass-lit); color: var(--ink); }
.compliance figure { margin: 0; }

/* ---- reviews ----------------------------------------------------------- */

.reviews-head { display: grid; gap: 1.5rem; align-items: end; }
@media (min-width: 52rem) { .reviews-head { grid-template-columns: 1fr auto; } }
.rating { display: flex; align-items: baseline; gap: 0.85rem; flex-wrap: wrap; }
.rating b { font-size: clamp(2.75rem, 2rem + 3.4vw, 4.25rem); font-stretch: 118%; font-weight: 600; line-height: 1; color: var(--type); font-variant-numeric: tabular-nums; }
.rating .meta { color: var(--type-dim); font-size: 0.92rem; }
.g-link {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 1.1rem; border: 1px solid var(--edge); background: var(--ground);
  text-decoration: none; color: var(--type); font-size: 0.88rem; font-weight: 500;
  transition: border-color 0.3s var(--ease);
}
.g-link:hover { border-color: var(--rule); color: var(--type); }

.quotes { display: grid; gap: 0; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.quote { border-top: 1px solid var(--edge); padding: 1.6rem 0; }
.quote blockquote { margin: 0 0 0.9rem; font-size: 1rem; line-height: 1.6; color: var(--type); }
.quote cite { font-style: normal; font-size: 0.75rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--type-dim); }
@media (min-width: 58rem) {
  .quotes { grid-template-columns: repeat(3, 1fr); column-gap: clamp(2rem, 4vw, 3rem); }
  .quote-lead { grid-column: 1 / -1; border-top: 1px solid var(--rule); }
  .quote-lead blockquote {
    font-size: clamp(1.3rem, 1rem + 1.3vw, 1.9rem);
    font-stretch: 108%; line-height: 1.32; letter-spacing: -0.01em;
    max-width: 36ch; margin-bottom: 1.25rem;
  }
}

/* ---- work carousel -----------------------------------------------------
   A scroll-snap track, not a scripted slider. The overflow scroller is the
   whole mechanism: finger, trackpad and keyboard all work with no JS at all.
   The arrows are decoration over the top of something that already works. */

.work-carousel {
  --work-gap: clamp(0.6rem, 1.5vw, 1rem);
  display: grid; gap: 1.25rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.work-track {
  display: flex; column-gap: var(--work-gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Bleed to the viewport edge on small screens so the next photo is visibly
     cut off by the screen rather than by a margin, which reads as scrollable. */
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  scroll-padding-inline: var(--pad);
  scrollbar-width: none;
}
.work-track::-webkit-scrollbar { display: none; }
.work-track:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

@media (min-width: 46rem) {
  .work-track { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
}

.work-track figure { margin: 0; flex: 0 0 82%; scroll-snap-align: start; }
@media (min-width: 46rem) { .work-track figure { flex-basis: calc((100% - var(--work-gap)) / 2); } }
@media (min-width: 64rem) { .work-track figure { flex-basis: calc((100% - 2 * var(--work-gap)) / 3); } }

.work-track img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Captions are the client's own wording. Maz's second pass roughly doubled them,
   longest 93 characters. Measured wrap: 3 lines on a 287px phone card, 2 on a
   387px desktop card. Reserve exactly that at each width so the card bottoms stay
   level as the track scrolls, without leaving a dead line of whitespace.
   Re-measure if the wording changes again: set min-height to 0 and read the
   natural height, do not eyeball it. */
.work-track figcaption {
  margin-top: 0.7rem; font-size: 0.82rem; letter-spacing: 0.02em;
  line-height: 1.45; min-height: 4.35em; color: var(--type-dim);
}
@media (min-width: 46rem) { .work-track figcaption { min-height: 2.9em; } }

.work-nav { display: flex; gap: 0.5rem; justify-self: end; }
.work-arrow {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  background: none; border: 1px solid var(--rule); border-radius: 0;
  color: var(--type); cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.work-arrow:hover:not(:disabled) { color: var(--brass); border-color: var(--brass); }
.work-arrow:disabled { opacity: 0.3; cursor: default; }
.work-arrow svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.75; }

.work-more { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.work-more a { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-stretch: 105%; text-decoration: none; }
.work-more a:hover { text-decoration: underline; }
.work-more svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.75; }

/* ---- areas -------------------------------------------------------------
   Suburb links in the body of the page, not just the footer. Set as ruled
   rows in the same idiom as the service schedule. */

.areas-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 56rem) {
  .areas-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 6rem); align-items: start; }
}
.areas-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.areas-list li { border-bottom: 1px solid var(--edge); }
.areas-list a {
  display: block; padding: 0.85rem 0;
  font-weight: 600; font-stretch: 105%; text-decoration: none;
  transition: color 0.2s var(--ease);
}
.areas-list a:hover { color: var(--brass); }

/* ---- spec list ---------------------------------------------------------
   Inclusion, symptom and scope lists on the service pages. Ruled rows in the
   same idiom as the schedule, deliberately not bullets: on a drawing these
   read as a spec, not as prose. Two columns once the viewport can carry them.
   Inherits the ink hairlines inside the compliance band. */

.spec {
  list-style: none; padding: 0;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
}
@media (min-width: 46rem) {
  .spec { grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 4vw, 3rem); }
}
.spec li {
  border-bottom: 1px solid var(--edge);
  padding: 0.85rem 0; font-size: 0.95rem; line-height: 1.5;
}
.compliance .spec { border-top-color: var(--ink-edge); }
.compliance .spec li { border-bottom-color: var(--ink-edge); }

/* ---- referral ---------------------------------------------------------- */

.referral { border-top: 1px solid var(--edge); }
.referral-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 56rem) { .referral-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 6rem); align-items: start; } }

/* ---- contact ----------------------------------------------------------- */

.contact { background: var(--raised); border-top: 1px solid var(--edge); }
.contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 56rem) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 6rem); } }

.field { display: grid; gap: 0.45rem; margin-bottom: 1.1rem; }
.field label { font-size: 0.76rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--type-dim); font-weight: 600; }
.field input, .field textarea, .field select {
  font: inherit; color: var(--type);
  background: var(--ground); border: 1px solid var(--rule);
  padding: 0.8rem 0.95rem; min-height: 48px; width: 100%;
  border-radius: 0;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); outline: none;
}
.field textarea { min-height: 128px; resize: vertical; }

/* Honeypot. display:none ONLY — Chrome autofills offscreen fields. */
.hp { display: none; }

.detail-list { margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.detail-list > div { border-top: 1px solid var(--edge); padding-top: 0.9rem; }
.detail-list dt { font-size: 0.76rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--type-dim); margin-bottom: 0.3rem; font-weight: 600; }
.detail-list dd { margin: 0; font-size: 1.02rem; }

/* ---- footer ------------------------------------------------------------ */

.site-footer {
  background: var(--ink); color: var(--ink-dim);
  padding-block: clamp(3rem, 6vw, 4.5rem) 7.5rem;
  font-size: 0.9rem;
}
.site-footer img { width: 158px; margin-bottom: 1.5rem; }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 44rem) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem); } }
.site-footer h3 {
  font-size: 0.74rem; letter-spacing: 0.15em; text-transform: uppercase;
  font-stretch: 105%; color: var(--ink-type); margin-bottom: 1.1rem; font-weight: 600;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.site-footer a { color: var(--ink-dim); text-decoration: none; }
.site-footer a:hover { color: var(--brass-lit); }
.site-footer .blurb { max-width: 30ch; margin-bottom: 1.5rem; }
.footer-contact { display: grid; gap: 0.55rem; }
.footer-contact a { color: var(--ink-type); }

.socials { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--ink-edge);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.socials a:hover { border-color: var(--brass-lit); background: oklch(0.28 0.014 60); }
.socials svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }

.legal {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.6rem;
  border-top: 1px solid var(--ink-edge);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.6rem 1.5rem; font-size: 0.78rem;
}
/* Sits opposite the client's own legal line rather than reading as part of it. */
@media (min-width: 52rem) { .legal .built { margin-left: auto; } }
.legal .built a { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 0.2em; }
.legal .built a:hover { color: var(--brass-lit); }

/* ---- sticky call bar --------------------------------------------------- */

.callbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  display: flex; gap: 1px; background: var(--rule);
  border-top: 1px solid var(--rule);
}
.callbar a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 58px; padding: 0.5rem; text-decoration: none;
  font-weight: 600; font-size: 0.95rem; font-stretch: 105%;
}
.callbar .call { background: var(--type); color: var(--ground); }
.callbar .text { background: var(--ground); color: var(--type); }
.callbar svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.75; }
@media (min-width: 62rem) {
  .callbar { display: none; }
  .site-footer { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
}

/* ---- sections ---------------------------------------------------------- */

.section { padding-block: var(--gap); }
.section-head { display: grid; gap: 1.25rem; }
@media (min-width: 56rem) {
  .section-head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end; gap: 3rem; }
}

/* ---- entrance ----------------------------------------------------------
   Enhancement, never a precondition. Both hidden states are gated behind
   html.js, set by an inline script in <head>. Without it the observer never
   fires and every revealed section renders permanently blank. */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .hero-body > * { animation: rise 0.9s var(--ease) backwards; }
  .js .hero-body > *:nth-child(1) { animation-delay: 0.05s; }
  .js .hero-body > *:nth-child(2) { animation-delay: 0.15s; }
  .js .hero-body > *:nth-child(3) { animation-delay: 0.25s; }
  .js .hero-body > *:nth-child(4) { animation-delay: 0.35s; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}