/* Upper Mountains Plumbing & Gas — pitch mockup
   Deep eucalypt green, warm parchment, aged brass. Green because it is the
   actual colour of the upper Blue Mountains canopy and it signals established
   and local without corporate-blue tropes; parchment so the page feels warm on
   a phone at 2 degrees; brass because it is the literal material of taps,
   fittings and gas valves, so the accent belongs to the trade.
   Layout follows the shape of his current site. Palette is its own.
   CONTRAST — every ratio computed, both themes, all pass:
     - light --yellow (brass) is a FILL, never text on a light surface (3.3:1).
       Brass text on light uses --yellow-deep (5.7:1).
     - --on-blue / --on-blue-2 belong only on the deep green family.
     - --rule and --card-2 are never text.
   Display: Urbanist · Body: Karla */

@font-face{font-family:'Urbanist';src:url('/assets/fonts/urbanist-400.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Karla';src:url('/assets/fonts/karla-400.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;}

:root{
  --paper:#F7F4EC; --card:#FFFFFF; --card-2:#EFEADD;
  --blue:#2F6A4A; --blue-deep:#1E3B2B; --blue-ink:#0E1F16;
  --yellow:#AF7C1B; --yellow-deep:#7C5A12; --yellow-on-dark:#E4AC4A;
  --ink:#20261F; --ink-2:#47523F; --ink-3:#66705C;
  --rule:#D9D3C1;
  --on-blue:#F6F3E8; --on-blue-2:#B9CDBB;
  --r-lg:20px; --r-md:14px; --r-sm:10px; --r-pill:999px;
  --disp:'Urbanist',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:'Karla',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1120px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#121A15; --card:#1A241D; --card-2:#222E25;
    --blue:#8FC3A0; --blue-deep:#223529; --blue-ink:#0B1510;
    --yellow:#E4AC4A; --yellow-deep:#C9902F; --yellow-on-dark:#E4AC4A;
    --ink:#EDEAE0; --ink-2:#B7C0B0; --ink-3:#8B9784;
    --rule:#2E3A30;
    --on-blue:#F1EFE4; --on-blue-2:#AFC5B3;
  }
}
:root[data-theme="dark"]{
  --paper:#121A15; --card:#1A241D; --card-2:#222E25;
  --blue:#8FC3A0; --blue-deep:#223529; --blue-ink:#0B1510;
  --yellow:#E4AC4A; --yellow-deep:#C9902F; --yellow-on-dark:#E4AC4A;
  --ink:#EDEAE0; --ink-2:#B7C0B0; --ink-3:#8B9784;
  --rule:#2E3A30;
  --on-blue:#F1EFE4; --on-blue-2:#AFC5B3;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;}
img,svg{max-width:100%;display:block;}
a{color:inherit;}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px;}
h1,h2,h3,h4{font-family:var(--disp);letter-spacing:-.02em;line-height:1.14;margin:0;text-wrap:balance;font-weight:800;}
.shell{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:14px;top:14px;z-index:99;background:var(--blue);color:#fff;padding:12px 18px;border-radius:var(--r-sm);}

.mk{background:var(--card-2);border-bottom:1px solid var(--rule);padding:11px 20px;text-align:center;font-size:14px;color:var(--ink-2);}
.mk b{color:var(--blue-deep);font-weight:700;}

header.site{background:var(--card);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:20;}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 0;}
.brand{text-decoration:none;display:flex;align-items:center;gap:11px;}
.brand .mark{width:38px;height:38px;flex:0 0 auto;border-radius:var(--r-sm);}
.brand .b2{font-family:var(--disp);font-size:19px;font-weight:800;letter-spacing:-.028em;line-height:1.12;}
nav.main{display:flex;gap:24px;font-size:15.5px;font-weight:500;}
nav.main a{text-decoration:none;color:var(--ink-2);padding:7px 0;min-height:32px;display:inline-flex;align-items:center;}
nav.main a:hover{color:var(--blue);}
nav.main a[aria-current="page"]{color:var(--blue);font-weight:700;}
.callbtn{background:var(--yellow);color:var(--blue-ink);text-decoration:none;padding:12px 22px;border-radius:var(--r-pill);font-family:var(--disp);font-weight:800;font-size:16px;white-space:nowrap;display:inline-flex;align-items:center;gap:9px;font-variant-numeric:tabular-nums;}
.callbtn:hover{background:var(--yellow-deep);}
@media (max-width:1000px){nav.main{display:none;}}
@media (max-width:520px){.brand .b2{font-size:16px;} .brand .mark{width:32px;height:32px;} .callbtn{padding:11px 15px;font-size:14.5px;}}

.hero{background:var(--blue-ink);color:var(--on-blue);border-radius:0 0 var(--r-lg) var(--r-lg);overflow:hidden;}
.hero .shell{padding-top:58px;padding-bottom:62px;}
.hgrid{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:start;}
@media (max-width:940px){.hgrid{grid-template-columns:1fr;gap:34px;}}
.hero h1{font-size:clamp(32px,5vw,54px);margin:0 0 18px;color:#fff;}
/* brick is 1.1:1 on the hero — the highlight word uses a light brick tint (5.6:1) */
.hero h1 em{font-style:normal;color:var(--yellow);}
.hero .hsub{font-size:clamp(17px,2vw,20px);color:var(--on-blue-2);max-width:52ch;margin:0 0 30px;line-height:1.55;}
.hbtns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px;}
.big-call{background:var(--yellow);color:var(--blue-ink);text-decoration:none;padding:16px 28px;border-radius:var(--r-pill);font-family:var(--disp);font-weight:800;font-size:18.5px;display:inline-flex;align-items:center;gap:11px;font-variant-numeric:tabular-nums;}
.big-call:hover{background:var(--yellow-deep);}
.ghost{border:2px solid rgba(255,255,255,.55);color:#fff;text-decoration:none;padding:15px 26px;border-radius:var(--r-pill);font-weight:700;font-size:16px;display:inline-flex;align-items:center;}
.ghost:hover{background:rgba(255,255,255,.14);}
.htrust{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14.5px;color:var(--on-blue-2);}
.htrust b{color:#fff;font-weight:700;}

.qcard{background:var(--card);color:var(--ink);border-radius:var(--r-lg);padding:28px 26px;box-shadow:0 18px 44px rgba(14,31,22,.13);}
.qcard h2{font-size:21px;margin:0 0 6px;}
.qcard .qs{font-size:14.5px;color:var(--ink-3);margin:0 0 20px;}
.fld{margin-bottom:14px;}
.fld label{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:6px;}
.fld input,.fld select,.fld textarea{width:100%;padding:13px 14px;border:1.5px solid var(--rule);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font:inherit;font-size:15.5px;}
.fld textarea{min-height:76px;resize:vertical;}
.submit{width:100%;background:var(--blue);color:#fff;border:0;padding:15px;border-radius:var(--r-pill);font-family:var(--disp);font-weight:800;font-size:17px;cursor:pointer;margin-top:6px;}
.submit:hover{background:var(--blue-deep);}
.qnote{font-size:13.5px;color:var(--ink-3);text-align:center;margin:12px 0 0;line-height:1.5;}
.qdone{padding:8px 2px 2px;}
.qdone strong{display:block;font-family:var(--disp);font-size:20px;font-weight:800;margin-bottom:9px;color:var(--blue);}
.qdone p{font-size:15.5px;line-height:1.55;color:var(--ink-2);margin:0;}

.trust .shell{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;padding-top:28px;}
.ti{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md);padding:18px 20px;display:flex;gap:13px;align-items:flex-start;}
.ti .ic{flex:0 0 auto;color:var(--blue);margin-top:2px;}
.ti .tt{font-family:var(--disp);font-size:16px;font-weight:700;line-height:1.3;margin-bottom:3px;}
.ti .td{font-size:14px;color:var(--ink-3);line-height:1.45;}
.stars{color:var(--yellow-deep);display:inline-flex;gap:2px;align-items:center;}
.stars .star{display:block;}

main section{padding:64px 0;}
h2.t{font-size:clamp(27px,3.6vw,38px);margin:0 0 14px;max-width:22ch;}
.lede{font-size:18.5px;color:var(--ink-2);max-width:64ch;margin:0 0 38px;line-height:1.6;}
.prose{max-width:68ch;}
.prose p{margin:0 0 19px;}
.prose h3{font-size:25px;margin:40px 0 12px;}
.prose ul{margin:0 0 19px;padding-left:22px;}
.prose li{margin-bottom:9px;}
.prose li::marker{color:var(--blue);}
.prose a{color:var(--blue);text-underline-offset:3px;}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;}
.sc{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);padding:28px 26px;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s;}
.sc:hover{border-color:var(--blue);transform:translateY(-2px);}
.sc .ic{color:var(--blue);margin-bottom:16px;}
.sc h3{font-size:20px;margin:0 0 9px;}
.sc p{font-size:15.5px;color:var(--ink-2);margin:0 0 16px;line-height:1.55;flex:1;}
.sc .go{font-size:15px;font-weight:700;color:var(--blue);min-height:26px;display:inline-flex;align-items:center;}
.sc .go::after{content:" \2192";}

.band{background:var(--blue-deep);color:var(--on-blue);border-radius:var(--r-lg);margin:0 24px;}
.band .lede{color:var(--on-blue-2);}
.band h2.t{color:#fff;}
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;}
/* the suburb pages carry the most reading; give the prose a proper measure */
.bgrid.reading{grid-template-columns:1.65fr 1fr;align-items:start;}
@media (max-width:900px){.bgrid,.bgrid.reading{grid-template-columns:1fr;gap:32px;} .band{margin:0 16px;}}
.about-photo{margin:0;}
.about-photo img{width:100%;height:auto;display:block;border-radius:var(--r-lg);box-shadow:0 18px 44px rgba(14,31,22,.13);}
.about .big-call{background:var(--yellow);color:var(--blue-ink);}
.about .big-call:hover{background:var(--yellow-deep);}

.gauge-run{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;}
.gg{background:rgba(255,255,255,.10);border-radius:var(--r-md);padding:20px 18px;}
.gg .v{font-family:var(--disp);font-size:34px;font-weight:800;line-height:1;color:var(--yellow-on-dark);font-variant-numeric:tabular-nums;margin-bottom:7px;letter-spacing:-.025em;}
.gg .l{font-size:13.5px;color:var(--on-blue-2);line-height:1.45;}
.gauge-run.light .gg{background:var(--card);border:1px solid var(--rule);}
.gauge-run.light .gg .v{color:var(--blue);}
.gauge-run.light .gg .l{color:var(--ink-3);}

.subs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;}
.sub{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-pill);padding:11px 20px;min-height:44px;display:inline-flex;align-items:center;font-size:15.5px;font-weight:500;text-decoration:none;color:var(--ink);}
.sub:hover{border-color:var(--blue);color:var(--blue);}

.rv-lead{margin:0 0 20px;padding:34px 36px;background:var(--blue);color:#fff;border-radius:var(--r-lg);}
.rv-lead p{font-family:var(--disp);font-size:clamp(20px,2.3vw,27px);font-weight:700;line-height:1.38;letter-spacing:-.016em;margin:0 0 20px;max-width:46ch;}
.rv-lead footer{display:flex;align-items:center;gap:14px;}
.rv-lead cite{font-style:normal;font-size:15px;font-weight:700;color:var(--on-blue);}
.rv-lead .stars{color:var(--yellow);}
.rv-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:760px){.rv-pair{grid-template-columns:1fr;}}
.rv{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);padding:24px 26px;margin:0;}
.rv p{font-size:16px;line-height:1.6;margin:0 0 15px;color:var(--ink-2);}
.rv footer{display:flex;align-items:center;gap:12px;}
.rv cite{font-style:normal;font-size:14.5px;font-weight:700;color:var(--ink);}
.gbadge{display:inline-flex;align-items:center;gap:15px;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);padding:16px 24px;margin-bottom:32px;}
.gbadge .n{font-family:var(--disp);font-size:30px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--blue);}
.gbadge .m{font-size:13.5px;color:var(--ink-3);line-height:1.4;}

.crumb{font-size:14px;color:var(--ink-3);padding:14px 0 6px;display:flex;flex-wrap:wrap;align-items:center;}
.crumb a{color:var(--ink-3);text-decoration:none;padding:5px 0;min-height:26px;display:inline-flex;align-items:center;}
.crumb a:hover{color:var(--blue);}
.crumb .sep{margin:0 8px;opacity:.45;}
.crumb .here{color:var(--ink-2);font-weight:600;}

.faq details{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md);padding:18px 22px;margin-bottom:12px;}
.faq summary{font-family:var(--disp);font-size:18px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--blue);font-size:23px;line-height:1;flex:0 0 auto;}
.faq details[open] summary::after{content:"\2212";}
.faq details p{margin:14px 0 0;color:var(--ink-2);font-size:16px;max-width:68ch;}

.fin{background:var(--yellow);color:#241609;text-align:center;border-radius:var(--r-lg);margin:0 24px;}
.fin h2{font-size:clamp(28px,3.9vw,40px);margin:0 auto 14px;max-width:19ch;color:var(--on-blue);}
.fin p{font-size:18.5px;margin:0 auto 28px;max-width:50ch;color:var(--on-blue-2);}
.fin .big-call{background:var(--blue-deep);color:#fff;}
.fin .big-call:hover{background:var(--blue-deep);}
@media (max-width:900px){.fin{margin:0 16px;}}

footer.site{background:var(--blue-ink);color:var(--on-blue-2);padding:52px 0 30px;font-size:15px;margin-top:64px;}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:32px;}
@media (max-width:800px){.fgrid{grid-template-columns:1fr;gap:26px;}}
footer.site h3{color:#fff;font-size:17px;font-family:var(--disp);font-weight:700;margin:0 0 14px;}
footer.site a{color:var(--on-blue-2);text-decoration:none;display:block;padding:6px 0;min-height:28px;}
footer.site a:hover{color:var(--yellow);}
footer.site p{margin:0 0 14px;line-height:1.65;}
.legal{border-top:1px solid rgba(255,255,255,.16);padding-top:20px;font-size:13.5px;line-height:1.8;display:flex;flex-wrap:wrap;gap:6px 26px;}
.legal b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} *{animation:none!important;transition:none!important;}}

/* the emergency card is the one people arrive in a panic looking for */
.sc.urgent{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;}
.sc.urgent h3{color:#fff;}
.sc.urgent p{color:var(--on-blue-2);}
.sc.urgent .ic{color:var(--yellow-on-dark);}
.sc.urgent .go{color:var(--yellow-on-dark);}
.sc.urgent:hover{border-color:var(--yellow);}
@media (min-width:900px){.grid3 > .sc.urgent{grid-column:span 2;}
  .sc.urgent h3{font-size:24px;} .sc.urgent p{font-size:16.5px;max-width:52ch;}}

/* brick against the teal hero is 1.1:1 — the hero CTA goes near-white instead */
.hero .big-call{background:var(--yellow);color:var(--blue-ink);}
.hero .big-call:hover{background:var(--yellow-deep);color:var(--on-blue);}
/* the closing band is brick; its button inverts to near-white */
.fin{background:var(--blue-deep);}
.fin h2{color:var(--on-blue);}
.fin p{color:var(--on-blue-2);}
.fin .big-call{background:var(--yellow);color:var(--blue-ink);}
.fin .big-call:hover{background:var(--yellow-deep);color:var(--on-blue);}
/* emergency card accent reads brick on the deep panel */
.sc.urgent .ic,.sc.urgent .go{color:var(--yellow-on-dark);}
.sc.urgent:hover{border-color:var(--yellow);}

/* ---------- quote form: honeypot, error, disabled ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.qerr{background:#FDECEA;border:1px solid #C0392B;color:#7B241C;border-radius:var(--r-sm);
  padding:11px 14px;margin:0 0 12px;font-size:14.5px;line-height:1.45;}
.submit[disabled]{opacity:.62;cursor:progress;}
.qdone a{color:var(--yellow-deep);font-weight:700;}