:root { --yellow: #ffc42e; --red: #e3281c; --ink: #16224a; --cream: #fdf9ee; --teal: #33858c; --line: #e6dcc0; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 18px; line-height: 1.55; }
a { color: var(--red); }
.wrap { max-width: 1040px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
header.bar { background: var(--red); color: var(--cream); }
header.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; flex-wrap: wrap; }
.logo { font-family: "Anton", Impact, sans-serif; font-size: 28px; letter-spacing: 1px; text-decoration: none; color: var(--cream); line-height: 1; }
.logo span { color: var(--yellow); }
nav a { color: var(--cream); text-decoration: none; font-weight: 600; margin-left: 18px; font-size: 16px; }
nav a:first-child { margin-left: 0; }
.hero { background: var(--yellow); }
.hero .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; padding-block: 56px; }
h1 { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: clamp(44px, 8vw, 84px); line-height: 0.98; margin: 0 0 18px; text-transform: uppercase; text-wrap: balance; }
h1 em { font-style: normal; color: var(--red); }
.lede { font-size: 21px; max-width: 30em; margin: 0 0 26px; }
.badge { display: inline-block; background: var(--ink); color: var(--cream); padding: 14px 22px; border-radius: 12px; font-weight: 600; text-decoration: none; }
.badge small { display: block; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.75; font-weight: 500; }
.phone { justify-self: center; width: min(300px, 78vw); border-radius: 34px; border: 8px solid var(--ink); box-shadow: 0 18px 0 rgba(22, 34, 74, 0.18); overflow: hidden; background: var(--ink); transform: rotate(2deg); }
.phone img { display: block; width: 100%; height: auto; }
section { padding-block: 56px; }
h2 { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: clamp(30px, 5vw, 44px); line-height: 1.05; margin: 0 0 22px; text-transform: uppercase; text-wrap: balance; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card { background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 20px 20px 22px; box-shadow: 0 6px 0 var(--ink); }
.card h3 { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 24px; margin: 0 0 8px; text-transform: uppercase; color: var(--red); }
.card p { margin: 0; }
.shots { background: var(--ink); color: var(--cream); }
.shots .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.shots figure { margin: 0; }
.shots img { width: 100%; height: auto; display: block; border-radius: 22px; border: 4px solid var(--cream); }
.shots figcaption { margin-top: 10px; font-size: 16px; opacity: 0.85; text-align: center; }
footer { border-top: 3px solid var(--ink); padding-block: 28px 44px; font-size: 16px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }
footer a { color: var(--ink); font-weight: 600; margin-right: 18px; }
.doc { max-width: 760px; padding-block: 44px 64px; }
.doc h1 { font-size: clamp(36px, 6vw, 56px); }
.doc h2 { font-size: 26px; margin: 34px 0 10px; }
.doc .meta { color: #5b6283; margin: 0 0 24px; }
.doc table { border-collapse: collapse; width: 100%; font-size: 16px; }
.doc th, .doc td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.tablewrap { overflow-x: auto; }
@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: 1fr; padding-block: 36px; gap: 28px; }
  .three, .shots .row { grid-template-columns: 1fr; }
  .shots .row { max-width: 320px; margin: 0 auto; }
  body { font-size: 17px; }
}