/* darker sand = better contrast for accessibility */
:root {
  --blue: #58aef5;
  --sand: #d9a35a;
  --dark: #14222e;
  --light: #ffffff;
}

*{box-sizing:border-box} 

body{ margin:0; font-family: Arial, Helvetica, sans-serif; color: var(--dark); background:#fff; line-height:1.6; } 

.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } 

.skip-link:focus{ position:static; width:auto; height:auto; background:var(--sand); padding:.5rem; } 

header{ background: linear-gradient(180deg, var(--blue) 0%, #7bc3fb 100%); color:#fff; padding: 2.2rem 1rem 1.2rem; text-align:center; border-bottom: 6px solid var(--sand); } 

header h1{ margin:.2rem 0 .4rem; font-size:2.2rem; } 

 header p { margin: 0;color: var(--dark); }

nav{ background:#ffffff; border-bottom:1px solid #e9eef3; } 

nav ul{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; justify-content:center; } 

nav li{ margin:.2rem .5rem; } 

nav a{ display:block; padding:.7rem 1rem; text-decoration:none; color:var(--dark); border-radius:999px; border:1px solid transparent; } 

nav a:hover, nav a[aria-current="page"]{ background: var(--sand); border-color:#e0cda6; } 

.container{ max-width:1100px; margin:0 auto; padding:1rem; } 

.hero{ margin:1rem auto 0; overflow:hidden; border-radius:16px; border:1px solid #e9eef3; } 

.hero img{ width:100%; height:auto; display:block; } 

.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:1rem; } 

.card{ border:1px solid #e9eef3; border-radius:16px; overflow:hidden; background:#fff; box-shadow: 0 4px 10px rgba(20,34,46,0.05); } 

.card img{ display:block; width:100%; height:200px; object-fit:cover; } 

.card .pad{ padding:1rem; } 

form{ background:#fff; border:1px solid #e9eef3; border-radius:16px; padding:1rem; max-width:680px; box-shadow: 0 4px 10px rgba(20,34,46,0.05); } 

label{ display:block; margin:.6rem 0 .2rem; } 

input[type="text"], input[type="email"], textarea{ width:100%; padding:.7rem; border:1px solid #cfd8e3; border-radius:10px; font-size:1rem; } 

textarea{ min-height:140px; } 

button{ margin-top: .8rem; padding:.8rem 1.2rem; background:var(--blue); color:#fff; border:none; border-radius:999px; cursor:pointer; font-weight:bold; } 

button:hover{ filter:brightness(0.95); } 

footer{ margin-top:2rem; background:#fafafa; border-top:1px solid #e9eef3; color:#4c5c6b; } 

footer .container{ padding:1rem; text-align:center; } 

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