
:root{
  --green:#1f503c;
  --green-dark:#153a2b;
  --green-deep:#0e2b20;
  --orange:#f1a52e;
  --orange-dark:#d78910;
  --cream:#f6f3eb;
  --gray:#eceeea;
  --ink:#333833;
  --muted:#687069;
  --white:#fff;
  --line:#d9ddd6;
  --shadow:0 12px 34px rgba(17,45,33,.14);
  --display-font:"Avant Garde","ITC Avant Garde Gothic","Century Gothic","Avenir Next",Futura,Arial,sans-serif;
  --body-font:Arial,Helvetica,sans-serif;
  --max:1170px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
h1,h2,h3,h4,h5,h6{font-family:var(--display-font);font-weight:700}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--body-font);font-size:16px;line-height:1.68}
img{max-width:100%;display:block}
a{color:inherit}
button,input,textarea{font:inherit}
.container{width:min(var(--max),calc(100% - 36px));margin-inline:auto}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:200;background:#fff;color:#111;padding:10px 14px}

/* Header intentionally echoes the current site: slim contact rail, large white logo area, simple navigation. */
.contact-rail{background:var(--green-dark);color:#eef5f1;font-size:13px}
.contact-rail .container{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.contact-items,.utility-items{display:flex;align-items:center;gap:23px}
.contact-items a,.utility-items a{text-decoration:none}
.contact-items a:hover,.utility-items a:hover{color:#ffc35c}
.contact-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--orange);margin-right:7px;vertical-align:2px}
.site-header{background:#fff;position:relative;z-index:50;border-bottom:1px solid #e6e9e5}
.header-top{min-height:114px;display:flex;align-items:center;justify-content:space-between;gap:34px}
.brand img{width:330px;max-height:88px;object-fit:contain}
.header-callout{text-align:right;color:var(--muted);font-size:14px}
.header-callout strong{display:block;color:var(--green-dark);font-size:18px}
.navbar{background:#fff;border-top:1px solid #eceeea;box-shadow:0 4px 13px rgba(0,0,0,.06)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.main-nav{display:flex;align-items:center;flex-wrap:wrap}
.main-nav a{position:relative;text-decoration:none;text-transform:uppercase;font-size:13px;font-weight:800;letter-spacing:.3px;padding:20px 15px;color:#303730}
.main-nav a:after{content:"";position:absolute;height:3px;left:15px;right:15px;bottom:0;background:var(--orange);transform:scaleX(0);transition:.18s}
.main-nav a:hover,.main-nav a[aria-current="page"]{color:var(--green)}
.main-nav a:hover:after,.main-nav a[aria-current="page"]:after{transform:scaleX(1)}
.amazon-nav{display:inline-flex;align-items:center;text-decoration:none;background:var(--orange);color:#17291f;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;padding:13px 19px;white-space:nowrap}
.amazon-nav:hover{background:var(--orange-dark);color:#fff}
.nav-toggle{display:none;border:0;background:var(--green);color:#fff;font-weight:800;padding:11px 14px}

/* Remote images are used only as a safe source reference to the existing public site.
   The included fetch script downloads them locally before final launch. */
.photo-shell{position:relative;overflow:hidden;background:linear-gradient(135deg,#314c40,#7b8a80)}
.photo-shell>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-shell:after{content:"";position:absolute;inset:0;pointer-events:none}

.hero{position:relative;min-height:540px;display:flex;align-items:center;color:#fff;overflow:hidden;background:var(--green-deep)}
.hero .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,31,21,.91) 0%,rgba(12,40,28,.76) 52%,rgba(14,42,30,.24) 100%)}
.hero .container{position:relative;z-index:2}
.hero-copy{max-width:690px;padding:76px 0 84px}
.hero-kicker{margin:0 0 6px;color:#ffd28a;font-size:16px;font-weight:800;letter-spacing:3px;text-transform:uppercase}
.hero h1{margin:0 0 20px;font-family:var(--display-font);font-size:66px;line-height:1.02;letter-spacing:-1.5px;text-transform:uppercase}
.hero h1 span{color:var(--orange)}
.hero p{max-width:620px;font-size:18px;color:#f1f4f2;margin:0}
.button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}
.btn{display:inline-block;text-decoration:none;text-transform:uppercase;letter-spacing:.55px;font-size:13px;font-weight:900;padding:13px 23px;border:2px solid transparent;transition:.18s}
.btn-orange{background:var(--orange);color:#203127}
.btn-orange:hover{background:var(--orange-dark);color:#fff}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-deep)}
.btn-outline{border-color:#fff;color:#fff}
.btn-outline:hover{background:#fff;color:var(--green-dark)}

.feature-band{background:#fff;position:relative;z-index:5;margin-top:-35px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);box-shadow:var(--shadow);border-top:5px solid var(--orange)}
.feature{padding:28px 30px;border-right:1px solid var(--line)}
.feature:last-child{border-right:0}
.feature h3{margin:0 0 6px;font:700 20px/1.3 var(--display-font);color:var(--green-dark)}
.feature p{margin:0;color:var(--muted);font-size:16px}

.section{padding:78px 0}
.section-sm{padding:55px 0}
.section-cream{background:var(--cream)}
.section-gray{background:#f1f3f0}
.section-green{background:var(--green-dark);color:#fff}
.eyebrow{margin:0 0 7px;color:var(--orange-dark);text-transform:uppercase;font-size:13px;font-weight:900;letter-spacing:2px}
.section-title{margin:0 0 20px;color:var(--green-dark);font:700 42px/1.16 var(--display-font)}
.section-green .section-title{color:#fff}
.lead{font-size:18px;color:#5e665f}
.section-green .lead{color:#d9e3dd}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.two-col.wide-copy{grid-template-columns:.92fr 1.08fr}
.two-col.reverse{grid-template-columns:1.08fr .92fr}
.old-photo{min-height:395px;box-shadow:var(--shadow);border:10px solid #fff}
.old-photo:after{background:linear-gradient(180deg,transparent 60%,rgba(10,35,24,.26))}
.old-photo.short{min-height:315px}
.caption-strip{position:absolute;left:0;bottom:0;z-index:3;background:rgba(19,58,42,.92);color:#fff;padding:13px 18px;border-right:5px solid var(--orange);font-weight:800}
.clean-list{list-style:none;padding:0;margin:22px 0 28px}
.clean-list li{position:relative;padding:8px 0 8px 29px}
.clean-list li:before{content:"✓";position:absolute;left:0;color:var(--orange-dark);font-weight:900}

.purchase-panel{position:relative;overflow:hidden;min-height:350px;display:flex;align-items:center;background:var(--green-deep);color:#fff}
.purchase-panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38}
.purchase-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,38,26,.94),rgba(10,38,26,.66))}
.purchase-panel .container{position:relative;z-index:2}
.purchase-copy{max-width:690px;padding:70px 0}
.purchase-copy h2{margin:0 0 15px;font:700 42px/1.16 var(--display-font)}
.purchase-copy p{font-size:18px;color:#e6eee9}

.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testimonial{background:#fff;border:1px solid var(--line);padding:29px;box-shadow:0 7px 20px rgba(20,40,30,.06);position:relative}
.testimonial:before{content:"“";position:absolute;left:18px;top:-13px;color:var(--orange);font:76px/1 var(--display-font);opacity:.55}
.testimonial blockquote{margin:23px 0 18px;font-style:italic}
.testimonial cite{font-style:normal;font-weight:800;color:var(--green-dark)}

.page-hero{position:relative;min-height:260px;display:flex;align-items:center;color:#fff;background:var(--green-deep);overflow:hidden}
.page-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.52}
.page-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,37,26,.92),rgba(10,37,26,.48))}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{margin:0;text-transform:uppercase;font:700 50px/1.08 var(--display-font)}
.page-hero p{max-width:680px;margin:10px 0 0;font-size:18px;color:#e4ebe7}

.content-narrow{max-width:900px;margin:auto}
.spec-list{list-style:none;padding:0;margin:0}
.spec-list li{padding:15px 0 15px 31px;border-bottom:1px solid var(--line);position:relative}
.spec-list li:before{content:"•";position:absolute;left:5px;top:4px;color:var(--orange-dark);font-size:33px}
.spec-list strong{color:var(--green-dark)}
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:21px}
.spec-card{background:#fff;padding:24px;border-left:5px solid var(--orange);box-shadow:0 6px 18px rgba(19,45,34,.07)}
.spec-card h3{font-family:var(--display-font);color:var(--green-dark);margin:0 0 7px}

.spec-card h3,.instruction h3,.contact-card h3{font-family:var(--display-font);font-size:20px;line-height:1.3;font-weight:700}
.caption-strip,.eyebrow,.main-nav a,.btn,.amazon-nav{font-family:var(--display-font)}
.instructions{counter-reset:item;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.instruction{counter-increment:item;background:#fff;border:1px solid var(--line);padding:26px}
.instruction:before{content:counter(item);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--orange);font-weight:900;color:#243329;margin-bottom:14px}
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.photo-pair .old-photo{min-height:330px}
.notice{background:#fff8e8;border-left:5px solid var(--orange);padding:18px 22px}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.contact-card{background:#fff;border:1px solid var(--line);padding:28px;text-align:center}
.contact-card h3{font-family:var(--display-font);color:var(--green-dark);margin:6px 0 7px}
.contact-card a{text-decoration:none;color:var(--green)}

.site-footer{background:var(--green-deep);color:#d9e4dd;padding-top:52px}
.footer-grid{display:grid;grid-template-columns:1.25fr .72fr .78fr;gap:52px;padding-bottom:38px}
.footer-logo{width:250px;background:#fff;padding:7px;margin-bottom:15px}
.footer-title{font:700 20px/1.25 var(--display-font);color:#fff;margin-bottom:12px}
.footer-links{display:grid;gap:8px}
.footer-links a{text-decoration:none;color:#d9e4dd}
.footer-links a:hover{color:#ffc35c}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding:19px 0;font-size:13px;color:#aebdb4;display:flex;justify-content:space-between;gap:20px}

@media(max-width:950px){
  .header-callout,.utility-items{display:none}
  .header-top{min-height:92px}
  .brand img{width:260px}
  .nav-toggle{display:block;margin:9px 0}
  .nav-row{align-items:flex-start}
  .main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 14px 24px rgba(0,0,0,.13);flex-direction:column;align-items:stretch}
  .main-nav.open{display:flex}
  .main-nav a{padding:14px 22px;border-bottom:1px solid #eceeea}
  .main-nav a:after{display:none}
  .amazon-nav{margin-left:auto}
  .hero h1{font-size:54px}
  .feature-grid{grid-template-columns:1fr}
  .feature{border-right:0;border-bottom:1px solid var(--line)}
  .two-col,.two-col.wide-copy,.two-col.reverse{grid-template-columns:1fr;gap:35px}
  .testimonial-grid,.instructions{grid-template-columns:1fr}
  .spec-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
}
@media(max-width:650px){
  .container{width:min(var(--max),calc(100% - 26px))}
  .contact-rail .container{justify-content:center}
  .contact-items span:nth-child(2){display:none}
  .header-top{min-height:82px}
  .brand img{width:220px}
  .amazon-nav{font-size:11px;padding:11px 12px}
  .hero{min-height:485px}
  .hero-copy{padding:59px 0 68px}
  .hero h1{font-size:43px}
  .hero p{font-size:16px}
  .feature-band{margin-top:0}
  .section{padding:57px 0}
  .section-title{font-size:34px}
  .old-photo{min-height:290px}
  .purchase-copy h2{font-size:35px}
  .page-hero{min-height:220px}
  .page-hero h1{font-size:39px}
  .photo-pair{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-grid>div:first-child{grid-column:auto}
  .footer-bottom{display:block}
}
