/* ===========================================================================
   MC CONSTRUCTIONS, instant deck quote landing page.
   Built to web_research/paid-traffic-landing-pages/INSTANT_QUOTE_CALCULATOR_PAGE_GUIDE.md

   PALETTE MECHANISM (guide s11: "constrain the palette by any mechanism"):
   one accent plus opacity. Bronze is the only hue that acts. Navy and ink are
   structure. Green appears once, on success, and nowhere else. Every value is
   declared here and never picked on an element.

   TYPE: one family, Archivo. This is a tool, not an editorial page.
   Micro-label per s11: 11px / .18em / uppercase / 600.
   =========================================================================== */
:root{
  /* brand, from mcconstructionsvic.com.au */
  --navy:#021F59;
  --bronze:#A87E40;
  --gold:#C5A862;
  --bronze-ink:#7A5620;      /* same hue, darkened, AA-safe on paper at label sizes */

  /* neutrals toned off the brand. never pure white on pure black */
  --paper:#FBFAF8;
  --card:#FFFFFF;
  --sand:#F2EFE9;
  --sand-2:#E9E5DD;
  --tint:#FBF6EE;            /* bronze at low opacity, flattened */
  --line:#E2DED6;
  --line-2:#C8C1B4;
  --ink:#191713;
  --ink-2:#4B463D;
  --ink-3:#7A7367;
  --on-navy:#EEF0F6;
  --on-navy-2:#9AA6C4;
  --ok:#1E6B45;
  --bad:#8A2118;

  /* Google's own review amber. Scoped to the rating pill only, and part of the
     same platform-attribution exception as the four-colour G. Nothing else on
     the page may use it. */
  --star-gold:#FBBC04;

  /* the drawn marker colour. rough-notation composites with multiply, so this
     is the flattened value of the gold the CSS fallback paints. one value for
     every highlight on the page, per the one-accent rule above. */
  --mark-draw:#E3D5B4;

  /* 4px scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:56px; --s10:72px; --s11:96px;

  --ease:cubic-bezier(.2,.8,.2,1);
  --gutter:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}

/* ---------------- type ---------------- */
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.1}
h1{
  /* the phone was clamping to the 30px floor because 5.4vw is tiny at 390px.
     Scaled off vw properly so it reads as a headline on a phone, not a label. */
  font-size:clamp(44px,11.2vw,74px);
  line-height:1.02;letter-spacing:-.035em;
}
h2{font-size:clamp(24px,3.4vw,36px)}
h3{font-size:clamp(17px,1.8vw,20px);letter-spacing:-.01em}
p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}
.micro{
  display:block;font-size:11px;line-height:1.4;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;color:var(--bronze-ink);
}
.micro.on-dark{color:var(--gold)}
.lede{font-size:clamp(16px,1.4vw,18px);color:var(--ink-2);max-width:62ch}
.h2-gap{margin:var(--s4) 0 var(--s6)}
.gap-t{margin-top:var(--s4)}
.gap-t2{margin-top:var(--s7)}
.center{text-align:center}
.centered{margin-left:auto;margin-right:auto}
.note{margin-top:var(--s6);color:var(--ink-3)}

/* ---------------- layout ---------------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:780px;margin:0 auto;padding:0 var(--gutter)}
section{padding:var(--s11) 0}
.navy{background:var(--navy);color:var(--on-navy)}
.navy .lede{color:var(--on-navy-2)}
.sandbg{background:var(--sand)}
.hr{height:1px;background:var(--line);border:0;margin:0}

/* ---------------- placeholder-rate banner ---------------- */
.ratebanner{
  background:var(--bronze);color:#fff;font-size:13px;font-weight:500;
  padding:var(--s3) var(--gutter);text-align:center;line-height:1.45;
}

/* ---------------- persistent bar. logo + phone, no nav (guide s4.1) ------- */
.bar{position:sticky;top:0;z-index:30;background:var(--ink);color:#fff}
.bar .in{
  max-width:1180px;margin:0 auto;padding:var(--s3) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
}
.bar img{height:30px;width:auto}
.bar .tel{
  display:block;min-height:44px;text-align:right;text-decoration:none;
  font-weight:700;font-size:17px;color:var(--gold);letter-spacing:-.01em;
}
.bar .tel span{
  display:block;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#A9A296;
}

/* ---------------- hero ---------------- */
/* THE RATING PILL. Opens the page (Eden, 2026-08-19), sized to sit at roughly
   the width the service-area line used to occupy so the first line of the page
   keeps its old proportion.

   ⚠ PALETTE EXCEPTION, on purpose. Every other hue on this page is bronze at
   some opacity. Google's four-colour G is the one thing that is not, because it
   is the platform's own attribution mark and a recoloured G would be both less
   credible and against Google's brand terms. It is 15px, it appears once, and
   it is the only place this exception applies. */
.ratepill{
  display:inline-flex;align-items:center;gap:var(--s2);
  margin:0;padding:5px var(--s3) 5px var(--s2);
  background:var(--card);border:1px solid var(--line-2);border-radius:999px;
  font-size:12.5px;color:var(--ink-2);
  /* line-height 1 so the text's box hugs its glyphs. With the default 1.25 the
     box carried leading above and below, and centring the BOX left the words
     sitting visibly higher than the stars. */
  line-height:1;
}
.ratepill .gmark{width:15px;height:15px;flex:none}
/* Bigger, tighter and a true gold rather than the brand's muted one: Eden,
   2026-08-19. This is inside the same platform-attribution exception the G is:
   a Google rating pill reads as authentic in Google's own review amber, and
   the brand gold looked dull next to the four-colour G.

   The stroke is not an outline. It is the same colour as the fill, so it just
   fattens the shape and rounds the tips off, which is the "less pointy" part.
   The path itself is also blunter, see the note on .stars svg below. */
.ratepill .stars{display:flex;gap:0;flex:none}
.ratepill .stars svg{
  width:18px;height:18px;fill:var(--star-gold);
  stroke:var(--star-gold);stroke-width:1.5;stroke-linejoin:round;
}
.ratepill .ratetext{white-space:nowrap}
/* stepped back off full ink so the stars carry the emphasis, not the words */
.ratepill .ratetext b{font-weight:700;color:var(--ink-2)}
.ratepill .ratetext i{font-style:normal;color:var(--ink-3)}
/* the separator is a real character in the markup, not CSS generated content:
   a backslash-00b7 escape here rendered as mojibake in the browser */
.ratepill .ratetext em{font-style:normal;color:var(--line-2);margin:0 5px}

/* Closes the hero on the last line before the ground turns to sand. Sentence
   case rather than the uppercase micro-label, because these are claims to be
   read, not a label, and tracked uppercase would not fit two of them on a
   390px line. */
.trustline{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  margin:var(--s4) 0 0;font-size:12px;line-height:1.35;color:var(--ink-2);
}
.trustline span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.trustline svg{
  width:13px;height:13px;flex:none;fill:none;
  stroke:var(--bronze);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
}

.hero h1{margin:var(--s4) 0 var(--s6)}
.h-calc{margin-bottom:var(--s7)}
@media(min-width:980px){.h-calc{margin-bottom:0}}
.spec{list-style:none;margin:0 0 var(--s6);padding:0;display:grid;gap:var(--s3)}
.spec li{position:relative;padding-left:26px;font-size:15px;color:var(--ink-2)}
.spec li b{color:var(--ink);font-weight:600}
.spec li::before{
  content:"";position:absolute;left:2px;top:6px;width:11px;height:6px;
  border:2px solid var(--bronze);border-right:0;border-top:0;
  transform:rotate(-45deg);
}

/* proof pair */
.proofs{display:grid;gap:var(--s4);margin-top:var(--s6)}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.ba figure{margin:0;background:var(--card);position:relative}
.ba img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ba .tagm{
  position:absolute;left:0;top:0;background:var(--ink);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:3px var(--s2);
}
.ph{
  aspect-ratio:4/3;display:grid;place-items:center;align-content:center;
  text-align:center;padding:var(--s4);
  background:repeating-linear-gradient(45deg,var(--sand),var(--sand) 10px,var(--sand-2) 10px,var(--sand-2) 20px);
  color:var(--ink-3);font-size:12px;line-height:1.4;font-weight:600;
}
.ph code{font-size:11px;display:block;margin-top:var(--s1);color:var(--ink-2);font-weight:400}
.quotecard{background:var(--card);border:1px solid var(--line);padding:var(--s5)}
.quotecard p{font-size:15px;color:var(--ink);margin-bottom:var(--s3)}
.quotecard .by{font-size:13px;color:var(--ink-3)}
.quotecard .by b{color:var(--ink);font-weight:600}

/* ---------------- the calculator ---------------- */
.calc{background:var(--card);border:1px solid var(--line-2);position:relative}
.calc-head{
  padding:var(--s5) var(--s5) 0;display:flex;justify-content:space-between;
  align-items:baseline;gap:var(--s3);
}
.calc-body{padding:var(--s5);min-height:330px}
.progress{height:3px;background:var(--line);margin:var(--s4) var(--s5) 0}
.progress i{display:block;height:100%;background:var(--bronze);width:0;transition:width .35s var(--ease)}
@media (prefers-reduced-motion:reduce){.progress i{transition:none}}
.qtitle{font-size:clamp(19px,2.1vw,24px);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:var(--s2) 0}
.qhelp{font-size:14px;color:var(--ink-3);margin:0 0 var(--s5)}
.nojs{font-size:15px;color:var(--ink-2)}

/* tiles: real input hidden, selected state in CSS (guide s11) */
.tiles{display:grid;gap:var(--s2)}
.tiles.two{grid-template-columns:1fr 1fr}
.tile{position:relative;display:block}
.tile input{position:absolute;opacity:0;width:0;height:0}
.tile .face{
  display:flex;align-items:center;gap:var(--s3);
  min-height:56px;padding:var(--s3) var(--s4);
  border:1px solid var(--line-2);background:var(--card);
  font-size:16px;font-weight:600;cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.tile .face em{font-style:normal;flex:1;line-height:1.25}
.tile .face small{display:block;font-size:13px;font-weight:400;color:var(--ink-3);margin-top:2px}
.tile:hover .face{border-color:var(--ink-3)}
.tile input:focus-visible + .face{outline:2px solid var(--bronze);outline-offset:2px}
.tile input:checked + .face{border-color:var(--bronze);background:var(--tint);box-shadow:inset 3px 0 0 var(--bronze)}
.tile .ic{
  width:36px;height:36px;flex:none;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--bronze-ink);font-size:11px;font-weight:700;
  background:var(--sand);
}
.calc-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4) var(--s5);border-top:1px solid var(--line);background:var(--card);
}
.back{
  background:none;border:0;color:var(--ink-2);font-size:14px;font-weight:600;
  cursor:pointer;min-height:44px;padding:0 var(--s2);flex:none;
}
.back:hover{color:var(--ink)}
.fud{font-size:13px;color:var(--ink-3);line-height:1.4;text-align:right;max-width:36ch;margin:0}

/* fields */
.field{margin-bottom:var(--s4)}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:var(--s1);color:var(--ink-2)}
.field input{
  width:100%;font-family:inherit;font-size:16px;   /* 16px floor, or iOS zooms */
  padding:var(--s3) var(--s4);min-height:48px;
  border:1px solid var(--line-2);background:var(--card);color:var(--ink);
}
.field input:focus{outline:2px solid var(--bronze);outline-offset:-1px}
.field .why{font-size:12.5px;color:var(--ink-3);margin-top:var(--s1)}
.err{color:var(--bad);font-size:13px;margin-top:var(--s2);display:none;font-weight:600}
.err.show{display:block}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  min-height:52px;padding:0 var(--s7);border:0;cursor:pointer;
  font-size:16px;font-weight:700;letter-spacing:-.01em;text-decoration:none;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.btn-primary{background:var(--bronze);color:#fff;width:100%}
.btn-primary:hover{background:#96702F}
.btn-ghost{background:none;border:1px solid var(--line-2);color:var(--ink);width:100%}
.btn-ghost:hover{border-color:var(--ink)}
.closer-btn{max-width:380px;margin:0 auto}
.callnote{margin-top:var(--s5);font-size:15px;color:var(--ink-2)}
.callnote a{font-weight:700;color:var(--bronze-ink)}

/* ---------------- result screen ---------------- */
.band{background:var(--navy);color:var(--on-navy);padding:var(--s6) var(--s5)}
.range{font-size:clamp(28px,5.6vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.05;margin:var(--s2) 0 0}
.range small{display:block;font-size:13px;font-weight:500;letter-spacing:0;color:var(--on-navy-2);margin-top:var(--s3);line-height:1.5}
.editpanel{padding:var(--s5);border-bottom:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.chip{
  display:inline-flex;flex-direction:column;justify-content:center;gap:2px;
  min-height:44px;padding:var(--s2) var(--s3);
  background:var(--sand);border:1px solid var(--line-2);
  font-size:14px;font-weight:600;cursor:pointer;color:var(--ink);text-align:left;
}
.chip:hover{border-color:var(--bronze);background:var(--tint)}
.chip u{text-decoration:none;color:var(--bronze-ink);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.protect{padding:var(--s5);background:var(--sand);border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2);line-height:1.55}
.protect b{color:var(--ink)}
.cal{padding:var(--s5)}
.requal{font-size:14px;color:var(--ink-2);margin:0 0 var(--s5)}
.days{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:var(--s2);margin-top:var(--s3)}
.day{border:1px solid var(--line-2);background:var(--card);cursor:pointer;padding:var(--s3) var(--s2);text-align:center;min-height:72px;font-family:inherit}
.day b{display:block;font-size:16px}
.day small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.day.sel{border-color:var(--bronze);background:var(--tint);box-shadow:inset 0 -3px 0 var(--bronze)}
.day.full{opacity:.45;cursor:not-allowed}
.day.full small{color:var(--bad)}
.slots{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.slot{border:1px solid var(--line-2);background:var(--card);cursor:pointer;padding:var(--s3) var(--s4);min-height:44px;font-size:15px;font-weight:600;font-family:inherit}
.slot.sel{border-color:var(--bronze);background:var(--tint)}
.oos{padding:var(--s5);background:var(--tint);border:1px solid var(--bronze);margin:var(--s5)}
.oos h3{margin-bottom:var(--s2)}
.oos p{font-size:15px;color:var(--ink-2)}
.done{padding:var(--s8) var(--s5);text-align:center}
.done .tick{width:52px;height:52px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;margin:0 auto var(--s5);font-size:26px;font-weight:700}
.done ul{text-align:left;max-width:44ch;margin:var(--s6) auto 0;padding:0;list-style:none;display:grid;gap:var(--s3)}
.done li{position:relative;padding-left:22px;font-size:15px;color:var(--ink-2)}
.done li::before{content:"";position:absolute;left:0;top:10px;width:10px;height:1px;background:var(--bronze)}

/* ---------------- content blocks ---------------- */
.cards{display:grid;gap:var(--s4)}
.c{background:var(--card);border:1px solid var(--line);padding:var(--s6)}
.c p{font-size:15px;color:var(--ink-2);margin:0}
.c .who{margin-top:var(--s3);color:var(--ink);font-weight:600}
.c .n{
  display:block;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bronze-ink);margin-bottom:var(--s3);
}
.steps{display:grid;gap:var(--s5)}
.step{display:grid;grid-template-columns:44px 1fr;gap:var(--s4);align-items:start}
.step .no{
  width:44px;height:44px;border:1px solid var(--line-2);display:grid;place-items:center;
  font-weight:700;font-size:15px;color:var(--bronze-ink);background:var(--card);
}
.step p{font-size:15px;color:var(--ink-2);margin:var(--s1) 0 0}
.alts{display:grid;gap:var(--s5)}
.alt{border-left:3px solid var(--bronze);padding:var(--s1) 0 var(--s1) var(--s5)}
.alt b{display:block;font-size:16px;margin-bottom:var(--s1)}
.alt p{font-size:15px;color:var(--ink-2);margin:0;max-width:68ch}
.gal{display:grid;gap:var(--s4)}
.gal figure{margin:0}
.gal img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line)}
.gal figcaption{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:var(--s2)}
.faq details{border-bottom:1px solid var(--line);padding:var(--s5) 0}
.faq summary{
  cursor:pointer;font-weight:700;font-size:17px;letter-spacing:-.01em;list-style:none;
  display:flex;justify-content:space-between;gap:var(--s4);min-height:44px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--bronze);font-weight:700;font-size:22px;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:var(--s3) 0 0;font-size:15px;color:var(--ink-2);max-width:68ch}
.creds{display:grid;gap:var(--s4)}

footer{background:var(--ink);color:#A9A296;padding:var(--s10) 0 var(--s6);font-size:14px}
footer img{height:40px;margin-bottom:var(--s5)}
footer a{color:#A9A296}
footer a:hover{color:var(--gold)}
footer .fwide{max-width:54ch}
footer .legal{
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid #2E2A24;
  font-size:12px;display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;
}

/* ---------------- sticky mobile CTA. Guide s11, all four details. -------- */
.sticky{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:25;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to bottom,rgba(251,250,248,0),var(--paper) 40%);
}
.sticky .btn{width:100%}
@media(max-width:760px){
  .sticky{display:block}
  .sticky[hidden]{display:none}
  body{padding-bottom:80px}
}

/* ---------------- reveal. JS-gated, reduced-motion safe. ----------------- */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
}

/* ---------------- breakpoints ---------------- */
@media(min-width:640px){
  .steps{grid-template-columns:repeat(2,1fr);gap:var(--s6)}
  .cards{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:repeat(3,1fr)}
  .creds{grid-template-columns:repeat(2,1fr)}
  .alts{grid-template-columns:1fr 1fr;gap:var(--s6) var(--s7)}
}
@media(min-width:980px){
  /* Desktop puts the calculator in its own column beside everything else.
     Mobile keeps DOM order: headline, calculator, then spec and proof. */

  .cards{grid-template-columns:repeat(3,1fr)}
  .creds{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(3,1fr);gap:var(--s7) var(--s6)}  /* 6 steps, 2 clean rows */
  .step{grid-template-columns:1fr;gap:var(--s3)}
}

/* ---------------- visual tiles (guide s5.2) ------------------------------
   Size and height are scale diagrams, material is his own job photography.
   Two per row on every viewport: one per row wastes the screen and pushes
   the later options under the fold, four per row drops the tap target. */
.tiles.visual{grid-template-columns:1fr 1fr;gap:var(--s2)}
.tile.vis .face{
  flex-direction:column;align-items:stretch;gap:0;
  min-height:0;padding:0;overflow:hidden;
}
.tile.vis .media{
  display:block;background:var(--sand);border-bottom:1px solid var(--line);
  aspect-ratio:4/3;overflow:hidden;
}
.tile.vis .media img{width:100%;height:100%;object-fit:cover}
.tile.vis .media.diagram{display:grid;place-items:center;padding:var(--s2);background:var(--card)}
.tile.vis .media.diagram svg{width:100%;height:100%}
.tile.vis .media.need{
  display:grid;place-items:center;text-align:center;padding:var(--s3);
  font-size:11px;font-weight:600;line-height:1.35;color:var(--ink-3);
  background:repeating-linear-gradient(45deg,var(--sand),var(--sand) 10px,var(--sand-2) 10px,var(--sand-2) 20px);
}
.tile.vis .face em{padding:var(--s3) var(--s3) var(--s4);font-size:15px}
.tile.vis .face em small{font-size:12.5px;line-height:1.4}
.tile.vis input:checked + .face{box-shadow:inset 0 0 0 2px var(--bronze)}
.tile.vis input:checked + .face .media{border-bottom-color:var(--bronze)}

/* extras keep the row shape, with a line glyph instead of a photo */
.tile .ic svg{width:26px;height:24px;display:block}
.tile .ic{background:var(--card)}

/* the suburb step needs to say what is covered BEFORE it asks */
.areahint{
  font-size:13px;color:var(--ink-2);background:var(--sand);
  border-left:3px solid var(--bronze);padding:var(--s3) var(--s4);margin:0 0 var(--s4);
  line-height:1.5;
}
.areahint b{color:var(--ink)}

/* review cards: the attribution sits under the quote, not above it */
.subhead{
  font-size:clamp(16px,1.5vw,19px);color:var(--ink-2);
  margin:0 0 var(--s6);max-width:46ch;line-height:1.5;
}

/* ---------------- step 1: two sliders with a live plan drawing ------------ */
.plan{
  background:var(--card);border:1px solid var(--line);
  padding:var(--s3);margin-bottom:var(--s4);
}
.plan svg{width:100%;height:auto;display:block}
.readout{
  display:flex;align-items:baseline;gap:var(--s2);
  padding:var(--s3) var(--s4);background:var(--sand);
  border-left:3px solid var(--bronze);margin-bottom:var(--s5);
}
.readout b{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.readout span{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.slider{margin-bottom:var(--s5)}
.slider label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:var(--s2);
}
.slider label b{font-size:17px;color:var(--ink);font-weight:700}
.slider input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:44px;background:transparent;cursor:pointer;display:block;
}
.slider input[type=range]:focus{outline:none}
.slider input[type=range]:focus-visible{outline:2px solid var(--bronze);outline-offset:4px}
/* track */
.slider input[type=range]::-webkit-slider-runnable-track{
  height:4px;background:var(--line-2);border-radius:2px;
}
.slider input[type=range]::-moz-range-track{
  height:4px;background:var(--line-2);border-radius:2px;
}
/* thumb: 28px visual, sitting inside a 44px tall control */
.slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:28px;height:28px;border-radius:50%;
  background:var(--bronze);border:3px solid var(--card);
  box-shadow:0 0 0 1px var(--line-2);
  margin-top:-12px;
}
.slider input[type=range]::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;
  background:var(--bronze);border:3px solid var(--card);
  box-shadow:0 0 0 1px var(--line-2);
}

/* review highlights: emphasis is ours, the words are theirs and unedited.
   Scoped to `mark` itself, not to .c, or any quote outside a review card
   falls back to the browser's default highlighter yellow. */
mark{
  background:linear-gradient(to bottom,transparent 58%,rgba(168,126,64,.28) 58%);
  color:inherit;font-weight:600;padding:0 1px;
}
/* Once highlights.js has loaded AND the library is present it adds .rn to
   <html> and takes the flat gradient away, because from that point the marker
   is drawn instead. If either script fails the gradient above still ships, so
   the page is never left with unhighlighted phrases. */
.rn mark{background:none}

/* The scannable heading on each review. Eden, 2026-08-19: the reviews were a
   wall of paragraphs and nothing carried at a glance. Every heading is a
   sentence lifted WORD FOR WORD out of the review printed underneath it, in
   quotes, and the full review is still there unedited. The body's highlight
   moved to a different phrase so the same words are not emphasised twice. */
.rtitle{
  font-size:clamp(18px,2vw,21px);line-height:1.25;letter-spacing:-.02em;
  margin:0 0 var(--s3);max-width:24ch;
}
.cards .c p{font-size:14.5px;color:var(--ink-2);line-height:1.6}

/* the platform mark next to the attribution line */
.gmark-sm{width:12px;height:12px;flex:none;vertical-align:-2px;margin-right:5px}

/* ---------------- review profile pictures --------------------------------
   Guide s4.2 slot 4 wants a named review WITH a photo and the platform named.
   The slot is real: drop a src on the img inside .avatar and the monogram is
   replaced automatically. Until then it shows initials taken from the
   reviewer's actual name, which is honest, rather than a stock face or a
   generic silhouette, which would not be. */
/* ---------------- review card lift ---------------------------------------
   Ported from the R Dhillon & Co home page's "What we do" three-pillar band,
   which Eden pointed at. The mechanism is theirs and it is better than the
   binary hover/not-hover this first shipped as:

   ONE custom property, --glow, from 0 to 1, drives the border tint, a large
   soft halo, the lift and a very slight scale together. On a mouse, :hover
   sets it to 1. On a touch screen there is no hover, so cards.js sets it
   CONTINUOUSLY to how centred the card is in the viewport, which is why the
   phone version reads as a card easing into focus rather than snapping on.

   Under prefers-reduced-motion cards.js sets a flat 0.32 and nothing moves,
   which is also what the Dhillon build does. */
.cards .c{
  --glow:0;
  border-color:color-mix(in srgb,var(--bronze) calc(var(--glow) * 38%),var(--line));
  box-shadow:
    0 1px 3px rgba(25,23,19,.04),
    0 0 52px 2px color-mix(in srgb,rgba(168,126,64,.5) calc(var(--glow) * 55%),transparent);
  transition:box-shadow .35s var(--ease),border-color .35s var(--ease),
             transform .35s var(--ease);
}
/* Transform is handed over only once the entrance reveal has finished, because
   `.js .rv.in{transform:none}` is THREE classes deep and beats anything
   shorter, so the selector below repeats `.c` to reach three as well.
   This trap has bitten twice on this page. What makes it hard to see: the
   shadow and the border DO apply and only the transform loses, so the card
   reacts to hover without moving, which reads as a subtle animation rather
   than a bug. If a lift stops working here, count the classes first. */
.cards .c.c-live{      /* .c twice ON PURPOSE: see the note above */
  transform:translateY(calc(var(--glow) * -9px)) scale(calc(1 + var(--glow) * .014));
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  .cards .c:hover{--glow:1}
}
@media (prefers-reduced-motion:reduce){
  .cards .c,.cards .c.c-live{transition:none;transform:none;will-change:auto}
}

.avatar{
  position:relative;flex:none;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  background:var(--sand);border:1px solid var(--line-2);
}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar img[hidden]{display:none}
.avatar b{
  font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--bronze-ink);
}
.byline{
  display:flex;align-items:center;gap:var(--s3);
  margin-top:auto;padding-top:var(--s5);
}
.byline .who{margin:0;padding:0;color:var(--ink);font-weight:600;font-size:15px}
.c .byline + .n{margin:var(--s2) 0 0}
.quotecard .by{display:flex;align-items:center;gap:var(--s3)}
.quotecard .by small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:1px}

/* a tile that is an opt-out rather than a choice: full width, no media */
.tiles.visual .tile.full{grid-column:1 / -1}
.tile.vis.full .face{flex-direction:row;align-items:center;min-height:56px;padding:var(--s3) var(--s4)}
.tile.vis.full .face em{padding:0;font-size:16px}

/* ---------------- hero: the 30-second claim, and the face ---------------- */
.hl-big{
  /* nowrap so the highlight never splits "30" from "seconds" across a line */
  white-space:nowrap;
  background:linear-gradient(to bottom,transparent 62%,rgba(197,168,98,.45) 62%);
  color:inherit;padding:0 2px;
  /* pull the following full stop back flush; the 2px is highlight bleed, not a space */
  margin-right:-2px;
}
.rn .hl-big{background:none}
.meet{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s3) 0 0;margin:0 0 var(--s6);
}
.meet .face{
  flex:none;width:72px;height:72px;border-radius:50%;overflow:hidden;
  object-fit:cover;object-position:50% 30%;
  background:var(--sand);border:1px solid var(--line-2);
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.meet .facehold{
  flex:none;width:72px;height:72px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;align-content:center;text-align:center;
  font-size:9.5px;font-weight:600;line-height:1.25;color:var(--ink-3);
  background:repeating-linear-gradient(45deg,var(--sand),var(--sand) 7px,var(--sand-2) 7px,var(--sand-2) 14px);
  border:1px solid var(--line-2);padding:var(--s1);
}
.facehold em{display:block;font-style:normal;font-weight:400;font-size:8.5px;opacity:.8}
.meet-txt b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.meet-txt span{display:block;font-size:14px;color:var(--ink-2);line-height:1.45}

/* ---------------- reviews: a real heading ---------------- */
.revhead{margin-top:var(--s9)}
/* The star path is blunter than the usual one everywhere it appears, not just
   in the pill: the golden-ratio inner radius most star glyphs use (~0.38 of the
   outer) is what makes them read as spiky. This one is 0.52, so the points are
   chunkier. One shape on the page, so the pill and the proof block agree. */
.revhead .stars{display:flex;gap:3px;margin-bottom:var(--s3)}
.revhead .stars svg{width:22px;height:22px;fill:var(--bronze)}
.revhead h2{font-size:clamp(24px,3.4vw,36px);margin-bottom:var(--s2)}
.revhead p{font-size:15px;color:var(--ink-2);margin:0}

/* ---------------- credibility band, calm version -------------------------
   Was navy with a striped board texture behind gold icons: busy, and this is
   the block a nervous buyer reads slowest. Now the page's own card system on
   the light ground. The only flourish is a large ghosted numeral behind each
   card, which gives the grid rhythm without adding noise. */
.creds-band{background:var(--sand);border-top:1px solid var(--line)}
.creds{display:grid;gap:var(--s4);counter-reset:cred}
.cred{
  counter-increment:cred;
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--line);
  padding:var(--s6);
  transition:border-color .3s var(--ease);
}
.cred:hover{border-color:var(--line-2)}
.cred::after{
  content:counter(cred,decimal-leading-zero);
  position:absolute;right:-6px;bottom:-22px;
  font-size:74px;font-weight:700;line-height:1;
  color:var(--ink);opacity:.045;pointer-events:none;
}
.cred-ic{display:block;margin-bottom:var(--s4)}
.cred-ic svg{
  width:30px;height:30px;fill:none;
  stroke:var(--bronze);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.cred b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:var(--s2);color:var(--ink)}
.cred-sub{display:block;font-size:14px;color:var(--ink-2);line-height:1.55;max-width:34ch}

/* ---------------- hero, restructured -------------------------------------
   Headline across the top, then Marco full-length against the credibility
   case, then a cue into the calculator. */
.hero{padding:var(--s8) 0 var(--s7)}
.hero-top{max-width:none}
.hero-top .subhead{max-width:44ch}
.hero-split{
  display:grid;gap:var(--s6);align-items:end;
  margin-top:var(--s7);
}
.hero-cred .micro{margin-bottom:var(--s3)}
.cred-name{
  font-size:clamp(20px,2.6vw,28px);line-height:1.15;margin:0 0 var(--s4);
  letter-spacing:-.02em;max-width:18ch;
}
.cred-lede{font-size:15.5px;color:var(--ink-2);line-height:1.6;margin:0 0 var(--s5);max-width:46ch}
.hero-cred .spec{margin:0}

/* the figure. Sits on a warm ground so a transparent cut-out has something
   to stand on, with a soft ellipse under him instead of a hard edge. */
.hero-figure{
  margin:0;position:relative;align-self:end;
  display:flex;flex-direction:column;align-items:center;
}
.hero-figure::before{
  content:"";position:absolute;left:50%;bottom:52px;transform:translateX(-50%);
  width:min(320px,82%);height:min(320px,82%);border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(168,126,64,.20),rgba(168,126,64,0) 68%);
}
.hero-figure img{
  position:relative;width:100%;max-width:340px;height:auto;
  display:block;
}
.hero-figure figcaption{
  position:relative;margin-top:var(--s3);text-align:center;
  padding-top:var(--s3);border-top:1px solid var(--line);width:min(340px,100%);
}
.hero-figure figcaption b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em}
.hero-figure figcaption span{display:block;font-size:12.5px;color:var(--ink-3)}

/* scroll cue */
.scrollcue{
  display:inline-flex;align-items:center;gap:var(--s3);
  margin-top:var(--s7);min-height:52px;padding:0 var(--s6) 0 var(--s6);
  background:var(--bronze);color:#fff;text-decoration:none;
  font-size:16px;font-weight:700;letter-spacing:-.01em;
  transition:background .2s var(--ease);
}
.scrollcue:hover{background:#96702F}
.scrollcue svg{
  width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.scrollcue svg{animation:none}}

/* the calculator now owns its own section */
.calcwrap{padding:var(--s9) 0;background:var(--sand);border-top:1px solid var(--line)}
.calc-grid{display:grid;gap:var(--s7)}
/* Opens the calculator band. Eden, 2026-08-19: there was no title at all, so
   the sand band just started and a card appeared, and nothing told a visitor
   that the thing worth scrolling to was down here. This is now what peeks in
   under the hero on a phone, in place of the card's own head row. */
.calchead{margin:0 0 var(--s5)}
/* no max-width on the phone: at 18ch the title broke after "quote" and the
   sticky CTA sliced the orphaned "here." in half. It fits one line at 390px. */
.calchead h2{margin:var(--s1) 0 0}
@media(min-width:760px){.calchead h2{max-width:18ch}}
.calchead p{margin:var(--s2) 0 0;font-size:14.5px;color:var(--ink-2);max-width:46ch}

@media(min-width:760px){
  .hero-split{grid-template-columns:1fr auto;gap:var(--s8);align-items:end}
  .hero-figure img{max-width:380px}
}
@media(min-width:980px){
  .hero-top h1{max-width:16ch}
  .hero-top .subhead{max-width:38ch}
  .hero-split{grid-template-columns:1.1fr .9fr;gap:var(--s9);align-items:center}
  .hero-figure img{max-width:380px}
  .hero{padding-bottom:var(--s8)}
  .calc-grid{grid-template-columns:1fr 1fr;gap:var(--s9);align-items:start}
}

/* ---------------- MOBILE HERO: one compact view ---------------------------
   Everything above the calculator has to fit a phone screen with the first
   step of the calculator peeking into view underneath it, so the visitor can
   see there is a tool without being told. That budget is tight, so the split
   runs two-up on the phone as well: short credibility on the left, a small
   body shot on the right. */
/* Tightened one step on the 4px scale when the rating pill took the opening
   slot (2026-08-19). The pill is 28px tall against the 15px text line it
   replaced, and the first view had one pixel of slack, so the 13px it added
   put the calculator's head row behind the sticky button at 390x644. These
   four reductions buy 20px back and leave real clearance instead of one pixel.
   Desktop is untouched: the 760px block resets all of them. */
/* Tightened again when the service area moved to the hero's last line
   (2026-08-19). The line is 14px and its margin is 12, and the first view had
   7px of clearance, so it had to be paid for. Everything below is one step
   down the 4px scale, mobile only: the 760px block resets all of it. */
.hero{padding:var(--s5) 0 var(--s2)}
.hero h1{margin:var(--s2) 0 var(--s4)}
.trustline{margin-top:var(--s3)}
.hero-top .subhead{margin-bottom:0}
.hero-split{
  grid-template-columns:1fr 116px;
  gap:var(--s4);
  align-items:center;
  margin-top:var(--s3);
}
.hero-cred .micro{margin-bottom:var(--s2)}
.cred-name{font-size:19px;line-height:1.2;margin:0 0 var(--s2);max-width:none}
.cred-lede{font-size:14px;line-height:1.5;margin:0;max-width:34ch}
.hero-cred .spec{display:none}          /* the same facts sit in the navy band below */

.hero-figure img{max-width:116px}
.hero-figure::before{bottom:34px;width:120%;height:120%}
/* the figure is the taller of the two hero columns, so this gap is what sets
   the split's height. One step down on each buys the first view 8px. */
.hero-figure figcaption{
  margin-top:var(--s1);padding-top:var(--s1);width:100%;
}
.hero-figure figcaption b{font-size:13px}
.hero-figure figcaption span{display:none}   /* the org name is already in the header */

.scrollcue[hidden]{display:none}
.calcwrap{padding:var(--s4) 0 var(--s9)}

@media(min-width:760px){
  .hero{padding:var(--s8) 0 var(--s7)}
  .hero h1{margin:var(--s4) 0 var(--s6)}
  .hero-split{grid-template-columns:1fr auto;gap:var(--s8);align-items:end;margin-top:var(--s7)}
  .hero-cred .spec{display:grid}
  .cred-name{font-size:clamp(22px,2.6vw,28px);margin-bottom:var(--s4);max-width:18ch}
  .cred-lede{font-size:15.5px;margin-bottom:var(--s5)}
  .hero-figure img{max-width:340px}
  .hero-figure::before{bottom:52px;width:min(320px,82%);height:min(320px,82%)}
  .hero-figure figcaption{margin-top:var(--s3);padding-top:var(--s3);width:min(340px,100%)}
  .hero-figure figcaption b{font-size:17px}
  .hero-figure figcaption span{display:block;font-size:12.5px}
  .scrollcue[hidden]{display:inline-flex}
  .calcwrap{padding:var(--s9) 0}
}

@media(min-width:980px){
  /* The figure is far taller than the credibility column, so bottom-aligning
     the two on a wide screen left a dead gap under the subhead. Top-align the
     text and let the figure run past it. */
  .hero-split{grid-template-columns:1.05fr .95fr;gap:var(--s9);align-items:start}
  .hero-top h1{max-width:16ch}
  .hero-top .subhead{max-width:40ch}
}

/* Permit flag on the result. VIC: over 800mm, or attached to the house, needs
   a building permit. Gold-ruled so it reads as a condition of the number above
   rather than as a warning about it. */
.permit{
  padding:var(--s5);background:var(--card);border-bottom:1px solid var(--line);
  border-left:3px solid var(--gold);
  font-size:14px;color:var(--ink-2);line-height:1.55
}
.permit b{color:var(--ink)}

/* ---------------- what moves the price ---------------------------------- */
.drivers{display:grid;gap:var(--s5)}
.driver{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s3) var(--s4);
  align-items:start;padding-top:var(--s5);border-top:1px solid var(--line-2);
}
.dnum{
  grid-row:span 2;
  font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--bronze-ink);
  padding-top:3px;
}
.driver h3{margin:0}
.driver p{grid-column:2;margin:var(--s2) 0 0;font-size:15px;color:var(--ink-2);line-height:1.6}
.driver p em{font-style:italic;color:var(--ink)}
.driver-foot{
  margin-top:var(--s7);padding:var(--s5);background:var(--card);
  border-left:3px solid var(--bronze);
  font-size:15px;color:var(--ink-2);line-height:1.6;max-width:70ch;
}
@media(min-width:760px){
  .drivers{grid-template-columns:1fr 1fr;gap:var(--s6) var(--s8)}
}

/* reviews now sit directly under the calculator, so they open the page's
   depth rather than closing it. Top margin comes from the section, not the
   old in-flow spacing. */
.reviews-first .revhead{margin-top:0}


/* ---------------- review cards: more to look at --------------------------
   A star row and a quote glyph per card. The stars are factual: his Google
   rating is 5.0 and every review shown is a five. The glyph is decoration,
   kept low-contrast so it reads as texture rather than as a graphic. */
/* Matched to the hero pill: bigger, gold, and blunted with a same-colour
   stroke rather than left as thin bronze points (Eden, 2026-08-19). */
.cardstars{display:flex;gap:0;margin-bottom:var(--s3)}
.cardstars svg{
  width:19px;height:19px;fill:var(--star-gold);
  stroke:var(--star-gold);stroke-width:1.5;stroke-linejoin:round;
}
.revhead .stars svg{
  fill:var(--star-gold);stroke:var(--star-gold);stroke-width:1.2;stroke-linejoin:round;
}
.revhead .stars{gap:0}
.c{position:relative;overflow:hidden}
.qglyph{
  position:absolute;top:-14px;right:6px;
  font-family:Georgia,serif;font-size:96px;line-height:1;
  color:var(--bronze);opacity:.10;pointer-events:none;
}
.c > p:first-of-type{position:relative}