:root {
  --primitive-petrol-950: #063c4a;
  --primitive-petrol-800: #005f73;
  --primitive-paper-50: #fcf8f0;
  --primitive-paper-100: #fffdf8;
  --primitive-sky-50: #eaf3fa;
  --primitive-sky-200: #b7d7ee;
  --primitive-amber-500: #ffb31f;
  --primitive-amber-600: #e69b00;
  --primitive-ink-900: #20313a;
  --primitive-success-600: #16805e;
  --semantic-page: var(--primitive-paper-50);
  --semantic-surface: var(--primitive-paper-100);
  --semantic-hero: var(--primitive-petrol-950);
  --semantic-text: var(--primitive-ink-900);
  --semantic-action: var(--primitive-amber-500);
  --semantic-border: var(--primitive-sky-200);
  --component-gutter: clamp(16px, 4vw, 32px);
  --component-radius: 24px;
  --component-shadow: 0 12px 28px rgb(6 60 74 / 10%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--semantic-page);
  color: var(--semantic-text);
  font: 16px/1.65 "Nunito Sans", Inter, system-ui, sans-serif;
}
a { color: var(--primitive-petrol-800); }
a:focus-visible { outline: 3px solid var(--semantic-action); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--semantic-action); padding: 10px 16px; border-radius: 8px; font-weight: 800; }
.skip:focus { left: 16px; z-index: 3; }
.hero { background: var(--semantic-hero); color: var(--semantic-surface); padding: 20px var(--component-gutter) 56px; }
.topbar, .hero-copy, .content, .footer-inner { width: min(1080px, 100%); margin-inline: auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; font-size: 20px; font-weight: 900; text-decoration: none; }
.brand img { width: 44px; height: 44px; object-fit: contain; }
.home-link { display: inline-flex; min-height: 44px; align-items: center; color: var(--semantic-surface); font-weight: 800; text-decoration: none; }
.hero-copy { margin-top: 52px; }
.eyebrow { margin: 0 0 12px; color: var(--semantic-action); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { max-width: 850px; margin: 0; font-size: clamp(32px, 6vw, 52px); line-height: 1.1; letter-spacing: -.025em; }
.lead { max-width: 740px; margin: 18px 0 0; color: rgb(255 255 255 / 84%); font-size: 18px; }
main { padding: 48px var(--component-gutter) 72px; }
.content { max-width: 780px; }
.updated { margin: 0 0 32px; color: rgb(32 49 58 / 68%); font-size: 14px; font-weight: 700; }
.content h2 { margin: 44px 0 12px; color: var(--primitive-petrol-950); font-size: 26px; line-height: 1.25; }
.content h3 { margin: 28px 0 8px; color: var(--primitive-petrol-950); font-size: 20px; line-height: 1.3; }
.content p, .content li { max-width: 72ch; }
.content ul, .content ol { padding-left: 24px; }
.content li + li { margin-top: 8px; }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0; }
.card { padding: 24px; border: 1px solid var(--semantic-border); border-radius: var(--component-radius); background: var(--semantic-surface); box-shadow: var(--component-shadow); }
.card h2, .card h3 { margin-top: 0; }
.notice { margin: 32px 0; padding: 16px 20px; border-left: 4px solid var(--semantic-action); border-radius: 0 16px 16px 0; background: #fff6df; }
.contact-link, .cta { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: 0 20px; border-radius: 16px; font-weight: 900; text-decoration: none; }
.cta { background: var(--semantic-action); color: var(--semantic-text); }
.cta:hover { background: var(--primitive-amber-600); }
.contact-link { border: 1px solid var(--semantic-border); background: var(--semantic-surface); color: var(--primitive-petrol-950); }
.status-ok { display: inline-flex; align-items: center; gap: 8px; color: var(--primitive-success-600); font-weight: 900; }
.status-ok::before { width: 10px; height: 10px; border-radius: 50%; background: currentColor; content: ""; }
footer { background: var(--semantic-hero); color: rgb(255 255 255 / 78%); padding: 40px var(--component-gutter); }
.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; margin-top: 24px; }
.footer-group h2 { margin: 0 0 8px; color: #fff; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.footer-group a { display: flex; min-height: 40px; align-items: center; color: rgb(255 255 255 / 78%); font-size: 14px; font-weight: 700; text-decoration: none; }
.footer-group a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / 16%); color: rgb(255 255 255 / 60%); font-size: 13px; }
@media (max-width: 680px) { .card-grid, .footer-nav { grid-template-columns: 1fr; } .hero-copy { margin-top: 40px; } .hero h1 { font-size: 34px; } .lead { font-size: 16px; } .content h2 { font-size: 23px; } .card { padding: 20px; } .footer-group a { min-height: 44px; } }