/* Layout: one left-aligned column. The hero pairs the headline with a plan-view drawing of a 12-lot street.
   Orange is the underground utility colour code for communications conduit, so it marks conduit and pits only. */
:root{
  --bg:#F2F6F9;
  --surface:#FFFFFF;
  --ink:#0E2233;
  --muted:#516476;
  --line:#D3DDE5;
  --line-strong:#A5B6C4;
  --blue:#1B5FA8;
  --on-blue:#FFFFFF;
  --signal:#E5680C;
  --road:#E2E9EF;
  --lot:#FAFCFD;
  --house:#D9E4EC;
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --font-data:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1823;
    --surface:#112331;
    --ink:#E5EEF5;
    --muted:#94A8B8;
    --line:#223646;
    --line-strong:#3D5569;
    --blue:#62AEE8;
    --on-blue:#06141F;
    --signal:#FF8F3F;
    --road:#152A39;
    --lot:#0E1E2A;
    --house:#1B3446;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B1823;
    --surface:#112331;
    --ink:#E5EEF5;
    --muted:#94A8B8;
    --line:#223646;
    --line-strong:#3D5569;
    --blue:#62AEE8;
    --on-blue:#06141F;
    --signal:#FF8F3F;
    --road:#152A39;
    --lot:#0E1E2A;
    --house:#1B3446;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}

/* Header */
.site-header{border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:12px}
.brand{display:block;line-height:0}
.brand img{height:52px;width:auto;display:block}
.site-nav{display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px}
.site-nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:.95rem}
.site-nav a:hover{color:var(--blue)}
.site-nav a.btn{color:var(--on-blue)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue);color:var(--on-blue);
  font:600 1rem/1 var(--font-body);
  padding:15px 24px;border:0;border-radius:4px;text-decoration:none;cursor:pointer;
}
.btn:hover{filter:brightness(1.1)}
.btn-small{padding:10px 16px;font-size:.9rem}

/* Hero */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,64px);
  align-items:center;
  padding-block:clamp(36px,6vw,80px);
}
h1,h2{font-family:var(--font-display);font-stretch:112%;text-wrap:balance;margin:0}
h1{
  font-weight:800;
  font-size:clamp(2.1rem,5vw,3.6rem);
  line-height:1.05;
  letter-spacing:-.015em;
  margin-bottom:20px;
}
.lede{font-size:1.15rem;max-width:34em;margin:0 0 28px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.text-link{font-weight:600;text-underline-offset:4px}
.plan{margin:0;min-width:0}
.plan svg{display:block;width:100%;height:auto;max-width:100%}
.plan figcaption{margin-top:10px;font-size:.85rem;color:var(--muted)}

/* SVG drawing tokens */
.sheet{fill:none;stroke:var(--line-strong);stroke-width:1}
.road{fill:var(--road)}
.kerb{stroke:var(--line-strong);stroke-width:1;fill:none}
.centre{stroke:var(--muted);stroke-width:1;stroke-dasharray:8 6;fill:none;opacity:.7}
.lot{fill:var(--lot);stroke:var(--line-strong);stroke-width:1}
.house{fill:var(--house);stroke:var(--muted);stroke-width:1}
.ridge{stroke:var(--muted);stroke-width:1;opacity:.6}
.conduit{stroke:var(--signal);stroke-width:2.5;fill:none;stroke-linecap:round}
.crossing{stroke:var(--signal);stroke-width:2.5;stroke-dasharray:5 4;fill:none}
.pit{fill:var(--bg);stroke:var(--signal);stroke-width:2}
.t-lot{font:500 12px var(--font-data);fill:var(--muted)}
.t-label{font:500 9px var(--font-data);fill:var(--muted);letter-spacing:.06em}
.t-value{font:700 15px var(--font-display);fill:var(--ink)}
.t-legend{font:400 11px var(--font-data);fill:var(--muted)}
.t-note{font:500 12px var(--font-data);fill:var(--ink)}
.tb{fill:none;stroke:var(--line-strong);stroke-width:1}

/* Accreditation band */
.accred{background:var(--surface);border-block:1px solid var(--line)}
.accred-inner{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;padding-block:22px}
.badge{background:#fff;border-radius:4px;padding:8px 14px;line-height:0}
.badge img{height:54px;width:auto;display:block}
.accred p{margin:0;max-width:36em}
.accred strong{font-family:var(--font-display);font-stretch:108%;font-weight:700}

/* Sections */
.section{padding-block:clamp(48px,8vw,96px)}
.band{background:var(--surface);border-block:1px solid var(--line)}
h2{font-weight:800;font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.12;letter-spacing:-.01em;margin-bottom:16px}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
.split > *{min-width:0}
.split p{margin:0 0 14px;max-width:34em}
.muted{color:var(--muted)}

.reasons{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.reasons li{padding-block:20px;border-bottom:1px solid var(--line)}
.reasons h3{font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:1.2rem;line-height:1.25;margin:0 0 6px}
.reasons p{margin:0;max-width:36em}

/* Steps: pit markers joined by a conduit run */
.steps{
  --gap:clamp(20px,4vw,48px);
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap);
  margin:36px 0 0;padding:0;list-style:none;
}
.steps::before{
  content:"";position:absolute;top:14px;left:15px;
  right:calc((100% - 2 * var(--gap)) / 3 - 15px);
  border-top:2.5px solid var(--signal);
}
.steps li{position:relative;z-index:1;min-width:0}
.steps .n{
  display:grid;place-items:center;
  width:30px;height:30px;margin-bottom:16px;
  background:var(--bg);border:2px solid var(--signal);
  font:500 .8rem/1 var(--font-data);color:var(--ink);
}
.steps h3{font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:1.2rem;line-height:1.25;margin:0 0 6px}
.steps p{margin:0;max-width:26em}

/* NBN process list */
.process{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.process li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 16px;padding-block:18px;border-top:1px solid var(--line)}
.process .pn{
  display:grid;place-items:center;width:30px;height:30px;
  border:2px solid var(--line-strong);color:var(--muted);
  font:500 .8rem/1 var(--font-data);
}
.process .ours .pn{border-color:var(--signal);color:var(--ink)}
.process h3{font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:1.1rem;line-height:1.3;margin:3px 0 4px}
.process p{margin:0;max-width:34em}
.process .tag{margin-left:8px;font:500 .75rem var(--font-data);color:var(--ink);border:1px solid var(--signal);padding:2px 6px;vertical-align:2px}

/* Pricing */
.price{width:100%;max-width:560px;border-collapse:collapse}
.price caption{text-align:left;padding-bottom:12px;color:var(--muted);font-size:.9rem}
.price th{text-align:left;font:500 .78rem/1.3 var(--font-data);letter-spacing:.05em;color:var(--muted);padding:0 0 10px;border-bottom:1px solid var(--line-strong)}
.price th:last-child,.price td:last-child{text-align:right}
.price td{padding:16px 0;border-bottom:1px solid var(--line)}
.price td:first-child{font:500 1.05rem var(--font-data)}
.price td:last-child{font:700 1.6rem/1 var(--font-display);font-stretch:108%;font-variant-numeric:tabular-nums}
.price-notes{margin-top:20px}
.price-example{margin:18px 0 0;font:400 .92rem/1.5 var(--font-data);color:var(--muted)}

/* Quote form */
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.full{grid-column:1 / -1}
label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px}
.hint{font-weight:400;color:var(--muted)}
input,select,textarea{
  width:100%;font:inherit;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:4px;
  padding:11px 12px;
}
textarea{min-height:120px;resize:vertical}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:22px}
.form-foot p{margin:0;font-size:.9rem;color:var(--muted);max-width:28em}
.form-note{margin:16px 0 0;padding:12px 14px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);font-size:.92rem}
.contact{margin-top:22px}

/* Subpages */
.crumbs{padding-top:20px;font-size:.85rem;color:var(--muted)}
.crumbs a{color:var(--muted)}
.page-head{padding-block:clamp(20px,4vw,44px) clamp(16px,3vw,28px)}
.page-head h1{font-size:clamp(1.9rem,4.2vw,3rem);max-width:20em;margin-bottom:16px}
.page-head .lede{max-width:38em;margin:0}
.updated{margin:16px 0 0;font:400 .82rem/1.4 var(--font-data);color:var(--muted)}
.wrap.prose{padding-bottom:clamp(40px,7vw,80px)}
.prose>*{max-width:44em}
.prose>.price.wide,.prose>.tbl-wrap{max-width:none}
.prose h2{font-size:clamp(1.35rem,2.4vw,1.75rem);margin:44px 0 12px}
.prose h3{font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:1.1rem;line-height:1.3;margin:28px 0 6px}
.prose p,.prose ul,.prose ol{margin:0 0 14px}
.prose li{margin-bottom:6px}
.checklist{list-style:none;padding:0}
.checklist li{position:relative;padding-left:28px}
.checklist li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border:2px solid var(--signal)}
.facts{margin:22px 0;padding:2px 0 2px 18px;border-left:3px solid var(--signal)}
.facts p{margin:0 0 10px}
.facts p:last-child{margin-bottom:0}
.tbl-wrap{overflow-x:auto;max-width:100%}
.price.wide{max-width:none}
.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.services h3{font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:1.3rem;line-height:1.25;margin:0 0 8px}
.services p{margin:0 0 12px;max-width:30em}
.cta-band{background:var(--surface);border-top:1px solid var(--line)}
.cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-block:clamp(32px,6vw,60px)}
.cta-inner h2{margin:0;max-width:18em}
.ext{font-size:.95rem}
.calc{max-width:560px;margin:24px 0;padding:20px;background:var(--surface);border:1px solid var(--line)}
.calc label{margin-bottom:8px}
.calc input{max-width:12em}
.calc dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;margin:20px 0 0}
.calc dt{color:var(--muted);font-size:.92rem}
.calc dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.calc .total{font:700 1.8rem/1.1 var(--font-display);font-stretch:108%}
.calc-note{margin:14px 0 0;font-size:.88rem;color:var(--muted)}
.form-status{margin:16px 0 0;font-size:.95rem}
.thanks{padding-block:clamp(48px,9vw,110px);max-width:36em}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding-block:28px;font-size:.9rem;color:var(--muted)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px}
.foot p{margin:0}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:0;list-style:none}
.foot-links a{color:var(--muted)}

@media (max-width:880px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .split{grid-template-columns:minmax(0,1fr)}
  .services{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .steps{grid-template-columns:minmax(0,1fr);gap:28px}
  .steps::before{display:none}
  .steps li:not(:last-child)::before{
    content:"";position:absolute;left:14px;top:15px;bottom:-28px;
    border-left:2.5px solid var(--signal);
  }
  .steps li{padding-left:50px}
  .steps .n{position:absolute;left:0;top:0;margin:0}
}
@media (max-width:560px){
  .fields{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

.split>.prose>h2:first-child{margin-top:0}
.calc-summary{margin:0 0 18px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--signal);max-width:none}
.calc .btn{display:inline-block;margin-top:16px}

/* Answer-first summary and guide lists */
.answer{border-left:4px solid var(--signal);background:var(--surface);padding:16px 20px;margin-block:8px 28px}
.answer p{margin:0}
.guide-list{list-style:none;margin:0 0 24px;padding:0;border-bottom:1px solid var(--line)}
.guide-list li{padding-block:16px;border-top:1px solid var(--line)}
.guide-list h3{margin:0 0 4px}
.guide-list p{margin:0}
.section .guide-list{max-width:760px}
.data{width:100%;border-collapse:collapse;font-size:.95rem}
.data caption{text-align:left;padding-bottom:12px;color:var(--muted);font-size:.9rem}
.data th{text-align:left;font:500 .78rem/1.3 var(--font-data);letter-spacing:.05em;color:var(--muted);padding:0 12px 10px 0;border-bottom:1px solid var(--line-strong);vertical-align:bottom}
.data td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.data td:first-child{font:500 .95rem var(--font-data);white-space:nowrap}
.data.num td:not(:first-child),.data.num th:not(:first-child){text-align:center;font-variant-numeric:tabular-nums}
.hero-img{margin:0 0 24px}
.hero-img img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.hero-img img.portrait{max-width:520px}
.hero-img figcaption{color:var(--muted);font-size:.9rem;margin-top:8px}
.calc-opts{border:0;padding:0;margin:14px 0 4px}
.calc-opts legend{font-weight:600;margin-bottom:6px}
.opt{display:flex;gap:8px;align-items:flex-start;font-weight:400;margin:4px 0}
.opt input{width:auto;margin-top:4px}
.label{display:block;font-weight:600;margin-bottom:6px}