/* Base */
*{box-sizing:border-box} html,body{height:100%} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:#062e2e}
/* Sticky top navigation */
.topnav{ position:sticky; top:0; z-index:3000; display:flex; align-items:center; gap:12px; justify-content:space-between; padding:8px 14px; background:rgba(255,255,255,0.9); backdrop-filter:saturate(140%) blur(6px); border-bottom:1px solid rgba(0,0,0,.06) }
.topnav .nav-logo img{ height:34px; width:auto; display:block }
.topnav .nav-links{ display:flex; gap:12px; align-items:center }
.topnav a{ text-decoration:none; font-weight:800; color:#063b3a; padding:8px 10px; border-radius:10px }
.topnav a.active{ color:#00AB8E; background:#eaf7f4 } .topnav a.cta-mini{ background:#00AB8E; color:#fff; box-shadow:0 8px 18px rgba(0,0,0,.08) }
.menu-toggle{ display:none; background:transparent; border:0; font-size:24px; line-height:1; padding:6px 10px; margin-left:auto; cursor:pointer; color:#063b3a; border-radius:8px }
/* Mobile dropdown */
@media (max-width:780px){
  .menu-toggle{ display:block }
  .topnav .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid rgba(0,0,0,.1); padding:12px; box-shadow:0 16px 28px rgba(0,0,0,.12); z-index:3100 }
  .topnav .nav-links.open{ display:flex !important; flex-direction:column; gap:8px }
  .topnav .nav-links a{ display:block !important }
  .topnav .nav-links a.cta-mini{ text-align:center }
}
/* HERO */
.hero{ min-height:100vh; background:#222 url('images/bg-sketch.jpg') center/cover no-repeat fixed; color:#fff; display:flex; align-items:center; justify-content:center; text-align:center; padding: clamp(16px, 3vw, 28px) }
.hero-inner{ max-width:1100px; width:100% }
.brand-logo{ width:min(34vw, 360px); height:auto; filter: drop-shadow(0 12px 22px rgba(0,0,0,.32)); margin: 0 auto clamp(10px, 2vw, 16px) }
.headline{ color:#00AB8E; font-weight:900; line-height:1.12; letter-spacing:.2px; font-size: clamp(28px, 6vw, 64px); margin: clamp(6px, 1.2vw, 10px) auto }
.dot{ opacity:0; color:#d87e77; animation:pulse 1.4s ease-in-out infinite } @keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.55}}
.ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin: clamp(14px, 2vw, 18px) 0 }
.btn{ display:inline-block; padding:14px 22px; border-radius:12px; font-weight:800; text-decoration:none; box-shadow:0 12px 24px rgba(0,0,0,.12); transition:transform .08s ease, filter .2s ease; font-size:1.05rem }
.btn-primary{ background:#00AB8E; color:#fff } .btn-primary:hover{ filter:brightness(1.05); transform:translateY(-1px) }
.btn-outline{ border:2px solid #00AB8E; color:#00AB8E; background:transparent } .btn-outline:hover{ background:#e8f6f4; color:#006b5b }
/* Certifications */
.badges{ display:flex; justify-content:center; align-items:center; gap:16px; flex-wrap:wrap; margin-top: clamp(8px, 1.5vw, 14px) }
.badge{ display:flex; align-items:center; gap:10px; background:#ffffff; color:#063b3a; padding:10px 14px; border-radius:14px; box-shadow:0 8px 16px rgba(0,0,0,.18) }
.badge img{ height:26px; width:auto; display:block } .badge-title{ font-weight:900 } .badge-sub{ font-size:12px; letter-spacing:.25px; text-transform:uppercase; color:#5c6a69; font-weight:800 }
/* Shared pages */
.dev-page, .brand-page, .story-page{ background:#f7f4ee }
.dev-header, .brand-header{ text-align:center; padding:28px 16px 10px }
.brand-logo.big{ width:min(32vw,340px) } .brand-logo.small{ width:120px; filter:none }
.dev-hero-title, .brand-hero-title{ font-size: clamp(28px, 5.2vw, 48px); line-height:1.1; margin:10px 0 8px; color:#063b3a; font-weight:900 }
.dev-hero-sub, .brand-hero-sub{ color:#365a5a; font-size: clamp(16px, 2.2vw, 20px); margin:0 auto 12px; max-width:900px }
/* Full-width image stripes */
.wide-image{ position:relative; overflow:hidden }
.wide-image img{ width:100%; height: clamp(300px, 48vh, 600px); display:block; object-fit: cover; image-rendering:auto; filter: saturate(0.9) contrast(1.05) }
.wide-image .wide-caption{ position:absolute; left:50%; bottom:8%; transform:translateX(-50%); background:rgba(0,0,0,.45); color:#fff; padding:10px 16px; border-radius:12px; text-align:center; white-space:nowrap; box-shadow:0 12px 24px rgba(0,0,0,.25); font-weight:800; letter-spacing:.2px }
.wide-image .wide-caption span{ display:block; font-weight:700; opacity:.9; font-size:.95rem }
.mt{ margin-top:10px }
/* Brand collage */
.brand-collage{ margin: 8px 0 4px } .brand-collage img{ width:100vw; max-width:100vw; margin:0 calc(50% - 50vw); height: clamp(180px, 36vh, 360px); object-fit: cover }
/* Benefit grid */
.benefit-grid{ max-width:1200px; margin: 18px auto; padding: 0 16px; display:grid; gap:14px; grid-template-columns: repeat(4, 1fr) }
.benefit{ background:#f9f7f3; border-radius:10px; padding:16px 16px 16px 14px; border:1px solid rgba(0,0,0,.08); border-left:4px solid #00AB8E }
.benefit h2{ margin:0 0 6px; color:#00AB8E; font-size: clamp(16px, 2.4vw, 20px) } .benefit p{ margin:0; color:#385a59; font-size: clamp(14px, 2vw, 16px) }
@media (max-width:1024px){ .benefit-grid{ grid-template-columns: repeat(3, 1fr) } }
@media (max-width:768px){ .benefit-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width:520px){ .benefit-grid{ grid-template-columns: 1fr } }
/* CTA bands */
.dev-cta-band, .brand-cta-band{ background:linear-gradient(180deg, #eaf7f4, #ffffff); margin:8px 0 0; padding:18px 0; border-top:1px solid rgba(0,0,0,.06) }
.band-inner{ display:flex; justify-content:space-between; gap:16px; max-width:1200px; margin:0 auto; padding:0 16px; align-items:center }
.band-copy h3{ margin:0 0 6px; font-size: clamp(20px, 3vw, 28px) } .band-copy p{ margin:0; color:#395a59 }
/* Our Story offsets */
.story-page .wide-image:first-of-type{ margin-top:110px } @media (max-width:780px){ .story-page .wide-image:first-of-type{ margin-top:120px } }
.story-hero-caption{ position:absolute; left:50%; bottom:10%; transform:translateX(-50%); background:rgba(0,0,0,.45); color:#fff; padding:14px 18px; border-radius:14px; text-align:center; box-shadow:0 12px 24px rgba(0,0,0,.25) }
.story-hero-caption h1{ margin:0 0 4px; font-size: clamp(22px, 4.6vw, 40px) } .story-hero-caption p{ margin:0; font-weight:700 }
.story-intro .story-wrap, .story-closing .story-wrap{ max-width: 1000px; margin: 18px auto; padding: 0 16px; text-align:center } .story-intro h2{ font-size: clamp(20px, 3.4vw, 32px); color:#063b3a; line-height:1.25 } .brand-green{ color:#00AB8E }
.values-grid{ max-width:1100px; margin: 16px auto; padding: 0 16px; display:grid; gap:14px; grid-template-columns: repeat(4,1fr) } .values-grid article{ background:#fff; border-radius:14px; padding:16px; border:1px solid rgba(0,0,0,.06); box-shadow:0 8px 16px rgba(0,0,0,.06) }