/* ==========================================================================
   AnJo Projects — landing page design system
   Palette derives from the client's existing brand tokens:
   primary hsl(120 60% 25%) = #1A661A, accent hsl(30 100% 50%) = #FF8000
   ========================================================================== */

:root{
  --ink:#14181A;
  --ink-soft:#4A5254;
  --ink-faint:#7C8486;
  --green:#1A661A;
  --green-deep:#0E3A10;
  --green-mid:#248F24;
  --green-tint:#E7EFE5;
  --orange:#FF8000;
  --orange-deep:#D96A00;
  --slab:#EBEDE9;
  --paper:#FFFFFF;
  --line:#D6DAD4;
  --line-soft:#E4E7E2;

  --f-display:'Archivo','Segoe UI',system-ui,sans-serif;
  --f-body:'Archivo','Segoe UI',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;

  --wrap:1180px;
  --r:4px;                     /* near-square: this is a drawing, not an app */
  --shadow:0 2px 4px rgba(20,24,26,.05), 0 12px 32px rgba(20,24,26,.09);
}

*,*::before,*::after{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(--slab);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--f-display);margin:0;line-height:1.04;letter-spacing:-.025em;font-weight:700}
h1{font-size:clamp(2.4rem,5.2vw,4.1rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:1.28rem;letter-spacing:-.015em}
h4{font-size:1.02rem;letter-spacing:-.005em}
p{margin:0 0 1.1rem}
a{color:var(--green)}
strong{font-weight:600}

.eyebrow{
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange);margin:0 0 1rem;display:block;
}
.eyebrow.on-dark{color:var(--orange)}
.lede{font-size:clamp(1.05rem,1.7vw,1.22rem);color:var(--ink-soft);max-width:62ch}
.small{font-size:.87rem;line-height:1.55;color:var(--ink-soft)}
.mono{font-family:var(--f-mono)}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
section{padding:88px 0}
.sec-head{max-width:70ch;margin-bottom:44px}
.sec-head p:last-child{margin-bottom:0}

/* ---------- top bar ---------- */
.topbar{background:var(--green-deep);color:#fff;font-size:.86rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:46px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.topbar .tb-cred{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;color:rgba(255,255,255,.72);text-transform:uppercase}

.masthead{background:var(--paper);border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:76px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink)}
.brand-mark{
  width:40px;height:40px;flex:0 0 auto;background:var(--green);border-radius:3px;
  display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-weight:800;
  font-size:1rem;letter-spacing:-.04em;
}
.brand-name{display:block;font-family:var(--f-display);font-weight:800;font-size:1.16rem;letter-spacing:-.03em;line-height:1}
.brand-sub{display:block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:5px}
.mast-cta{display:flex;align-items:center;gap:18px}
.mast-phone{font-family:var(--f-display);font-weight:700;font-size:1.12rem;color:var(--ink);text-decoration:none;letter-spacing:-.02em;white-space:nowrap}
.mast-phone span{display:block;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);font-weight:400}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  padding:15px 26px;border-radius:var(--r);border:2px solid transparent;cursor:pointer;
  text-decoration:none;transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.btn-primary{background:var(--orange);color:#231200;border-color:var(--orange)}
.btn-primary:hover{background:var(--orange-deep);border-color:var(--orange-deep);color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-block{width:100%}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:3px solid var(--orange);outline-offset:2px;
}

/* ---------- hero ---------- */
.hero{
  background:var(--green-deep);color:#fff;position:relative;overflow:hidden;
  padding:74px 0 0;
}
/* fine drawing grid — references a technical detail sheet */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:56px 56px;
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1fr 452px;gap:60px;align-items:start}
.hero h1{color:#fff;margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero .lede{color:rgba(255,255,255,.82);max-width:52ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

.hero-proof{
  display:grid;grid-template-columns:repeat(3,auto);gap:34px;margin-top:44px;padding-top:28px;
  border-top:1px solid rgba(255,255,255,.16);
}
.hero-proof div b{
  display:block;font-family:var(--f-display);font-weight:800;font-size:1.9rem;
  letter-spacing:-.035em;line-height:1;color:#fff;
}
.hero-proof div span{
  display:block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:8px;
}
.hero-tail{height:96px}

/* ---------- form card ---------- */
.formcard{
  background:var(--paper);color:var(--ink);   /* reset: .hero sets colour to #fff */
  border-radius:var(--r);box-shadow:var(--shadow);
  padding:28px;margin-bottom:-96px;position:relative;z-index:2;
}
.formcard-head{border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:20px}
.formcard-head h2{font-size:1.42rem;margin-bottom:5px}
.formcard-head p{margin:0;font-size:.88rem;color:var(--ink-soft)}

.field{margin-bottom:15px}
.field label{
  display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px;font-weight:500;
}
.field label .req{color:var(--orange)}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--f-body);font-size:.97rem;color:var(--ink);background:#FBFCFA;
  border:1.5px solid var(--line);border-radius:var(--r);padding:12px 13px;transition:border-color .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);outline-offset:1px}
.field textarea{min-height:82px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.field .hint{font-size:.78rem;color:var(--ink-faint);margin-top:5px;display:block}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#C0392B;background:#FEF6F5}
.field .err{display:none;font-size:.78rem;color:#C0392B;margin-top:5px;font-weight:500}
.field.invalid .err{display:block}

.consent{display:flex;gap:11px;align-items:flex-start;margin:18px 0 20px}
.consent input{width:19px;height:19px;flex:0 0 auto;margin-top:2px;accent-color:var(--green)}
.consent label{font-size:.81rem;color:var(--ink-soft);line-height:1.5}
/* Until 28 Sep this rule did not exist. setError() added .invalid to the
   consent row and absolutely nothing changed on screen, so anyone who hit
   submit without ticking the box got silence. The pulse caught one visitor
   spending 22 minutes on it at 100% scroll depth before giving up. */
.consent.invalid{background:#FEF6F5;border:1px solid #C0392B;border-radius:8px;padding:11px;margin:18px -11px 20px}
.consent.invalid label{color:#C0392B}
.consent .err{display:none;flex:1 0 100%;font-size:.78rem;color:#C0392B;margin-top:5px;font-weight:500}
.consent.invalid .err{display:block}

.form-foot{margin-top:14px;text-align:center}
.form-foot .mono{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}

.form-success{display:none;text-align:center;padding:26px 8px}
.form-success h3{color:var(--green);margin-bottom:10px}
form.sent{display:none}
form.sent + .form-success{display:block}

/* ---------- client proof bar ---------- */
.proofbar{background:var(--paper);border-bottom:1px solid var(--line);padding:34px 0}
.proofbar .wrap{display:flex;align-items:center;gap:38px;flex-wrap:wrap;justify-content:center}
.proofbar .pb-label{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);
}
.pb-logo{
  font-family:var(--f-display);font-weight:700;font-size:1.08rem;letter-spacing:-.01em;
  color:var(--ink-soft);
}
/* Lighter than .pb-logo - thirteen names at logo weight is a wall of bold. */
.proofbar.areas{padding:22px 0}
.proofbar.areas .wrap{gap:8px 20px}
.pb-area{font-family:var(--f-display);font-weight:500;font-size:.92rem;color:var(--ink-soft);white-space:nowrap}

/* ==========================================================================
   SIGNATURE: the build-up — a system cross-section, the way this trade
   actually specifies work. Layers reveal in sequence on scroll.
   ========================================================================== */
.buildup{background:var(--ink);color:#fff;padding:88px 0}
.buildup h2{color:#fff}
.buildup .lede{color:rgba(255,255,255,.7)}
.bu-stack{
  margin-top:44px;border:1px solid rgba(255,255,255,.16);border-radius:var(--r);
  overflow:hidden;background:rgba(255,255,255,.03);
}
.bu-layer{
  display:grid;grid-template-columns:56px 1fr 200px;gap:22px;align-items:center;
  padding:19px 24px;border-bottom:1px solid rgba(255,255,255,.11);
  opacity:0;transform:translateX(-14px);
}
.bu-layer:last-child{border-bottom:0}
.bu-stack.revealed .bu-layer{
  animation:bu-in .5s cubic-bezier(.22,.9,.3,1) forwards;
}
.bu-stack.revealed .bu-layer:nth-child(1){animation-delay:.02s}
.bu-stack.revealed .bu-layer:nth-child(2){animation-delay:.11s}
.bu-stack.revealed .bu-layer:nth-child(3){animation-delay:.2s}
.bu-stack.revealed .bu-layer:nth-child(4){animation-delay:.29s}
.bu-stack.revealed .bu-layer:nth-child(5){animation-delay:.38s}
.bu-stack.revealed .bu-layer:nth-child(6){animation-delay:.47s}
@keyframes bu-in{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .bu-layer{opacity:1;transform:none}
  .bu-stack.revealed .bu-layer{animation:none}
}
.bu-idx{
  font-family:var(--f-mono);font-size:.74rem;color:var(--orange);letter-spacing:.06em;
  border:1px solid rgba(255,128,0,.4);border-radius:2px;height:30px;display:grid;place-items:center;
}
.bu-body b{display:block;font-family:var(--f-display);font-weight:700;font-size:1.04rem;margin-bottom:3px}
.bu-body span{display:block;font-size:.86rem;color:rgba(255,255,255,.62);line-height:1.45}
.bu-spec{
  font-family:var(--f-mono);font-size:.76rem;color:rgba(255,255,255,.78);text-align:right;
  letter-spacing:.03em;
}
/* the drawn section rule — thickness encodes the layer */
.bu-rule{height:0;border-top:var(--w,2px) solid var(--orange);opacity:.85;margin-top:9px}

/* ---------- scope: in / out ---------- */
.scope{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.scope-col{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.scope-col.out{background:transparent;border-style:dashed}
.scope-col h3{margin-bottom:16px;display:flex;align-items:center;gap:10px}
.scope-col h3::before{
  content:"";width:11px;height:11px;border-radius:2px;background:var(--green);flex:0 0 auto;
}
.scope-col.out h3::before{background:var(--ink-faint)}
.scope-col ul{list-style:none;padding:0;margin:0}
.scope-col li{padding:9px 0 9px 0;border-top:1px solid var(--line-soft);font-size:.95rem;color:var(--ink-soft)}
.scope-col li:first-child{border-top:0}
.scope-col.out li{color:var(--ink-faint)}

/* ---------- process (a real sequence, so it is numbered) ---------- */
.steps{counter-reset:s;margin-top:40px;border-top:1px solid var(--line)}
.step{
  counter-increment:s;display:grid;grid-template-columns:74px 1fr;gap:26px;
  padding:26px 0;border-bottom:1px solid var(--line);align-items:start;
}
.step::before{
  content:counter(s,decimal-leading-zero);font-family:var(--f-mono);font-size:1.02rem;
  color:var(--orange);letter-spacing:.04em;padding-top:2px;
}
.step h4{margin-bottom:5px}
.step p{margin:0;color:var(--ink-soft);font-size:.95rem}

/* ---------- cards ---------- */
.cards{display:grid;gap:20px;margin-top:40px}
.c3{grid-template-columns:repeat(3,1fr)}
.c2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.card h4{margin-bottom:8px}
.card p:last-child{margin-bottom:0}
.card .k{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);display:block;margin-bottom:11px;
}

/* ---------- band (mid-page CTA) ---------- */
.band{background:var(--green);color:#fff;padding:60px 0}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap}
.band h2{color:#fff;max-width:22ch}
.band p{color:rgba(255,255,255,.8);margin:10px 0 0;max-width:46ch}

/* ---------- FAQ ---------- */
.faq{margin-top:38px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:21px 40px 21px 0;position:relative;
  font-family:var(--f-display);font-weight:700;font-size:1.06rem;letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--f-mono);font-size:1.4rem;color:var(--orange);line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 40px 22px 0;margin:0;color:var(--ink-soft);font-size:.96rem}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(255,255,255,.68);padding:56px 0 30px;font-size:.9rem}
footer a{color:rgba(255,255,255,.86)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:38px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.14)}
.foot-grid h4{color:#fff;font-size:.82rem;font-family:var(--f-mono);font-weight:500;letter-spacing:.13em;text-transform:uppercase;margin-bottom:14px}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:8px}
.foot-bottom{padding-top:22px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.8rem;color:rgba(255,255,255,.45)}

/* ---------- sticky mobile call bar ---------- */
.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);
  border-top:2px solid var(--orange);padding:9px 12px;gap:9px;
}
.callbar a{
  flex:1;text-align:center;padding:13px 8px;border-radius:var(--r);text-decoration:none;
  font-family:var(--f-display);font-weight:700;font-size:.95rem;
}
.callbar .c-call{background:var(--orange);color:#231200}
.callbar .c-quote{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.4)}

/* ---------- POPIA consent banner ---------- */
.cmp{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:80;background:var(--ink);color:#fff;
  border-radius:var(--r);box-shadow:0 8px 40px rgba(0,0,0,.35);padding:20px 22px;
  display:none;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  max-width:var(--wrap);margin:0 auto;
}
.cmp.show{display:flex}
.cmp p{margin:0;font-size:.88rem;color:rgba(255,255,255,.78);max-width:62ch;line-height:1.5}
.cmp p a{color:#fff}
.cmp-actions{display:flex;gap:10px;flex-wrap:wrap}
.cmp .btn{padding:11px 20px;font-size:.92rem}
.cmp .btn-decline{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.cmp .btn-decline:hover{background:rgba(255,255,255,.1)}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .formcard{margin-bottom:0}
  .hero-tail{height:0}
  .hero{padding-bottom:56px}
  .scope,.cards.c3,.cards.c2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  body{font-size:16px}
  section{padding:60px 0}
  .wrap{padding:0 18px}
  .hero-proof{grid-template-columns:1fr 1fr;gap:22px}
  .bu-layer{grid-template-columns:44px 1fr;gap:15px}
  .bu-spec{grid-column:2;text-align:left;padding-top:6px}
  .field-row{grid-template-columns:1fr}
  .masthead .mast-phone{display:none}
  .foot-grid{grid-template-columns:1fr}
  .callbar{display:flex}
  body{padding-bottom:72px}
  .topbar .tb-cred{display:none}
}

/* ---------- hero form card clearance ----------
   The card carried margin-bottom:-96px so it overhung into the section below.
   That device only reads as deliberate against a contrasting background, and
   the credentials strip underneath is white like the card — so the two met at
   exactly the same y and merged into a single white block with no separation.
   Sit the card inside the hero instead and leave dark space beneath it. */
@media(min-width:1001px){
  .formcard{margin-bottom:0}
  .hero-tail{height:72px}
}

/* ---------- brand logo in the masthead and footer ----------
   Replaces the AJ monogram block. The file is a circular PNG with everything
   outside the circle transparent, so the same asset reads correctly on the
   white masthead and on the dark footer without needing two versions. */
.brand-logo{
  width:44px;height:44px;flex:0 0 auto;display:block;border-radius:50%;
}
footer .brand-logo{width:40px;height:40px}
@media(max-width:680px){
  .brand-logo{width:38px;height:38px}
}


/* ---------- WhatsApp ----------
   Committed to in the plan of action: a WhatsApp button on every page, so an
   enquiry can start in the app the buyer already has open. The glyph lives here
   as a data URI rather than inline in the markup, so the path is stored once
   instead of nine times across three pages. WhatsApp's own green is used
   deliberately — it is recognised instantly and needs no explaining. */
.btn-wa{background:#25D366;color:#08331B;border:2px solid #25D366}
.btn-wa:hover{background:#1EBE57;border-color:#1EBE57;color:#08331B}
.btn-wa::before,.c-wa::before,.foot-wa::before{
  content:"";display:inline-block;flex:0 0 auto;background-repeat:no-repeat;
  background-position:center;background-size:contain;
}
.btn-wa::before{width:19px;height:19px;margin-right:9px;vertical-align:-4px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%2308331B%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.174.198-.298.297-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413z%22%2F%3E%3C%2Fsvg%3E")}
.c-wa::before{width:17px;height:17px;margin-right:7px;vertical-align:-3px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%2308331B%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.174.198-.298.297-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413z%22%2F%3E%3C%2Fsvg%3E")}
.foot-wa::before{width:14px;height:14px;margin-right:7px;vertical-align:-2px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.174.198-.298.297-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413z%22%2F%3E%3C%2Fsvg%3E")}
.callbar .c-wa{background:#25D366;color:#08331B}

/* Keep the icon and label on one line in the sticky bar. Without this the
   label wraps under the glyph and that button sits taller than its neighbours. */
.callbar a{display:flex;align-items:center;justify-content:center;white-space:nowrap}
.callbar .c-wa::before{margin-right:6px}
@media(max-width:400px){
  .callbar a{font-size:.84rem;padding:13px 4px}
  .callbar .c-wa::before{width:15px;height:15px;margin-right:5px}
}

/* ==========================================================================
   PHOTOGRAPHY PASS
   The page previously carried no imagery at all — every section was type on a
   flat colour band. That is the single biggest reason it read as generated
   rather than as a contractor who actually does this work. Real photographs of
   AnJo's own jobs now carry the hero and the proof band.
   ========================================================================== */

/* ---------- hero ----------
   The photograph sits under the existing grid overlay. A two-stop gradient
   keeps the left column dark enough for white text at AA while letting the
   roof itself stay legible on the right, where the form does not sit. */
.hero{
  background-color:var(--green-deep);
  background-image:
    linear-gradient(105deg,
      rgba(9,32,10,.94) 0%,
      rgba(9,32,10,.86) 38%,
      rgba(9,32,10,.55) 68%,
      rgba(9,32,10,.42) 100%),
    url("img/waterproofing-crew-roller-coating-warehouse-roof--hero.webp");
  background-size:cover;
  background-position:center 38%;
  background-repeat:no-repeat;
}
/* The drawing grid fought the photograph for attention. Keep it, quieter. */
.hero::before{opacity:.18}

/* Depth: the form is the one thing on the page that must feel liftable. */
.formcard{
  box-shadow:0 2px 4px rgba(8,20,10,.16), 0 18px 44px rgba(8,20,10,.34);
}

/* ---------- proof band ----------
   Deliberately not a uniform grid of equal tiles. The first frame runs double
   width because it is the before/after that does the persuading; the rest
   support it. Refactoring UI §7 — vary the treatment, do not repeat it. */
.work{background:var(--paper);padding:80px 0}
.work-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:172px;gap:12px;margin-top:38px;
}
.work-grid figure{
  position:relative;margin:0;overflow:hidden;border-radius:var(--r);
  background:var(--slab);
}
.work-grid figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.work-grid figure:nth-child(6),
.work-grid figure:nth-child(7){grid-column:span 2}
.work-grid img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.work-grid figure:hover img{transform:scale(1.035)}
.work-grid figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(8,16,10,.82),rgba(8,16,10,0));
}
@media(prefers-reduced-motion:reduce){.work-grid img{transition:none}}

@media(max-width:900px){
  .work-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px}
  .work-grid figure:nth-child(1){grid-column:span 2;grid-row:span 2}
  .work-grid figure:nth-child(6),
.work-grid figure:nth-child(7){grid-column:span 2}
}
@media(max-width:680px){
  .hero{background-position:center 42%}
  .hero{
    background-image:
      linear-gradient(180deg, rgba(9,32,10,.93) 0%, rgba(9,32,10,.88) 55%, rgba(9,32,10,.8) 100%),
      url("img/waterproofing-crew-roller-coating-warehouse-roof--hero.webp");
  }
}


/* Per-page hero photography. Same gradient recipe as the waterproofing hero so
   the three pages read as one site, with a photograph that matches the service
   the visitor actually clicked an advert for. */
.hero.hero-painting{
  background-image:
    linear-gradient(105deg, rgba(9,32,10,.94) 0%, rgba(9,32,10,.86) 38%,
      rgba(9,32,10,.55) 68%, rgba(9,32,10,.42) 100%),
    url("img/painting-industrial-wall-wide--hero.webp");
  background-position:center 45%;
}
.hero.hero-residential{
  background-image:
    linear-gradient(105deg, rgba(9,32,10,.94) 0%, rgba(9,32,10,.86) 38%,
      rgba(9,32,10,.55) 68%, rgba(9,32,10,.42) 100%),
    url("img/painting-crew-coating-tile-roof-half-done--hero.webp");
  background-position:center 40%;
}
@media(max-width:680px){
  .hero.hero-painting{
    background-image:linear-gradient(180deg, rgba(9,32,10,.93) 0%, rgba(9,32,10,.88) 55%, rgba(9,32,10,.8) 100%),
      url("img/painting-industrial-wall-wide--hero.webp");
  }
  .hero.hero-residential{
    background-image:linear-gradient(180deg, rgba(9,32,10,.93) 0%, rgba(9,32,10,.88) 55%, rgba(9,32,10,.8) 100%),
      url("img/painting-crew-coating-tile-roof-half-done--hero.webp");
  }
}


/* ---------- type: width as hierarchy ----------
   Archivo is loaded as a variable font with a width axis. Headlines run
   expanded, which gives them presence without going up in size, and reads as
   industrial signage rather than as another neutral grotesque. Body stays at
   normal width so the contrast is structural, not just a size jump. */
h1,h2{font-stretch:118%;letter-spacing:-.03em}
h3,h4{font-stretch:108%;letter-spacing:-.015em}
.price,.stat,.hero-proof b,.cta .num{font-stretch:112%}

/* Uppercase micro-labels read better slightly condensed and tracked out. */
.eyebrow,.k,.carry,.pb-label,.incl .lab{font-stretch:96%}

/* Body copy is set at normal width; nothing to declare, but stated so the
   next person does not "helpfully" widen it. */
body,p,li{font-stretch:100%}


/* ---------- specification: type beside the real thing ----------
   Was a full-width slab of type on a dark band, which is what made this the
   heaviest of the eight stacked bands. Running the layer stack against a
   photograph of the system being applied breaks the rhythm and gives the
   reader something concrete to hold the specification against. */
@media(min-width:1000px){
  .bu-split{display:grid;grid-template-columns:1fr 372px;gap:40px;align-items:start}
  .bu-photo{position:sticky;top:28px}
}
.bu-photo{margin-top:44px}
.bu-photo figure{margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid rgba(255,255,255,.16)}
.bu-photo img{width:100%;height:auto;display:block}
.bu-photo figcaption{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
  padding:11px 2px 0;
}
@media(min-width:1000px){.bu-photo{margin-top:44px}}

/* The orange rules are drawn to the thickness each layer is actually
   specified at. Nothing said so, so nobody could know. */
.bu-legend{
  display:flex;align-items:center;gap:10px;margin-top:18px;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
}
.bu-legend::before{
  content:"";width:26px;height:0;flex:0 0 auto;
  border-top:8px solid var(--orange);opacity:.85;
}

/* ---------- credentials strip: layered, not butted ----------
   Lifting the strip over the hero edge turns a hard band boundary into an
   overlap, which is the cheapest way to stop the page reading as stacked
   slabs without touching the layout inside any section. */
@media(min-width:900px){
  .proofbar{
    position:relative;z-index:3;margin-top:-34px;
    max-width:1100px;margin-left:auto;margin-right:auto;
    border:1px solid var(--line);border-radius:var(--r);
    box-shadow:0 2px 4px rgba(8,20,10,.06), 0 14px 34px rgba(8,20,10,.10);
  }
  .hero{padding-bottom:34px}
}

/* The six credential items needed 1098px inside a 1098px card - exactly at the
   boundary, so rounding tipped "19+ years in the trade" onto a second row.
   Tightening the gap buys 40px of headroom without the strip feeling cramped. */
@media(min-width:900px){
  .proofbar .wrap{gap:30px}
  /* Only the FIRST bar lifts over the hero edge. Every bar used to get the
     -34px, so each one slid up over the one above - it hid the second row of
     the areas list and clipped the client logos (fixed 14 Oct). */
  .proofbar + .proofbar{margin-top:12px}
}

/* ---------- exit survey ---------- */
.xs{position:fixed;right:16px;bottom:16px;z-index:70;width:min(360px,calc(100vw - 32px));
  background:var(--ink);color:#fff;border-radius:var(--r);padding:20px 22px 18px;
  box-shadow:0 10px 44px rgba(0,0,0,.34);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease}
.xs.show{opacity:1;transform:none;pointer-events:auto}
.xs-x{position:absolute;top:8px;right:10px;background:none;border:0;color:rgba(255,255,255,.5);
  font-size:1.4rem;line-height:1;cursor:pointer;padding:4px 8px}
.xs-x:hover{color:#fff}
.xs-x:focus-visible,.xs-opt:focus-visible,.xs-txt:focus-visible{outline:2px solid #fff;outline-offset:2px}
.xs-q{margin:0 0 14px;font-size:.94rem;font-weight:600;line-height:1.4;padding-right:18px}
.xs-opts{display:flex;flex-direction:column;gap:7px}
.xs-opt{text-align:left;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  color:#fff;border-radius:8px;padding:9px 13px;font:inherit;font-size:.88rem;cursor:pointer;
  transition:background .15s ease}
.xs-opt:hover{background:rgba(255,255,255,.18)}
.xs-txt{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#fff;
  border-radius:8px;padding:9px 13px;font:inherit;font-size:.88rem;width:100%}
.xs-txt::placeholder{color:rgba(255,255,255,.45)}
.xs-thanks{display:none;font-size:.9rem;color:rgba(255,255,255,.8)}
.xs.done .xs-q,.xs.done .xs-opts{display:none}
.xs.done .xs-thanks{display:block}
@media(prefers-reduced-motion:reduce){.xs{transition:none}}

/* ---------- client logo strip ---------- */
.pb-client{height:28px;width:auto;display:block;
  filter:grayscale(1);opacity:.72;transition:opacity .18s ease,filter .18s ease}
.pb-client:hover{filter:none;opacity:1}
@media(max-width:640px){.pb-client{height:22px}}
@media(prefers-reduced-motion:reduce){.pb-client{transition:none}}

/* ---------- hero disqualifier ---------- */
/* Supplier enquiries were arriving by phone: the number sits 192 characters
   into the page, the "not suppliers" line sat 18,755 below it. This puts the
   correction beside the call button, where that reader actually is. */
.hero-note{margin:16px 0 0;font-size:.88rem;line-height:1.5;
  color:rgba(255,255,255,.72);max-width:52ch}
.hero-note b{color:#fff;font-weight:600}

/* Optional fields fold away behind one line, so the form reads as three
   questions instead of ten (19 Oct 2026). */
details.more{margin:2px 0 16px;border-top:1px dashed var(--line);padding-top:12px}
details.more summary{cursor:pointer;list-style:none;font-weight:600;font-size:.9rem;color:var(--green)}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:'+ ';font-weight:700}
details.more[open] summary::before{content:'‘2  '}
details.more summary span{font-weight:400;color:var(--ink-faint);font-size:.82rem}
details.more[open] summary{margin-bottom:14px}

/* ---------- main website (anjoproject.co.za) ----------
   Only the main site uses these: it has a menu and pages without a form. The
   ad pages stay menu-less on purpose, so none of this appears on them. */
.mainnav{display:flex;gap:24px;align-items:center}
.mainnav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.94rem;padding:6px 0;border-bottom:2px solid transparent}
.mainnav a:hover,.mainnav a[aria-current="page"]{border-bottom-color:var(--orange)}
.navmenu{display:none;position:relative}
.navmenu summary{list-style:none;cursor:pointer;font-weight:700;padding:9px 14px;border:1px solid var(--line);border-radius:var(--r);color:var(--ink)}
.navmenu summary::-webkit-details-marker{display:none}
.navmenu nav{position:absolute;right:0;top:calc(100% + 8px);z-index:80;display:grid;min-width:250px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:8px;
  box-shadow:0 14px 34px rgba(8,20,10,.16)}
.navmenu nav a{padding:11px 12px;color:var(--ink);text-decoration:none;font-weight:600;border-radius:var(--r)}
.navmenu nav a:hover,.navmenu nav a[aria-current="page"]{background:#EEF2EC}
@media(max-width:1240px){.site-main .mast-phone{display:none}}
@media(max-width:1060px){.mainnav{display:none}.navmenu{display:block}}
/* On phones the bottom call bar already offers Call, WhatsApp and Get a quote,
   so the header keeps just the logo and the menu. */
@media(max-width:680px){.site-main .mast-cta{display:none}}

/* page header without a form */
.hero-slim{padding-bottom:60px}
.hero-solo{max-width:760px}

/* service cards that are links */
.card-link{display:block;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.card-link:hover{border-color:var(--orange);transform:translateY(-2px)}
.card-link .go{display:inline-block;margin-top:14px;font-weight:700;color:var(--green)}

/* contact details on the dark hero */
.contact-list{list-style:none;padding:0;margin:26px 0 22px;display:grid;gap:12px}
.contact-list li{display:grid;grid-template-columns:96px 1fr;gap:12px;color:rgba(255,255,255,.88)}
.contact-list span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);padding-top:3px}
.contact-list a{color:#fff;font-weight:600}
@media(prefers-reduced-motion:reduce){.card-link{transition:none}.card-link:hover{transform:none}}