:root{
  --green:#1f7a5a; --green-d:#155a41; --sand:#e08a2b; --ink:#1c2530; --muted:#5b6678;
  --line:#e4e9f0; --bg:#ffffff; --soft:#f5f8f6; --bg2:#eef4f1;
  /* v1.3 A-path: navy = MEG parent-brand colour (text / frame accent) */
  --navy:#1a2540; --navy-d:#0f1a2e; --navy-light:#2c3e5a;
  --sand-ink:#3d2a08; --success:#1f7a5a; --error:#b3261e;
  --radius:14px; --radius-lg:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;font-size:16px}
a{color:var(--green);text-decoration:none}
/* S2 — visible focus for the whole site (navy 2px, WCAG AA) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
img{max-width:100%;display:block}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;background:var(--green);color:#fff;padding:12px 22px;border-radius:var(--radius);font-weight:700;transition:.15s}
/* A11Y fix (project 4) — nav links set color:navy (S8), which overrides .btn white text on green (2.88:1 fail). Restore white for .btn inside nav; keep .btn.alt dark text on sand. */
.nav nav a.btn:not(.alt){color:#fff}
.nav nav a.btn:not(.alt):hover{color:#fff}
.nav nav a.btn.alt{color:var(--sand-ink)}
.nav nav a.btn.alt:hover{color:#241a05}
.privnote{color:#4d5a6a} /* A11Y fix (project 4) — #6b7684 was 4.3:1 on white; #4d5a6a is 5.7:1 */
.btn:hover{background:var(--green-d)}
.btn.alt{background:var(--sand);color:var(--sand-ink)} /* S1 — sand bg + dark text (7:1+) */
.btn.alt:hover{background:#c7761d;color:#241a05}
.btn.ghost{background:transparent;color:var(--green);border:2px solid var(--green)}
.hero .btn.alt{background:var(--sand);color:var(--sand-ink)}
.hero .btn.alt:hover{background:#c7761d;color:#241a05}
.phonebar{background:linear-gradient(90deg,#0d3a2b,#1f7a5a);color:#fff;font-size:14px;border-bottom:3px solid var(--sand)}
.phonebar .wrap{display:flex;justify-content:space-between;align-items:center;padding:9px 20px;flex-wrap:wrap;gap:6px}
.phonebar a{color:#fff;font-weight:700}
.phonebar .ph-strong{color:#ffd9a8;font-weight:800}
header.nav{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:50}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;font-size:20px;color:var(--navy)} /* S8 — brand wordmark in MEG navy */
.logo span{color:var(--green)}
.nav nav{display:flex;gap:22px;align-items:center}
.nav nav a{color:var(--navy);font-weight:600;font-size:15px}
.nav nav a:hover{color:var(--green)}
.menu-btn{display:none;background:none;border:0;font-size:26px;cursor:pointer;color:var(--ink)}
.hero{position:relative;padding:84px 0;color:#fff;background:#0d3a2b}
.hero .wrap{position:relative;z-index:2}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.38}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,30,22,.82) 0%,rgba(10,30,22,.45) 55%,rgba(10,30,22,.12) 100%)}
.hero h1{font-size:42px;line-height:1.15;margin:0 0 14px;max-width:700px}
.hero p{font-size:18px;color:#e8f3ee;max-width:620px}
.hero .cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.hero .btn.alt{background:var(--sand)}
.hero .eyebrow{color:#ffd9a8}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:34px 0}
.card{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px}
.card h3{margin:0 0 8px;color:var(--green-d)}
.card p{color:var(--muted);margin:0;font-size:15px}
section{padding:54px 0}
.section-head{text-align:center;max-width:680px;margin:0 auto 28px}
.section-head h2{font-size:30px;margin:0 0 8px;color:var(--navy)} /* S7 — section headings in MEG navy */
.section-head p{color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.split img{border-radius:var(--radius-lg)}
.altbg{background:var(--soft)}
.portalgate{background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;margin-top:0;border:1px solid var(--navy-light);border-left:0;border-right:0} /* S9 — navy-light frame on key container */
.portalgate .pg-inner{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:center;padding:32px 0}
.portalgate h2{color:#fff}
.portalgate p{color:#e9fff6}
.portalgate .eyebrow{color:#9fe3c4}
.portalgate .pg-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.portalgate .btn.ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.45)}
.portalgate .btn.ghost:hover{background:rgba(255,255,255,.26)}
@media(max-width:860px){.portalgate .pg-inner{grid-template-columns:1fr}}
.feat{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.feat .item{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:#fff}
.feat .item b{color:var(--green-d)}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.steps .s{border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:#fff;position:relative}
.steps .s:before{counter-increment:s;content:counter(s);position:absolute;top:-14px;left:16px;width:30px;height:30px;background:var(--green);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800}
.model{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.model .m{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.model .m .ph{height:160px;background:linear-gradient(135deg,var(--bg2),#dfeae5);display:flex;align-items:flex-end;padding:14px}
.model .m h4{margin:0;color:#fff;font-size:17px;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.model .m .bd{padding:16px}
.model .m .bd p{color:var(--muted);font-size:14px;margin:0 0 10px}
.price{font-weight:800;color:var(--green-d)}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-weight:600;margin:12px 0 5px;font-size:14px}
input,select,textarea{width:100%;padding:12px 12px;border:1px solid var(--line);border-radius:var(--radius);font-size:15px;font-family:inherit} /* S3 — 12px padding for 44px+ touch target */
textarea{min-height:120px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.info li{margin:10px 0;list-style:none}
.info ul{padding:0}
footer{background:var(--ink);color:#cdd6e0;padding:40px 0;font-size:14px}
footer a{color:#9fe3c4}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.bloglist a{display:block;padding:16px;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;color:var(--ink)}
.bloglist a:hover{border-color:var(--green)}
.bloglist .meta{color:var(--muted);font-size:13px}
article{max-width:760px;margin:0 auto}
article h1{font-size:32px}
article h2{font-size:24px;margin-top:30px;color:var(--green-d)}
article table{border-collapse:collapse;width:100%;margin:14px 0}
article th,article td{border:1px solid var(--line);padding:8px 10px}
article th{background:var(--soft)}
.note{background:#fff7ec;border:1px solid #f0d9b0;border-radius:var(--radius);padding:10px 14px;font-size:14px;color:#7a5a16}
.crumb{background:var(--soft);border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.crumb .wrap{padding:10px 20px}
.crumb a{color:var(--green)}
.eyebrow{text-transform:uppercase;letter-spacing:1px;font-size:13px;font-weight:700;color:var(--sand);margin:0 0 6px}
.hero .tag{font-size:20px;font-weight:700;color:#ffd9a8;margin:6px 0 14px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pcard{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.pthumb{position:relative;height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff}
.pthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pbody{padding:12px 14px}
.pbody h4{margin:0 0 4px;color:var(--green-d);font-size:15px}
.pbody p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.applist{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;list-style:none;padding:0;max-width:960px;margin:0 auto}
.applist li{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;font-weight:600;font-size:15px;color:var(--green-d);position:relative;padding-left:34px}
.applist li:before{content:"";position:absolute;left:14px;top:20px;width:9px;height:9px;border-radius:50%;background:var(--sand)}
.chip{display:inline-block;background:var(--soft);border:1px solid var(--line);border-radius:20px;padding:7px 14px;font-size:14px;font-weight:600;margin:4px 6px 0 0;color:var(--ink)}
.chip:hover{border-color:var(--green);color:var(--green)}
.specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.specs .sp{background:#eef4f1;border:1px solid #d7e6de;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;color:#155a41}
.group{margin-bottom:40px}
.group h3{font-size:22px;color:var(--green-d);border-left:4px solid var(--green);padding-left:10px;margin:0 0 16px}
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ccard{display:flex;flex-direction:column;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--ink);transition:.15s;overflow:hidden}
.ccard:hover{border-color:var(--green);box-shadow:0 4px 14px rgba(31,122,90,.12)}
.ccard .ctext{padding:10px 14px 12px;display:flex;flex-direction:column;gap:3px}
.ccard .ccode{font-size:11px;font-weight:800;color:var(--sand)}
.ccard b{font-size:15px;color:var(--green-d)}
.ccard i{font-style:normal;color:var(--muted);font-size:13px;line-height:1.4}
.ccard .cmore{margin-top:auto;padding-top:6px;font-weight:700;color:var(--green);font-size:13px}
.tradeband{background:linear-gradient(135deg,#155a41,#1f7a5a);color:#fff}
.tradeband .section-head h2{color:#fff}
.tradeband .section-head p{color:#d7ece4}
.tradeband .btn.ghost{background:transparent;color:#fff;border:2px solid #fff}
.tradeband .btn.ghost:hover{background:rgba(255,255,255,.12)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
.ptile{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;text-decoration:none;color:inherit;overflow:hidden;transition:.18s}
.ptile:hover{border-color:var(--green);box-shadow:0 8px 22px rgba(21,90,65,.14);transform:translateY(-2px)}
/* image-first slot with graceful fallback: real photo covers the branded gradient; on 404 it is removed and the label shows */
.pimg{position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#2f6b54,#1f4d3c);color:#fff}
.ptile .pimg{aspect-ratio:1/1}
.ccard .pimg{aspect-ratio:1/1}
.pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pimg.hero{aspect-ratio:16/7}
.g-surfaces-flooring{background:linear-gradient(135deg,#3a6f5e,#1f4d3c)}
.g-kitchen{background:linear-gradient(135deg,#b8702e,#7a3f15)}
.g-water-fire{background:linear-gradient(135deg,#2f6f8f,#143b52)}
.g-furniture-decor{background:linear-gradient(135deg,#6b5a8f,#3a2f52)}
.g-structures-screening{background:linear-gradient(135deg,#5a5f66,#2c3036)}
.g-shade-shelter{background:linear-gradient(135deg,#3f7d6e,#1f4d44)}
.g-buildings{background:linear-gradient(135deg,#8a6d3b,#4a3a1f)}
.coming-soon{position:relative;aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius-lg);text-align:center;color:#fff;padding:40px 24px}
.coming-soon .cs-inner{max-width:560px}
.coming-soon .cs-badge{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(2px);padding:6px 16px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:16px}
.coming-soon h3{font-size:26px;margin:0 0 10px}
.coming-soon p{font-size:15px;opacity:.92;max-width:460px;margin:0 auto 20px}
.coming-soon .btn{background:#fff;color:#143b2f;font-weight:800}
.coming-soon .btn:hover{background:#e6f5ee}
.pcard .pthumb{position:relative}
.pthumb .cs-badge{position:absolute;top:10px;right:10px;z-index:2;background:rgba(20,30,26,.78);color:#fff;border:1px solid rgba(255,255,255,.4);padding:3px 10px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
/* D6 — product card with missing image: centred Coming Soon badge on brand gradient */
.pthumb-cs .cs-badge{position:static;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);padding:6px 16px;font-size:11px;letter-spacing:1.1px}
/* Form status (G8) — success / error swap, same page (JS toggles display) */
.form-status{display:none;margin-top:16px;padding:14px 18px;border-radius:var(--radius);font-weight:600;font-size:15px}
.form-status.ok{background:var(--bg2);border:1px solid var(--green);color:var(--green-d)}
.form-status.err{background:#fdf0ef;border:1px solid var(--error);color:var(--error)}
.ptile b.nm{font-size:14px;margin:10px 12px 0;display:block}
.ptile em{font-style:normal;font-size:12px;color:var(--muted);margin:3px 12px 12px;display:block;line-height:1.4}

.filterbar{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 20px;margin:0 auto 18px;max-width:960px}
.filterbar .fgroup{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0}
.filterbar .fglabel{font-size:13px;font-weight:700;color:var(--green-d);min-width:88px}
.filterbar .fopts{display:flex;gap:8px;flex-wrap:wrap}
.filterbar .fopt{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:.12s}
.filterbar .fopt:hover{border-color:var(--green);color:var(--green)}
.filterbar .fopt.on{background:var(--green);border-color:var(--green);color:#fff}
.filterbar .freset{display:inline-block;margin-top:10px;background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.filterbar .freset:hover{border-color:var(--green);color:var(--green)}
.samplebox{background:linear-gradient(135deg,#fdf3e7,#fbe6cd);border:1px solid #f0d5ae;border-radius:var(--radius-lg);padding:30px;display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:center}
.samplebox h3{margin:0 0 8px;color:#7a4a12;font-size:22px}
.samplebox p{margin:0 0 14px;color:#7a5a35}
.samplebox .sb-btn{display:inline-block;background:var(--sand);color:#fff;padding:12px 22px;border-radius:var(--radius);font-weight:800}
.samplebox .sb-btn:hover{background:#c7761d}
.casegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.case{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;display:flex;align-items:flex-end;color:#fff;border:1px solid var(--line)}
.case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case .case-tag{position:relative;z-index:1;padding:12px 14px;background:linear-gradient(0deg,rgba(10,25,18,.78),transparent);width:100%}
.case .case-tag b{display:block;font-size:15px}
.case .case-tag span{font-size:12px;opacity:.9}
.trade-cmp{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:920px;margin:0 auto}
.trade-cmp .col{border:1px solid var(--navy-light);border-radius:var(--radius-lg);padding:22px;background:#fff} /* S9 — navy-light card frame */
.trade-cmp .col.trade{background:#0d3a2b;color:#fff;border-color:#0d3a2b}
.trade-cmp .col h3{margin:0 0 12px;font-size:20px}
.trade-cmp .col.trade h3{color:#ffd9a8}
.trade-cmp ul{padding:0;margin:0;list-style:none}
.trade-cmp li{padding:7px 0 7px 24px;position:relative;border-bottom:1px solid var(--line);font-size:14px}
.trade-cmp .col.trade li{border-bottom-color:rgba(255,255,255,.14);color:#e8f3ee}
.trade-cmp li:last-child{border-bottom:0}
.trade-cmp li:before{content:"";position:absolute;left:0;top:15px;width:8px;height:8px;border-radius:50%;background:var(--sand)}
.trade-cmp .col.trade li:before{background:#ffd9a8}
@media(max-width:860px){
  .cards,.model{grid-template-columns:1fr}
  .split,.contact-grid,.feat,.steps,.form .row{grid-template-columns:1fr}
  .nav nav{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;flex-direction:column;padding:14px 20px;border-bottom:1px solid var(--line)}
  .nav nav.open{display:flex}
  .menu-btn{display:block}
  .hero h1{font-size:30px}
  footer .cols{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr 1fr}
  .applist{grid-template-columns:1fr}
  .cgrid{grid-template-columns:1fr 1fr}
  .casegrid{grid-template-columns:1fr}
  .trade-cmp{grid-template-columns:1fr}
  .samplebox{grid-template-columns:1fr}
}