/* --------------------------------------------------
   RESET & GLOBAL
-------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Source Sans Pro',Arial,Helvetica,sans-serif;color:#333;background:#fafafa;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{text-decoration:none;color:var(--clr-primary-600);transition:color .25s ease}
a:hover{color:var(--clr-accent-500)}
ul{list-style:none}

/* --------------------------------------------------
   THEME VARIABLES
-------------------------------------------------- */
:root{
  /* Neutrals */
  --clr-neutral-100:#ffffff;
  --clr-neutral-200:#f5f5f5;
  --clr-neutral-300:#e0e0e0;
  --clr-neutral-800:#222222;
  --clr-neutral-900:#111111;

  /* Primary & Accents */
  --clr-primary-600:#025373;
  --clr-primary-700:#013a52;
  --clr-accent-500:#ff7d00;

  /* Gradients */
  --gradient-primary:linear-gradient(135deg,var(--clr-primary-600),var(--clr-primary-700));
  --gradient-accent:linear-gradient(135deg,var(--clr-accent-500),#ffa733);

  /* Shadows */
  --shadow-sm:0 2px 4px rgba(0,0,0,0.1);
  --shadow-lg:0 10px 25px rgba(0,0,0,0.15);

  /* Radius */
  --radius-sm:6px;
  --radius-lg:12px;

  /* Transition */
  --transition-base:all .35s ease;
}

/* --------------------------------------------------
   TYPOGRAPHY
-------------------------------------------------- */
h1,h2,h3,h4{
  font-family:'Playfair Display','Times New Roman',serif;
  color:var(--clr-neutral-900);
  line-height:1.2;
  text-align:center;
  margin-bottom:.75em;
  text-shadow:1px 1px 3px rgba(0,0,0,.15);
}
h1{font-size:2.5rem;color:#fff}
h2{font-size:2rem}
h3{font-size:1.5rem}

/* --------------------------------------------------
   UTILITIES
-------------------------------------------------- */
.container{width:90%;max-width:1200px;margin-inline:auto}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.is-two-thirds{width:66%}
.text-center{text-align:center}

/* --------------------------------------------------
   BUTTONS
-------------------------------------------------- */
.btn,
button,
input[type='submit']{
  font-family:inherit;
  display:inline-block;
  padding:.75rem 2rem;
  background:var(--gradient-accent);
  color:#fff;
  border:none;
  border-radius:var(--radius-sm);
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:var(--transition-base);
}
.btn-primary{background:var(--gradient-primary)}
.btn:hover,
button:hover,
input[type='submit']:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}

/* --------------------------------------------------
   HEADER
-------------------------------------------------- */
.main-header{
  position:fixed;top:0;left:0;width:100%;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(10px);
  z-index:999;
  box-shadow:var(--shadow-sm);
}
.main-nav ul{display:flex;gap:1.5rem}
.main-nav a{font-weight:600;padding:1.25rem 0;color:var(--clr-neutral-800)}
.main-nav a:hover{color:var(--clr-accent-500)}
.burger{display:none;background:none;border:none;flex-direction:column;gap:5px;cursor:pointer}
.burger span{width:24px;height:3px;background:var(--clr-neutral-900);transition:var(--transition-base)}

/* --------------------------------------------------
   HERO
-------------------------------------------------- */
.hero{
  height:100vh;
  display:flex;
  align-items:center;
  color:#fff;
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
  position:relative;
}
.hero::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.4));
}
.hero-content{
  position:relative;
  z-index:1;
  text-align:center;
  width:100%;
}
.stats-widget{
  display:flex;justify-content:center;gap:2rem;margin:2rem 0;
  text-shadow:1px 1px 2px rgba(0,0,0,.6);
}
.stats-widget .stat{font-size:1.25rem}
.stats-widget strong{display:block;font-size:2rem}

/* --------------------------------------------------
   SECTIONS
-------------------------------------------------- */
.section{padding:80px 0}
.section.bg-light{background:var(--clr-neutral-200)}
.section-title{margin-bottom:2rem}

/* --------------------------------------------------
   CARDS & GRIDS
-------------------------------------------------- */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
}

.card{
  background:var(--clr-neutral-100);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:var(--transition-base);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-image{width:100%;height:220px;overflow:hidden;border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}
.card-image img{width:100%;height:100%;object-fit:cover;margin:0 auto}
.card-content{padding:1.5rem}

/* --------------------------------------------------
   TIMELINE
-------------------------------------------------- */
.timeline{border-left:3px solid var(--clr-primary-600);margin-top:2rem;padding-left:1.5rem}
.timeline-item{position:relative;margin-bottom:1.5rem}
.timeline-item::before{
  content:'';position:absolute;left:-0.55rem;top:0;
  width:1rem;height:1rem;border-radius:50%;
  background:var(--clr-accent-500);
}
.timeline-date{font-weight:700;color:var(--clr-primary-700);margin-right:.5rem}

/* --------------------------------------------------
   EXTERNAL LINKS
-------------------------------------------------- */
.external-links li{margin:.75rem 0}
.external-links a{font-weight:600}
.external-links a::after{content:' ↗';transition:var(--transition-base)}
.external-links a:hover::after{margin-left:.25rem}

/* --------------------------------------------------
   CONTACT FORM
-------------------------------------------------- */
.contact-form{display:grid;gap:1.25rem}
.contact-form label{display:flex;flex-direction:column;font-weight:600;color:var(--clr-neutral-900)}
.contact-form input,
.contact-form textarea{
  padding:.75rem;
  border:2px solid var(--clr-neutral-300);
  border-radius:var(--radius-sm);
  font-family:inherit;
  resize:vertical;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.contact-form input:focus,
.contact-form textarea:focus{outline:none;border-color:var(--clr-primary-600);box-shadow:0 0 0 3px rgba(2,83,115,.25)}

/* --------------------------------------------------
   FOOTER
-------------------------------------------------- */
.main-footer{background:var(--clr-neutral-900);color:#eee;padding:2rem 0;margin-top:4rem}
.main-footer a{color:#eee;text-decoration:underline}
.main-footer a:hover{color:var(--clr-accent-500)}
.social a{margin:0 .5rem}

/* --------------------------------------------------
   SUCCESS PAGE
-------------------------------------------------- */
.page-success{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  background:var(--gradient-primary);
  color:#fff;
}

/* --------------------------------------------------
   PRIVACY & TERMS PAGES
-------------------------------------------------- */
.page-legal{padding-top:100px}

/* --------------------------------------------------
   PARALLAX SCROLL (simple)
-------------------------------------------------- */
@supports (background-attachment:fixed){
  .parallax{background-attachment:fixed}
}

/* --------------------------------------------------
   MEDIA QUERIES
-------------------------------------------------- */
@media(max-width:960px){
  h1{font-size:2rem}
  .is-two-thirds{width:90%}
  .main-nav{position:fixed;top:0;right:-100%;height:100vh;width:70%;background:#fff;flex-direction:column;align-items:flex-start;padding:5rem 2rem;transition:var(--transition-base)}
  .main-nav ul{flex-direction:column;gap:1.25rem}
  .burger{display:flex}
  .main-nav.open{right:0}
  .hero{height:auto;padding:160px 0 120px}
}
.burger{
  display: none;
}