/* ===== 247DRIVE — SHARED DESIGN SYSTEM ===== */
:root{
  --black:#0B0C0E;
  --graphite:#17191C;
  --red:#E11E2B;
  --red-dim:#9C1620;
  --paper:#F7F6F3;
  --steel:#71767C;
  --chrome:#D8D6D0;
  --white:#FFFFFF;
  --green:#1C8A4B;
  --amber:#B8730A;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--black);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:0;background:none;}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--red);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:20px;height:9px;
  background:var(--red);
  transform:skewX(-20deg);
  display:inline-block;
}
h1,h2,h3,.disp{
  font-family:'Big Shoulders Display',sans-serif;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:0.01em;
  line-height:0.92;
}
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}
section{padding:88px 0;}
@media(max-width:640px){ section{padding:56px 0;} .container{padding:0 20px;} }

/* ===== NAV ===== */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(11,12,14,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid #26282c;
}
.navwrap{
  max-width:1200px;margin:0 auto;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;
  height:76px;
}
.logo{display:flex;align-items:center;gap:10px;}
.logo-img{width:42px;height:42px;object-fit:contain;}
.logo-text{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:900;color:var(--white);
  font-size:22px;line-height:0.9;letter-spacing:0.01em;
}
.logo-text span{display:block;font-size:9px;font-weight:600;color:var(--steel);letter-spacing:0.28em;font-family:'IBM Plex Mono',monospace;}
nav{display:flex;align-items:center;gap:28px;}
nav ul{display:flex;gap:34px;}
nav a{
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase;
  color:#C9CBCE;
  position:relative;padding-bottom:4px;
}
nav a.active,nav a:hover{color:var(--white);}
nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--red);transition:width .25s ease;
}
nav a:hover::after,nav a.active::after{width:100%;}
.nav-cta{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:0.06em;text-transform:uppercase;
  background:var(--red);color:var(--white);
  padding:11px 20px;
  display:inline-block;
}
.navtoggle{display:none;color:var(--white);font-size:26px;background:none;border:0;}
@media(max-width:900px){
  nav ul{display:none;}
  nav .nav-cta{display:none;}
  .navtoggle{display:block;}
}

/* ===== BUTTONS ===== */
.btnrow{display:flex;gap:14px;flex-wrap:wrap;}
.btn{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;letter-spacing:0.06em;text-transform:uppercase;
  padding:15px 26px;display:inline-flex;align-items:center;gap:10px;
  border:1px solid transparent;transition:all .2s ease;
}
.btn-primary{background:var(--red);color:var(--white);}
.btn-primary:hover{background:var(--red-dim);}
.btn-outline{border-color:#45474B;color:var(--white);}
.btn-outline:hover{border-color:var(--white);}
.btn-dark{background:var(--black);color:var(--white);}
.btn-dark:hover{background:#000;}
.btn-ghost{border-color:var(--chrome);color:var(--black);}
.btn-ghost:hover{border-color:var(--black);}
.btn-sm{padding:9px 16px;font-size:11.5px;}
.btn[disabled]{opacity:.4;pointer-events:none;}

/* ===== DIVIDER ===== */
.rumble{display:flex;height:10px;}
.rumble span{flex:1;background:var(--black);}
.rumble span:nth-child(odd){background:var(--red);}

/* ===== BRAND STRIP ===== */
.brandstrip{background:var(--black);padding:34px 0;}
.brandstrip .container{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:28px;
}
.brandstrip .label{
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--steel);
  letter-spacing:0.12em;text-transform:uppercase;white-space:nowrap;
}
.brandlogos{display:flex;gap:44px;flex-wrap:wrap;align-items:center;}
.brandlogos span{
  font-family:'Big Shoulders Display',sans-serif;font-weight:800;
  font-size:22px;color:#5A5D62;letter-spacing:0.02em;
  transition:color .2s ease;
}
.brandlogos span:hover{color:var(--white);}

/* ===== SECTION HEAD ===== */
.sectionhead{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:44px;gap:24px;flex-wrap:wrap;
}
.sectionhead h2{font-size:clamp(30px,4vw,46px);}
.sectionhead p{color:var(--steel);max-width:360px;font-size:14.5px;line-height:1.6;}

/* ===== INVENTORY GRID / CARDS ===== */
.inv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:960px){.inv-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.inv-grid{grid-template-columns:1fr;}}
.card{background:var(--white);border:1px solid var(--chrome);display:flex;flex-direction:column;}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#e9e8e4;}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.card:hover .card-media img{transform:scale(1.06);}
.badge{
  position:absolute;top:12px;left:12px;
  background:var(--red);color:var(--white);
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:0.08em;text-transform:uppercase;padding:5px 10px;
}
.badge.status-reserved{background:var(--amber);}
.badge.status-sold{background:var(--steel);}
.card-body{padding:20px 20px 22px;}
.card-body h3{font-size:22px;margin-bottom:2px;}
.card-body .price{font-family:'IBM Plex Mono',monospace;color:var(--red);font-weight:600;font-size:16px;margin-bottom:16px;}
.spec-rows{
  display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;
  border-top:1px solid var(--chrome);border-bottom:1px solid var(--chrome);
  padding:14px 0;margin-bottom:16px;
}
.spec-rows div{display:flex;justify-content:space-between;color:var(--steel);}
.spec-rows div b{color:var(--black);font-weight:600;}
.card-actions{display:flex;gap:8px;}
.card-actions a,.card-actions button{
  flex:1;text-align:center;padding:11px 8px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  letter-spacing:0.05em;text-transform:uppercase;
}
.card-actions .enquire{background:var(--red);color:var(--white);}
.card-actions .whatsapp{background:var(--black);color:var(--white);}
.invfoot{margin-top:38px;text-align:center;}
.empty-state{
  border:1px dashed var(--chrome);padding:60px 20px;text-align:center;color:var(--steel);
  font-family:'IBM Plex Mono',monospace;font-size:13px;
}

/* ===== WHY / DARK BLOCKS ===== */
.why{background:var(--black);color:var(--white);}
.why .sectionhead h2{color:var(--white);}
.why .sectionhead p{color:var(--steel);}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#26282c;border:1px solid #26282c;}
@media(max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.why-grid{grid-template-columns:1fr;}}
.why-item{background:var(--black);padding:30px 26px;}
.why-item .num{font-family:'IBM Plex Mono',monospace;color:var(--red);font-size:12px;margin-bottom:16px;}
.why-item h3{font-size:21px;margin-bottom:10px;color:var(--white);}
.why-item p{font-size:13.5px;color:var(--steel);line-height:1.6;}

/* ===== SERVICES ===== */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.svc-grid{grid-template-columns:1fr;}}
.svc-card{border:1px solid var(--chrome);padding:26px 22px;background:var(--white);}
.svc-card .icon{width:38px;height:38px;background:var(--red);margin-bottom:18px;clip-path:polygon(20% 0,100% 0,80% 100%,0% 100%);}
.svc-card h3{font-size:19px;margin-bottom:8px;font-weight:800;}
.svc-card p{font-size:13.5px;color:var(--steel);line-height:1.6;}

/* ===== TESTIMONIALS ===== */
.testi{background:var(--paper);border-top:1px solid var(--chrome);border-bottom:1px solid var(--chrome);}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr;}}
.testi-card{background:var(--white);border:1px solid var(--chrome);padding:26px;}
.testi-card .quote{font-size:34px;color:var(--red);font-family:'Big Shoulders Display',sans-serif;line-height:0.6;margin-bottom:14px;}
.testi-card p.body{font-size:14px;color:#3A3C3F;line-height:1.65;margin-bottom:18px;}
.testi-name{font-family:'IBM Plex Mono',monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--steel);}

/* ===== ABOUT ===== */
.about-wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
@media(max-width:900px){.about-wrap{grid-template-columns:1fr;gap:34px;}}
.about-copy p{color:#3A3C3F;font-size:15px;line-height:1.75;margin-bottom:16px;}
.about-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:26px;}
.about-stats div{border-left:3px solid var(--red);padding-left:14px;}
.about-stats span{display:block;font-family:'Big Shoulders Display',sans-serif;font-size:32px;font-weight:800;}
.about-stats small{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);}
.about-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#e9e8e4;}
.about-media img{width:100%;height:100%;object-fit:cover;}

/* ===== CONTACT ===== */
.contact{background:var(--black);color:var(--white);}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact h2{color:var(--white);font-size:clamp(28px,4vw,42px);margin-bottom:18px;}
.contact p.lead{color:var(--steel);font-size:15px;line-height:1.7;margin-bottom:34px;max-width:420px;}
.info-row{display:flex;gap:16px;padding:18px 0;border-top:1px solid #26282c;}
.info-row:last-child{border-bottom:1px solid #26282c;}
.info-row .k{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--red);letter-spacing:.08em;text-transform:uppercase;width:110px;flex-shrink:0;padding-top:2px;}
.info-row .v{font-size:15px;color:var(--white);}
.info-row .v small{display:block;color:var(--steel);font-size:12.5px;margin-top:2px;}
.mapbox{border:1px solid #26282c;aspect-ratio:4/3;overflow:hidden;}
.mapbox iframe{width:100%;height:100%;border:0;filter:grayscale(0.3) contrast(1.05);}
form.qform{display:grid;gap:14px;margin-top:8px;}
form.qform input,form.qform select,form.qform textarea{
  background:#0e0f11;border:1px solid #2c2e33;color:var(--white);
  padding:13px 14px;font-family:'Inter',sans-serif;font-size:14px;
}
form.qform textarea{resize:vertical;min-height:80px;}
form.qform button{justify-self:start;margin-top:4px;}

/* ===== FOOTER ===== */
footer{background:#08090A;color:#8A8D91;padding:46px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px;}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr;}}
footer h4{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--white);letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;}
footer ul li{margin-bottom:10px;font-size:13.5px;}
footer ul li a:hover{color:var(--white);}
.footer-bottom{border-top:1px solid #202225;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.03em;}

/* ===== WHATSAPP FAB ===== */
.wa-fab{
  position:fixed;bottom:24px;right:24px;z-index:200;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.3);
}
.wa-fab svg{width:28px;height:28px;fill:#fff;}

/* ===== PAGE HEADER (inner pages) ===== */
.pagehead{background:var(--black);color:var(--white);padding:64px 0 44px;}
.pagehead h1{font-size:clamp(34px,5vw,58px);color:var(--white);margin-top:14px;}
.pagehead p{color:var(--steel);max-width:520px;margin-top:14px;font-size:15px;line-height:1.6;}
.crumbs{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--steel);letter-spacing:.06em;text-transform:uppercase;}
.crumbs a:hover{color:var(--white);}

/* ===== FILTER BAR (inventory page) ===== */
.filterbar{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  padding:18px;background:var(--white);border:1px solid var(--chrome);margin-bottom:32px;
}
.filterbar select,.filterbar input{
  font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  border:1px solid var(--chrome);padding:11px 12px;background:var(--paper);color:var(--black);
}
.filterbar .count{
  margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--steel);letter-spacing:.05em;
}

/* ===== ADMIN ===== */
.admin-shell{background:var(--paper);min-height:70vh;}
.admin-banner{
  background:#FCEEEE;border:1px solid #F3C7C9;color:#7A1420;
  padding:14px 18px;font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.7;
  margin-bottom:32px;
}
.admin-banner b{color:var(--red);}
.admin-grid{display:grid;grid-template-columns:400px 1fr;gap:32px;align-items:start;}
@media(max-width:960px){.admin-grid{grid-template-columns:1fr;}}
.admin-panel{background:var(--white);border:1px solid var(--chrome);padding:26px;position:sticky;top:96px;}
.admin-panel h3{font-size:24px;margin-bottom:4px;}
.admin-panel .sub{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--steel);text-transform:uppercase;letter-spacing:.06em;margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--steel);margin-bottom:6px;
}
.field input,.field select,.field textarea{
  width:100%;border:1px solid var(--chrome);padding:11px 12px;font-family:'Inter',sans-serif;font-size:14px;background:var(--paper);
}
.field textarea{resize:vertical;min-height:64px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.status-picker{display:flex;gap:8px;}
.status-picker button{
  flex:1;border:1px solid var(--chrome);padding:10px 6px;font-family:'IBM Plex Mono',monospace;
  font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--steel);
}
.status-picker button.active[data-s="available"]{background:var(--green);border-color:var(--green);color:#fff;}
.status-picker button.active[data-s="reserved"]{background:var(--amber);border-color:var(--amber);color:#fff;}
.status-picker button.active[data-s="sold"]{background:var(--steel);border-color:var(--steel);color:#fff;}

.dropzone{
  border:2px dashed var(--chrome);padding:26px;text-align:center;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--steel);
  background:var(--paper);transition:border-color .2s ease;
}
.dropzone.drag{border-color:var(--red);color:var(--red);}
.dropzone input{display:none;}
.thumbstrip{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.thumb{position:relative;width:64px;height:64px;border:1px solid var(--chrome);overflow:hidden;}
.thumb img{width:100%;height:100%;object-fit:cover;}
.thumb button{
  position:absolute;top:0;right:0;background:var(--red);color:#fff;width:18px;height:18px;
  font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.thumb.cover::after{
  content:"COVER";position:absolute;bottom:0;left:0;right:0;background:rgba(11,12,14,0.75);
  color:#fff;font-family:'IBM Plex Mono',monospace;font-size:7px;text-align:center;letter-spacing:.05em;padding:2px 0;
}
.admin-panel .formbtns{display:flex;gap:10px;margin-top:20px;}
.admin-panel .formbtns .btn{flex:1;justify-content:center;}

.admin-list h3{font-size:22px;margin-bottom:18px;}
.admin-row{
  display:grid;grid-template-columns:70px 1fr auto auto;gap:16px;align-items:center;
  background:var(--white);border:1px solid var(--chrome);padding:14px;margin-bottom:10px;
}
@media(max-width:640px){.admin-row{grid-template-columns:56px 1fr;grid-template-rows:auto auto;}}
.admin-row .thumb0{width:70px;height:56px;object-fit:cover;background:#e9e8e4;border:1px solid var(--chrome);}
.admin-row .meta h4{font-size:16px;font-family:'Inter',sans-serif;font-weight:700;text-transform:none;}
.admin-row .meta .sub{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--steel);margin-top:2px;}
.admin-row .pill{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;color:#fff;white-space:nowrap;
}
.pill.available{background:var(--green);}
.pill.reserved{background:var(--amber);}
.pill.sold{background:var(--steel);}
.admin-row .rowbtns{display:flex;gap:8px;}
.admin-row .rowbtns button{
  font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  padding:8px 12px;border:1px solid var(--chrome);
}
.admin-row .rowbtns button.del{color:var(--red);border-color:#f0c6c8;}

.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--black);color:#fff;padding:13px 22px;font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;letter-spacing:.04em;z-index:300;opacity:0;pointer-events:none;transition:all .25s ease;
  border-left:3px solid var(--red);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.backup-row{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap;}
.backup-row .btn{flex:1;justify-content:center;min-width:140px;}

@media(max-width:900px){
  nav{
    position:fixed;top:76px;left:0;right:0;
    background:var(--black);border-bottom:1px solid #26282c;
    max-height:0;overflow:hidden;transition:max-height .3s ease;
    flex-direction:column;align-items:stretch;gap:0;
  }
  nav.open{max-height:500px;}
  nav ul{
    display:flex!important;flex-direction:column;gap:0;
    padding:8px 32px 0;
  }
  nav ul li{border-top:1px solid #26282c;}
  nav a{display:block;padding:16px 0;font-size:13px;}
  nav .nav-cta{
    display:block!important;
    width:fit-content;
    margin:16px auto 20px;
    text-align:center;
  }
}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr!important;min-height:auto!important;}
  .hero-copy{padding:60px 20px 40px!important;margin-left:0!important;}
  .hero-media{clip-path:none!important;aspect-ratio:16/10;}
  .hero-stats{flex-wrap:wrap;gap:22px!important;}
}