/* ============================================================
   KNIFEMAKINGCOURSES.CO.ZA — design tokens
   Palette: forge charcoal / ember / bone / brass / steel
   Display: Bebas Neue (stamped, condensed — evokes etched steel)
   Body: Inter (clean, workshop-manual legible)
   Utility/spec: JetBrains Mono (spec-tag numbers & labels)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --charcoal:      #17140f;
  --charcoal-2:    #211c15;
  --steel:         #4b5157;
  --steel-light:   #c9cdd1;
  --ember:         #c1502e;
  --ember-dark:    #953c22;
  --bone:          #ede6d6;
  --bone-dim:      #d9d0ba;
  --brass:         #a8823c;

  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --radius: 2px;
  --max-w: 1180px;
  --edge: clamp(1.25rem, 4vw, 3rem);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background: var(--bone);
  color: var(--charcoal);
  font-family: var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family: var(--font-display); letter-spacing:0.01em; line-height:1.02; margin:0; }
p{ margin:0 0 1em; }

.wrap{ max-width: var(--max-w); margin:0 auto; padding-left: var(--edge); padding-right: var(--edge); }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember);
  display:flex; align-items:center; gap:0.6em;
}
.eyebrow::before{ content:''; width:1.4em; height:1px; background: var(--ember); display:inline-block; }

:focus-visible{ outline: 3px solid var(--ember); outline-offset: 3px; }

/* ---------- top bar ---------- */
.topbar{
  position: sticky; top:0; z-index:50;
  background: var(--charcoal);
  color: var(--bone);
  border-bottom: 1px solid rgba(237,230,214,0.12);
}
.topbar-inner{
  max-width: var(--max-w); margin:0 auto; padding: 0 var(--edge);
  display:flex; align-items:center; justify-content:space-between;
  height: 72px;
}
.brand{
  display:flex; align-items:center; gap:0.65em;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  text-decoration:none;
  color: var(--bone);
}
.brand small{
  display:block;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  color: var(--bone-dim);
  text-transform: uppercase;
  margin-top: -2px;
}
.brand-mark{ width:34px; height:34px; flex-shrink:0; }

.lang-switch{
  font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.06em;
  color: var(--bone-dim); text-decoration:none; border:1px solid rgba(237,230,214,0.3);
  padding: 0.35em 0.6em; border-radius: var(--radius); text-transform:uppercase;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.lang-switch:hover{ color: var(--bone); border-color: var(--bone); }
@media (max-width: 860px){ .lang-switch{ display:none; } }

.nav{ display:flex; align-items:center; gap: 2rem; }
.nav-links{ display:flex; gap:1.6rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  text-decoration:none;
  font-size: 0.92rem;
  font-weight:500;
  color: var(--bone-dim);
  position:relative;
  padding: 4px 0;
  transition: color 0.15s ease;
}
.nav-links a:hover, .nav-links a.active{ color: var(--bone); }
.nav-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: var(--ember);
}

.btn{
  display:inline-flex; align-items:center; gap:0.55em;
  font-family: var(--font-body); font-weight:700; font-size:0.88rem;
  padding: 0.75em 1.3em;
  border-radius: var(--radius);
  text-decoration:none;
  border: 1.5px solid transparent;
  cursor:pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-ember{ background: var(--ember); color: var(--bone); }
.btn-ember:hover{ background: var(--ember-dark); }
.btn-outline{ border-color: rgba(237,230,214,0.4); color: var(--bone); }
.btn-outline:hover{ border-color: var(--bone); }
.btn-dark{ border-color: var(--charcoal); color: var(--charcoal); }
.btn-dark:hover{ background: var(--charcoal); color: var(--bone); }
.btn svg{ width:1.1em; height:1.1em; }

.whatsapp-fab{
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  display:flex; align-items:center; gap:0.6em;
  background: #25D366; color:#0b2b19;
  padding: 0.8em 1.1em;
  border-radius: 999px;
  text-decoration:none; font-weight:700; font-size:0.85rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}
.whatsapp-fab svg{ width:1.3em; height:1.3em; }

.menu-toggle{
  display:none; background:none; border:none; color: var(--bone);
  width:40px; height:40px; cursor:pointer;
}
.menu-toggle svg{ width:100%; height:100%; }

@media (max-width: 860px){
  .nav-links{
    position: fixed; inset: 72px 0 0 0; background: var(--charcoal);
    flex-direction:column; padding: 2rem var(--edge); gap: 1.4rem;
    transform: translateY(-110%); transition: transform 0.25s ease;
  }
  .nav-links.open{ transform: translateY(0); }
  .nav-links a{ font-size:1.2rem; }
  .nav-cta{ display:none; }
  .menu-toggle{ display:block; }
}

/* ---------- hero ---------- */
.hero{
  background:
    repeating-linear-gradient(115deg, rgba(237,230,214,0.035) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, var(--charcoal) 0%, var(--charcoal-2) 100%);
  color: var(--bone);
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem);
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:'';
  position:absolute; right:-10%; top:-20%; width:60%; height:140%;
  background: radial-gradient(circle at center, rgba(193,80,46,0.16), transparent 65%);
  pointer-events:none;
}
.hero-grid{
  display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items:end;
  position:relative; z-index:1;
}
@media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr; } }

.hero h1{
  font-size: clamp(3rem, 7.5vw, 6rem);
  text-transform: uppercase;
}
.hero h1 em{ font-style:normal; color: var(--ember); }
.hero .lede{
  font-family: var(--font-body); font-size: 1.15rem; color: var(--bone-dim);
  max-width: 46ch; margin-top:1.2rem;
}
.hero-cta{ display:flex; gap:0.9rem; margin-top:2rem; flex-wrap:wrap; }

.spec-tag{
  border: 1px solid rgba(237,230,214,0.22);
  padding: 1.4rem;
  font-family: var(--font-mono);
  font-size:0.8rem;
  color: var(--bone-dim);
}
.spec-tag .row{ display:flex; justify-content:space-between; padding:0.5em 0; border-bottom:1px dashed rgba(237,230,214,0.15); }
.spec-tag .row:last-child{ border-bottom:none; }
.spec-tag .row span:last-child{ color: var(--bone); font-weight:700; }
.spec-tag-head{ display:flex; align-items:center; gap:0.6em; margin-bottom:1rem; color:var(--ember); text-transform:uppercase; letter-spacing:0.14em; font-size:0.68rem; }
.spec-tag-head .hole{ width:9px; height:9px; border-radius:50%; background: var(--charcoal); border:1.5px solid var(--bone-dim); }

/* ---------- sections ---------- */
section{ padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-head{ max-width: 62ch; margin-bottom: 2.6rem; }
.section-head h2{ font-size: clamp(2.1rem, 4.5vw, 3.1rem); text-transform:uppercase; margin-top:0.5rem; }
.section-head p{ font-size:1.05rem; color: #4b463d; margin-top:0.8rem; }

.band-dark{ background: var(--charcoal); color: var(--bone); }
.band-dark .section-head p{ color: var(--bone-dim); }
.band-dark .eyebrow{ color: var(--ember); }

/* ---------- hang-tag course cards (signature element) ---------- */
.tag-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
@media (max-width: 760px){ .tag-grid{ grid-template-columns:1fr; } }

.hang-tag{
  position:relative;
  background: var(--bone);
  border: 1px solid rgba(23,20,15,0.14);
  border-radius: 10px;
  padding: 2.1rem 1.8rem 1.8rem;
  display:flex; flex-direction:column; height:100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hang-tag:hover{ transform: translateY(-4px); box-shadow: 0 16px 30px rgba(23,20,15,0.12); }
.hang-tag::before{
  content:'';
  position:absolute; top:1.15rem; right:1.35rem;
  width: 16px; height:16px; border-radius:50%;
  background: var(--bone);
  border: 2px solid var(--charcoal);
}
.hang-tag::after{
  content:'';
  position:absolute; top:1.15rem; right: 1.42rem;
  width: 2px; height:2px; border-radius:50%;
}
.hang-tag .tag-no{
  font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.12em;
  color: var(--ember); text-transform:uppercase; margin-bottom:0.6rem;
}
.hang-tag h3{ font-size:2rem; text-transform:uppercase; margin-bottom:0.5rem; }
.hang-tag p{ color:#4b463d; font-size:0.98rem; }
.hang-tag .specs{
  display:flex; flex-wrap:wrap; gap:0.5rem 1.1rem; margin: 1rem 0 1.3rem;
  font-family: var(--font-mono); font-size:0.74rem; color: var(--steel);
}
.hang-tag .specs strong{ color: var(--charcoal); }
.hang-tag .tag-link{
  margin-top:auto; font-weight:700; text-decoration:none; color: var(--charcoal);
  display:inline-flex; align-items:center; gap:0.5em; font-size:0.92rem;
  border-top: 1px dashed rgba(23,20,15,0.2); padding-top:1rem;
}
.hang-tag .tag-link svg{ width:1em; height:1em; transition: transform 0.15s ease; }
.hang-tag .tag-link:hover svg{ transform: translateX(3px); }

/* ---------- feature / biltong split ---------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items:center; }
@media (max-width: 860px){ .split{ grid-template-columns:1fr; } }
.split-media{
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--steel), var(--charcoal));
  border-radius: 10px;
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.split-media svg{ width:46%; opacity:0.9; }
.photo-note{
  position:absolute; bottom:0; left:0; right:0;
  background: rgba(23,20,15,0.72); color: var(--bone-dim);
  font-family: var(--font-mono); font-size:0.65rem; letter-spacing:0.05em;
  padding: 0.5em 0.8em; text-align:center;
}

/* ---------- why-train list ---------- */
.reason-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
@media (max-width: 860px){ .reason-grid{ grid-template-columns:1fr; } }
.reason{ border-left: 2px solid var(--ember); padding-left: 1.2rem; }
.reason h3{ font-family: var(--font-body); font-weight:700; font-size:1.05rem; text-transform:none; margin-bottom:0.4rem; }
.reason p{ font-size:0.94rem; color:#4b463d; }
.band-dark .reason p{ color: var(--bone-dim); }

/* ---------- gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:1rem; }
.gallery-slot{
  aspect-ratio: 1/1; border-radius: 6px;
  background: repeating-linear-gradient(45deg, var(--bone-dim), var(--bone-dim) 10px, var(--bone) 10px, var(--bone) 20px);
  border: 1.5px dashed var(--steel);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color: var(--steel); font-family: var(--font-mono); font-size:0.72rem; padding:1rem;
}

.photo-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 760px){ .photo-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .photo-grid{ grid-template-columns: 1fr; } }
.photo-card{
  position:relative; border-radius: 8px; overflow:hidden;
  aspect-ratio: 4/3; background: var(--steel);
}
.photo-card img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 0.4s ease; }
.photo-card:hover img{ transform: scale(1.04); }
.photo-card .cap{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(180deg, transparent, rgba(23,20,15,0.88) 85%);
  color: var(--bone); font-family: var(--font-mono); font-size:0.68rem; letter-spacing:0.05em;
  text-transform: uppercase; padding: 2.2rem 0.9rem 0.65rem;
}
.gallery-grid .photo-card{ aspect-ratio: 1/1; }

/* ---------- faq ---------- */
.faq-item{ border-bottom: 1px solid rgba(23,20,15,0.14); }
.faq-item summary{
  cursor:pointer; padding: 1.3rem 0; font-weight:700; font-size:1.05rem;
  display:flex; justify-content:space-between; align-items:center; list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-family: var(--font-mono); font-size:1.4rem; color: var(--ember); }
.faq-item[open] summary::after{ content:'\2212'; }
.faq-item .faq-a{ padding: 0 0 1.4rem; color:#4b463d; max-width: 68ch; }

/* ---------- steps (numbered = real sequence, so numbering is justified) ---------- */
.steps{ counter-reset: step; display:grid; gap:1.4rem; }
.step{ display:grid; grid-template-columns: 3.4rem 1fr; gap:1.2rem; align-items:start; }
.step .num{
  counter-increment: step; font-family: var(--font-display); font-size:2.2rem;
  color: var(--ember); line-height:1;
}
.step .num::before{ content: counter(step, decimal-leading-zero); }
.step h3{ font-family: var(--font-body); font-weight:700; font-size:1.05rem; text-transform:none; margin-bottom:0.3rem; }
.step p{ color:#4b463d; font-size:0.95rem; }

/* ---------- form ---------- */
.form-grid{ display:grid; gap:1.1rem; max-width: 620px; }
.field label{ display:block; font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--steel); margin-bottom:0.4rem; }
.field input, .field select, .field textarea{
  width:100%; font-family: var(--font-body); font-size:1rem;
  padding:0.75em 0.9em; border: 1.5px solid rgba(23,20,15,0.25); border-radius:4px;
  background: #fff; color: var(--charcoal);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--ember); }
.form-note{ font-size:0.82rem; color: var(--steel); }

/* ---------- callout / cta ---------- */
.callout{
  background: var(--ember); color: var(--bone);
  border-radius: 10px; padding: clamp(2rem,5vw,3.2rem);
  display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap;
}
.callout h2{ font-size: clamp(1.8rem,3.6vw,2.6rem); text-transform:uppercase; max-width:20ch; }
.callout .btn-outline{ border-color: rgba(237,230,214,0.6); }

/* ---------- footer ---------- */
footer{ background: var(--charcoal); color: var(--bone-dim); padding: 3rem 0 1.6rem; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.4rem; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns:1fr; } }
footer h4{ font-family: var(--font-mono); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--bone); margin-bottom:1rem; }
footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:0.6rem; }
footer a{ text-decoration:none; color: var(--bone-dim); font-size:0.92rem; }
footer a:hover{ color: var(--bone); }
.footer-bottom{
  border-top: 1px solid rgba(237,230,214,0.12); padding-top:1.4rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem;
  font-size:0.78rem; color: var(--bone-dim);
}

/* ---------- page hero (interior pages) ---------- */
.page-hero{ background: var(--charcoal); color: var(--bone); padding: clamp(2.6rem,6vw,4rem) 0 2.4rem; }
.page-hero h1{ font-size: clamp(2.4rem,6vw,4.2rem); text-transform:uppercase; margin-top:0.5rem; }
.breadcrumb{ font-family: var(--font-mono); font-size:0.72rem; color: var(--bone-dim); text-transform:uppercase; letter-spacing:0.08em; }
.breadcrumb a{ text-decoration:none; color: var(--bone-dim); }
.breadcrumb a:hover{ color: var(--bone); }

.detail-grid{ display:grid; grid-template-columns: 1.3fr 0.9fr; gap:3rem; align-items:start; }
@media (max-width: 900px){ .detail-grid{ grid-template-columns:1fr; } }
.sidebar-card{ background:#fff; border:1px solid rgba(23,20,15,0.12); border-radius:10px; padding:1.8rem; position:sticky; top:96px; }
.sidebar-card h3{ font-size:1.5rem; text-transform:uppercase; margin-bottom:1rem; }
.sidebar-list{ list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:0.7rem; font-size:0.92rem; }
.sidebar-list li{ display:flex; gap:0.6em; }
.sidebar-list svg{ width:1.1em; height:1.1em; flex-shrink:0; color: var(--ember); margin-top:0.15em; }

.checklist{ list-style:none; margin:0; padding:0; display:grid; gap:0.7rem; }
.checklist li{ display:flex; gap:0.7em; align-items:flex-start; }
.checklist svg{ width:1.2em; height:1.2em; flex-shrink:0; color: var(--ember); margin-top:0.1em; }

.notice{
  border-left:3px solid var(--brass); background: rgba(168,130,60,0.08);
  padding: 1rem 1.2rem; font-size:0.92rem; border-radius:4px; margin: 1.6rem 0;
}

.detail-photo{ border-radius:10px; overflow:hidden; margin: 1.8rem 0; }
.detail-photo img{ width:100%; display:block; }
.detail-photo .cap{
  background: var(--charcoal); color: var(--bone-dim);
  font-family: var(--font-mono); font-size:0.7rem; letter-spacing:0.04em;
  padding: 0.6em 0.9em;
}