/* =============================================
   LOOPM TECHNOLOGIES — SHARED STYLES
   Fonts: Syne (headings) + DM Sans (body)
   Colors: --primary #224989 | --accent #C1141C
============================================= */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&display=swap');

:root {
  --primary: #224989;
  --accent:  #C1141C;
  --dark:    #060b18;
  --white:   #ffffff;
  --border:  rgba(255,255,255,0.08);
  --muted:   rgba(255,255,255,0.55);
  --card-bg: rgba(255,255,255,0.04);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }

body {
  font-family:'DM Sans',sans-serif;
  background: var(--dark);
  color: var(--white);
  overflow-x:hidden;
  min-height:100vh;
}

body::before {
  content:'';
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size:80px 80px;
  pointer-events:none;
  z-index:0;
}

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

/* ── SCROLL BAR ── */
#scroll-bar {
  position:fixed; top:0; left:0;
  width:0%; height:3px;
  background:linear-gradient(90deg,var(--accent),var(--primary));
  z-index:9999;
  transition:width 0.1s linear;
}

/* ── HEADER ── */
header {
  position:fixed; top:0; left:0;
  width:100%; padding:18px 48px;
  display:flex; align-items:center; justify-content:space-between;
  z-index:1000;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  background:rgba(6,11,24,0);
  border-bottom:1px solid transparent;
}
header.scrolled {
  padding:12px 48px;
  background:rgba(6,11,24,0.94);
  backdrop-filter:blur(24px);
  border-bottom-color:var(--border);
}

.logo { height:56px; width:140px; display:flex; align-items:center; position:relative; }
.logo img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:0.4s ease; }
.logo-icon { height:44px; opacity:1; }
.logo-full  { height:80px; opacity:0; }
.logo:hover .logo-icon { opacity:0; }
.logo:hover .logo-full  { opacity:1; }

.nav-desktop { display:flex; }
.nav-menu { display:flex; gap:36px; list-style:none; align-items:center; }
.nav-menu > li { position:relative; }
.nav-menu > li > a {
  font-family:'Syne',sans-serif; font-size:14px; font-weight:600;
  letter-spacing:0.05em; color:rgba(255,255,255,0.8);
  padding:8px 4px; display:block; position:relative;
  transition:color 0.3s ease;
}
.nav-menu > li > a::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:1px; background:var(--accent);
  transition:width 0.3s ease;
}
.nav-menu > li > a:hover { color:var(--white); }
.nav-menu > li > a:hover::after { width:100%; }

.dropdown-menu {
  position:absolute; top:calc(100% + 16px); left:-16px;
  background:rgba(6,11,24,0.97); backdrop-filter:blur(24px);
  border:1px solid var(--border); border-radius:14px;
  padding:12px 0; min-width:210px;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
  list-style:none; z-index:100;
}
.dropdown:hover .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-menu li a {
  display:block; padding:10px 24px;
  font-size:13.5px; font-weight:500;
  color:rgba(255,255,255,0.75);
  transition:all 0.25s ease;
  border-left:2px solid transparent;
}
.dropdown-menu li a:hover {
  color:var(--white); background:rgba(255,255,255,0.05);
  border-left-color:var(--accent); padding-left:28px;
}

.header-right { display:flex; align-items:center; gap:16px; }

.cta-btn {
  font-family:'Syne',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  padding:10px 24px; background:linear-gradient(135deg,var(--accent),#8b0d12);
  color:var(--white); border-radius:100px; display:inline-block;
  transition:all 0.3s ease; white-space:nowrap; position:relative; overflow:hidden;
}
.cta-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(193,20,28,0.45); }

.hamburger { display:none; flex-direction:column; justify-content:space-between; width:26px; height:19px; cursor:pointer; }
.hamburger span { display:block; height:2px; width:100%; background:var(--white); border-radius:2px; transition:0.3s; }
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(6px,6px); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(6px,-6px); }

@media (max-width:1024px) {
  .hamburger { display:flex !important; }
  .nav-desktop { display:block !important; width:100%; }
  header { flex-wrap:nowrap; }
  nav { position:absolute; top:100%; left:0; width:100%; z-index:999; }
  .nav-menu {
    flex-direction:column; align-items:flex-start; gap:0;
    max-height:0; overflow:hidden; padding:0;
    background:rgba(6,11,24,0.98); border-bottom:1px solid var(--border);
    transition:max-height 0.4s ease; width:100%;
  }
  .nav-menu.show { max-height:600px; padding:12px 0; overflow-y:auto; }
  .nav-menu > li { width:100%; }
  .nav-menu > li > a { padding:12px 28px; }
  .dropdown-menu { position:static; background:rgba(255,255,255,0.04); border-radius:0; display:none; width:100%; border:none; box-shadow:none; padding:6px 0; opacity:1; visibility:visible; transform:none; }
  .nav-menu li.active .dropdown-menu { display:block; }
}

@media (max-width:768px) {
  header { padding:14px 20px; }
  header.scrolled { padding:10px 20px; }
}

/* ── PAGE HERO ── */
.page-hero {
  position:relative;
  min-height:60vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:140px 24px 80px;
  overflow:hidden;
}
.page-hero-bg {
  position:absolute; inset:0;
  background:center/cover no-repeat;
  z-index:0;
}
.page-hero-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,11,24,0.55) 0%, rgba(6,11,24,0.92) 100%);
}
.page-hero-content { position:relative; z-index:1; max-width:780px; }

.page-eyebrow {
  font-family:'Syne',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:0.3em; text-transform:uppercase; color:var(--accent);
  margin-bottom:20px;
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.page-eyebrow::before, .page-eyebrow::after {
  content:''; width:36px; height:1px; background:var(--accent); opacity:0.6;
}

.page-hero h1 {
  font-family:'Syne',sans-serif; font-weight:800;
  font-size:clamp(2.4rem,5.5vw,4.2rem);
  line-height:1.08; letter-spacing:-0.025em;
  margin-bottom:20px;
  background:linear-gradient(145deg,#fff 30%,rgba(255,255,255,0.6));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.page-hero p {
  font-size:clamp(1rem,2vw,1.15rem);
  color:rgba(255,255,255,0.7); line-height:1.75;
  max-width:600px; margin:0 auto 36px;
}

/* ── SECTION BASE ── */
.section {
  position:relative; z-index:1;
  padding:100px 5%;
}

.section-label {
  font-family:'Syne',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.35em; text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px; justify-content:center; text-align:center;
}
.section-label::before,
.section-label::after {
  content:'';
  flex: 0 0 28px;
  height:1px;
  background:var(--accent);
  opacity: 0.7;
}

.section-title {
  font-family:'Syne',sans-serif;
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:800; text-align:center;
  letter-spacing:-0.02em; line-height:1.1;
  margin-bottom:14px;
  background:linear-gradient(145deg,#fff 40%,rgba(255,255,255,0.6));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.section-subtitle {
  text-align:center; color:var(--muted);
  font-size:1rem; line-height:1.7;
  max-width:520px; margin:0 auto 64px;
}

/* ── FEATURE CARDS (used on service pages) ── */
.feat-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:22px;
  max-width:1200px; margin:0 auto;
}

.feat-card {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:20px;
  padding:36px 30px;
  position:relative; overflow:hidden;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* Feat-card image (B&W, colorizes on hover) */
.feat-card::after {
  content:''; position:absolute;
  bottom:0; left:0; width:0; height:2px;
  background:linear-gradient(90deg,var(--accent),var(--primary));
  transition:width 0.4s ease;
  z-index:2;
}
.feat-card:hover { border-color:rgba(193,20,28,0.35); transform:translateY(-8px); box-shadow:0 32px 72px rgba(0,0,0,0.45); }
.feat-card:hover::after { width:100%; }

.feat-card h3 {
  font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:700;
  color:var(--white); margin-bottom:12px; letter-spacing:-0.01em;
}
.feat-card p { font-size:0.875rem; line-height:1.75; color:var(--muted); transition:color 0.3s; }
.feat-card:hover p { color:rgba(255,255,255,0.75); }

/* ── PROCESS / PHASE STEPS ── */
.steps-list { display:flex; flex-direction:column; gap:0; max-width:820px; margin:0 auto; }
.step {
  display:flex; gap:32px; align-items:flex-start;
  padding:36px 0; border-bottom:1px solid var(--border);
  transition:all 0.3s ease;
}
.step:last-child { border-bottom:none; }
.step:hover { transform:translateX(8px); }
.step-num {
  font-family:'Syne',sans-serif; font-size:2.8rem; font-weight:800;
  color:rgba(193,20,28,0.18); min-width:72px; line-height:1;
  transition:color 0.3s ease;
}
.step:hover .step-num { color:rgba(193,20,28,0.4); }
.step-body h2 { font-family:'Syne',sans-serif; font-size:1.25rem; font-weight:700; margin-bottom:10px; }
.step-body p  { font-size:0.9rem; line-height:1.8; color:var(--muted); }

/* ── TESTIMONIAL CARDS ── */
.testi-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px; max-width:1100px; margin:0 auto;
}
.testi-card {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:20px; padding:36px;
  transition:all 0.4s ease; position:relative; overflow:hidden;
}
.testi-card::before {
  content:'"'; position:absolute; top:16px; right:24px;
  font-size:80px; font-family:'Syne',sans-serif; font-weight:800;
  color:rgba(193,20,28,0.1); line-height:1;
}
.testi-card:hover { border-color:rgba(193,20,28,0.3); transform:translateY(-6px); box-shadow:0 28px 64px rgba(0,0,0,0.4); }
.testi-card h3 { font-family:'Syne',sans-serif; font-size:1.05rem; font-weight:700; margin-bottom:12px; color:var(--accent); }
.testi-card p  { font-size:0.9rem; line-height:1.8; color:var(--muted); font-style:italic; }

/* ── CASE STUDY CARDS ── */
.case-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:24px; max-width:1200px; margin:0 auto;
}
.case-card {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:20px; padding:36px;
  position:relative; overflow:hidden;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.case-card::after {
  content:''; position:absolute;
  bottom:0; left:0; width:0; height:2px;
  background:linear-gradient(90deg,var(--accent),var(--primary));
  transition:width 0.4s ease;
}
.case-card:hover { border-color:rgba(193,20,28,0.35); transform:translateY(-8px); box-shadow:0 32px 72px rgba(0,0,0,0.45); }
.case-card:hover::after { width:100%; }
.case-card h2 { font-family:'Syne',sans-serif; font-size:1.3rem; font-weight:700; margin-bottom:12px; }
.case-card p  { font-size:0.875rem; line-height:1.8; color:var(--muted); }
.case-tag {
  display:inline-block; font-size:10px; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent); border:1px solid rgba(193,20,28,0.3);
  border-radius:100px; padding:4px 12px; margin-bottom:16px;
}

/* ── TEAM CARDS ── */
.team-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px; max-width:900px; margin:0 auto;
}
.team-card {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:20px; padding:40px 28px;
  text-align:center; transition:all 0.4s ease;
}
.team-card:hover { border-color:rgba(193,20,28,0.35); transform:translateY(-8px); box-shadow:0 28px 60px rgba(0,0,0,0.4); }
.team-avatar {
  width:80px; height:80px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--primary));
  margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Syne',sans-serif; font-size:28px; font-weight:800;
  color:var(--white);
  border:2px solid rgba(255,255,255,0.1);
}
.team-card h3 { font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:700; margin-bottom:6px; }
.team-card p  { font-size:0.85rem; color:var(--accent); font-weight:500; letter-spacing:0.04em; }

/* ── CONTACT FORM ── */
.contact-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:60px; max-width:1100px; margin:0 auto;
}
@media (max-width:860px) { .contact-grid { grid-template-columns:1fr; } }

.contact-info h2 { font-family:'Syne',sans-serif; font-size:1.8rem; font-weight:800; margin-bottom:24px; }
.contact-info p  { font-size:0.95rem; line-height:1.8; color:var(--muted); margin-bottom:36px; }

.contact-detail { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.contact-detail-text h4 { font-family:'Syne',sans-serif; font-size:0.85rem; font-weight:600; margin-bottom:2px; color:var(--accent); }
.contact-detail-text p  { font-size:0.875rem; color:var(--muted); }

.contact-form { display:flex; flex-direction:column; gap:18px; }
.form-group { display:flex; flex-direction:column; gap:8px; }
.form-group label { font-family:'Syne',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.form-group input,
.form-group textarea,
.form-group select {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:10px; padding:14px 18px;
  color:var(--white); font-family:'DM Sans',sans-serif; font-size:0.95rem;
  transition:border-color 0.3s ease; resize:vertical;
  outline:none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color:rgba(193,20,28,0.5); }
.form-group input::placeholder,
.form-group textarea::placeholder { color:rgba(255,255,255,0.25); }
.form-group textarea { min-height:130px; }
.form-group select option { background:var(--dark); }

.btn-submit {
  font-family:'Syne',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  padding:16px 44px; background:var(--accent);
  color:var(--white); border:none; border-radius:6px;
  cursor:pointer; position:relative; overflow:hidden;
  transition:all 0.35s ease; align-self:flex-start;
}
.btn-submit:hover { transform:translateY(-3px); box-shadow:0 14px 40px rgba(193,20,28,0.5); }

/* ── INLINE CONTENT BLOCK ── */
.content-split {
  display:grid; grid-template-columns:1fr 1fr;
  gap:72px; align-items:center; max-width:1100px; margin:0 auto;
}
@media (max-width:860px) { .content-split { grid-template-columns:1fr; gap:40px; } }

.content-split img {
  border-radius:20px; border:1px solid var(--border);
  width:100%; object-fit:cover; aspect-ratio:4/3;
}

.content-text h2 { font-family:'Syne',sans-serif; font-size:clamp(1.6rem,2.8vw,2.2rem); font-weight:800; margin-bottom:20px; line-height:1.2; }
.content-text p  { font-size:0.95rem; line-height:1.85; color:var(--muted); margin-bottom:18px; }
.content-text p strong { color:var(--white); }

/* ── REVEAL ANIMATION ── */
.reveal { opacity:0; transform:translateY(36px); transition:opacity 0.9s ease, transform 0.9s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }

/* ── FOOTER ── */
.site-footer { background:#030710; padding:72px 5% 0; border-top:1px solid var(--border); position:relative; z-index:1; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px; max-width:1200px; margin:0 auto 60px; }
@media (max-width:900px) { .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .footer-grid { grid-template-columns:1fr; } }

.footer-brand { display:flex; flex-direction:column; gap:16px; }
.footer-logo  { height:44px; }
.footer-brand p { font-size:0.88rem; line-height:1.8; color:rgba(255,255,255,0.5); }
.footer-socials { display:flex; gap:10px; margin-top:8px; }
.social-link {
  width:36px; height:36px; border-radius:8px;
  background:rgba(255,255,255,0.05); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:rgba(255,255,255,0.5); transition:all 0.3s ease;
}
.social-link:hover { background:var(--accent); border-color:var(--accent); color:var(--white); transform:translateY(-2px); }

.footer-col h4 {
  font-family:'Syne',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--accent); margin-bottom:20px;
}
.footer-col p, .footer-col address { font-size:0.875rem; line-height:1.9; color:rgba(255,255,255,0.5); font-style:normal; }
.footer-bottom { border-top:1px solid var(--border); padding:24px 0; text-align:center; max-width:1200px; margin:0 auto; }
.footer-bottom p { font-size:12px; color:rgba(255,255,255,0.3); letter-spacing:0.02em; }

/* ── GLOBAL OVERRIDES ── */
/* Remove hyphens site-wide */
* { hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; word-break: keep-all; }

/* B&W filter on content images, colorize on hover */
img:not(.logo-icon):not(.logo-full):not(.footer-logo) {
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}
img:not(.logo-icon):not(.logo-full):not(.footer-logo):hover {
  filter: grayscale(0%);
}

/* ── SHARED SCRIPTS HELPERS ── */