/* ===========================================
   MILANYEUSI — Design System
   Ink black / raw calico / clay ochre / indigo dye / sisal green
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  --ink:        #16130F;
  --ink-soft:   #211D16;
  --calico:     #EDE7D8;
  --calico-dim: #DCD3BC;
  --clay:       #A8672B;
  --clay-bright:#C97F3E;
  --indigo:     #253A52;
  --indigo-soft:#33506F;
  --sisal:      #707A47;
  --thread:     #6b6255;

  --f-display: 'Anton', sans-serif;
  --f-body: 'Archivo', sans-serif;
  --f-mono: 'Space Mono', monospace;

  --max: 1180px;
  --edge: 6vw;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--calico);
  color:var(--ink);
  font-family:var(--f-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}

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

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- Utility label / tag ---------- */
.tag{
  font-family:var(--f-mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--clay);
  display:inline-flex;
  align-items:center;
  gap:0.5em;
}
.tag::before{content:"";width:7px;height:7px;background:var(--clay);border-radius:50%;display:inline-block;}

/* ---------- Stitch divider (signature motif) ---------- */
.stitch{
  border:none;
  height:0;
  border-top:2px dashed var(--thread);
  opacity:0.5;
  margin:0;
}
.stitch-v{
  width:0;
  border-left:2px dashed var(--thread);
  opacity:0.4;
}

/* ---------- Nav ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:var(--ink);
  color:var(--calico);
  border-bottom:2px dashed rgba(237,231,216,0.25);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--edge);
  max-width:var(--max); margin:0 auto;
}
.brandmark{
  font-family:var(--f-display);
  font-size:1.5rem;
  letter-spacing:0.02em;
  text-transform:uppercase;
  display:flex; align-items:baseline; gap:0.4rem;
}
.brandmark span{
  font-family:var(--f-mono); font-size:0.6rem; color:var(--clay-bright);
  letter-spacing:0.1em;
}
.navlinks{display:flex; gap:2rem; font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;}
.navlinks a{position:relative; padding-bottom:4px; opacity:0.85; transition:opacity .2s;}
.navlinks a:hover, .navlinks a[aria-current="page"]{opacity:1;}
.navlinks a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--clay-bright);
}
.navtoggle{display:none; background:none; border:1px solid var(--calico); color:var(--calico); font-family:var(--f-mono); font-size:0.75rem; padding:0.4rem 0.7rem;}

@media (max-width:800px){
  .navlinks{
    position:absolute; top:100%; left:0; right:0;
    background:var(--ink); flex-direction:column; gap:0;
    max-height:0; overflow:hidden; transition:max-height .25s ease;
    border-bottom:2px dashed rgba(237,231,216,0.25);
  }
  .navlinks.open{max-height:320px;}
  .navlinks a{padding:1rem var(--edge); border-top:1px solid rgba(237,231,216,0.1); width:100%;}
  .navtoggle{display:block;}
}

/* ---------- Hero ---------- */
.hero{
  background:var(--ink); color:var(--calico);
  padding:5.5rem var(--edge) 4.5rem;
  position:relative;
}
.hero .wrap{padding-left:0; padding-right:0;}
.hero-eyebrow{margin-bottom:1.4rem;}
.hero h1{
  font-family:var(--f-display);
  text-transform:uppercase;
  font-size:clamp(2.4rem, 7vw, 5rem);
  line-height:0.96;
  letter-spacing:0.01em;
  max-width:14ch;
}
.hero h1 em{font-style:normal; color:var(--clay-bright);}
.hero-swahili{
  font-family:var(--f-mono);
  color:var(--calico-dim);
  font-size:clamp(0.95rem,2vw,1.15rem);
  margin-top:1.6rem;
  max-width:38ch;
  border-left:2px solid var(--clay);
  padding-left:1rem;
}
.hero-sub{
  margin-top:1.6rem;
  max-width:46ch;
  font-size:1.05rem;
  color:var(--calico-dim);
}
.hero-cta{display:flex; gap:1rem; margin-top:2.4rem; flex-wrap:wrap;}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--f-mono);
  font-size:0.8rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:0.9rem 1.6rem;
  display:inline-block;
  border:2px solid currentColor;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn-solid{background:var(--clay); border-color:var(--clay); color:var(--ink);}
.btn-solid:hover{transform:translateY(-2px); background:var(--clay-bright);}
.btn-outline{color:var(--calico);}
.btn-outline:hover{background:var(--calico); color:var(--ink); transform:translateY(-2px);}
.btn-outline.dark{color:var(--ink);}
.btn-outline.dark:hover{background:var(--ink); color:var(--calico);}

/* ---------- Section shell ---------- */
section{padding:4.5rem var(--edge);}
section .wrap{padding:0;}
.section-head{margin-bottom:2.8rem; max-width:60ch;}
.section-head .tag{margin-bottom:0.9rem;}
.section-head h2{
  font-family:var(--f-display);
  text-transform:uppercase;
  font-size:clamp(1.8rem, 4vw, 2.8rem);
  line-height:1.02;
}
.section-head p{margin-top:1rem; color:var(--thread); font-size:1.02rem;}

/* ---------- Entity / triad cards (real 3-part org structure) ---------- */
.triad{display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
.triad-card{
  border:2px dashed var(--thread);
  border-left:none;
  padding:2.2rem 1.8rem;
  position:relative;
}
.triad-card:first-child{border-left:2px dashed var(--thread);}
.triad-num{
  font-family:var(--f-mono); font-size:0.75rem; color:var(--clay);
  letter-spacing:0.1em;
}
.triad-card h3{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:1.35rem; margin-top:0.8rem; line-height:1.05;
}
.triad-card p{margin-top:0.9rem; font-size:0.94rem; color:var(--thread);}
@media (max-width:800px){
  .triad{grid-template-columns:1fr;}
  .triad-card{border-left:2px dashed var(--thread) !important; border-top:none;}
  .triad-card:first-child{border-top:2px dashed var(--thread);}
}

/* ---------- Product / garment tag card ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem;}
@media (max-width:800px){.grid-3, .grid-2{grid-template-columns:1fr;}}

.product-card{
  background:var(--ink); color:var(--calico);
  padding:0; overflow:hidden; position:relative;
}
.product-swatch{
  aspect-ratio:4/5;
  background:
    repeating-linear-gradient(45deg, rgba(237,231,216,0.05) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--indigo), var(--ink) 70%);
  position:relative;
  display:flex; align-items:flex-end; padding:1.2rem;
  overflow:hidden;
}
.product-swatch img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;
}
.product-swatch .swatch-tag{position:relative; z-index:2;}
.product-swatch.has-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(22,19,15,0.75) 0%, rgba(22,19,15,0) 45%);
  z-index:1;
}

/* ---------- Full-bleed photo band ---------- */
.photo-band{
  width:100%;
  aspect-ratio:16/7;
  overflow:hidden;
  position:relative;
}
.photo-band img{width:100%; height:100%; object-fit:cover; object-position:center 20%;}
@media (max-width:800px){.photo-band{aspect-ratio:4/5;}}

.photo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0.4rem;}
.photo-grid a, .photo-grid div{display:block; aspect-ratio:4/5; overflow:hidden;}
.photo-grid img{width:100%; height:100%; object-fit:cover;}
@media (max-width:800px){.photo-grid{grid-template-columns:repeat(2,1fr);}}

.about-photo{width:100%; aspect-ratio:3/4; overflow:hidden; margin-bottom:2rem;}
.about-photo img{width:100%; height:100%; object-fit:cover; object-position:center 25%;}
.product-card:nth-child(2) .product-swatch{background:
    repeating-linear-gradient(45deg, rgba(237,231,216,0.05) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--clay), var(--ink) 70%);}
.product-card:nth-child(3) .product-swatch{background:
    repeating-linear-gradient(45deg, rgba(237,231,216,0.05) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--sisal), var(--ink) 70%);}
.swatch-tag{
  font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.08em;
  background:var(--calico); color:var(--ink); padding:0.3rem 0.6rem;
  transform:rotate(-2deg);
}
.product-info{padding:1.4rem 1.4rem 1.6rem;}
.product-info h3{font-family:var(--f-display); text-transform:uppercase; font-size:1.15rem;}
.product-info .price{font-family:var(--f-mono); color:var(--clay-bright); margin-top:0.5rem; font-size:0.95rem;}
.product-info p{font-size:0.88rem; color:var(--calico-dim); margin-top:0.6rem;}
.product-info .btn{margin-top:1.1rem; width:100%; text-align:center;}

/* ---------- Digital product row ---------- */
.digi-card{
  border:2px solid var(--ink);
  padding:1.8rem;
  display:flex; flex-direction:column; gap:0.8rem;
}
.digi-card h3{font-family:var(--f-display); text-transform:uppercase; font-size:1.3rem;}
.digi-card p{color:var(--thread); font-size:0.94rem;}
.digi-card .btn{align-self:flex-start; margin-top:0.6rem;}

/* ---------- Stat strip ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--ink); color:var(--calico);
}
.stat{padding:2.4rem 1.6rem; border-left:2px dashed rgba(237,231,216,0.2);}
.stat:first-child{border-left:none;}
.stat .num{font-family:var(--f-display); font-size:clamp(1.8rem,4vw,2.6rem); color:var(--clay-bright);}
.stat .label{font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; margin-top:0.4rem; color:var(--calico-dim);}
@media (max-width:800px){.stats{grid-template-columns:repeat(2,1fr);} .stat:nth-child(3){border-left:none;}}

/* ---------- Team ---------- */
.person{border-top:2px dashed var(--thread); padding:1.6rem 0; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap;}
.person h3{font-family:var(--f-display); text-transform:uppercase; font-size:1.15rem;}
.person .role{font-family:var(--f-mono); font-size:0.78rem; color:var(--clay); letter-spacing:0.06em; text-transform:uppercase;}

/* ---------- Timeline / list ---------- */
.line-item{display:flex; gap:1.4rem; padding:1.3rem 0; border-top:2px dashed var(--thread);}
.line-item .mark{font-family:var(--f-mono); color:var(--clay); font-size:0.85rem; flex-shrink:0; padding-top:0.15rem;}
.line-item h3{font-family:var(--f-display); text-transform:uppercase; font-size:1.05rem; letter-spacing:0.01em;}
.line-item p{color:var(--thread); font-size:0.92rem; margin-top:0.4rem;}

/* ---------- CTA banner ---------- */
.cta-band{
  background:var(--indigo); color:var(--calico);
  text-align:left;
}
.cta-band h2{font-family:var(--f-display); text-transform:uppercase; font-size:clamp(1.7rem,4vw,2.6rem); max-width:16ch;}
.cta-band p{margin-top:1rem; color:#cdd6df; max-width:44ch;}
.cta-band .hero-cta{margin-top:2rem;}

/* ---------- Contact form ---------- */
.contact-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:3rem;}
@media (max-width:800px){.contact-grid{grid-template-columns:1fr;}}
form{display:flex; flex-direction:column; gap:1.1rem;}
label{font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--thread); margin-bottom:0.4rem; display:block;}
input, textarea{
  width:100%; background:transparent; border:none; border-bottom:2px solid var(--ink);
  padding:0.7rem 0.2rem; font-family:var(--f-body); font-size:1rem; color:var(--ink);
}
input:focus, textarea:focus{outline:none; border-color:var(--clay);}
input:focus-visible, textarea:focus-visible, a:focus-visible, button:focus-visible{outline:2px solid var(--clay); outline-offset:3px;}
textarea{resize:vertical; min-height:110px;}
.contact-side{background:var(--ink); color:var(--calico); padding:2rem;}
.contact-side .tag{color:var(--clay-bright); margin-bottom:1rem;}
.contact-side .row{padding:1rem 0; border-top:2px dashed rgba(237,231,216,0.2);}
.contact-side .row:first-of-type{border-top:none;}
.contact-side .row .k{font-family:var(--f-mono); font-size:0.7rem; color:var(--calico-dim); text-transform:uppercase; letter-spacing:0.08em;}
.contact-side .row .v{margin-top:0.3rem; font-size:1rem;}

/* ---------- Footer ---------- */
footer{
  background:var(--ink); color:var(--calico-dim);
  padding:3rem var(--edge) 2rem;
  font-family:var(--f-mono); font-size:0.8rem;
}
.foot-top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.4rem; padding-bottom:2rem; border-bottom:2px dashed rgba(237,231,216,0.2); max-width:var(--max); margin:0 auto;}
.foot-links{display:flex; gap:1.6rem; flex-wrap:wrap;}
.foot-bottom{max-width:var(--max); margin:0 auto; padding-top:1.4rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.8rem;}

/* ---------- Floating WhatsApp button ---------- */
.wa-float{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:80;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#0b1a10;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.35);
  transition:transform .18s ease;
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:28px; height:28px;}

/* ---------- Social row ---------- */
.social-row{display:flex; gap:1rem; align-items:center;}
.social-pill{
  font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
  border:1px solid rgba(237,231,216,0.3); padding:0.5rem 0.9rem; border-radius:999px;
  display:inline-flex; align-items:center; gap:0.5rem; transition:background .18s ease, color .18s ease;
}
.social-pill:hover{background:var(--calico); color:var(--ink);}
.social-pill svg{width:14px; height:14px;}

/* ---------- Adinkra-inspired geometric divider (culture motif) ---------- */
.pattern-divider{
  height:14px;
  background-image: repeating-linear-gradient(135deg, var(--clay) 0 6px, transparent 6px 12px),
                     repeating-linear-gradient(45deg, var(--indigo) 0 6px, transparent 6px 12px);
  background-size: 24px 14px, 24px 14px;
  background-position: 0 0, 0 0;
  background-repeat: repeat-x;
  opacity:0.9;
}
.pattern-divider.dark{opacity:0.6;}

/* ---------- Quick-nav pills (mobile-friendly jump nav) ---------- */
.quicknav{
  display:flex; gap:0.6rem; overflow-x:auto; padding:1rem var(--edge) 0.2rem;
  background:var(--ink);
  -webkit-overflow-scrolling:touch;
}
.quicknav::-webkit-scrollbar{display:none;}
.quicknav a{
  flex-shrink:0;
  font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--calico-dim); border:1px solid rgba(237,231,216,0.25); border-radius:999px;
  padding:0.5rem 1rem; transition:background .18s ease, color .18s ease;
}
.quicknav a:hover, .quicknav a:active{background:var(--clay); color:var(--ink); border-color:var(--clay);}
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}