/* ── Atashi Fashion Ltd — certifications.css ─────────────────────────────── */

:root {
  --org:#E8510A; --org-dk:#c04008; --org-lt:#FFF2EC; --org-mid:#f47840;
  --red:#b83020; --ink:#18120a; --ink2:#38280e; --ink3:#7a6a52;
  --bg:#FAF8F4; --bg2:#F4EDE3; --bg3:#EAE0D3;
  --white:#fff; --border:rgba(24,18,10,0.08); --bord-o:rgba(232,81,10,0.22);
  --green:#2a6049; --green-lt:#eaf5ee;
  --ff-d:'Playfair Display',serif; --ff-b:'Outfit',sans-serif;
  /* Luxury system */
  --gold:#C8A862; --gold-dk:#9A7C3A; --gold-lt:rgba(200,168,98,.08);
  --gold-mid:#D4B878; --gold-border:rgba(200,168,98,.2);
  --lux:#0B0A0F; --lux2:#131121; --lux3:#1C1A2E;
  --cream:#F4EDE2; --cream-dim:rgba(244,237,226,.50);
  --cream-faint:rgba(244,237,226,.15);
  --warm-dark:#1E1A14; --warm-dark2:#261F17;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); font-family:var(--ff-b); font-weight:300; line-height:1.7; overflow-x:hidden; }
h1,h2,h3,h4 { font-family:var(--ff-d); font-weight:500; line-height:1.15; }
.ctr { max-width:1240px; margin:0 auto; padding:0 2rem; }
.lbl { font-size:.66rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--org); margin-bottom:.7rem; display:block; }
.sec-title { font-size:clamp(1.8rem,3vw,2.7rem); color:var(--ink); }
.sec-title em { font-style:italic; color:var(--org); }
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.6rem 1.4rem; font-family:var(--ff-b); font-size:.73rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; text-decoration:none; border:none; transition:all .22s; line-height:1; cursor:pointer; }
.btn-org { background:var(--org); color:#fff; }
.btn-org:hover { background:var(--org-dk); transform:translateY(-2px); box-shadow:0 6px 20px rgba(232,81,10,.3); }
.btn-out { background:transparent; color:var(--ink); border:1px solid var(--border); }
.btn-out:hover { border-color:var(--org); color:var(--org); }

/* SCROLL PROGRESS */
#sprog { position:fixed; top:0; left:0; height:2px; background:linear-gradient(90deg,var(--org),var(--gold)); z-index:100000; width:0%; pointer-events:none; transition:width .1s; }

/* Dark transparent nav over dark hero */
nav.at-top{background:rgba(11,10,15,0)!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;border-bottom-color:rgba(200,168,98,.1)!important;box-shadow:none!important;}
nav.at-top .wm1{color:#fff!important;}
nav.at-top .wm2{color:rgba(244,237,226,.3)!important;}
nav.at-top .nav-links a{color:rgba(244,237,226,.62)!important;}
nav.at-top .nav-links a:hover{color:#fff!important;}
nav.at-top .hamburger span{background:#fff!important;}
nav.at-top .btn-org{background:var(--org)!important;color:#fff!important;}
nav.scrolled{background:rgba(250,248,244,.93)!important;}

/* NAV */
nav { position:fixed; top:0; left:0; right:0; z-index:9000; padding:.9rem 0; background:rgba(255,255,255,.97); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); transition:all .3s; }
nav.scrolled { padding:.55rem 0; box-shadow:0 2px 30px rgba(24,18,10,.07); }
.nav-in { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.nav-logo { text-decoration:none; display:flex; align-items:center; gap:.65rem; }
.nav-logo img { height:44px; width:auto; display:block; }
.wm { display:flex; flex-direction:column; line-height:1; }
.wm1 { font-family:var(--ff-d); font-size:1.1rem; font-weight:700; color:var(--org); text-transform:uppercase; letter-spacing:.04em; }
.wm2 { font-size:.57rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink3); margin-top:1px; }
.nav-links { display:flex; gap:1.8rem; list-style:none; }
.nav-links a { color:var(--ink2); text-decoration:none; font-size:.76rem; letter-spacing:.06em; font-weight:400; transition:color .2s; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:1.5px; background:var(--org); transform:scaleX(0); transition:transform .25s; }
.nav-links a:hover, .nav-links a.active { color:var(--org); }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }
.nav-cta { display:flex; align-items:center; gap:.7rem; }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:0; cursor:pointer; }
.hamburger span { width:22px; height:1.5px; background:var(--ink); display:block; transition:all .3s; }

/* MOBILE NAV */
.mob-nav { display:none; position:fixed; inset:0; z-index:9500; background:#fff; flex-direction:column; align-items:center; justify-content:center; gap:1.8rem; }
.mob-nav.open { display:flex; }
.mob-nav a { font-family:var(--ff-d); font-size:2rem; color:var(--ink); text-decoration:none; transition:color .2s; }
.mob-nav a:hover { color:var(--org); }
.mob-close { position:absolute; top:1.5rem; right:1.5rem; background:none; border:none; font-size:2rem; color:var(--ink3); line-height:1; padding:.5rem; cursor:pointer; }

/* ── HERO ──────────────────────────────────────────────────────────────── */
#cert-hero {
  background:var(--ink);
  padding:8rem 0 5rem;
  position:relative;
  overflow:hidden;
  margin-top:0;
}
.hero-pat {
  position:absolute; inset:0;
  background-image:radial-gradient(circle,rgba(232,81,10,.07) 1px,transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
}
.hero-stripe-top { position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--org),var(--org-mid),var(--red)); }
.hero-stripe-bottom { position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--red),var(--org-mid),var(--org)); }

.hero-inner { display:grid; grid-template-columns:1.2fr 1fr; gap:5rem; align-items:center; position:relative; z-index:2; }

.hero-badge {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.32rem .85rem; border:1px solid rgba(232,81,10,.35);
  font-size:.65rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--org); margin-bottom:1.5rem; background:rgba(232,81,10,.08);
}
.hero-badge::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--org); animation:blink 1.8s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.3;} }

#cert-hero h1 { font-size:clamp(2.4rem,4.5vw,4rem); color:#fff; margin-bottom:1.2rem; letter-spacing:-.02em; }
#cert-hero h1 em { font-style:italic; color:var(--org); }
.hero-sub { font-size:.92rem; color:rgba(255,255,255,.5); max-width:480px; margin-bottom:2.5rem; line-height:1.85; }

.hero-stats { display:flex; gap:2.5rem; padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.1); flex-wrap:wrap; }
.hs-n { font-family:var(--ff-d); font-size:2rem; color:var(--org); line-height:1; font-weight:700; }
.hs-l { font-size:.64rem; color:rgba(255,255,255,.4); letter-spacing:.1em; text-transform:uppercase; margin-top:.15rem; }

.hero-right { display:flex; flex-direction:column; gap:1rem; }
.audit-badge {
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.2rem 1.4rem;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  transition:all .25s;
}
.audit-badge:hover { border-color:rgba(232,81,10,.3); background:rgba(232,81,10,.05); }
.ab-icon { font-size:1.3rem; flex-shrink:0; line-height:1; margin-top:.1rem; }
.ab-title { font-family:var(--ff-d); font-size:.95rem; color:#fff; margin-bottom:.2rem; }
.ab-sub { font-size:.75rem; color:rgba(255,255,255,.4); line-height:1.55; }

/* ── FILTER BAR ─────────────────────────────────────────────────────────── */
#filter-bar {
  background:var(--bg3);
  border-bottom:1px solid var(--border);
  padding:.8rem 0;
  position:sticky;
  top:65px;
  z-index:800;
}
.filter-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.filter-tabs { display:flex; gap:.35rem; flex-wrap:wrap; }
.ftab {
  padding:.38rem 1rem; font-family:var(--ff-b); font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--border); background:transparent; color:var(--ink3);
  cursor:pointer; transition:all .2s;
}
.ftab:hover, .ftab.active { border-color:var(--org); color:var(--org); background:var(--org-lt); }
.doc-count { font-size:.73rem; color:var(--ink3); white-space:nowrap; }

/* ── MAIN CERTIFICATIONS AREA ───────────────────────────────────────────── */
#certs-main { padding:4rem 0 5rem; }

.cert-section { margin-bottom:4.5rem; }
.cert-section.hidden { display:none; }

.section-head {
  display:flex; align-items:center; gap:1.2rem;
  margin-bottom:2rem;
  padding-bottom:1.2rem;
  border-bottom:1px solid var(--border);
}
.section-icon {
  width:48px; height:48px; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; flex-shrink:0;
}
.section-icon.social   { background:rgba(42,96,73,.1);  border:1px solid rgba(42,96,73,.2); }
.section-icon.env      { background:rgba(46,139,87,.1);  border:1px solid rgba(46,139,87,.2); }
.section-icon.legal    { background:rgba(232,81,10,.08); border:1px solid rgba(232,81,10,.2); }
.section-icon.safety   { background:rgba(184,48,32,.08); border:1px solid rgba(184,48,32,.2); }
.section-icon.fin      { background:rgba(24,18,10,.06);  border:1px solid rgba(24,18,10,.12); }

.section-title { font-size:clamp(1.5rem,2.5vw,2rem); color:var(--ink); margin-top:.2rem; }
.section-title em { font-style:italic; color:var(--org); }

/* ── CERT GRID ──────────────────────────────────────────────────────────── */
.cert-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
}

.cert-card {
  background:var(--bg);
  border:1px solid var(--border);
  padding:1.6rem;
  display:flex; flex-direction:column; gap:.75rem;
  transition:all .25s;
  position:relative;
  overflow:hidden;
}
.cert-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--org); transform:scaleX(0); transform-origin:left;
  transition:transform .3s;
}
.cert-card:hover { border-color:var(--bord-o); transform:translateY(-3px); box-shadow:0 10px 32px rgba(24,18,10,.08); background:var(--bg2); }
.cert-card:hover::before { transform:scaleX(1); }

.cert-card.hiding { opacity:0; transform:scale(.97); transition:opacity .2s, transform .2s; }
.cert-card.showing { opacity:1; transform:scale(1); transition:opacity .25s .05s, transform .25s .05s; }

.cert-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }

.cert-card h3 { font-family:var(--ff-d); font-size:.97rem; color:var(--ink); line-height:1.2; }
.cert-card p { font-size:.77rem; color:var(--ink3); line-height:1.7; flex:1; }

/* BADGE variants */
.cert-badge {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.28rem .75rem; font-weight:700; letter-spacing:.06em;
  font-size:.68rem; white-space:nowrap; border:1.5px solid;
}
.cert-badge.sedex   { background:rgba(128,0,128,.09);  color:#9933cc; border-color:rgba(153,51,204,.3); }
.cert-badge.slcp    { background:rgba(0,82,163,.09);   color:#0052a3; border-color:rgba(0,82,163,.3); }
.cert-badge.bci     { background:rgba(34,139,34,.09);  color:#228B22; border-color:rgba(34,139,34,.3); }
.cert-badge.oeko    { background:rgba(46,139,87,.09);  color:#2E8B57; border-color:rgba(46,139,87,.3); }
.cert-badge.grs     { background:rgba(0,128,128,.09);  color:#007070; border-color:rgba(0,128,128,.3); }
.cert-badge.env-cert{ background:rgba(60,179,113,.09); color:#38a86a; border-color:rgba(60,179,113,.3); }
.cert-badge.bgmea   { background:rgba(0,102,51,.1);    color:#00cc66; border-color:rgba(0,204,102,.3); font-family:var(--ff-d); }
.cert-badge.epb     { background:rgba(0,82,136,.1);    color:#0052a3; border-color:rgba(0,120,200,.3); }
.cert-badge.trade   { background:rgba(232,81,10,.08);  color:var(--org); border-color:rgba(232,81,10,.25); }
.cert-badge.fire    { background:rgba(184,48,32,.09);  color:#b83020; border-color:rgba(184,48,32,.3); }
.cert-badge.factory { background:rgba(24,18,10,.07);   color:var(--ink2); border-color:rgba(24,18,10,.18); }
.cert-badge.fin-badge { background:rgba(24,18,10,.07); color:var(--ink); border-color:rgba(24,18,10,.18); }
.cert-badge.sc      { background:rgba(0,82,163,.09);   color:#0052a3; border-color:rgba(0,82,163,.3); }
.cert-badge.capr    { background:rgba(184,48,32,.09);  color:#b83020; border-color:rgba(184,48,32,.3); }

/* DOWNLOAD BUTTON */
.dl-btn {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .7rem; font-family:var(--ff-b); font-size:.63rem;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; color:var(--org);
  border:1px solid var(--bord-o); background:var(--org-lt);
  transition:all .2s; white-space:nowrap; flex-shrink:0;
}
.dl-btn:hover { background:var(--org); color:#fff; border-color:var(--org); }

.meta-note {
  font-size:.62rem; color:var(--ink3); letter-spacing:.06em;
  padding:.3rem .7rem; border:1px dashed var(--border);
  font-style:italic;
}

/* CERT META */
.cert-meta { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.meta-tag {
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:.62rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:.2rem .55rem; border-radius:20px;
}
.meta-tag.valid   { background:var(--green-lt); color:var(--green); border:1px solid rgba(42,96,73,.2); }
.meta-tag.expired { background:rgba(232,81,10,.1); color:var(--org); border:1px solid rgba(232,81,10,.25); }
.meta-date { font-size:.68rem; color:var(--ink3); letter-spacing:.04em; }
.cert-scope { font-size:.65rem; color:var(--ink3); letter-spacing:.06em; border-top:1px solid var(--border); padding-top:.6rem; }

/* ── REQUEST SECTION ────────────────────────────────────────────────────── */
#cert-request {
  background:var(--ink);
  padding:5rem 0;
  position:relative;
  overflow:hidden;
}
#cert-request::before {
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(circle,rgba(232,81,10,.06) 1px,transparent 1px);
  background-size:28px 28px;
}
.req-inner {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.2fr 1fr; gap:5rem; align-items:center;
}
#cert-request .lbl { color:rgba(232,81,10,.85); }
#cert-request .sec-title { color:#fff; }
#cert-request .sec-title em { color:var(--org); }
#cert-request p { font-size:.88rem; color:rgba(255,255,255,.45); line-height:1.8; margin-top:1rem; margin-bottom:2rem; }
.req-actions { display:flex; gap:.75rem; flex-wrap:wrap; }
#cert-request .btn-out { border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.7); }
#cert-request .btn-out:hover { border-color:var(--org); color:var(--org); }

.req-contact { display:flex; flex-direction:column; gap:1rem; }
.rc-item {
  display:flex; align-items:flex-start; gap:.9rem;
  padding:1.1rem 1.3rem;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
}
.rc-icon { font-size:1.1rem; flex-shrink:0; line-height:1; margin-top:.15rem; }
.rc-label { font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:.2rem; }
.rc-val { font-size:.82rem; color:rgba(255,255,255,.7); }

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
footer { background:var(--ink); padding:4.5rem 0 0; }
.foot-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3.5rem; margin-bottom:3.5rem; }
.foot-brand p { font-size:.76rem; color:rgba(255,255,255,.38); line-height:1.8; margin-bottom:1.1rem; }
.bgmea-pill { display:flex; align-items:center; gap:.4rem; font-size:.63rem; color:rgba(255,255,255,.38); letter-spacing:.06em; margin-bottom:.4rem; }
.bgmea-pill::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--org-mid); display:inline-block; }
.foot-col h4 { font-family:var(--ff-d); font-size:.93rem; color:#fff; margin-bottom:1rem; }
.foot-col ul { list-style:none; }
.foot-col li { margin-bottom:.42rem; }
.foot-col a { font-size:.76rem; color:rgba(255,255,255,.38); text-decoration:none; transition:color .2s; }
.foot-col a:hover { color:var(--org-mid); }
.foot-bottom { border-top:1px solid rgba(255,255,255,.07); padding:1.6rem 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.foot-bottom p { font-size:.68rem; color:rgba(255,255,255,.25); }
.foot-bottom a { color:rgba(255,255,255,.25); text-decoration:none; margin-left:1rem; }
.foot-bottom a:hover { color:var(--org-mid); }
.foot-stripe { height:4px; background:linear-gradient(90deg,var(--org),var(--org-mid),var(--red)); }

/* ── WHATSAPP ────────────────────────────────────────────────────────────── */
.wa-float { position:fixed; bottom:2rem; right:2rem; z-index:99998; }
.wa-btn { width:56px; height:56px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,.4); transition:all .3s; text-decoration:none; }
.wa-btn:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(37,211,102,.55); }
.wa-btn svg { width:28px; height:28px; fill:#fff; }

/* ── COOKIE BANNER ───────────────────────────────────────────────────────── */
#cookieBanner { position:fixed; bottom:0; left:0; right:0; z-index:99997; background:var(--ink); border-top:2px solid var(--org); padding:1rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; transform:translateY(100%); transition:transform .4s cubic-bezier(.4,0,.2,1); }
#cookieBanner.cb-visible { transform:translateY(0); }
.cookie-text { font-size:.75rem; color:rgba(255,255,255,.7); line-height:1.55; flex:1; min-width:200px; }
.cookie-text a { color:var(--org-mid); text-decoration:underline; }
.cookie-actions { display:flex; gap:.5rem; flex-shrink:0; }
.cookie-accept { padding:.5rem 1.3rem; background:var(--org); color:#fff; border:none; font-family:var(--ff-b); font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:background .2s; }
.cookie-accept:hover { background:var(--org-dk); }
.cookie-decline { padding:.5rem 1rem; background:transparent; color:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.15); font-family:var(--ff-b); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:all .2s; }
.cookie-decline:hover { border-color:rgba(255,255,255,.4); color:rgba(255,255,255,.75); }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width:1024px) {
  .cert-grid { grid-template-columns:repeat(2,1fr); }
  .hero-inner { grid-template-columns:1fr; gap:3rem; }
  .hero-right { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .audit-badge:last-child { grid-column:span 2; }
  .req-inner { grid-template-columns:1fr; gap:3rem; }
  .foot-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .cert-grid { grid-template-columns:1fr; }
  .hero-right { grid-template-columns:1fr; }
  .audit-badge:last-child { grid-column:auto; }
  .filter-tabs { gap:.25rem; }
  .ftab { font-size:.62rem; padding:.32rem .75rem; }
  .foot-grid { grid-template-columns:1fr; }
  .foot-bottom { flex-direction:column; text-align:center; }
  #cert-hero { padding:7rem 0 4rem; }
  .section-head { flex-direction:column; align-items:flex-start; gap:.7rem; }
}
@media (max-width:480px) {
  .hero-stats { gap:1.5rem; }
  .filter-tabs { gap:.2rem; }
  .req-actions { flex-direction:column; }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; }
  html { scroll-behavior:auto; }
}