@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap');
/* ============================================================
   Spectra Analytical Lab — design system
   Home = data-theme="hybrid" (light/airy) | Subpages = data-theme="sleek" (dark/glass)
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  --accent:#86cc21;--accent-dark:#6ba81a;
  /* defaults (hybrid / light) */
  --bg:#ffffff;--bg-alt:#f4f7f1;--text:#17201b;--muted:#586159;
  --card-bg:#ffffff;--card-border:#e8ece3;--card-blur:0px;--card-radius:18px;--card-shadow:0 16px 44px rgba(18,40,24,.10);
  --nav-bg:#ffffff;--nav-text:#17201b;--role:var(--accent-dark);
  --input-bg:#ffffff;--input-border:#d8ddd0;
  --hero-text:#ffffff;--hero-accent:#86cc21;
  --max:1150px;
}
body{font-family:'Jost',"Segoe UI",Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.65}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
[id]{scroll-margin-top:110px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.narrow{max-width:820px}

/* ================= NAV ================= */
.nav{background:var(--nav-bg);border-bottom:1px solid var(--card-border);position:sticky;top:0;z-index:100;transition:.3s}
.nav .row{display:flex;align-items:center;justify-content:space-between;padding:12px 22px;max-width:var(--max);margin:0 auto;gap:16px}
.brand img{height:50px}
.logo-dark{display:none}
.menu-toggle{display:none;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--nav-text)}
.nav ul{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 4px;list-style:none;align-items:center}
.nav ul>li{position:relative}
.nav a{display:block;padding:9px 11px;font-size:.82rem;text-transform:uppercase;letter-spacing:.02em;font-weight:600;color:var(--nav-text);border-radius:8px}
.nav a:hover{color:var(--accent)}
.dropdown{position:absolute;top:100%;left:0;min-width:220px;background:var(--nav-bg);border:1px solid var(--card-border);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.18);padding:6px;display:none;list-style:none;margin-top:0}
.has-dd.open>.dropdown{display:block}
.dropdown a{text-transform:none;font-weight:500;font-size:.9rem;letter-spacing:0}

/* ================= HERO SLIDESHOW (home) ================= */
.hero{position:relative;height:600px;overflow:hidden;background:#0d1512}
.hero .bg{position:absolute;inset:0;background:url('assets/hero.jpg') center 45%/cover;transform:scale(1.05);animation:kb 20s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.14)}}
.slides{position:absolute;inset:0;z-index:3}
.slide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;transform:translateX(70px);transition:opacity .9s ease,transform .9s ease;pointer-events:none}
.slide.active{opacity:1;transform:translateX(0);pointer-events:auto}
.slide.exit{opacity:0;transform:translateX(-70px)}
.slide .inner{padding:0 22px;max-width:var(--max);margin:0 auto;width:100%;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.slide h1{font-size:4rem;font-weight:300;letter-spacing:1px;color:var(--hero-text);line-height:1.04}
.slide h1 .accent{color:var(--hero-accent);font-weight:500}
.slide p{color:var(--hero-text);opacity:.94;font-size:1.2rem;margin:16px 0 28px;max-width:540px;font-weight:300}
.hero-btn{display:inline-flex;align-items:center;gap:12px;background:var(--accent);color:#0d1512;padding:14px 30px;border-radius:30px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;font-size:.8rem;transition:.2s}
.hero-btn:hover{background:#fff;transform:translateY(-2px)}
.hero-btn .ln{width:26px;height:1px;background:currentColor;display:inline-block}
.dots{position:absolute;bottom:28px;left:0;right:0;z-index:4;display:flex;gap:9px;justify-content:center}
.dot{width:34px;height:4px;border-radius:3px;background:rgba(255,255,255,.4);cursor:pointer;border:0;transition:.3s}
.dot.active{background:var(--accent);width:48px}
@media(max-width:720px){.hero{height:500px}.slide h1{font-size:2.5rem}}

/* ================= PAGE BANNER (subpages) ================= */
.banner{position:relative;height:320px;overflow:hidden;background:#0d1512;display:flex;align-items:center}
.banner .bg{position:absolute;inset:0;background:url('assets/hero.jpg') center 45%/cover;transform:scale(1.05);animation:kb 20s ease-in-out infinite alternate}
.banner .inner{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:0 22px;width:100%;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.banner h1{font-size:3.1rem;font-weight:300;letter-spacing:1px;color:#fff}
.banner h1 .accent{color:var(--accent);font-weight:500}
.banner .crumb{color:#fff;opacity:.85;font-size:.9rem;margin-top:6px}
@media(max-width:720px){.banner{height:250px}.banner h1{font-size:2.1rem}}

/* ================= SECTIONS ================= */
.section{padding:72px 0}
.section.soft{background:var(--bg-alt)}
.head{text-align:center;max-width:660px;margin:0 auto 48px}
.head span{color:var(--role);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem}
.head h2{font-size:2.3rem;font-weight:400;margin:8px 0 10px}
.head p{color:var(--muted)}
.kicker{display:flex;align-items:center;gap:16px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;margin-bottom:12px}
.kicker::before{content:"";width:56px;height:2px;background:currentColor}

/* prose */
.prose h2{font-size:1.9rem;font-weight:400;margin:0 0 14px}
.prose h3{font-size:1.25rem;font-weight:500;margin:26px 0 8px}
.prose p{margin-bottom:16px;color:var(--text)}
.prose ul{padding-left:22px;margin-bottom:16px;color:var(--text)}
.prose li{margin:5px 0}
.hr{border:0;border-top:1px solid var(--card-border);margin:44px 0}
.tag-list{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:14px 0}
.tag-list li{background:var(--bg-alt);border:1px solid var(--card-border);border-radius:30px;padding:7px 15px;font-size:.85rem;margin:0}

/* ================= CARDS ================= */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--card-radius);padding:28px;box-shadow:var(--card-shadow);backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur));transition:transform .2s,box-shadow .2s}
a.card:hover{transform:translateY(-6px)}
.card .ico{width:54px;height:54px;border-radius:12px;background:rgba(134,204,33,.15);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:16px}
.card h3{font-size:1.2rem;font-weight:500;margin-bottom:8px}
.card p{color:var(--muted);font-size:.95rem}
@media(max-width:720px){.cards,.cards.two{grid-template-columns:1fr}}

/* ================= STATS ================= */
.stats{padding:46px 0;background:radial-gradient(circle at 80% 20%,rgba(134,204,33,.28),transparent 55%),linear-gradient(120deg,#0f2417,#1c3a26)}
.stats .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.stat .n{font-size:2.3rem;font-weight:600;color:var(--accent)}
.stat .l{color:#c7d3c2;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;margin-bottom:8px}
@media(max-width:720px){.stats .grid{grid-template-columns:1fr;gap:26px}.stat .l{white-space:normal}}

/* ================= TEAM ================= */
.team{display:flex;flex-wrap:wrap;justify-content:center;gap:56px 46px;max-width:1080px;margin:0 auto}
.tmember{width:300px;text-align:center}
.tmember img{width:158px;height:158px;border-radius:50%;object-fit:cover;object-position:center top;margin:0 auto 20px;filter:grayscale(1)}
.tmember h3{font-size:1.02rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.tmember .role{color:var(--muted);font-weight:400;font-size:.85rem;margin:3px 0 16px;white-space:nowrap}
.tmember p{color:var(--muted);font-size:.9rem;text-align:center}
@media(max-width:720px){.tmember{width:100%}.tmember .role{white-space:normal}}

/* ================= FAQ ================= */
.faq-item{border:1px solid var(--card-border);border-radius:14px;margin-bottom:14px;overflow:hidden;background:var(--card-bg);backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur))}
.faq-item summary{cursor:pointer;padding:20px 24px;font-weight:600;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--accent);font-size:1.5rem;line-height:1}
.faq-item[open] summary::after{content:"\2013"}
.faq-item .body{padding:0 24px 22px;color:var(--muted)}

/* ================= CONTACT ================= */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.contact-info .label{font-weight:600;color:var(--text);margin-top:18px;text-transform:uppercase;letter-spacing:.05em;font-size:.8rem}
.contact-info p{color:var(--muted);margin:2px 0}
form label{display:block;font-weight:600;margin:14px 0 6px;font-size:.88rem}
form input,form textarea{width:100%;padding:13px;border:1px solid var(--input-border);border-radius:10px;font-family:inherit;font-size:1rem;background:var(--input-bg);color:var(--text)}
form textarea{min-height:140px;resize:vertical}
.map{border:0;width:100%;height:290px;border-radius:16px;margin-top:22px}
.btn{display:inline-block;background:var(--accent);color:#0d1512;padding:14px 30px;border-radius:30px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:.82rem;border:0;cursor:pointer;transition:.2s}
.btn:hover{background:var(--accent-dark);color:#fff}

/* ================= CTA ================= */
.cta{background:radial-gradient(circle at 80% 20%,rgba(134,204,33,.35),transparent 55%),linear-gradient(120deg,#0f2417,#1c3a26);color:#fff;text-align:center;padding:66px 22px}
.cta h2{font-size:2rem;font-weight:400;margin-bottom:12px}
.cta p{opacity:.9;margin-bottom:24px}
.cta .btn{background:#fff;color:var(--accent-dark)}
.cta .btn:hover{background:#0d1512;color:#fff}

/* ================= FOOTER ================= */
.foot{background:#101613;color:#aab4a8;padding:54px 0 26px;font-size:.92rem}
.foot .grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;margin-bottom:30px}
.foot h4{color:#fff;margin-bottom:14px;font-size:1rem;font-weight:500}
.foot ul{list-style:none}
.foot li{margin:7px 0}
.foot a:hover{color:var(--accent)}
.foot-accred{display:flex;justify-content:flex-end;margin-bottom:26px}
.foot-accred img{background:#fff;border-radius:10px;padding:12px 16px;max-width:320px;width:100%}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#8f998f;font-size:.85rem}
@media(max-width:720px){.foot .grid{grid-template-columns:1fr}.foot-accred{justify-content:center}}

/* ================= THEME: SLEEK / GLASS (subpages) ================= */
body[data-theme="sleek"]{--bg:#0e1512;--bg-alt:#121b16;--text:#eaf1e7;--muted:#9fb09b;
  --card-bg:rgba(255,255,255,.055);--card-border:rgba(255,255,255,.13);--card-blur:14px;--card-shadow:0 10px 40px rgba(0,0,0,.45);
  --nav-bg:rgba(14,21,18,.9);--nav-text:#eaf1e7;--role:#9ada4b;
  --input-bg:rgba(255,255,255,.06);--input-border:rgba(255,255,255,.2)}
body[data-theme="sleek"] .nav{backdrop-filter:blur(12px)}
body[data-theme="sleek"] .logo-light{display:none}
body[data-theme="sleek"] .logo-dark{display:block}
body[data-theme="sleek"] .tag-list li{background:rgba(255,255,255,.06)}

/* ================= MOBILE NAV ================= */
@media(max-width:900px){
  .menu-toggle{display:block}
  .nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--nav-bg);flex-direction:column;align-items:stretch;padding:10px 16px;border-bottom:1px solid var(--card-border)}
  .nav ul.open{display:flex}
  .dropdown{position:static;display:block;box-shadow:none;border:0;padding-left:14px;margin:0;background:transparent}
  .contact-grid{grid-template-columns:1fr}
}

/* ================= CERTIFICATES & BADGES ================= */
.cert-doc{max-width:900px;margin:0 auto}
.cert-doc img{width:100%;display:block;margin:0 auto 22px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.35);background:#fff}
/* Emerald Test badges. The 1040px cap here never actually applied: the badges
   sat inside .wrap.narrow (820px, less 44px padding = 776px of content), so the
   image rendered at 776px against a 1615x1135 source, under half its native
   width. The markup now puts .badges-wrap in a plain .wrap instead, so the
   badges get the full 1106px content width the rest of the site uses. Still
   under the PNG's native 1615px, so it stays sharp. */
.badges-wrap{max-width:1150px;margin:26px auto 0}
/* height:auto is REQUIRED here. The img tag carries width="1615" height="1135"
   so the browser can reserve the space before the PNG loads, but with
   width:100% and no height:auto the browser uses the CSS width AND the HTML
   height together, rendering 1106x1135 instead of 1106x777 and squashing every
   badge. The site's global img rule has no height:auto either, so this has to
   be set here. Do not remove it while the width/height attributes exist. */
.badges-wrap img{width:100%;height:auto;display:block;border-radius:8px}

/* Emerald Test badge grid (2026-08-27). Flexbox rather than CSS grid ON PURPOSE:
   with 20 badges the last row is always partial, and flex + justify-content
   centre centres that partial row. auto-fit grid columns would leave it
   hanging left, which is exactly what Nelson asked to fix.
   Each badge gets a SQUARE box and the image is contained inside it, so the
   tall 2024 shields and the wide Steep Hill ovals read as the same visual
   size despite very different aspect ratios.
   The clamp on the box size is what makes it work on a phone: 40vw gives two
   badges per row at 375px instead of the old composite cramming in all 20. */
.badge-grid{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:28px 24px;margin:30px auto 0;padding:0;max-width:1150px;list-style:none;
}
.badge-grid li{
  margin:0;list-style:none;
  width:clamp(130px,40vw,184px);height:clamp(130px,40vw,184px);
  display:flex;align-items:center;justify-content:center;
}
/* max-width AND max-height with auto on both dimensions keeps every aspect
   ratio honest inside the square box. The global img rule sets no height:auto,
   so it has to be spelled out here too. */
.badge-grid img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
@media(max-width:720px){.badge-grid{gap:22px 18px}}