:root{
  --ink:#111111;
  --bg:#ffffff;
  --alt:#f6f6f6;
  --accent:#111111;
  --maxw:1100px;
  --radius:12px;

  /* new */
  --header-h-desktop: 72px;
  --header-h-mobile: 56px;
}


*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

.container{max-width:var(--maxw);margin-inline:auto;padding:clamp(16px,3vw,24px)}
a{color:var(--ink)}
.visually-hidden{
  position:absolute !important;
  height:1px;width:1px;
  overflow:hidden;clip:rect(1px,1px,1px,1px);
  white-space:nowrap;border:0;padding:0;margin:-1px;
}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;background:#fff;border:1px solid #000;padding:6px;z-index:1000}

/* Header overlay */
.site-header{
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,0.85); /* a touch more opaque */
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.header-inner{
  height: var(--header-h-desktop);
  padding: 0 24px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}

/* push everything down so it does not sit under the header */
body{ padding-top: var(--header-h-desktop); }

@media (max-width: 720px){
  .header-inner{ height: var(--header-h-mobile); padding: 0 16px; }
  body{ padding-top: var(--header-h-mobile); }
}


/* Nav */
.nav-toggle{display:none}
.nav-menu{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.nav-menu a{text-decoration:none;padding:8px 10px;border-radius:8px}
.nav-menu a:hover{background:#eeeeee}

/* HERO */
.hero{
  position: relative;
  height: clamp(480px, 60vh, 620px); /* shallower, laptop friendly */
  min-height: 420px;
}
.hero-media{
  position:absolute; inset:0;
  background: url("assets/hero-desktop.jpg") no-repeat center;
  background-size: cover;
  background-position: center 30%; /* nudge focal point up a bit */
}

/* Swap to mobile image */
@media (max-width: 720px){
  .hero{ height: 520px; min-height: 440px; }
  .hero-media{ background-image: url("assets/hero-mobile.jpg"); background-position: center 20%; }
}

/* Optional: divider for first section */
.section{ padding-block: clamp(36px,7vw,40px); }
.section:first-of-type{ border-top: 1px solid #eee; }

/* Sections */
.section{padding-block: clamp(36px,7vw,40px)}
.section-alt{background:var(--alt)}

.site-footer{border-top:1px solid #eee;background:#fff}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}

/* Mobile nav */
@media (max-width: 720px){
  .nav-toggle{
    display:inline-flex;align-items:center;
    border:1px solid #ddd;background:#fff;border-radius:8px;padding:8px 10px
  }
  .nav-menu{display:none;flex-direction:column;background:#fff;border:1px solid #eee;border-radius:12px;padding:8px;position:absolute;right:16px;top:56px}
  .nav-menu.show{display:flex}
}
.brand-logo {
  height: 40px;   /* adjust for size you want */
  width: auto;
  display: block;
}
/* Brand logo sizing */
.brand-logo{
  height: calc(var(--header-h-desktop) - 16px); /* fit inside header with a little padding */
  max-height: 56px;
  width: auto;
  display: block;
}

/* Keep header tidy even if an image tries to overflow */
.header-inner{ overflow: hidden; }

/* Make sure the brand area doesn't squish weirdly */
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }

@media (max-width: 720px){
  .brand-logo{
    height: calc(var(--header-h-mobile) - 12px);
    max-height: 44px;
  }
}
#purpose {
  text-align: center;
}

#purpose ul {
  list-style-position: inside; /* keeps bullets aligned under text */
  padding-left: 0;
}

#purpose li {
  margin-bottom: 8px;
  /* Button styles - keep at bottom */
}
.btn {
  display: block; /* forces new line */
  background-color: #f2b64e;
  color: #000000;
  text-transform: uppercase;
  font-weight: 800;
  padding: 14px 14px;
  border-radius: 0;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.5px;
  transition: background-color 0.2s ease;
  max-width: fit-content;
  margin: 16px auto 4;
}

.btn:hover {
  background-color: #e5aa48;
}

form {
  max-width: 500px;
  margin: 0 auto;
  text-align: center; /* centres all text in form */
}

.form-group {
  margin-bottom: 16px;
  text-align: left; /* keeps labels aligned left inside centred form */
}

label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

input, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  font: inherit;
}

.btn {
  display: block; /* forces new line */
  background-color: #f2b64e;
  color: #000000;
  text-transform: uppercase;
  font-weight: 800;
  padding: 14px 24px;
  border-radius: 0;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.5px;
  transition: background-color 0.2s ease;
  border: none; /* removes black outline */
  cursor: pointer;
}

.btn:hover {
  background-color: #e5aa48;
}

#why-choose-us {
  text-align: center;
}

#why-choose-us h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

#why-choose-us p {
  max-width: 800px;
  margin: 0 auto 16px;
}

#why-choose-us ul {
  list-style: none;
  padding: 0;
  margin: 20px auto;
  max-width: 600px;
  text-align: left; /* keeps bullet points easy to read */
}

#why-choose-us ul li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 20px;
}

#why-choose-us ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 18px;
}

}

.why-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.why-content {
  flex: 1;
}

.why-bullets {
  list-style-position: inside;
  padding-left: 0;
}

.why-bullets li {
  margin-bottom: 10px;
}


  }


}

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

/* Desktop two-column layout */
@media (min-width: 721px) {
  .why-section {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }

  .why-image {
    flex: 0 0 40%; /* Image takes up 40% of row */
  }

  .why-content {
    flex: 1;
    text-align: left; /* Override site-wide centered text */
  }
}

/* Two-column layout for the WHY section */
.why-row {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.why-image {
  flex: 0 0 40%; /* image takes 40% on desktop */
}
.why-image img {
  width: 100%;
  height: auto;
  display: block;
}

.why-content {
  flex: 1;
  text-align: left; /* ensure left aligned on desktop */
}

.why-bullets {
  list-style-position: inside;
  padding-left: 0;
}
.why-bullets li { margin-bottom: 10px; }

/* Stack on mobile */
@media (max-width: 720px) {
  .why-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .why-content { text-align: center; }
}
/* --- WHY section two-column layout --- */
.why-row{
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.why-image{ flex: 0 0 40%; }
.why-image img{ width: 100%; height: auto; display: block; }

.why-content{ flex: 1; text-align: left; }

.why-bullets{ list-style-position: inside; padding-left: 0; }
.why-bullets li{ margin-bottom: 10px; }

/* Stack on mobile */
@media (max-width: 720px){
  .why-row{ flex-direction: column; align-items: center; text-align: center; }
  .why-content{ text-align: center; }
}
/* Tighten the space under the button in the PURPOSE section */
#purpose p:last-child {            /* the <p> that wraps your button */
  margin-bottom: 0;                /* remove paragraph bottom margin */
}

#purpose {                          /* reduce this section's bottom padding */
  padding-bottom: 16px;             /* try 0–24px to taste */
}

/* Also reduce the top padding of the next section to close the gap */
#why {
  padding-top: 16px;                /* try 8–24px */
}
.btn {
  display: inline-block;
  background-color: #f2b64e;
  color: #000000;
  text-transform: uppercase;
  font-weight: 800;
  padding: 14px 24px;
  border-radius: 0;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.5px;
  transition: background-color 0.2s ease;
}

#purpose .btn {
  display: block;           /* make it take its own line */
  margin: 16px auto 0;      /* auto left/right keeps it centred */
}

.btn:hover {
  background-color: #e5aa48;
}
#why-choose-us {
  margin-top: 0;
  padding-top: 20px; /* adjust to taste */
}