/* ============================================================
   SPARROW MILLWRIGHT — Custom Overrides
   Layered on top of the Lana template's theme.css
   ============================================================ */

/* --- Accent color system --- */
:root {
  --accent:       #C8963A;
  --accent-hover: #DBA94D;
  --accent-glow:  rgba(200,150,58,.12);
  --accent-dim:   rgba(200,150,58,.5);
  --dark:         #030507;
  --card-bg:      rgba(255,255,255,.05);
  --card-border:  rgba(255,255,255,.08);
  --card-hover:   rgba(255,255,255,.12);
}


/* ============================================================
   ADA
   ============================================================ */
.skip-link {
  position: absolute; top: -100%; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--dark);
  padding: .65rem 1.5rem; font-weight: 700; font-size: .9rem;
  z-index: 100000; border-radius: 4px; text-decoration: none;
  transition: top .3s ease;
}
.skip-link:focus { top: 1rem; outline: 3px solid #fff; outline-offset: 2px; }

*:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .animated { animation: none !important; opacity: 1 !important; visibility: visible !important; }
  .overlay-video video { display: none; }
}

@media (forced-colors: active) {
  .btn, .btn-cta, .btn-cta-outline { border: 2px solid ButtonText; }
  .svc-card { border: 1px solid ButtonText; }
}


/* ============================================================
   ACCENT COLOR — applied throughout
   ============================================================ */

/* Nav hover */
.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus-visible {
  color: var(--accent) !important;
}

/* Scroll progress bars */
.scroll-progress .sp-inner.progress {
  background: var(--accent) !important;
}

/* Back to top */
a.backtotop { color: var(--accent); }
a.backtotop:hover, a.backtotop:focus { color: var(--accent-hover); }

/* Dividers in portfolio */
.divider.divider-alt {
  background: var(--accent) !important;
}

/* Fullpage nav dots */
div#fp-nav ul li a span {
  border: 1px solid rgba(255,255,255,.3);
  background: transparent !important;
  transition: all .4s ease;
}
div#fp-nav ul li a.active span,
div#fp-nav ul li:hover a span {
  background: var(--accent) !important;
  border-color: var(--accent);
}

/* Social icons */
.ln-social-icons a:hover { color: var(--accent) !important; }

/* Footer social */
footer .btn-icon:hover { color: var(--accent) !important; }


/* ============================================================
   TYPOGRAPHY — fluid scaling
   ============================================================ */
h1 {
  font-family: 'Montserrat', Helvetica, sans-serif;
  font-weight: 700; letter-spacing: .02em; line-height: 1.08;
  font-size: clamp(2rem, 5vw + .5rem, 4.5rem);
}
h2 {
  font-family: 'Montserrat', Helvetica, sans-serif;
  font-weight: 600; letter-spacing: .01em;
  font-size: clamp(1.5rem, 3vw + .3rem, 2.6rem);
}
h4, .h3 {
  font-family: 'Montserrat', Helvetica, sans-serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.4vw + .2rem, 1.5rem);
}
p, .ln-section p {
  font-size: clamp(.92rem, .8vw + .35rem, 1.1rem);
  line-height: 1.75;
}


/* ============================================================
   HERO — CTA buttons + refined text
   ============================================================ */

/* Hero centering — own it on the section instead of relying on a child's
   align-self. Works with fullPage.js active or not, and uses 100svh so iOS
   Safari's URL bar doesn't bias content upward. */
.ln-section[data-anchor="home"].d-flex.min-vh-100 {
  align-items: center !important;
  justify-content: center !important;
  min-height: 100svh !important;
}
.ln-section[data-anchor="home"] > .container {
  width: 100%;
}

.hero-text h1 {
  text-shadow: 0 2px 30px rgba(0,0,0,.4);
}
.hero-text p {
  text-shadow: 0 1px 15px rgba(0,0,0,.3);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-cta-row {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: .5rem;
}


/* ============================================================
   SECTION SPACING — clear the fixed navbar without breaking
   fullPage.js viewport-snap behavior on desktop
   ============================================================
   This is a fullPage.js site — each non-home section snaps to
   viewport height on desktop (>=1200x768). Total padding directly
   eats into the content area, so values must stay close to the
   original 4.5rem each side; otherwise sections grow past viewport
   and fullPage adds an internal scroller (`is-scrollable`), which
   breaks the snap-page design.

   Two scopes:
   - <1200: fullPage destroyed, sections flow naturally — padding
     can be generous since there's no snap constraint.
   - >=1200: minimal bump to padding-top only, just enough that the
     navbar (~98px standard, ~113px at 4K) clears the worst-case
     centered-content edge. align-self-xl-center on the container
     handles the rest.

   Hero is excluded — it owns its own min-vh-100 centering. */

/* Tablet/mobile path — fullPage is destroyed below 1200 */
@media (max-width: 1199.98px) {
  .ln-section:not([data-anchor="home"]) {
    padding-top: clamp(7rem, 9vh + 2rem, 8.5rem);
    padding-bottom: clamp(2.5rem, 5vh, 4rem);
  }
  .ln-section > .container {
    max-width: 100%;
    padding-left: clamp(1.25rem, 4vw, 3rem);
    padding-right: clamp(1.25rem, 4vw, 3rem);
  }
}

/* Desktop fullPage path — preserve content area, just clear nav.
   Specificity (2 classes) beats theme.css's `body.ln-fullpage-active
   section` (1 class), so this overrides the default 4.5rem. The
   stricter `body.ln-fullpage-active section.is-scrollable` (2 classes
   + 2 elements) still wins for any section that has overflowed and
   already had its padding zeroed out — fp-scroller handles its own. */
@media (min-width: 1200px) {
  /* Section padding-top with !important — beats theme.css's
     `body.ln-fullpage-active section.is-scrollable { padding: 0 }`
     so content always clears the navbar, even when fullPage adds
     the is-scrollable class but no fp-scroller wrapper. */
  .ln-section:not([data-anchor="home"]) {
    padding-top: clamp(8rem, 8vh + 1.5rem, 10rem) !important;
    padding-bottom: clamp(2.5rem, 4vh, 4.5rem) !important;
  }

  /* fp-scroller (when fullPage wraps content because the section
     overflows) sits inside the section's padded content area.
     Zero out its own padding so total navbar clearance is exactly
     the section padding-top — no double-padding. */
  .ln-section:not([data-anchor="home"]) .fp-scroller {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Container override — handle every combination of:
     - body has/doesn't have layout-boxed
     - section has/doesn't have .is-scrollable class
     - fullPage has/hasn't wrapped content in .fp-scrollable > .fp-scroller
     The theme.css rules only cover three of the four; specifically the
     case where fullPage's scrollOverflow handler wraps the content but
     main.js's is-scrollable class isn't added (a measurement-timing
     mismatch in the original theme code) leaves the container falling
     back to Bootstrap's xl 1140px max-width + 15px padding inside a
     flex section, producing a 790px-wide left-anchored box at x=0.

     Side padding tracks the navbar's exactly so section content edges
     line up with the logo's left edge and the last nav item's right
     edge: theme's `body.ln-fullpage-active:not(.layout-mobile) .site-navbar`
     uses 9rem at >=1400, while the navbar falls back to Bootstrap's 1rem
     default at 1200-1399. Two-tier media query mirrors that. */
  .ln-section > .container,
  .ln-section .fp-scroller > .container {
    max-width: 100% !important;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* When fullPage wraps content in .fp-scrollable, that wrapper becomes
     the section's flex item. Without explicit grow it shrinks to the
     intrinsic content width (~904px) and the container inside is capped
     to that. Force fill so the container can use the full section width. */
  .ln-section:not([data-anchor="home"]) > .fp-scrollable {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* Container side padding — navbar-aligned where possible.
   At >=1400 the theme makes the navbar use 9rem padding, so content
   aligns naturally there. At 1200-1399 the navbar uses Bootstrap's
   1rem default — but the .ln-social-icons (left, 4.5rem wide) and
   a.backtotop (right, 4.5rem wide) fixed strips would cover any
   content with less than 4.5rem of side padding, so we use 6rem
   (1.5rem of breathing room past the 72px icon strips) instead of
   matching the navbar at this narrower range. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .ln-section > .container,
  .ln-section .fp-scroller > .container {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
  }
}
@media (min-width: 1400px) {
  .ln-section > .container,
  .ln-section .fp-scroller > .container {
    padding-left: 9rem !important;
    padding-right: 9rem !important;
  }
}


/* ============================================================
   CONTACT — even row distribution + readable lede
   ============================================================
   Markup uses col-md-3/col-lg-3 (= 9/12, leaves 25% empty on the
   right and looks left-stuck). Stretch each to 1/3 from md+ so the
   three items span the full row evenly. */
.ln-section[data-anchor="contact"] .row > .col-md-3.col-lg-3 {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}
@media (max-width: 767.98px) {
  .ln-section[data-anchor="contact"] .row > .col-md-3.col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* Constrain the intro lede so it doesn't span 100% of a wide viewport */
.ln-section[data-anchor="contact"] #contact-h + p,
.ln-section[data-anchor="contact"] #contact-h ~ p {
  max-width: 760px;
}

.btn-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Montserrat', Helvetica, sans-serif;
  font-size: clamp(.72rem, .8vw, .85rem);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em;
  padding: .8rem 2rem;
  border-radius: 4px;
  text-decoration: none;
  transition: all .35s ease;
  cursor: pointer;
}
.btn-cta-primary {
  background: var(--accent); color: var(--dark);
}
.btn-cta-primary:hover, .btn-cta-primary:focus-visible {
  background: var(--accent-hover); color: var(--dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(200,150,58,.3);
}
.btn-cta-outline {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.25);
  color: #fff;
}
.btn-cta-outline:hover, .btn-cta-outline:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}


/* ============================================================
   ABOUT — Two-column with image + stats
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.about-img-wrap {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4/5;
  max-height: 70vh;
}
.about-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.about-year-badge {
  position: absolute; bottom: 1.25rem; left: 1.25rem;
  background: var(--accent); color: var(--dark);
  padding: .75rem 1.1rem; border-radius: 4px;
  text-align: center; line-height: 1;
}
.about-year-badge strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 800;
}
.about-year-badge small {
  font-size: .65rem; text-transform: uppercase;
  letter-spacing: .12em; font-weight: 700;
}
.about-text h2 {
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: 1rem;
}
.about-text h2::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 40px; height: 3px;
  background: var(--accent);
}
.about-text p {
  color: rgba(255,255,255,.7);
}

/* Stats row */
.about-stats {
  display: flex; gap: 2rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.about-stat { text-align: left; }
.about-stat-num {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-weight: 800; color: var(--accent); line-height: 1;
}
.about-stat-label {
  font-size: .7rem; text-transform: uppercase;
  letter-spacing: .12em; color: rgba(255,255,255,.45);
  margin-top: .2rem;
}


/* ============================================================
   SERVICES — Card treatment + icons
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.svc-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
  position: relative;
  overflow: hidden;
}
.svc-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
.svc-card:hover::before { transform: scaleX(1); }
.svc-card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.svc-icon {
  width: clamp(44px, 4vw, 56px); height: clamp(44px, 4vw, 56px);
  background: var(--accent-glow);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  color: var(--accent);
}
.svc-card h4 {
  color: #fff;
  margin-bottom: .6rem;
}
.svc-card p {
  color: rgba(255,255,255,.65);
  margin: 0;
}


/* ============================================================
   OUR WORK — Capability Showcase
   Asymmetric editorial layout: one featured trade + two satellites.
   Industrial spec-sheet treatment (numbered, frame brackets, blueprint metas).
   ============================================================ */

/* --- Section header --- */
.work-header {
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
  max-width: 720px;
}
.work-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(.7rem, .75vw, .82rem);
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .8rem;
}
.work-header h2 {
  margin: 0;
  position: relative;
  padding-bottom: 1rem;
}
.work-header h2::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 48px; height: 3px;
  background: var(--accent);
}
.work-lede {
  color: rgba(255,255,255,.65);
  margin: 1.25rem 0 0;
  max-width: 620px;
}

/* --- Grid: featured + two satellites ---
   Height tuned to fit alongside the work-header within a single
   fullPage viewport at 1080 (header ~228 + mb ~32 + grid ~600 +
   147 padding = 1007, leaving comfortable breathing room). */
.capability-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "feat sec1"
    "feat sec2";
  gap: clamp(.75rem, 1.4vw, 1.25rem);
  height: clamp(380px, 54vh, 640px);
}
.cap-card-featured                   { grid-area: feat; }
.cap-card-secondary:nth-child(2)     { grid-area: sec1; }
.cap-card-secondary:nth-child(3)     { grid-area: sec2; }

/* --- Card shell --- */
.cap-card {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--dark);
  isolation: isolate;
}
.cap-card-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* --- Image layer --- */
.cap-card-img {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.cap-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.25,.46,.45,.94),
              filter .55s ease;
  filter: brightness(.55) contrast(1.05) saturate(.92);
}
.cap-card:hover .cap-card-img img,
.cap-card-link:focus-visible .cap-card-img img {
  transform: scale(1.06);
  filter: brightness(.72) contrast(1.05) saturate(1);
}

/* Bottom-up gradient for legibility */
.cap-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(3,5,7,.15) 0%,
    rgba(3,5,7,.10) 35%,
    rgba(3,5,7,.65) 70%,
    rgba(3,5,7,.94) 100%
  );
}

/* --- Industrial frame corners (reveal on hover/focus) --- */
.cap-card-frame {
  position: absolute;
  inset: clamp(.85rem, 1.2vw, 1.3rem);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
}
.cap-card:hover .cap-card-frame,
.cap-card-link:focus-visible .cap-card-frame {
  opacity: 1;
}
.cap-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--accent);
}
.cap-corner-tl { top: 0; left: 0;  border-right: 0; border-bottom: 0; }
.cap-corner-tr { top: 0; right: 0; border-left: 0;  border-bottom: 0; }
.cap-corner-bl { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.cap-corner-br { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

/* --- Index number, top-right ---
   Originally top-left; collides with .cap-card-body's left-anchored
   meta/title on shorter satellite cards where the body content reaches
   high enough to overlap. Right side keeps the number visible without
   stacking on top of the eyebrow text. */
.cap-num {
  position: absolute;
  top: clamp(.85rem, 1.5vw, 1.6rem);
  right: clamp(1rem, 1.8vw, 1.8rem);
  left: auto;
  z-index: 4;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.7rem, 2.6vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.cap-card-featured .cap-num {
  font-size: clamp(2.2rem, 3.6vw, 3.8rem);
}

/* --- Content block, bottom --- */
.cap-card-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  padding: clamp(1.15rem, 2vw, 2rem);
  color: #fff;
}
.cap-meta {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(.6rem, .65vw, .72rem);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin: 0 0 .85rem;
}
.cap-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .005em;
  color: #fff;
  margin: 0 0 .85rem;
  font-size: clamp(1.2rem, 1.7vw, 1.65rem);
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.cap-card-featured .cap-title {
  font-size: clamp(1.55rem, 2.6vw, 2.4rem);
}
.cap-desc {
  font-size: clamp(.82rem, .82vw, .96rem);
  line-height: 1.55;
  color: rgba(255,255,255,.78);
  margin: 0 0 1rem;
  max-width: 32em;
}
.cap-card-secondary .cap-desc {
  font-size: clamp(.78rem, .78vw, .88rem);
  max-width: 28em;
}
.cap-action {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(.7rem, .72vw, .78rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: .85rem;
  border-top: 1px solid rgba(200,150,58,.28);
  width: fit-content;
}
.cap-action i {
  transition: transform .35s ease;
  font-size: .8em;
}
.cap-card:hover .cap-action,
.cap-card-link:focus-visible .cap-action {
  color: var(--accent-hover);
  border-top-color: rgba(219,169,77,.55);
}
.cap-card:hover .cap-action i,
.cap-card-link:focus-visible .cap-action i {
  transform: translateX(5px);
}

/* --- Hidden gallery anchor groups (magnific-popup source) --- */
.cap-galleries {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ============================================================
   OUR WORK — Tablet (<=1024px)
   Stack featured full-width on top, two satellites in a 2-up row below.
   ============================================================ */
@media (max-width: 1024px) {
  .capability-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(280px, 42vh) minmax(220px, 32vh);
    grid-template-areas:
      "feat feat"
      "sec1 sec2";
    height: auto;
  }
  .cap-card-featured .cap-title { font-size: clamp(1.4rem, 3.5vw, 2rem); }
}


/* ============================================================
   OUR WORK — Mobile (<=768px)
   Single-column stack — every card full-width, comfortable reading.
   ============================================================ */
@media (max-width: 768px) {
  .work-header h2::after { width: 40px; }
  .capability-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: none;
    height: auto;
    gap: 1rem;
  }
  .cap-card-featured,
  .cap-card-secondary:nth-child(2),
  .cap-card-secondary:nth-child(3) {
    grid-area: auto;
  }
  .cap-card {
    aspect-ratio: 4 / 3;
    min-height: 320px;
  }
  .cap-card-featured { aspect-ratio: 4 / 3.4; }
  .cap-card-frame  { opacity: 1; } /* always visible on touch */
  .cap-card-img img { filter: brightness(.6) contrast(1.05) saturate(.95); }
  .cap-card-featured .cap-title,
  .cap-card-secondary .cap-title { font-size: clamp(1.3rem, 5.5vw, 1.7rem); }
}


/* ============================================================
   OUR WORK — Small mobile (<=420px)
   ============================================================ */
@media (max-width: 420px) {
  .cap-card { min-height: 280px; }
  .cap-card-body { padding: 1.1rem; }
  .cap-num { font-size: 1.6rem; top: .85rem; right: 1rem; left: auto; }
  .cap-card-featured .cap-num { font-size: 2rem; }
}


/* ============================================================
   OUR WORK — 4K / Ultrawide (>=3440px)
   Scale everything up for big-monitor viewers.
   ============================================================ */
@media (min-width: 3440px) {
  .capability-grid {
    height: clamp(640px, 54vh, 1000px);
    gap: 1.5rem;
  }
  .cap-corner { width: 28px; height: 28px; border-width: 3px; }
  .cap-card-frame { inset: 1.6rem; }
  .cap-num { font-size: 3.2rem; }
  .cap-card-featured .cap-num { font-size: 4.5rem; }
  .cap-meta { font-size: .9rem; }
  .cap-title { font-size: 2rem; }
  .cap-card-featured .cap-title { font-size: 2.9rem; }
  .cap-desc { font-size: 1.15rem; max-width: 38em; }
  .cap-action { font-size: .95rem; }
  .work-eyebrow { font-size: 1rem; }
  .work-lede { font-size: 1.25rem; max-width: 800px; }
  .work-header h2::after { width: 64px; height: 4px; }
}


/* ============================================================
   LIGHTBOX — Magnific Popup arrow + close styling
   theme.css overrides arrows with FA4 font-family which isn't
   loaded; reset that and restore visible chevron icons.
   ============================================================ */
.mfp-bg            { background: #030507; opacity: .94; }
.mfp-figure:after  { box-shadow: 0 0 80px rgba(0,0,0,.6); }
.mfp-title         {
  color: rgba(255,255,255,.78);
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(.85rem, 1vw, 1rem);
  padding-right: 60px;
}
.mfp-counter       {
  color: var(--accent);
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(.7rem, .8vw, .8rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* --- Arrows: nuke the broken theme.css ::after content, draw with FA <i> --- */
button.mfp-arrow,
button.mfp-arrow:active {
  width: 64px;
  height: 64px;
  margin-top: -32px;
  background: rgba(3,5,7,.55);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
button.mfp-arrow:before,
button.mfp-arrow:after,
button.mfp-arrow.mfp-arrow-left::after,
button.mfp-arrow.mfp-arrow-right::after { display: none; content: none; }
button.mfp-arrow i {
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  transition: color .25s ease, transform .25s ease;
}
button.mfp-arrow:hover,
button.mfp-arrow:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  outline: none;
}
button.mfp-arrow:hover i,
button.mfp-arrow:focus-visible i {
  color: var(--dark);
}
button.mfp-arrow.mfp-arrow-left:hover i  { transform: translateX(-2px); }
button.mfp-arrow.mfp-arrow-right:hover i { transform: translateX( 2px); }
button.mfp-arrow.mfp-arrow-left          { left:  clamp(.75rem, 2vw, 2rem); }
button.mfp-arrow.mfp-arrow-right         { right: clamp(.75rem, 2vw, 2rem); }

/* --- Close button: keep magnific's default × character; no fancy bg.
       The default .mfp-image-holder .mfp-close is width:100% with text-align:right —
       we leave it that way so the × sits in the top-right with nothing behind it. --- */
.mfp-close,
button.mfp-close {
  color: #fff;
  opacity: .85;
  font-size: 28px;
  transition: opacity .25s ease, color .25s ease;
}
.mfp-close:hover,
.mfp-close:focus-visible {
  opacity: 1;
  color: var(--accent);
  outline: none;
}

/* --- Mobile: arrows on top of image, smaller --- */
@media (max-width: 600px) {
  button.mfp-arrow,
  button.mfp-arrow:active {
    width: 44px;
    height: 44px;
    margin-top: -22px;
  }
  button.mfp-arrow i { font-size: 1.05rem; }
}

/* --- 4K: scale the lightbox controls up to match the rest --- */
@media (min-width: 3440px) {
  button.mfp-arrow,
  button.mfp-arrow:active {
    width: 88px;
    height: 88px;
    margin-top: -44px;
  }
  button.mfp-arrow i { font-size: 2rem; }
  .mfp-close, button.mfp-close { font-size: 40px; }
  .mfp-title { font-size: 1.15rem; }
  .mfp-counter { font-size: .95rem; }
}


/* ============================================================
   OUR WORK — Print
   Show all gallery photos as a clean stack with captions.
   ============================================================ */
@media print {
  .capability-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: none;
    height: auto;
    gap: 1rem;
    page-break-inside: avoid;
  }
  .cap-card-featured,
  .cap-card-secondary:nth-child(2),
  .cap-card-secondary:nth-child(3) { grid-area: auto; }
  .cap-card {
    aspect-ratio: auto;
    min-height: 260px;
    page-break-inside: avoid;
    break-inside: avoid;
    border: 1px solid #999;
  }
  .cap-card-img img {
    filter: none !important;
    transform: none !important;
  }
  .cap-card::after { background: none; }
  .cap-card-body {
    position: static;
    background: #fff;
    color: #000;
    padding: 1rem;
  }
  .cap-num,
  .cap-meta,
  .cap-title,
  .cap-desc { color: #000; text-shadow: none; }
  .cap-action { display: none; }
  .cap-card-frame { display: none; }
}


/* ============================================================
   VIDEO — Lazy-load / poster
   ============================================================ */
.overlay-video video {
  position: absolute;
  top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.overlay-video video.playing { opacity: 1; }

/* Hide video on mobile to save bandwidth */
@media (max-width: 768px) {
  .overlay-video { display: none !important; }
}


/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-form-wrap { margin-top: 3rem; }
.contact-form-wrap .form-group { margin-bottom: 1.25rem; }
.contact-form-wrap label {
  font-family: 'Montserrat', sans-serif;
  font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: rgba(255,255,255,.5); margin-bottom: .3rem;
}
.contact-form-wrap .form-control {
  font-family: 'Open Sans', sans-serif; font-size: .95rem;
  color: #fff; background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 4px; padding: .75rem 1rem;
  transition: border-color .3s ease, background .3s ease;
}
.contact-form-wrap .form-control::placeholder { color: rgba(255,255,255,.25); }
.contact-form-wrap .form-control:focus {
  background: rgba(255,255,255,.09);
  border-color: var(--accent); box-shadow: none; color: #fff;
}
.contact-form-wrap textarea.form-control { resize: vertical; min-height: 110px; }
.contact-form-wrap .form-control[aria-invalid="true"] { border-color: #ff3553; }
.contact-form-wrap .btn-submit {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Montserrat', sans-serif;
  font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  padding: .75rem 2rem;
  background: var(--accent); color: var(--dark);
  border: none; border-radius: 4px; cursor: pointer;
  transition: all .35s ease;
}
.contact-form-wrap .btn-submit:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(200,150,58,.25);
}
.contact-form-result { margin-top: 1rem; font-size: .9rem; }


/* ============================================================
   FOOTER — Designer credit
   Shown in two places:
     • <footer> at the bottom of the page — displays on mobile/tablet
       where fullPage.js is destroyed and natural scroll is in effect.
     • bottom of the Contact section — displays on desktop where
       fullPage.js takes over the viewport and the <footer> is unreachable.
   Visibility of `.contact-credit-wrap` is gated on `.ln-fullpage-active`
   (added to <body> by main.js when fullPage initializes) so the credit
   never appears in both places at once.
   ============================================================ */
.footer-credit,
.contact-credit {
  margin-top: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(.7rem, .65vw, .78rem);
  color: rgba(255,255,255,.3);
  letter-spacing: .02em;
}
.footer-credit { margin-top: .85rem; }
.footer-credit a,
.contact-credit a {
  color: rgba(255,255,255,.55);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.15);
  transition: color .25s ease, border-color .25s ease;
}
.footer-credit a:hover,
.footer-credit a:focus-visible,
.contact-credit a:hover,
.contact-credit a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
  outline: none;
}

/* Show contact-section credit only when fullPage is active (desktop) */
.contact-credit-wrap                   { display: none; }
body.ln-fullpage-active .contact-credit-wrap { display: flex; }


/* ============================================================
   NAVBAR — logo sizing
   ============================================================ */
.navbar-brand-img {
  max-height: clamp(35px, 4vw, 50px);
  width: auto;
}


/* ============================================================
   (Older rounds had a hardcoded 7.5rem !important padding-top
   here that was overriding the clamp values in the earlier
   block above. Removed — the clamp version handles desktop
   navbar clearance correctly without eating extra content height.
   The older `@media (max-width: 1199px)` rule that hard-set
   padding-top: 6rem was also removed for the same reason; the
   tablet clamp block at the top of this file now handles it.)
   ============================================================ */


/* ============================================================
   CONTACT — horizontal centering at all widths.
   The wide container (full-width minus 4.5rem padding in fullpage
   mode) leaves the heading and 3 col-md-3 info cards bunched left.
   Center the heading/intro/info-cards row; keep form labels left-
   aligned for readability.

   IMPORTANT: descendant selectors (no `>` direct-child), because
   when the section overflows viewport height fullPage wraps content
   in `<div class="fp-scrollable"><div class="fp-scroller">…</div></div>`
   and any `.ln-section > .container` selector silently stops matching. */
.ln-section[data-anchor="contact"] .container .row.mb-7 {
  text-align: center;
}
.ln-section[data-anchor="contact"] .container .row.mb-7 p {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.ln-section[data-anchor="contact"] .col-12 .row {
  justify-content: center;
}
.ln-section[data-anchor="contact"] .col-md-3 {
  text-align: center;
}
.ln-section[data-anchor="contact"] .contact-form-wrap {
  text-align: left;
}


/* ============================================================
   RESPONSIVE — Tablet (<=1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-img-wrap { aspect-ratio: 16/9; max-height: 320px; }
  .services-grid { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   RESPONSIVE — Mobile (<=768px)
   ============================================================ */
@media (max-width: 768px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .hero-cta-row { flex-direction: column; align-items: center; }
  .hero-cta-row .btn-cta { width: 100%; max-width: 280px; justify-content: center; }
  .about-stats { flex-wrap: wrap; gap: 1.5rem; }
  .services-grid { grid-template-columns: 1fr; }
  .contact-form-wrap .row .col-md-6 { margin-bottom: 0; }

  .ln-section[data-anchor="home"] h1 { font-size: clamp(1.8rem, 8vw, 2.8rem); }
}


/* ============================================================
   RESPONSIVE — Small (<=480px)
   ============================================================ */
@media (max-width: 480px) {
  .navbar-brand-img { max-height: 30px; }
  .svc-card { padding: 1.2rem; }
  .about-year-badge { padding: .5rem .8rem; }
  .about-year-badge strong { font-size: 1.3rem; }
}


/* ============================================================
   RESPONSIVE — 4K / Ultrawide (>=3440px)
   ============================================================ */
@media (min-width: 3440px) {
  html { font-size: 20px; }
  .container { max-width: 2000px; }
  .navbar-brand-img { max-height: 65px; }
  h1 { font-size: 5.5rem; }
  h2 { font-size: 3.2rem; }
  h4, .h3 { font-size: 1.8rem; }
  p, .ln-section p { font-size: 1.25rem; }
  .svc-icon { width: 72px; height: 72px; font-size: 1.9rem; }
  a.backtotop { bottom: 5.5rem; width: 5.5rem; }
  a.backtotop span { font-size: 14px; }
  .scroll-progress .sp-left { left: 5.5rem; }
  .scroll-progress .sp-right { right: 5.5rem; }
  .ln-copyright { left: 5.5rem; right: 5.5rem; padding-left: 5.5rem; padding-right: 5.5rem; }
  .ln-social-icons { width: 5.5rem; }
  div#fp-nav.right { right: 25px; }
  div#fp-nav ul li { width: 24px; height: 24px; }
  .contact-form-wrap .form-control { font-size: 1.1rem; padding: .9rem 1.2rem; }
  .contact-form-wrap .btn-submit { font-size: .9rem; padding: .9rem 2.5rem; }
  .btn-cta { font-size: .95rem; padding: 1rem 2.5rem; }
  .about-img-wrap { max-height: 85vh; }
}