/* Reset and base */
*{box-sizing:border-box;margin:0;padding:0}

body{font-family:'Inter',Arial,Helvetica,sans-serif;line-height:1.5;color:#222;background:#fff}

/* Utility wrapper used to center content (header, sections, footer content) */
.site-inner{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{background:#fff;border-bottom:1px solid rgba(0,0,0,0.04)}
.site-header .site-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:84px;display:block}
.tag{font-weight:600;color:#0f2940}
.contact{display:flex;gap:12px;align-items:center}
.contact-pill{background:#0f67a1;color:#fff;padding:8px 12px;border-radius:8px;text-decoration:none;font-weight:600}
.contact-link{color:#0f67a1;text-decoration:none}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Hero (full-bleed) */
.hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;height:66vh}
.hero-bg{width:100%;height:100%;object-fit:cover;display:block}
.hero-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,0.92);padding:26px 28px;border-radius:10px;max-width:760px;box-shadow:0 12px 30px rgba(6,24,50,0.14)}
.hero-card h2{margin-bottom:8px;font-size:1.6rem;color:#092033}
.hero-card p{margin-bottom:14px;color:#103247}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:700}
.btn-primary{background:#0f67a1;color:#fff}
.btn-outline{border:2px solid #0f67a1;color:#0f67a1;background:transparent}

/* Sections */
.services,.about{padding:48px 0}
.services h3,.about h3{margin:0 0 12px}
.safety{padding:96px 0 128px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{background:#fff;border-radius:8px;padding:18px;box-shadow:0 6px 18px rgba(12,32,56,0.06)}
.card h4{margin-bottom:8px;color:#092033}
.about p{margin-bottom:18px}
h1,h2{font-weight:600}

/* Footer */
.site-footer{background:#0b2740;color:#f4f7fb;padding:40px 20px}
.site-footer .footer-inner{display:flex;gap:24px;align-items:flex-start;justify-content:space-between;max-width:1100px;margin:0 auto;padding:0 20px;flex-wrap:wrap}
.footer-col{flex:1 1 220px;min-width:180px}
.footer-col h4{margin-bottom:8px;color:#fff;font-weight:700}
.footer-col p{margin:6px 0;color:rgba(244,247,251,0.9)}
.footer-link{color:#8fd7ff;text-decoration:none}
.footer-link:hover{color:#dff6ff;text-decoration:underline}
.site-footer .small{font-size:0.85rem;color:rgba(244,247,251,0.75);margin-top:8px}

/* Mobile-only compact footer (hidden by default) */
.site-footer-mobile{display:none}

/* Responsive tweaks */
@media (max-width:1000px){
  .cards{grid-template-columns:1fr}
  /* Keep cards away from the viewport edges on small screens */
  .cards{padding:0 12px;box-sizing:border-box}
  .hero{height:56vh}
  .hero-card{left:50%;transform:translate(-50%,-48%);width:calc(100% - 48px)}
  .site-header .site-inner{padding:12px 20px}
  .contact-pill{padding:8px 10px}
  /* Stack footer columns with tighter spacing on small screens */
  .site-footer .footer-inner{flex-direction:column;gap:8px;padding:0}

  /* Slightly smaller footer text on mobile */
  .site-footer{font-size:0.92rem}
  .site-footer .footer-col p{margin:4px 0}
  .site-footer .small{font-size:0.78rem}

  /* On small screens, stack contact items vertically and keep phone above email */
  .contact{flex-direction:column;align-items:flex-end;gap:6px}
  .contact a{display:inline-block}
  /* hide contact items on small devices and show the descriptive tag */
  .contact{display:none}
  .tag{display:block}

  /* In the stacked footer on small screens hide the middle (contact) column entirely so only
     address and legal remain and gaps are reduced. Use nth-child selector to avoid changing HTML. */
  .site-footer .footer-inner .footer-col:nth-child(2){display:none}

  /* Ensure the remaining columns use full width and small centered text */
  .site-footer .footer-inner .footer-col{width:100%;min-width:0}

  /* Hide the desktop footer and show the compact mobile footer */
  .site-footer{display:none}
  .site-footer-mobile{display:block;background:#0b2740;color:#f4f7fb;padding:14px 12px;font-size:0.9rem;line-height:1.35}
  .site-footer-mobile .mobile-footer-block{max-width:760px;margin:0 auto;text-align:center}
  .site-footer-mobile p{margin:6px 0;color:rgba(244,247,251,0.95);font-size:0.9rem}
  .site-footer-mobile .small{font-size:0.75rem;color:rgba(244,247,251,0.75)}
  /* CTA section styling */
  .cta-section{padding:24px 0 36px}
  .cta-block{max-width:860px;margin:0 auto;text-align:center}
  .cta-lead{margin:0 0 12px;font-size:1.05rem;color:#092033}
  .cta-actions{display:flex;gap:12px;justify-content:center}
  .cta-actions .btn{min-width:140px}

  @media (max-width:1000px){
    .cta-section{padding:18px 12px 28px}
    .cta-block{width:100%}
    .cta-actions{flex-direction:column;align-items:center}
    .cta-actions .btn{width:100%;max-width:320px}
  }
  /* Make the safety section match the card edges on small screens and add bottom spacing (doubled) */
  .safety{padding:0 24px 36px;box-sizing:border-box}
}

/* On larger screens make the CTA align to the centre of the viewport (not just the content column) */
@media (min-width:1001px){
  /* Hide CTA entirely on desktop-sized viewports */
  .cta-section{display:none}
  .cta-section.site-inner{width:100vw;margin-left:calc(50% - 50vw);padding-left:0;padding-right:0}
  .cta-block{max-width:860px;margin:0 auto}
}

/* Safety CTA - desktop and default styles */
.safety-cta{padding:28px 0 40px}
.safety-cta .cta-lead{font-size:1.05rem;color:#092033;text-align:center;margin:0 0 12px;font-weight:600}
.safety-cta .cta-actions{display:flex;gap:12px;justify-content:center}
.safety-cta .btn{padding:10px 14px}