:root {
  --max-width: 1400px;
  --content-width: 1200px;
  --accent: #094033;
  --muted: #5b6b66;
  --radius: 14px;
}

/* global */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color: #0b2b26;
  background: #f7faf7;
  -webkit-font-smoothing: antialiased;
}
.wrap {
  width: min(var(--max-width), 96%);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* header */
.site-header {
  background: #fff;
  border-bottom: 1px solid rgba(7,20,15,0.06);
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(6px);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.brand { display:flex; align-items:center; gap:0.75rem; color:inherit; text-decoration:none; }
.logo-img { height:44px; width:auto; display:block; }
.brand-name { font-weight:700; font-size:1.05rem; }
.brand-tag { font-size:0.78rem; color:var(--muted); margin-top:-2px; }

nav.primary { display:flex; gap:1.25rem; align-items:center; font-weight:500; }
nav.primary a { color:var(--muted); text-decoration:none; padding:0.4rem 0.6rem; border-radius:8px; }
nav.primary a[aria-current="page"] { color:var(--accent); background: rgba(9,64,51,0.06); }

.nav-toggle { display:none; background:transparent; border:1px solid rgba(9,64,51,0.06); padding:0.45rem 0.6rem; border-radius:8px; cursor:pointer; }

/* hero (shared with home) */
.hero {
  margin: 1.6rem auto;
  width: min(var(--content-width), 98%);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(8,33,30,0.06), rgba(255,255,255,0.02));
  box-shadow: 0 6px 28px rgba(10,30,24,0.06);
  padding-bottom: 2.8rem;
}
.hero__media { position: relative; width: 100%; height: 48vh; min-height:320px; max-height:520px; overflow:hidden; display:block; }
.hero__media img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hero__overlay { position:absolute; inset:0; background: linear-gradient(180deg, rgba(3,30,28,0.62) 0%, rgba(3,30,28,0.18) 55%, rgba(3,30,28,0.02) 100%); }

.hero__body {
  position: relative;
  z-index: 2;
  padding: clamp(1rem, 4vh, 2.1rem);
  display: flex;
  justify-content: center;
  transform: translateY(-40%);
}
.hero__card {
  background: rgba(255,255,255,0.98);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(14,34,28,0.06);
  padding: clamp(1rem,2.5vh,1.4rem);
  max-width: 820px;
  width:100%;
}
.hero__title { margin:0; color:#062f2a; font-size: clamp(1.6rem, 3.8vw, 2.8rem); line-height:1.03; font-weight:700; }
.hero__lead { margin:0.4rem 0 0; color:#3b5650; font-size: clamp(0.95rem, 1.8vw, 1.06rem); line-height:1.6; }
.hero__actions { margin-top:0.6rem; display:flex; gap:0.6rem; flex-wrap:wrap; }
.btn { display:inline-block; padding:0.56rem 0.9rem; border-radius:10px; font-weight:600; text-decoration:none; background:var(--accent); color:#fff; border:1px solid transparent; }
.btn--ghost { background:transparent; color:var(--accent); border:1px solid rgba(9,64,51,0.12); }
/* ===========================
   HERO GAP REDUCTION FIX
   =========================== */

.hero {
  padding-bottom: 1.2rem !important; /* reduce vertical filler */
}

.hero__media {
  height: 46vh !important; /* lower image height */
  max-height: 500px !important;
}

.hero__body {
  transform: translateY(-32%) !important; /* less upward pull */
}

/* optional: for smaller screens, even tighter */
@media (max-width: 760px) {
  .hero__media {
    height: 40vh !important;
  }
  .hero__body {
    transform: translateY(-28%) !important;
  }
  .hero {
    padding-bottom: 0.8rem !important;
  }
}

/* content & cards */
main .content { width: min(var(--content-width), 98%); margin: 1.25rem auto 2rem; }
.card { background:#fff; border-radius:12px; padding:1.1rem; box-shadow: 0 8px 20px rgba(12,36,30,0.04); margin-bottom:1rem; }
.badges, .about-badges { display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.6rem; }
.badge { background: rgba(9,64,51,0.06); padding:0.35rem 0.6rem; border-radius:8px; font-weight:600; color:var(--accent); font-size:0.85rem; }

/* grids */
.img-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:0.6rem; margin-top:0.8rem; }
.img-grid img { width:100%; height:160px; object-fit:cover; border-radius:8px; }
.grid { display:grid; gap:0.8rem; }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* small utilities used in About */
.about-info .checklist, .checklist { padding-left:1rem; margin:0.6rem 0; }
.about-info h3 { margin-top:0; }
.about-two { display:grid; gap:0.8rem; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }

/* stats card */
.stat { padding:1rem; text-align:left; }
.stat strong { display:block; font-size:1.2rem; color:var(--accent); }

/* focus visibility */
a:focus, button:focus { outline: 3px solid rgba(9,64,51,0.12); outline-offset: 2px; }
/* ------------------------------------------------------------------
   SALTECH global style system
   Shared across Home / About / Technology
   ------------------------------------------------------------------ */

:root{
  --max-width:1400px;
  --content-width:1200px;
  --accent:#094033;
  --brand-1:#2ea46a;
  --brand-2:#4fc6a9;
  --muted:#4b6b60;
  --bg:#f6fbf8;
  --panel:#ecf7ee;
  --border: rgba(11,43,33,0.08);
  --radius:12px;
  --radius-lg:18px;
  --shadow: 0 10px 30px rgba(10,30,22,0.06);
  --shadow-soft: 0 6px 18px rgba(10,30,22,0.04);
}

* { box-sizing: border-box; }
html,body { height: 100%; }
body{
  margin:0;
  font-family:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background: linear-gradient(180deg,var(--bg) 0%, #eef9f0 50%);
  color:#062f2a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  font-size:16px;
}

/* Container */
.wrap {
  width: min(var(--max-width), 96%);
  margin: 0 auto;
  padding: 0 1rem;
  max-width: var(--content-width);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid rgba(6,20,16,0.05);
  backdrop-filter: blur(6px);
}
.site-header .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
  gap:1rem;
}
.brand { display:flex; gap:.75rem; align-items:center; text-decoration:none; color:inherit; }
.logo-img{ height:44px; width:auto; display:block; }
.brand-name{ font-weight:700; font-size:1.05rem; }
.brand-tag{ font-size:.78rem; color:var(--muted); margin-top:-2px; }

nav.primary{ display:flex; gap:1rem; align-items:center; font-weight:600; }
nav.primary a{ color:var(--muted); text-decoration:none; padding:.36rem .6rem; border-radius:8px; }
nav.primary a[aria-current="page"]{ color:var(--accent); background: rgba(9,64,51,0.06); }

.nav-toggle{ display:none; background:transparent; border:1px solid rgba(9,64,51,0.06); padding:.45rem .6rem; border-radius:8px; cursor:pointer; }

/* Hero */
.hero {
  margin: 1.6rem auto;
  width: min(var(--content-width), 98%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg,var(--panel), #e6f3e9);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding-bottom: 2.8rem; /* reserve overlap space */
}
.hero__media {
  position: relative;
  width:100%;
  height:56vh;
  min-height:320px;
  max-height:620px;
  overflow:hidden;
}
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; transform:scale(1.02); transition:transform .7s ease; }
.hero__media:hover img{ transform:scale(1.04); }

.hero__body {
  position: relative;
  z-index:2;
  padding: clamp(1rem, 3.5vh, 2rem);
  display:flex;
  align-items:center;
  gap:1rem;
  justify-content:center;
  transform: translateY(-38%); /* responsive pull into image */
  margin-top:0; /* don't use negative margin */
}
@media (min-width:900px) {
  .hero__body { transform: translateY(-48%); }
  .hero__media { height:60vh; }
}

.hero__card { background:#fff; border-radius:12px; padding:20px 22px; box-shadow:0 18px 40px rgba(10,30,22,0.06); width:100%; max-width:980px; }
.hero__title { margin:0; font-size:clamp(1.6rem, 3.8vw, 2.6rem); font-weight:800; color:var(--accent); line-height:1.06; }
.hero__lead { margin:.6rem 0 0; color:var(--muted); font-size:clamp(0.95rem, 1.9vw, 1.06rem); }
.hero__actions { margin-top:12px; display:flex; gap:.6rem; flex-wrap:wrap; }
.btn { display:inline-block; padding:.56rem .95rem; border-radius:999px; font-weight:700; color:#fff; background: linear-gradient(90deg,var(--brand-1),var(--brand-2)); box-shadow:0 12px 30px rgba(46,164,106,0.12); text-decoration:none; }

/* Sections */
.section { padding-block: clamp(18px, 4.2vw, 48px); }
.section-title { font-size:clamp(20px, 3.2vw, 28px); font-weight:700; margin-bottom:12px; color:#062f2a; }
.grid { display:grid; gap:16px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width:880px) { .cols-2, .cols-3 { grid-template-columns: 1fr; } }

.card { background: linear-gradient(180deg,#fff,var(--panel)); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.lead { color:var(--muted); margin-bottom:12px; }
.small { font-size:.95rem; color:var(--muted); }

/* Image grid */
.img-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:12px; }
@media (max-width:920px) { .img-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px) { .img-grid { grid-template-columns: 1fr; } }

.img-frame { border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:#fff; min-height:140px; display:flex; align-items:center; justify-content:center; }
.img-frame img{ width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }

/* Card flex block */
.card-flex-block { display:flex; gap:24px; align-items:center; justify-content:space-between; padding:clamp(14px,3.6vw,28px); border-radius:var(--radius-lg); background:linear-gradient(180deg,#fff,var(--panel)); border:1px solid var(--border); }
.card-flex-text h2 { margin:0 0 8px 0; color:var(--brand-1); font-size:clamp(20px,3.6vw,28px); }
.card-flex-image { max-width:420px; border-radius:var(--radius); overflow:hidden; }
.card-flex-image img { width:100%; height:auto; object-fit:contain; display:block; cursor:zoom-in; }

/* Badge */
.badge { padding:8px 12px; border-radius:999px; background:linear-gradient(180deg,#f3fff6,#e6fbef); border:1px solid rgba(46,164,106,0.12); font-weight:700; color:var(--accent); }

/* Flow diagram */
.flow-diagram .flow-svg { width:100%; height:auto; display:block; }


/* Focus visibility */
a:focus, button:focus { outline: 3px solid rgba(9,64,51,0.12); outline-offset: 2px; }
/* ------------------------------------------------------------------
   SALTECH — style.css
   Shared across Home / About / Technology / Services
   ------------------------------------------------------------------ */

:root{
  --max-width:1400px;
  --content-width:1200px;
  --accent:#094033;
  --brand-1:#2ea46a;
  --brand-2:#4fc6a9;
  --muted:#4b6b60;
  --bg:#f6fbf8;
  --panel:#ecf7ee;
  --border: rgba(11,43,33,0.08);
  --radius:12px;
  --radius-lg:18px;
  --shadow: 0 10px 30px rgba(10,30,22,0.06);
  --shadow-soft: 0 6px 18px rgba(10,30,22,0.04);
  --gap:16px;
}

* { box-sizing: border-box; }
html,body { height: 100%; }
body{
  margin:0;
  font-family:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background: linear-gradient(180deg,var(--bg) 0%, #eef9f0 50%);
  color:#062f2a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  font-size:16px;
}

/* container */
.wrap {
  width: min(var(--max-width), 96%);
  margin: 0 auto;
  padding: 0 1rem;
  max-width: var(--content-width);
}

/* header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid rgba(6,20,16,0.05);
  backdrop-filter: blur(6px);
}
.site-header .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
  gap:1rem;
}
.brand { display:flex; gap:.75rem; align-items:center; text-decoration:none; color:inherit; }
.logo-img { height:44px; width:auto; display:block; }
.brand-name { font-weight:700; font-size:1.05rem; }
.brand-tag { font-size:.78rem; color:var(--muted); margin-top:-2px; }

nav.primary { display:flex; gap:1rem; align-items:center; font-weight:600; }
nav.primary a { color:var(--muted); text-decoration:none; padding:.36rem .6rem; border-radius:8px; }
nav.primary a[aria-current="page"] { color:var(--accent); background: rgba(9,64,51,0.06); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(9,64,51,0.06);
  padding: .45rem .6rem;
  border-radius:8px;
  cursor:pointer;
}

/* hero */
.hero {
  margin: 1.6rem auto;
  width: min(var(--content-width), 98%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg,var(--panel), #e6f3e9);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding-bottom: 2.8rem;
}
.hero__media {
  position: relative;
  width:100%;
  height:48vh;
  min-height:300px;
  max-height:620px;
  overflow:hidden;
}
.hero__media img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; transform:scale(1.02); transition:transform .7s ease; }
.hero__media:hover img { transform:scale(1.04); }

.hero__body {
  position: relative;
  z-index:2;
  padding: clamp(1rem, 3.5vh, 2rem);
  display:flex;
  align-items:center;
  gap:1rem;
  justify-content:center;
  transform: translateY(-38%);
}
@media (min-width:900px) {
  .hero__body { transform: translateY(-48%); }
  .hero__media { height:52vh; }
}
.hero__card { background:#fff; border-radius:12px; padding:20px 22px; box-shadow:0 18px 40px rgba(10,30,22,0.06); width:100%; max-width:980px; }
.hero__title { margin:0; font-size:clamp(1.6rem,3.8vw,2.6rem); font-weight:800; color:var(--accent); line-height:1.06; }
.hero__lead { margin:.6rem 0 0; color:var(--muted); font-size:clamp(0.95rem,1.9vw,1.06rem); }
.hero__actions { margin-top:12px; display:flex; gap:.6rem; flex-wrap:wrap; }

/* button */
.btn {
  display:inline-block;
  padding:.56rem .95rem;
  border-radius:999px;
  font-weight:700;
  color:#fff;
  background: linear-gradient(90deg,var(--brand-1),var(--brand-2));
  box-shadow:0 12px 30px rgba(46,164,106,0.12);
  text-decoration:none;
}

/* sections */
.section { padding-block:clamp(20px,5vw,48px); }
.section-title { font-size:clamp(20px,3.2vw,28px); font-weight:700; margin-bottom:12px; color:#062f2a; }
.grid { display:grid; gap:var(--gap); }
.cols-2 { grid-template-columns:repeat(2,1fr); }
.cols-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:880px) { .cols-2, .cols-3 { grid-template-columns: 1fr; } }

.card { background:linear-gradient(180deg,#fff,var(--panel)); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.lead { color:var(--muted); margin-bottom:12px; }
.small { font-size:.95rem; color:var(--muted); }

/* pills */
.pill-list { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.pill { display:inline-block; padding:8px 12px; border-radius:999px; background:rgba(9,64,51,0.06); color:var(--accent); font-weight:700; }

/* service grid */
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:12px; }
@media (max-width:1100px) { .service-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px) { .service-grid { grid-template-columns:1fr; } }

.service-card .icon { width:56px; height:56px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#fff,#f0fff4); border:1px solid rgba(9,64,51,0.06); margin-bottom:10px; }

/* CTA & capacity pills */
.cta-row { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.pill { background: rgba(9,64,51,0.06); color:var(--accent); }


/* utilities */
.muted { color:var(--muted); }

/* responsiveness */
@media (max-width:760px) {
  .hero { margin:1rem auto; }
  .hero__body { transform: translateY(-30%); padding-left:1rem; padding-right:1rem; }
  .nav-toggle { display:inline-block; }
  nav.primary { display:none; flex-direction:column; position:absolute; right:1rem; top:72px; background:#fff; padding:0.6rem; border-radius:10px; box-shadow:0 8px 20px rgba(12,36,30,0.06); }
  nav.primary.open { display:flex; }
}
a:focus, button:focus { outline: 3px solid rgba(9,64,51,0.12); outline-offset: 2px; }
/* ------------------------------------------------------------------
   SALTECH — style.css (shared)
   Keep this file in the site root and reuse across pages
   ------------------------------------------------------------------ */

:root{
  --max-width:1400px;
  --content-width:1200px;
  --accent:#094033;
  --brand-1:#2ea46a;
  --brand-2:#4fc6a9;
  --muted:#4b6b60;
  --bg:#f6fbf8;
  --panel:#ecf7ee;
  --border: rgba(11,43,33,0.08);
  --radius:12px;
  --radius-lg:18px;
  --shadow: 0 10px 30px rgba(10,30,22,0.06);
  --gap:16px;
}

* { box-sizing: border-box; }
html,body { height: 100%; }
body{
  margin:0;
  font-family:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background: linear-gradient(180deg,var(--bg) 0%, #eef9f0 50%);
  color:#062f2a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  font-size:16px;
}

/* container */
.wrap {
  width: min(var(--max-width), 96%);
  margin: 0 auto;
  padding: 0 1rem;
  max-width: var(--content-width);
}

/* header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid rgba(6,20,16,0.05);
  backdrop-filter: blur(6px);
}
.site-header .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
  gap:1rem;
}
.brand { display:flex; gap:.75rem; align-items:center; text-decoration:none; color:inherit; }
.logo-img { height:44px; width:auto; display:block; }
.brand-name { font-weight:700; font-size:1.05rem; }
.brand-tag { font-size:.78rem; color:var(--muted); margin-top:-2px; }

nav.primary { display:flex; gap:1rem; align-items:center; font-weight:600; }
nav.primary a { color:var(--muted); text-decoration:none; padding:.36rem .6rem; border-radius:8px; }
nav.primary a[aria-current="page"] { color:var(--accent); background: rgba(9,64,51,0.06); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(9,64,51,0.06);
  padding: .45rem .6rem;
  border-radius:8px;
  cursor:pointer;
}

/* hero */
.hero {
  margin: 1.6rem auto;
  width: min(var(--content-width), 98%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg,var(--panel), #e6f3e9);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding-bottom: 2.8rem;
}
.hero__media {
  position: relative;
  width:100%;
  height:48vh;
  min-height:260px;
  max-height:620px;
  overflow:hidden;
}
.hero__media img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; transform:scale(1.02); transition:transform .7s ease; }
.hero__media:hover img { transform:scale(1.04); }

.hero__body {
  position: relative;
  z-index:2;
  padding: clamp(1rem, 3.5vh, 2rem);
  display:flex;
  align-items:center;
  gap:1rem;
  justify-content:center;
  transform: translateY(-38%);
}
@media (min-width:900px) {
  .hero__body { transform: translateY(-48%); }
  .hero__media { height:52vh; }
}
.hero__card { background:#fff; border-radius:12px; padding:18px 22px; box-shadow:0 18px 40px rgba(10,30,22,0.06); width:100%; max-width:980px; }
.hero__title { margin:0; font-size:clamp(1.6rem,3.8vw,2.6rem); font-weight:800; color:var(--accent); line-height:1.06; }
.hero__lead { margin:.6rem 0 0; color:var(--muted); font-size:clamp(0.95rem,1.9vw,1.05rem); }
.hero__actions { margin-top:12px; display:flex; gap:.6rem; flex-wrap:wrap; }

/* buttons */
.btn {
  display:inline-block;
  padding:.56rem .95rem;
  border-radius:999px;
  font-weight:700;
  color:#fff;
  background: linear-gradient(90deg,var(--brand-1),var(--brand-2));
  box-shadow:0 12px 30px rgba(46,164,106,0.12);
  text-decoration:none;
  border: 0;
  cursor: pointer;
}
.btn--ghost {
  background: #fff;
  color: var(--accent);
  border: 1px solid rgba(9,64,51,0.08);
  box-shadow: none;
}

/* sections */
.section { padding-block:clamp(20px,5vw,48px); }
.section-title { font-size:clamp(20px,3.2vw,28px); font-weight:700; margin-bottom:12px; color:#062f2a; }
.grid { display:grid; gap:var(--gap); }
.cols-2 { grid-template-columns:repeat(2,1fr); }
.cols-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:880px) { .cols-2, .cols-3 { grid-template-columns: 1fr; } }

.card { background:linear-gradient(180deg,#fff,var(--panel)); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.lead { color:var(--muted); margin-bottom:12px; }
.small { font-size:.95rem; color:var(--muted); }

/* pills */
.pill-list { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.pill { display:inline-block; padding:8px 12px; border-radius:999px; background:rgba(9,64,51,0.06); color:var(--accent); font-weight:700; }

/* form */
.form-grid { display:flex; flex-direction:column; gap:12px; }
.field { display:block; }
.label-text { display:block; margin-bottom:6px; font-weight:700; color:#15392f; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid rgba(6,20,16,0.06); font-size:1rem; background:#fff;
}
textarea { min-height:120px; resize:vertical; }
.checkbox { display:flex; gap:8px; align-items:center; }

/* form actions */
.form-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:6px; }

/* media frame */
.media-frame { border-radius:12px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); background:#fff; }


/* small helpers */
.muted { color:var(--muted); }
.sr-only { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* responsive */
@media (max-width:760px) {
  .hero { margin:1rem auto; }
  .hero__body { transform: translateY(-30%); padding-left:1rem; padding-right:1rem; }
  .nav-toggle { display:inline-block; }
  nav.primary { display:none; flex-direction:column; position:absolute; right:1rem; top:72px; background:#fff; padding:0.6rem; border-radius:10px; box-shadow:0 8px 20px rgba(12,36,30,0.06); }
  nav.primary.open { display:flex; }
}
a:focus, button:focus { outline: 3px solid rgba(9,64,51,0.12); outline-offset: 2px; }

/* social pill */
.social-pill { text-decoration:none; padding:6px 10px; border-radius:999px; background:linear-gradient(180deg,var(--brand-1),var(--brand-2)); color:#fff; font-weight:600; display:inline-block; }
/* Responsive patch for .card-flex-block (stack on mobile, tidy spacing) */
/* Center the cycle diagram under text */
.cycle-figure {
  margin: 1.2rem auto 0 auto;   /* centers horizontally */
  display: flex;
  justify-content: center;
}

.cycle-figure img {
  width: 100%;
  max-width: 420px;             /* limits size on desktop */
  height: auto;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 8px 20px rgba(12,36,30,0.06);
}

/* Mobile optimization */
@media (max-width: 768px) {
  .cycle-figure {
    margin-top: 1rem;
  }
  .cycle-figure img {
    max-width: 320px;
  }
}

/* Mobile / small tablet: stack vertically */

@media (max-width: 900px) {
  .card-flex-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
  }

  .card-flex-image {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    order: 2;                  /* place image below text on mobile (change to 1 to show image first) */
  }
  .card-flex-text {
    order: 1;
    width: 100%;
  }

  .card-flex-text h2 {
    font-size: 1.375rem;      /* slightly smaller on tablet/mobile */
    line-height: 1.15;
    margin: 0 0 8px;
  }

  .card-flex-text .lead {
    font-size: 1rem;
    margin-bottom: 8px;
  }

  .card-flex-text .small,
  .card-flex-text p {
    font-size: 0.96rem;
    margin-bottom: 10px;
  }

  .card-flex-image img {
    max-height: 280px;        /* keeps the image from becoming too tall on small screens */
    object-fit: cover;        /* cover gives a nicer crop for tall images; change to 'contain' if you prefer*/
  }
}

/* Very small phones */
@media (max-width: 420px) {
  .card-flex-block {
    padding: 12px;
    gap: 10px;
  }
  .card-flex-text h2 {
    font-size: 1.15rem;
  }
  .card-flex-text .lead,
  .card-flex-text p,
  .card-flex-text .small {
    font-size: 0.95rem;
  }
}

/* Accessibility / polish */
.card-flex-text h2,
.card-flex-text p { 
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* ============================================
   Comparison grid (for before/after visuals)
   ============================================ */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 18px;
  align-items: center;
  justify-items: center;
  margin-top: 12px;
  text-align: center;
}

.comparison-item {
  margin: 0;
}

.comparison-item img {
  width: 100%;
  max-height: 260px;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(12,36,30,0.04);
}

.comparison-item figcaption {
  font-size: 0.95rem;
  color: var(--muted);
  margin-top: 8px;
  text-align: center;
}

.comparison-arrow {
  font-size: 40px;
  color: var(--brand-1);
  line-height: 1;
}

/* ---------- Responsive behavior ---------- */
@media (max-width: 768px) {
  .comparison-grid {
    grid-template-columns: 1fr; /* Stack vertically */
    gap: 12px;
  }

  .comparison-arrow {
    transform: rotate(90deg);
    font-size: 32px;
    margin: 8px 0;
  }

  .comparison-item img {
    max-height: 220px;
  }

  .comparison-item figcaption {
    font-size: 0.9rem;
    line-height: 1.4;
  }
}
/* Responsive flow diagram wrapper */
.flow-diagram { padding: 16px; }

/* Make the svg responsive inside its container */
.flow-wrap {
  width: 100%;
  overflow-x: auto;          /* allow horizontal pan/scroll on small screens */
  -webkit-overflow-scrolling: touch;
  display: block;
  border-radius: 8px;
  background: transparent;
  padding: 6px;              /* optional breathing room */
}

/* Constrain and scale the svg for large screens */
.flow-svg {
  display: block;
  width: 100%;               /* fill available width on larger screens */
  height: auto;
  max-width: 1200px;         /* prevents excessive stretching when layout is wide */
  margin: 0 auto;
  border-radius: 6px;
  background: transparent;
}

/* For very narrow viewports, keep a comfortable minimum readable width.
   This causes the wrapper to show horizontal scroll rather than shrinking the SVG too far. */
@media (max-width: 900px) {
  .flow-svg { min-width: 900px; } /* tune to the smallest readable width of your diagram */
  .flow-wrap { padding-bottom: 12px; } 
}

/* If the svg is extremely wide (desktop), center it and add subtle shadow */
@media (min-width: 901px) {
  .flow-svg { box-shadow: 0 8px 24px rgba(12,36,30,0.04); }
}

/* Accessibility / keyboard focus */
.flow-wrap:focus { outline: 3px solid rgba(9,64,51,0.10); outline-offset: 4px; }
<style>/* HEADER LOGO WRAPPER */
.brand-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 10px;
  box-sizing: border-box;
  height: 60px;             /* fixed header height */
}

/* LOGO IMAGE */
.brand-logo img {
  display: block;
  height: auto;
  max-height: 40px;         /* ✅ fits perfectly on desktop */
  width: auto;
  object-fit: contain;
}

/* Tablet view */
@media (max-width: 768px) {
  .brand-logo {
    height: 70px;
  }
  .brand-logo img {
    max-height: 35px;       /* ✅ smaller for tablet */
  }
}

/* Mobile view */
@media (max-width: 480px) {
  .brand-logo {
    height: 45px;
    justify-content: center;  /* center logo for mobile */
  }
  .brand-logo img {
    max-height: 40px;        /* ✅ perfect small size */
  }
}

/* Option A: pull next section up */
.hero {
  padding-bottom: 0 !important;
  margin-bottom: 0.4rem !important;
}

.hero__body { transform: translateY(-18%) !important; }

/* Pull the next section up so the gap closes */
.hero + section {
  margin-top: -40px;    /* pulls next section up */
  padding-top: 40px;    /* keeps internal spacing same */
}

/* mobile tweak */
@media (max-width:760px) {
  .hero__body { transform: translateY(-14%) !important; }
  .hero + section { margin-top: -28px; padding-top: 28px; }
}
/* ----------------------
   Clean responsive footer
   ---------------------- */
.site-footer {
  background: #f6fbf8;            /* subtle pale background */
  color: #08332c;                 /* deep green text */
  padding: 28px 16px 18px;
  border-top: 1px solid rgba(3,30,28,0.04);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  box-sizing: border-box;
}

/* layout container */
.footer-inner {
  max-width: var(--content-width, 1100px);
  margin: 0 auto;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* brand block */
.footer-brand .brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration: none;
  color: inherit;
}
.footer-logo {
  width:48px;
  height:48px;
  object-fit:contain;
  display:block;
}
.brand-name {
  font-weight:700;
  font-size:1rem;
  line-height:1;
}
.brand-tag {
  font-size:0.85rem;
  color: rgba(3,30,28,0.62);
}

/* nav block */
.footer-nav {
  display:flex;
  gap:18px;
  align-items:center;
  flex: 1 1 300px;
  justify-content:center;
  order: 2;
}
.footer-nav a {
  color: inherit;
  text-decoration:none;
  font-weight:600;
  padding:6px 0;
}
.footer-nav a:hover {
  text-decoration: underline;
}

/* contact block */
.footer-contact {
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
  flex: 0 0 220px;
  order: 3;
}
.contact-link {
  color: #075b4f;            /* link color (not bright blue) */
  text-decoration: none;
  font-size:0.95rem;
  word-break: break-all;    /* prevents overflow */
}
.contact-link:hover { text-decoration: underline; }

/* bottom line */
.footer-bottom {
  max-width: var(--content-width, 1100px);
  margin: 16px auto 0;
  padding-top: 14px;
  border-top: 1px solid rgba(3,30,28,0.03);
  text-align: center;
  color: rgba(3,30,28,0.65);
  font-size: 0.9rem;
}

/* Responsive: stack vertically on small screens */
@media (max-width: 720px) {
  .footer-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .footer-nav {
    order: 3;
    justify-content: flex-start;
  }
  .footer-contact {
    align-items: flex-start;
  }
}
/* ====== Defensive footer layout: lock positions & prevent jumps ====== */
/* Put this at the end of your CSS file */

.site-footer {
  box-sizing: border-box;
  padding: 12px 16px !important;
  background: #f6fbf8 !important;
}

/* Main container: fixed layout behavior */
.footer-inner {
  max-width: var(--content-width, 1100px);
  margin: 0 auto;
  display: flex !important;
  align-items: center !important;      /* keep vertical alignment consistent */
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;        /* prevent items from wrapping unexpectedly */
  width: 100%;
  padding: 0 !important;
}

/* Brand: left aligned, fixed min width so it doesn't collapse */
.footer-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 180px;                   /* reserve space for logo + text */
  flex: 0 0 auto !important;
}

/* Logo sizing */
.footer-logo {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Nav: center-right, won't flow away */
.footer-nav {
  display: flex !important;
  gap: 18px !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-width: 220px !important;        /* reserve width for menu items */
}

/* Ensure nav links don't wrap into odd places */
.footer-nav a {
  white-space: nowrap !important;
  text-decoration: none !important;
  color: #062f2a !important;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 6px 6px;
}

/* Contact: fixed right column */
.footer-contact {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
  flex: 0 0 180px !important;         /* reserve space so nav doesn't shift */
  min-width: 140px !important;
}

/* Small screens: controlled stacking (no weird wrap) */
@media (max-width: 720px) {
  .footer-inner {
    flex-wrap: wrap !important;       /* allow wrap for small screens */
    align-items: center !important;
    gap: 8px !important;
  }

  /* Make brand centered and compact */
  .footer-brand {
    order: 1;
    min-width: 0 !important;
    width: 100%;
    justify-content: center;
    padding: 2px 0;
  }
  .footer-logo { width: 30px !important; height: 30px !important; }

  /* Nav becomes one centered row; allow wrap but keep items centered */
  .footer-nav {
    order: 2;
    width: 100% !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 4px 0;
    flex: 0 0 auto !important;
  }
  .footer-nav a { font-size: 0.86rem; padding: 4px 6px; }

  /* Contact centered below nav */
  .footer-contact {
    order: 3;
    width: 100% !important;
    align-items: center !important;
    text-align: center;
    flex: 0 0 auto !important;
  }

  /* Prevent any element from injecting extra height */
  .site-footer, .footer-inner, .footer-inner > * {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    min-height: 0 !important;
  }

  /* final safety: ensure no overflow pushes content away */
  .site-footer { overflow: hidden !important; }
}

/* ----------------------------
   Form status message styling
   ---------------------------- */
.form-status {
  margin-top: 0.8rem;
  font-weight: 500;
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 0;
  transform: translateY(6px);
}

.form-status.visible {
  opacity: 1;
  transform: translateY(0);
}

.form-status.success {
  color: var(--brand-1, #2ea46a);
}

.form-status.error {
  color: #d44b3b;
}
.navbar { z-index: 2000; position: relative; }
#spinner { z-index: 9999; } /* hide spinner or remove 'show' when ready */