@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --green:#08b866;
  --green-dark:#006a49;
  --navy:#0b2945;
  --text:#23384e;
  --muted:#667789;
  --line:#e7ecef;
  --soft:#f7f9f8;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);font-family:Inter,Arial,sans-serif;line-height:1.55;background:#fff}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 64px));margin:auto}
.site-header{height:78px;background:#fff;display:flex;align-items:center;gap:38px;padding:0 42px;position:sticky;top:0;z-index:20;border-bottom:1px solid #edf0f1}
.brand{display:flex;align-items:flex-end;gap:7px;min-width:240px;color:var(--green)}
.brand-main{font-size:41px;line-height:.78;font-weight:800;letter-spacing:-3px}
.brand .dot{letter-spacing:0}
.brand-sub{font-size:9px;line-height:1;letter-spacing:3px;font-weight:700;margin-bottom:-2px}
.nav{display:flex;gap:31px;margin-left:auto;font-size:13px;font-weight:500;color:#17334e}
.nav a{transition:.2s}.nav a:hover{color:var(--green)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:15px;border:1px solid transparent;padding:14px 22px;border-radius:4px;font-weight:700;font-size:13px;transition:.2s;cursor:pointer}
.btn-primary{background:var(--green);color:#fff}.btn-primary:hover{background:#079f59;transform:translateY(-1px)}
.btn-outline-light{color:#fff;border-color:rgba(255,255,255,.8)}.btn-outline-light:hover{background:#fff;color:var(--navy)}
.header-cta{margin-left:8px;white-space:nowrap}
.menu-toggle{display:none;background:none;border:0;font-size:24px;color:var(--navy)}
.hero{height:485px;position:relative;overflow:hidden;color:#fff}
.hero-image{position:absolute;inset:0;background:url("hero-retail.jpg") center 45%/cover no-repeat;filter:saturate(.82)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,26,43,.87) 0%,rgba(5,28,43,.55) 42%,rgba(5,25,39,.08) 78%)}
.hero-content{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;padding-left:55px}
.eyebrow{font-size:11px;letter-spacing:3px;font-weight:800;color:var(--green);margin:0 0 12px}
.eyebrow.light{color:#fff}
.hero h1{font-size:52px;line-height:1.06;letter-spacing:-2px;margin:0 0 15px;font-weight:800}
.hero-lead{font-size:18px;line-height:1.45;margin:0 0 27px}
.hero-actions{display:flex;gap:14px}
.hero-signature{position:absolute;right:55px;bottom:95px;display:flex;flex-direction:column;gap:4px;font-size:11px;letter-spacing:3px}
.hero-signature i,.image-caption i{width:38px;height:2px;background:var(--green);display:block;margin-top:12px}
.value-strip{background:#fff;border-bottom:1px solid var(--line)}
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:24px 0}
.value-grid>div{padding:5px 30px;border-right:1px solid #dfe5e8;display:flex;flex-direction:column;align-items:center;text-align:center}
.value-grid>div:last-child{border:0}.value-grid strong{font-size:21px;color:var(--navy)}.value-grid span{font-size:12px;color:var(--muted)}
.section{padding:78px 0}
.services-section{background:#fff}
.section-heading{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;margin-bottom:35px}
.section-heading h2,.owner-copy h2,.about-section h2,.contact-section h2{font-size:34px;line-height:1.15;letter-spacing:-1.2px;color:var(--navy);margin:0 0 10px}
.section-heading p{max-width:760px;color:var(--muted);margin:0}
.text-link{color:var(--green);font-weight:700;font-size:13px;white-space:nowrap}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.service-card{background:#fafbfb;border:1px solid #edf0f1;padding:25px 19px 23px;min-height:184px;transition:.2s}
.service-card:hover{box-shadow:0 12px 35px rgba(12,46,69,.08);transform:translateY(-3px);background:#fff}
.icon{font-size:30px;color:var(--green);height:44px;font-weight:400}
.service-card h3{font-size:14px;margin:7px 0 10px;color:var(--navy)}
.service-card p{font-size:12px;color:var(--muted);margin:0;line-height:1.55}
.owner-section{padding-top:25px}
.owner-grid{display:grid;grid-template-columns:1fr 1.28fr;gap:70px;align-items:center}
.owner-copy>p:not(.eyebrow){color:var(--muted);max-width:500px}
.check-list{list-style:none;padding:0;margin:22px 0 27px;display:grid;gap:10px}
.check-list li{font-size:14px}.check-list li:before{content:"✓";display:inline-flex;width:21px;height:21px;align-items:center;justify-content:center;background:var(--green);color:#fff;border-radius:50%;font-size:12px;font-weight:800;margin-right:10px}
.owner-image{position:relative;min-height:410px;overflow:hidden}.owner-image img{width:100%;height:410px;object-fit:cover}
.image-caption{position:absolute;right:0;top:0;bottom:0;width:29%;padding:42px 25px;background:rgba(6,25,39,.84);color:#fff;display:flex;flex-direction:column;gap:5px;font-size:11px;letter-spacing:3px}
.image-caption small{font-size:12px;letter-spacing:1.7px;line-height:1.6;margin-top:8px}
.about-section{background:var(--soft);padding:65px 0}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.about-grid p:not(.eyebrow){color:var(--muted);font-size:15px}
.cta-band{background:linear-gradient(110deg,#003f30,#006b4b);color:#fff;padding:52px 0;position:relative;overflow:hidden}
.cta-grid{display:grid;grid-template-columns:1.15fr .95fr .7fr;gap:45px;align-items:center}
.cta-band h2{font-size:29px;line-height:1.18;margin:0;letter-spacing:-.8px}.cta-band p:not(.eyebrow){font-size:14px;color:rgba(255,255,255,.86)}
.cta-motto{border-left:1px solid rgba(255,255,255,.5);padding-left:28px;display:flex;flex-direction:column;gap:5px;font-size:11px;letter-spacing:3px}
.contact-section{padding:82px 0}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px}.contact-section h2{font-size:40px}.contact-section p:not(.eyebrow){color:var(--muted);max-width:520px}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact-form label{font-size:12px;font-weight:700;color:var(--navy)}.form-message-field{grid-column:1/-1}
.contact-form input,.contact-form textarea{display:block;width:100%;margin-top:7px;border:1px solid #dce4e8;border-radius:3px;padding:13px 14px;font:inherit;font-size:13px;outline:none}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--green)}
.contact-form button{justify-self:start}.contact-form button:disabled{cursor:wait;opacity:.75}.form-note{grid-column:1/-1!important;font-size:12px!important;color:var(--green)!important;margin:0!important}.form-note.error{color:#b42318!important}.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.footer{border-top:1px solid var(--line);background:#fff;padding:36px 0 30px}.footer-main{display:grid;grid-template-columns:1fr 1.5fr 1fr 1fr;gap:30px;align-items:center}.footer .brand{min-width:auto}.footer p{font-size:11px;color:var(--muted);margin:0}.footer-links{display:flex;flex-wrap:wrap;gap:13px;font-size:11px}.footer-links a:hover{color:var(--green)}.credits{text-align:right;font-size:10px;color:var(--muted)}.credits strong{color:var(--navy)}
@media(max-width:980px){
  .site-header{padding:0 22px;gap:18px}.nav{gap:18px}.brand{min-width:185px}.header-cta{display:none}
  .container{width:min(100% - 40px,1180px)}.hero-content{padding-left:20px}.hero h1{font-size:45px}.service-grid{grid-template-columns:repeat(2,1fr)}
  .owner-grid,.contact-grid{grid-template-columns:1fr;gap:35px}.cta-grid{grid-template-columns:1fr 1fr}.cta-motto{display:none}.footer-main{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .site-header{height:70px}.nav{display:none}.menu-toggle{display:block;margin-left:auto}.brand-main{font-size:36px}
  .hero{height:570px}.hero-overlay{background:linear-gradient(90deg,rgba(4,26,43,.9),rgba(5,25,39,.45))}
  .hero h1{font-size:39px}.hero-lead{font-size:16px}.hero-actions{flex-direction:column;align-items:flex-start}.hero-signature{right:20px;bottom:38px}
  .value-grid{grid-template-columns:1fr 1fr}.value-grid>div{padding:13px 8px}.value-grid>div:nth-child(2){border-right:0}.value-grid strong{font-size:17px}
  .section{padding:58px 0}.section-heading{display:block}.text-link{display:inline-block;margin-top:20px}.service-grid{grid-template-columns:1fr}
  .owner-image,.owner-image img{height:350px;min-height:350px}.image-caption{width:38%}.about-grid{grid-template-columns:1fr;gap:20px}
  .cta-grid{grid-template-columns:1fr}.contact-section h2{font-size:33px}.contact-form{grid-template-columns:1fr}.form-message-field{grid-column:auto}.footer-main{grid-template-columns:1fr}.credits{text-align:left}
}

/* Approved mockup — KPI reference strip */
.value-grid{grid-template-columns:repeat(4,1fr) 1.05fr;padding:20px 0}
.value-grid>div{padding:5px 25px;border-right:1px solid #dfe5e8;display:flex;flex-direction:column;align-items:center;text-align:center}
.value-grid strong{font-size:28px;line-height:1;color:var(--navy)}
.value-grid span{font-size:11px;color:var(--muted)}
.value-signature{display:grid!important;grid-template-columns:auto 1fr;grid-template-rows:repeat(3,auto);column-gap:16px;align-content:center;text-align:left!important;padding-left:34px!important}
.value-signature i{grid-row:1 / 4;width:38px;height:2px;background:var(--green);display:block;align-self:center}
.value-signature span{font-size:9px!important;letter-spacing:3px;color:var(--navy)!important;font-weight:700}
.services-more{text-align:center;margin-top:17px}
.services-more .text-link{font-size:12px}
@media(max-width:720px){
  .value-grid{grid-template-columns:1fr 1fr}
  .value-grid>div{padding:13px 8px}
  .value-grid>div:nth-child(2){border-right:0}
  .value-signature{display:none!important}
}
