/* Frontline Equality exact-style homepage */
:root{
  --navy:#062654;
  --deep:#021b3d;
  --teal:#008f94;
  --teal2:#05aeb3;
  --text:#0a2b5c;
  --muted:#314a66;
  --pale:#f6f9fb;
  --border:#dce5ea;
  --white:#fff;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
  background:#fff;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{
  width:min(1180px, calc(100% - 56px));
  margin:0 auto;
}

/* Header */
.header{
  background:#fff;
  height:68px;
  border-bottom:1px solid #e5ecef;
  display:flex;
  align-items:center;
  position:sticky;
  top:0;
  z-index:10;
}
.nav{
  display:flex;
  align-items:center;
  height:68px;
  gap:22px;
}
.logo img{
  width:240px;
  height:auto;
}
.links{
  flex:1;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:24px;
  font-weight:700;
  font-size:13px;
}
.links a{
  height:68px;
  display:flex;
  align-items:center;
  border-bottom:3px solid transparent;
}
.links a.active{border-bottom-color:var(--teal)}
.top-button{
  background:var(--navy);
  color:white;
  padding:14px 24px;
  border-radius:5px;
  font-weight:700;
  margin-left:14px;
}

/* Hero */
.hero{
  position:relative;
  min-height:500px;
  overflow:hidden;
  background:linear-gradient(90deg,#fff 0%, #f1f7f8 100%);
}
.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:45% 55%;
  align-items:center;
  gap:28px;
  min-height:500px;
  padding:48px 0 72px;
}
.hero-copy h1{
  margin:0 0 24px;
  font-size:52px;
  line-height:1.08;
  letter-spacing:-1.5px;
  color:var(--navy);
  font-weight:800;
}
.hero-copy h1 span{
  color:var(--teal);
}
.hero-copy p{
  font-size:16px;
  line-height:1.6;
  margin:0 0 14px;
  color:var(--text);
  max-width:520px;
}
.buttons{
  display:flex;
  gap:18px;
  margin-top:24px;
}
.btn{
  min-width:130px;
  padding:13px 20px;
  border-radius:5px;
  text-align:center;
  font-weight:700;
  font-size:15px;
}
.btn.dark{
  background:var(--navy);
  color:#fff;
}
.btn.light{
  background:#fff;
  color:var(--teal);
  border:1px solid var(--teal);
}
.hero-visual{
  align-self:stretch;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
}
.hero-visual img{
  width:100%;
  max-height:440px;
  object-fit:cover;
  object-position:center;
}
.wave{
  position:absolute;
  right:-110px;
  bottom:-60px;
  width:78%;
  height:180px;
  border-radius:50% 0 0 0;
  transform:rotate(-5deg);
  z-index:3;
}
.wave.teal{
  background:var(--teal2);
  bottom:-35px;
  height:170px;
}
.wave.navy{
  background:linear-gradient(90deg,#062654,#031c40);
  bottom:-92px;
  height:175px;
}

/* Value band */
.value-band{
  background:linear-gradient(90deg,#021b3d,#062654);
  color:white;
}
.value-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  min-height:150px;
}
.value{
  text-align:center;
  padding:31px 22px 28px;
  border-right:1px solid rgba(255,255,255,.28);
}
.value:last-child{border-right:none}
.value-icon{
  color:var(--teal2);
  font-size:30px;
  margin-bottom:10px;
}
.value h3{
  font-size:18px;
  line-height:1.2;
  margin:0 0 7px;
  color:white;
}
.value p{
  margin:0;
  font-size:14px;
  line-height:1.45;
  color:rgba(255,255,255,.88);
}

/* Welcome */
.welcome{
  padding:42px 0 50px;
  background:#fff;
}
.welcome-grid{
  display:grid;
  grid-template-columns:40% 60%;
  gap:56px;
  align-items:center;
}
.mini{
  color:var(--teal);
  text-transform:uppercase;
  font-weight:800;
  font-size:13px;
  letter-spacing:.6px;
  margin:0 0 4px;
}
.welcome h2,
.services h2{
  font-size:31px;
  margin:0 0 20px;
  line-height:1.1;
  color:var(--navy);
}
.welcome h2{
  color:var(--teal);
}
.welcome-copy p:not(.mini){
  font-size:14px;
  line-height:1.55;
  color:var(--text);
  margin:0 0 16px;
  max-width:430px;
}
.about-button{
  display:inline-block;
  background:var(--teal);
  color:white;
  padding:13px 28px;
  border-radius:5px;
  margin-top:8px;
  font-weight:700;
}
.training-image{
  border-radius:9px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(6,38,84,.08);
}
.training-image img{
  width:100%;
  height:270px;
  object-fit:cover;
}

/* Services */
.services{
  padding:34px 0 56px;
  background:#f5f8fb;
}
.services-head{
  display:grid;
  grid-template-columns:40% 60%;
  gap:56px;
  align-items:end;
  margin-bottom:18px;
}
.services-intro p{
  font-size:15px;
  line-height:1.45;
  color:var(--text);
  margin:0 0 5px;
  max-width:560px;
}
.services-intro a{
  font-size:15px;
  font-weight:700;
  color:var(--teal);
}
.cards{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}
.cards article{
  background:white;
  border:1px solid var(--border);
  border-radius:8px;
  padding:23px 16px 25px;
  min-height:218px;
  text-align:center;
  box-shadow:0 8px 18px rgba(6,38,84,.04);
}
.circle{
  margin:0 auto 16px;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#eff5f7;
  color:var(--teal);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
}
.cards h3{
  color:var(--navy);
  font-size:17px;
  line-height:1.16;
  margin:0 0 12px;
}
.cards p{
  color:var(--text);
  font-size:13px;
  line-height:1.45;
  margin:0;
}

/* CTA */
.cta{
  background:linear-gradient(90deg,#00848d,#062654);
  color:white;
}
.cta-inner{
  min-height:88px;
  display:grid;
  grid-template-columns:120px 1fr 260px;
  gap:10px;
  align-items:center;
}
.chat-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
}
.cta h2{
  font-size:24px;
  line-height:1.3;
  color:white;
  margin:0;
}
.cta-btn{
  justify-self:end;
  border:1px solid rgba(255,255,255,.75);
  color:white;
  border-radius:5px;
  padding:13px 36px;
  font-weight:700;
}

/* Footer */
.footer{
  background:linear-gradient(90deg,#062654,#021b3d);
  color:white;
  padding:34px 0 18px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr .9fr 1fr 1fr;
  gap:42px;
}
.footer img{
  width:210px;
  margin-bottom:18px;
}
.footer h4{
  font-size:18px;
  margin:0 0 14px;
  color:white;
}
.footer p,
.footer a{
  display:block;
  color:rgba(255,255,255,.88);
  font-size:14px;
  line-height:1.45;
  margin:0 0 8px;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14);
  margin-top:24px;
  padding-top:15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:rgba(255,255,255,.82);
}
.footer-bottom p,
.footer-bottom a,
.footer-bottom span{
  font-size:12px;
  color:rgba(255,255,255,.82);
  margin:0;
}
.footer-bottom div{
  display:flex;
  gap:9px;
}

/* Responsive */
@media (max-width:1000px){
  .links{display:none}
  .hero-inner,
  .welcome-grid,
  .services-head{
    grid-template-columns:1fr;
  }
  .hero-copy h1{font-size:44px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .container{width:min(100% - 28px,1180px)}
  .header{height:auto}
  .nav{height:auto;padding:12px 0}
  .top-button{display:none}
  .logo img{width:205px}
  .hero-inner{padding:35px 0 70px}
  .hero-copy h1{font-size:38px}
  .value-grid{grid-template-columns:1fr}
  .value{border-right:none;border-bottom:1px solid rgba(255,255,255,.2)}
  .value:last-child{border-bottom:none}
  .cards{grid-template-columns:1fr}
  .cta-inner{grid-template-columns:1fr;gap:18px;padding:22px 0}
  .cta-btn{justify-self:start}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}


/* Why section */
.why-section{
  padding:54px 0 58px;
  background:#fff;
}
.why-heading{
  max-width:820px;
  margin-bottom:24px;
}
.why-heading h2{
  font-size:34px;
  line-height:1.15;
  margin:0 0 12px;
  color:var(--navy);
}
.why-heading p:not(.mini){
  font-size:16px;
  color:var(--text);
  line-height:1.55;
  margin:0;
}
.why-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.why-cards article{
  background:#f7fafb;
  border:1px solid var(--border);
  border-radius:10px;
  padding:24px;
  box-shadow:0 8px 18px rgba(6,38,84,.04);
}
.why-cards h3{
  margin:0 0 10px;
  color:var(--navy);
  font-size:20px;
}
.why-cards p{
  margin:0;
  font-size:14px;
  line-height:1.55;
  color:var(--text);
}

@media (max-width:1000px){
  .why-cards{grid-template-columns:1fr}
}


/* Legal pages */
.legal-page{
  background:#f7fafb;
  padding:60px 0;
  min-height:60vh;
}
.legal-content{
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:42px;
  box-shadow:0 8px 18px rgba(6,38,84,.04);
}
.legal-content h1{
  margin:0 0 18px;
  font-size:40px;
  color:var(--navy);
}
.legal-content h2{
  font-size:24px;
  margin:28px 0 10px;
  color:var(--navy);
}
.legal-content p,
.legal-content li{
  font-size:16px;
  color:var(--text);
  line-height:1.65;
}
.legal-footer{
  border-top:0;
  margin-top:0;
}


/* CTA and footer logo fixes */
.cta-inner{
  min-height:104px;
  display:grid;
  grid-template-columns:86px 1fr 250px;
  gap:24px;
  align-items:center;
}
.chat-icon{
  justify-self:center;
}
.cta h2{
  display:block;
  max-width:760px;
  font-size:24px;
  line-height:1.25;
  margin:0;
  padding:0;
}
.cta-btn{
  align-self:center;
}
.footer-clean-logo{
  width:245px;
  max-width:100%;
  margin-bottom:18px;
}
.footer-clean-logo img{
  width:245px;
  height:auto;
  margin:0;
  object-fit:contain;
}
.footer-about > img{
  display:none;
}

@media (max-width:700px){
  .cta-inner{
    grid-template-columns:1fr;
    min-height:auto;
    padding:22px 0;
  }
  .chat-icon{
    justify-self:start;
  }
  .cta h2{
    font-size:26px;
  }
}


/* Contact form */
.contact-form-section{
  background:#f7fafb;
  padding:56px 0;
}
.contact-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:42px;
  align-items:start;
}
.contact-copy h2{
  font-size:34px;
  line-height:1.15;
  margin:0 0 12px;
  color:var(--navy);
}
.contact-copy p:not(.mini){
  font-size:16px;
  line-height:1.6;
  color:var(--text);
}
.contact-copy a{
  color:var(--teal);
  font-weight:700;
}
.contact-form{
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:26px;
  box-shadow:0 8px 18px rgba(6,38,84,.05);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.contact-form label{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:14px;
  font-weight:700;
  color:var(--navy);
}
.contact-form .full{
  grid-column:1 / -1;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:6px;
  padding:12px;
  font:inherit;
  color:var(--text);
  background:#fff;
}
.contact-form textarea{
  resize:vertical;
}
.contact-form button{
  grid-column:1 / -1;
  justify-self:start;
  background:var(--navy);
  color:#fff;
  border:0;
  border-radius:6px;
  padding:13px 28px;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
}
.hidden{
  display:none;
}

@media (max-width:800px){
  .contact-grid,
  .contact-form{
    grid-template-columns:1fr;
  }
}


/* Multi-page additions */
.page-hero{
  background:linear-gradient(90deg,#fff 0%, #f1f7f8 100%);
  padding:68px 0 62px;
  border-bottom:1px solid var(--border);
}
.page-hero h1{
  margin:0 0 16px;
  font-size:52px;
  line-height:1.05;
  letter-spacing:-1.3px;
  color:var(--navy);
  max-width:880px;
}
.page-hero p:not(.mini){
  font-size:18px;
  line-height:1.6;
  max-width:820px;
  color:var(--text);
}
.page-hero a{color:var(--teal);font-weight:700}
.content-section{
  padding:58px 0;
  background:#fff;
}
.content-section.pale{
  background:#f7fafb;
}
.content-grid{
  display:grid;
  grid-template-columns:1fr .8fr;
  gap:48px;
  align-items:start;
}
.content-section h2{
  font-size:34px;
  line-height:1.15;
  margin:0 0 16px;
  color:var(--navy);
}
.content-section p{
  font-size:16px;
  line-height:1.65;
  color:var(--text);
}
.info-card{
  background:#f7fafb;
  border:1px solid var(--border);
  border-radius:10px;
  padding:26px;
  box-shadow:0 8px 18px rgba(6,38,84,.04);
}
.info-card h3{
  margin:0 0 14px;
  font-size:22px;
}
.info-card li{
  margin:0 0 10px;
  line-height:1.5;
}
.detailed-services{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.detailed-services article{
  background:#f7fafb;
  border:1px solid var(--border);
  border-radius:10px;
  padding:28px;
}
.detailed-services h2{
  font-size:28px;
}
.detailed-services a{
  color:var(--teal);
  font-weight:800;
}
.page-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.standalone-form{
  background:#f7fafb;
}
@media (max-width:900px){
  .content-grid,
  .page-cards{
    grid-template-columns:1fr;
  }
  .page-hero h1{
    font-size:38px;
  }
}


/* Logo quality update */
.logo img{
  width:270px;
  height:auto;
  object-fit:contain;
}
.footer-clean-logo{
  width:285px;
  max-width:100%;
  margin-bottom:18px;
}
.footer-clean-logo img{
  width:285px;
  height:auto;
  object-fit:contain;
}
@media (max-width:700px){
  .logo img{width:230px;}
  .footer-clean-logo,
  .footer-clean-logo img{width:240px;}
}


/* White background logo + slightly larger sizing */
.logo img{
  width:300px !important;
  height:auto;
  object-fit:contain;
  background:#ffffff;
}
.footer-clean-logo{
  width:315px !important;
  max-width:100%;
  margin-bottom:18px;
  background:#ffffff;
}
.footer-clean-logo img{
  width:315px !important;
  height:auto;
  object-fit:contain;
  background:#ffffff;
}
@media (max-width:700px){
  .logo img{
    width:250px !important;
  }
  .footer-clean-logo,
  .footer-clean-logo img{
    width:255px !important;
  }
}


/* Clean logo replacement - removes checkerboard issue completely */
.logo.clean-logo,
.clean-logo{
  display:flex !important;
  align-items:center;
  gap:10px;
  width:auto !important;
  max-width:none !important;
  background:#ffffff !important;
}
.logo.clean-logo img,
.clean-logo img{
  width:48px !important;
  height:48px !important;
  object-fit:contain !important;
  background:#ffffff !important;
  flex:0 0 auto;
}
.clean-logo-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1;
  background:#ffffff;
}
.clean-logo-text strong{
  font-size:24px;
  font-weight:800;
  letter-spacing:-0.4px;
  color:var(--navy);
  white-space:nowrap;
}
.clean-logo-text em{
  color:var(--teal);
  font-style:normal;
}
.clean-logo-text small{
  margin-top:6px;
  font-size:7px;
  font-weight:800;
  letter-spacing:.45px;
  text-transform:uppercase;
  color:var(--navy);
  white-space:nowrap;
}
.footer-clean-logo.clean-logo{
  margin-bottom:18px;
  width:auto !important;
  max-width:320px !important;
  background:transparent !important;
}
.footer-clean-logo.clean-logo .clean-logo-text{
  background:transparent !important;
}
.footer-clean-logo.clean-logo .clean-logo-text strong,
.footer-clean-logo.clean-logo .clean-logo-text small{
  color:#ffffff;
}
.footer-clean-logo.clean-logo .clean-logo-text em{
  color:#0bd0d0;
}
.footer-clean-logo.clean-logo img{
  background:transparent !important;
}
@media (max-width:700px){
  .logo.clean-logo img,
  .clean-logo img{
    width:42px !important;
    height:42px !important;
  }
  .clean-logo-text strong{
    font-size:20px;
  }
  .clean-logo-text small{
    font-size:6px;
  }
}


/* Logo text alignment refinement */
.clean-logo-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  width:250px;
  line-height:1;
  background:#ffffff;
}
.clean-logo-text strong{
  display:block;
  width:100%;
  font-size:24px;
  font-weight:800;
  letter-spacing:-0.35px;
  color:var(--navy);
  white-space:nowrap;
  text-align:left;
}
.clean-logo-text small{
  display:block;
  width:100%;
  margin-top:6px;
  font-size:7px;
  font-weight:800;
  letter-spacing:.35px;
  text-transform:uppercase;
  color:var(--navy);
  white-space:nowrap;
  text-align:justify;
  text-align-last:justify;
}
.footer-clean-logo.clean-logo .clean-logo-text{
  width:250px;
  background:transparent !important;
}
.footer-clean-logo.clean-logo .clean-logo-text strong{
  text-align:left;
}
.footer-clean-logo.clean-logo .clean-logo-text small{
  text-align:justify;
  text-align-last:justify;
}
@media (max-width:700px){
  .clean-logo-text{
    width:210px;
  }
  .clean-logo-text strong{
    font-size:20px;
  }
  .clean-logo-text small{
    font-size:6px;
  }
  .footer-clean-logo.clean-logo .clean-logo-text{
    width:210px;
  }
}


/* Logo strapline width fix */
.clean-logo-text{
  width:225px !important;
}
.clean-logo-text strong{
  font-size:23px !important;
  letter-spacing:-0.45px !important;
  text-align:left !important;
}
.clean-logo-text small{
  width:225px !important;
  max-width:225px !important;
  font-size:6.15px !important;
  letter-spacing:0.18px !important;
  text-align:left !important;
  text-align-last:left !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}
.footer-clean-logo.clean-logo .clean-logo-text{
  width:225px !important;
}
.footer-clean-logo.clean-logo .clean-logo-text small{
  width:225px !important;
  max-width:225px !important;
}
.logo.clean-logo img,
.clean-logo img{
  width:46px !important;
  height:46px !important;
}

@media (max-width:700px){
  .clean-logo-text{
    width:198px !important;
  }
  .clean-logo-text strong{
    font-size:20px !important;
  }
  .clean-logo-text small{
    width:198px !important;
    max-width:198px !important;
    font-size:5.55px !important;
    letter-spacing:0.08px !important;
  }
}


/* Larger header and clearer logo */
.header{
  height:86px !important;
}
.nav{
  height:86px !important;
}
.links a{
  height:86px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.logo.clean-logo img,
.clean-logo img{
  width:58px !important;
  height:58px !important;
}
.clean-logo-text{
  width:285px !important;
}
.clean-logo-text strong{
  font-size:30px !important;
  letter-spacing:-0.55px !important;
  line-height:1 !important;
}
.clean-logo-text small{
  width:285px !important;
  max-width:285px !important;
  font-size:7.4px !important;
  letter-spacing:0.22px !important;
  line-height:1 !important;
  margin-top:7px !important;
  text-align:left !important;
  text-align-last:left !important;
  white-space:nowrap !important;
  overflow:visible !important;
}
.footer-clean-logo.clean-logo .clean-logo-text{
  width:285px !important;
}
.footer-clean-logo.clean-logo .clean-logo-text strong{
  font-size:30px !important;
}
.footer-clean-logo.clean-logo .clean-logo-text small{
  width:285px !important;
  max-width:285px !important;
  font-size:7.4px !important;
}
.top-button{
  padding:15px 26px !important;
}
@media (max-width:900px){
  .header{
    height:78px !important;
  }
  .nav{
    height:78px !important;
  }
  .logo.clean-logo img,
  .clean-logo img{
    width:52px !important;
    height:52px !important;
  }
  .clean-logo-text{
    width:250px !important;
  }
  .clean-logo-text strong{
    font-size:26px !important;
  }
  .clean-logo-text small{
    width:250px !important;
    max-width:250px !important;
    font-size:6.5px !important;
  }
}
@media (max-width:700px){
  .header{
    height:auto !important;
  }
  .nav{
    height:auto !important;
    padding:12px 0 !important;
  }
  .logo.clean-logo img,
  .clean-logo img{
    width:48px !important;
    height:48px !important;
  }
  .clean-logo-text{
    width:220px !important;
  }
  .clean-logo-text strong{
    font-size:22px !important;
  }
  .clean-logo-text small{
    width:220px !important;
    max-width:220px !important;
    font-size:5.7px !important;
  }
}


/* Justified strapline under logo */
.clean-logo-text{
  width:300px !important;
}
.clean-logo-text strong{
  width:300px !important;
  display:block !important;
  font-size:30px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.clean-logo-text small{
  width:300px !important;
  max-width:300px !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:0 !important;
  margin-top:7px !important;
  font-size:7px !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-transform:uppercase !important;
  overflow:visible !important;
  white-space:nowrap !important;
}
.clean-logo-text small span{
  display:inline-block !important;
  white-space:nowrap !important;
  letter-spacing:0.15px !important;
}
.footer-clean-logo.clean-logo .clean-logo-text{
  width:300px !important;
}
.footer-clean-logo.clean-logo .clean-logo-text strong{
  width:300px !important;
}
.footer-clean-logo.clean-logo .clean-logo-text small{
  width:300px !important;
  max-width:300px !important;
  display:flex !important;
  justify-content:space-between !important;
}
@media (max-width:900px){
  .clean-logo-text,
  .clean-logo-text strong,
  .clean-logo-text small{
    width:260px !important;
    max-width:260px !important;
  }
  .clean-logo-text strong{
    font-size:26px !important;
  }
  .clean-logo-text small{
    font-size:6.2px !important;
  }
}
@media (max-width:700px){
  .clean-logo-text,
  .clean-logo-text strong,
  .clean-logo-text small{
    width:225px !important;
    max-width:225px !important;
  }
  .clean-logo-text strong{
    font-size:22px !important;
  }
  .clean-logo-text small{
    font-size:5.4px !important;
  }
}