:root{--green:#00774a;--green-d:#005a38;--orange:#f58220;--red:#ee2a24;--ink:#1d1d1b;--paper:#fff}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{display:flex;flex-direction:column;min-height:100vh;font-family:"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--paper)}
a{color:inherit;text-decoration:none}

.stripes{display:flex;height:8px}
.stripes i{flex:1}
.stripes i:nth-child(1){background:var(--orange)}
.stripes i:nth-child(2){background:var(--green)}
.stripes i:nth-child(3){background:var(--red)}

.top{display:flex;align-items:center;gap:2rem;padding:.6rem 2rem;background:var(--paper);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.brand img{height:56px;display:block}
.top nav{display:flex;gap:1.6rem;flex:1;font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.04em}
.top nav a{padding:.4rem 0;border-bottom:3px solid transparent}
.top nav a:hover{border-color:var(--orange)}
.cta{background:var(--red);color:#fff;font-weight:700;padding:.7rem 1.2rem;border-radius:999px;font-size:.85rem}
.cta:hover{background:var(--orange)}

main{flex:1;display:flex;flex-direction:column}
.hero{flex:1;min-height:55vh;display:grid;place-items:center;background:
  linear-gradient(135deg,transparent 0 62%,var(--orange) 62% 74%,var(--red) 74% 86%,transparent 86%),
  var(--green);color:#fff;padding:3rem 1rem}
.hero h1{font-size:clamp(3rem,12vw,9rem);font-weight:900;letter-spacing:-.03em;text-shadow:0 4px 0 var(--green-d)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.tile{display:flex;flex-direction:column;justify-content:flex-end;gap:.3rem;min-height:170px;padding:1.5rem;color:#fff;transition:filter .15s}
.tile:hover{filter:brightness(1.12)}
.tile b{font-size:1.4rem;text-transform:uppercase}
.tile span{opacity:.9}
.tile.orange{background:var(--orange)}
.tile.red{background:var(--red)}
.tile.green{background:var(--green)}
.tile.dark{background:var(--ink)}

.band{background:var(--paper);text-align:center;padding:2rem 1rem;font-size:1.2rem;font-weight:700;color:var(--green)}

footer{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;padding:2rem;background:var(--green-d);color:#fff}
footer div{display:flex;flex-direction:column;gap:.4rem}
footer h4{text-transform:uppercase;color:var(--orange);margin-bottom:.3rem}
footer a:hover{text-decoration:underline}
.legal{grid-column:1/-1;font-size:.8rem;opacity:.7;border-top:1px solid rgba(255,255,255,.2);padding-top:1rem}

@media(max-width:760px){.top{flex-wrap:wrap;gap:.8rem;padding:.6rem 1rem}.top nav{order:3;flex-basis:100%;justify-content:space-between;gap:.5rem;font-size:.7rem;white-space:nowrap}.hero h1{font-size:clamp(2.5rem,16vw,5rem)}}