:root { --green:#0F6A37; --green-light:#32A852; --charcoal:#0b1220; --off:#F9FAFB; --muted:#9AA4B2; }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;color:var(--off);background:var(--charcoal);line-height:1.6;overflow-x:hidden}
header{position:fixed;top:1.2rem;right:1.5rem;z-index:50;opacity:0;animation:fadeIn 1s ease forwards .35s}
nav{display:flex;align-items:center;gap:.6rem;background:rgba(255,255,255,0.08);backdrop-filter:blur(12px);border-radius:999px;padding:.45rem 1rem;border:1px solid rgba(255,255,255,0.2);box-shadow:0 4px 18px rgba(0,0,0,.3);white-space:nowrap}
nav a{color:#fff;text-decoration:none;font-weight:500;padding:.35rem .7rem;border-radius:999px;transition:background .2s,color .2s}
nav a:hover{background:rgba(255,255,255,0.12);color:var(--green-light)}
nav a.quote{background:linear-gradient(90deg,var(--green),var(--green-light));color:#fff;font-weight:600;padding:.35rem 1rem;box-shadow:0 4px 16px rgba(15,106,55,.45)}
nav a.quote:hover{box-shadow:0 6px 20px rgba(50,168,82,.6)}
.hero{position:relative;height:95vh;overflow:hidden;z-index:1}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.about,.contact{position:relative;z-index:2;background:rgba(17,24,39,0.7);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);border-radius:30px;box-shadow:0 8px 24px rgba(0,0,0,.45);max-width:980px;margin:-60px auto 0;padding:3rem 2.25rem;text-align:center;color:var(--off)}
.contact{margin-top:4rem;padding:4rem 2.25rem}
.about p{margin-top:1rem}
form{background:rgba(255,255,255,0.05);border-radius:20px;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.1);max-width:740px;margin:2rem auto 0;padding:2rem;color:white}
label{display:block;margin-top:1rem;font-weight:600;text-align:left}
.small{display:block;font-size:.95rem;opacity:.95;margin-top:.25rem;text-align:left;color:var(--muted)}
input,textarea{width:100%;padding:.9rem;border:1px solid rgba(255,255,255,0.28);border-radius:12px;margin-top:.35rem;font-size:1rem;background:rgba(255,255,255,0.08);color:white}
input:focus,textarea:focus{border-color:var(--green-light);outline:none}
.input-file{position:relative;margin-top:.6rem;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.input-file input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.file-btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(90deg,var(--green),var(--green-light));color:#fff;border:none;padding:.75rem 1.1rem;border-radius:999px;font-weight:600;cursor:pointer;box-shadow:0 4px 16px rgba(50,168,82,.35)}
.file-meta{font-size:.95rem;color:var(--off);opacity:.85}
button[type=submit]{background:linear-gradient(90deg,var(--green),var(--green-light));color:white;border:none;padding:.95rem 1.5rem;border-radius:999px;font-weight:600;cursor:pointer;margin-top:1.2rem}
textarea::placeholder{color:rgba(220,231,241,0.9)}
footer{text-align:center;color:var(--muted);padding:2.5rem 1rem;margin-top:3rem;font-size:.95rem}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}


/* Slogan sizing */
.slogan{width:100%;max-width:820px;height:auto;display:block;margin:0 auto}
@media (max-width: 900px){ .slogan{max-width:700px} }
@media (max-width: 600px){ .slogan{max-width:520px} }


/* v44-style reveal fade-in */
body.js .reveal{opacity:0;transform:translateY(40px)}
body.js .reveal.visible{opacity:1;transform:translateY(0);transition:opacity .9s ease, transform .9s ease}


/* Slogan per-word fade */
.slogan .w{opacity:0;transform:translateX(-24px)}
@keyframes wordFade{0%{opacity:0;transform:translateX(-24px)}100%{opacity:1;transform:translateX(0)}}
#about.visible .slogan .w1{animation:wordFade 1.2s cubic-bezier(.25,1,.5,1) .1s forwards}
#about.visible .slogan .w2{animation:wordFade 1.2s cubic-bezier(.25,1,.5,1) 1.0s forwards}
#about.visible .slogan .w3{animation:wordFade 1.2s cubic-bezier(.25,1,.5,1) 1.9s forwards}

.slogan .desktop{display:inline}
.slogan .mobile{display:none}
@media (max-width: 600px){
  .slogan .desktop{display:none}
  .slogan .mobile{display:inline}
}

#about{padding-top:2rem}
.about .slogan{margin-top:-24px}

/* tight tops */
.about{padding:2rem 2.25rem 3rem !important}
#services.about{padding:2rem 2.25rem 3rem !important}
.contact{padding:2rem 2.25rem 3.25rem !important}


/* Section spacing fixes: keep About hugging hero, but ensure equal gaps for Services and Contact */
#services.about{ margin: 3rem auto 0 !important; }
#contact{ margin: 3rem auto 0 !important; }



/* Mobile-only phone action */
nav a.phone{display:none}
@media (max-width: 768px){
  nav a.phone{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;
    background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);padding:0;transition:background .2s, transform .2s}
  nav a.phone:hover{background:rgba(255,255,255,0.18);transform:translateY(-1px)}
  nav a.phone svg{width:20px;height:20px;stroke:#1E6FB8}
}
/* Ensure the gradient CTA remains prominent next to the phone button on mobile */
@media (max-width: 768px){
  nav a.quote{padding:.45rem 1rem}
}



/* --- Mobile nav centering & overflow fix --- */
@media (max-width: 768px){
  header{top:.8rem;left:50%;right:auto;transform:translateX(-50%);}
  nav{justify-content:center;gap:.4rem;padding:.4rem .6rem;max-width:94vw;overflow:hidden;}
  nav a{padding:.35rem .6rem;font-size:.95rem;}
}

/* --- Phone action visual emphasis --- */
@media (max-width: 768px){
  nav a.phone{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;
    background:linear-gradient(135deg,#1E6FB8,#66B8FF); border:0; padding:0; box-shadow:0 4px 14px rgba(30,111,184,.35);}
  nav a.phone svg{width:22px;height:22px;stroke:#fff;}
}



/* --- Mobile nav: true centered header bar, no overflow --- */
@media (max-width: 768px){
  /* Make header span full width and center its contents */
  header{position:fixed; top:.8rem; left:0; right:0; transform:none; display:flex; justify-content:center; z-index:50;}
  /* Center the pill nav and prevent spill */
  nav{margin:0 auto; max-width:calc(100vw - 1.5rem); width:auto; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:.45rem; padding:.4rem .6rem; box-sizing:border-box; flex-wrap:nowrap;}
  nav a{padding:.35rem .6rem; font-size:.95rem; white-space:nowrap;}
  /* Phone button sizing keeps bar compact */
  nav a.phone{width:44px; height:44px;}
}



/* Mobile: let About peek into view so users scroll */
@media (max-width: 768px){
  .hero{ height: 88vh; }           /* was 95vh */
  .about{ margin-top: -40px; }     /* was -60px desktop; shows a sliver on mobile */
}



/* Mobile: show About content immediately so the peek reveals text,
   but only trigger the slogan animation when scrolled (on .visible) */
@media (max-width: 768px){
  body.js #about.reveal{opacity:1; transform:none;} /* no fade gate on About when peeking */
  /* Ensure the actual per-word animation still waits for scroll:
     it's keyed off #about.visible .slogan .w* which remains unchanged */
}



/* Page content card for better readability on dark backgrounds */
.page-card {
  max-width: 860px;
  margin: 4.5rem auto 0rem; /* bottom gap removed so footer matches homepage spacing */
  padding: clamp(1.9rem, 3vw, 2.6rem) clamp(1.9rem, 3vw, 2.9rem);
  border-radius: 2rem;
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.95);
}

.page-card h1,
.page-card h2,
.page-card h3,
.page-card p,
.page-card li {
  color: #f9fafb;
  line-height: 1.7;
}

/* Underlined section headings with clear vertical spacing */
.page-card h1 {
  font-size: clamp(1.75rem, 3vw, 2rem);
  margin-bottom: 1.4rem;
}

.page-card h2,
.page-card h3 {
  margin-top: 2.4rem;
  margin-bottom: 0.75rem;
  text-decoration: underline;
}


/* Top-left "Return to home" wrapper */
.return-home {
  max-width: 860px;
  margin: 2.5rem auto -2rem;
  padding: 0 0.25rem;
}

.return-home a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.9rem;
}

.return-home a .return-home-text {
  text-decoration: underline;
}

.return-home a:hover .return-home-text {
  text-decoration: underline;
  filter: brightness(1.06);
}

/* Logo row for internal page cards */
.page-card .logo-row {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.page-card .page-logo {
  max-width: 260px;
  height: auto;
}

@media (max-width: 640px) {
  .page-card .page-logo {
    max-width: 210px;
  }
}

/* Visually hidden text for accessibility/SEO */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Footer links: white + underlined */
#site-footer a {
  color: #ffffff;
  text-decoration: underline;
}

#site-footer a:hover {
  text-decoration: underline;
  filter: brightness(1.06);
}

/* Internal page links: white + underlined by default */
.page-card a {
  color: #ffffff;
  text-decoration: underline;
}

.page-card a:hover {
  text-decoration: underline;
  filter: brightness(1.06);
}



/* Tailored Assistance: contact form layout enhancements v5 */
.contact form {
  text-align: left;
}

.contact form .form-group {
  margin-top: 2rem; /* clearer separation between sections */
}

/* keep the contact number row gap consistent with other inputs */
.contact form .form-row.form-group {
  margin-top: 0;
}

/* add a small gap between section label and first accordion */
.contact form .form-group label + .service-group {
  margin-top: 1.25rem;
}

.contact form .form-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.choice-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.choice-inline span {
  white-space: nowrap;
}

.choice-inline input[type="radio"],
.choice-inline input[type="checkbox"] {
  margin: 0;
}

.service-group {
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.35);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.service-group summary {
  cursor: pointer;
  font-weight: 600;
}

.service-group-inner {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.form-group .form-label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

/* centre the submit button row */
.contact form .submit-row {
  margin-top: 14px;
  text-align: center;
}

.contact form .submit-row .btn {
  margin: 0 auto;
}


/* Tailored Assistance: mobile alignment + submit text size */
.contact form .form-row,
.contact form .choice-inline,
.contact form .choice-inline span {
  text-align: left;
}

.contact form .choice-inline {
  justify-content: flex-start;
}

/* Make Submit text slightly larger, especially noticeable on mobile */
.contact form .submit-row .btn {
  font-size: 1.05rem;
  font-weight: 600;
}


/* Tailored Assistance: force left alignment for Safari */
.contact form .form-row,
.contact form .choice-inline,
.contact form .choice-inline span {
  text-align: left !important;
}

.contact form .choice-inline {
  justify-content: flex-start !important;
}

/* prevent layout from stretching text away from radios/checkboxes */
.contact form .choice-inline {
  width: auto;
  max-width: 100%;
}

/* Larger submit label text without changing button size */
.contact form .submit-row .btn {
  font-size: 1.15rem;
  font-weight: 600;
}