/* ===== Modern Webpage Design ===== */
:root{
  --fs-base: 16px; --fs-small: 14px;
  --fs-h1: 42px; --fs-h2: 32px; --fs-h3: 24px;
  --color-text:#1a1a1a; --color-muted:#666; --color-link:#2563eb;
  --color-border:#e5e7eb; --color-surface:#ffffff; --color-surface-alt:#f8fafc;
  --color-topbar:#002338;
  --color-accent:#2563eb; --color-accent-light:#dbeafe;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-size:var(--fs-base);line-height:1.7;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  background:linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  color:var(--color-text);
  min-height:100vh;
}

/* Containers */
.container,.wrap{width:100%;max-width:1200px;margin:0 auto;padding:40px 20px}

/* Header Navigation */
.topbar,.sitebar{
  background:var(--color-topbar);
  border-bottom:1px solid var(--color-border);
  box-shadow:var(--shadow-sm);
  position:sticky;
  top:0;
  z-index:100;
}
.topbar__inner,.sitebar-inner{
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:18px;
  font-weight:700;
  color:white;
}
.brand img{
  height:40px;
  width:auto;
}
.brand__name{font-weight:700;color:var(--color-text)}

/* Navigation Links */
.toplinks,.topnav{display:flex;gap:32px;align-items:center}
.toplinks a,.topnav a{
  font-size:16px;
  font-weight:500;
  color:white;
  text-decoration:none;
  padding:8px 16px;
  transition:all 0.2s ease;
}
.toplinks a:hover,.topnav a:hover{
  background:var(--color-accent-light);
  color:var(--color-accent);
}
.toplinks a[aria-current="page"],.topnav a[aria-current="page"]{
  background:var(--color-accent);
  color:white;
}

/* Breadcrumb */
.breadcrumb{
  font-size:var(--fs-small);
  color:var(--color-muted);
  margin:0 0 32px;
  padding:16px 0;
}
.breadcrumb a{color:var(--color-link);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

/* Cards and Sections */
.card,.header,.panel,.form{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  padding:48px 40px;
  margin-bottom:32px;
  box-shadow:var(--shadow-md);
}
.header{
  background:linear-gradient(135deg, var(--color-surface) 0%, #f1f5f9 100%);
  border:none;
  margin-bottom:48px;
}

/* Hero Section */
.hero-content{
  display:grid;
  grid-template-columns:1fr 400px;
  gap:48px;
  align-items:center;
}

.hero-text{
  text-align:left;
}

.hero-image{
  display:flex;
  align-items:stretch;
  justify-content:center;
  height:100%;
}

.hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right center;
}

/* Form Page Headers */
.form-header-content{
  display:block;
}

.form-header-text{
  text-align:left;
}

.form-header-image{
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.form-header-image img{
  width:100%;
  height:180px;
  object-fit:cover;
  object-position:center top;
  box-shadow:var(--shadow-md);
}

@media (max-width: 1024px) {
  .hero-content {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .hero-text {
    text-align: left;
  }
  .hero-text .cta {
    justify-content: flex-start;
  }
  .hero-image {
    order: -1;
  }
  .hero-image img {
    min-height: 200px;
    max-height: 250px;
  }
  
  .form-header-text {
    text-align: center;
  }
}

/* Typography */
h1,h2,h3{margin:0 0 16px;line-height:1.2;font-weight:700;color:var(--color-text)}
h1{font-size:var(--fs-h1);margin-bottom:24px}
h2{font-size:var(--fs-h2);margin-top:48px;margin-bottom:20px}
h3{font-size:var(--fs-h3);margin-top:32px;margin-bottom:16px}
.kicker{
  font-size:14px;
  color:var(--color-accent);
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-weight:600;
  margin-bottom:16px;
}
.sub{
  color:var(--color-muted);
  font-size:18px;
  line-height:1.6;
  margin-bottom:32px;
}

/* Text & lists */
p{margin:0 0 20px;line-height:1.7}
ol,ul{margin:0 0 20px 22px;padding:0}
li{margin:0 0 12px}
a{color:var(--color-link);text-decoration:none;transition:color 0.2s ease}
a:hover{color:var(--color-accent);text-decoration:underline}

/* Notice box */
.notice{
  display:grid;
  gap:8px;
  margin-top:24px;
  padding:20px 24px;
  border:1px solid var(--color-accent-light);
  background:linear-gradient(135deg, var(--color-accent-light) 0%, rgba(37, 99, 235, 0.05) 100%);
  border-left:4px solid var(--color-accent);
}

/* CTA Buttons */
.cta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:32px;
  justify-content:flex-start;
}

.header .cta{
  justify-content:flex-start;
}
.btn,.btn-alt{
  display:inline-block;
  padding:16px 32px;
  font-weight:600;
  font-size:16px;
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  transition:all 0.3s ease;
  box-shadow:var(--shadow-sm);
}
.btn{
  background:linear-gradient(135deg, var(--color-accent) 0%, #1d4ed8 100%);
  color:#fff;
  border-color:var(--color-accent);
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
  filter:brightness(1.05);
}
.btn-alt{
  background:#c53030;
  color:white;
  border-color:#c53030;
}
.btn-alt:hover{
  background:#b91c1c;
  border-color:#b91c1c;
  transform:translateY(-1px);
}

/* Forms */
label{
  display:block;
  margin:24px 0 8px;
  font-weight:600;
  font-size:16px;
  color:var(--color-text);
}
input[type="text"],input[type="email"],input[type="number"],select,textarea{
  width:100%;
  padding:16px 20px;
  border:2px solid var(--color-border);
  background:var(--color-surface);
  font:16px/1.5 inherit;
  transition:all 0.2s ease;
}
input[type="text"]:focus,input[type="email"]:focus,input[type="number"]:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--color-accent);
  box-shadow:0 0 0 3px var(--color-accent-light);
}
textarea{min-height:120px;resize:vertical}
.row{display:grid;gap:20px}
.row.two{grid-template-columns:1fr 1fr}
@media (max-width:720px){.row.two{grid-template-columns:1fr}}
fieldset{
  border:2px solid var(--color-border);
  padding:20px;
  margin-top:24px;
}
legend{
  padding:0 12px;
  color:var(--color-text);
  font-size:16px;
  font-weight:600;
}
.radios{display:flex;gap:24px;flex-wrap:wrap;margin-top:12px}
.submit-row{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap}
.success{
  display:none;
  margin-top:24px;
  padding:20px 24px;
  background:linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border:2px solid #10b981;
  color:#065f46;
  font-weight:500;
}

/* Contact Card */
.contact-card{
  background:#fafbfc;
  border:1px solid var(--color-border);
  padding:24px;
  margin-top:32px;
  box-shadow:var(--shadow-sm);
}
.contact-card h3{
  margin-top:0;
  font-size:18px;
}
.contact-card p{
  margin-bottom:0;
}
.contact-card a{
  color:var(--color-accent);
  text-decoration:none;
}
.contact-card a:hover{
  text-decoration:underline;
}

/* Footer */
.site-footer,.sitefoot{
  border-top:1px solid var(--color-border);
  color:var(--color-muted);
  font-size:var(--fs-small);
  margin-top:64px;
  padding-top:32px;
  text-align:center;
}
.site-footer__inner{
  text-align:center;
  color:var(--color-muted);
  font-size:var(--fs-small);
}

/* Responsive Design */
@media (max-width: 768px) {
  .container,.wrap { padding: 20px 16px; }
  .topbar__inner,.sitebar-inner { padding: 0 16px; }
  .card,.header,.panel,.form { padding: 32px 24px; }
  h1 { font-size: 32px; }
  h2 { font-size: 28px; }
  .toplinks,.topnav { gap: 16px; }
  .cta { flex-direction: column; align-items: center; }
  .btn,.btn-alt { width: 100%; max-width: 300px; text-align: center; }
}