:root{
  --site-max-width:1200px;
  --menu-bg:#EAECEE;
  --menu-text:#354A5F;
  --dark:#0b1220;
  --hero-height:520px;
  --cursor-color:#ffffff;
  --marquee-duration:40s;
  --hero-title-size:3.2rem; /* banner header size; cursor will match this */
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;overflow-x:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--dark);background:#fff}
.container{max-width:var(--site-max-width);margin:0 auto;padding:0 1rem}

/* Header */
.site-header{background:var(--menu-bg);border-bottom:1px solid rgba(0,0,0,0.06);position:sticky;top:0;z-index:120}
.header-inner{display:flex;align-items:center;gap:12px;padding:0.5rem 0}

/* Logo placeholder */
.logo-placeholder{
  background:linear-gradient(90deg,#ffffff,#f7f9fb);
  border:1px solid rgba(0,0,0,0.04);
  display:inline-block;
  box-sizing:border-box;
}
.logo-small{width:64px;height:36px}

/* Navigation */
.site-nav{margin-left:8px}
.site-nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.site-nav a{color:var(--menu-text);font-size:0.88rem;text-decoration:none}
.site-nav a:hover{text-decoration:underline}

/* Mobile toggle (hamburger) */
.nav-toggle{margin-left:auto;background:none;border:0;padding:10px 12px;display:none;min-width:44px;min-height:44px;cursor:pointer}
.hamburger{width:22px;height:2px;background:#111;position:relative;display:inline-block}
.hamburger::before,.hamburger::after{content:"";position:absolute;left:0;width:22px;height:2px;background:#111}
.hamburger::before{top:-6px}
.hamburger::after{top:6px}

/* Show toggle on small screens */
@media (max-width:899px){
  .nav-toggle{display:block}
  .site-nav{display:none}
}

/* Hero */
.hero{position:relative}
.hero-bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);background:#d6d6d6;height:var(--hero-height);position:relative}
.hero-inner{position:absolute;inset:0;background:#d6d6d6;background-size:cover;background-position:center}
.hero-content{position:absolute;left:50%;transform:translateX(-50%);top:12%;width:var(--site-max-width);max-width:calc(var(--site-max-width) - 2rem);padding:0 1rem;color:#fff}
.hero-title-wrapper{margin:0;padding:0}
#hero-dynamic{display:inline-block;white-space:normal;word-break:break-word;font-size:var(--hero-title-size);font-weight:800;line-height:1.05;vertical-align:bottom;max-width:100%}
.cursor{display:inline-block;margin-left:6px;color:var(--cursor-color);opacity:1;transition:opacity .25s linear;font-size:var(--hero-title-size);line-height:inherit;vertical-align:bottom}
.cursor.hidden{opacity:0;visibility:hidden}
@media (max-width:899px){
  .hero-content{left:0;transform:none;width:100%;max-width:100%;padding:0 1rem}
  #hero-dynamic{font-size:2rem}
  .hero-sub{font-size:1.25rem}
  .cursor{display:none}
}
.hero-sub{margin-top:12px;font-size:1.9rem}

/* Sections */
.section{padding:3rem 0}

/* WHO layout */
.who-inner{display:flex;gap:0.9rem;align-items:flex-start;justify-content:space-between;flex-wrap:wrap} /* reduced gap */
.who-text{flex:0 1 520px;max-width:520px}
.who-cta{margin-top:0.45rem} /* reduced gap between who text and CTA */
.btn-primary{display:inline-block;margin-top:0.25rem;background:#0b6ef6;color:#fff;padding:0.6rem 1rem;border-radius:6px;text-decoration:none;font-weight:600}
.btn-primary:hover,.btn-primary:focus{text-decoration:underline;outline:none}

/* reduce vertical gap between the "Services" header and the CTA above */
#services{margin-top:0.6rem}
.services-grid{margin-top:0.25rem}

/* Carousel (no background) */
.who-carousel{flex:1 1 320px;min-width:220px;height:120px;overflow:hidden;display:flex;align-items:center;background:transparent;border:0}
.marquee{display:flex;gap:1rem;align-items:center;padding:0 1rem;will-change:transform;animation:marquee linear infinite;animation-duration:var(--marquee-duration)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-item{flex:0 0 auto;width:120px;height:72px;display:flex;align-items:center;justify-content:center}
.logo-rect{width:100%;height:72px;background:linear-gradient(90deg,#e6e9ef,#f7f9fb);border:1px solid rgba(0,0,0,0.03)}
@media (max-width:700px){
  .who-carousel{height:88px}
  .logo-item{width:88px;height:56px}
  .logo-rect{height:56px}
  .who-text{flex-basis:100%;max-width:100%}
  .who-carousel{flex-basis:100%;margin-top:0.75rem}
}

/* Services grid */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0.75rem;margin-top:0.5rem;align-items:start}

/* Reveal base */
.card{background:transparent;border:0;padding:0;border-radius:0;opacity:0;transform:translateY(18px);transition:all .45s ease;overflow:hidden}
.card.visible{opacity:1;transform:none}

/* Service card: dark image background so white text is visible */
.service-card{display:block;min-height:220px;transition:transform 220ms cubic-bezier(.2,.9,.2,1);cursor:pointer;border-radius:0;overflow:hidden;border:0;background:transparent;box-shadow:none}
.service-card:hover,.service-card:focus{transform:translateY(-3px) scale(1.02);box-shadow:none;outline:none}
.service-media{position:relative;width:100%;height:100%;min-height:220px}
.service-img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#374151 0%,#1f2937 100%) !important; /* dark gradient forced */
  color:#fff;overflow:hidden}

/* Remove decorative overlay to keep clean dark background */
.service-img::before{content:"";position:absolute;inset:0;opacity:0;pointer-events:none}

/* Overlay title centered, large, white, no shadow */
.service-title-overlay{position:relative;z-index:2;margin:0;padding:0.25rem 0.75rem;text-align:center;font-size:2rem;font-weight:800;color:#ffffff;text-shadow:none;line-height:1.02;max-width:92%}

/* Ensure no gap at bottom */
.service-media::after{content:"";display:block;height:0}

/* Responsive adjustments */
@media (max-width:520px){
  .service-card{min-height:180px}
  .service-media{min-height:180px}
  .service-title-overlay{font-size:1.25rem}
}

/* Footer */
.site-footer {
  background: var(--menu-bg);
  color: var(--menu-text);
  padding-top: 2rem;
}

/* Desktop: 3-column grid */
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Footer column titles */
.footer-col h4 {
  margin: 0 0 .5rem;
  font-size: 0.95rem;
}

/* Footer links */
.footer-col a {
  text-decoration: none;
  color: var(--menu-text);
}

.footer-col a:hover {
  text-decoration: underline;
}

/* Legal links stacked vertically */
.footer-legal-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
  margin-top: 0.25rem;
}

.footer-link {
  color: var(--menu-text);
  text-decoration: none;
  padding: 0;
  display: inline-block;
}

.footer-link:hover,
.footer-link:focus {
  text-decoration: underline;
  outline: none;
}

/* --------------------------------------------- */
/* MOBILE: horizontal scrolling footer           */
/* --------------------------------------------- */
@media (max-width: 700px) {
  .footer-inner {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 2rem;
    padding-bottom: 1.5rem;
  }

  .footer-col {
    flex: 0 0 auto;       /* prevents shrinking */
    min-width: 220px;     /* adjust as needed */
  }
}

/* Phone block */
.phone-row{display:flex;align-items:flex-start;gap:0.6rem}
.phone-meta{display:flex;flex-direction:column}
/* Make phone number match other footer link color and be thicker */
.phone-number{font-size:1.05rem;color:var(--menu-text);font-weight:700}
.phone-number-link{color:var(--menu-text);text-decoration:none}

/* Ensure the phone number inherits the link color when wrapped in an anchor */
.phone-number-link .phone-number{color:inherit}

/* Business hours */
.business-hours{margin-top:6px}

/* Mobile panel & overlay */
.mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.35);opacity:0;pointer-events:none;transition:opacity .28s ease;z-index:110}
.mobile-overlay.show{opacity:1;pointer-events:auto}
.mobile-panel{position:fixed;top:0;right:0;height:100vh;width:320px;max-width:85vw;background:var(--menu-bg);transform:translateX(110%);transition:transform .32s ease;z-index:130;padding:1rem;display:flex;flex-direction:column}
.mobile-panel.open{transform:translateX(0)}
.mobile-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.mobile-close{background:none;border:0;font-size:1rem;color:var(--menu-text)}
.mobile-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.5rem}
.mobile-link{display:block;padding:0.9rem;font-size:1.1rem;color:var(--menu-text);text-decoration:none}
.mobile-link:hover{text-decoration:underline;background:rgba(0,0,0,0.05)}

/* Accessibility: focus outlines */
a:focus, button:focus, .service-card:focus { outline: 3px solid rgba(11,78,255,0.12); outline-offset:2px }

/* Utility: ensure include slots are neutral */
#site-header-slot, #site-footer-slot { display:block }

/* Small screens adjustments */
@media (max-width:899px){
  .hero-content{left:0;transform:none;width:100%;max-width:100%;padding:0 1rem}
  #hero-dynamic{font-size:2rem}
  .hero-sub{font-size:1.25rem}
  .cursor{display:none}
  .logo-small{width:56px;height:32px}
}

/* Two-column headings above carousel */
.who-heading-columns {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.who-heading-left h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dark);
}

.who-heading-right h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: right;
}

/* ensure the right heading visually sits above the carousel logos */
.who-carousel { margin-top: 0.5rem; }

/* responsive: stack on small screens */
@media (max-width: 720px) {
  .who-heading-columns { flex-direction: column; align-items: flex-start; }
  .who-heading-right h2 { text-align: left; }
}

/* Alignment: grid-based layout so Trusted by lines up with carousel start */
.who-inner {
  display: grid;
  grid-template-columns: 1fr var(--carousel-width, 320px);
  gap: 0.9rem;
  align-items: start;
}

.who-heading-columns {
  display: grid;
  grid-template-columns: 1fr var(--carousel-width, 320px);
  grid-column: 1 / -1;
  gap: 1rem;
  align-items: end;
  margin-bottom: 1rem;
}

.who-heading-left { grid-column: 1 / 2; align-self: end; }
.who-heading-left h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.05;
}

.who-heading-right { grid-column: 2 / 3; justify-self: start; align-self: end; }
.who-heading-right h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.05;
}

@media (max-width:720px) {
  .who-inner { grid-template-columns: 1fr; }
  .who-heading-columns { grid-template-columns: 1fr; }
  .who-heading-left, .who-heading-right { grid-column: auto; justify-self: start; }
  .who-heading-left h3, .who-heading-right h2 { font-size:1.05rem; font-weight:600; }
}

/* Ensure marquee and logos are visible even if other rules hide them */
.marquee, .who-carousel, .logo-item, .logo-rect { display:flex; }

/* Typing cursor blink */
@keyframes blink {
  0%, 49% { opacity:1; }
  50%, 100% { opacity:0; }
}
#hero-cursor { animation: blink 1s step-end infinite; }

/* Defensive: prevent accidental global white backgrounds for cards */
.service-card, .service-media, .logo-rect { background-clip: padding-box; }

/* Cards: use homepage hero gray and remove dark title overlay (card-only changes) */
.service-card .service-img {
  background-image: none !important;
  background: #d6d6d6 !important;
  background-size: cover !important;
  background-position: center center !important;
  color: #fff !important;
}

/* Remove dark overlay and any text outline/shadow behind the title */
.service-title-overlay {
  background: transparent !important;
  background-image: none !important;
  color: #ffffff !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  padding: 0.25rem 0.75rem !important;
}

/* Ensure no pseudo-element or child is adding a dark block or shadow */
.service-card .service-img::before,
.service-card .service-img::after,
.service-card .service-media::before,
.service-card .service-media::after,
.service-card *::before,
.service-card *::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}