/* ============================================================
   KEVLAR.AFRICA — Industrial design system
   ============================================================ */
:root{
  --accent:#FF6A1A;
  --accent-hi:#FF8438;
  --accent-deep:#D9530A;

  --bg:#0A0A0B;          /* base near-black */
  --bg-2:#0E0E10;        /* section alt */
  --panel:#141417;       /* card / concrete panel */
  --panel-2:#191A1E;
  --line:#26262B;        /* hairline borders */
  --line-2:#34343B;

  --fg:#F4F3F0;          /* warm white */
  --fg-2:#B9B8B4;        /* secondary */
  --fg-3:#7C7B78;        /* muted / captions */

  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Archivo","Archivo Expanded",system-ui,sans-serif;

  --maxw:1320px;
  --pad:clamp(20px,5vw,72px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--accent);color:#000;}

/* Subtle concrete grain */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.018), transparent 42%),
    radial-gradient(circle at 84% 78%, rgba(255,106,26,.05), transparent 46%);
}

/* ---------- Layout primitives ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);width:100%;}
.section{position:relative;z-index:1;padding-block:clamp(64px,9vw,128px);}
.section--alt{background:var(--bg-2);}
.section--line{border-top:1px solid var(--line);}

.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);display:inline-block;}
.eyebrow--muted{color:var(--fg-3);}
.eyebrow--muted::before{background:var(--line-2);}

h1,h2,h3{font-weight:800;line-height:1.02;letter-spacing:-.02em;margin:0;text-transform:uppercase;}
.h-display{font-size:clamp(48px,9.5vw,140px);font-weight:900;letter-spacing:-.035em;line-height:.92;}
.h1{font-size:clamp(38px,6vw,76px);}
.h2{font-size:clamp(30px,4.4vw,56px);}
.h3{font-size:clamp(20px,2.2vw,28px);letter-spacing:-.01em;}
.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--fg-2);font-weight:400;max-width:62ch;}
.dot{color:var(--accent);}
.muted{color:var(--fg-3);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;cursor:pointer;border:none;
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:16px 26px;background:var(--accent);color:#0A0A0B;
  transition:background .18s ease,transform .18s ease,color .18s ease;
  clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px));
}
.btn:hover{background:var(--accent-hi);transform:translateY(-2px);}
.btn .arrow{transition:transform .18s ease;}
.btn:hover .arrow{transform:translateX(4px);}
.btn--ghost{
  background:transparent;color:var(--fg);border:1px solid var(--line-2);
  clip-path:none;
}
.btn--ghost:hover{background:var(--panel-2);border-color:var(--accent);color:var(--fg);transform:translateY(-2px);}

/* ---------- Header / nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,11,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px;}
.nav__logo{display:flex;align-items:center;gap:0;}
.nav__logo img{height:26px;width:auto;}
.nav__links{display:flex;align-items:center;gap:6px;}
.nav__links a{
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-2);padding:9px 14px;transition:color .15s ease;position:relative;
}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--fg);}
.nav__links a[aria-current="page"]::after{
  content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--accent);
}
.nav__cta{margin-left:8px;}
.nav__burger{display:none;background:none;border:1px solid var(--line-2);color:var(--fg);
  width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center;}
.nav__burger svg{width:20px;height:20px;}

@media(max-width:900px){
  .nav__links{
    position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);padding:8px var(--pad) 20px;
    transform:translateY(-120%);transition:transform .28s ease;
  }
  .nav__links[data-open="true"]{transform:translateY(0);}
  .nav__links a{padding:15px 0;border-bottom:1px solid var(--line);font-size:14px;}
  .nav__links a[aria-current="page"]::after{display:none;}
  .nav__cta{margin:14px 0 0;}
  .nav__cta .btn{width:100%;justify-content:center;}
  .nav__burger{display:inline-flex;}
}

/* ---------- Footer ---------- */
.footer{position:relative;z-index:1;background:#070708;border-top:1px solid var(--line);padding-block:clamp(48px,6vw,80px);}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;align-items:start;}
.footer img.flogo{height:30px;margin-bottom:22px;}
.footer__col h4{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin:0 0 16px;font-weight:500;}
.footer__col a,.footer__col p{display:block;color:var(--fg-2);font-size:15px;margin:0 0 11px;transition:color .15s;}
.footer__col a:hover{color:var(--accent);}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--fg-3);}
@media(max-width:760px){.footer__top{grid-template-columns:1fr;gap:34px;}}

/* ---------- Generic cards / grids ---------- */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);}
.divisions{grid-template-columns:repeat(2,1fr);}
@media(max-width:760px){.divisions{grid-template-columns:1fr;}}

.dcard{
  position:relative;background:var(--panel);padding:clamp(28px,3.4vw,46px);
  display:flex;flex-direction:column;gap:18px;min-height:300px;
  transition:background .2s ease;overflow:hidden;
}
.dcard:hover{background:var(--panel-2);}
.dcard__num{font-family:var(--mono);font-size:13px;color:var(--fg-3);letter-spacing:.1em;}
.dcard__name{font-size:clamp(26px,2.8vw,38px);}
.dcard__name small{display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;margin-bottom:8px;}
.dcard p{color:var(--fg-2);font-size:15.5px;margin:0;max-width:42ch;}
.dcard__go{margin-top:auto;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);}
.dcard__go .arrow{color:var(--accent);transition:transform .2s ease;}
.dcard:hover .dcard__go .arrow{transform:translateX(6px);}
.dcard::after{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;
  background:var(--accent);opacity:0;transition:opacity .2s ease;
  clip-path:polygon(100% 0,100% 100%,0 0);}
.dcard:hover::after{opacity:.12;}

/* ---------- Image placeholders ---------- */
.ph{
  position:relative;background:
    repeating-linear-gradient(135deg,#141417 0 14px,#0f0f12 14px 28px);
  border:1px solid var(--line);display:flex;align-items:flex-end;
  color:var(--fg-3);overflow:hidden;
}
.ph::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 40%,rgba(255,106,26,.06),transparent 60%);}
.ph__label{position:relative;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:14px 16px;display:flex;align-items:center;gap:9px;}
.ph__label::before{content:"";width:8px;height:8px;background:var(--accent);}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.stat{background:var(--bg);padding:clamp(24px,3vw,38px) clamp(20px,2.4vw,30px);}
.stat__n{font-size:clamp(36px,5vw,62px);font-weight:900;letter-spacing:-.03em;line-height:1;}
.stat__n .dot{color:var(--accent);}
.stat__l{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-top:12px;}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr);}}

/* ---------- Section heading row ---------- */
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,60px);}
.shead__t{max-width:24ch;}

/* ---------- Service list ---------- */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
@media(max-width:640px){.services{grid-template-columns:1fr;}}
.service{background:var(--bg);padding:22px clamp(18px,2.2vw,28px);display:flex;align-items:center;gap:16px;
  transition:background .15s ease;}
.service:hover{background:var(--panel);}
.service__i{font-family:var(--mono);font-size:12px;color:var(--accent);min-width:30px;}
.service span{font-size:16.5px;font-weight:500;letter-spacing:-.01em;}

/* ---------- Division hero band ---------- */
.dhero{position:relative;border-bottom:1px solid var(--line);overflow:hidden;}
.dhero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:stretch;min-height:clamp(420px,62vh,640px);}
.dhero__copy{padding:clamp(48px,7vw,96px) var(--pad) clamp(48px,7vw,96px) 0;display:flex;flex-direction:column;justify-content:center;}
.dhero__copy .inner{max-width:620px;margin-left:auto;width:100%;padding-left:var(--pad);}
.dhero__media{position:relative;border-left:1px solid var(--line);}
.dhero__media .ph{position:absolute;inset:0;border:none;}
@media(max-width:900px){.dhero__grid{grid-template-columns:1fr;min-height:0;}
  .dhero__copy{padding:clamp(40px,9vw,64px) var(--pad);}
  .dhero__copy .inner{padding-left:0;max-width:none;}
  .dhero__media{min-height:280px;border-left:none;border-top:1px solid var(--line);}}

/* chevron accent strip */
.chevron-strip{display:flex;gap:7px;}
.chevron-strip i{display:block;width:13px;height:26px;background:var(--accent);
  clip-path:polygon(0 0,55% 0,100% 50%,55% 100%,0 100%,45% 50%);opacity:.85;}
.chevron-strip i:nth-child(2){opacity:.55;}
.chevron-strip i:nth-child(3){opacity:.3;}

/* tag pills */
.tags{display:flex;flex-wrap:wrap;gap:10px;}
.tag{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 14px;border:1px solid var(--line-2);color:var(--fg-2);}
.tag--on{border-color:var(--accent);color:var(--accent);}

/* enquire band */
.enquire{position:relative;z-index:1;background:var(--accent);color:#0A0A0B;overflow:hidden;}
.enquire__inner{padding-block:clamp(56px,8vw,104px);display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;}
.enquire h2{color:#0A0A0B;letter-spacing:-.025em;}
.enquire p{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:rgba(10,10,11,.7);margin:0 0 18px;}
.enquire .btn{background:#0A0A0B;color:var(--accent);}
.enquire .btn:hover{background:#000;}
.enquire::after{content:"";position:absolute;right:-60px;top:50%;transform:translateY(-50%);
  width:340px;height:340px;background:rgba(10,10,11,.07);
  clip-path:polygon(0 0,55% 0,100% 50%,55% 100%,0 100%,45% 50%);}

/* ---------- Company sites directory ---------- */
.sites{position:relative;z-index:1;background:var(--bg);border-top:1px solid var(--line);padding-block:clamp(48px,6vw,84px);}
.sites .eyebrow{margin-bottom:clamp(20px,2.6vw,30px);}
.sites__list{border-top:1px solid var(--line);}
.site-link{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:20px 36px;flex-wrap:wrap;
  padding:clamp(20px,2.8vw,34px) 0 clamp(20px,2.8vw,34px) 0;border-bottom:1px solid var(--line);
  text-decoration:none;transition:padding-left .28s cubic-bezier(.2,.7,.2,1);}
.site-link::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c);
  transform:scaleY(0);transform-origin:top;transition:transform .28s ease;}
.site-link:hover{padding-left:clamp(16px,1.8vw,28px);}
.site-link:hover::before{transform:scaleY(1);}
.site-link__name{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:-.025em;
  font-size:clamp(30px,4.4vw,56px);line-height:1;color:var(--fg);transition:color .22s ease;}
.site-link:hover .site-link__name{color:var(--c);}
.site-link__url{font-family:var(--mono);font-size:clamp(13px,1.3vw,16px);letter-spacing:.06em;color:var(--fg-3);
  display:inline-flex;align-items:center;gap:12px;transition:color .22s ease;white-space:nowrap;}
.site-link:hover .site-link__url{color:var(--fg);}
.site-link__url .arrow{color:var(--c);transition:transform .22s ease;}
.site-link:hover .site-link__url .arrow{transform:translateX(6px);}

/* ---------- FAQ (answer-engine / AI search) ---------- */
.faq{border-top:1px solid var(--line);}
.faq__item{border-bottom:1px solid var(--line);padding:clamp(22px,3vw,34px) 0;
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(20px,4vw,64px);align-items:start;}
.faq__q{font-size:clamp(18px,1.9vw,24px);font-weight:700;letter-spacing:-.01em;text-transform:none;
  color:var(--fg);margin:0;line-height:1.2;}
.faq__a{color:var(--fg-2);font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.62;margin:0;max-width:62ch;}
.faq__a strong{color:var(--fg);font-weight:700;}
@media(max-width:760px){.faq__item{grid-template-columns:1fr;gap:10px;}}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}