/* ============================================================
   SMITCO BUILDS & SERVICES — Mount Cotton QLD
   Art direction: the drawing. Precision and accuracy, made visible.
   Black, light grey, white. No colour.
   ============================================================ */

:root{
  --ink:#0A0A0B; --ink-2:#111113; --ink-3:#17181A; --ink-4:#202226;
  --line:rgba(242,243,244,.11); --line-2:rgba(242,243,244,.22); --line-3:rgba(242,243,244,.34);
  --paper:#F2F3F4; --paper-2:#B7BBC0; --grey:#83888E; --faint:#565B61;
  --draw:#D8DCE0;            /* drawing linework */
  --dim:#8B9198;             /* dimension lines + witness marks */
  --ease:cubic-bezier(.2,.7,.25,1);
  --nav-h:68px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:'Archivo',system-ui,sans-serif;background:var(--ink);color:var(--paper);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3{font-weight:600;letter-spacing:-.035em;line-height:1.03;}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;}
a{color:inherit;} img{display:block;max-width:100%;}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px;}
.lead{font-size:clamp(16px,1.85vw,19px);color:var(--paper-2);line-height:1.72;max-width:62ch;}
h2{font-size:clamp(30px,4.6vw,54px);margin-bottom:18px;max-width:19ch;}
section{position:relative;} section[id]{scroll-margin-top:92px;}
:focus-visible{outline:2px solid var(--paper);outline-offset:3px;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--paper);color:var(--ink);padding:13px 20px;font-weight:700;}
.skip:focus{left:0;}

/* the drafting grid — the motif, carried on every page */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(242,243,244,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(242,243,244,.028) 1px,transparent 1px);
  background-size:44px 44px;}
main,nav,footer{position:relative;z-index:1;}

/* eyebrow reads like a drawing callout */
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin-bottom:18px;display:flex;align-items:center;gap:11px;}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--dim);}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:14px 0;transition:.35s var(--ease);border-bottom:1px solid transparent;}
.nav.solid{background:rgba(10,10,11,.9);backdrop-filter:blur(14px);border-bottom-color:var(--line);padding:9px 0;}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;}
.logo{display:flex;align-items:center;text-decoration:none;min-width:0;flex-shrink:0;}
.logo img{width:auto;height:46px;transition:height .35s var(--ease),filter .35s var(--ease);
          filter:drop-shadow(0 1px 10px rgba(0,0,0,.6));}
.nav.solid .logo img{height:38px;}
@media(max-width:520px){.logo img{height:38px;} .nav.solid .logo img{height:33px;}}
.tabs{display:flex;gap:1px;}
.tabs a{font-size:13.5px;font-weight:500;text-decoration:none;color:var(--paper-2);padding:9px 14px;transition:.25s;position:relative;}
.tabs a::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:1px;background:var(--paper);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
.tabs a:hover{color:var(--paper);} .tabs a:hover::after{transform:scaleX(1);}
.tabs a[aria-current="page"]{color:var(--paper);} .tabs a[aria-current="page"]::after{transform:scaleX(1);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;padding:12px 22px;font-size:13.5px;font-weight:600;text-decoration:none;border:none;cursor:pointer;font-family:inherit;transition:.28s var(--ease);}
.btn-solid{background:var(--paper);color:var(--ink);}
.btn-solid:hover{background:#fff;transform:translateY(-1px);}
.btn-line{background:transparent;color:var(--paper);border:1px solid var(--line-2);}
.btn-line:hover{border-color:var(--paper);}
.btn-dark{background:var(--ink);color:var(--paper);}
.btn-dark:hover{background:var(--ink-3);}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;position:relative;z-index:210;}
.burger span{display:block;width:21px;height:1.5px;background:var(--paper);margin:5px 0;transition:.3s;}
.burger.x span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger.x span:nth-child(2){opacity:0;}
.burger.x span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.mmenu{position:fixed;inset:0;z-index:195;background:var(--ink-2);display:flex;flex-direction:column;justify-content:center;gap:0;padding:0 28px;}
.mmenu[hidden]{display:none;}
.mmenu a{font-size:31px;font-weight:600;letter-spacing:-.03em;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--line);}
.mmenu a[aria-current="page"]{color:var(--grey);}
.mmenu a.btn{font-size:14px;border-bottom:none;margin-top:22px;align-self:flex-start;}

/* ---------- HERO / PAGE HEAD ---------- */
.hero{min-height:100svh;display:flex;align-items:center;padding:calc(var(--nav-h) + 56px) 0 64px;}
.hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:center;width:100%;}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:44px;}}
.hero h1{font-size:clamp(40px,5.4vw,68px);max-width:13ch;}
.hero .sub{margin-top:24px;font-size:clamp(16px,1.95vw,20px);color:var(--paper-2);max-width:46ch;line-height:1.66;}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px;}
.hero-strip{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;border-top:1px solid var(--line);}
.hero-strip div{padding:18px 18px 0 0;border-right:1px solid var(--line);}
@media(max-width:620px){.hero-strip{grid-template-columns:1fr;}.hero-strip div{border-right:none;border-bottom:1px solid var(--line);padding-bottom:14px;}}
.hero-strip div:last-child{border-right:none;}
.hero-strip .v{font-size:15.5px;font-weight:600;line-height:1.25;}
.hero-strip .k{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:5px;}

.phead{padding:calc(var(--nav-h) + 74px) 0 60px;border-bottom:1px solid var(--line);}
.phead h1{font-size:clamp(38px,6.2vw,72px);max-width:16ch;}
.phead .lead{margin-top:18px;}
.crumb{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin-bottom:16px;}

.sec{padding:clamp(68px,8vw,110px) 0;}
.sec-head{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:end;margin-bottom:48px;}
@media(max-width:900px){.sec-head{grid-template-columns:1fr;gap:18px;}}
.rule{height:1px;background:var(--line);}

/* ---------- THE DRAWING (signature) ---------- */
.dwg{background:var(--ink-2);border:1px solid var(--line);position:relative;padding:24px 26px;}
.dwg::before,.dwg::after{content:'';position:absolute;width:9px;height:9px;border:1px solid var(--line-2);}
.dwg::before{top:9px;left:9px;border-right:none;border-bottom:none;}
.dwg::after{bottom:9px;right:9px;border-left:none;border-top:none;}
.dwg svg{width:100%;height:auto;display:block;overflow:visible;}
.dwg-title{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--line);}
.dwg-foot{display:flex;justify-content:space-between;gap:14px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--faint);letter-spacing:.1em;padding-top:14px;margin-top:10px;border-top:1px solid var(--line);flex-wrap:wrap;}
/* linework */
.ln{stroke:var(--draw);stroke-width:1.4;fill:none;stroke-linecap:square;}
.ln-f{fill:rgba(216,220,224,.07);stroke:var(--draw);stroke-width:1.2;}
.ln-thin{stroke:var(--draw);stroke-width:.8;fill:none;}
.dimline{stroke:var(--dim);stroke-width:.8;fill:none;}
.witness{stroke:var(--dim);stroke-width:.6;stroke-dasharray:3 3;}
.dimtxt{fill:var(--dim);font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.06em;}
.calltxt{fill:var(--paper-2);font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;}
.ground{stroke:var(--dim);stroke-width:1;}
.hatch{fill:url(#hatchPat);}

/* spec list beside the drawing */
.spec{border-top:1px solid var(--line);}
.spec-row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px;}
.spec-row span{color:var(--paper-2);}
.spec-row b{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:500;letter-spacing:.04em;}

/* ---------- SERVICE / CONTENT BLOCKS ---------- */
.svc{display:grid;grid-template-columns:44px 1fr auto;gap:24px;align-items:start;padding:30px 0;border-bottom:1px solid var(--line);transition:.3s var(--ease);}
.svc:first-of-type{border-top:1px solid var(--line);}
.svc:hover{background:rgba(242,243,244,.02);}
.svc .num{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--grey);padding-top:6px;letter-spacing:.06em;}
.svc h3{font-size:clamp(21px,2.6vw,30px);margin-bottom:8px;}
.svc p{font-size:15px;color:var(--paper-2);max-width:62ch;line-height:1.7;}
.svc .tag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--paper);padding:4px 9px;white-space:nowrap;align-self:center;}
.svc .tag.ghost{background:transparent;color:var(--grey);border:1px solid var(--line-2);}
@media(max-width:760px){.svc{grid-template-columns:1fr;gap:10px;}.svc .tag{justify-self:start;}}

.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
@media(max-width:900px){.cols{grid-template-columns:1fr;}}
.pane{background:var(--ink);padding:32px 30px;}
.pane .n{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--grey);letter-spacing:.16em;margin-bottom:15px;}
.pane h3{font-size:20px;margin-bottom:9px;}
.pane p{font-size:14.5px;color:var(--paper-2);line-height:1.7;}

.steps{border:1px solid var(--line);}
.step{display:grid;grid-template-columns:52px 1fr;gap:22px;padding:26px 30px;border-bottom:1px solid var(--line);}
.step:last-child{border-bottom:none;}
.step .sn{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--grey);padding-top:3px;}
.step h3{font-size:19px;margin-bottom:6px;}
.step p{font-size:14.5px;color:var(--paper-2);line-height:1.7;max-width:64ch;}
@media(max-width:620px){.step{grid-template-columns:1fr;gap:8px;padding:22px;}}

/* ---------- WORK GALLERY (structured placeholders) ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.gal{grid-template-columns:1fr;}}
.job{border:1px solid var(--line);background:var(--ink-2);display:flex;flex-direction:column;transition:.35s var(--ease);}
.job:hover{border-color:var(--line-2);transform:translateY(-3px);}
.slot{aspect-ratio:4/3;position:relative;border-bottom:1px solid var(--line);overflow:hidden;background:var(--ink-3);}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.slot .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;}
.slot .ph svg{opacity:.4;}
.slot .ph span{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}
.job-body{padding:18px 20px 20px;}
.job-body .k{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:7px;}
.job-body h3{font-size:17px;margin-bottom:6px;}
.job-body p{font-size:13.5px;color:var(--paper-2);line-height:1.6;}

/* ---------- FORM (on every page) ---------- */
.qform{background:var(--ink-2);border:1px solid var(--line);padding:clamp(26px,3.4vw,38px);}
.qform h3{font-size:23px;margin-bottom:6px;}
.qform>p{font-size:13.5px;color:var(--grey);margin-bottom:22px;}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:560px){.fgrid{grid-template-columns:1fr;}}
.fld{margin-bottom:12px;}
.fld.full{grid-column:1/-1;}
.fld label{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:6px;}
.fld input,.fld select,.fld textarea{width:100%;font-family:inherit;font-size:14.5px;color:var(--paper);background:var(--ink);border:1px solid var(--line-2);padding:12px 13px;transition:.25s;border-radius:0;}
.fld textarea{min-height:96px;resize:vertical;}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--paper);}
.qform .btn{width:100%;margin-top:6px;}
.fnote{font-size:11.5px;color:var(--grey);margin-top:13px;line-height:1.6;}
.two{display:grid;grid-template-columns:1fr 430px;gap:52px;align-items:start;}
@media(max-width:1000px){.two{grid-template-columns:1fr;gap:34px;}}

.ticks{list-style:none;}
.ticks li{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--paper-2);}
.ticks li:last-child{border-bottom:none;}
.ticks svg{flex-shrink:0;margin-top:5px;}

/* ---------- ESTIMATE STUB ---------- */
.stub{border:1px dashed var(--line-2);background:var(--ink-2);padding:clamp(30px,4vw,52px);text-align:center;}
.stub .badge{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:var(--paper);padding:6px 13px;margin-bottom:20px;}
.stub h2{margin:0 auto 14px;max-width:22ch;}
.stub p{color:var(--paper-2);max-width:56ch;margin:0 auto;font-size:16px;}
.stub-fields{max-width:520px;margin:32px auto 0;text-align:left;opacity:.42;pointer-events:none;}

/* ---------- CTA + FOOTER ---------- */
.ctastrip{padding:70px 0;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-2);}
.ctastrip h2{margin:0 auto 14px;max-width:20ch;}
.ctastrip p{color:var(--paper-2);max-width:54ch;margin:0 auto 26px;font-size:16px;}
.ctastrip .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.foot{padding:58px 0 32px;font-size:14px;color:var(--paper-2);}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:38px;padding-bottom:34px;border-bottom:1px solid var(--line);}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px;}}
.foot h4{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-bottom:15px;font-weight:400;}
.foot a{color:var(--paper-2);text-decoration:none;display:block;padding:4px 0;transition:.25s;}
.foot a:hover{color:var(--paper);}
.foot-base{padding-top:22px;font-size:11.5px;color:var(--faint);line-height:1.8;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;}

.rise{opacity:1;transform:none;}
@media(max-width:960px){.tabs{display:none;}.burger{display:block;}.nav .btn-solid{display:none;}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}


/* ============================================================
   FENCING ESTIMATOR — mobile first
   ============================================================ */
.est{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);}
.est-controls{padding:26px 24px;}
.est-block{padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--line);}
.est-block:last-child{padding-bottom:0;margin-bottom:0;border-bottom:none;}
.est-label{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:14px;}
.est-label .opt{color:var(--faint);letter-spacing:.06em;}
.est-numrow{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;}
.est-num{width:132px;font-family:'IBM Plex Mono',monospace;font-size:clamp(38px,9vw,52px);font-weight:500;letter-spacing:-.03em;
  color:var(--paper);background:transparent;border:none;border-bottom:1px solid var(--line-2);padding:0 0 6px;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield;}
.est-num::-webkit-outer-spin-button,.est-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.est-num:focus{outline:none;border-bottom-color:var(--paper);}
.est-unit{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--grey);letter-spacing:.1em;}
.est-range{width:100%;-webkit-appearance:none;appearance:none;height:2px;background:var(--line-2);outline:none;margin:8px 0 10px;}
.est-range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;background:var(--paper);cursor:pointer;border:6px solid var(--ink);box-shadow:0 0 0 1px var(--line-2);}
.est-range::-moz-range-thumb{width:30px;height:30px;background:var(--paper);cursor:pointer;border:6px solid var(--ink);box-shadow:0 0 0 1px var(--line-2);}
.est-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--paper);}
.est-scale{display:flex;justify-content:space-between;font-size:10px;color:var(--faint);letter-spacing:.1em;}
.est-help{font-size:12.5px;color:var(--grey);margin-top:12px;line-height:1.6;}
.est-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
@media(max-width:900px){.est-cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:430px){.est-cards{grid-template-columns:1fr;}}
.matcard{background:var(--ink-2);border:1px solid var(--line-2);padding:18px 16px 14px;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:5px;transition:.25s var(--ease);font-family:inherit;color:var(--paper);}
.matcard:hover{border-color:var(--line-3);}
.matcard[aria-checked="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.matcard[aria-checked="true"] .ln-thin{stroke:var(--ink);}

.mat-name{font-size:14.5px;font-weight:600;letter-spacing:-.015em;line-height:1.22;display:block;}
.mat-note{display:block;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
          color:var(--grey);margin-top:5px;}
.matcard[aria-checked="true"] .mat-note{color:rgba(10,10,11,.55);}
.matcard svg{width:100%;height:44px;margin-top:10px;opacity:.75;}
.est-text{width:100%;font-family:inherit;font-size:15px;color:var(--paper);background:var(--ink);border:1px solid var(--line-2);padding:12px 13px;}
.est-text:focus{outline:none;border-color:var(--paper);}

.est-out{background:var(--paper);color:var(--ink);padding:28px 24px 30px;border-top:1px solid var(--line);}
.est-cap{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#6A6E73;margin-bottom:10px;}
.est-range-val{font-family:'IBM Plex Mono',monospace;font-size:clamp(30px,7.6vw,46px);font-weight:500;letter-spacing:-.035em;line-height:1.04;font-variant-numeric:tabular-nums;}
.est-sub{font-size:12px;color:#6A6E73;margin-top:9px;letter-spacing:.06em;}
.est-out-in.is-other .est-range-val{font-size:clamp(24px,5.4vw,34px);color:#3A3D42;}
.est-disclaimer{font-size:13.5px;line-height:1.68;color:#3A3D42;margin-top:20px;padding-top:18px;border-top:1px solid rgba(10,10,11,.14);}
.est-cta{width:100%;margin-top:20px;background:var(--ink);color:var(--paper);}
.est-cta:hover{background:#000;}
.est-credit{font-size:12.5px;color:#6A6E73;margin-top:12px;line-height:1.6;}

.est-other{margin-top:26px;border:1px solid var(--line);padding:22px 24px;}
.est-other-lab{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:13px;}
.est-other-btns{display:flex;gap:8px;flex-wrap:wrap;}
.othbtn{background:transparent;border:1px solid var(--line-2);color:var(--paper-2);font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.04em;padding:9px 14px;cursor:pointer;transition:.25s;}
.othbtn:hover{border-color:var(--paper);color:var(--paper);}
.othbtn[aria-pressed="true"]{background:var(--paper);border-color:var(--paper);color:var(--ink);}
.est-other-note{font-size:13px;color:var(--grey);line-height:1.7;margin-top:15px;max-width:74ch;}

@media(min-width:860px){
  .est{grid-template-columns:1.15fr .85fr;}
  .est-controls{padding:34px 34px;}
  .est-out{border-top:none;border-left:1px solid var(--line);padding:34px 32px;display:flex;align-items:center;}
  .est-out-in{width:100%;}
  .est-cta{width:auto;padding-left:30px;padding-right:30px;}
}


/* estimator sitting in the home hero — always single column, tighter */
.est--hero{grid-template-columns:1fr;background:var(--ink-2);}
.est--hero .est-controls{padding:24px 22px;}
.est--hero .est-block{padding-bottom:20px;margin-bottom:20px;}
.est--hero .est-num{font-size:clamp(34px,7vw,42px);width:112px;}
.est--hero .matcard svg{height:34px;}
.est--hero .est-out{border-left:none;border-top:1px solid var(--line);padding:24px 22px 26px;display:block;}
.est--hero .est-range-val{font-size:clamp(28px,6vw,38px);}
.est--hero .est-cta{width:100%;}
.est--hero .est-block:last-child{display:none;}   /* suburb lives in the form on this page */


/* ============================================================
   PHOTOGRAPHY — Tyrone's own job photos.
   Presented as plates in the same drawing set as Fig. 01:
   thin frame, corner ticks, mono caption bar. The motif carries
   into the photographs rather than sitting next to them.
   ============================================================ */

/* --- hero photograph ---
   The photo gets the whole band. Text sits on the dark left third and
   on the bottom fade; the right two thirds are left alone so the fence
   is a photograph rather than a texture. The estimator has its own
   section directly underneath. */
.hero{position:relative;overflow:hidden;min-height:min(88svh,760px);
      align-items:flex-end;padding:calc(var(--nav-h) + 130px) 0 44px;}
.hero-ph{position:absolute;inset:0;z-index:0;}
.hero-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;}
.hero-ph::after{content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,10,11,.70) 0%,rgba(10,10,11,.06) 22%,rgba(10,10,11,.20) 52%,rgba(10,10,11,.93) 100%),
    linear-gradient(90deg,rgba(10,10,11,.93) 0%,rgba(10,10,11,.76) 30%,rgba(10,10,11,.26) 62%,rgba(10,10,11,.34) 100%);}
.hero .wrap{position:relative;z-index:2;}
.hero-copy{max-width:640px;}
.hero .hero-strip{max-width:820px;}
.hero-plate{position:absolute;right:28px;bottom:20px;z-index:2;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);display:flex;align-items:center;gap:10px;}
.hero-plate::before{content:'';width:20px;height:1px;background:var(--dim);opacity:.7;}
/* On a phone the copy runs the full width, so it sits over the bright
   part of the photograph. The scrim has to carry the whole frame here,
   not just the left third. */
@media(max-width:900px){
  .hero{min-height:min(84svh,700px);padding:calc(var(--nav-h) + 96px) 0 38px;}
  .hero-ph::after{background:
    linear-gradient(180deg,rgba(10,10,11,.74) 0%,rgba(10,10,11,.56) 22%,rgba(10,10,11,.72) 46%,rgba(10,10,11,.90) 74%,rgba(10,10,11,.98) 100%);}
  .hero-plate{display:none;}
}

/* --- the plate --- */
.plate{position:relative;background:var(--ink-2);border:1px solid var(--line);
       transition:border-color .4s var(--ease);}
.plate:hover{border-color:var(--line-2);}
.plate::before,.plate::after{content:'';position:absolute;width:9px;height:9px;
  border:1px solid var(--line-2);z-index:3;pointer-events:none;}
.plate::before{top:8px;left:8px;border-right:none;border-bottom:none;}
.plate::after{bottom:8px;right:8px;border-left:none;border-top:none;}
.plate-img{position:relative;overflow:hidden;background:var(--ink-3);}
.plate-img img{width:100%;height:auto;display:block;transition:transform .8s var(--ease);}
.plate:hover .plate-img img{transform:scale(1.03);}
.plate-cap{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:13px 15px 12px;border-top:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--faint);}
.plate-cap b{font-weight:500;color:var(--paper-2);letter-spacing:.13em;}
.plate-note{padding:0 15px 17px;font-size:13.5px;color:var(--paper-2);line-height:1.62;}

/* fixed-ratio variant, for rows where the plates must line up */
.plate--fix .plate-img{aspect-ratio:4/5;}
.plate--fix .plate-img img{position:absolute;inset:0;height:100%;object-fit:cover;}
.plate--wide .plate-img{aspect-ratio:4/3;}
.plate--wide .plate-img img{position:absolute;inset:0;height:100%;object-fit:cover;}

/* --- masonry: mixed portrait and landscape with no dead space --- */
.plates{columns:3;column-gap:16px;}
.plates > .plate{break-inside:avoid;-webkit-column-break-inside:avoid;
                 margin:0 0 16px;display:inline-block;width:100%;}
@media(max-width:1000px){.plates{columns:2;}}
@media(max-width:620px){.plates{columns:1;}}

/* --- fixed rows --- */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:900px){.figs{grid-template-columns:1fr;}}
.figs-2{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;align-items:start;}
@media(max-width:900px){.figs-2{grid-template-columns:1fr;}}

/* --- the honest gap: services with no photo yet --- */
.nophoto{border:1px solid var(--line);border-left:1px solid var(--line-2);
  background:var(--ink-2);padding:30px 32px;margin-top:34px;}
.nophoto .k{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);margin-bottom:14px;}
.nophoto h3{font-size:clamp(20px,2.6vw,27px);margin-bottom:12px;max-width:24ch;}
.nophoto p{font-size:14.5px;color:var(--paper-2);line-height:1.72;max-width:72ch;}
.nophoto p + p{margin-top:12px;}


/* ============================================================
   BRAND LAYER — the chrome
   The logo is a machined silver badge on black. Nothing else on
   the site knew that. These are the pieces that let the badge and
   the site read as one object rather than a logo dropped on a
   page: a metallic ramp for rules and marks, a heavier section
   rhythm, and sheet numbering carried down the page.
   ============================================================ */

:root{
  /* the chrome ramp, sampled off the badge itself */
  --chrome: linear-gradient(100deg,#6E7378 0%,#C9CDD1 18%,#FFFFFF 34%,
                            #9AA0A6 52%,#EDEFF1 70%,#7C8186 88%,#B9BDC2 100%);
  --chrome-dim: linear-gradient(100deg,rgba(110,115,120,.5) 0%,rgba(201,205,209,.5) 20%,
                            rgba(255,255,255,.55) 38%,rgba(154,160,166,.4) 60%,
                            rgba(185,189,194,.45) 100%);
}

/* a machined rule — replaces a flat 1px line where it should feel like an edge */
.rule-chrome{height:1px;border:0;background:var(--chrome-dim);opacity:.75;}

/* the eyebrow tick becomes chrome */
.eyebrow::before{background:var(--chrome);opacity:.85;}

/* section headings get a hairline chrome edge above them */
.sec-head{position:relative;}
.sec-head::before{content:'';position:absolute;top:-26px;left:0;width:78px;height:1px;
  background:var(--chrome);opacity:.7;}
@media(max-width:900px){.sec-head::before{top:-18px;}}

/* ---------- SECTION RHYTHM ----------
   A single flat background for eleven sections reads as one long
   scroll with nothing in it. Alternating bands give the page a
   pulse, and the hairline between them reads as a sheet edge. */
.band{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.band-2{background:linear-gradient(180deg,var(--ink) 0%,#0D0E10 50%,var(--ink) 100%);}

/* ---------- SHEET NUMBERING ----------
   Every major section is a sheet in the set. Sits in the left
   margin on wide screens, out of the way and impossible to miss
   once you notice it. Hidden where there is no margin to spare. */
section[data-sheet]::before{
  content:attr(data-sheet);
  position:absolute;left:calc((100vw - 1296px) / 2);top:clamp(70px,8vw,116px);
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap;
  writing-mode:vertical-rl;pointer-events:none;user-select:none;z-index:2;}
section[data-sheet]::after{
  content:'';position:absolute;left:calc((100vw - 1296px) / 2 + 5px);
  top:calc(clamp(70px,8vw,116px) + 132px);width:1px;height:54px;
  background:var(--chrome-dim);opacity:.55;pointer-events:none;}
@media(max-width:1460px){section[data-sheet]::before,section[data-sheet]::after{display:none;}}

/* ---------- FOOTER LOGO ---------- */
.foot-logo{width:min(230px,68%);height:auto;margin-bottom:20px;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.7));}

/* ---------- HERO BADGE ----------
   The mark sits above the headline, small, like a stamp on a
   drawing sheet. Not a second logo — a maker's mark. */
.hero-badge{width:132px;height:auto;margin-bottom:26px;opacity:.96;
  filter:drop-shadow(0 2px 16px rgba(0,0,0,.85));}
@media(max-width:900px){.hero-badge{width:108px;margin-bottom:20px;}}

/* ---------- HONEYPOT ----------
   Hidden from people and from assistive tech, present for bots.
   Deliberately NOT display:none — some bots skip those. */
.hp-field{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important;}

/* ---------- ESTIMATOR CARDS, SEVEN UP ---------- */
.matcard{display:flex;flex-direction:column;justify-content:flex-end;min-height:118px;}
.est-cards .matcard:last-child{grid-column:1 / -1;min-height:96px;}
.est-cards .matcard:last-child svg{height:26px;}
@media(max-width:430px){.est-cards .matcard:last-child{grid-column:auto;}}
.matcard svg{width:100%;height:34px;margin:0 0 12px;opacity:.7;order:-1;}
.matcard[aria-checked="true"] svg{opacity:1;}

/* ---------- SERVICE ROWS, A LITTLE MORE LIFE ---------- */
.svc{position:relative;overflow:hidden;}
.svc::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--chrome);opacity:0;transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease),opacity .35s;}
.svc:hover::after{opacity:.8;transform:scaleX(1);}

/* ---------- PLATE HOVER, SHARPER ---------- */
.plate{transition:border-color .4s var(--ease),transform .4s var(--ease);}
.plate:hover{transform:translateY(-2px);}
.plate-cap b{background:var(--chrome);-webkit-background-clip:text;background-clip:text;
  color:transparent;}

/* ---------- STAT / CREDENTIAL BAND ---------- */
.creds{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);}
@media(max-width:860px){.creds{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.creds{grid-template-columns:1fr;}}
.cred{background:var(--ink);padding:26px 24px;}
.cred .n{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin-bottom:12px;}
.cred .v{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.28;}
.cred p{font-size:13px;color:var(--grey);line-height:1.62;margin-top:7px;}


/* ============================================================
   ESTIMATOR TERMS + THE TWO QUOTE PATHS   (6 Aug 2026)

   Anti-slop law 7: any figure a customer might rely on carries a
   visible disclaimer. The terms sit DIRECTLY under the calculator,
   not in a footer, so nobody scrolls past the number to find them.
   ============================================================ */

.est-terms{margin-top:16px;border:1px solid var(--line);border-left:1px solid var(--line-2);
  background:var(--ink-2);padding:24px 26px;}
.est-terms-lab{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey);margin-bottom:16px;}
.est-terms-list{list-style:none;counter-reset:t;display:grid;gap:13px;}
.est-terms-list li{counter-increment:t;position:relative;padding-left:34px;
  font-size:14px;line-height:1.68;color:var(--paper-2);max-width:88ch;}
.est-terms-list li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;color:var(--faint);}
.est-terms-list b{color:var(--paper);font-weight:600;}
@media(max-width:560px){.est-terms{padding:20px 18px;}}

/* --- two paths, equal weight. Neither is the fallback. --- */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;}
@media(max-width:900px){.paths{grid-template-columns:1fr;}}
.path{border:1px solid var(--line);background:var(--ink-2);padding:28px 28px 30px;
  display:flex;flex-direction:column;position:relative;}
.path::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--chrome);opacity:.55;}
.path-head{margin-bottom:16px;}
.path-n{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin-bottom:10px;}
.path h3{font-size:clamp(20px,2.5vw,26px);letter-spacing:-.03em;}
.path-price{font-size:15px;color:var(--paper-2);margin-bottom:14px;
  padding-bottom:14px;border-bottom:1px solid var(--line);}
.path-price b{font-family:'IBM Plex Mono',monospace;font-size:21px;font-weight:500;
  color:var(--paper);letter-spacing:-.02em;margin-right:8px;}
.path-price span{font-size:13.5px;color:var(--grey);}
.path > p{font-size:14px;line-height:1.7;color:var(--paper-2);}
.path-list{list-style:none;margin:16px 0 0;display:grid;gap:9px;}
.path-list li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.6;
  color:var(--paper-2);}
.path-list li::before{content:'';position:absolute;left:0;top:9px;width:8px;height:1px;
  background:var(--dim);}
.path-warn{margin-top:18px;padding:16px 18px;background:var(--ink);
  border:1px solid var(--line);border-left:2px solid var(--line-3);
  font-size:13px;line-height:1.68;color:var(--paper-2);}
.path-warn b{color:var(--paper);}
.path-cta{margin-top:auto;align-self:flex-start;margin-top:22px;}
@media(max-width:560px){.path{padding:22px 20px 24px;}.path-cta{width:100%;}}

/* --- hero fallback: an intentional gradient behind the photo, so a
       missing file never shows a broken image. Pipeline §6.3. --- */
.hero-ph::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(150deg,#23262A 0%,#15171A 46%,#0A0A0B 100%);}