/* ============================================================
   Tyna & Ruth Traders — design tokens
   Palette pulled from the client's own company profile:
   deep teal + lime leaf mark, set on a paper-toned ground.
   ============================================================ */
:root{
  --teal-950:#04262B;
  --teal-900:#06373F;
  --teal-800:#0B4750;
  --teal-700:#125866;
  --lime-500:#A7C739;
  --lime-600:#8FAE2C;
  --lime-700:#75941F;
  --paper:#F6F4EC;
  --sand:#EBE4D3;
  --sand-line:#DAD0B7;
  --ink:#16211F;
  --ink-soft:#455049;
  --white:#FFFFFF;
  --shadow: 0 18px 40px -20px rgba(4,38,43,0.35);
  --radius: 3px;
  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:'Barlow Semi Condensed', 'Inter', sans-serif;
  font-weight:700;
  line-height:1.08;
  margin:0 0 .5em;
  color:var(--teal-950);
  letter-spacing:.2px;
}
p{ margin:0 0 1em; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  border-radius:var(--radius);
  font-weight:600;
  font-size:.98rem;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-lime{ background:var(--lime-500); color:var(--teal-950); }
.btn-lime:hover{ background:var(--lime-600); }
.btn-outline{ border-color:rgba(255,255,255,.55); color:var(--white); }
.btn-outline:hover{ border-color:var(--white); background:rgba(255,255,255,.08); }
.btn-dark{ background:var(--teal-950); color:var(--white); }
.btn-dark:hover{ background:var(--teal-900); }

/* ---------- utility / top strip ---------- */
.topstrip{
  background:var(--teal-950);
  color:#CFE3C8;
  font-size:.86rem;
}
.topstrip .wrap{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 28px; flex-wrap:wrap; gap:6px;
}
.topstrip a{ color:#EAF4DE; }
.topstrip .contact-line{ display:flex; gap:22px; flex-wrap:wrap; }
.topstrip .contact-line span{ display:inline-flex; align-items:center; gap:7px; }
.topstrip svg{ width:14px; height:14px; flex:none; }

/* ---------- header / nav ---------- */
header.site-header{
  background:var(--white);
  border-bottom:1px solid var(--sand-line);
  position:sticky; top:0; z-index:50;
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:42px; height:42px; }
.brand .name{
  font-family:'Barlow Semi Condensed', sans-serif;
  font-weight:700; font-size:1.18rem; color:var(--teal-950); line-height:1.05;
}
.brand .name small{
  display:block; font-family:'Inter',sans-serif; font-weight:500;
  font-size:.68rem; letter-spacing:.06em; color:var(--lime-700); text-transform:none;
}
nav.mainnav ul{ display:flex; gap:2px; }
nav.mainnav a{
  display:block; padding:10px 16px; font-weight:600; font-size:.95rem;
  color:var(--ink-soft); border-radius:var(--radius);
  transition:background .15s ease, color .15s ease;
}
nav.mainnav a:hover{ background:var(--sand); color:var(--teal-950); }
nav.mainnav a.active{ color:var(--teal-950); background:var(--sand); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.navtoggle{
  display:none; background:none; border:none; cursor:pointer; padding:6px;
}
.navtoggle span{
  display:block; width:26px; height:2px; background:var(--teal-950); margin:5px 0;
}

@media (max-width:920px){
  .topstrip .contact-line{ gap:14px; font-size:.8rem; }
  nav.mainnav{
    position:absolute; top:100%; left:0; right:0; background:var(--white);
    border-bottom:1px solid var(--sand-line);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  nav.mainnav.open{ max-height:520px; }
  nav.mainnav ul{ flex-direction:column; padding:10px 28px 18px; gap:0; }
  nav.mainnav a{ padding:12px 6px; border-bottom:1px solid var(--sand); }
  .nav-cta .btn span.long{ display:none; }
  .navtoggle{ display:block; }
}

/* ---------- hero ---------- */
.hero{
  position:relative; color:var(--white);
  background:linear-gradient(rgba(4,38,43,.82),rgba(4,38,43,.72)), var(--hero-img) center/cover no-repeat;
  padding:110px 0 90px;
}
.hero .eyebrow{
  color:var(--lime-500); font-weight:700; font-size:.85rem;
  letter-spacing:.08em; margin-bottom:14px; display:block;
}
.hero h1{
  color:var(--white); font-size:clamp(2.4rem,5vw,3.7rem); max-width:15ch; margin-bottom:.3em;
}
.hero .lede{ max-width:52ch; font-size:1.12rem; color:#E4EFDC; margin-bottom:2em; }
.hero .cta-row{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-stats{ background:var(--teal-900); color:var(--white); }
.hero-stats .wrap{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:0 28px;
}
.hero-stats .stat{
  padding:26px 24px; border-left:1px solid rgba(255,255,255,.14);
}
.hero-stats .stat:first-child{ border-left:none; }
.hero-stats .num{
  font-family:'Barlow Semi Condensed',sans-serif; font-size:2.1rem; font-weight:700; color:var(--lime-500);
  display:block;
}
.hero-stats .label{ font-size:.85rem; color:#CFE3C8; }
@media (max-width:760px){
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
  .hero-stats .stat:nth-child(3){ border-left:none; }
}

/* page header (inner pages) */
.pagehead{
  background:linear-gradient(rgba(4,38,43,.86),rgba(4,38,43,.8)), var(--hero-img) center/cover no-repeat;
  color:var(--white); padding:70px 0 56px;
}
.pagehead .eyebrow{ color:var(--lime-500); font-weight:700; letter-spacing:.08em; font-size:.85rem; }
.pagehead h1{ color:var(--white); font-size:clamp(2rem,4vw,2.9rem); max-width:24ch; }
.pagehead p{ max-width:60ch; color:#E4EFDC; font-size:1.05rem; margin-top:.6em;}
.crumb{ font-size:.85rem; color:#B9CDB2; margin-bottom:14px; }
.crumb a:hover{ color:var(--white); }

/* ---------- sections ---------- */
section{ padding:76px 0; }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head .kicker{
  color:var(--lime-700); font-weight:700; font-size:.82rem; letter-spacing:.08em;
  display:block; margin-bottom:10px;
}
.section-head h2{ font-size:clamp(1.7rem,3vw,2.4rem); }
.bg-sand{ background:var(--sand); }
.bg-teal{ background:var(--teal-950); color:var(--white); }
.bg-teal h2, .bg-teal h3{ color:var(--white); }
.bg-teal .section-head .kicker{ color:var(--lime-500); }

/* two-column about */
.split{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.split.reverse{ grid-template-columns:.95fr 1.05fr; }
.split.reverse .img-col{ order:2; }
.split .img-col img{ border-radius:var(--radius); box-shadow:var(--shadow); }
@media (max-width:860px){
  .split, .split.reverse{ grid-template-columns:1fr; }
  .split.reverse .img-col{ order:0; }
}
.mission-vision{ display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:36px; }
.mv-card{ background:var(--teal-900); color:var(--white); padding:28px; }
.mv-card:nth-child(2){ background:var(--teal-800); }
.mv-card .tag{ color:var(--lime-500); font-family:'Barlow Semi Condensed',sans-serif; font-size:1.5rem; font-weight:700; display:block; margin-bottom:8px; }
@media (max-width:640px){ .mission-vision{ grid-template-columns:1fr; } }

/* values grid */
.values-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--sand-line);
  border:1px solid var(--sand-line);
}
.value-card{ background:var(--paper); padding:30px 26px; }
.value-card .num{ font-family:'Barlow Semi Condensed',sans-serif; color:var(--lime-600); font-size:1rem; font-weight:700; }
.value-card h3{ font-size:1.15rem; margin:8px 0 8px; }
.value-card p{ color:var(--ink-soft); font-size:.94rem; margin:0; }
@media (max-width:860px){ .values-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .values-grid{ grid-template-columns:1fr; } }

/* services preview (4-up) — separate modifier so it still collapses on mobile */
.values-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:860px){ .values-grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .values-grid.cols-4{ grid-template-columns:1fr; } }

/* services */
.service-list{ display:flex; flex-direction:column; gap:0; }
.service-row{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:center;
  padding:44px 0; border-top:1px solid var(--sand-line);
}
.service-row:first-child{ border-top:none; }
.service-row img{ border-radius:var(--radius); }
.service-row .idx{ font-family:'Barlow Semi Condensed',sans-serif; color:var(--lime-600); font-size:1rem; font-weight:700; letter-spacing:.05em; }
.service-row h3{ font-size:1.5rem; margin:6px 0 12px; }
.service-row p{ color:var(--ink-soft); }
@media (max-width:820px){ .service-row{ grid-template-columns:1fr; } }

/* cards (materials handled) */
.tag-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.tag-grid span{
  background:var(--white); border:1px solid var(--sand-line); padding:9px 16px;
  border-radius:100px; font-size:.9rem; font-weight:600; color:var(--teal-900);
}

/* process / conveyor timeline */
.conveyor{
  position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:10px;
}
.conveyor::before{
  content:""; position:absolute; top:27px; left:6%; right:6%; height:3px;
  background:repeating-linear-gradient(90deg,var(--lime-500) 0 14px, transparent 14px 24px);
}
.cv-step{ position:relative; padding:0 18px; text-align:left; }
.cv-step .dot{
  width:56px; height:56px; border-radius:50%; background:var(--teal-950); color:var(--lime-500);
  display:flex; align-items:center; justify-content:center; font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:700; font-size:1.3rem; position:relative; z-index:2; margin-bottom:18px;
  border:4px solid var(--paper);
}
.cv-step h3{ font-size:1.05rem; margin-bottom:6px; }
.cv-step p{ color:var(--ink-soft); font-size:.9rem; }
@media (max-width:900px){
  .conveyor{ grid-template-columns:1fr; gap:28px; }
  .conveyor::before{ display:none; }
}

/* why choose us */
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px 48px; }
.why-item{ display:flex; gap:16px; }
.why-item .ico{
  flex:none; width:44px; height:44px; border-radius:50%; background:var(--lime-500);
  display:flex; align-items:center; justify-content:center; color:var(--teal-950);
}
.why-item h3{ font-size:1.08rem; margin-bottom:4px; }
.why-item p{ color:var(--ink-soft); font-size:.94rem; margin:0; }
@media (max-width:760px){ .why-grid{ grid-template-columns:1fr; } }

/* sustainability list */
.check-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; margin-top:18px; }
.check-list li{ display:flex; gap:10px; align-items:flex-start; color:#E4EFDC; }
.check-list li svg{ flex:none; margin-top:3px; color:var(--lime-500); }
@media (max-width:600px){ .check-list{ grid-template-columns:1fr; } }

/* clients */
.client-strip{
  display:flex; align-items:center; justify-content:center; gap:56px; flex-wrap:wrap;
  padding:34px 0;
}
.client-strip img{ height:44px; width:auto; filter:grayscale(1) brightness(1.6); opacity:.85; }

/* certification */
.cert-wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center; }
.cert-wrap img{ border:10px solid var(--white); box-shadow:var(--shadow); transform:rotate(-1.2deg); }
@media (max-width:820px){ .cert-wrap{ grid-template-columns:1fr; } }

/* CTA band */
.cta-band{
  background:var(--lime-500); color:var(--teal-950); text-align:left;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:22px;
  padding:46px 0;
}
.cta-band h2{ color:var(--teal-950); font-size:1.8rem; margin:0; }
.cta-band p{ margin:6px 0 0; color:var(--teal-900); }

/* contact page */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; }
.contact-card{ background:var(--teal-950); color:var(--white); padding:34px; border-radius:var(--radius); }
.contact-card h3{ color:var(--white); }
.contact-card .row{ display:flex; gap:14px; padding:14px 0; border-top:1px solid rgba(255,255,255,.14); }
.contact-card .row:first-of-type{ border-top:none; }
.contact-card .row .ico{ flex:none; width:38px; height:38px; border-radius:50%; background:var(--lime-500); color:var(--teal-950); display:flex; align-items:center; justify-content:center; }
.contact-card .row a, .contact-card .row div{ font-size:.95rem; }
form.contact-form{ display:grid; gap:16px; }
form.contact-form .two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
form.contact-form label{ font-size:.85rem; font-weight:600; color:var(--teal-900); display:block; margin-bottom:6px; }
form.contact-form input, form.contact-form select, form.contact-form textarea{
  width:100%; padding:13px 14px; border:1px solid var(--sand-line); border-radius:var(--radius);
  font-family:inherit; font-size:.96rem; background:var(--white); color:var(--ink);
}
form.contact-form input:focus, form.contact-form select:focus, form.contact-form textarea:focus{
  outline:2px solid var(--lime-600); outline-offset:1px; border-color:var(--lime-600);
}
form.contact-form textarea{ resize:vertical; min-height:130px; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } form.contact-form .two{ grid-template-columns:1fr; } }
.form-note{ font-size:.85rem; color:var(--ink-soft); margin-top:4px; }
.map-embed{ margin-top:26px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--sand-line); }
.map-embed iframe{ width:100%; height:320px; border:0; display:block; }

/* footer */
footer.site-footer{ background:var(--teal-950); color:#C6D9C0; padding:60px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:36px; padding-bottom:44px; }
.footer-grid h4{ color:var(--white); font-size:1.02rem; margin-bottom:16px; }
.footer-grid .brand .name{ color:var(--white); }
.footer-grid p{ color:#AFC5A8; font-size:.92rem; }
.footer-grid ul li{ margin-bottom:10px; font-size:.92rem; }
.footer-grid ul a:hover{ color:var(--white); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding:18px 0; font-size:.82rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; color:#93AC8C;
}
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* whatsapp float */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:60; background:#25D366; color:#fff;
  width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.45); transition:transform .15s ease;
}
.wa-float:hover{ transform:scale(1.06); }

/* misc */
.reveal-note{ font-size:.8rem; color:var(--ink-soft); }
.center{ text-align:center; }
.mt-lg{ margin-top:44px; }