/* ============================================================
   Custom Plumbing Group design system, v2
   Two surfaces, one system:
     DARK  (coal, near-black) carries the rail, header, the home
           hero, the scroll-scrubbed cutaway and the closer.
     PAPER (warm light) carries the proof strip, the job stories,
           services, areas, every inner-page hero and body.
   Accent: the logo teal, used as supplied (#48F0E0). On paper
   the teal has to darken to --teal-deep or it fails AA, so the
   two teals are separate tokens and the guard proves both.

   TWO loaded families only: Archivo (display) and Public Sans
   (text). The docket, the cutaway phase labels and the labels
   inside the technical drawing use the SYSTEM monospace stack,
   so nothing is downloaded for them. Tracked uppercase mono
   appears in those three places and nowhere else.
   ============================================================ */

:root{
  /* dark surface */
  --coal:#0C0F10;
  --coal-2:#161B1C;
  --coal-line:#2B3335;
  --ink:#ECF0EF;
  --ink-soft:#A6B1B0;
  --rail-ink:#DDE4E3;
  --rail-soft:#9AA5A4;
  --legal:#8C9897;

  /* paper surface */
  --paper:#F6F2EA;
  --paper-2:#EDE7DC;
  --paper-line:#DCD4C6;
  --ink-dark:#14191A;
  --ink-dark-soft:#4E5758;

  /* brand */
  --teal:#48F0E0;        /* logo teal: accent and type on the dark surface only */
  --teal-deep:#0A5F58;   /* the same idea, dark enough to be read on paper */
  --cta-ink:#05201D;     /* ink that sits on a teal button */

  /* form states. --field-line is a UI border, so it clears 3:1 against BOTH
     the white field it encloses and the paper-2 card it sits on. */
  --field-line:#857C6B;
  --placeholder:#6B7472;
  --err-ink:#8A2318;
  --ok-ink:#0A5F58;

  --font-display:'Archivo',system-ui,sans-serif;
  --font-text:'Public Sans',system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  color-scheme:light;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink-dark);
  font-family:var(--font-text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.display{font-family:var(--font-display);font-weight:800;line-height:1.03;letter-spacing:-.02em}
.mono{font-family:var(--font-mono)}
.wrap{max-width:1140px;margin:0 auto;padding-left:1.25rem;padding-right:1.25rem}
.ic{width:1.1em;height:1.1em;flex:none;fill:currentColor;vertical-align:-.15em}

/* skip link: visible the moment it takes focus */
.skip{position:absolute;left:.6rem;top:-3rem;z-index:200;background:var(--teal);color:var(--cta-ink);
  font-weight:800;padding:.7rem 1.1rem;border-radius:0 0 10px 10px;transition:top .15s ease}
.skip:focus{top:0}

/* ---------- utility rail (dark) ---------- */
.rail{background:var(--coal);color:var(--rail-ink);font-size:.82rem}
.rail-in{max-width:1140px;margin:0 auto;padding:.44rem 1.25rem;display:flex;align-items:center;gap:1rem;justify-content:space-between}
.rail .r-areas{color:var(--rail-soft)}
.rail a{color:var(--teal);font-weight:700;white-space:nowrap;flex:none;display:inline-block;padding:.75rem 0;margin:-.75rem 0}
@media (max-width:680px){.rail .r-areas{display:none}}

/* ---------- header (dark, sticky) ---------- */
.hd{position:sticky;top:0;z-index:50;background:rgba(12,15,16,.97);border-bottom:1px solid var(--coal-line)}
.hd-in{position:relative;z-index:51;max-width:1140px;margin:0 auto;padding:.6rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.hd .logo img{height:38px;width:auto}
.hd-in nav{display:flex;gap:1.5rem;font-weight:600;font-size:.95rem}
.hd-in nav a{color:var(--ink-soft);position:relative;padding:.3rem 0}
.hd-in nav a:hover,.hd-in nav a.on{color:var(--ink)}
.hd-in nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:2px;background:var(--teal)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.5rem;margin-left:auto;margin-right:.6rem}
.burger span{display:block;width:24px;height:3px;border-radius:2px;background:var(--ink);margin:5px 0;transition:transform .2s ease,opacity .2s ease}
.mnav{display:none}
@media (max-width:480px){.hd-in .call-pill{display:none}}
@media (max-width:820px){
  .hd-in nav{display:none}
  .burger{display:block}
  .mnav{position:fixed;inset:0;z-index:49;display:flex;flex-direction:column;justify-content:center;gap:0;padding:6.5rem 1.6rem calc(5.5rem + env(safe-area-inset-bottom));background:rgba(7,9,9,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .42s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1),visibility 0s linear .42s}
  .mnav.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .42s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1),visibility 0s}
  .mnav a{font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:clamp(2.2rem,9.5vw,3.2rem);letter-spacing:-.035em;line-height:1.1;color:var(--ink);padding:.45rem 0;border:0;opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1),color .2s}
  .mnav a.on{color:var(--teal)}
  .mnav a:active{color:var(--teal)}
  .mnav.is-open a{opacity:1;transform:none}
  .mnav.is-open a:nth-of-type(1){transition-delay:.08s}.mnav.is-open a:nth-of-type(2){transition-delay:.14s}.mnav.is-open a:nth-of-type(3){transition-delay:.2s}.mnav.is-open a:nth-of-type(4){transition-delay:.26s}.mnav.is-open a:nth-of-type(5){transition-delay:.32s}
  .mnav-foot{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--coal-line);display:flex;flex-direction:column;gap:.35rem;opacity:0;transform:translateY(12px);transition:opacity .5s cubic-bezier(.16,1,.3,1) .42s,transform .5s cubic-bezier(.16,1,.3,1) .42s}
  .mnav.is-open .mnav-foot{opacity:1;transform:none}
  .mnav-foot .mnav-call{font-size:clamp(1.5rem,6.5vw,2rem);color:var(--teal);padding:.2rem 0;opacity:1;transform:none;transition:none}
  .mnav-foot span{color:var(--ink-soft);font-size:.9rem;line-height:1.4}
  body.nav-open{overflow:hidden}
  .mnav-close{display:none;position:absolute;top:1rem;right:1rem;width:48px;height:48px;background:none;border:0;cursor:pointer;align-items:center;justify-content:center}
  .mnav-close span{position:absolute;width:26px;height:3px;border-radius:2px;background:var(--ink);transform:rotate(45deg)}
  .mnav-close span:last-child{transform:rotate(-45deg)}
  body.front .mnav-close{display:flex}
  html:not(.js) .mnav-close{display:none}
  .burger span{transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .2s ease}
  body.nav-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body.nav-open .burger span:nth-child(2){opacity:0}
  body.nav-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  /* no JavaScript: nothing can open the burger, so the links stand open instead */
  html:not(.js) .mnav{display:block;position:static;opacity:1;visibility:visible;transform:none;padding:.4rem 1.25rem .9rem;background:var(--coal-2)}
  html:not(.js) .mnav a{display:block;opacity:1;transform:none;font-size:1.05rem}
  html:not(.js) .mnav-foot{opacity:1;transform:none}
  html:not(.js) .burger{display:none}
}
.call-pill{display:inline-flex;align-items:center;gap:.5rem;background:var(--teal);color:var(--cta-ink);font-weight:800;padding:.6rem 1.1rem;border-radius:999px;white-space:nowrap;transition:filter .15s ease}
.call-pill:hover{filter:brightness(1.06)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.04rem;padding:.9rem 1.45rem;border-radius:12px;border:0;cursor:pointer;font-family:inherit;transition:transform .15s ease,filter .15s ease}
.btn:hover{filter:brightness(1.06)}
.btn-teal{background:var(--teal);color:var(--cta-ink)}
.btn-line{border:2px solid var(--teal);color:var(--teal);font-weight:700}
.btn-line-dark{border:2px solid var(--teal-deep);color:var(--teal-deep);font-weight:700}
.btn-solid{background:var(--teal-deep);color:#FFFFFF}
.btn:active,.call-pill:active,.callbar:active{transform:scale(.97)}
.btn[disabled]{opacity:.6;cursor:progress}

/* ---------- home hero (dark) ----------
   The photo is not a card. It runs the full height of the right column,
   cropped to the unit (which sits right of centre, low in a portrait frame),
   with a thin teal rule under it and the caption set as ordinary text. */
.hero{background:var(--coal);color:var(--ink);position:relative;overflow:hidden}
.hero-in{max-width:1140px;margin:0 auto;padding:3.6rem 1.25rem 3.4rem;display:grid;grid-template-columns:1.08fr .92fr;gap:3rem;align-items:stretch}
.hero-copy{align-self:center}
@media (max-width:900px){.hero-in{grid-template-columns:1fr;gap:2rem;padding-top:2.4rem;padding-bottom:2.6rem}}
.docket{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rail-soft)}
.hero h1{font-size:clamp(2.5rem,6.2vw,4.4rem);margin:.85rem 0 1rem;max-width:14ch;text-wrap:balance}
.hero .lede{font-size:clamp(1.02rem,1.9vw,1.18rem);color:var(--ink-soft);max-width:48ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.7rem}
/* the proof a stranger can check, in the same eye-line as the buttons on a
   desktop and ahead of the photograph when the hero stacks on a phone */
.hero-proof{margin-top:.9rem;color:var(--ink-soft);font-size:.95rem;display:flex;align-items:baseline;gap:.35rem}
.hero-proof .star{color:var(--teal);font-size:1rem}
.hero-proof a{color:var(--teal);font-weight:700;border-bottom:1px solid transparent}
.hero-proof a:hover{border-bottom-color:var(--teal)}
.hero-fig{margin:0;display:grid;grid-template-rows:1fr auto;gap:0}
.hero-fig img{width:100%;height:100%;min-height:26rem;object-fit:cover;object-position:58% 57%;border-radius:6px}
.hero-fig figcaption{border-top:2px solid var(--teal);margin-top:.85rem;padding-top:.6rem;color:var(--ink-soft);font-size:.9rem}
@media (max-width:900px){.hero-fig img{height:auto;min-height:0;aspect-ratio:4/3.2;object-position:58% 62%}}

/* ---------- proof strip (paper, straight under the hero) ---------- */
.proofstrip{background:var(--paper);border-bottom:1px solid var(--paper-line)}
.proof-in{max-width:1140px;margin:0 auto;padding:1.35rem 1.25rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.proof-in>*{padding-left:1.25rem;border-left:1px solid var(--paper-line)}
.proof-in>*:first-child{padding-left:0;border-left:0}
.pf b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.14rem;color:var(--ink-dark);line-height:1.2}
.pf span{display:block;color:var(--ink-dark-soft);font-size:.87rem;margin-top:.15rem}
a.pf:hover b{color:var(--teal-deep)}
a.pf:hover span{text-decoration:underline}
.pf .star{color:var(--teal-deep);font-size:1rem;margin-right:.15rem}
@media (max-width:820px){
  .proof-in{grid-template-columns:repeat(2,1fr);gap:1rem 0}
  .proof-in>*{padding-left:1rem}
  .proof-in>*:nth-child(odd){padding-left:0;border-left:0}
}

/* ---------- emergency line (dark) ---------- */
.emline{background:var(--coal-2);color:var(--ink);border-top:1px solid var(--coal-line);border-bottom:1px solid var(--coal-line)}
.emline-in{max-width:1140px;margin:0 auto;padding:1.5rem 1.25rem;display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;justify-content:space-between}
.emline b{font-family:var(--font-display);font-weight:800;font-size:1.16rem;display:block}
.emline span{color:var(--ink-soft);font-size:.98rem}
.emline .num{color:var(--teal);font-family:var(--font-display);font-weight:800;font-size:1.5rem;white-space:nowrap}

/* ---------- sections (paper) ---------- */
.sec{padding:4.4rem 0}
.sec-tight{padding:2.8rem 0}
.sec h2{font-size:clamp(1.7rem,3.9vw,2.5rem);margin:.5rem 0 .9rem;text-wrap:balance}
.eyebrow{font-family:var(--font-mono);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;color:var(--teal-deep)}
.sec .sub{color:var(--ink-dark-soft);max-width:62ch;font-size:1.04rem}
.rule-top{border-top:1px solid var(--paper-line)}

/* scroll reveal, opacity only, gated on the js class so no-JS shows everything */
.js .rv{opacity:0;transition:opacity .7s ease}
.js .rv.in{opacity:1}

/* ---------- services: ruled list, two columns on desktop ---------- */
.svc-index{list-style:none;margin-top:1.8rem}
.svc-index a{display:flex;align-items:baseline;gap:1.1rem;padding:1rem .4rem 1rem .2rem;border-bottom:1px solid var(--paper-line);transition:background .22s ease,padding-left .3s cubic-bezier(.32,.72,0,1)}
.svc-index a:hover{background:var(--paper-2);padding-left:.7rem}
.svc-index .w{flex:1;min-width:0}
.svc-index b{font-family:var(--font-display);font-weight:700;font-size:1.06rem;display:block}
.svc-index small{color:var(--ink-dark-soft);font-size:.88rem;display:block;line-height:1.45}
.svc-index .go{font-weight:700;color:var(--teal-deep);font-size:.86rem;flex:none}
.svc-two{display:grid;grid-template-columns:1fr 1fr;column-gap:2.6rem;border-top:1px solid var(--paper-line)}
@media (max-width:820px){.svc-two{grid-template-columns:1fr;column-gap:0}}

/* ---------- three job stories ----------
   A photo of ours, what the job type is, and a review that a customer
   wrote about that KIND of work. The two are never presented as the
   same job: the caption says whose photo it is, the quote says whose
   words they are. */
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;margin-top:2.2rem}
@media (max-width:900px){.stories{grid-template-columns:1fr;gap:2.6rem}}
.story{display:flex;flex-direction:column}
.story img{width:100%;height:auto;aspect-ratio:4/3.1;object-fit:cover;object-position:var(--p,50% 50%);border-radius:7px;background:var(--paper-2)}
.story .cap{color:var(--ink-dark-soft);font-size:.86rem;margin-top:.55rem}
.story h3{font-family:var(--font-display);font-weight:700;font-size:1.2rem;margin:1rem 0 .4rem}
.story p{color:var(--ink-dark-soft);font-size:.97rem}
.story .said{margin-top:1.1rem;padding-left:1.1rem;border-left:3px solid var(--teal-deep)}
.story .said q{quotes:none;font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1.42;color:var(--ink-dark)}
.story .said q::before{content:"\201C"}
.story .said q::after{content:"\201D"}
.story .said .who{display:block;margin-top:.5rem;font-size:.85rem;color:var(--ink-dark-soft)}
.story .said .who b{color:var(--ink-dark);font-weight:700}
.gl{color:var(--teal-deep);font-weight:700;border-bottom:1px solid transparent}
.gl:hover{border-bottom-color:var(--teal-deep)}

/* ---------- reviews (short) ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;margin-top:2rem}
@media (max-width:880px){.quotes{grid-template-columns:1fr;gap:1.8rem}}
.q{border-left:3px solid var(--teal-deep);padding-left:1.2rem}
.q blockquote{font-family:var(--font-display);font-weight:600;font-size:1.04rem;line-height:1.42;color:var(--ink-dark)}
.q cite{display:block;margin-top:.7rem;font-style:normal;font-size:.86rem;color:var(--ink-dark-soft)}
.q cite b{font-weight:700;color:var(--ink-dark)}

/* ---------- builders strip ---------- */
.builders{display:grid;grid-template-columns:.95fr 1.05fr;gap:2.8rem;align-items:center}
@media (max-width:880px){.builders{grid-template-columns:1fr;gap:1.8rem}}
.builders figure{margin:0}
.builders img{width:100%;height:auto;aspect-ratio:4/3.3;object-fit:cover;object-position:50% 55%;border-radius:8px}
.builders figcaption{color:var(--ink-dark-soft);font-size:.87rem;margin-top:.55rem}
.scope{list-style:none;margin:1.2rem 0 1.4rem;border-top:1px solid var(--paper-line)}
.scope li{border-bottom:1px solid var(--paper-line);padding:.7rem 0;display:flex;gap:1rem;align-items:baseline}
.scope li .k{font-weight:700;color:var(--teal-deep);flex:none;width:7rem;font-size:.92rem}
.scope li span{color:var(--ink-dark-soft)}

/* ---------- areas ---------- */
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:900px){.area-grid{grid-template-columns:repeat(2,1fr)}}
/* eleven suburb cards stay two up on a phone: the labels are short and a
   single stacked column made the home page a great deal longer for no gain */
@media(max-width:560px){.area-grid{grid-template-columns:1fr 1fr;gap:.7rem}.area-card{padding:.95rem 1rem}}
.area-card{background:var(--paper-2);border:1px solid var(--paper-line);border-radius:9px;padding:1.15rem 1.2rem;transition:border-color .22s ease}
.area-card:hover{border-color:var(--teal-deep)}
.area-card b{font-family:var(--font-display);font-weight:700;font-size:1.06rem;display:block}
.area-card p{color:var(--ink-dark-soft);font-size:.89rem;margin:.3rem 0 .6rem}
.area-card .go{font-weight:700;color:var(--teal-deep);font-size:.86rem}
.suburb-cloud{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.suburb-cloud span,.suburb-cloud a{border:1.5px solid var(--paper-line);background:var(--paper-2);padding:.4rem .82rem;border-radius:999px;font-weight:600;font-size:.88rem;color:var(--ink-dark-soft);display:inline-block}
.suburb-cloud a:hover{border-color:var(--teal-deep);color:var(--teal-deep)}

/* ---------- Corey's signed note ---------- */
.note-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
@media (max-width:880px){.note-wrap{grid-template-columns:1fr;gap:2rem}}
.note{background:#fff;border:1px solid var(--paper-line);border-radius:6px;padding:2.4rem 2.3rem;font-size:1.04rem}
.note p{margin-bottom:1rem;color:var(--ink-dark-soft)}
.note h2{border-bottom:1px solid var(--paper-line);padding-bottom:.8rem;margin-bottom:1.1rem}
.sigblock{margin-top:1.6rem;padding-top:1.1rem;border-top:2px solid var(--teal-deep)}
.sigblock .name{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--ink-dark);letter-spacing:-.01em}
.sigblock .where{font-size:.9rem;color:var(--ink-dark-soft);margin:.15rem 0 .4rem}
.sigblock .tel{font-family:var(--font-display);font-weight:800;font-size:1.24rem;color:var(--teal-deep)}
.sigblock .tel:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- closer (dark) ---------- */
.closer{background:var(--coal);color:var(--ink);padding:4.6rem 0}
.closer h2{font-size:clamp(1.9rem,4.4vw,3rem);margin-bottom:.8rem;text-wrap:balance;color:var(--ink)}
.closer .line{color:var(--ink-soft);font-size:.95rem}
.closecall{display:inline-block;margin-top:1rem;font-family:var(--font-display);font-weight:800;font-size:clamp(2.3rem,6.4vw,4rem);line-height:1;color:var(--teal)}
.closecall:hover{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:3px}
.closer .mail{margin-top:1rem;font-size:.94rem;color:var(--ink-soft)}
.closer .mail a{color:var(--teal);font-weight:700}
.closer .hrs{margin-top:1.4rem;color:var(--ink-soft);font-size:.95rem}

/* ---------- inner page heroes (paper) ----------
   Two shapes only. A page with a photograph that genuinely shows the
   service gets the photo CONTAINED beside the words, on paper, so the
   frame is never cropped into a decorative band. A page with no
   qualifying photo gets type and a rule, and no photo at all. */
.lite-hero,.type-hero{background:var(--paper);border-bottom:1px solid var(--paper-line)}
.lite-hero-in{max-width:1140px;margin:0 auto;padding:2.4rem 1.25rem 3rem;display:grid;grid-template-columns:1.12fr .88fr;gap:2.8rem;align-items:center}
@media (max-width:880px){.lite-hero-in{grid-template-columns:1fr;gap:2rem;padding-bottom:2.4rem}}
.type-hero-in{max-width:1140px;margin:0 auto;padding:2.4rem 1.25rem 2.9rem;max-width:1140px}
.type-hero-in .lede{max-width:60ch}
.lite-hero h1,.type-hero h1{font-size:clamp(1.95rem,5vw,3.1rem);margin:.5rem 0 .8rem;max-width:20ch;color:var(--ink-dark)}
.lite-hero .lede,.type-hero .lede{color:var(--ink-dark-soft);max-width:52ch;font-size:1.06rem}
.lite-hero .btn,.type-hero .btn{margin-top:1.3rem}
/* an inner hero may carry a second CTA beside the call button */
.page-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.3rem}
.page-ctas .btn{margin-top:0}
.type-hero-in::after{content:"";display:block;width:64px;height:3px;border-radius:2px;background:var(--teal-deep);margin-top:1.6rem}
.crumb{font-size:.84rem;color:var(--ink-dark-soft);margin-bottom:.45rem}
.crumb a{color:var(--teal-deep);font-weight:600}
.crumb a:hover{text-decoration:underline}
.shot{background:none;border:0;border-radius:10px;padding:0;margin:0;overflow:hidden}
.shot img{width:100%;height:30rem;object-fit:cover;object-position:50% 42%;border-radius:10px}
.shot figcaption{color:var(--ink-dark-soft);font-size:.86rem;margin-top:.7rem}
@media (max-width:560px){.shot img{height:18rem}}

/* ---------- inner page body (paper) ---------- */
.two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:2.6rem;align-items:start}
@media (max-width:880px){.two-col{grid-template-columns:1fr}}
.prose h2{font-size:1.42rem;margin:1.7rem 0 .6rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.1rem;margin:1.3rem 0 .4rem}
.prose p{margin-bottom:.9rem;color:var(--ink-dark-soft)}
.prose ul{margin:.4rem 0 1rem 1.2rem;color:var(--ink-dark-soft)}
.prose li{margin-bottom:.35rem}
.prose a:not(.btn){color:var(--teal-deep);font-weight:700}
.ruled{list-style:none;margin:.6rem 0 1.2rem!important}
.ruled li{border-bottom:1px solid var(--paper-line);padding:.55rem 0 .55rem 1.4rem;position:relative;margin:0!important}
.ruled li:first-child{border-top:1px solid var(--paper-line)}
.ruled li::before{content:"";position:absolute;left:0;top:1.1rem;width:14px;height:3px;border-radius:2px;background:var(--teal-deep)}
/* aspect-ratio reserves the box so a lazy photo cannot shift the layout */
.jobfig{margin:1.5rem 0 1.6rem}
.jobfig img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:var(--fig-pos,50% 50%);border-radius:8px;border:1px solid var(--paper-line);background:var(--paper-2)}
.jobfig figcaption{color:var(--ink-dark-soft);font-size:.87rem;margin-top:.55rem}
@media (max-width:600px){.jobfig img{aspect-ratio:4/3}}

.side-card{background:var(--paper-2);border:1px solid var(--paper-line);border-radius:14px;padding:1.5rem;position:sticky;top:80px}
.side-card b.t{font-family:var(--font-display);font-size:1.12rem;display:block;margin-bottom:.5rem}
.side-card>span{color:var(--ink-dark-soft);display:block;font-size:.95rem}
.side-card .num{display:block;font-family:var(--font-display);font-weight:800;font-size:1.65rem;color:var(--teal-deep);margin:.5rem 0 .7rem}
.side-card small{color:var(--ink-dark-soft);display:block;margin-top:.7rem;font-size:.85rem}
.side-card small a:not(.btn){color:var(--teal-deep);font-weight:700}

/* scope table (builders page) */
.scope-table{width:100%;border-collapse:collapse;margin:1rem 0 1.4rem}
.scope-table th,.scope-table td{text-align:left;padding:.7rem .6rem;border-bottom:1px solid var(--paper-line);vertical-align:top}
.scope-table th{color:var(--teal-deep);white-space:nowrap;width:8.4rem;font-weight:700}
.scope-table td{color:var(--ink-dark-soft)}

/* FAQ */
.faq{border-top:1px solid var(--paper-line);margin-top:1.6rem}
.faq>div{border-bottom:1px solid var(--paper-line);padding:1.2rem 0;scroll-margin-top:5.5rem}
.faq h2{font-family:var(--font-display);font-weight:700;font-size:1.16rem;margin:0 0 .45rem}
.faq p{color:var(--ink-dark-soft);margin-bottom:.6rem}
.faq p:last-child{margin-bottom:0}

/* ---------- enquiry form ---------- */
.jobform{display:flex;flex-direction:column;gap:1rem;background:var(--paper-2);border:1px solid var(--paper-line);border-radius:14px;padding:1.6rem;margin:1.2rem 0 1.4rem}
.jobform .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.jobform .row{grid-template-columns:1fr}}
.jobform label{min-width:0;font-weight:700;font-size:.93rem;display:flex;flex-direction:column;gap:.35rem;color:var(--ink-dark)}
.jobform input,.jobform textarea{box-sizing:border-box;min-width:0;font:inherit;font-size:1rem;font-weight:500;padding:.72rem .8rem;border:1.5px solid var(--field-line);border-radius:10px;background:#fff;color:var(--ink-dark);width:100%}
.jobform textarea{min-height:8rem;resize:vertical}
.jobform input::placeholder,.jobform textarea::placeholder{color:var(--placeholder)}
.jobform input:focus,.jobform textarea:focus{outline:none;border-color:var(--teal-deep);box-shadow:0 0 0 3px rgba(10,95,88,.18)}
.jobform input[aria-invalid="true"],.jobform textarea[aria-invalid="true"]{border-color:var(--err-ink)}
/* one error element per field, named by the input that owns it */
.jobform .ferr{color:var(--err-ink);font-weight:600;font-size:.86rem;margin-top:.1rem}
.jobform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.jobform .check{flex-direction:row;align-items:flex-start;gap:.6rem;font-weight:600;color:var(--ink-dark)}
.jobform .check input{width:1.15rem;height:1.15rem;flex:none;margin-top:.2rem;accent-color:var(--teal-deep)}
.jobform .callback{display:none}
.jobform .callback.on{display:flex}
.jobform button{width:fit-content}
.jobform .fine{color:var(--ink-dark-soft);font-size:.86rem}
.form-msg{border-radius:10px;padding:.9rem 1rem;font-size:.95rem;line-height:1.5;border:1.5px solid}
.form-msg a{font-weight:700;color:inherit;text-decoration:underline}
.form-msg.ok{color:var(--ok-ink);border-color:var(--ok-ink);background:#fff}
.form-msg.err{color:var(--err-ink);border-color:var(--err-ink);background:#fff}

/* ---------- footer (dark) ---------- */
footer{background:var(--coal);color:var(--ink-soft);border-top:1px solid var(--coal-line)}
.ft-band{max-width:1140px;margin:0 auto;padding:3rem 1.25rem 2.2rem}
.ft-band img{height:32px;width:auto}
.ft-band p{margin-top:1rem;font-size:.92rem;max-width:60ch}
.ft-band .ft-contact{margin-top:0}
.ft-contact a,.ft-links a{display:inline-block;padding:.7rem 0}
.ft-band a{color:var(--teal);font-weight:700}
.ft-links{margin-top:.2rem;font-size:.92rem;display:flex;flex-wrap:wrap;gap:0 1.2rem}
.ft-legal{border-top:1px solid var(--coal-line);padding:1.15rem;text-align:center;font-size:.76rem;color:var(--legal)}
.ft-legal .mono{letter-spacing:.08em}

/* ---------- mobile sticky call ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;background:var(--teal);color:var(--cta-ink);padding:.9rem 1.2rem calc(.9rem + env(safe-area-inset-bottom));text-align:center;font-weight:800;font-size:1.1rem}
.callbar .ic{width:1.2em;height:1.2em}
@media (max-width:760px){.callbar{display:flex;align-items:center;justify-content:center;gap:.6rem}body{padding-bottom:calc(3.5rem + env(safe-area-inset-bottom))}}

/* ---------- the scroll-scrubbed cutaway (dark) ----------
   Sticky stage pinned over a scroll runway; the driver at the end of
   index.html scrubs stroke-dashoffset and element pops from progress.
   Reduced motion and no-JS both land on the finished drawing.
   v2: the runway came down from 320vh to 180vh (150vh on a phone) after
   reviews called the scroll cost too high for one drawing. The driver in
   index.html reads the same (max-height:600px) query as the fallback below,
   so the two never disagree about whether the stage is pinned. */
.jobscroll{position:relative;height:180vh;background:var(--coal)}
.js-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;overflow:hidden;color:var(--ink);background:var(--coal);padding:3.6rem 1.25rem 1.1rem}
.js-head{max-width:1140px;margin:0 auto;width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.js-head .eyebrow{color:var(--teal)}
.js-head h2{font-size:clamp(1.45rem,3.3vw,2.2rem);margin:.4rem 0 .2rem;color:var(--ink)}
.js-head .sub{color:var(--ink-soft);font-size:.95rem;max-width:52ch}
.js-hint{color:var(--rail-soft);font-size:.85rem;white-space:nowrap;padding-bottom:.3rem}
.js-stage{flex:1;min-height:0;max-width:1140px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:center}
/* the drawing is the point, so it is sized to fill the pin, not to sit politely in it */
.js-stage svg{width:100%;height:100%;max-height:min(64vh,620px)}
#jobscroll [data-pop]{opacity:0;transform-box:fill-box;transform-origin:center}
.js-ui{max-width:1140px;margin:0 auto;width:100%}
.js-phases{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:.8rem}
.js-phase{position:relative;padding-top:.55rem}
.js-phase::before{content:"";position:absolute;left:0;top:0;width:22px;height:3px;border-radius:2px;background:var(--coal-line);transition:background .2s ease,width .2s ease}
.js-phase.on::before{background:var(--teal);width:44px}
.js-phase .k{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;color:var(--rail-soft);white-space:nowrap}
.js-phase.done .k::after{content:" \2713";color:#86D194}
.js-phase b{display:block;font-family:var(--font-display);font-weight:700;font-size:.96rem;color:var(--ink-soft);margin:.1rem 0}
.js-phase.on b{color:var(--teal)}
.js-phase small{display:block;color:var(--rail-soft);font-size:.75rem;line-height:1.35}
.js-track{height:3px;border-radius:2px;background:var(--coal-line);overflow:hidden}
.js-fill{height:100%;width:0;border-radius:2px;background:var(--teal)}
.js-meta{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;color:var(--rail-soft)}
.js-meta .pct{color:var(--teal)}
.js-cta{position:absolute;left:50%;bottom:20vh;transform:translate(-50%,14px);opacity:0;pointer-events:none;z-index:3}
@media (max-width:760px){
  .jobscroll{height:150vh}
  /* phone: the pin is a compact block, not a full screen, so the drawing is not marooned in dead space */
  .js-pin{height:auto;min-height:0;padding-top:3rem;padding-bottom:calc(4.2rem + env(safe-area-inset-bottom))}
  .js-head{flex-direction:column;align-items:flex-start;gap:.2rem}
  .js-hint{display:none}
  .js-stage svg{max-height:46svh}
  .js-phases{gap:.6rem}
  .js-phase .k{letter-spacing:.06em}
  .js-phase small{display:none}
  .js-phase b{font-size:.78rem}
  .js-cta{display:none} /* the sticky callbar owns the call action on a phone */
}
/* reduced motion: the finished drawing, unpinned */
@media (prefers-reduced-motion:reduce){
  .jobscroll{height:auto}
  .js-pin{position:static;height:auto;min-height:0}
  #jobscroll [data-pop]{opacity:1}
  .js-cta{position:static;transform:none;opacity:1;pointer-events:auto;margin-top:1rem;text-align:center}
}
/* short viewports (landscape phones, zoomed text): unpin, natural height, finished state */
@media (max-height:600px){
  .jobscroll{height:auto}
  .js-pin{position:static;height:auto;min-height:0;overflow:visible}
  #jobscroll [data-pop]{opacity:1}
  .js-cta{position:static;transform:none;opacity:1;pointer-events:auto;margin-top:1rem;text-align:center}
}
/* no-JS: same finished state */
html:not(.js) .jobscroll{height:auto}
html:not(.js) .js-pin{position:static;height:auto;min-height:0}
html:not(.js) #jobscroll [data-pop]{opacity:1}
html:not(.js) .js-cta{position:static;transform:none;opacity:1;pointer-events:auto;margin-top:1rem;text-align:center}

.svc-links{list-style:none;padding:0;margin:0 0 1.2rem;columns:2;column-gap:2rem}
.svc-links li{padding:.35rem 0;border-bottom:1px solid var(--paper-line);break-inside:avoid}
.svc-links a{color:var(--teal-deep);font-weight:600}
@media (max-width:640px){.svc-links{columns:1}}
.num,.side-card small a{overflow-wrap:anywhere}

/* ---------- a11y and motion ---------- */
:focus-visible{outline:3px solid var(--teal-deep);outline-offset:2px}
.hero :focus-visible,.closer :focus-visible,.jobscroll :focus-visible,footer :focus-visible,.hd :focus-visible,.rail :focus-visible,.skip:focus-visible{outline-color:var(--teal)}
::selection{background:var(--teal);color:var(--cta-ink)}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1!important}
}
[hidden]{display:none!important}

@media (prefers-reduced-motion:reduce){.mnav,.mnav a,.mnav-foot,.burger span{transition:none!important}}