:root{
  --color-primary: #1e40af;
  --color-secondary: #dc2626;
  --color-background: #ffffff;
  --color-footer: #f8fafc;
  --color-surface: #ffffff;
  --color-text: #0b1220;
  --color-muted: #475569;
  --radius-sharp: 0px;
  --radius-soft: 4px;
  --border-thin: 1px;
  --border-thick: 2px;
  --shadow-solid: 4px 4px 0 #000;
  --shadow-soft: 2px 2px 0 #000;
  --shadow-inset: inset 2px 2px 0 rgba(0,0,0,0.08);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --container: 1200px;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*,
*::before,
*::after{ box-sizing: border-box; }

html{ font-size: 16px; }

body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6{
  font-family: var(--font-display);
  line-height: 1.2;
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}

h1{ font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 800; }
h2{ font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; }
h3{ font-size: clamp(1.375rem, 2vw, 1.625rem); font-weight: 700; }

p{ margin: 0 0 var(--space-4); color: var(--color-text); }

a{
  color: var(--color-primary);
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
a:hover{ transform: translateY(-1px); }
a:focus-visible{
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

img{ max-width: 100%; display: block; height: auto; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section{
  padding: var(--space-16) 0;
  background: var(--color-background);
  border-top: var(--border-thick) solid #000;
  border-bottom: var(--border-thick) solid #000;
}
.section:nth-of-type(odd){ background: #f8fafc; }
.section--contrast{
  background: var(--color-primary);
  color: #fff;
  border-top-color: #000;
  border-bottom-color: #000;
}
.section--contrast h1,
.section--contrast h2,
.section--contrast h3,
.section--contrast p{ color: #fff; }

.header{
  background: var(--color-surface);
  border-bottom: var(--border-thick) solid #000;
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: var(--space-6);
}
.brand{
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.01em;
  text-decoration: none;
  border: var(--border-thick) solid #000;
  padding: var(--space-2) var(--space-3);
  box-shadow: var(--shadow-soft);
  background: #fff;
}
.nav{
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.nav a{
  padding: var(--space-2) var(--space-3);
  border: var(--border-thick) solid #000;
  background: #fff;
  color: var(--color-text);
  font-weight: 700;
  font-family: var(--font-display);
  box-shadow: var(--shadow-soft);
}
.nav a:hover{
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000;
}

.hero{
  padding: clamp(48px, 8vw, 96px) 0;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #f8fafc 100%);
  border-bottom: var(--border-thick) solid #000;
}
.hero-inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px){
  .hero-inner{ grid-template-columns: 1.2fr 0.8fr; align-items: center; }
}
.kicker{
  display: inline-block;
  background: var(--color-secondary);
  color: #fff;
  padding: 6px 10px;
  border: var(--border-thick) solid #000;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: var(--shadow-soft);
  margin-bottom: var(--space-4);
}
.lead{
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  color: var(--color-muted);
  margin-bottom: var(--space-6);
}

.grid{
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.col-12{ grid-column: span 12; }
.col-6{ grid-column: span 12; }
.col-4{ grid-column: span 12; }
@media (min-width: 640px){
  .col-6{ grid-column: span 6; }
}
@media (min-width: 1024px){
  .col-4{ grid-column: span 4; }
}

.card{
  background: #fff;
  border: var(--border-thick) solid #000;
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-solid);
  overflow: hidden;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.card:hover{
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0 #000;
}
.card-body{ padding: var(--space-6); }
.card-title{
  font-size: 1.125rem;
  font-weight: 800;
  margin-bottom: var(--space-2);
}
.card-text{ color: var(--color-text); }
.card-media{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: var(--border-thick) solid #000;
}

.btn{
  --btn-bg: #fff;
  --btn-fg: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 18px;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  border: var(--border-thick) solid #000;
  border-radius: var(--radius-soft);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--shadow-solid);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
  text-decoration: none;
  user-select: none;
}
.btn:hover{
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000;
}
.btn:active{
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
}
.btn:focus-visible{
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.btn--primary{
  --btn-bg: var(--color-primary);
  --btn-fg: #fff;
}
.btn--secondary{
  --btn-bg: var(--color-secondary);
  --btn-fg: #fff;
}
.btn--outline{
  --btn-bg: #fff;
  --btn-fg: var(--color-text);
}
.btn--ghost{
  --btn-bg: transparent;
  --btn-fg: var(--color-text);
  border-style: dashed;
  box-shadow: none;
}
.btn--sm{ padding: 8px 12px; font-size: 0.875rem; }
.btn--lg{ padding: 16px 24px; font-size: 1.125rem; }

.badge{
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 4px 10px;
  border: var(--border-thick) solid #000;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: var(--shadow-soft);
}

.form{
  background: #fff;
  border: var(--border-thick) solid #000;
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-solid);
  padding: var(--space-6);
}
.form .row{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px){
  .form .row{ grid-template-columns: repeat(2, 1fr); }
}
.form .row.full{ grid-template-columns: 1fr; }

.label{
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  margin-bottom: var(--space-2);
}
.input, .select, .textarea{
  width: 100%;
  padding: 12px 14px;
  border: var(--border-thick) solid #000;
  border-radius: var(--radius-soft);
  background: #fff;
  color: var(--color-text);
  font: inherit;
  box-shadow: var(--shadow-inset);
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.input::placeholder, .textarea::placeholder{ color: #64748b; }
.input:focus, .select:focus, .textarea:focus{
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary);
}
.textarea{ min-height: 140px; resize: vertical; }

.footer{
  background: var(--color-footer);
  color: #0f172a;
  border-top: var(--border-thick) solid #000;
  padding: var(--space-12) 0 var(--space-8);
}
.footer .grid{ align-items: start; }
.footer a{ color: var(--color-primary); }
.footer .copyright{
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--border-thick) solid #000;
  color: #334155;
}

.divider{
  height: var(--border-thick);
  background: #000;
  margin: var(--space-8) 0;
}

.table-wrap{ overflow-x: auto; border: var(--border-thick) solid #000; border-radius: var(--radius-soft); box-shadow: var(--shadow-solid); background: #fff; }
.table{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}
.table th, .table td{
  padding: 12px 14px;
  border-bottom: var(--border-thin) solid #000;
  text-align: left;
}
.table thead th{
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
}
.table tbody tr:hover td{ background: #f8fafc; }

blockquote{
  margin: 0;
  padding: var(--space-6);
  background: #fff;
  border: var(--border-thick) solid #000;
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-solid);
  font-style: italic;
}
blockquote footer{
  margin-top: var(--space-3);
  font-style: normal;
  font-weight: 800;
  font-family: var(--font-display);
}

code, pre{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
pre{
  padding: var(--space-6);
  background: #0b1220;
  color: #f1f5f9;
  border: var(--border-thick) solid #000;
  border-radius: var(--radius-soft);
  overflow-x: auto;
  box-shadow: var(--shadow-solid);
}

kbd{
  font-family: var(--font-display);
  border: var(--border-thick) solid #000;
  border-bottom-width: calc(var(--border-thick) + 2px);
  background: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: var(--shadow-soft);
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}


/* Cookie Banner Additional Styles for Tailwind */
.cookie-banner-hover-effect:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner-hover-effect:hover {
        transform: none;
    }
}