/* ===========================================================================
   LeadSite — section design
   ---------------------------------------------------------------------------
   Layered on top of style.css. style.css owns the tokens and the base
   typography; this file owns the page bands: hero, strip, stats, about,
   services, why-choose, FAQ, areas, contact and footer.

   Two colour roles carry the whole design:
     --ls-primary    the mint/cyan action colour (buttons, icons, numbers)
     --ls-ink        the deep navy used for every dark band
   =========================================================================== */

:root{
  --ls-ink:#0E2438;
  --ls-ink-2:#16324B;
  --ls-band-pad:76px;
}

/* ------------------------------- utilities -------------------------------- */
.ls-band{padding:var(--ls-band-pad) 0;}
.ls-band.is-alt{background:var(--ls-bg-alt);}
.ls-band.is-dark{background:var(--ls-ink);color:#fff;}
.ls-band.is-dark h2,.ls-band.is-dark h3{color:#fff;}
.ls-band.is-dark p{color:rgba(255,255,255,.76);}

.ls-eyebrow{
  display:block;text-align:center;font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ls-primary);
  margin:0 0 10px;
}
.ls-band.is-dark .ls-eyebrow{color:var(--ls-primary);}
.ls-head{text-align:center;max-width:62ch;margin:0 auto 42px;}
.ls-head h2{margin:0 0 10px;font-size:var(--ls-h2);line-height:1.18;
  letter-spacing:-.02em;text-wrap:balance;}
.ls-head p{margin:0;color:var(--ls-text-muted);font-size:1.03rem;}
.ls-band.is-dark .ls-head p{color:rgba(255,255,255,.72);}

/* ---------------------------------- hero ---------------------------------- */
.ls-hero{
  position:relative;background:var(--ls-ink);color:#fff;
  padding:72px 0 84px;border-bottom:none;overflow:hidden;
}
.ls-hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,rgba(9,26,42,.94) 0%,rgba(9,26,42,.80) 46%,rgba(9,26,42,.55) 100%);
}
.ls-hero.has-image{background-size:cover;background-position:center;}
.ls-hero .ls-wrap{position:relative;z-index:2;}
.ls-hero-grid{display:grid;gap:44px;grid-template-columns:1.15fr .85fr;align-items:center;}
.ls-hero h1{margin:0 0 14px;font-size:var(--ls-h1);line-height:1.1;
  letter-spacing:-.025em;color:#fff;text-wrap:balance;}
.ls-hero p.ls-hero-sub{margin:0;color:rgba(255,255,255,.84);font-size:1.08rem;max-width:56ch;}
.ls-hero .ls-badges{margin-top:20px;}
.ls-hero .ls-badge{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.26);color:#fff;}
.ls-hero .ls-btn-secondary{color:#fff;border-color:rgba(255,255,255,.55);background:transparent;}
.ls-hero .ls-btn-secondary:hover{background:#fff;color:var(--ls-ink);border-color:#fff;}

/* --------------------------------- lead form ------------------------------ */
.ls-form-card{
  background:#fff;color:var(--ls-text);border-radius:14px;padding:26px 24px;
  box-shadow:0 18px 48px rgba(4,16,28,.34);
}
.ls-form-card h2{margin:0 0 4px;font-size:1.3rem;line-height:1.25;color:var(--ls-text);}
.ls-form-card .ls-form-note{margin:0 0 16px;font-size:.86rem;color:var(--ls-text-muted);}
.ls-field{display:block;margin-bottom:12px;}
.ls-field span{display:block;font-size:.84rem;font-weight:600;margin-bottom:5px;}
.ls-field input,.ls-field textarea,.ls-field select{
  width:100%;font:inherit;font-size:.96rem;padding:11px 13px;
  border:1px solid var(--ls-border);border-radius:9px;background:#fff;color:var(--ls-text);
}
.ls-field textarea{min-height:96px;resize:vertical;}
.ls-field input:focus,.ls-field textarea:focus{
  outline:none;border-color:var(--ls-primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ls-primary) 28%,transparent);
}
.ls-form-card button{
  width:100%;font:inherit;font-weight:800;cursor:pointer;border:none;
  background:var(--ls-primary);color:#062330;padding:13px 20px;border-radius:10px;
}
.ls-form-card button:hover{background:var(--ls-primary-hover);}
.ls-consent{display:flex;gap:9px;align-items:flex-start;font-size:.8rem;
  color:var(--ls-text-muted);margin:4px 0 14px;}
.ls-consent input{margin-top:3px;flex:0 0 auto;}
.ls-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;}
.ls-form-status{margin:0 0 14px;padding:11px 14px;border-radius:9px;font-size:.92rem;}
.ls-form-status.is-ok{background:#E7F7EF;color:#12603F;border:1px solid #9BDCC0;}
.ls-form-status.is-err{background:#FDECEC;color:#8C2B25;border:1px solid #F2B8B4;}

/* ------------------------------ feature strip ----------------------------- */
.ls-strip{background:var(--ls-ink-2);color:#fff;padding:20px 0;}
.ls-strip ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:14px 40px;justify-content:center;}
.ls-strip li{position:relative;padding-left:28px;font-size:.95rem;
  color:rgba(255,255,255,.9);}
.ls-strip li::before{
  content:"";position:absolute;left:6px;top:.42em;width:7px;height:13px;
  border:solid var(--ls-primary);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}

/* --------------------------------- stats ---------------------------------- */
.ls-stats{background:var(--ls-bg);padding:44px 0;border-bottom:1px solid var(--ls-border);}
.ls-stats ul{list-style:none;margin:0;padding:0;display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));text-align:center;}
.ls-stat-n{display:block;font-size:2.1rem;font-weight:800;color:var(--ls-primary);
  line-height:1.1;font-variant-numeric:tabular-nums;}
.ls-stat-l{display:block;font-size:.9rem;color:var(--ls-text-muted);margin-top:4px;}

/* --------------------------------- about ---------------------------------- */
.ls-split{display:grid;gap:44px;grid-template-columns:1fr 1fr;align-items:center;}
.ls-split.is-reverse .ls-split-media{order:2;}
.ls-split-media img{border-radius:14px;display:block;width:100%;
  box-shadow:0 12px 34px rgba(16,24,40,.14);}
.ls-split .ls-eyebrow,.ls-split h2{text-align:left;}
.ls-split h2{margin:0 0 12px;font-size:var(--ls-h2);line-height:1.18;letter-spacing:-.02em;}
.ls-split p{color:var(--ls-text-muted);}

/* -------------------------- why-choose feature list ----------------------- */
.ls-features{display:grid;gap:14px;margin:24px 0 0;}
.ls-feature{
  display:flex;gap:15px;align-items:flex-start;background:var(--ls-bg);
  border:1px solid var(--ls-border);border-left:4px solid var(--ls-primary);
  border-radius:var(--ls-radius);padding:16px 18px;
}
.ls-feature h3{margin:0 0 4px;font-size:1.02rem;}
.ls-feature p{margin:0;font-size:.94rem;color:var(--ls-text-muted);}

/* ----------------------------- service cards ------------------------------ */
.ls-cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));}
.ls-scard{
  position:relative;background:var(--ls-bg);border:1px solid var(--ls-border);
  border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--ls-shadow);transition:transform .16s ease,box-shadow .16s ease;
}
.ls-scard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(16,24,40,.14);}
.ls-scard-media{aspect-ratio:16/10;background:var(--ls-bg-alt);overflow:hidden;}
.ls-scard-media img{width:100%;height:100%;object-fit:cover;display:block;}
.ls-scard-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;}
.ls-scard h3{margin:0 0 7px;font-size:1.05rem;line-height:1.32;}
.ls-scard h3 a{text-decoration:none;color:var(--ls-text);}
.ls-scard h3 a:hover{color:var(--ls-secondary);}
.ls-scard p{margin:0 0 14px;font-size:.93rem;color:var(--ls-text-muted);}
.ls-scard .ls-more{margin-top:auto;font-weight:700;font-size:.92rem;
  color:var(--ls-secondary);text-decoration:none;}
.ls-scard .ls-more:hover{text-decoration:underline;}
.ls-tag{
  position:absolute;top:12px;left:12px;z-index:1;background:var(--ls-primary);
  color:#062330;font-size:.72rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;padding:5px 10px;border-radius:6px;
}

/* --------------------------- "more services" panel ------------------------ */
.ls-more-panel{
  margin-top:26px;background:var(--ls-bg-alt);border:1px solid var(--ls-border);
  border-radius:14px;padding:24px 26px;
}
.ls-more-panel h3{margin:0 0 14px;text-align:center;font-size:1.06rem;}
.ls-more-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.ls-more-panel li{position:relative;padding-left:24px;font-size:.94rem;
  color:var(--ls-text-muted);}
.ls-more-panel li::before{
  content:"";position:absolute;left:4px;top:.36em;width:6px;height:11px;
  border:solid var(--ls-primary);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}

/* ------------------------------- areas band ------------------------------- */
.ls-areas{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}
.ls-area{
  background:var(--ls-ink-2);border:1px solid rgba(255,255,255,.12);
  border-radius:11px;padding:14px 16px 14px 40px;position:relative;
  text-decoration:none;color:#fff;font-size:.95rem;font-weight:600;
  transition:border-color .15s ease,background .15s ease;
}
.ls-area:hover{border-color:var(--ls-primary);background:#1B3B57;color:#fff;}
.ls-area::before{
  content:"";position:absolute;left:15px;top:50%;margin-top:-9px;
  width:11px;height:11px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);border:2.5px solid var(--ls-primary);
}
.ls-area small{display:block;font-weight:400;color:rgba(255,255,255,.55);font-size:.8rem;}

.ls-band-cta{text-align:center;margin-top:38px;}
.ls-band-cta p{margin:0 0 14px;}
.ls-band-cta .ls-btn-secondary{color:#fff;border-color:rgba(255,255,255,.5);}
.ls-band-cta .ls-btn-secondary:hover{background:#fff;color:var(--ls-ink);}

/* -------------------------------- contact --------------------------------- */
.ls-contact-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px;}
.ls-contact-list li{
  display:flex;gap:14px;align-items:flex-start;background:var(--ls-bg);
  border:1px solid var(--ls-border);border-radius:var(--ls-radius);padding:14px 16px;
}
.ls-contact-list b{display:block;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ls-text-muted);font-weight:700;}
.ls-contact-list a{text-decoration:none;font-weight:650;}
.ls-ico{
  flex:0 0 34px;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ls-primary) 22%,transparent);
  color:var(--ls-secondary);font-size:1rem;
}

/* -------------------------------- footer ---------------------------------- */
.ls-footer{background:var(--ls-ink);border-top:none;color:rgba(255,255,255,.72);}
.ls-footer h2{color:rgba(255,255,255,.55);}
.ls-footer a{color:rgba(255,255,255,.8);}
.ls-footer a:hover{color:#fff;}
.ls-footer p{color:rgba(255,255,255,.66);}
.ls-colophon{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.5);}
.ls-footer-cta{background:var(--ls-primary);color:#062330;}
.ls-footer-cta h2{color:#062330;}
.ls-footer-cta p{color:rgba(6,35,48,.78);}
.ls-footer-cta .ls-btn-primary{background:var(--ls-ink);color:#fff;}
.ls-footer-cta .ls-btn-primary:hover{background:var(--ls-ink-2);color:#fff;}

/* ------------------------------- responsive ------------------------------- */
@media (max-width:980px){
  .ls-hero-grid,.ls-split{grid-template-columns:1fr;gap:30px;}
  .ls-split.is-reverse .ls-split-media{order:0;}
  :root{--ls-band-pad:52px;}
}
@media (max-width:860px){
  .ls-hero{padding:48px 0 56px;}
  .ls-stat-n{font-size:1.7rem;}
  .ls-strip ul{gap:10px 22px;}
}

/* --------------------- inner pages: content + sticky form ----------------- */
.ls-page-grid{
  display:grid;gap:44px;grid-template-columns:minmax(0,1fr) 360px;align-items:start;
}
.ls-page-grid > .ls-main-col{min-width:0;}
.ls-aside{position:sticky;top:96px;}
.ls-aside .ls-form-card{box-shadow:0 10px 30px rgba(16,24,40,.12);}
.ls-aside-call{
  margin-top:14px;background:var(--ls-ink);color:#fff;border-radius:14px;
  padding:18px 20px;text-align:center;
}
.ls-aside-call p{margin:0 0 10px;color:rgba(255,255,255,.8);font-size:.92rem;}
.ls-aside-call .ls-btn-primary{display:block;}

/* the grid already constrains the column, so prose does not need its own cap */
.ls-page-grid .ls-content{max-width:none;}

@media (max-width:1040px){
  .ls-page-grid{grid-template-columns:1fr;gap:32px;}
  .ls-aside{position:static;order:2;max-width:520px;}
}

/* ------------------------------ get in touch ------------------------------ */
.ls-getintouch .ls-split{align-items:stretch;}
.ls-nap{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.ls-nap li{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--ls-ink-2);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--ls-radius);padding:15px 17px;
}
.ls-nap b{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;
  color:rgba(255,255,255,.5);font-weight:700;margin-bottom:3px;}
.ls-nap span{display:block;color:rgba(255,255,255,.88);}
.ls-nap a{color:#fff;text-decoration:none;font-weight:650;}
.ls-nap a:hover{text-decoration:underline;color:#fff;}
.ls-getintouch .ls-ico{
  background:color-mix(in srgb,var(--ls-primary) 26%,transparent);color:#fff;
}
.ls-nap-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:16px;}
.ls-nap-cta .ls-btn-secondary{color:#fff;border-color:rgba(255,255,255,.5);}
.ls-nap-cta .ls-btn-secondary:hover{background:#fff;color:var(--ls-ink);}

.ls-map{border-radius:14px;overflow:hidden;min-height:320px;
  border:1px solid rgba(255,255,255,.14);background:var(--ls-ink-2);}
.ls-map iframe{display:block;width:100%;height:100%;min-height:320px;border:0;}

/* =============================== header layout ============================
   Three tracks: brand (may shrink), nav (takes the slack, centred), call
   button (never shrinks). The brand is capped and clamped to two lines because
   these sites store an SEO title as the company name, which is long enough to
   push the nav onto a second row if left to size itself.
   ========================================================================= */
.ls-header .ls-wrap{
  display:flex;align-items:center;gap:24px;flex-wrap:nowrap;
  padding-top:12px;padding-bottom:12px;
}

.ls-brand{
  flex:0 1 auto;min-width:0;max-width:290px;
  font-size:16px;line-height:1.28;gap:10px;align-items:center;
}
.ls-brand > span:last-child{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.ls-brand-mark{width:32px;height:32px;flex:0 0 32px;font-size:15px;}
.ls-header .custom-logo-link{flex:0 0 auto;display:block;}
.ls-header .custom-logo{max-height:46px;width:auto;display:block;}

.ls-nav{flex:1 1 auto;min-width:0;margin-left:0;display:flex;justify-content:center;}
.ls-nav ul{
  display:flex;flex-wrap:nowrap;gap:20px;margin:0;padding:0;list-style:none;
  align-items:center;
}
.ls-nav li{white-space:nowrap;}
.ls-nav a{
  display:block;padding:6px 0;font-size:.96rem;font-weight:600;
  color:var(--ls-text);text-decoration:none;border-bottom:2px solid transparent;
}
.ls-nav a:hover{color:var(--ls-secondary);border-bottom-color:var(--ls-primary);}
.ls-nav .current-menu-item > a,
.ls-nav .current_page_item > a,
.ls-nav .current_page_ancestor > a{
  color:var(--ls-secondary);border-bottom-color:var(--ls-primary);
}

/* Sub-menus, for when a real menu with children is assigned. */
.ls-nav ul ul{
  position:absolute;display:none;flex-direction:column;gap:0;min-width:220px;
  background:var(--ls-bg);border:1px solid var(--ls-border);border-radius:10px;
  box-shadow:0 10px 28px rgba(16,24,40,.14);padding:6px;z-index:60;
}
.ls-nav li{position:relative;}
.ls-nav li:hover > ul,.ls-nav li:focus-within > ul{display:flex;}
.ls-nav ul ul a{padding:8px 10px;border-bottom:none;white-space:normal;}
.ls-nav ul ul a:hover{background:var(--ls-bg-alt);border-bottom:none;}

.ls-header .ls-call{
  flex:0 0 auto;font-size:.94rem;padding:10px 17px;line-height:1.2;
}

/* Below the desktop breakpoint the nav collapses behind the Menu button, so
   none of the above has to fight for room. */
@media (max-width:1080px){
  .ls-brand{max-width:220px;font-size:15px;}
  .ls-nav ul{gap:15px;}
  .ls-header .ls-call{font-size:.88rem;padding:9px 13px;}
}
@media (max-width:920px){
  .ls-header .ls-wrap{flex-wrap:wrap;gap:12px;}
  .ls-brand{max-width:none;flex:1 1 auto;}
  .ls-menu-toggle{flex:0 0 auto;margin-left:auto;}
  .ls-nav{
    display:none;flex:1 1 100%;order:3;justify-content:flex-start;
    border-top:1px solid var(--ls-border);padding-top:10px;
  }
  .ls-nav.is-open{display:flex;}
  .ls-nav ul{flex-direction:column;flex-wrap:wrap;gap:0;width:100%;align-items:stretch;}
  .ls-nav a{padding:11px 2px;border-bottom:1px solid var(--ls-border);}
  .ls-nav ul ul{position:static;display:flex;border:none;box-shadow:none;padding:0 0 0 14px;}
}

/* The toggle sits after the nav in source order (so the nav wraps to its own
   row on mobile) but must appear before the call button visually. */
.ls-menu-toggle{display:none;order:2;}
.ls-header .ls-call{order:3;}
@media (max-width:920px){
  .ls-menu-toggle{display:block;order:2;}
  .ls-nav{order:4;}
  .ls-header .ls-call{display:none;}
}

/* ============================= hero slideshow =============================
   Layered background images crossfading on a CSS animation. No library, no
   JavaScript — so it cannot break, and it degrades to a single still image
   when only one slide exists or motion is reduced.
   ========================================================================= */
.ls-hero-slides{position:absolute;inset:0;overflow:hidden;}
.ls-hero-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;will-change:opacity;
}
/* One slide: just show it. */
.ls-hero:not(.has-slides) .ls-hero-slide{opacity:1;animation:none;}

/* Two slides — 12s cycle. */
.ls-hero.slides-2 .ls-hero-slide{animation:ls-fade2 12s infinite;}
@keyframes ls-fade2{
  0%{opacity:0}  5%{opacity:1}  45%{opacity:1}  55%{opacity:0}  100%{opacity:0}
}
/* Three slides — 18s cycle, ~5s visible each with a 1s crossfade. */
.ls-hero.slides-3 .ls-hero-slide{animation:ls-fade3 18s infinite;}
@keyframes ls-fade3{
  0%{opacity:0}  3%{opacity:1}  30%{opacity:1}  36%{opacity:0}  100%{opacity:0}
}
/* The section already paints --ls-ink underneath, so a mid-cycle gap shows navy
   rather than white. No extra layer needed. */

@media (prefers-reduced-motion:reduce){
  .ls-hero .ls-hero-slide{animation:none!important;opacity:0;}
  .ls-hero .ls-hero-slide:first-child{opacity:1;}
}

/* A long fallback nav must never crush the brand or the call button: let it
   scroll horizontally rather than overflow the row. */
.ls-nav{overflow-x:auto;scrollbar-width:none;}
.ls-nav::-webkit-scrollbar{display:none;}
@media (max-width:920px){
  .ls-nav{overflow-x:visible;}
}