/* ==========================================================================
   NTOAMPE 0207 PROPERTIES  ·  Design System
   Palette measured from the client's own site photography:
     charcoal #1c2426 (their finished houses) · concrete #9ba1a3
     Limpopo terracotta #9d5c34 (their sites)  -> lifted to the CTA amber
   ========================================================================== */

:root{
  /* Canvas */
  --ink:        #0F1418;
  --ink-2:      #151C22;
  --slate:      #1D262E;
  --slate-2:    #26313A;
  --line-dark:  #33404A;

  /* Light */
  --surface:    #FAF8F5;
  --sand:       #F1EDE7;
  --sand-2:     #E5DFD6;
  --line:       #DFD8CE;

  /* Brand */
  --amber:      #E2662A;   /* 5.27:1 on --ink · 6.18:1 with ink text on it */
  --amber-hi:   #F47E3F;
  --amber-lo:   #BF5119;
  --concrete:   #9BA6AC;

  /* Type */
  --text:       #12171B;
  --text-mute:  #56626B;
  --on-dark:    #E7EBEE;
  --on-dark-mute:#A9B4BB;

  --font-display:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* 8px grid */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem;
  --s6:4rem; --s7:5rem; --s8:6rem; --s9:8rem;

  --nav-h:72px;
  --wa-reserve:171px;          /* WhatsApp float: 147px pill + 24px right offset */
  --container:1200px;
  --radius:8px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.7;
  color:var(--text);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.15rem,4.9vw,3.7rem);}
h2{font-size:clamp(1.75rem,3.6vw,2.7rem);}
h3{font-size:clamp(1.15rem,2vw,1.45rem);letter-spacing:-.015em;}
h4{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;}
p{margin:0 0 var(--s2);max-width:65ch;}
::selection{background:var(--amber);color:#fff;}

/* Visible focus for keyboard users */
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:3px;}

.skip-link{
  position:absolute;left:var(--s2);top:-100px;z-index:2000;
  background:var(--amber);color:#0F1418;font-weight:700;
  padding:.75rem 1.25rem;border-radius:var(--radius);transition:top .2s;
}
.skip-link:focus{top:var(--s2);}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--s3);}
.section{padding-block:var(--s6);}
@media(min-width:768px){.section{padding-block:var(--s8);}}
.section--tight{padding-block:var(--s5);}
@media(min-width:768px){.section--tight{padding-block:var(--s6);}}

.bg-ink{background:var(--ink);color:var(--on-dark);}
.bg-slate{background:var(--slate);color:var(--on-dark);}
.bg-sand{background:var(--sand);}
.bg-ink p,.bg-slate p{color:var(--on-dark-mute);}

/* ---------- Section header ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-display);font-size:.75rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
  margin:0 0 var(--s1);
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--amber);flex:none;}
.section-head{margin-bottom:var(--s5);max-width:760px;}
.section-head p{margin-top:var(--s2);font-size:1.05rem;color:var(--text-mute);}
.bg-ink .section-head p,.bg-slate .section-head p{color:var(--on-dark-mute);}
.section-head--center{margin-inline:auto;text-align:center;}
.section-head--center .eyebrow{justify-content:center;}
.section-head--center p{margin-inline:auto;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;padding:.85rem 2rem;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  border-radius:4px;border:2px solid transparent;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
  text-align:center;white-space:nowrap;
}
.btn svg{width:20px;height:20px;flex:none;}
.btn:hover{transform:translateY(-2px);}
.btn--primary{background:var(--amber);color:#0F1418;}
.btn--primary:hover{background:var(--amber-hi);}
.btn--ghost{border-color:currentColor;color:var(--on-dark);}
.btn--ghost:hover{background:var(--on-dark);color:var(--ink);}
.btn--dark{background:var(--ink);color:var(--on-dark);}
.btn--dark:hover{background:var(--slate-2);}
.btn--outline{border-color:var(--line);color:var(--text);background:#fff;}
.btn--outline:hover{border-color:var(--ink);}
.btn--wa{background:#25D366;color:#062d17;}
.btn--wa:hover{background:#41e07d;}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);}
@media(max-width:479px){
  .btn{width:100%;}
  .btn-row{flex-direction:column;}
}

/* ---------- Navigation ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:1000;height:var(--nav-h);
  background:var(--ink);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.nav.scrolled{background:rgba(15,20,24,.94);backdrop-filter:blur(12px);border-bottom-color:var(--line-dark);}
.nav__inner{
  height:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--s3);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s3);
}
.nav__logo{display:flex;align-items:center;gap:.65rem;}
.nav__logo img{height:34px;width:auto;}
.nav__logo-txt{
  font-family:var(--font-display);font-weight:800;font-size:1.02rem;line-height:1.05;
  color:#fff;letter-spacing:-.02em;
}
.nav__logo-txt span{color:var(--amber);}
.nav__logo-sub{display:block;font-size:.58rem;font-weight:600;letter-spacing:.19em;color:var(--on-dark-mute);text-transform:uppercase;}
.nav__links{display:none;justify-content:center;gap:var(--s3);list-style:none;margin:0;padding:0;}
.nav__links a{
  font-family:var(--font-display);font-size:.85rem;font-weight:600;color:var(--on-dark-mute);
  letter-spacing:.01em;padding:.5rem 0;position:relative;transition:color .2s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--amber);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);
}
.nav__links a:hover{color:#fff;}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1);}
.nav__links a[aria-current="page"]{color:#fff;}
.nav__cta{display:none;}
.nav__actions{display:flex;align-items:center;gap:.6rem;justify-self:end;}
/* The design calculator is a tool, not a content page — it reads as an icon pill
   beside the quote CTA instead of a 7th plain link, which also keeps the link row
   from overflowing the 1200px container. */
.nav__tool{display:none;}
@media(min-width:1024px){
  .nav__links{display:flex;gap:var(--s2);}
  .nav__cta{display:inline-flex;min-height:42px;padding:.55rem 1.05rem;font-size:.85rem;}
  .nav__inner{gap:var(--s2);}
  .nav__tool{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    height:42px;width:42px;flex:none;border:1px solid var(--line-dark);border-radius:6px;
    font-family:var(--font-display);font-size:.85rem;font-weight:600;letter-spacing:.01em;
    color:var(--on-dark-mute);
    transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease);
  }
  .nav__tool svg{width:17px;height:17px;flex:none;}
  /* Clipped, not display:none — the label must stay in the accessibility tree
     so the icon-only pill still has the accessible name "Calculator". */
  .nav__tool .nav__tool-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
  .nav__tool:hover{color:#fff;border-color:var(--amber);background-color:rgba(226,102,42,.14);}
  .nav__tool[aria-current="page"]{color:var(--amber);border-color:var(--amber);}
}
@media(min-width:1240px){
  .nav__inner{gap:var(--s3);}
  .nav__links{gap:var(--s3);}
  .nav__cta{padding:.55rem 1.35rem;}
  .nav__tool{width:auto;padding-inline:.95rem;}
  .nav__tool .nav__tool-txt{position:static;width:auto;height:auto;overflow:visible;clip-path:none;}
}
.nav__burger{
  display:grid;place-items:center;width:44px;height:44px;margin-left:auto;
  border-radius:4px;color:#fff;
}
@media(min-width:1024px){.nav__burger{display:none;}}
.nav__burger span{display:block;width:22px;height:2px;background:currentColor;position:relative;transition:background .2s;}
.nav__burger span::before,.nav__burger span::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:#fff;transition:transform .28s var(--ease);
}
.nav__burger span::before{top:-7px;}
.nav__burger span::after{top:7px;}
.nav__burger[aria-expanded="true"] span{background:transparent;}
.nav__burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg);}
.nav__burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg);}

/* Mobile menu */
.menu{
  position:fixed;inset:0;z-index:999;background:var(--ink);
  display:grid;place-items:safe center;
  /* In landscape the menu is taller than the screen. `safe center` stops the
     centring from clipping the top, and auto-scroll makes the last link
     reachable instead of stranded off the bottom. */
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:calc(var(--nav-h) + .75rem) var(--s3) var(--s3);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
.menu.open{opacity:1;visibility:visible;}
.menu>nav{width:100%;}
.menu ul{list-style:none;margin:0;padding:0;text-align:center;}
.menu li{margin-block:clamp(.1rem,.55svh,.5rem);}
.menu a{
  font-family:var(--font-display);font-weight:700;color:var(--on-dark);
  font-size:clamp(1.05rem,3.1svh,1.5rem);
  display:flex;align-items:center;justify-content:center;
  min-height:44px;padding:clamp(.25rem,1svh,.55rem) 1rem;transition:color .2s;
}
.menu a:hover,.menu a[aria-current="page"]{color:var(--amber);}
.menu__tool{margin-top:clamp(.5rem,1.4svh,1rem);padding-top:clamp(.5rem,1.4svh,1rem);border-top:1px solid var(--line-dark);}
.menu__tool-a{display:inline-flex;align-items:center;gap:.6rem;}
.menu__tool-a svg{width:1em;height:1em;flex:none;color:var(--amber);}
.menu__foot{
  margin-top:clamp(.9rem,3svh,2rem);
  display:grid;gap:clamp(.5rem,1.5svh,1rem);justify-items:center;
}
.menu__foot .btn{width:100%;max-width:340px;}

/* ---------- Hero + trust bar share one viewport on desktop ----------
   A full-viewport hero left 341-521px of dead image above the headline and
   always pushed the trust bar just below the fold. Stacking the two inside one
   100svh flex column means the hero takes exactly the space that is left over,
   so the credentials land on the first screen instead of behind a scroll. */
.hero-stack{display:block;}
@media(min-width:1024px){
  .hero-stack{min-height:100svh;display:flex;flex-direction:column;}
  .hero-stack>.hero{flex:1 1 auto;min-height:0;}
  .hero-stack>.trustbar{flex:0 0 auto;}
  /* Scoped, not bare: a later `@media(min-width:768px){.hero__scroll{display:flex}}`
     has equal specificity and would win on source order. */
  .hero-stack .hero__scroll{display:none;}   /* the trust bar now signals "more below" */

  /* The fixed WhatsApp float sits bottom-right, which is exactly where the last
     trust-bar stat lands once the two share a screen — it was covering "90 Day
     Double-Storey Programme". Reserve only the footprint the float actually
     steals: on wide screens the centred container already clears it, so this
     resolves back to the normal gutter instead of adding a dead breakpoint. */
  .hero-stack .trustbar>.container{
    /* The centring margin goes NEGATIVE below the container width, and
       subtracting a negative added padding instead of removing it. Floor it. */
    padding-right:max(
      var(--s3),
      var(--wa-reserve) - max(0px, (100vw - var(--container)) / 2)
    );
  }
}

/* Every size in the hero is driven by min(width, height) — NOT width alone.
   A wide-but-short window (a laptop with a tab strip and a bookmarks bar is
   often only ~600px of page) was holding the headline at its widest-viewport
   maximum and pushing the trust bar off the bottom. `min(Nvw, Nsvh)` makes the
   whole block shrink for whichever dimension is actually scarce, so it fits at
   any size without another breakpoint. */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + clamp(.75rem,3svh,3rem));
  padding-bottom:clamp(.75rem,3.2svh,4rem);
  background:var(--ink);overflow:hidden;isolation:isolate;
}
@media(max-width:767px){.hero{min-height:88svh;}}
.hero__media{position:absolute;inset:-8% 0;z-index:-2;}
.hero__media img{width:100%;height:100%;object-fit:cover;}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(15,20,24,.88) 0%,rgba(15,20,24,.68) 45%,rgba(15,20,24,.93) 88%),
    linear-gradient(100deg,rgba(15,20,24,.85) 0%,rgba(15,20,24,.28) 62%);
}
.hero__inner{position:relative;width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--s3);}
.hero h1{
  color:#fff;max-width:min(100%,22ch);
  font-size:clamp(1.7rem, min(4.7vw, 7.2svh), 4.4rem);
  line-height:1.08;
}
.hero h1 em{font-style:normal;color:var(--amber);}
.hero__sub{
  margin-top:clamp(.6rem,1.9svh,1.5rem);max-width:56ch;
  font-size:clamp(.94rem, min(1.5vw, 2.1svh), 1.28rem);
  color:#D6DDE2;line-height:1.6;
}
.hero__trust{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(.35rem,.9svh,.6rem) clamp(.5rem,1vw,1rem);
  margin-bottom:clamp(.6rem,2svh,1.5rem);
}
.hero .btn-row{margin-top:clamp(.9rem,2.8svh,2rem);}
.hero .btn{
  min-height:clamp(42px,6.2svh,48px);
  padding:clamp(.55rem,1.5svh,.85rem) clamp(1.1rem,2.1vw,2rem);
  font-size:clamp(.84rem, min(1.1vw, 1.5svh), .95rem);
}
.pill{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:clamp(.24rem,.75svh,.4rem) clamp(.55rem,1vw,.85rem);
  border:1px solid rgba(255,255,255,.22);border-radius:100px;
  font-family:var(--font-display);font-size:clamp(.6rem, min(.85vw,1.25svh), .72rem);
  font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:#E7EBEE;background:rgba(255,255,255,.05);
}
.pill--amber{border-color:rgba(226,102,42,.6);color:var(--amber-hi);background:rgba(226,102,42,.1);}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none;}
.hero__scroll{
  display:none;position:absolute;left:50%;bottom:var(--s3);transform:translateX(-50%);
  align-items:center;gap:.6rem;flex-direction:column;
  font-family:var(--font-display);font-size:.65rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mute);
}
@media(min-width:768px){.hero__scroll{display:flex;}}
@media(max-height:560px){.hero__scroll{display:none;}}   /* landscape: it lands on the copy */
.hero__scroll b{display:block;width:1px;height:44px;background:linear-gradient(180deg,var(--amber),transparent);}

/* ---------- Page hero (inner pages) ---------- */
.phero{
  position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate;
  padding-top:calc(var(--nav-h) + var(--s6));padding-bottom:var(--s6);
}
.phero__media{position:absolute;inset:0;z-index:-2;}
.phero__media img{width:100%;height:100%;object-fit:cover;}
.phero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(15,20,24,.88),rgba(15,20,24,.72)),
             linear-gradient(100deg,rgba(15,20,24,.8),rgba(15,20,24,.3));
}
.crumb{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-mute);margin-bottom:var(--s2);font-family:var(--font-display);font-weight:600;}
.crumb a:hover{color:var(--amber);}
.crumb span{color:var(--amber);}
.phero p{max-width:60ch;margin-top:var(--s2);color:#CDD5DA;font-size:1.05rem;}

/* ---------- Trust bar ---------- */
.trustbar{
  background:var(--ink-2);border-block:1px solid var(--line-dark);
  padding-block:clamp(.65rem,2.2svh,1.5rem);
}
.trustbar__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s2);}
@media(min-width:768px){.trustbar__grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
.trustbar__item{text-align:center;padding-inline:.25rem;}
.trustbar__num{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.35rem, min(3.4vw, 4.4svh), 2.4rem);
  line-height:1;color:#fff;letter-spacing:-.03em;
}
.trustbar__num small{color:var(--amber);font-size:.6em;}
.trustbar__lbl{
  display:block;margin-top:clamp(.2rem,.7svh,.5rem);font-family:var(--font-display);
  font-size:clamp(.58rem, min(.8vw,1.15svh), .68rem);
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-mute);
}

/* ---------- Accreditation strip ---------- */
.accred{padding-block:var(--s5);background:var(--sand);}
.accred__lbl{
  text-align:center;font-family:var(--font-display);font-size:.7rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute);margin-bottom:var(--s3);
}
.accred__row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s3);align-items:center;justify-items:center;
}
@media(min-width:640px){.accred__row{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(min-width:960px){.accred__row{grid-template-columns:repeat(5,minmax(0,1fr));}}
.accred__row img{
  max-height:62px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .3s,opacity .3s,transform .3s var(--ease);
}
.accred__row a:hover img,.accred__row figure:hover img{filter:none;opacity:1;transform:translateY(-3px);}

/* ---------- Split (image + text) ---------- */
.split{display:grid;gap:var(--s4);align-items:center;}
@media(min-width:960px){
  .split{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6);}
  .split--flip .split__media{order:2;}
}
.split__body{max-width:600px;}
.split__media{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--sand-2);}
.split__media img{width:100%;height:clamp(320px,44vw,540px);object-fit:cover;}
.split__badge{
  position:absolute;left:var(--s3);bottom:var(--s3);
  background:var(--amber);color:#0F1418;padding:.85rem 1.15rem;border-radius:6px;
  font-family:var(--font-display);font-weight:800;line-height:1.15;max-width:230px;
}
.split__badge b{display:block;font-size:1.5rem;letter-spacing:-.03em;}
.split__badge span{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.82;}

/* ---------- Check list ---------- */
.checks{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:.85rem;}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:.85rem;align-items:start;font-size:1rem;}
.checks svg{width:22px;height:22px;color:var(--amber);margin-top:2px;flex:none;}
.bg-ink .checks li,.bg-slate .checks li{color:var(--on-dark-mute);}

/* ---------- Cards ---------- */
.grid{display:grid;gap:var(--s3);}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));}
/* auto-fit would lay four cards out as 3 + 1 orphan at 1440px */
.grid--pair{grid-template-columns:minmax(0,1fr);}
@media(min-width:768px){.grid--pair{grid-template-columns:repeat(2,minmax(0,1fr));}}

.card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s3);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s;
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(15,20,24,.42);border-color:var(--sand-2);}
.card__icon{
  width:48px;height:48px;display:grid;place-items:center;border-radius:6px;
  background:var(--ink);color:var(--amber);margin-bottom:var(--s2);flex:none;
}
.card__icon svg{width:24px;height:24px;}
.card h3{margin-bottom:.6rem;}
.card p{font-size:.96rem;color:var(--text-mute);margin-bottom:var(--s2);}
/* Equal heights are for cards that are grid items. A card standing on its own
   in a column would otherwise stretch to the whole column. */
.grid>.card,.grid>.feature,.grid>*>.card{height:100%;}

.card__more{
  margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;                       /* it is the card's CTA — make it tappable */
  font-family:var(--font-display);font-weight:700;font-size:.86rem;color:var(--amber-lo);
  letter-spacing:.02em;
}
.card__more svg{width:15px;height:15px;transition:transform .25s var(--ease);}
.card:hover .card__more svg{transform:translateX(4px);}

.card--dark{background:var(--slate);border-color:var(--line-dark);}
.card--dark h3{color:#fff;}
.card--dark p{color:var(--on-dark-mute);}
.card--dark .card__icon{background:var(--amber);color:#0F1418;}
.card--dark:hover{border-color:var(--amber);box-shadow:none;}

/* Numbered cards */
.card__num{
  font-family:var(--font-display);font-weight:800;font-size:.8rem;letter-spacing:.12em;
  color:var(--amber);margin-bottom:.75rem;
}

/* ---------- Services (featured) ---------- */
.feature{
  display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:#fff;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.feature:hover{transform:translateY(-4px);box-shadow:0 22px 46px -26px rgba(15,20,24,.45);}
.feature__img{position:relative;overflow:hidden;background:var(--sand-2);}
.feature__img img{width:100%;height:240px;object-fit:cover;transition:transform .6s var(--ease);}
.feature:hover .feature__img img{transform:scale(1.06);}
.feature__tag{
  position:absolute;left:var(--s2);top:var(--s2);
  background:var(--amber);color:#0F1418;padding:.32rem .7rem;border-radius:3px;
  font-family:var(--font-display);font-size:.66rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
}
.feature__body{padding:var(--s3);display:flex;flex-direction:column;flex:1;}
.feature__body p{font-size:.96rem;color:var(--text-mute);}

/* ---------- Pinned build timeline ---------- */
.timeline{background:var(--ink);color:var(--on-dark);overflow:hidden;}
.timeline__stage{padding-block:var(--s6);}
@media(min-width:1024px) and (min-height:600px){
  .timeline__stage{min-height:100svh;display:flex;align-items:center;
    padding-block:var(--nav-h) var(--s3);}}
.timeline__grid{display:grid;gap:var(--s4);width:100%;}
@media(min-width:1024px){.timeline__grid{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:var(--s6);align-items:center;}}
.timeline__rail{position:relative;display:grid;gap:0;}
.tphase{
  position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s2);
  padding:var(--s2) 0;border-top:1px solid var(--line-dark);
}
.tphase:last-child{border-bottom:1px solid var(--line-dark);}
.tphase__dot{
  position:relative;width:36px;height:36px;border-radius:50%;
  border:2px solid var(--line-dark);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:.8rem;color:var(--on-dark-mute);
  background:var(--ink);transition:border-color .35s,color .35s,background .35s;flex:none;
}
.tphase__name{
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--on-dark-mute);
  letter-spacing:-.01em;transition:color .35s;
}
.tphase__days{
  font-size:.76rem;font-family:var(--font-display);font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:#7C8892;transition:color .35s;
}
.tphase.is-active .tphase__dot{border-color:var(--amber);background:var(--amber);color:#0F1418;}
.tphase.is-active .tphase__name{color:#fff;}
.tphase.is-active .tphase__days{color:var(--amber);}
.tphase.is-done .tphase__dot{border-color:var(--amber);color:var(--amber);}
/* The panel's only children are stacked absolutely, so it needs its own height
   — without one it collapses to zero and the whole phase image disappears.
   The first phase is visible from CSS alone, so the panel is never empty even
   when GSAP never runs (mobile, or a blocked CDN). */
.timeline__panel{
  position:relative;border-radius:var(--radius);overflow:hidden;background:var(--slate);
  height:clamp(300px,44vw,520px);
}
.timeline__panel [data-tl-img]{position:absolute;inset:0;opacity:0;}
.timeline__panel [data-tl-img]:first-of-type{opacity:1;}
.timeline__panel img{width:100%;height:100%;object-fit:cover;opacity:.62;}
.timeline__meter{
  position:absolute;left:0;right:0;bottom:0;padding:var(--s3);
  background:linear-gradient(180deg,transparent,rgba(15,20,24,.94) 55%);
}
.timeline__bar{height:4px;background:var(--line-dark);border-radius:4px;overflow:hidden;margin-bottom:var(--s2);}
.timeline__fill{height:100%;width:0;background:var(--amber);border-radius:4px;}
.timeline__caption{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#fff;}
.timeline__caption span{display:block;font-size:.76rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--amber);margin-bottom:.25rem;}
.timeline__note{margin-top:var(--s3);font-size:.95rem;color:#7C8892;max-width:60ch;}

/* ---------- Horizontal project rail ---------- */
.rail{background:var(--slate);color:var(--on-dark);overflow:hidden;}
.rail__viewport{padding-block:var(--s6);}
@media(min-width:1024px) and (min-height:600px){
  .rail__viewport{min-height:100svh;display:flex;align-items:center;
    padding-block:var(--nav-h) var(--s3);}
}
.rail__track{display:flex;gap:var(--s3);padding-inline:var(--s3);}
/* Not pinned (narrow OR short) => the rail scrolls natively instead. */
@media(max-width:1023px), (max-height:599px){
  .rail__track{
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:var(--s2);-webkit-overflow-scrolling:touch;
  }
  .rail__track>*{scroll-snap-align:center;}
}
.pcard{
  flex:0 0 min(84vw,420px);border-radius:var(--radius);overflow:hidden;
  background:var(--ink);border:1px solid var(--line-dark);
  display:flex;flex-direction:column;
}
.pcard__img{position:relative;overflow:hidden;}
.pcard__img img{width:100%;height:260px;object-fit:cover;transition:transform .6s var(--ease);}
.pcard:hover .pcard__img img{transform:scale(1.05);}
.pcard__tag{
  position:absolute;left:var(--s2);top:var(--s2);
  background:rgba(15,20,24,.82);border:1px solid rgba(255,255,255,.18);
  color:#fff;padding:.3rem .7rem;border-radius:3px;
  font-family:var(--font-display);font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.pcard__body{padding:var(--s3);}
.pcard__body h3{color:#fff;margin-bottom:.4rem;}
.pcard__body p{font-size:.95rem;color:var(--on-dark-mute);margin:0;}
.rail__hint{
  margin-top:var(--s3);padding-inline:var(--s3);
  font-family:var(--font-display);font-size:.72rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:#7C8892;
}

/* ---------- Gallery ---------- */
.gallery{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));}
.gitem{
  position:relative;overflow:hidden;border-radius:var(--radius);background:var(--sand-2);
  display:block;
}
.gitem img{width:100%;height:260px;object-fit:cover;transition:transform .6s var(--ease);}
.gitem:hover img{transform:scale(1.06);}
.gitem--tall img{height:420px;}
@media(min-width:768px){.gitem--wide{grid-column:span 2;}}
.gitem__cap{
  position:absolute;inset:auto 0 0;padding:var(--s3) var(--s2) var(--s2);
  background:linear-gradient(180deg,transparent,rgba(15,20,24,.9));
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:.92rem;
  transform:translateY(6px);opacity:0;transition:opacity .3s,transform .3s var(--ease);
}
.gitem:hover .gitem__cap{opacity:1;transform:none;}
.gitem__cap span{display:block;font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--amber);}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.75rem;max-width:860px;}
.faq details{
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  transition:border-color .25s;
}
.faq details[open]{border-color:var(--sand-2);}
.faq summary{
  list-style:none;cursor:pointer;padding:var(--s2) var(--s3);
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  display:grid;grid-template-columns:1fr 24px;gap:var(--s2);align-items:center;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";width:12px;height:12px;justify-self:center;
  border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px);}
.faq__a{padding:0 var(--s3) var(--s3);}
.faq__a p{margin:0;color:var(--text-mute);font-size:.97rem;}

/* ---------- CTA banner ---------- */
.ctaband{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate;}
.ctaband__media{position:absolute;inset:0;z-index:-2;}
.ctaband__media img{width:100%;height:100%;object-fit:cover;}
.ctaband::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,rgba(15,20,24,.94),rgba(29,38,46,.86));
}
.ctaband__inner{padding-block:var(--s6);text-align:center;}
.ctaband h2{color:#fff;max-width:20ch;margin-inline:auto;}
.ctaband p{margin:var(--s2) auto 0;color:#CDD5DA;max-width:56ch;}
.ctaband .btn-row{justify-content:center;}

/* ---------- Forms ---------- */
/* A grid/flex item's automatic minimum size is its MIN-CONTENT width, and a
   <select>'s min-content is its widest <option>. Without min-width:0 the track
   refuses to shrink and the whole page overflows on a 360px screen — which is
   exactly what happened here: 408px of content in a 360px viewport. */
.grid>*,.split>*,.contact-grid>*,.steps>*,.form>*{min-width:0;}
.form{display:grid;gap:var(--s2);}
.field{display:grid;gap:.4rem;min-width:0;}
.field label{
  font-family:var(--font-display);font-size:.78rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-mute);
}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;color:var(--text);min-width:0;max-width:100%;
  padding:.8rem .95rem;border:1px solid var(--line);border-radius:6px;background:#fff;
  min-height:48px;transition:border-color .2s,box-shadow .2s;width:100%;
}
.field textarea{min-height:132px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(226,102,42,.16);
}
.field__hint{font-size:.95rem;color:var(--text-mute);}
.form__note{font-size:.95rem;color:var(--text-mute);margin:0;}

/* ---------- Contact panel ---------- */
.contact-grid{display:grid;gap:var(--s4);}
@media(min-width:960px){.contact-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s5);}}
.infocard{background:var(--ink);color:var(--on-dark);border-radius:var(--radius);padding:var(--s4);}
.infocard h3{color:#fff;margin-bottom:var(--s2);}
.infolist{list-style:none;margin:0 0 var(--s3);padding:0;display:grid;gap:var(--s2);}
.infolist li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:var(--s2);align-items:start;min-width:0;}
.infolist li>div{min-width:0;}
.infolist svg{width:20px;height:20px;color:var(--amber);margin-top:4px;}
.infolist b{display:block;font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#7C8892;margin-bottom:.15rem;}
/* The email address is a 33-character unbreakable token; on a 360px screen its
   min-content width alone pushed the page 16px wide. Let long tokens break. */
.infolist a,.infolist span{color:var(--on-dark);font-size:.98rem;line-height:1.5;overflow-wrap:anywhere;}
.infolist a:hover{color:var(--amber);}

/* ---------- Calculator ---------- */
.calc{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s4);box-shadow:0 22px 48px -30px rgba(15,20,24,.35);
}
.calc__out{
  margin-top:var(--s3);padding:var(--s3);border-radius:6px;
  background:var(--ink);color:#fff;text-align:center;
}
.calc__amount{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(2rem,5vw,3rem);letter-spacing:-.035em;color:var(--amber);line-height:1.05;
}
.calc__amount-lbl{display:block;font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#7C8892;margin-bottom:.4rem;font-family:var(--font-display);}
.calc__breakdown{margin-top:.75rem;font-size:.88rem;color:var(--on-dark-mute);}
.calc__err{color:var(--amber-hi);font-size:.9rem;margin-top:.5rem;min-height:1.2em;}

/* ---------- Steps ---------- */
.steps{display:grid;gap:var(--s3);counter-reset:step;}
@media(min-width:768px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s4);}}
.step{
  position:relative;padding-left:var(--s5);counter-increment:step;
}
.step::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--amber);
  letter-spacing:-.02em;
}
.step::after{
  content:"";position:absolute;left:2px;top:2rem;bottom:-.5rem;width:1px;background:var(--line);
}
.step:last-child::after{display:none;}
.step h3{font-size:1.05rem;margin-bottom:.4rem;}
.step p{font-size:.96rem;color:var(--text-mute);margin:0;}
.bg-ink .step p,.bg-slate .step p{color:var(--on-dark-mute);}
.bg-ink .step h3,.bg-slate .step h3{color:#fff;}
.bg-ink .step::after,.bg-slate .step::after{background:var(--line-dark);}

/* ---------- Grading cards (CIDB) ---------- */
.grade{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--amber);
  border-radius:var(--radius);padding:var(--s3);height:100%;
}
.grade__code{
  font-family:var(--font-display);font-weight:800;font-size:2rem;letter-spacing:-.03em;
  color:var(--ink);line-height:1;
}
.grade__code sup{font-size:.42em;color:var(--amber);letter-spacing:.06em;vertical-align:super;font-weight:700;}
.grade h3{margin:.5rem 0 .6rem;font-size:1.05rem;}
.grade p{font-size:.96rem;color:var(--text-mute);margin-bottom:var(--s2);}
.grade__meta{
  font-family:var(--font-display);font-size:.68rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-mute);border-top:1px solid var(--line);padding-top:.75rem;
}

/* ---------- Data table ---------- */
.dl{display:grid;gap:0;border-top:1px solid var(--line-dark);}
.dl div{
  display:grid;grid-template-columns:minmax(0,1fr);gap:.15rem;
  padding:.85rem 0;border-bottom:1px solid var(--line-dark);
}
@media(min-width:600px){.dl div{grid-template-columns:200px minmax(0,1fr);gap:var(--s2);align-items:baseline;}}
.dl dt{
  font-family:var(--font-display);font-size:.7rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:#7C8892;margin:0;
}
.dl dd{margin:0;color:var(--on-dark);font-size:.98rem;}
.dl dd b{color:var(--amber);font-weight:700;}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--on-dark-mute);padding-block:var(--s6) var(--s3);}
/* Clear the fixed WhatsApp float so the last footer line is never sitting
   underneath it at the bottom of the page. This is NOT a touch-only problem —
   at 1280 and 1440 the container reaches far enough right that the float lands
   on "Serving Polokwane · Bendor …" too. */
.footer{padding-bottom:calc(var(--s3) + 72px);}
.footer__grid{display:grid;gap:var(--s4);}
@media(min-width:768px){.footer__grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--s4);}}
.footer h4{color:#fff;font-family:var(--font-display);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--s2);}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;}
.footer a{font-size:.96rem;transition:color .2s;}
.footer a:hover{color:var(--amber);}
.footer p{font-size:.96rem;}
.footer__brand img{height:72px;width:auto;margin-bottom:var(--s2);}
.footer__bottom{
  margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:space-between;align-items:center;
  font-size:.88rem;color:#78848D;
}
.footer__bottom a:hover{color:var(--amber);}

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed;right:16px;bottom:16px;z-index:900;
  display:flex;align-items:center;gap:.6rem;
  height:56px;padding:0 1.1rem 0 .85rem;border-radius:100px;
  background:#25D366;color:#062d17;
  font-family:var(--font-display);font-weight:700;font-size:.9rem;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.5);
  transition:transform .22s var(--ease),box-shadow .22s;
}
.wa-float:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 38px -8px rgba(37,211,102,.6);}
.wa-float svg{width:26px;height:26px;flex:none;}
.wa-float span{display:none;}
@media(min-width:480px){.wa-float span{display:inline;}}
@media(min-width:1024px) and (max-width:1279px){
  :root{--wa-reserve:81px;}                 /* 57px circle + 24px offset */
  .wa-float span{display:none;}
  .wa-float{padding:0;width:56px;justify-content:center;}
}
@media(min-width:768px){.wa-float{right:24px;bottom:24px;}}

/* ---------- Notes / disclosure ---------- */
.note{
  border-left:3px solid var(--amber);background:var(--sand);
  padding:var(--s2) var(--s3);border-radius:0 6px 6px 0;font-size:.96rem;color:var(--text-mute);
}
.note p:last-child{margin-bottom:0;}
.note strong{color:var(--text);}

/* ==========================================================================
   TOUCH TARGETS
   Below the desktop breakpoint every link is a thumb target. Footer and contact
   links were rendering 19px tall — legible, but not reliably tappable.
   ========================================================================== */
@media (max-width:1023px){
  .footer ul a,
  .infolist a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .infolist a{min-height:40px;}
  .footer ul{gap:.15rem;}
  .form__note a{display:inline-block;padding-block:.35rem;}
}

/* ==========================================================================
   SHORT DESKTOP VIEWPORTS
   A 1440x720 or 1280x800 laptop is the common case, not the exception. At those
   heights the hero pushed "Get a Free Quote" below the fold and the pinned
   timeline ran taller than the space between the nav and the bottom of the
   screen. Compress the full-height stages rather than let them overflow.
   ========================================================================== */
/* Both pinned stages are sized against min(width, height) for the same reason
   the hero is: a six-phase rail plus a heading and an intro is simply taller
   than a 500px window, and stepping it down at two arbitrary breakpoints left
   it overflowing everywhere in between. */
@media (min-width:1024px){
  .timeline__stage h2,.rail h2{font-size:clamp(1.35rem, min(2.7vw, 4.3svh), 2.6rem);}
  .timeline__stage .eyebrow{margin-bottom:clamp(.1rem,.6svh,.5rem);}
  .timeline__grid{gap:clamp(1rem,3svh,4rem) var(--s6);}
  .timeline__intro{
    font-size:clamp(.95rem, min(1.1vw, 1.9svh), 1.05rem);   /* 15.2px floor */
    margin-top:clamp(.4rem,1.4svh,1rem);margin-bottom:clamp(.4rem,1.6svh,1.5rem);
  }
  .tphase{
    padding:clamp(.26rem,1.05svh,1rem) 0;
    grid-template-columns:clamp(38px,5.2svh,56px) minmax(0,1fr);
  }
  .tphase__dot{
    width:clamp(24px,4svh,36px);height:clamp(24px,4svh,36px);
    font-size:clamp(.58rem,1.2svh,.8rem);
  }
  .tphase__name{font-size:clamp(.82rem, min(1.05vw, 1.8svh), 1.02rem);}
  .tphase__days{font-size:clamp(.6rem,1.15svh,.76rem);}
  .timeline__panel{height:clamp(150px,34svh,520px);}
  .timeline__note{
    font-size:clamp(.95rem, min(1vw, 1.7svh), .98rem);      /* 15.2px floor */
    margin-top:clamp(.45rem,1.6svh,1.5rem);
  }

  .pcard__img img{height:clamp(120px,26svh,260px);}
  .pcard__body{padding:clamp(.7rem,2svh,1.5rem) var(--s3) clamp(.9rem,2.2svh,1.5rem);}
  .rail__track{gap:clamp(.75rem,2vw,1.5rem);}
}

/* Below ~560px of page there is no room for supplementary copy next to a
   six-phase rail. The heading and the phases carry the meaning; the intro
   sentence is the part that can go. */


/* ==========================================================================
   MOTION — fail-open. Nothing is hidden unless JS has confirmed GSAP loaded
   and added .gsap-ready to <html>. If the CDN fails, the page renders whole.
   ========================================================================== */
.gsap-ready [data-anim]{opacity:0;}
.gsap-ready [data-anim="up"]{transform:translateY(24px);}
.gsap-ready [data-anim="mask"] .line-in{transform:translateY(105%);}
.gsap-ready [data-anim="wipe"]{opacity:1;clip-path:inset(0 0 100% 0);}
.gsap-ready [data-anim="scale"] img{transform:scale(1.14);}

.mask{display:block;overflow:hidden;}
.mask .line-in{display:block;will-change:transform;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .gsap-ready [data-anim],
  .gsap-ready [data-anim="wipe"]{opacity:1!important;transform:none!important;clip-path:none!important;}
  .gsap-ready [data-anim="mask"] .line-in,
  .gsap-ready [data-anim="scale"] img{transform:none!important;}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}