:root {
  --bg: #08090b;
  --surface: #0f1114;
  --surface-2: #15181c;
  --line: rgba(255,255,255,.11);
  --line-strong: rgba(255,255,255,.2);
  --text: #f4f5f6;
  --muted: #a4aab2;
  --accent: #BDC2C7;
  --accent-soft: rgba(189,194,199,.12);
  --max: 1240px;
  --radius: 22px;
  --shadow: 0 24px 70px rgba(0,0,0,.38);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 0%, rgba(189,194,199,.10), transparent 28rem),
    linear-gradient(180deg, #0a0b0d 0%, #08090b 44%, #090a0c 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.025) 75%),
    linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.025) 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }

.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.section { padding: 112px 0; }
.section-tight { padding: 76px 0; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #d7d9dc;
  font-size: .77rem;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--accent); }
.section-title {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2.2rem, 4.7vw, 4.7rem);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 760;
}
.section-copy { max-width: 700px; margin: 24px 0 0; color: var(--muted); font-size: 1.08rem; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(8,9,11,.78);
  border-color: var(--line);
  backdrop-filter: blur(18px);
}
.nav { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  line-height: 1;
  white-space: nowrap;
}
.brand-lf {
  display: inline-block;
  font-size: 1.34rem;
  font-weight: 900;
  letter-spacing: -.075em;
  transform: skewX(-8deg);
  transform-origin: left bottom;
}
.brand-customs {
  font-size: .77rem;
  font-weight: 760;
  letter-spacing: .28em;
  color: #dfe3e8;
}
.nav-links { display: flex; align-items: center; gap: 28px; color: #d7dade; font-size: .91rem; }
.nav-links a { transition: color .2s ease; }
.nav-links a:hover { color: #fff; }
.nav-instagram { display: inline-flex; align-items: center; gap: 8px; }
.menu-toggle { display: none; border: 0; background: transparent; color: #fff; padding: 8px; cursor: pointer; }
.menu-toggle span { display: block; width: 24px; height: 1px; background: currentColor; margin: 6px 0; }

.hero { min-height: 100svh; display: flex; align-items: stretch; padding-top: 82px; position: relative; overflow: hidden; }
.hero-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(380px, .97fr); }
.hero-content { display: flex; align-items: center; padding: 86px max(6vw, 36px) 86px max(5vw, 32px); }
.hero-inner { max-width: 760px; margin-left: auto; }
.hero h1 { margin: 0; font-size: clamp(3.45rem, 7.4vw, 7.4rem); line-height: .88; letter-spacing: -.06em; font-weight: 780; }
.hero h1 span { display: block; color: #aeb3b9; }
.hero-copy { max-width: 650px; margin: 30px 0 0; color: #b6bbc2; font-size: clamp(1.02rem, 1.4vw, 1.18rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: .91rem;
  font-weight: 720;
  border: 1px solid transparent;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: #f0f1f2; color: #090a0c; }
.btn-secondary { border-color: var(--line-strong); background: rgba(255,255,255,.035); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 54px; padding-top: 26px; border-top: 1px solid var(--line); color: #858c94; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-media { position: relative; min-height: 700px; overflow: hidden; background: #111; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 118%; object-fit: cover; object-position: 50% 49%; transform: translateY(-7%); filter: saturate(.72) contrast(1.06) brightness(.73); }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, transparent 24%), linear-gradient(0deg, rgba(8,9,11,.74) 0%, transparent 46%); }
.hero-badge { position: absolute; right: 28px; bottom: 28px; z-index: 3; max-width: 250px; padding: 18px 20px; background: rgba(8,9,11,.72); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(14px); }
.hero-badge strong { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.hero-badge span { display: block; margin-top: 7px; color: var(--muted); font-size: .85rem; }

.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 54px; }
.service-card { min-height: 278px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); position: relative; overflow: hidden; }
.service-card::after { content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%; background: var(--accent-soft); filter: blur(34px); right: -55px; bottom: -55px; opacity: 0; transition: opacity .25s ease; }
.service-card:hover::after { opacity: 1; }
.service-index { color: #666d76; font-size: .74rem; letter-spacing: .12em; }
.service-card h3 { margin: 72px 0 12px; font-size: 1.35rem; letter-spacing: -.025em; }
.service-card p { margin: 0; color: var(--muted); font-size: .93rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.split-media { position: relative; min-height: 610px; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); background: #111; box-shadow: var(--shadow); }
.split-media img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; filter: saturate(.75) contrast(1.04); }
.split-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(8,9,11,.62)); }
.feature-list { display: grid; gap: 1px; margin-top: 36px; border-top: 1px solid var(--line); }
.feature { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.feature-num { color: var(--accent); font-size: .78rem; letter-spacing: .1em; }
.feature strong { display: block; margin-bottom: 5px; }
.feature span { color: var(--muted); font-size: .92rem; }

.projects-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 46px; }
.projects-head .section-copy { margin-bottom: 6px; }
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 88px; gap: 12px; }
.gallery-item { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: #111; cursor: zoom-in; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .3s ease; filter: saturate(.82) contrast(1.03); }
.gallery-item:hover img { transform: scale(1.035); filter: saturate(1); }
.gallery-item::after { content: attr(data-label); position: absolute; left: 16px; bottom: 14px; padding: 7px 10px; background: rgba(8,9,11,.66); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; backdrop-filter: blur(12px); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateY(5px); transition: .25s ease; }
.gallery-item:hover::after { opacity: 1; transform: translateY(0); }
.g1 { grid-column: span 5; grid-row: span 5; }
.g2 { grid-column: span 4; grid-row: span 3; }
.g3 { grid-column: span 3; grid-row: span 3; }
.g4 { grid-column: span 3; grid-row: span 3; }
.g5 { grid-column: span 4; grid-row: span 5; }
.g6 { grid-column: span 3; grid-row: span 3; }
.g7 { grid-column: span 5; grid-row: span 3; }
.g8 { grid-column: span 4; grid-row: span 3; }
.g9 { grid-column: span 3; grid-row: span 3; }

.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 56px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.process-step { padding: 34px 26px 38px; border-right: 1px solid var(--line); }
.process-step:last-child { border-right: 0; }
.process-step small { color: var(--accent); font-size: .74rem; letter-spacing: .12em; }
.process-step h3 { margin: 48px 0 10px; font-size: 1.18rem; }
.process-step p { margin: 0; color: var(--muted); font-size: .9rem; }

.cta { position: relative; overflow: hidden; padding: 92px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 82% 50%, rgba(189,194,199,.13), transparent 25rem); pointer-events: none; }
.cta-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: end; position: relative; }
.cta h2 { margin: 0; font-size: clamp(2.8rem, 5.8vw, 6.3rem); line-height: .9; letter-spacing: -.055em; }
.cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cta-email { font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 700; border-bottom: 1px solid var(--line-strong); padding-bottom: 4px; }
.cta-note { color: var(--muted); max-width: 400px; font-size: .91rem; }

.site-footer { padding: 42px 0 34px; }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 30px; color: #7f868e; font-size: .82rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-links a:hover { color: #fff; }

.page-hero { padding: 170px 0 80px; border-bottom: 1px solid var(--line); }
.page-hero h1 { margin: 0; font-size: clamp(3rem, 6vw, 6.2rem); letter-spacing: -.055em; line-height: .92; }
.page-hero p { max-width: 650px; color: var(--muted); font-size: 1.06rem; margin: 22px 0 0; }
.content-page { padding: 74px 0 110px; }
.content-narrow { max-width: 820px; }
.content-narrow h2 { margin: 46px 0 12px; font-size: 1.45rem; }
.content-narrow h2:first-child { margin-top: 0; }
.content-narrow p, .content-narrow li { color: #b1b6bd; }
.content-narrow ul { padding-left: 22px; }
.legal-placeholder { padding: 20px; border: 1px solid rgba(189,194,199,.45); background: var(--accent-soft); border-radius: 14px; color: #f2c5bb; }
.contact-card { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.025); margin-top: 22px; }
.contact-card strong { display: block; margin-bottom: 5px; font-size: 1.05rem; }
.contact-card span { color: var(--muted); }

.lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 28px; background: rgba(0,0,0,.9); backdrop-filter: blur(9px); }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(1200px, 92vw); max-height: 88vh; object-fit: contain; border-radius: 12px; box-shadow: 0 40px 100px rgba(0,0,0,.58); }
.lightbox button { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; font-size: 1.4rem; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-content { min-height: 640px; padding: 80px 32px 68px; }
  .hero-inner { max-width: 900px; margin: 0 auto; }
  .hero-media { min-height: 560px; }
  .hero-media::after { background: linear-gradient(180deg, var(--bg) 0%, transparent 20%), linear-gradient(0deg, rgba(8,9,11,.6), transparent 50%); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split-media { min-height: 540px; order: -1; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-step:nth-child(2) { border-right: 0; }
  .process-step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .cta-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 28px, var(--max)); }
  .section { padding: 82px 0; }
  .section-tight { padding: 58px 0; }
  .nav { height: 70px; }
  .menu-toggle { display: block; }
  .nav-links { position: fixed; top: 70px; left: 14px; right: 14px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(10,11,13,.96); backdrop-filter: blur(16px); }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 14px 12px; border-bottom: 1px solid var(--line); }
  .nav-links a:last-child { border-bottom: 0; }
  .hero { padding-top: 70px; }
  .hero-content { min-height: 590px; padding: 68px 20px 58px; }
  .hero h1 { font-size: clamp(3.2rem, 16vw, 5.2rem); }
  .hero-meta { gap: 14px 22px; }
  .hero-media { min-height: 500px; }
  .hero-badge { left: 18px; right: 18px; bottom: 18px; max-width: none; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 230px; }
  .service-card h3 { margin-top: 52px; }
  .projects-head { display: block; }
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 190px; gap: 9px; }
  .gallery-item { grid-column: span 1 !important; grid-row: span 1 !important; }
  .gallery-item:nth-child(1), .gallery-item:nth-child(5), .gallery-item:nth-child(7) { grid-column: span 2 !important; }
  .process-grid { grid-template-columns: 1fr; }
  .process-step { border-right: 0; border-bottom: 1px solid var(--line); }
  .process-step:last-child { border-bottom: 0; }
  .process-step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .footer-grid { align-items: flex-start; flex-direction: column; }
  .page-hero { padding: 138px 0 58px; }
  .contact-card { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* =========================================================
   LF CUSTOMS - stronger section separation
   ========================================================= */

.section,
.section-tight,
.cta {
  position: relative;
  isolation: isolate;
}

.section::before,
.section-tight::before,
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* alternating section depth */
#services {
  background:
    radial-gradient(circle at 85% 20%, rgba(189,194,199,.035), transparent 28rem),
    linear-gradient(180deg, rgba(255,255,255,.018) 0%, rgba(255,255,255,.006) 100%);
}

.section-tight {
  background:
    linear-gradient(180deg, rgba(255,255,255,.012) 0%, rgba(0,0,0,.14) 100%);
}

#projects {
  background:
    radial-gradient(circle at 15% 35%, rgba(255,255,255,.022), transparent 30rem),
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(255,255,255,.012) 100%);
}

#process {
  background:
    linear-gradient(180deg, rgba(255,255,255,.016) 0%, rgba(0,0,0,.16) 100%);
}

/* visible but subtle section separators */
#services,
.section-tight,
#projects,
#process,
.cta {
  border-top: 1px solid rgba(255,255,255,.055);
}

#services::after,
.section-tight::after,
#projects::after,
#process::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(1180px, calc(100% - 48px));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.07) 20%,
    rgba(189,194,199,.09) 50%,
    rgba(255,255,255,.07) 80%,
    transparent
  );
  pointer-events: none;
}

/* service cards slightly more defined */
.service-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.016));
  border-color: rgba(255,255,255,.095);
  box-shadow:
    0 20px 45px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.018);
  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.17);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.022));
  box-shadow:
    0 26px 60px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.025);
}

/* split image section gets more depth */
.split-media {
  box-shadow:
    0 30px 70px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.025);
}

/* project gallery slightly better separated from background */
.gallery-item {
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 16px 38px rgba(0,0,0,.18);
}

/* process gets more visual hierarchy */
.process-grid {
  background: rgba(255,255,255,.012);
  border-color: rgba(255,255,255,.08);
}

.process-step {
  border-color: rgba(255,255,255,.075);
  transition: background .25s ease;
}

.process-step:hover {
  background: rgba(255,255,255,.022);
}


/* =========================================================
   LF CUSTOMS - Header / Typography refinement
   ========================================================= */

/* Cleaner typography */
html,
body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;
}

/* Header stronger separation */
.site-header,
header {
  background: rgba(7, 9, 11, 0.97);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 12px 35px rgba(0,0,0,0.42),
    inset 0 -1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* More breathing room */
.site-header .container,
header .container,
.header-inner {
  min-height: 88px;
}

/* Brand / wordmark */
.brand,
.brand-logo,
.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  white-space: nowrap;
}

/* LF */
.brand strong,
.brand-logo strong,
.brand-wordmark strong,
.brand .brand-mark {
  font-family:
    "Arial Black",
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 28px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  letter-spacing: -1.5px;
  color: #fff;
}

/* CUSTOMS */
.brand span,
.brand-logo span,
.brand-wordmark span,
.brand .brand-name {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 5px;
  color: rgba(255,255,255,0.92);
}

/* Navigation */
.site-header nav a,
header nav a,
.nav a {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.1px;
  color: rgba(255,255,255,0.78);
  transition:
    color .2s ease,
    opacity .2s ease;
}

.site-header nav a:hover,
header nav a:hover,
.nav a:hover {
  color: #fff;
}

/* Mobile */
@media (max-width: 768px) {
  .site-header .container,
  header .container,
  .header-inner {
    min-height: 74px;
  }

  .brand strong,
  .brand-logo strong,
  .brand-wordmark strong,
  .brand .brand-mark {
    font-size: 24px;
  }

  .brand span,
  .brand-logo span,
  .brand-wordmark span,
  .brand .brand-name {
    font-size: 12px;
    letter-spacing: 4px;
  }
}



/* =========================================================
   LF CUSTOMS - FINAL HEADER / BRANDING
   ========================================================= */

.site-header {
    background:
        linear-gradient(
            100deg,
            rgba(24, 28, 33, 0.99) 0%,
            rgba(13, 16, 20, 0.99) 48%,
            rgba(19, 17, 18, 0.99) 100%
        ) !important;

    border-bottom: 1px solid rgba(255,255,255,.13) !important;

    box-shadow:
        0 18px 55px rgba(0,0,0,.55),
        inset 0 -1px 0 rgba(255,255,255,.025) !important;

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    position: relative;
    z-index: 1000;
}


/* Fine motorsport accent below header */
.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 12%,
            rgba(189,194,199,.15) 28%,
            rgba(189,194,199,.7) 50%,
            rgba(189,194,199,.15) 72%,
            transparent 88%,
            transparent 100%
        );

    opacity: .72;
    pointer-events: none;
}


/* Header height */
.site-header .nav {
    height: 96px !important;
    min-height: 96px !important;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* Real logo */
.site-header .brand {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto;
    text-decoration: none !important;
    line-height: 0;
}


.site-header .brand img {
    display: block;
    width: 245px;
    height: auto;
    max-height: 68px;

    transition:
        transform .25s ease,
        filter .25s ease;
}


.site-header .brand:hover img {
    transform: translateY(-1px);
    filter: brightness(1.08);
}


/* Navigation typography */
.site-header .nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
}


.site-header .nav-links a {
    position: relative;

    font-family:
        "Bahnschrift",
        "DIN Alternate",
        "Arial Narrow",
        Arial,
        sans-serif !important;

    font-size: 15px !important;
    font-weight: 500 !important;

    letter-spacing: .25px !important;

    color: rgba(244,244,242,.76) !important;

    text-decoration: none;

    transition:
        color .2s ease,
        transform .2s ease;
}


.site-header .nav-links a::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: -9px;

    width: 0;
    height: 2px;

    background: #BDC2C7;

    transition: width .22s ease;
}


.site-header .nav-links a:hover {
    color: #fff !important;
    transform: translateY(-1px);
}


.site-header .nav-links a:hover::after {
    width: 100%;
}


/* Instagram slightly separated */
.site-header .nav-instagram {
    margin-left: 8px;
    color: rgba(255,255,255,.92) !important;
}


/* Account for taller header */
.hero {
    padding-top: 96px !important;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .site-header .nav {
        height: 78px !important;
        min-height: 78px !important;
    }

    .site-header .brand img {
        width: 190px;
        max-height: 56px;
    }

    .hero {
        padding-top: 78px !important;
    }

    .nav-links {
        top: 78px !important;
    }
}


@media (max-width: 420px) {

    .site-header .brand img {
        width: 165px;
    }
}


/* =========================================================
   LF CUSTOMS - cohesive header refinement
   ========================================================= */

.site-header {
    background: rgba(8,10,12,.985) !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.24) !important;
}

/* remove previous orange separator */
.site-header::after {
    display: none !important;
}

.site-header .nav {
    height: 92px !important;
    min-height: 92px !important;
}

/* stronger, simpler logo */
.site-header .brand img {
    width: 300px !important;
    max-height: 72px !important;
}

/* calmer navigation */
.site-header .nav-links {
    gap: 36px !important;
}

.site-header .nav-links a {
    font-family:
        "Segoe UI",
        "Helvetica Neue",
        Arial,
        sans-serif !important;

    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: rgba(255,255,255,.74) !important;
}

.site-header .nav-links a:hover {
    color: #fff !important;
}

/* remove animated orange underline */
.site-header .nav-links a::after {
    display: none !important;
}

/* subtle instagram distinction */
.site-header .nav-instagram {
    color: rgba(255,255,255,.88) !important;
}

/* match hero with new header */
.hero {
    padding-top: 92px !important;
}

@media (max-width: 760px) {

    .site-header .nav {
        height: 76px !important;
        min-height: 76px !important;
    }

    .site-header .brand img {
        width: 220px !important;
        max-height: 58px !important;
    }

    .hero {
        padding-top: 76px !important;
    }

    .nav-links {
        top: 76px !important;
    }
}


/* Remove duplicated spacing below header */
.hero {
    padding-top: 0 !important;
}

@media (max-width: 760px) {
    .hero {
        padding-top: 0 !important;
    }
}


/* =========================================================
   LF CUSTOMS - compact capabilities section
   ========================================================= */

/* Less oversized / template-like section spacing */
#services.section {
    padding-top: 74px !important;
    padding-bottom: 82px !important;
}

/* Headline area tighter */
#services .section-head,
#services .section-header {
    margin-bottom: 34px !important;
}

/* Reduce visual gap below intro text */
#services .section-head p,
#services .section-header p {
    margin-bottom: 0 !important;
}

/* Cards closer to headline */
#services .services-grid {
    margin-top: 34px !important;
    gap: 14px !important;
}

/* Less oversized cards */
#services .service-card {
    min-height: 220px !important;
    padding: 28px 28px 30px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;

    border-radius: 14px !important;
}

/* Number closer to actual content */
#services .service-card > span:first-child {
    margin-bottom: 34px !important;
    font-size: 12px !important;
    letter-spacing: 1.3px !important;
    opacity: .55 !important;
}

/* Kill the artificial huge gap */
#services .service-card h3 {
    margin-top: 0 !important;
    margin-bottom: 14px !important;

    font-size: 21px !important;
    line-height: 1.2 !important;
}

/* Body copy a little tighter */
#services .service-card p {
    margin: 0 !important;
    line-height: 1.55 !important;
}

/* Slightly reduce headline size */
#services h2 {
    max-width: 720px !important;
    font-size: clamp(3rem, 4.5vw, 4.7rem) !important;
    line-height: .98 !important;
}

@media (max-width: 760px) {

    #services.section {
        padding-top: 60px !important;
        padding-bottom: 64px !important;
    }

    #services .services-grid {
        margin-top: 28px !important;
    }

    #services .service-card {
        min-height: 190px !important;
        padding: 24px !important;
    }

    #services .service-card > span:first-child {
        margin-bottom: 26px !important;
    }
}


/* =========================================================
   LF CUSTOMS - Hero vehicle visibility
   ========================================================= */

/* Give the vehicle more room */
.hero-grid {
    grid-template-columns: 46% 54% !important;
}

/* Preserve the complete vehicle instead of cropping it */
.hero-media {
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(255,255,255,.025), transparent 65%),
        #090b0d;
}

.hero-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
}

/* Mobile remains full width */
@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr !important;
    }

    .hero-media img {
        object-fit: cover !important;
        object-position: center center !important;
    }
}


/* =========================================================
   LF CUSTOMS - Hero layout correction
   Keep original visual layout, show more of the vehicle
   ========================================================= */

.hero-grid {
    grid-template-columns: 1fr 1fr !important;
}

.hero-media {
    overflow: hidden !important;
    background: #090b0d !important;
}

.hero-media img {
    width: 100% !important;
    height: 100% !important;

    /* restore cinematic crop */
    object-fit: cover !important;

    /* keep more of the complete car visible */
    object-position: 62% center !important;

    transform: scale(.92) !important;
    transform-origin: center center !important;
}

/* let the dark background visually blend with the left side */
.hero-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(8,10,12,.72) 0%,
        rgba(8,10,12,.26) 12%,
        transparent 30%
    );
}

.hero-media img {
    position: relative;
    z-index: 0;
}

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr !important;
    }

    .hero-media img {
        transform: none !important;
        object-position: center center !important;
    }
}


/* =========================================================
   LF CUSTOMS - centered capability cards
   ========================================================= */

/* Hide 01 / 04 etc. */
#services .service-card > span:first-child {
    display: none !important;
}

/* Center complete content inside cards */
#services .service-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;

    padding: 32px !important;
}

/* Headline */
#services .service-card h3 {
    margin: 0 0 14px 0 !important;
    text-align: center !important;
}

/* Description */
#services .service-card p {
    margin: 0 auto !important;
    max-width: 270px;
    text-align: center !important;
}

/* Hero image correction */
.hero-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 58% center !important;
    transform: none !important;
}


/* =========================================================
   LF CUSTOMS - FINAL COLOR SYSTEM
   ========================================================= */

:root {
    --lf-bg: #0b0d0f;
    --lf-bg-alt: #0f1215;
    --lf-surface: #13171b;
    --lf-surface-hover: #171c21;

    --lf-text: #f2f2f0;
    --lf-muted: #9da3aa;

    --lf-line: rgba(255,255,255,.08);

    --lf-accent: #BDC2C7;
}

/* MAIN BACKGROUND */

html,
body,
main {
    background: var(--lf-bg) !important;
    color: var(--lf-text) !important;
}

/* HEADER */

.site-header {
    background: #0d1013 !important;
    border-bottom: 1px solid var(--lf-line) !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.22) !important;
}

/* HERO */

.hero,
.hero-content {
    background: var(--lf-bg) !important;
}

.hero h1 {
    color: var(--lf-text) !important;
}

.hero h1 span {
    color: #aeb3b9 !important;
}

.hero-copy {
    color: var(--lf-muted) !important;
}

.hero-meta {
    border-top-color: var(--lf-line) !important;
}

.hero-meta span {
    color: #858c94 !important;
}

/* SECTIONS */

.section {
    background: var(--lf-bg) !important;
}

.section-tight {
    background: var(--lf-bg-alt) !important;
}

#services {
    background: var(--lf-bg-alt) !important;
}

#projects {
    background: var(--lf-bg) !important;
}

.cta {
    background: var(--lf-bg-alt) !important;
}

/* SECTION SEPARATION */

#services,
.section-tight,
#projects,
.cta {
    border-top: 1px solid var(--lf-line) !important;
}

/* TEXT */

h1,
h2,
h3,
h4 {
    color: var(--lf-text) !important;
}

.eyebrow {
    color: #c8ccd0 !important;
}

.section p,
.section-tight p {
    color: var(--lf-muted) !important;
}

/* CAPABILITY CARDS */

#services .service-card {
    background: var(--lf-surface) !important;

    border:
        1px solid rgba(255,255,255,.09) !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18) !important;
}

#services .service-card:hover {
    background: var(--lf-surface-hover) !important;

    border-color:
        rgba(255,255,255,.14) !important;

    box-shadow:
        0 18px 38px rgba(0,0,0,.24) !important;
}

#services .service-card p {
    color: #a6acb3 !important;
}

/* GALLERY */

.gallery-item {
    background: var(--lf-surface) !important;
    border-color: var(--lf-line) !important;

    box-shadow:
        0 14px 30px rgba(0,0,0,.18) !important;
}

/* BUTTONS */

.btn-primary {
    background: var(--lf-text) !important;
    color: #111315 !important;
}

.btn-primary:hover {
    background: #ffffff !important;
}

.btn-secondary {
    background: transparent !important;

    border:
        1px solid rgba(255,255,255,.17) !important;

    color: var(--lf-text) !important;
}

.btn-secondary:hover {
    background:
        rgba(255,255,255,.045) !important;

    border-color:
        rgba(255,255,255,.28) !important;
}

/* ACCENT */

.eyebrow::before {
    background: var(--lf-accent) !important;
}

/* FOOTER */

.site-footer,
footer {
    background: #090b0d !important;
    border-top-color: var(--lf-line) !important;
}

/* CONTACT / LEGAL */

.page-hero {
    background: var(--lf-bg-alt) !important;
}

.contact-card {
    background: var(--lf-surface) !important;
    border-color: var(--lf-line) !important;
}


/* =========================================================
   LF CUSTOMS - Legal / Contact alignment fix
   ========================================================= */

/* Keep content aligned with page hero/container */
.content-page .container.content-narrow {
    width: min(100% - 48px, var(--max)) !important;
    max-width: var(--max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Legal text stays readable, but starts on the normal left axis */
.content-page .content-narrow h2,
.content-page .content-narrow p,
.content-page .content-narrow ul {
    max-width: 820px;
}

/* Contact cards can use a little more width */
.content-page .contact-card {
    max-width: 1040px;
}

/* Mobile */
@media (max-width: 760px) {
    .content-page .container.content-narrow {
        width: min(100% - 28px, var(--max)) !important;
    }
}



/* =========================================================
   LF CUSTOMS - FINAL MOBILE LAYOUT
   ========================================================= */

@media (max-width: 900px) {

    html,
    body {
        overflow-x: hidden !important;
    }

    body {
        width: 100% !important;
    }

    .container {
        width: calc(100% - 36px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .site-header .nav {
        height: 74px !important;
        min-height: 74px !important;
    }

    .site-header .brand img {
        width: 190px !important;
        max-width: 55vw !important;
        max-height: 54px !important;
    }

    .menu-toggle {
        display: block !important;
    }

    .nav-links {
        position: fixed !important;
        top: 74px !important;
        left: 14px !important;
        right: 14px !important;

        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 0 !important;
        padding: 10px !important;

        background: rgba(10,12,14,.98) !important;
        border: 1px solid rgba(255,255,255,.1) !important;
        border-radius: 14px !important;

        box-shadow: 0 24px 60px rgba(0,0,0,.45) !important;

        z-index: 2000 !important;
    }

    .nav-links.is-open {
        display: flex !important;
    }

    .nav-links a {
        padding: 15px 12px !important;
        border-bottom: 1px solid rgba(255,255,255,.07) !important;
        font-size: 15px !important;
    }

    .nav-links a:last-child {
        border-bottom: 0 !important;
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .hero {
        padding: 0 !important;
        min-height: 0 !important;
    }

    .hero-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .hero-content {
        min-height: 0 !important;
        padding: 58px 24px 46px !important;
        order: 1 !important;
    }

    .hero-inner {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .hero .eyebrow {
        margin-bottom: 24px !important;
        font-size: 11px !important;
        letter-spacing: 2px !important;
    }

    .hero h1 {
        max-width: 100% !important;
        margin: 0 0 24px !important;

        font-size: clamp(3rem, 14vw, 4.2rem) !important;
        line-height: .91 !important;
        letter-spacing: -.055em !important;
    }

    .hero-copy {
        max-width: 100% !important;
        margin-bottom: 28px !important;

        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    .hero-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .hero-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .hero-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px 18px !important;

        margin-top: 34px !important;
        padding-top: 22px !important;
    }

    .hero-meta span {
        font-size: 10px !important;
        letter-spacing: 1px !important;
    }

    .hero-media {
        position: relative !important;
        order: 2 !important;

        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;

        overflow: hidden !important;
    }

    .hero-media::before,
    .hero-media::after {
        display: none !important;
    }

    .hero-media img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: 56% center !important;

        transform: none !important;
    }


    /* -----------------------------------------------------
       GENERAL SECTIONS
       ----------------------------------------------------- */

    .section {
        padding: 62px 0 !important;
    }

    .section-tight {
        padding: 52px 0 !important;
    }

    .section h2,
    .section-tight h2,
    #services h2 {
        max-width: 100% !important;
        font-size: clamp(2.55rem, 11vw, 3.6rem) !important;
        line-height: .98 !important;
        letter-spacing: -.045em !important;
    }

    .section-head,
    .section-header {
        margin-bottom: 30px !important;
    }


    /* -----------------------------------------------------
       SERVICES
       ----------------------------------------------------- */

    #services.section {
        padding-top: 58px !important;
        padding-bottom: 62px !important;
    }

    #services .services-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 12px !important;
        margin-top: 30px !important;
    }

    #services .service-card {
        min-height: 0 !important;

        padding: 32px 26px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;

        text-align: left !important;

        border-radius: 12px !important;
    }

    #services .service-card > span:first-child {
        display: none !important;
    }

    #services .service-card h3 {
        margin: 0 0 10px !important;

        font-size: 20px !important;
        line-height: 1.2 !important;

        text-align: left !important;
    }

    #services .service-card p {
        max-width: none !important;
        margin: 0 !important;

        text-align: left !important;
        line-height: 1.55 !important;
    }


    /* -----------------------------------------------------
       SPLIT CONTENT
       ----------------------------------------------------- */

    .split {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    .split-media {
        order: 0 !important;

        width: 100% !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 3 !important;

        border-radius: 14px !important;
        overflow: hidden !important;
    }

    .split-media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }


    /* -----------------------------------------------------
       PROJECT GALLERY
       ----------------------------------------------------- */

    .projects-head {
        display: block !important;
        margin-bottom: 28px !important;
    }

    .gallery {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;

        gap: 10px !important;
    }

    .gallery-item,
    .gallery-item:nth-child(n) {
        grid-column: auto !important;
        grid-row: auto !important;

        width: 100% !important;
        aspect-ratio: 4 / 3 !important;

        border-radius: 10px !important;
        overflow: hidden !important;
    }

    .gallery-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }


    /* -----------------------------------------------------
       CONTACT / PRIVACY / IMPRINT
       ----------------------------------------------------- */

    .page-hero {
        padding: 70px 0 48px !important;
    }

    .page-hero h1 {
        max-width: 100% !important;

        font-size: clamp(3rem, 14vw, 4.4rem) !important;
        line-height: .92 !important;
    }

    .page-hero p {
        margin-top: 18px !important;
        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    .content-page {
        padding: 48px 0 72px !important;
    }

    .content-page .container.content-narrow {
        width: calc(100% - 36px) !important;
        max-width: none !important;
    }

    .content-narrow h2 {
        margin-top: 38px !important;
        font-size: 1.35rem !important;
    }

    .content-narrow p,
    .content-narrow li {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    .contact-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 22px !important;

        width: 100% !important;
        max-width: none !important;

        padding: 24px !important;
    }

    .contact-card .btn,
    .contact-card a.btn {
        width: 100% !important;
        justify-content: center !important;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 22px !important;
    }

    .footer-links {
        gap: 14px 18px !important;
    }

}


@media (max-width: 430px) {

    .container {
        width: calc(100% - 28px) !important;
    }

    .hero-content {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .hero h1 {
        font-size: clamp(2.8rem, 14vw, 3.7rem) !important;
    }

    .site-header .brand img {
        width: 165px !important;
    }

    .content-page .container.content-narrow {
        width: calc(100% - 28px) !important;
    }

}


/* Mobile hero image proportion fix */
@media (max-width: 900px) {

    .hero-media {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 3 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hero-media img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 52% center !important;
        margin: 0 !important;
    }
}


@media (max-width: 900px) {
    .site-header .nav-instagram {
        margin-left: 0 !important;
        padding-left: 12px !important;
    }
}


/* =========================================================
   LF CUSTOMS - HOCKENHEIMSILVER BRAND SYSTEM
   ========================================================= */

:root {
    --lf-accent: #BDC2C7 !important;
    --lf-accent-light: #D5D9DD !important;
    --lf-accent-dark: #8D949B !important;
}

/* Header logo */
.site-header .brand img {
    width: 300px !important;
    height: auto !important;
    max-height: 68px !important;
    object-fit: contain !important;
}

/* Silver accent lines / details */
.eyebrow::before {
    background: var(--lf-accent) !important;
}

#services::after,
.section-tight::after,
#projects::after,
#process::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.06) 20%,
        rgba(189,194,199,.28) 50%,
        rgba(255,255,255,.06) 80%,
        transparent
    ) !important;
}

/* Mobile */
@media (max-width: 900px) {
    .site-header .brand img {
        width: 215px !important;
        max-width: 58vw !important;
        max-height: 52px !important;
    }
}

@media (max-width: 430px) {
    .site-header .brand img {
        width: 190px !important;
    }
}



/* =========================================================
   LF CUSTOMS - CONTACT PAGE V2
   ========================================================= */

.contact-v2 {
    background: #0b0d0f;
}

.contact-v2-hero {
    padding: 76px 0 86px;
}

.contact-v2-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
    gap: 76px;
    align-items: stretch;
}


/* LEFT */

.contact-v2-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 38px 0;
}

.contact-v2-copy .eyebrow {
    margin-bottom: 28px;
}

.contact-v2-copy h1 {
    margin: 0;

    font-size: clamp(4.2rem, 6vw, 6.8rem);
    line-height: .9;
    letter-spacing: -.055em;

    color: #f2f2f0;
}

.contact-v2-intro {
    max-width: 590px;

    margin: 34px 0 0;

    font-size: 1.08rem;
    line-height: 1.7;

    color: #9da3aa;
}


/* CONTACT LINKS */

.contact-v2-links {
    margin-top: 46px;

    border-top: 1px solid rgba(255,255,255,.09);
}

.contact-v2-link {
    display: grid;
    grid-template-columns: 130px 1fr;

    align-items: center;

    padding: 24px 0;

    border-bottom: 1px solid rgba(255,255,255,.09);

    text-decoration: none;

    transition:
        padding-left .2s ease,
        color .2s ease;
}

.contact-v2-link:hover {
    padding-left: 8px;
}

.contact-v2-label {
    font-size: .78rem;
    font-weight: 600;

    letter-spacing: .13em;
    text-transform: uppercase;

    color: #7f868e;
}

.contact-v2-value {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    font-size: 1.18rem;
    font-weight: 600;

    color: #f2f2f0;
}

.contact-v2-value span {
    color: #bdc2c7;
}

.contact-v2-note {
    max-width: 520px;

    margin: 28px 0 0;

    font-size: .9rem;
    line-height: 1.65;

    color: #747b83;
}


/* RIGHT IMAGE */

.contact-v2-media {
    position: relative;

    min-height: 620px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;

    background: #111417;
}

.contact-v2-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 55% center;
}

.contact-v2-media::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 60%,
            rgba(6,8,10,.76) 100%
        );
}

.contact-v2-media-caption {
    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 24px;

    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    font-size: .68rem;
    font-weight: 600;

    letter-spacing: .13em;

    color: rgba(255,255,255,.8);
}


/* MOBILE */

@media (max-width: 900px) {

    .contact-v2-hero {
        padding: 46px 0 58px;
    }

    .contact-v2-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .contact-v2-copy {
        padding: 10px 0 0;
    }

    .contact-v2-copy h1 {
        font-size: clamp(3.7rem, 16vw, 5rem);
    }

    .contact-v2-intro {
        margin-top: 26px;

        font-size: 1rem;
        line-height: 1.6;
    }

    .contact-v2-links {
        margin-top: 34px;
    }

    .contact-v2-link {
        grid-template-columns: 1fr;

        gap: 8px;

        padding: 20px 0;
    }

    .contact-v2-value {
        font-size: 1.05rem;
    }

    .contact-v2-media {
        min-height: 0;
        aspect-ratio: 4 / 3;
        border-radius: 12px;
    }

    .contact-v2-media-caption {
        left: 18px;
        right: 18px;
        bottom: 16px;

        font-size: .58rem;
    }

}


@media (max-width: 480px) {

    .contact-v2-copy h1 {
        font-size: 3.9rem;
    }

    .contact-v2-media-caption span:last-child {
        display: none;
    }

}


/* Header navigation aligned with LF CUSTOMS wordmark */
.site-header .nav-links a {
    font-family:
        "Bahnschrift",
        "Bahnschrift SemiCondensed",
        "Arial Narrow",
        Arial,
        sans-serif !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;

    color: #BDC2C7 !important;
}

.site-header .nav-links a:hover {
    color: #F2F3F4 !important;
}

@media (max-width: 900px) {
    .site-header .nav-links a {
        font-size: 14px !important;
        letter-spacing: 1.6px !important;
    }
}


/* =========================================================
   LF CUSTOMS - LEGAL PAGES V2
   Imprint / Privacy aligned with Contact design
   ========================================================= */

/* HERO */

.page-hero {
    padding: 72px 0 62px !important;
    background: #0b0d0f !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.page-hero .container {
    width: min(100% - 48px, var(--max)) !important;
}

.page-hero .eyebrow {
    margin-bottom: 26px !important;
}

.page-hero h1 {
    margin: 0 !important;

    max-width: 760px !important;

    font-size: clamp(4rem, 6vw, 6.4rem) !important;
    line-height: .92 !important;
    letter-spacing: -.055em !important;

    color: #f2f2f0 !important;
}

.page-hero p {
    max-width: 650px !important;

    margin-top: 26px !important;

    font-size: 1.05rem !important;
    line-height: 1.65 !important;

    color: #9da3aa !important;
}


/* CONTENT AREA */

.content-page {
    padding: 64px 0 96px !important;
    background: #090b0d !important;
}

.content-page .container.content-narrow {
    width: min(100% - 48px, var(--max)) !important;
    max-width: var(--max) !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* legal content panel */

.content-page .content-narrow {
    position: relative;
}

.content-page .content-narrow::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 1px;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            rgba(189,194,199,.55),
            rgba(189,194,199,.08) 40%,
            transparent 100%
        );
}


/* HEADINGS */

.content-page .content-narrow h2 {
    max-width: 820px !important;

    margin: 54px 0 16px 44px !important;

    font-size: 1.45rem !important;
    line-height: 1.2 !important;

    color: #f2f2f0 !important;
}

.content-page .content-narrow h2:first-child {
    margin-top: 0 !important;
}


/* BODY TEXT */

.content-page .content-narrow p,
.content-page .content-narrow ul,
.content-page .content-narrow ol {
    max-width: 820px !important;

    margin-left: 44px !important;
}

.content-page .content-narrow p,
.content-page .content-narrow li {
    font-size: .98rem !important;
    line-height: 1.72 !important;

    color: #a3a9b0 !important;
}

.content-page .content-narrow p {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}

.content-page .content-narrow ul,
.content-page .content-narrow ol {
    padding-left: 22px !important;
}


/* LINKS */

.content-page .content-narrow a {
    color: #d2d6da !important;
    text-decoration-color: rgba(189,194,199,.45) !important;
    text-underline-offset: 3px;
}

.content-page .content-narrow a:hover {
    color: #fff !important;
    text-decoration-color: #bdc2c7 !important;
}


/* SECTION SEPARATION */

.content-page .content-narrow h2:not(:first-child) {
    padding-top: 46px !important;
    border-top: 1px solid rgba(255,255,255,.07);
}


/* MOBILE */

@media (max-width: 900px) {

    .page-hero {
        padding: 52px 0 44px !important;
    }

    .page-hero .container {
        width: calc(100% - 36px) !important;
    }

    .page-hero h1 {
        font-size: clamp(3.4rem, 14vw, 4.8rem) !important;
    }

    .page-hero p {
        margin-top: 20px !important;

        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    .content-page {
        padding: 46px 0 68px !important;
    }

    .content-page .container.content-narrow {
        width: calc(100% - 36px) !important;
    }

    .content-page .content-narrow::before {
        display: none !important;
    }

    .content-page .content-narrow h2 {
        margin-left: 0 !important;
        margin-top: 42px !important;

        font-size: 1.3rem !important;
    }

    .content-page .content-narrow h2:first-child {
        margin-top: 0 !important;
    }

    .content-page .content-narrow p,
    .content-page .content-narrow ul,
    .content-page .content-narrow ol {
        margin-left: 0 !important;
    }

    .content-page .content-narrow p,
    .content-page .content-narrow li {
        font-size: .95rem !important;
        line-height: 1.65 !important;
    }

}

@media (max-width: 430px) {

    .page-hero .container,
    .content-page .container.content-narrow {
        width: calc(100% - 28px) !important;
    }

}


/* Keep project gallery figures inside the mobile container. */
@media (max-width: 900px) {
    #projects .gallery-item {
        margin: 0 !important;
    }
}

/* LF CUSTOMS selective brand typography */
:root {
    --lf-brand-font: "Bahnschrift", "Bahnschrift SemiCondensed",
        "DIN Alternate", "Arial Narrow", "Segoe UI", Arial, sans-serif;
}

.site-header .nav-links a,
.eyebrow,
.hero-meta,
.service-index,
.process-step small,
.contact-v2-label,
.gallery-item::after,
#services .service-card h3 {
    font-family: var(--lf-brand-font) !important;
}

#services .service-card h3 {
    letter-spacing: .005em !important;
}

/* =========================================================
   LF CUSTOMS - Footer typography aligned with header
   ========================================================= */

.site-footer,
.site-footer .footer-grid,
.site-footer .footer-grid > * {
    font-family:
        "Bahnschrift",
        "Bahnschrift SemiCondensed",
        "Arial Narrow",
        Arial,
        sans-serif !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 1.4px !important;

    color: #BDC2C7 !important;
}

/* Footer navigation like header navigation */
.site-footer .footer-links a {
    font-family:
        "Bahnschrift",
        "Bahnschrift SemiCondensed",
        "Arial Narrow",
        Arial,
        sans-serif !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;

    color: #BDC2C7 !important;

    transition: color .2s ease;
}

.site-footer .footer-links a:hover {
    color: #F2F3F4 !important;
}

/* Copyright keeps normal capitalization */
.site-footer .footer-grid > *:first-child {
    text-transform: none !important;
}

@media (max-width: 900px) {
    .site-footer,
    .site-footer .footer-grid,
    .site-footer .footer-links a {
        font-size: 13px !important;
        letter-spacing: 1.3px !important;
    }
}


/* =========================================================
   LF CUSTOMS - Services / Capabilities editorial layout
   ========================================================= */

#services .services-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;

    margin-top: 42px !important;

    border-top: 1px solid rgba(255,255,255,.10);
    border-bottom: 1px solid rgba(255,255,255,.07);
}


/* Remove SaaS-card appearance */
#services .service-card {
    position: relative;

    min-height: 210px !important;

    padding: 34px 30px 36px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

    text-align: left !important;

    background: transparent !important;

    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    transition:
        background .2s ease,
        padding-left .2s ease !important;
}

#services .service-card:last-child {
    border-right: 0 !important;
}


/* Small silver technical accent */
#services .service-card::before {
    content: "";

    position: absolute;

    left: 30px;
    top: 30px;

    width: 28px;
    height: 1px;

    background: #BDC2C7;

    opacity: .72;
}


/* Heading */
#services .service-card h3 {
    margin: 28px 0 12px !important;

    font-size: 20px !important;
    line-height: 1.2 !important;

    text-align: left !important;

    color: #F2F2F0 !important;
}


/* Text */
#services .service-card p {
    max-width: 280px !important;

    margin: 0 !important;

    font-size: .95rem !important;
    line-height: 1.62 !important;

    text-align: left !important;

    color: #9DA3AA !important;
}


/* Hover stays restrained */
#services .service-card:hover {
    padding-left: 36px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        ) !important;

    box-shadow: none !important;

    transform: none !important;
}


/* Mobile / Tablet */
@media (max-width: 900px) {

    #services .services-grid {
        grid-template-columns: 1fr 1fr !important;

        border-bottom: 0;
    }

    #services .service-card {
        min-height: 190px !important;

        border-right: 1px solid rgba(255,255,255,.08) !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }

    #services .service-card:nth-child(2n) {
        border-right: 0 !important;
    }

}


@media (max-width: 620px) {

    #services .services-grid {
        grid-template-columns: 1fr !important;
    }

    #services .service-card {
        min-height: 0 !important;

        padding: 30px 0 30px !important;

        border-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }

    #services .service-card::before {
        left: 0;
        top: 28px;
    }

    #services .service-card h3 {
        margin-top: 26px !important;
    }

    #services .service-card:hover {
        padding-left: 0 !important;
    }

}


/* =========================================================
   LF CUSTOMS - ENGINEERING EDITORIAL SECTION
   ========================================================= */

.engineering-section {
    padding: 92px 0 86px !important;
}

.engineering-layout {
    display: grid;

    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 58px;

    align-items: center;
}


/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.engineering-intro {
    grid-column: 1 / span 5;

    max-width: 560px;
}

.engineering-intro .eyebrow {
    margin-bottom: 28px;
}

.engineering-intro .section-title {
    margin: 0;

    font-size: clamp(3.3rem, 4.5vw, 5.2rem);
    line-height: .96;
    letter-spacing: -.05em;

    color: #F2F2F0;
}

.engineering-intro .section-copy {
    max-width: 520px;

    margin: 30px 0 0;

    font-size: 1rem;
    line-height: 1.68;

    color: #9DA3AA;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.engineering-media {
    grid-column: 7 / -1;

    position: relative;

    min-height: 500px;

    overflow: hidden;

    border-radius: 12px;

    background: #111417;
}

.engineering-media img {
    display: block;

    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;

    object-fit: cover;
    object-position: center center;
}


/* subtle technical frame */
.engineering-media::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: inherit;
}


/* ---------------------------------------------------------
   FEATURES
   --------------------------------------------------------- */

.engineering-features {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid rgba(255,255,255,.10);
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.engineering-feature {
    position: relative;

    display: grid;
    grid-template-columns: 48px 1fr;

    gap: 18px;

    padding: 30px 30px 32px 0;

    border-right: 1px solid rgba(255,255,255,.08);
}

.engineering-feature:nth-child(2) {
    padding-left: 30px;
}

.engineering-feature:nth-child(3) {
    padding-left: 30px;
    padding-right: 0;

    border-right: 0;
}

.engineering-num {
    padding-top: 2px;

    font-family:
        "Bahnschrift",
        "Bahnschrift SemiCondensed",
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: .72rem;
    font-weight: 600;

    letter-spacing: .14em;

    color: #BDC2C7;
}

.engineering-feature strong {
    display: block;

    margin: 0 0 10px;

    font-size: 1rem;
    font-weight: 650;

    color: #F2F2F0;
}

.engineering-feature p {
    max-width: 330px;

    margin: 0;

    font-size: .91rem;
    line-height: 1.58;

    color: #9299A1;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1000px) {

    .engineering-layout {
        grid-template-columns: 1fr 1fr;
        column-gap: 34px;
        row-gap: 42px;
    }

    .engineering-intro {
        grid-column: 1;
    }

    .engineering-media {
        grid-column: 2;

        min-height: 440px;
    }

    .engineering-features {
        grid-column: 1 / -1;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .engineering-section {
        padding: 58px 0 64px !important;
    }

    .engineering-layout {
        display: grid;
        grid-template-columns: 1fr;

        gap: 34px;
    }

    .engineering-intro,
    .engineering-media,
    .engineering-features {
        grid-column: 1;
    }

    .engineering-intro {
        max-width: none;
    }

    .engineering-intro .section-title {
        font-size: clamp(2.7rem, 11vw, 3.7rem);
    }

    .engineering-intro .section-copy {
        margin-top: 22px;
    }

    .engineering-media {
        min-height: 0;
        aspect-ratio: 4 / 3;

        order: 2;
    }

    .engineering-features {
        grid-template-columns: 1fr;

        order: 3;

        border-bottom: 0;
    }

    .engineering-feature,
    .engineering-feature:nth-child(2),
    .engineering-feature:nth-child(3) {
        grid-template-columns: 42px 1fr;

        padding: 24px 0 !important;

        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .engineering-feature:last-child {
        border-bottom: 0;
    }

}


/* =========================================================
   LF CUSTOMS - cohesive section / editorial cleanup
   ========================================================= */

/* ---------------------------------------------------------
   SECTION DEPTH
   --------------------------------------------------------- */

#services {
    background: #0d1013 !important;
    border-top: 0 !important;
}

.engineering-section {
    background: #12161a !important;
    border-top: 0 !important;
}

#projects {
    background: #090b0d !important;
    border-top: 0 !important;
}

/* softer transitions instead of hard borders */
#services::after,
.engineering-section::after {
    display: none !important;
}

#services,
.engineering-section,
#projects {
    position: relative;
}

#services::before,
.engineering-section::before,
#projects::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1180px, calc(100% - 48px));
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.06) 25%,
        rgba(189,194,199,.11) 50%,
        rgba(255,255,255,.06) 75%,
        transparent
    );
}


/* ---------------------------------------------------------
   SERVICES - REMOVE CARD LOOK
   --------------------------------------------------------- */

#services .services-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;

    gap: 42px !important;

    margin-top: 54px !important;

    border: 0 !important;
}

#services .service-card {
    position: relative;

    min-height: 0 !important;

    padding: 0 0 10px !important;

    display: block !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    text-align: left !important;

    transform: none !important;
}

#services .service-card::before {
    content: "";

    display: block;

    position: static;

    width: 36px;
    height: 2px;

    margin-bottom: 28px;

    background: #BDC2C7;

    opacity: .72;
}

#services .service-card h3 {
    margin: 0 0 14px !important;

    font-size: 1.12rem !important;
    line-height: 1.25 !important;

    text-align: left !important;
}

#services .service-card p {
    max-width: 260px !important;

    margin: 0 !important;

    font-size: .94rem !important;
    line-height: 1.65 !important;

    text-align: left !important;

    color: #969da4 !important;
}

#services .service-card:hover {
    padding-left: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

#services .service-card:hover::before {
    width: 54px;
}


/* ---------------------------------------------------------
   ENGINEERING - LESS GRID / MORE EDITORIAL
   --------------------------------------------------------- */

.engineering-layout {
    row-gap: 70px !important;
}

.engineering-media {
    border-radius: 8px !important;
}

.engineering-features {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;

    gap: 52px !important;

    border: 0 !important;
}

.engineering-feature,
.engineering-feature:nth-child(2),
.engineering-feature:nth-child(3) {
    display: block !important;

    padding: 0 !important;

    border: 0 !important;
}

.engineering-num {
    display: block;

    margin-bottom: 20px;

    font-size: .68rem !important;

    color: #BDC2C7 !important;
}

.engineering-feature strong {
    display: block;

    margin-bottom: 13px !important;

    font-size: 1rem !important;

    color: #F1F2F3 !important;
}

.engineering-feature p {
    max-width: 330px !important;

    font-size: .91rem !important;
    line-height: 1.65 !important;

    color: #969da4 !important;
}


/* subtle individual markers instead of boxes */
.engineering-feature::before {
    content: "";

    display: block;

    width: 100%;
    height: 1px;

    margin-bottom: 24px;

    background: linear-gradient(
        90deg,
        rgba(189,194,199,.42),
        rgba(189,194,199,.08) 55%,
        transparent
    );
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 900px) {

    #services .services-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 42px 28px !important;
    }

    .engineering-features {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

@media (max-width: 620px) {

    #services .services-grid {
        grid-template-columns: 1fr !important;
        gap: 38px !important;
    }

    #services .service-card {
        padding: 0 !important;
    }

    .engineering-feature::before {
        margin-bottom: 20px;
    }
}


/* =========================================================
   LF CUSTOMS - PREMIUM ENGINEERING SERVICE PANELS
   ========================================================= */

#services .services-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    gap: 16px !important;

    margin-top: 52px !important;

    border: 0 !important;
}


/* ---------------------------------------------------------
   PANEL
   --------------------------------------------------------- */

#services .service-card {
    position: relative !important;

    min-height: 245px !important;

    padding: 34px 30px 32px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;

    text-align: left !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045) 0%,
            rgba(255,255,255,.018) 45%,
            rgba(0,0,0,.08) 100%
        ) !important;

    border: 1px solid rgba(189,194,199,.13) !important;
    border-radius: 7px !important;

    box-shadow:
        0 18px 40px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.025) !important;

    overflow: hidden !important;

    transform: none !important;

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease !important;
}


/* brushed silver upper edge */
#services .service-card::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 42% !important;
    height: 2px !important;

    margin: 0 !important;

    background:
        linear-gradient(
            90deg,
            #BDC2C7,
            rgba(189,194,199,.38),
            transparent
        ) !important;

    opacity: .9 !important;
}


/* subtle technical corner detail */
#services .service-card::after {
    content: "" !important;

    position: absolute !important;

    top: 15px !important;
    right: 15px !important;

    width: 18px !important;
    height: 18px !important;

    border-top: 1px solid rgba(189,194,199,.38);
    border-right: 1px solid rgba(189,194,199,.38);

    opacity: .65;
}


/* ---------------------------------------------------------
   TYPOGRAPHY
   --------------------------------------------------------- */

#services .service-card h3 {
    margin: 0 0 13px !important;

    font-size: 1.18rem !important;
    line-height: 1.2 !important;

    text-align: left !important;

    color: #F2F2F0 !important;
}

#services .service-card p {
    max-width: 275px !important;

    margin: 0 !important;

    font-size: .93rem !important;
    line-height: 1.62 !important;

    text-align: left !important;

    color: #979EA5 !important;
}


/* ---------------------------------------------------------
   VERY SUBTLE DIFFERENCES BETWEEN PANELS
   --------------------------------------------------------- */

#services .service-card:nth-child(2) {
    background:
        linear-gradient(
            160deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.014) 55%,
            rgba(0,0,0,.10)
        ) !important;
}

#services .service-card:nth-child(3) {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.016) 52%,
            rgba(0,0,0,.09)
        ) !important;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

#services .service-card:hover {
    transform: translateY(-4px) !important;

    padding-left: 30px !important;

    border-color: rgba(189,194,199,.28) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025) 48%,
            rgba(0,0,0,.06)
        ) !important;

    box-shadow:
        0 24px 48px rgba(0,0,0,.27),
        inset 0 1px 0 rgba(255,255,255,.04) !important;
}

#services .service-card:hover::before {
    width: 62% !important;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {

    #services .services-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
    }

    #services .service-card {
        min-height: 220px !important;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 620px) {

    #services .services-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    #services .service-card {
        min-height: 185px !important;

        padding: 28px 24px !important;
    }

    #services .service-card:hover {
        padding-left: 24px !important;
        transform: none !important;
    }

}

/* =========================================================
   LF CUSTOMS - HERO ULTRAWIDE BALANCE
   Normal desktop remains untouched
   ========================================================= */

@media (min-width: 2400px) {

    .hero-grid {
        grid-template-columns: 58% 42% !important;
    }

    .hero-content {
        padding-left: clamp(140px, 8vw, 320px) !important;
        padding-right: clamp(90px, 5vw, 200px) !important;
    }

    .hero-inner {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .hero .eyebrow {
        font-size: clamp(12px, .48vw, 17px) !important;
        letter-spacing: .16em !important;
    }

    .hero h1 {
        max-width: 1100px !important;

        font-size: clamp(6rem, 4.6vw, 10rem) !important;
        line-height: .9 !important;
        letter-spacing: -.055em !important;
    }

    .hero-copy {
        max-width: 900px !important;

        font-size: clamp(1.2rem, 1vw, 2rem) !important;
        line-height: 1.55 !important;
    }

    .hero-actions .btn {
        font-size: clamp(.95rem, .72vw, 1.35rem) !important;
        padding: clamp(14px, .8vw, 22px) clamp(24px, 1.4vw, 42px) !important;
    }

    .hero-meta span {
        font-size: clamp(.7rem, .55vw, 1rem) !important;
    }

    .hero-media {
        width: 100% !important;
        min-width: 0 !important;
    }

    .hero-media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}


/* =========================================================
   LF CUSTOMS - Service panels centered
   ========================================================= */

#services .service-card {
    min-height: 205px !important;

    padding: 26px 28px !important;

    justify-content: center !important;
    align-items: center !important;

    text-align: center !important;
}

#services .service-card h3 {
    margin: 0 0 14px !important;

    text-align: center !important;
}

#services .service-card p {
    max-width: 270px !important;

    margin: 0 auto !important;

    text-align: center !important;
}

/* Keep silver top detail subtle */
#services .service-card::before {
    width: 34% !important;
}

/* No horizontal shift on hover */
#services .service-card:hover {
    padding-left: 28px !important;
}

/* Mobile */
@media (max-width: 620px) {

    #services .service-card {
        min-height: 170px !important;
        padding: 24px 22px !important;
    }

    #services .service-card:hover {
        padding-left: 22px !important;
    }

}


/* =========================================================
   LF CUSTOMS - PROJECT SHOWCASE GALLERY
   ========================================================= */

#projects .projects-head {
    align-items: end;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

#projects .projects-head .section-copy {
    max-width: 42rem;
}

#projects .gallery.gallery-showcase {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 1.15rem !important;
    align-items: start;
}

#projects .showcase-card {
    position: relative;

    grid-column: span 4;

    margin: 0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(17,20,24,.96),
            rgba(10,12,16,.98)
        );

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 18px 40px rgba(0,0,0,.24);

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

#projects .showcase-card.span-7 {
    grid-column: span 7;
}

#projects .showcase-card.span-5 {
    grid-column: span 5;
}

#projects .showcase-card.span-4 {
    grid-column: span 4;
}

#projects .showcase-card:hover {
    transform: translateY(-3px);

    border-color: rgba(189,194,199,.22);

    box-shadow:
        0 24px 55px rgba(0,0,0,.34);
}

#projects .showcase-card .card-media {
    position: relative;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #0d1015;
}

#projects .showcase-card.span-7 .card-media {
    aspect-ratio: 16 / 10;
}

#projects .showcase-card.span-5 .card-media {
    aspect-ratio: 5 / 4;
}

#projects .showcase-card img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    transition: transform .8s ease;
}

#projects .showcase-card:hover img {
    transform: scale(1.025);
}

#projects .showcase-card .card-media::after {
    content: "";

    position: absolute;
    inset: auto 0 0 0;

    height: 34%;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(7,8,11,.18) 55%,
            rgba(7,8,11,.62)
        );
}

#projects .showcase-card figcaption {
    display: grid;

    gap: .55rem;

    padding: 18px 20px 20px;
}

#projects .project-kicker {
    display: inline-flex;
    align-items: center;

    gap: .55rem;

    font-family:
        "Bahnschrift",
        "Bahnschrift SemiCondensed",
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: .67rem;
    font-weight: 600;

    letter-spacing: .18em;
    text-transform: uppercase;

    color: #BDC2C7;
}

#projects .project-kicker::before {
    content: "";

    display: inline-block;

    width: 24px;
    height: 1px;

    background: rgba(189,194,199,.55);
}

#projects .showcase-card h3 {
    margin: 0;

    font-size: 1.1rem;
    line-height: 1.2;

    color: #F2F2F0;
}

#projects .showcase-card p {
    margin: 0;

    font-size: .92rem;
    line-height: 1.55;

    color: #969DA4;
}


/* Tablet */

@media (max-width: 1100px) {

    #projects .gallery.gallery-showcase {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    #projects .showcase-card.span-7,
    #projects .showcase-card.span-5,
    #projects .showcase-card.span-4 {
        grid-column: span 3;
    }

    #projects .showcase-card:first-child,
    #projects .showcase-card:last-child {
        grid-column: span 6;
    }

}


/* Mobile */

@media (max-width: 700px) {

    #projects .gallery.gallery-showcase {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    #projects .showcase-card,
    #projects .showcase-card.span-7,
    #projects .showcase-card.span-5,
    #projects .showcase-card.span-4,
    #projects .showcase-card:first-child,
    #projects .showcase-card:last-child {
        grid-column: auto;
    }

    #projects .showcase-card .card-media,
    #projects .showcase-card.span-7 .card-media,
    #projects .showcase-card.span-5 .card-media {
        aspect-ratio: 4 / 3;
    }

    #projects .projects-head {
        margin-bottom: 1.5rem;
    }

}


/* =========================================================
   LF CUSTOMS - PROJECT SHOWCASE GALLERY
   ========================================================= */

#projects .projects-head {
    align-items: end;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

#projects .projects-head .section-copy {
    max-width: 42rem;
}

#projects .gallery.gallery-showcase {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 1.15rem !important;
    align-items: start;
}

#projects .showcase-card {
    position: relative;

    grid-column: span 4;

    margin: 0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(17,20,24,.96),
            rgba(10,12,16,.98)
        );

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 18px 40px rgba(0,0,0,.24);

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

#projects .showcase-card.span-7 {
    grid-column: span 7;
}

#projects .showcase-card.span-5 {
    grid-column: span 5;
}

#projects .showcase-card.span-4 {
    grid-column: span 4;
}

#projects .showcase-card:hover {
    transform: translateY(-3px);

    border-color: rgba(189,194,199,.22);

    box-shadow:
        0 24px 55px rgba(0,0,0,.34);
}

#projects .showcase-card .card-media {
    position: relative;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #0d1015;
}

#projects .showcase-card.span-7 .card-media {
    aspect-ratio: 16 / 10;
}

#projects .showcase-card.span-5 .card-media {
    aspect-ratio: 5 / 4;
}

#projects .showcase-card img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    transition: transform .8s ease;
}

#projects .showcase-card:hover img {
    transform: scale(1.025);
}

#projects .showcase-card .card-media::after {
    content: "";

    position: absolute;
    inset: auto 0 0 0;

    height: 34%;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(7,8,11,.18) 55%,
            rgba(7,8,11,.62)
        );
}

#projects .showcase-card figcaption {
    display: grid;

    gap: .55rem;

    padding: 18px 20px 20px;
}

#projects .project-kicker {
    display: inline-flex;
    align-items: center;

    gap: .55rem;

    font-family:
        "Bahnschrift",
        "Bahnschrift SemiCondensed",
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: .67rem;
    font-weight: 600;

    letter-spacing: .18em;
    text-transform: uppercase;

    color: #BDC2C7;
}

#projects .project-kicker::before {
    content: "";

    display: inline-block;

    width: 24px;
    height: 1px;

    background: rgba(189,194,199,.55);
}

#projects .showcase-card h3 {
    margin: 0;

    font-size: 1.1rem;
    line-height: 1.2;

    color: #F2F2F0;
}

#projects .showcase-card p {
    margin: 0;

    font-size: .92rem;
    line-height: 1.55;

    color: #969DA4;
}


/* Tablet */

@media (max-width: 1100px) {

    #projects .gallery.gallery-showcase {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    #projects .showcase-card.span-7,
    #projects .showcase-card.span-5,
    #projects .showcase-card.span-4 {
        grid-column: span 3;
    }

    #projects .showcase-card:first-child,
    #projects .showcase-card:last-child {
        grid-column: span 6;
    }

}


/* Mobile */

@media (max-width: 700px) {

    #projects .gallery.gallery-showcase {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    #projects .showcase-card,
    #projects .showcase-card.span-7,
    #projects .showcase-card.span-5,
    #projects .showcase-card.span-4,
    #projects .showcase-card:first-child,
    #projects .showcase-card:last-child {
        grid-column: auto;
    }

    #projects .showcase-card .card-media,
    #projects .showcase-card.span-7 .card-media,
    #projects .showcase-card.span-5 .card-media {
        aspect-ratio: 4 / 3;
    }

    #projects .projects-head {
        margin-bottom: 1.5rem;
    }

}


/* =========================================================
   LF CUSTOMS - PROJECT GALLERY COLLISION FIX
   ========================================================= */

#projects .gallery.gallery-showcase {
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
}

#projects .gallery.gallery-showcase .gallery-item,
#projects .gallery.gallery-showcase .showcase-card {
    grid-row: auto !important;

    height: auto !important;
    min-height: 0 !important;

    aspect-ratio: auto !important;

    position: relative !important;
    inset: auto !important;

    overflow: hidden !important;
}

#projects .gallery.gallery-showcase .showcase-card.span-7 {
    grid-column: span 7 !important;
}

#projects .gallery.gallery-showcase .showcase-card.span-5 {
    grid-column: span 5 !important;
}

#projects .gallery.gallery-showcase .showcase-card.span-4 {
    grid-column: span 4 !important;
}

/* Neutralize old nth-child gallery sizing */
#projects .gallery.gallery-showcase .gallery-item:nth-child(n) {
    grid-row: auto !important;
}

@media (max-width: 1100px) {

    #projects .gallery.gallery-showcase .showcase-card.span-7,
    #projects .gallery.gallery-showcase .showcase-card.span-5,
    #projects .gallery.gallery-showcase .showcase-card.span-4 {
        grid-column: span 3 !important;
    }

    #projects .gallery.gallery-showcase .showcase-card:first-child,
    #projects .gallery.gallery-showcase .showcase-card:last-child {
        grid-column: span 6 !important;
    }

}

@media (max-width: 700px) {

    #projects .gallery.gallery-showcase .showcase-card,
    #projects .gallery.gallery-showcase .showcase-card.span-7,
    #projects .gallery.gallery-showcase .showcase-card.span-5,
    #projects .gallery.gallery-showcase .showcase-card.span-4,
    #projects .gallery.gallery-showcase .showcase-card:first-child,
    #projects .gallery.gallery-showcase .showcase-card:last-child {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

}


/* =========================================================
   LF CUSTOMS - IMAGE ONLY PROJECT GALLERY
   ========================================================= */

#projects .gallery-images-only {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-auto-rows: 185px !important;
    grid-auto-flow: dense !important;

    gap: 12px !important;

    margin-top: 40px !important;
}


/* remove every old card / caption / label behaviour */

#projects .gallery-images-only .gallery-item {
    position: relative !important;

    margin: 0 !important;
    padding: 0 !important;

    grid-column: span 3 !important;
    grid-row: span 1 !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    overflow: hidden !important;

    background: #111418 !important;

    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 10px !important;

    box-shadow: none !important;

    cursor: pointer;
}

#projects .gallery-images-only .gallery-item::before,
#projects .gallery-images-only .gallery-item::after {
    display: none !important;
    content: none !important;
}


/* image */

#projects .gallery-images-only .gallery-item img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    transition:
        transform .5s ease,
        filter .5s ease;
}

#projects .gallery-images-only .gallery-item:hover img {
    transform: scale(1.025);
}


/* =========================================================
   DESKTOP MOSAIC
   ========================================================= */

#projects .gallery-images-only .gallery-item:nth-child(1) {
    grid-column: span 5 !important;
    grid-row: span 2 !important;
}

#projects .gallery-images-only .gallery-item:nth-child(2) {
    grid-column: span 4 !important;
}

#projects .gallery-images-only .gallery-item:nth-child(3) {
    grid-column: span 3 !important;
}

#projects .gallery-images-only .gallery-item:nth-child(4) {
    grid-column: span 3 !important;
}

#projects .gallery-images-only .gallery-item:nth-child(5) {
    grid-column: span 4 !important;
    grid-row: span 2 !important;
}

#projects .gallery-images-only .gallery-item:nth-child(6) {
    grid-column: span 3 !important;
}

#projects .gallery-images-only .gallery-item:nth-child(7) {
    grid-column: span 5 !important;
}

#projects .gallery-images-only .gallery-item:nth-child(8) {
    grid-column: span 3 !important;
    grid-row: span 2 !important;
}

#projects .gallery-images-only .gallery-item:nth-child(9) {
    grid-column: span 4 !important;
}

#projects .gallery-images-only .gallery-item:nth-child(10) {
    grid-column: span 5 !important;
    grid-row: span 2 !important;
}

#projects .gallery-images-only .gallery-item:nth-child(11) {
    grid-column: span 4 !important;
}

#projects .gallery-images-only .gallery-item:nth-child(12) {
    grid-column: span 3 !important;
}

#projects .gallery-images-only .gallery-item:nth-child(13) {
    grid-column: span 4 !important;
    grid-row: span 2 !important;
}

#projects .gallery-images-only .gallery-item:nth-child(14) {
    grid-column: span 4 !important;
}

#projects .gallery-images-only .gallery-item:nth-child(15) {
    grid-column: span 4 !important;
}

#projects .gallery-images-only .gallery-item:nth-child(16) {
    grid-column: span 5 !important;
    grid-row: span 2 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    #projects .gallery-images-only {
        grid-template-columns: repeat(6, 1fr) !important;
        grid-auto-rows: 180px !important;
    }

    #projects .gallery-images-only .gallery-item:nth-child(n) {
        grid-column: span 3 !important;
        grid-row: span 1 !important;
    }

    #projects .gallery-images-only .gallery-item:nth-child(1),
    #projects .gallery-images-only .gallery-item:nth-child(5),
    #projects .gallery-images-only .gallery-item:nth-child(10),
    #projects .gallery-images-only .gallery-item:nth-child(16) {
        grid-column: span 6 !important;
        grid-row: span 2 !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

    #projects .gallery-images-only {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;

        gap: 10px !important;

        margin-top: 28px !important;
    }

    #projects .gallery-images-only .gallery-item:nth-child(n) {
        grid-column: 1 !important;
        grid-row: auto !important;

        aspect-ratio: 4 / 3 !important;
    }

}


/* =========================================================
   LF CUSTOMS - UNIFORM PROJECT GALLERY
   ========================================================= */

#projects .gallery-images-only {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    gap: 12px !important;

    margin-top: 40px !important;

    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
}


/* Every image gets one clean, equal tile */

#projects .gallery-images-only .gallery-item,
#projects .gallery-images-only .gallery-item:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: 4 / 3 !important;

    margin: 0 !important;
    padding: 0 !important;

    position: relative !important;

    overflow: hidden !important;

    background: #101317 !important;

    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 10px !important;

    box-shadow: none !important;
}


/* Image fills the whole tile */

#projects .gallery-images-only .gallery-item img {
    display: block !important;

    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    border-radius: inherit !important;

    transition: transform .45s ease !important;
}

#projects .gallery-images-only .gallery-item:hover img {
    transform: scale(1.025) !important;
}


/* No legacy overlays / labels */

#projects .gallery-images-only .gallery-item::before,
#projects .gallery-images-only .gallery-item::after {
    display: none !important;
    content: none !important;
}


/* Tablet */

@media (max-width: 1050px) {

    #projects .gallery-images-only {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

}


/* Mobile */

@media (max-width: 700px) {

    #projects .gallery-images-only {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 9px !important;
    }

    #projects .gallery-images-only .gallery-item,
    #projects .gallery-images-only .gallery-item:nth-child(n) {
        aspect-ratio: 4 / 3 !important;
    }

}


/* Very small phones */

@media (max-width: 430px) {

    #projects .gallery-images-only {
        grid-template-columns: 1fr !important;
    }

}


/* =========================================================
   LF CUSTOMS - Engineering typography aligned with services
   ========================================================= */

#mindset .mindset-item h3,
#mindset .mindset-item p,
#mindset .mindset-item .mindset-index,
#mindset .mindset-item .eyebrow,
#mindset .mindset-item .section-kicker {
    font-family: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

#mindset .mindset-item h3 {
    margin: 0 0 14px 0 !important;

    font-size: 1.05rem !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;

    color: #F2F2F0 !important;
}

#mindset .mindset-item p {
    margin: 0 !important;

    font-size: 1rem !important;
    line-height: 1.75 !important;
    font-weight: 400 !important;

    color: #969DA4 !important;
}

#mindset .mindset-item .mindset-index {
    margin-bottom: 18px !important;

    font-size: .9rem !important;
    font-weight: 700 !important;

    color: #BDC2C7 !important;
}


/* =========================================================
   LF CUSTOMS - Projects heading alignment
   ========================================================= */

#projects .projects-head {
    display: block !important;
    margin-bottom: 38px !important;
}

#projects .projects-head .section-copy {
    max-width: 620px !important;

    margin: 24px 0 0 !important;

    font-size: 1rem !important;
    line-height: 1.65 !important;

    color: #969DA4 !important;
}


/* =========================================================
   LF CUSTOMS - Legal contact details
   ========================================================= */

.legal-contact {
    margin-top: 42px;
    padding-top: 30px;

    border-top: 1px solid rgba(189, 194, 199, .18);
}

.legal-contact h2 {
    margin: 0 0 18px;

    font-size: 1.2rem;
    font-weight: 700;

    color: #F2F2F0;
}

.legal-contact p {
    margin: 0 0 16px;

    line-height: 1.75;

    color: #969DA4;
}

.legal-contact strong {
    color: #F2F2F0;
}

.legal-contact a {
    color: #BDC2C7;
    text-decoration: none;
}

.legal-contact a:hover {
    color: #D5D9DD;
}