/* ═══════════════════════════════════════════════════════════════
   BIAFO INDUSTRIES LIMITED — Shared Stylesheet
   Version: 1.1 · November 2026
   Applies to: all inner pages
   Homepage (index.html) embeds its own extended CSS inline — kept
   in sync with this file's typography, contrast and button rules.

   v1.1 — general pass requested by Maryum:
     1) small text sizes raised throughout, especially nav + footer
     2) low-opacity / low-contrast text darkened or brightened
     3) buttons standardized — .form-submit now matches .btn-primary
        exactly, instead of each page keeping its own slightly
        different copy
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────── */
:root{
  --red:#BA160C;
  --red-deep:#8A0E07;
  --amber:#FF7228;
  /* grey-brown — brand colour, matches the brochure; the second button when two sit side by side */
  --clay:#998670;
  --clay-deep:#716251;
  --ink:#161412;
  --ink-mid:#3A3230;
  --ink-light:#615B57;
  --rule:#D8D3CD;
  --paper:#F6F4F0;
  --paper-warm:#EDEAE4;
  --white:#FAFAF8;
  --nav-top-h:36px;
  --nav-main-h:62px;
  --nav-total-h:98px;
  --section-gap:56px;
  --section-pad:100px;
  --page-max:1200px;
  --page-pad:40px;
}

/* ── RESET ───────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Barlow',sans-serif;
  background:var(--white);
  color:var(--ink);
  overflow-x:hidden;
  padding-top:var(--nav-total-h);
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* ── TWO-TIER NAV ─────────────────────────────────────────────── */
header{
  position:fixed;top:0;left:0;right:0;z-index:200;
}
.nav-top{
  height:var(--nav-top-h);
  background:var(--ink);
  display:flex;align-items:center;
}
.nav-top-inner{
  max-width:var(--page-max);margin:0 auto;padding:0 54px 0 40px;
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:28px;
}
.nav-top-right{position:relative;top:7px;}
.nav-top-right a{
  font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber);text-decoration:none;
  padding:3px 7px;margin:-3px -7px;border-radius:2px;
  background:transparent;box-shadow:none;
  transition:color .2s,background .2s,box-shadow .2s;
}
.nav-top-right a:hover{
  color:var(--white);
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 3px rgba(0,0,0,.4);
}
.nav-top-right a.active{color:var(--white);}
.nav-main{
  height:var(--nav-main-h);
  background:var(--ink);
  display:flex;align-items:center;
}
.nav-main-inner{
  max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad);
  width:100%;display:flex;align-items:center;justify-content:space-between;
}
.nav-logo-wrap{
  display:flex;align-items:center;position:relative;
  margin-top:calc(-1 * var(--nav-top-h));z-index:10;
}
.nav-logo-wrap img{
  height:calc(var(--nav-main-h) + var(--nav-top-h));width:auto;display:block;
}
nav{display:flex;align-items:center;gap:4px;}
nav a{
  font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.78);text-decoration:none;
  padding:8px 14px;
  transition:color .2s,background .2s;position:relative;
}
nav a:hover{color:var(--white);background:rgba(255,255,255,.08);}
nav a.active{color:var(--white);}
nav a[data-tip]::before{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  font-family:'Barlow',sans-serif;font-size:12px;font-weight:400;letter-spacing:.01em;
  color:var(--ink);background:#C8C4BE;
  padding:5px 10px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s;z-index:300;
  text-transform:none;
}
nav a[data-tip]:hover::before{opacity:1;}

/* ── INNER PAGE HEADER BAND ───────────────────────────────────── */
/* Dark ink band below nav with page title — used on all inner pages */
.page-header{
  background:var(--ink);
  padding:72px 0 64px;
  position:relative;
  overflow:hidden;
}
.page-header::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:1px;background:rgba(255,255,255,.06);
}
.page-header-inner{
  max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad);
}
.page-eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber);margin-bottom:16px;
  display:flex;align-items:center;gap:10px;
}
.page-eyebrow::before{content:'';width:20px;height:1px;background:var(--amber);flex-shrink:0;}
.page-title{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(42px,5vw,68px);text-transform:uppercase;
  letter-spacing:-.01em;line-height:.92;color:var(--white);
  max-width:700px;
}
.page-subtitle{
  font-size:15px;font-weight:300;line-height:1.78;
  color:rgba(255,255,255,.62);margin-top:24px;max-width:560px;
}

/* ── SECTION PRIMITIVES ───────────────────────────────────────── */
.section-eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:16px;
  display:flex;align-items:center;gap:10px;
}
.section-eyebrow::before{content:'';width:20px;height:1px;flex-shrink:0;}
.section-eyebrow.red{color:var(--red);}
.section-eyebrow.red::before{background:var(--red);}
.section-eyebrow.amber{color:var(--amber);}
.section-eyebrow.amber::before{background:var(--amber);}
.section-title{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(32px,3.5vw,48px);text-transform:uppercase;
  letter-spacing:-.01em;line-height:.95;color:var(--ink);
  margin-bottom:var(--section-gap);
}
.section-title.white{color:var(--white);}
.section-title.sm{font-size:clamp(24px,2.5vw,34px);}
.t-body{font-size:15px;font-weight:400;line-height:1.78;color:var(--ink-mid);}
.t-body.light{color:rgba(255,255,255,.68);}

/* ── INNER PAGE LAYOUT ────────────────────────────────────────── */
/* Standard content wrapper */
.inner{
  max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad);
}
/* Standard section padding */
.section{padding:var(--section-pad) 0;}
.section.ink{background:var(--ink);}
.section.paper{background:var(--paper);}
.section.paper-warm{background:var(--paper-warm);}
.section.white{background:var(--white);}
.section.grey{background:#E3E1DD;}
/* Two-column grid — standard */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.two-col.center{align-items:center;}
/* Three-column grid */
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
/* Narrow content column — for text-heavy pages */
.col-narrow{max-width:680px;}
/* Rule divider */
.rule{height:1px;background:var(--rule);margin:var(--section-gap) 0;}
.rule.faint{background:rgba(255,255,255,.06);}

/* ── TYPOGRAPHY UTILITIES ─────────────────────────────────────── */
.mono{font-family:'IBM Plex Mono',monospace;}
.condensed{font-family:'Barlow Condensed',sans-serif;}
.label{
  font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-light);
}
.label.white{color:rgba(255,255,255,.55);}
/* Large pull-quote / statement */
.statement{
  font-family:'Barlow Condensed',sans-serif;font-weight:400;
  font-size:clamp(20px,2.2vw,28px);text-transform:uppercase;
  letter-spacing:.03em;line-height:1.4;color:var(--ink-mid);
}
.statement.white{color:rgba(255,255,255,.72);}

/* ── BUTTONS ─────────────────────────────────────────────────── */
/* One button shape site-wide, per the client's note: every button —
   whatever it used to be called — is now the same filled block.
   .btn-primary / .form-submit: the standard red, used whenever a
   screen has a single button.
   .btn-secondary: a muted clay red, used only for the SECOND button
   when two sit side by side (first stays standard red). .btn-ghost
   is kept as an alias so any old markup still using that class name
   renders identically to .btn-secondary rather than as a stray
   underlined link. */
.btn-primary,
.form-submit,
.btn-secondary,
.btn-ghost{
  font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--white);
  padding:13px 30px;text-decoration:none;display:inline-flex;align-items:center;gap:9px;
  border:none;cursor:pointer;
  transition:background .2s,transform .15s;
}
.btn-primary,
.form-submit{background:var(--red);}
.btn-primary:hover,
.form-submit:hover{background:var(--red-deep);transform:translateY(-1px);}
.btn-secondary,
.btn-ghost{background:var(--clay);}
.btn-secondary:hover,
.btn-ghost:hover{background:var(--clay-deep);transform:translateY(-1px);}

/* ── DATA / STAT BLOCK ────────────────────────────────────────── */
.stat-block{display:flex;flex-direction:column;gap:4px;}
.stat-n{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(40px,5vw,64px);letter-spacing:-.02em;line-height:1;
  color:var(--red);
}
.stat-l{
  font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-light);
}

/* ── CARD PRIMITIVES ─────────────────────────────────────────── */
.card{
  background:var(--white);border:1px solid var(--rule);
  padding:36px 32px;position:relative;
  transition:border-color .2s;
}
.card:hover{border-color:var(--red);}
.card.ink{background:var(--ink);border-color:rgba(255,255,255,.06);}
.card.ink:hover{border-color:rgba(186,22,12,.4);}
/* Top accent bar on hover */
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s;
}
.card:hover::before{transform:scaleX(1);}

/* ── CONTENT HOOK PLACEHOLDER ────────────────────────────────── */
/* Visible in browser as a dashed box, stripped at launch — a dev-only
   marker, deliberately left low-contrast so it never reads as content */
.content-hook{
  border:1px dashed rgba(186,22,12,.3);
  background:rgba(186,22,12,.03);
  padding:32px;
  display:flex;flex-direction:column;gap:8px;
  position:relative;
}
.content-hook::before{
  content:'CONTENT HOOK';
  font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.2em;
  color:rgba(186,22,12,.5);position:absolute;top:10px;right:12px;
}
.content-hook p{
  font-family:'IBM Plex Mono',monospace;font-size:11px;
  color:rgba(186,22,12,.45);line-height:1.7;
}

/* ── SCROLL REVEAL ───────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ── KEYFRAMES ───────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* ── FOOTER ──────────────────────────────────────────────────── */
footer{background:var(--ink);}
.footer-main{
  max-width:var(--page-max);margin:0 auto;
  padding:72px var(--page-pad) 48px;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:56px;
}
.footer-brand-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--white);
}
.footer-social{display:flex;gap:14px;margin-top:14px;margin-bottom:4px;}
.social-icon{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.55);border:1px solid rgba(255,255,255,.16);
  transition:color .2s,border-color .2s;
}
.social-icon:hover{color:rgba(255,255,255,.78);border-color:rgba(255,255,255,.38);}
.footer-address{font-size:13px;font-weight:300;line-height:1.9;color:rgba(255,255,255,.55);margin-top:12px;}
.footer-col-title{
  font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.2em;color:rgba(255,255,255,0.55);
  text-transform:uppercase;margin-bottom:18px;
}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:9px;}
.footer-links a{
  font-size:13px;font-weight:300;color:rgba(255,255,255,.58);
  text-decoration:none;transition:color .2s;
}
.footer-links a:hover{color:rgba(255,255,255,.92);}
.footer-bottom{
  max-width:var(--page-max);margin:0 auto;
  padding:20px var(--page-pad);
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-badges{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.badge{
  font-family:'IBM Plex Mono',monospace;font-size:9px;
  letter-spacing:.13em;color:rgba(255,255,255,0.55);
  text-transform:uppercase;border:1px solid rgba(255,255,255,.16);padding:5px 10px;
  text-decoration:none;transition:color .2s,border-color .2s;display:inline-block;
}
a.badge:hover{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.32);}
.footer-legal{
  font-family:'IBM Plex Mono',monospace;font-size:9px;
  letter-spacing:.1em;color:rgba(255,255,255,0.55);text-transform:uppercase;
}

/* ── BREADCRUMB — fixed in top nav bar, left side ───────────── */
.breadcrumb{
  display:flex;align-items:center;gap:6px;
  padding-left:180px;
}
.breadcrumb a,.breadcrumb span{
  font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.52);text-decoration:none;
  transition:color .2s;
}
.breadcrumb a:hover{color:rgba(255,255,255,.85);}
.breadcrumb span.current{color:rgba(255,255,255,.75);}
.breadcrumb-sep{color:rgba(255,255,255,0.55)!important;letter-spacing:0!important;}
.nav-top-right{display:flex;align-items:center;gap:28px;margin-left:auto;}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE + ACTIVE NAV STATE  (added Nov 2026)
   Desktop (>1024px) design is unchanged. Everything below only
   adapts the existing design to tablet / phone widths.
   ═══════════════════════════════════════════════════════════════ */

/* Clear "you are here" state for the current page's nav link */
nav a.active{background:rgba(255,255,255,.1);}
nav a.active::after{
  content:'';position:absolute;left:14px;right:14px;bottom:0;
  height:2px;background:var(--amber);
}
.nav-top-right a.active{box-shadow:inset 0 -2px 0 var(--white);}

/* Mobile menu button + extra links are injected by nav.js; hidden on desktop */
.nav-toggle{display:none;}
nav a.nav-extra{display:none;}

img,video{max-width:100%;}

@media(max-width:1024px){
  :root{--page-pad:28px;--section-pad:80px;}
  .nav-top-inner{padding:0 28px;}
  nav a{padding:8px 10px;letter-spacing:.1em;}
  nav a.active::after{left:10px;right:10px;}
  .two-col{gap:48px;}
  .three-col{grid-template-columns:repeat(2,1fr);gap:32px;}
  .footer-main{gap:36px;}
}

@media(max-width:900px){
  :root{--page-pad:24px;--section-pad:64px;--section-gap:40px;}

  /* header: breadcrumb stays, Home/Contact move into the menu */
  .nav-top-inner{padding:0 24px;min-width:0;}
  .nav-top-right{display:none;}
  .breadcrumb{padding-left:120px;display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .nav-main-inner{padding:0 24px;}

  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:0 11px;background:none;border:0;cursor:pointer;
  }
  .nav-toggle span{display:block;height:2px;background:var(--white);transition:transform .25s,opacity .2s;}
  header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  header.nav-open .nav-toggle span:nth-child(2){opacity:0;}
  header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .nav-toggle:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}

  header nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink);padding:6px 24px 18px;
    border-top:1px solid rgba(255,255,255,.1);box-shadow:0 18px 30px rgba(0,0,0,.35);
    max-height:calc(100vh - var(--nav-total-h));overflow-y:auto;
  }
  header.nav-open nav{display:flex;}
  header nav a{font-size:15px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.07);}
  header nav a:hover{background:none;}
  header nav a.active{background:none;color:var(--amber);}
  header nav a.active::after{display:none;}
  header nav a.nav-extra{display:block;}
  nav a[data-tip]::before{display:none;}

  /* layout grids */
  .two-col,.three-col{grid-template-columns:1fr;gap:40px;}
  .page-header{padding:52px 0 48px;}
  .footer-main{grid-template-columns:1fr 1fr;gap:36px;padding:56px var(--page-pad) 36px;}
  .footer-main > div:first-child{grid-column:1 / -1;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px;}
}

@media(max-width:560px){
  :root{--page-pad:20px;--section-pad:52px;--section-gap:32px;}
  .nav-top-inner,.nav-main-inner{padding:0 20px;}
  header nav{padding:6px 20px 18px;}
  .breadcrumb{padding-left:112px;}
  .page-header{padding:40px 0 36px;}
  .page-subtitle{font-size:14px;}
  .footer-main{grid-template-columns:1fr;gap:30px;}
  .btn-primary,.form-submit,.btn-secondary,.btn-ghost{padding:12px 22px;}
}