/* Retail & Warehouse — refreshed to match Agro look, with hero photo */
:root{
  --bg-dark: #2f3136;
  --text:     #eaeaea;  --text-dim:#cdd0d6;

  --ink: #1f2328;
  --paper:#ffffff;

  /* section alt bg */
  --alt: #f2f4f6;

  /* Palette from retail-hero (teal/green + orange) */
  --mint:   #39c3a0;
  --orange: #ff8a3d;
  --mint-ink:#0f3b34;

  --gap: 28px;
  --radius: 16px;
  --shadow: 0 8px 24px rgba(15,16,20,0.06);

  /* hero crop */
  --hero-pos: 50% 45%;
}

/* base */
*{ box-sizing:border-box; }
html,body{ height:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html,body{ scroll-behavior:auto; } }
body{ margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--ink); background:#fff; line-height:1.65; }

.container{ width:min(1120px,92vw); margin-inline:auto; }
.section{ padding: clamp(48px,6vw,96px) 0; background:#fff; }
.section--alt{ background:var(--alt); }
.section__title{ margin:0 0 12px; font-size:clamp(28px,3.2vw,36px); font-weight:900; letter-spacing:.2px; }
.lead{ font-size:1.08rem; color:#4a4f57; margin:.4rem 0 .8rem; }
.bullets{ margin:0; padding-left:1rem; } .bullets li{ margin:6px 0; }

/* NAV */
.nav{ position:sticky; top:0; z-index:30; background:var(--bg-dark); border-bottom:1px solid rgba(255,255,255,.06); backdrop-filter:saturate(120%) blur(2px); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0; }
.nav__brand img{ height:36px; width:auto; display:block; }
.nav__links{ display:flex; gap:18px; }
.nav__links a{ color:var(--text-dim); text-decoration:none; font-weight:700; font-size:.95rem; }
.nav__links a:hover{ color:var(--text); }
.nav__toggle{ display:none; }
.nav__burger{ display:none; cursor:pointer; width:36px; height:28px; position:relative; }
.nav__burger span{ position:absolute; left:0; right:0; height:3px; background:#fff; border-radius:3px; transition:.2s; }
.nav__burger span:nth-child(1){ top:2px; } .nav__burger span:nth-child(2){ top:12px; } .nav__burger span:nth-child(3){ bottom:2px; }
#nav-toggle:checked + .nav__burger span:nth-child(1){ transform: translateY(10px) rotate(45deg); }
#nav-toggle:checked + .nav__burger span:nth-child(2){ opacity:0; }
#nav-toggle:checked + .nav__burger span:nth-child(3){ transform: translateY(-10px) rotate(-45deg); }
@media (max-width:880px){
  .nav__burger{ display:block; }
  .nav__links{ position:fixed; inset:56px 0 auto 0; background:var(--bg-dark); display:grid; gap:12px; padding:14px 20px 18px; transform:translateY(-120%); transition:transform .2s; box-shadow:0 12px 24px rgba(0,0,0,.22); }
  #nav-toggle:checked ~ .nav__links{ transform:translateY(0); }
}

/* HERO (photo style like Agro) */
.hero{ position:relative; color:#fff; overflow:clip; }
.hero__media{ position:absolute; inset:0; }
.hero__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--hero-pos); filter:saturate(1.02); }
.hero__overlay{ position:absolute; inset:0; background: linear-gradient(0deg, rgba(32,36,40,.62), rgba(32,36,40,.62)); }
.hero__inner{ position:relative; min-height: clamp(360px, 50vw, 560px); display:grid; place-items:center; text-align:center; gap:14px; padding:28px 0; }
.hero__title{ margin:0; font-size:clamp(30px,4.6vw,46px); font-weight:900; letter-spacing:.2px; }
.hero__tagline{ margin:0 0 6px; color:#e7f6f1; font-weight:700; letter-spacing:.04em; }
.hero__badges{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.badge{ background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.22); padding:6px 10px; border-radius:999px; font-weight:800; font-size:.85rem; backdrop-filter: blur(2px); }
.hero__cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* Buttons */
.btn{ display:inline-block; padding:10px 16px; border-radius:12px; text-decoration:none; font-weight:900; transition: transform .1s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.btn--mint{ background:var(--mint); color:#07342c; box-shadow:0 10px 22px rgba(57,195,160,.28); }
.btn--mint:hover{ transform: translateY(-1px); box-shadow:0 14px 28px rgba(57,195,160,.34); }
.btn--ghost{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.6); }
.btn--ghost:hover{ background: rgba(255,255,255,.12); }
/* ghost on light sections */
.section .btn--ghost, .section--alt .btn--ghost{ color:var(--mint-ink); border-color: rgba(57,195,160,.45); }
.section .btn--ghost:hover, .section--alt .btn--ghost:hover{ background: rgba(57,195,160,.06); border-color: rgba(57,195,160,.6); }

/* Grids */
.grid-2{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:880px){ .grid-2{ grid-template-columns:1.2fr 1fr; } }
.grid-3{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:960px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }

/* Cards / icons */
.card{ background:var(--paper); border-radius:var(--radius); padding:22px 22px 18px; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.06); }
.card__title{ margin:0 0 8px; font-weight:900; font-size:1.12rem; letter-spacing:.2px; color:var(--mint-ink); }
.ico{ width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:rgba(57,195,160,.10); color:var(--mint); margin-bottom:6px; }
.ico--accent{ background:rgba(255,138,61,.12); color:var(--orange); }
.ico svg{ width:22px; height:22px; fill:currentColor; }

/* People */
.cards-people{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:880px){ .cards-people{ grid-template-columns:repeat(2,1fr); } }
.person{ display:grid; grid-template-columns:96px 1fr; gap:18px; align-items:center; background:#fff; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.06); }
.person__avatar{ width:96px; height:96px; border-radius:50%; overflow:hidden; background:#e6edf0; border:2px solid var(--mint); }
.person__avatar img{ width:100%; height:100%; object-fit:cover; }
.person__name{ margin:0 0 2px; font-weight:800; font-size:1.12rem; }
.person__role{ margin:0 0 6px; color:#5a616b; font-weight:600; }
.person__contact{ margin:0; }
.person__contact a{ color: var(--mint-ink); text-decoration:none; border-bottom:1px solid rgba(57,195,160,.35); }
.person__contact a:hover{ border-color: var(--mint); }

/* Lead form */
.leadform{ padding:22px; }
.leadform__grid{ display:grid; gap:14px; grid-template-columns:1fr 1fr; }
@media (max-width:719.98px){ .leadform__grid{ grid-template-columns:1fr; } }
.leadform__full{ grid-column:1 / -1; }
.leadform label{ display:flex; flex-direction:column; gap:6px; font-weight:700; }
.leadform input, .leadform textarea{ border:1px solid #d6d9df; border-radius:10px; padding:10px 12px; font:inherit; }
.leadform input:focus, .leadform textarea:focus{ outline:2px solid rgba(57,195,160,.35); border-color:var(--mint); }
.leadform__actions{ display:flex; align-items:center; gap:16px; margin-top:10px; flex-wrap:wrap; }
.leadform__note{ margin:0; color:#5a616b; }
.hidden{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }


.tabs{ margin-top:10px; }
.tabs input{ position:absolute; opacity:0; pointer-events:none; }

/* segmented toggle container (grid for perfect halves) */
.tabs__controls{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  background: #eef1f4;
  border-radius: 999px;
  /* crisp inner border without altering sizing */
  box-shadow: inset 0 0 0 1px #d3d8de;
  /* ensure each half is wider than height => pill, not circle */
  min-width: 320px;
  height: 44px;
  margin: 0 auto 24px;
  padding: 0;   /* no padding; highlight is sized explicitly */
  overflow: hidden;
}

/* sliding highlight sized to exactly half of the track */
.tabs__controls::before{
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 6px);      /* container split minus side insets */
  background: var(--mint);
  border-radius: 999px;
  transition: transform .25s ease;
  z-index: 1;
  box-shadow: 0 3px 10px rgba(57,195,160,.28);
}

/* move highlight to right half */
#tab-warehouse:checked ~ .tabs__controls::before{
  transform: translateX(100%);
}

/* labels sit above highlight and stay perfectly centered */
.tabs__btn{
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #4b5058;
  cursor: pointer;
  user-select: none;
  z-index: 2;
  font-size: 0.95rem;
  padding: 0 18px; /* horizontal breathing; grid controls width */
  transition: color 0.2s ease;
}

/* active text color on top of mint */
#tab-retail:checked ~ .tabs__controls label[for="tab-retail"],
#tab-warehouse:checked ~ .tabs__controls label[for="tab-warehouse"]{
  color: #ffffff;
}

/* panels */
.tabs__panels .tab{ display:none; }
#tab-retail:checked ~ .tabs__panels .tab[data-tab="retail"],
#tab-warehouse:checked ~ .tabs__panels .tab[data-tab="warehouse"]{ display:block; }

/* Workflow */
.flow{ margin:8px 0 0; padding:0; list-style:none; display:grid; gap:16px; }
.flow__step{ display:grid; grid-template-columns:40px 1fr; gap:12px; background:#fff; border-radius:14px; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.06); padding:14px; }
.flow__num{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:900; color:#fff; background:var(--orange); }
.flow__body h4{ margin:.1rem 0 .1rem; font-size:1.02rem; }
.flow__body p{ margin:.2rem 0 0; color:#3f3f3f; }
.cta{ margin-top:14px; text-align:center; }

/* Footer & back-to-top */
.footer{ background:var(--bg-dark); color:var(--text-dim); padding:18px 0; }
.footer__inner{ display:flex; align-items:center; gap:8px; justify-content:center; flex-wrap:wrap; }
.dot{ opacity:.6; }
.to-top{ position:fixed; right:clamp(14px,2vw,22px); bottom:clamp(14px,2vw,22px); z-index:50; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:rgba(47,49,54,.92); color:#fff; box-shadow:0 8px 22px rgba(0,0,0,.25); text-decoration:none; transition:transform .15s, box-shadow .2s, background .2s, opacity .2s; opacity:.95; }
.to-top:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.32); background:rgba(47,49,54,1); }

/* Performance hints */
section, .person, .card{ content-visibility:auto; contain-intrinsic-size:600px; }