@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;700&display=swap');

:root {
  color-scheme: light;
  --green: #103c2a;
  --red: #a9272f;
  --paper: #fbf7ee;
  --ink: #172c22;
  --line: #d6cdbd;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--red); outline-offset: 5px; }
.wrap { width: min(1120px, 90%); margin-inline: auto; }
header { border-top: 7px solid transparent; border-image: linear-gradient(90deg,#16854f 33.33%,#fff 33.33%,#fff 66.66%,#c3333a 66.66%) 1; border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding-block: 20px; }
.wordmark { text-transform: uppercase; text-decoration: none; font: 800 1.6rem/.95 "Barlow Condensed", Impact, sans-serif; }
nav { display: flex; gap: clamp(12px,4vw,32px); }
nav a { font-weight: 700; font-size: .95rem; text-decoration: none; padding-block: 7px; }
nav a[aria-current], nav a:hover { color: var(--red); text-decoration: underline; text-underline-offset: 6px; }
.hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px,6vw,84px); align-items: center; padding-block: clamp(60px,10vw,130px); }
.kicker { font-size: .77rem; font-weight: 700; color: var(--red); letter-spacing: .18em; text-transform: uppercase; }
h1, h2, .poster { font-family: "Barlow Condensed", Impact, sans-serif; text-transform: uppercase; font-weight: 900; }
h1 { font-size: clamp(4.1rem,10vw,9.5rem); line-height: .78; margin: .2em 0 .28em; letter-spacing: -.015em; }
h1 span { color: var(--red); display: block; }
h2 { margin: 0; font-size: clamp(2rem,4vw,3rem); line-height: .95; }
.lead { max-width: 35ch; font-size: clamp(1.08rem,2vw,1.32rem); line-height: 1.6; }
.button { display: inline-block; margin-top: 12px; background: var(--green); color: #fff; padding: 14px 21px; font-weight: 700; text-decoration: none; border-radius: 2px; }
.button:hover { background: var(--red); }
.poster { background: var(--green); color: var(--paper); padding: 22px; box-shadow: 9px 9px 0 var(--red); }
.poster-inner { display: grid; align-content: center; justify-items: center; text-align: center; min-height: 320px; padding: 20px; border: 1px solid #c0b5a0; }
.poster strong { font-size: clamp(3.5rem,7vw,6rem); line-height: .83; }
.poster small { margin-top: 20px; font-size: 1.3rem; letter-spacing: .13em; font-weight: 700; }
.flag { display: block; width: 64px; height: 8px; margin-bottom: 20px; background: linear-gradient(90deg,#25a463 33.33%,#fff 33.33%,#fff 66.66%,#dc454e 66.66%); }
.interior { padding-block: clamp(55px,9vw,110px); }
.interior h1 { font-size: clamp(4rem,10vw,8rem); }
.interior .lead { max-width: 59ch; }
.cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-top: 35px; }
.card { border: 1px solid var(--line); border-top: 4px solid var(--green); padding: clamp(22px,4vw,42px); }
.card:nth-child(2) { border-top-color: var(--red); }
.card p { line-height: 1.6; }
footer { padding-block: 24px; color: var(--paper); background: var(--green); font-size: .9rem; }
@media (max-width: 690px) {
  .hero, .cards { grid-template-columns: 1fr; }
  .poster-inner { min-height: 240px; }
}

.button-secondary { color: var(--green); background: transparent; border: 1px solid var(--green); }
.button-secondary:hover { color: white; }
.video-frame { width: 100%; max-width: 860px; aspect-ratio: 16 / 9; background: var(--green); }
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
nav { flex-wrap: wrap; }
nav a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 400px) {
  h1, .interior h1 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .header-inner { gap: 6px; padding-block: 12px; }
  .hero, .interior { padding-block: 36px; }
}
.video-title { margin-bottom: 18px; }