:root{
  --white:#FFFFFF;
  --tint:#EEF2E7;
  --tint-2:#E4EBDA;
  --bark:#241C15;
  --bark-soft:#3A2F23;
  --sage:#7E8E6D;
  --sage-deep:#48583A;
  --sage-bright:#8FA278;
  --clay:#A9714E;
  --ink:#241C15;
  --ink-soft:rgba(36,28,21,0.62);
  --line:rgba(36,28,21,0.10);
  --shadow-sm:0 6px 20px rgba(36,28,21,0.06);
  --shadow-md:0 20px 50px rgba(36,28,21,0.10);
  --shadow-lg:0 30px 70px rgba(36,28,21,0.14);
  --r-lg:32px;
  --r-md:22px;
  --r-sm:14px;
  --r-pill:999px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}

body{
  background:var(--white);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--sage-deep); color:var(--white); }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }

.wrap{ max-width:1200px; margin:0 auto; padding:0 32px; }

h1,h2,h3,h4{
  font-family:'Manrope', sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--bark);
}

.tag{
  font-family:'Manrope', sans-serif;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--sage-deep);
  background:var(--tint);
  display:inline-flex;
  padding:8px 16px;
  border-radius:var(--r-pill);
}
.on-dark .tag{ background:rgba(255,255,255,0.12); color:var(--sage-bright); }

:focus-visible{ outline:2.5px solid var(--clay); outline-offset:3px; border-radius:6px; }

/* ---------- Buttons ---------- */
.btn{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  border-radius:var(--r-pill);
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--sage-deep); color:var(--white); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--bark); box-shadow:var(--shadow-md); }
.btn-ghost{ background:var(--white); color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-ghost.on-dark{ background:transparent; color:var(--white); border-color:rgba(255,255,255,0.28); }
.btn-ghost.on-dark:hover{ border-color:var(--white); }
.btn-lg{ padding:17px 32px; font-size:16px; }

/* ---------- Header (floating pill) ---------- */
.header-pad{ padding:18px 20px 0; position:sticky; top:0; z-index:60; }
header{
  max-width:1200px;
  margin:0 auto;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(14px);
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px 12px 26px;
}
.logo{
  font-family:'Manrope', sans-serif;
  font-weight:800;
  font-size:18px;
  letter-spacing:-0.01em;
  display:flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
}
.logo .mark{
  width:26px; height:26px;
  border-radius:9px;
  background:linear-gradient(135deg, var(--sage) 0%, var(--sage-deep) 100%);
  display:inline-block;
}
nav.links{ display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600; }
nav.links a{
  text-decoration:none;
  color:var(--ink-soft);
  padding:10px 16px;
  border-radius:var(--r-pill);
  transition:background .2s ease, color .2s ease;
}
nav.links a:hover{ background:var(--tint); color:var(--ink); }

.nav-right{ display:flex; align-items:center; gap:6px; }
.nav-right .login{
  text-decoration:none;
  font-weight:600;
  font-size:14.5px;
  color:var(--ink-soft);
  padding:10px 16px;
}
.nav-right .login:hover{ color:var(--ink); }

.nav-toggle{ display:none; }

/* ---------- Hero ---------- */
.hero{ padding:64px 0 40px; }
.hero-wrap{ max-width:1500px; }
.hero-grid{
  display:grid;
  grid-template-columns:1fr 1.7fr;
  gap:48px;
  align-items:center;
}
.hero h1{
  font-size:clamp(38px, 4.6vw, 60px);
  line-height:1.04;
  margin:20px 0 22px;
}
.hero h1 span{ color:var(--sage-deep); }
.hero p.lede{
  font-size:18px;
  max-width:46ch;
  color:var(--ink-soft);
  margin-bottom:32px;
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-note{ font-size:13.5px; color:var(--ink-soft); margin-top:16px; }

.hero-card{
  /* background:linear-gradient(165deg, var(--tint) 0%, var(--tint-2) 100%); */
  /* border-radius:var(--r-lg); */
  padding:28px;
  /* box-shadow:var(--shadow-lg); */
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  width:min(100%, 420px);
  aspect-ratio:8 / 9;
  margin:0 auto;
}
.hero-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
  filter:drop-shadow(0 22px 26px rgba(36,28,21,0.18));
}

/* ---------- Trust strip ---------- */
.trust{ padding:36px 0 8px; }
.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}
.pill-badge{
  background:var(--tint);
  color:var(--sage-deep);
  font-size:13.5px;
  font-weight:700;
  padding:10px 20px;
  border-radius:var(--r-pill);
}

/* ---------- Feature cards row ---------- */
.feature-row{ padding:70px 0 20px; }
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.feature-card{
  background:var(--tint);
  border-radius:var(--r-lg);
  padding:34px 30px 30px;
  display:flex;
  flex-direction:column;
  gap:16px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.feature-card .icon-tile{
  width:46px; height:46px;
  border-radius:14px;
  background:var(--sage-deep);
  display:flex; align-items:center; justify-content:center;
}
.feature-card .icon-tile svg{ width:22px; height:22px; stroke:var(--white); }
.feature-card h3{ font-size:20px; }
.feature-card p{ color:var(--ink-soft); font-size:14.5px; }
.feature-card .link{
  margin-top:auto;
  font-weight:700;
  font-size:14.5px;
  color:var(--white);
  background:var(--sage-deep);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:11px 18px;
  border-radius:var(--r-pill);
  width:fit-content;
  transition:background .2s ease, transform .18s ease;
}
.feature-card .link:hover{ background:var(--bark); transform:translateY(-2px); }
.feature-card ul.mini-bullets{ list-style:none; display:flex; flex-direction:column; gap:6px; }
.feature-card ul.mini-bullets li{ font-size:13.5px; color:var(--ink-soft); display:flex; gap:8px; align-items:flex-start; }
.feature-card ul.mini-bullets li::before{ content:"✓"; color:var(--sage-deep); font-weight:800; flex-shrink:0; }

/* ---------- Section head ---------- */
.section-head{ max-width:620px; margin:0 auto 48px; text-align:center; }
.section-head h2{ font-size:clamp(28px, 3.4vw, 40px); margin-top:16px; line-height:1.12; }
.section-head p{ color:var(--ink-soft); margin-top:14px; font-size:16px; }

/* ---------- Icon rail (solutions) ---------- */
.solutions{ padding:90px 0; background:var(--tint); border-radius:var(--r-lg); margin:0 20px; }
.icon-rail{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:16px;
}
.icon-tile-card{
  background:var(--white);
  border-radius:var(--r-md);
  padding:26px 18px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.icon-tile-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.icon-tile-card .ring{
  width:52px; height:52px;
  border-radius:50%;
  background:var(--tint);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
}
.icon-tile-card .ring svg{ width:24px; height:24px; stroke:var(--sage-deep); }
.icon-tile-card h4{ font-size:14.5px; font-weight:700; margin-bottom:6px; }
.icon-tile-card p{ font-size:12.5px; color:var(--ink-soft); line-height:1.4; }

/* ---------- Our Systems (slide-in carousel) ---------- */
.systems{ padding:90px 0 100px; overflow:hidden; }
.systems-carousel-wrap{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}
.systems-scroll{
  display:flex;
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:6px 2px 16px;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.systems-scroll::-webkit-scrollbar{ display:none; }
.system-card{
  scroll-snap-align:start;
  flex:0 0 300px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:28px 26px;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap:14px;
  opacity:0;
  transform:translateX(70px);
  transition:opacity .6s ease, transform .6s ease;
}
.system-card.in{ opacity:1; transform:translateX(0); }
.system-top{ display:flex; align-items:center; justify-content:space-between; }
.system-top .icon-tile{ background:var(--sage-deep); }
.system-card.soon .icon-tile{ background:var(--ink-soft); }
.badge{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:5px 11px;
  border-radius:var(--r-pill);
  background:var(--tint);
  color:var(--sage-deep);
}
.badge.soon{ background:rgba(36,28,21,0.08); color:var(--ink-soft); }
.system-card h3{ font-size:20px; }
.system-card .sys-type{
  font-size:12.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--sage-deep);
}
.system-card p:not(.sys-type){ font-size:14px; color:var(--ink-soft); }
.sys-benefits{ list-style:none; display:flex; flex-direction:column; gap:7px; margin-top:2px; }
.sys-benefits li{ font-size:13px; color:var(--ink-soft); display:flex; gap:8px; align-items:flex-start; line-height:1.4; }
.sys-benefits li::before{ content:"✓"; color:var(--sage-deep); font-weight:800; flex-shrink:0; }
.system-card.soon .sys-benefits li::before{ color:var(--ink-soft); }
.sys-cta{
  margin-top:auto;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  color:var(--white);
  background:var(--sage-deep);
  padding:11px 16px;
  border-radius:var(--r-pill);
  text-align:center;
  transition:background .2s ease, transform .18s ease;
}
.sys-cta:hover{ background:var(--bark); transform:translateY(-2px); }
.system-card.soon .sys-cta{ background:var(--bark-soft); }
.system-card.soon .sys-cta:hover{ background:var(--bark); }

.mid-cta{
  max-width:1160px;
  margin:52px auto 0;
  padding:0 32px;
}
.mid-cta-inner{
  background:var(--tint);
  border-radius:var(--r-lg);
  padding:34px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.mid-cta-inner h3{ font-size:20px; margin-bottom:6px; }
.mid-cta-inner p{ color:var(--ink-soft); font-size:14.5px; }
@media (max-width:700px){
  .mid-cta{ padding:0 20px; }
  .mid-cta-inner{ padding:28px 24px; }
}
.car-btn{
  position:absolute;
  top:50%;
  translate:0 -50%;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:5;
  transition:background .2s ease, transform .2s ease;
}
.car-btn:hover{ background:var(--tint); }
.car-prev{ left:-6px; }
.car-next{ right:-6px; }
@media (max-width: 700px){
  .car-btn{ display:none; }
}

/* ---------- Why us grid ---------- */
.why{ padding:100px 0; }
.why-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
}
.why-item{ display:flex; flex-direction:column; gap:14px; }
.why-item .num{
  width:44px; height:44px;
  border-radius:13px;
  background:var(--bark);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family:'Manrope', sans-serif;
  font-weight:800;
  font-size:15px;
  flex-shrink:0;
}
.why-item h3{ font-size:19px; margin-bottom:8px; }
.why-item p{ color:var(--ink-soft); font-size:14.5px; max-width:44ch; }

/* ---------- Calculator ---------- */
.calc{ padding:100px 0; }
.calc-card{
  background:var(--bark);
  border-radius:var(--r-lg);
  padding:56px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  color:var(--white);
  box-shadow:var(--shadow-lg);
}
.calc-card h2{ color:var(--white); font-size:clamp(26px,3vw,34px); line-height:1.15; margin-bottom:14px; }
.calc-card p{ color:rgba(255,255,255,0.66); font-size:15px; max-width:40ch; }
.calc-form label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,0.7);
  margin-bottom:8px;
}
.calc-field{ margin-bottom:20px; }
.calc-field input[type=range]{
  width:100%;
  accent-color:var(--sage-bright);
}
.calc-field input[type=number]{
  width:100%;
  padding:11px 14px;
  border-radius:12px;
  border:1.5px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);
  color:var(--white);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:15px;
}
.calc-field input[type=number]:focus{ outline:none; border-color:var(--sage-bright); }
.calc-field .val{
  font-family:'Manrope', sans-serif;
  font-weight:800;
  font-size:18px;
  color:var(--sage-bright);
}
.calc-field .hint{ font-size:12px; color:rgba(255,255,255,0.45); margin-top:6px; }
.calc-result{
  margin-top:26px;
  padding:22px 24px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--r-md);
}
.calc-breakdown{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.12); }
.calc-breakdown .row{ display:flex; justify-content:space-between; font-size:14px; color:rgba(255,255,255,0.65); }
.calc-breakdown .row strong{ color:var(--white); font-weight:700; }
.calc-result .label{ font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em; color:rgba(255,255,255,0.55); font-weight:700; }
.calc-result .amount{ font-family:'Manrope', sans-serif; font-weight:800; font-size:36px; color:var(--white); margin-top:6px; }
.calc-result .sub{ font-size:13px; color:rgba(255,255,255,0.5); margin-top:10px; line-height:1.5; }
.calc-negotiate{
  margin-top:16px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.calc-negotiate a{
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  color:var(--white);
  background:var(--sage-deep);
  padding:11px 18px;
  border-radius:var(--r-pill);
  transition:background .2s ease;
}
.calc-negotiate a:hover{ background:var(--sage-bright); }
.calc-negotiate span{ font-size:12.5px; color:rgba(255,255,255,0.5); }

/* ---------- Testimonials ---------- */
.testimonials{ padding:100px 0; }
.test-scroll{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:12px;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.test-scroll::-webkit-scrollbar{ display:none; }
.test-card{
  scroll-snap-align:start;
  flex:0 0 340px;
  background:var(--tint);
  border-radius:var(--r-lg);
  padding:30px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.test-card p.quote{ font-size:16px; color:var(--ink); line-height:1.5; }
.test-person{ display:flex; align-items:center; gap:12px; }
.test-person .avatar{
  width:40px; height:40px;
  border-radius:50%;
  background:var(--sage-deep);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family:'Manrope', sans-serif;
  font-weight:800;
  font-size:14px;
}
.test-person .name{ font-weight:700; font-size:14px; }
.test-person .role{ font-size:12.5px; color:var(--ink-soft); }

/* ---------- Contact / lead form ---------- */
.cta-band{ padding:20px 20px 100px; }
.contact-card{
  max-width:1160px;
  margin:0 auto;
  background:var(--white);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  display:grid;
  grid-template-columns:1fr 1.1fr;
}
.contact-left{
  background:linear-gradient(135deg, var(--sage-deep) 0%, var(--bark) 100%);
  color:var(--white);
  padding:56px 46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
}
.contact-left .tag{ align-self:flex-start; }
.contact-left h2{ color:var(--white); font-size:clamp(26px,3vw,32px); line-height:1.16; }
.contact-left > p{ color:rgba(255,255,255,0.68); font-size:15px; }
.contact-reasons{ list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.contact-reasons li{ font-size:14px; color:rgba(255,255,255,0.86); display:flex; gap:10px; align-items:flex-start; }
.contact-reasons li::before{ content:"✓"; color:var(--sage-bright); font-weight:800; flex-shrink:0; }
.contact-email{ margin-top:6px; font-size:13.5px; color:rgba(255,255,255,0.6); }
.contact-email a{ color:var(--white); font-weight:700; text-decoration:underline; }

.contact-right{ padding:48px 46px; position:relative; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-field{ margin-bottom:16px; }
.form-field label{ display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1.5px solid var(--line);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:14.5px;
  color:var(--ink);
  background:var(--white);
  transition:border-color .2s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--sage-deep); outline:none; }
.form-field textarea{ resize:vertical; min-height:88px; }
.form-submit{ width:100%; justify-content:center; margin-top:4px; }
.form-success{ display:none; text-align:center; padding:50px 10px; }
.form-success.show{ display:block; }
.form-success .check{ width:56px; height:56px; border-radius:50%; background:var(--tint); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.form-success .check svg{ width:26px; height:26px; stroke:var(--sage-deep); }
.form-success h3{ font-size:20px; margin-bottom:8px; }
.form-success p{ color:var(--ink-soft); font-size:14.5px; }

/* ---------- Footer ---------- */
footer{ padding:60px 0 34px; }
.footer-top{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid var(--line);
}
footer .logo{ color:var(--ink); }
footer p.about{ margin-top:14px; max-width:32ch; font-size:14px; color:var(--ink-soft); }
.social-row{ display:flex; gap:10px; margin-top:22px; }
.social-row a{
  width:36px; height:36px;
  border-radius:50%;
  background:var(--tint);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.social-row a:hover{ background:var(--sage-deep); }
.social-row a:hover svg{ stroke:var(--white); }
.social-row svg{ width:16px; height:16px; stroke:var(--sage-deep); transition:stroke .2s ease; }

.footer-col h4{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); margin-bottom:16px; }
.footer-col a{ display:block; text-decoration:none; font-size:14.5px; color:var(--ink); padding:6px 0; font-weight:500; transition:color .2s ease; }
.footer-col a:hover{ color:var(--sage-deep); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:26px; font-size:13px; color:var(--ink-soft); flex-wrap:wrap; gap:10px; }

/* ---------- Floating back-to-top ---------- */
.float-top-btn{
  position:fixed;
  right:26px;
  bottom:26px;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--sage-deep);
  color:var(--white);
  border:none;
  box-shadow:var(--shadow-md);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:80;
  opacity:0;
  transform:translateY(14px);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background .2s ease;
}
.float-top-btn.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.float-top-btn:hover{ background:var(--bark); }
.float-top-btn svg{ width:20px; height:20px; stroke:var(--white); }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-card{ order:-1; }
  .feature-grid{ grid-template-columns:1fr; }
  .icon-rail{ grid-template-columns:repeat(3,1fr); }
  .why-grid{ grid-template-columns:1fr 1fr 1fr; gap:24px; }
  .calc-card{ grid-template-columns:1fr; padding:40px 28px; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 700px){
  .wrap{ padding:0 20px; }
  nav.links{ display:none; }
  .icon-rail{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .solutions{ margin:0 10px; padding:60px 0; }
  .contact-card{ grid-template-columns:1fr; }
  .contact-left, .contact-right{ padding:36px 26px; }
  .form-row{ grid-template-columns:1fr; }
}