/* =========================================================
   Lightship Engineering — Marketing site
   Primary color: logo deep royal blue
   ========================================================= */

:root{
  --navy:        #1A2A8F;   /* logo blue */
  --navy-deep:   #131F6B;
  --navy-soft:   #2B3CA8;
  --accent:      #E8743B;   /* warm CTA accent */
  --accent-hov:  #D86328;
  --ink:         #1A1F2B;
  --body:        #4A5566;
  --muted:       #7D8696;
  --line:        #E2E6EC;
  --bg:          #FFFFFF;
  --bg-alt:      #F5F7FA;

  --maxw: 1200px;
  --radius: 6px;
  --shadow-sm: 0 1px 2px rgba(26,42,143,.06), 0 1px 3px rgba(26,42,143,.06);
  --shadow-md: 0 4px 14px rgba(26,42,143,.12);

  --f-sans: "Inter","Helvetica Neue",Arial,system-ui,sans-serif;
  --f-display: "Inter","Helvetica Neue",Arial,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}

html,body{margin:0;padding:0;}
body{
  font-family:var(--f-sans);
  color:var(--body);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

/* ========================= BUTTONS ========================= */
.btn{
  display:inline-block;
  font-weight:600;
  font-size:13px;
  letter-spacing:.06em;
  padding:12px 22px;
  border-radius:var(--radius);
  border:1.5px solid transparent;
  cursor:pointer;
  transition:all .15s ease;
  text-transform:uppercase;
  line-height:1;
}
.btn-sm{padding:9px 16px;font-size:12px;}
.btn-primary{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
}
.btn-primary:hover{background:var(--navy-deep);border-color:var(--navy-deep);}
.btn-outline-light{
  background:transparent;
  color:#fff;
  border-color:#fff;
}
.btn-outline-light:hover{background:#fff;color:var(--navy);}
.btn-accent{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.btn-accent:hover{background:var(--accent-hov);border-color:var(--accent-hov);}

/* ========================= HEADER ========================= */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;
}
.header-inner{
  display:flex;
  align-items:center;
  gap:32px;
  padding:14px 24px;
}
.brand{display:flex;align-items:center;gap:12px;color:var(--navy);}
.brand-logo{
  width:46px;
  height:46px;
  border-radius:4px;
  object-fit:contain;
  display:block;
}
.brand-name strong{
  display:block;
  font-size:14px;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--navy);
  line-height:1;
}
.brand-name em{
  display:block;
  font-style:normal;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.32em;
  color:var(--navy);
  margin-top:3px;
}

.primary-nav{
  display:flex;
  gap:28px;
  margin-left:24px;
}
.primary-nav a{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--navy);
  padding:6px 0;
  border-bottom:2px solid transparent;
}
.primary-nav a:hover{border-bottom-color:var(--accent);}

.header-meta{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:18px;
  font-size:12.5px;
  color:var(--navy);
  font-weight:500;
}
.meta-item{display:inline-flex;align-items:center;gap:6px;}

/* ========================= HERO ========================= */
.hero{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:#000;
}
.hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center top;
  z-index:-1;
}
.hero-bg-before{
  background-image:url('../assets/banner - before.png');
}
.hero-bg-after{
  background-image:url('../assets/banner - after.png');
  clip-path:inset(0 100% 0 0);
  -webkit-clip-path:inset(0 100% 0 0);
  animation:heroWipe 15s 1 ease-out forwards;
  will-change:clip-path;
}
/* Single L→R wipe from old banner to new. Runs exactly once on first
   paint, then stops with the new banner fully revealed and the page
   permanently displaying banner-after. animation-fill-mode: forwards
   freezes the final keyframe so the banner does not reset. */
@keyframes heroWipe{
  0%   { clip-path:inset(0 100% 0 0); -webkit-clip-path:inset(0 100% 0 0); }   /* full old */
  100% { clip-path:inset(0 0 0 0);    -webkit-clip-path:inset(0 0 0 0); }      /* full new — held */
}

/* White glow line that follows the clip edge, both serving as the visual
   cue for the transition AND visually softening the otherwise-hard clip
   line. Center of the 140px-wide soft white band sits directly on the
   clip boundary, so the band straddles new (left) and old (right) banners. */
.hero-wipe-line{
  position:absolute;
  top:0; bottom:0;
  left:0;
  width:160px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.2) 25%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,.2) 75%,
    transparent 100%
  );
  filter:blur(8px);
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  transform:translateX(-80px);
  will-change:transform,opacity;
  animation:heroWipeLine 15s 1 ease-out forwards;
}
/* Glow runs once in lockstep with the wipe, then stays parked off the
   right edge at opacity 0 — no further movement. */
@keyframes heroWipeLine{
  0%   { transform:translateX(-80px); opacity:.95; }
  95%  { opacity:.95; }
  100% { transform:translateX(calc(100vw - 80px)); opacity:0; }
}
.hero-content{
  color:#fff;
  padding:90px 24px;
  max-width:var(--maxw);
  position:relative;
  z-index:1;
}
.hero-content h1{
  font-family:var(--f-display);
  font-size:48px;
  line-height:1.1;
  font-weight:700;
  margin:0 0 18px;
  letter-spacing:-.01em;
  text-shadow:0 2px 16px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.6);
}
.hero-sub{
  font-size:18px;
  max-width:560px;
  margin:0 0 32px;
  color:#fff;
  line-height:1.55;
  text-shadow:0 1px 8px rgba(0,0,0,.7);
}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}

/* ========================= TRUST STRIP ========================= */
.trust-strip{
  background:var(--navy);
  color:#fff;
  padding:28px 0;
}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
}
.trust-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 24px;
  border-right:1px solid rgba(255,255,255,.15);
}
.trust-item:last-child{border-right:none;}
.trust-icon{
  color:#9AB7D6;
  display:inline-flex;
  flex-shrink:0;
}
.trust-label{
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  margin:0 0 4px;
  color:#fff;
}
.trust-desc{
  font-size:12.5px;
  color:#C5CFE3;
  margin:0;
  line-height:1.4;
}

/* ========================= SECTIONS ========================= */
.section{padding:80px 0;}
.section-alt{background:var(--bg-alt);}
.eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--accent);
  margin:0 0 10px;
  text-transform:uppercase;
}
.eyebrow.center{text-align:center;}
.section-title{
  font-family:var(--f-display);
  color:var(--navy);
  font-size:32px;
  line-height:1.2;
  font-weight:700;
  margin:0 0 48px;
  letter-spacing:-.01em;
}
.section-title.center{text-align:center;}
.row-between{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:40px;
}
.row-between .section-title{margin-bottom:0;}
.view-all{
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--navy);
  white-space:nowrap;
}
.view-all:hover{color:var(--accent);}

/* ========================= HOW WE HELP / PROCESS ========================= */
.process-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
.process-step{
  position:relative;
  padding:32px 24px 24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-align:center;
}
.process-num{
  display:inline-flex;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  background:var(--navy);
  color:#fff;
  font-weight:700;
  border-radius:50%;
  margin-bottom:14px;
  font-size:18px;
}
.process-step h3{
  font-size:15px;
  font-weight:800;
  letter-spacing:.10em;
  color:var(--navy);
  margin:0 0 8px;
}
.process-step p{
  font-size:14.5px;
  color:var(--body);
  margin:0;
}

/* ========================= SERVICES GRID ========================= */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.service-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 26px;
  transition:all .2s ease;
  display:flex;
  flex-direction:column;
  cursor:pointer;
}
.service-card:hover{
  border-color:var(--navy);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.service-icon{
  color:var(--navy);
  margin-bottom:18px;
}
.service-card h3{
  font-size:16px;
  font-weight:700;
  color:var(--navy);
  margin:0 0 10px;
  letter-spacing:.02em;
}
.service-card p{
  font-size:14.5px;
  margin:0 0 18px;
  color:var(--body);
  flex:1;
}
.learn-more{
  font-size:12px;
  font-weight:700;
  letter-spacing:.10em;
  color:var(--accent);
  align-self:flex-start;
}
.learn-more:hover{color:var(--accent-hov);}

/* ========================= PROJECTS GRID ========================= */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.project-card{
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--navy);
  border:1px solid var(--navy);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  cursor:pointer;
}
.project-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  background:var(--navy-deep);
}
.project-band{
  background:transparent;
  color:#fff;
  padding:22px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.project-band h3{
  font-size:14.5px;
  font-weight:700;
  margin:0;
  line-height:1.35;
}
.project-band .arrow{
  color:var(--accent);
  font-size:18px;
  font-weight:700;
  flex-shrink:0;
}

/* ========================= VALUES GRID ========================= */
.values-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}
.value-card{text-align:left;}
.value-icon{
  width:54px;height:54px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:inline-flex;
  align-items:center;justify-content:center;
  color:var(--navy);
  margin-bottom:16px;
}
.value-card h3{
  font-size:16px;
  font-weight:700;
  color:var(--navy);
  margin:0 0 8px;
}
.value-card p{
  font-size:14.5px;
  margin:0;
  color:var(--body);
}

/* ========================= INSIGHTS GRID ========================= */
.insights-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.insight-card{
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:all .2s ease;
  cursor:pointer;
  color:#fff;
  position:relative;
  min-height:180px;
}
.insight-card::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 70% 20%, rgba(255,255,255,.16), transparent 65%);
  pointer-events:none;
}
.insight-card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}

/* Card backgrounds — one unique gradient per insight */
.insight-bg-1  { background:linear-gradient(135deg,#0E7490,#06B6D4); }
.insight-bg-2  { background:linear-gradient(135deg,#1A2A8F,#3F58D6); }
.insight-bg-3  { background:linear-gradient(135deg,#7C2D12,#D97706); }
.insight-bg-4  { background:linear-gradient(135deg,#2F855A,#48BB78); }
.insight-bg-5  { background:linear-gradient(135deg,#0F766E,#14B8A6); }
.insight-bg-6  { background:linear-gradient(135deg,#374151,#6B7280); }
.insight-bg-7  { background:linear-gradient(135deg,#15803D,#4ADE80); }
.insight-bg-8  { background:linear-gradient(135deg,#1E3A8A,#3B82F6); }
.insight-bg-9  { background:linear-gradient(135deg,#065F46,#10B981); }
.insight-bg-10 { background:linear-gradient(135deg,#991B1B,#EF4444); }
.insight-bg-11 { background:linear-gradient(135deg,#0E7490,#22D3EE); }
.insight-bg-12 { background:linear-gradient(135deg,#155E75,#06B6D4); }
.insight-bg-13 { background:linear-gradient(135deg,#78350F,#B45309); }
.insight-bg-14 { background:linear-gradient(135deg,#B45309,#F59E0B); }
.insight-bg-15 { background:linear-gradient(135deg,#1A2A8F,#6366F1); }

.insight-body{
  padding:24px 22px 24px;
  display:flex;
  flex-direction:column;
  flex:1;
  position:relative;
  z-index:1;
}
.insight-date{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  color:rgba(255,255,255,.78);
  margin:0 0 10px;
}
.insight-body h3{
  font-size:16px;
  font-weight:700;
  color:#fff;
  margin:0 0 16px;
  line-height:1.35;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
  flex:1;
}
.insight-card .learn-more{
  color:#fff;
  align-self:flex-start;
  border-bottom:1px solid rgba(255,255,255,.5);
  padding-bottom:1px;
}
.insight-card .learn-more:hover{
  color:#fff;
  border-bottom-color:#fff;
}

/* ========================= CONTACT ========================= */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.contact-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 26px;
  text-align:center;
}
.contact-icon{
  width:56px;height:56px;
  margin:0 auto 14px;
  background:var(--navy);
  color:#fff;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.contact-card h3{
  font-size:14px;
  font-weight:800;
  letter-spacing:.10em;
  color:var(--navy);
  margin:0 0 10px;
  text-transform:uppercase;
}
.contact-card p{
  margin:0;
  font-size:14.5px;
  color:var(--body);
  line-height:1.55;
}
.contact-card a{color:var(--navy);font-weight:600;}
.contact-card a:hover{color:var(--accent);}

/* ========================= FOOTER ========================= */
.site-footer{background:var(--navy-deep);color:#C7D2E0;}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1.4fr;
  gap:48px;
  padding:56px 24px 40px;
  align-items:flex-start;
}
.brand-light .brand-name strong,
.brand-light .brand-name em{color:#fff;}
.brand-light{color:#fff;}
.brand-logo-footer{
  background:#fff;
  padding:3px;
}

.footer-col h4{
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  color:#fff;
  margin:0 0 16px;
}
.footer-col a,
.footer-col p{
  display:block;
  font-size:13.5px;
  color:#A7B5C7;
  padding:4px 0;
  margin:0;
}
.footer-col a{cursor:pointer;}
.footer-col a:hover{color:#fff;}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.10);
  padding:18px 0;
  font-size:12px;
  color:#8693A6;
}
.footer-bottom-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
.footer-bottom a{color:#A7B5C7;}
.footer-bottom a:hover{color:#fff;}

/* ========================= MODAL ========================= */
.modal-root{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  z-index:200;
  padding:24px;
}
.modal-root.is-open{display:flex;}
.modal-backdrop{
  position:absolute; inset:0;
  background:rgba(11,20,60,.62);
  backdrop-filter:blur(2px);
}
.modal-window{
  position:relative;
  background:#fff;
  width:100%;
  max-width:760px;
  max-height:90vh;
  border-radius:8px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.modal-close{
  position:absolute;
  top:10px; right:14px;
  background:transparent;
  border:0;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  color:var(--muted);
  width:36px; height:36px;
  border-radius:50%;
  z-index:2;
}
.modal-close:hover{background:var(--bg-alt);color:var(--navy);}
.modal-content{
  padding:36px 40px 32px;
  overflow-y:auto;
}
.modal-content .modal-eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--accent);
  margin:0 0 12px;
  text-transform:uppercase;
}
.modal-content h2{
  font-family:var(--f-display);
  color:var(--navy);
  font-size:24px;
  line-height:1.25;
  font-weight:700;
  margin:0 0 18px;
  letter-spacing:-.01em;
}
.modal-content h3{
  font-size:13px;
  font-weight:800;
  color:var(--navy);
  letter-spacing:.10em;
  margin:22px 0 8px;
  text-transform:uppercase;
}
.modal-content p{
  font-size:15px;
  color:var(--body);
  margin:0 0 12px;
  line-height:1.6;
}
.modal-content .modal-deck{
  font-size:16px;
  color:var(--ink);
  font-weight:500;
  margin:0 0 18px;
}
.modal-content ul{
  margin:0 0 14px;
  padding-left:20px;
}
.modal-content li{
  font-size:15px;
  color:var(--body);
  margin:4px 0;
  line-height:1.55;
}
.modal-content .modal-services{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:13.5px;
  color:var(--muted);
}
.modal-content .modal-services strong{color:var(--navy);}

/* ========================= RESPONSIVE ========================= */
@media (max-width: 1024px){
  .primary-nav{display:none;}
  .header-meta .meta-item{display:none;}
  .hero-content h1{font-size:38px;}
  .trust-grid{grid-template-columns:repeat(3,1fr);gap:8px 0;}
  .trust-item{padding:8px 16px;}
  .process-row,
  .services-grid,
  .projects-grid,
  .insights-grid{grid-template-columns:repeat(2,1fr);}
  .values-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:span 2;}
}

@media (max-width: 600px){
  .header-inner{gap:12px;}
  .hero{min-height:auto;}
  .hero-content{padding:64px 20px;}
  .hero-content h1{font-size:30px;}
  .hero-sub{font-size:15.5px;}
  .section{padding:56px 0;}
  .section-title{font-size:24px;margin-bottom:32px;}
  .trust-grid{grid-template-columns:1fr;}
  .trust-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:14px;}
  .trust-item:last-child{border-bottom:none;}
  .process-row,
  .services-grid,
  .projects-grid,
  .values-grid,
  .insights-grid{grid-template-columns:1fr;}
  .row-between{flex-direction:column;align-items:flex-start;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-brand{grid-column:span 1;}
  .modal-content{padding:28px 22px 24px;}
  .modal-content h2{font-size:20px;}
}