/* ==========================================================================
   Swallow M.A.J — site stylesheet
   Design tokens, base, layout, components
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&family=Cairo:wght@400;500;600;700;800&display=swap');

:root{
  /* Palette — drawn from the brand mark + brushed-steel workshop photography */
  --navy: #0B2A44;
  --navy-2: #103A5C;
  --navy-3: #0A2038;
  --blue: #1D6FD1;
  --blue-light: #4C93E6;
  --steel: #55697E;
  --steel-light: #93A3B4;
  --mist: #EEF2F6;
  --mist-2: #E3E9EF;
  --amber: #E2A339;
  --amber-dark: #C6862190;
  --white: #FFFFFF;
  --ink: #142333;

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --font-arabic: 'Cairo', 'Inter', sans-serif;

  --container: 1180px;
  --radius: 10px;
  --radius-sm: 6px;

  --shadow-sm: 0 1px 3px rgba(11, 42, 68, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 42, 68, 0.10);
  --shadow-lg: 0 20px 50px rgba(11, 42, 68, 0.18);

  /* Semantic tokens — the ones content sections actually paint with.
     The navy header/hero/footer/CTA band stay a constant dark navy in
     both themes by design; only these adapt below. */
  --bg: var(--white);
  --surface: var(--white);
  --surface-2: var(--mist);
  --text: var(--ink);
  --text-muted: var(--steel);
  --border: var(--mist-2);
  --link: var(--blue);
}

/* ---------- Dark mode ----------
   Toggled via data-theme="dark" on <html>. Only page-content surfaces
   change; the navy header/hero/footer keep their look in both modes. */
[data-theme="dark"]{
  --bg: #0D1620;
  --surface: #141F2C;
  --surface-2: #101923;
  --text: #E9EFF5;
  --text-muted: #9FB1C4;
  --border: #223244;
  --link: var(--blue-light);
}
[data-theme="dark"] .nameplate.on-light{ --dot: rgba(255,255,255,0.3); }
[data-theme="dark"] .placeholder-card{
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 10px, transparent 10px 20px);
}
[data-theme="dark"] .about-frame,
[data-theme="dark"] .client-logo{
  background: #EEF2F6;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin: 0; line-height: 1.15; }
p{ margin: 0; }
button{ font-family: inherit; }

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

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

/* ---------- Arabic / RTL ----------
   Toggled via lang="ar" dir="rtl" on <html> (see site.js). Flexbox and
   grid already mirror automatically under dir="rtl"; these cover the
   handful of physical (not logical) properties used elsewhere. */
html[dir="rtl"] body,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4,
html[dir="rtl"] .nameplate, html[dir="rtl"] .brand-word{
  font-family: var(--font-arabic);
}
html[dir="rtl"] .nameplate{ letter-spacing: 0; }
html[dir="rtl"] .prod-media .nameplate{ left: auto; right: .9rem; }
html[dir="rtl"] .breadcrumb{ direction: rtl; }
@media (max-width: 860px){
  html[dir="rtl"] .nav-links a{ border-left: none; border-right: 3px solid transparent; }
  html[dir="rtl"] .nav-links a.active,
  html[dir="rtl"] .nav-links a:hover{ border-right-color: var(--amber); border-left-color: transparent; }
}

.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

section{ position: relative; }

/* ---------- Eyebrow / nameplate motif ----------
   A stamped-steel nameplate is riveted onto every machine on the shop floor.
   Reused here as the site's structural label: eyebrows, capacity tags,
   placeholder markers all share this one motif. */
.nameplate{
  --dot: rgba(255,255,255,0.38);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mist);
  background: var(--navy-3);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  padding: .45rem .9rem;
  background-image:
    radial-gradient(circle at 6px 6px, var(--dot) 1.4px, transparent 1.6px),
    radial-gradient(circle at calc(100% - 6px) 6px, var(--dot) 1.4px, transparent 1.6px),
    radial-gradient(circle at 6px calc(100% - 6px), var(--dot) 1.4px, transparent 1.6px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), var(--dot) 1.4px, transparent 1.6px);
}
.nameplate.on-light{
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
  --dot: rgba(11,42,68,0.22);
  box-shadow: var(--shadow-sm);
}
.nameplate.amber{
  background-color: var(--navy);
  color: var(--amber);
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  padding: .85rem 1.5rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{
  background: var(--amber);
  color: var(--navy-3);
  box-shadow: 0 10px 24px rgba(226,163,57,0.35);
}
.btn-primary:hover{ background: #eeb554; }
.btn-ghost{
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.45);
}
.btn-ghost:hover{ background: rgba(255,255,255,0.1); border-color: #fff; }
.btn-outline{
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-outline:hover{ border-color: var(--link); color: var(--link); }

/* ---------- Navbar ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy-3);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 14px rgba(0,0,0,0.22);
}
.navbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-block: .7rem;
}
.brand{
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--white);
  min-width: 0;
  flex: 1 1 auto;
}
.brand img{
  height: 40px;
  width: auto;
  flex-shrink: 0;
  border-radius: 4px;
  background: #fff;
  padding: 3px;
}
.brand-word{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .02em;
  line-height: 1.1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-word span{
  display: block;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--steel-light);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navbar-controls{
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
}
.icon-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--white);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .18s ease, border-color .18s ease;
}
.icon-btn:hover{ background: rgba(255,255,255,0.14); }
.icon-btn svg{ width: 18px; height: 18px; display: block; }
.lang-toggle{
  width: auto;
  min-width: 40px;
  padding-inline: .55rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.nav-links{
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links a{
  text-decoration: none;
  color: var(--mist);
  font-size: .93rem;
  font-weight: 500;
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav-links a:hover,
.nav-links a.active{
  color: var(--white);
  border-color: var(--amber);
}
.nav-toggle{ display: none; }

@media (max-width: 860px){
  .nav-toggle{ display: flex; }
  .nav-links{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--navy-3);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    z-index: 99;
  }
  .nav-links.is-open{ max-height: 420px; }
  .nav-links a{
    width: 100%;
    padding: .95rem clamp(1.25rem, 4vw, 2.5rem);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid transparent;
  }
  .nav-links a.active,
  .nav-links a:hover{
    border-left-color: var(--amber);
    border-bottom-color: rgba(255,255,255,0.06);
  }
}

@media (max-width: 400px){
  .brand-word span{ display: none; }
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  color: var(--white);
  background: linear-gradient(155deg, var(--navy-3), var(--navy-2));
  overflow: hidden;
}
.hero-photo{
  background-size: cover;
  background-position: center;
  min-height: 76vh;
  display: flex;
  align-items: center;
}
.hero-photo::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(9,28,47,0.94) 20%, rgba(9,28,47,0.62) 55%, rgba(9,28,47,0.88) 100%);
}
.hero-sm .hero-photo{ min-height: 42vh; }
.hero-inner{
  position: relative;
  z-index: 2;
  padding-block: 3.5rem;
  max-width: 680px;
}
.hero .nameplate{ margin-bottom: 1.4rem; }
.hero h1{
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 1.1rem;
}
.hero p.lead{
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--mist);
  max-width: 46ch;
  margin-bottom: 2rem;
}
.hero-ctas{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---------- Section scaffolding ---------- */
.section{ padding-block: clamp(3.5rem, 7vw, 6rem); }
.section-alt{ background: var(--surface-2); }
.section-dark{ background: linear-gradient(160deg, var(--navy-3), var(--navy-2)); color: var(--white); }
.section-head{
  max-width: 640px;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.section-head.center{ margin-inline: auto; text-align: center; }
.section-head .nameplate{ margin-bottom: 1.1rem; }
.section-head h2{
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  margin-bottom: .85rem;
}
.section-head p{
  color: var(--text-muted);
  font-size: 1.02rem;
}
.section-dark .section-head p{ color: var(--steel-light); }

/* ---------- About ---------- */
.about-grid{
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.about-frame{
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
.about-frame img{ width: 100%; max-width: 260px; }
.about-copy h2{
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 1.1rem;
}
.about-copy p{ color: var(--text-muted); margin-bottom: 1rem; font-size: 1.02rem; }
.about-copy p:last-child{ margin-bottom: 0; }

@media (max-width: 780px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-frame{ max-width: 280px; margin-inline: auto; }
}

/* ---------- Card grids ---------- */
.grid{
  display: grid;
  gap: 1.75rem;
}
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
}

/* Service cards */
.svc-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.9rem 1.6rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .25s ease;
}
.svc-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.svc-icon{
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--navy);
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 1.2rem;
}
.svc-card h3{ font-size: 1.1rem; margin-bottom: .55rem; color: var(--text); }
.svc-card p{ color: var(--text-muted); font-size: .95rem; }

/* Product / feature cards */
.prod-card{
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: transform .22s ease, box-shadow .22s ease, background-color .25s ease;
  display: flex;
  flex-direction: column;
}
.prod-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.prod-media{
  position: relative;
  height: 210px;
  overflow: hidden;
  background: var(--navy);
}
.prod-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.prod-card:hover .prod-media img{ transform: scale(1.06); }
.prod-media .nameplate{
  position: absolute;
  left: .9rem;
  bottom: .9rem;
}
.prod-body{ padding: 1.5rem 1.4rem 1.7rem; flex: 1; display: flex; flex-direction: column; }
.prod-body h3{ font-size: 1.15rem; margin-bottom: .6rem; color: var(--text); }
.prod-body p{ color: var(--text-muted); font-size: .93rem; flex: 1; }
.prod-body .link-more{
  margin-top: 1.1rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.prod-body .link-more i{ transition: transform .15s ease; }
.prod-card:hover .link-more i{ transform: translateX(3px); }

/* Client / logo cards */
.client-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.8rem;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, background-color .25s ease;
}
.client-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.client-logo{
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  border-radius: 8px;
}
.client-logo img{ max-height: 90px; max-width: 200px; object-fit: contain; }
.client-card h3{ font-size: 1.02rem; margin-bottom: .5rem; color: var(--text); }
.client-card p{ color: var(--text-muted); font-size: .9rem; }
.client-card .link-more{
  display: inline-block;
  margin-top: .8rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
}

/* ---------- Placeholder / "add yours" cards ----------
   Used for spots still waiting on a new photo, product, or client. */
.placeholder-card{
  border: 2px dashed var(--steel-light);
  border-radius: var(--radius);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .7rem;
  color: var(--text-muted);
  background: repeating-linear-gradient(135deg, rgba(85,105,126,0.035) 0 10px, transparent 10px 20px);
}
.placeholder-card i{ font-size: 1.6rem; color: var(--steel-light); }
.placeholder-card strong{ font-size: .95rem; color: var(--text); }
.placeholder-card span{ font-size: .82rem; max-width: 22ch; }
a.placeholder-card{
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
a.placeholder-card:hover{
  border-color: var(--amber);
  transform: translateY(-4px);
}
.client-placeholder{ min-height: 200px; }

/* ---------- "Join our list" invite cards ----------
   A friendlier alternative to the dashed placeholder — used where an
   empty spot can actively invite a new client to reach out. */
.invite-card{
  border-radius: var(--radius);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .7rem;
  padding: 1.8rem;
  color: var(--white);
  background: linear-gradient(150deg, var(--navy-3), var(--navy-2));
  border: 1px solid rgba(255,255,255,0.08);
}
.invite-card .svc-icon{ margin-bottom: .3rem; background: rgba(226,163,57,0.14); color: var(--amber); }
.invite-card h3{ font-size: 1.05rem; }
.invite-card p{ color: var(--steel-light); font-size: .9rem; max-width: 26ch; }
.invite-card .btn{ margin-top: .4rem; }

/* ---------- Stat / highlight strip ---------- */
.highlight-strip{
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
}

/* ---------- CTA band ---------- */
.cta-band{
  background: linear-gradient(120deg, var(--navy-3), var(--navy-2));
  color: var(--white);
  border-radius: var(--radius);
  padding: clamp(2.2rem, 5vw, 3.2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.cta-band h3{ font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: .5rem; }
.cta-band p{ color: var(--steel-light); max-width: 46ch; }
.cta-actions{ display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--navy-3);
  color: var(--mist);
}
.footer-row{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2.5rem;
  padding-block: clamp(2.5rem, 6vw, 3.5rem);
}
.footer-brand{ display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.footer-brand img{ height: 36px; background: #fff; border-radius: 4px; padding: 3px; }
.footer-brand span{ font-family: var(--font-display); font-weight: 700; color: var(--white); }
.footer-col h4{
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel-light);
  font-family: var(--font-mono);
  margin-bottom: 1.1rem;
}
.footer-col p{ color: var(--steel-light); font-size: .92rem; max-width: 32ch; }
.footer-col .links li{ margin-bottom: .65rem; }
.footer-col .links a{
  color: var(--mist);
  text-decoration: none;
  font-size: .93rem;
}
.footer-col .links a:hover{ color: var(--amber); }
.footer-icons{ display: flex; gap: .8rem; margin-top: 1.1rem; }
.footer-icons a{
  width: 38px; height: 38px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.footer-icons a:hover{ background: var(--amber); color: var(--navy-3); }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-block: 1.2rem;
  font-size: .82rem;
  color: var(--steel-light);
  text-align: center;
}
@media (max-width: 780px){
  .footer-row{ grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- Icon swaps (inline SVG, no external font dependency) ---------- */
.icon-btn .icon-sun{ display: none; }
[data-theme="dark"] .icon-btn .icon-moon{ display: none; }
[data-theme="dark"] .icon-btn .icon-sun{ display: block; }

.nav-toggle .icon-close{ display: none; }
.nav-toggle.is-active .icon-bars{ display: none; }
.nav-toggle.is-active .icon-close{ display: block; }

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity: 1; transform: translateY(0); }

/* ---------- Clickable product cards (link straight to a gallery page) ---------- */
a.prod-card{ text-decoration: none; color: inherit; }
.prod-media{ position: relative; }
.prod-zoom-hint{
  position: absolute;
  top: .8rem;
  right: .8rem;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(11,42,68,0.72);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.prod-card:hover .prod-zoom-hint{ opacity: 1; transform: translateY(0); }
.prod-media[data-zoomable]{ cursor: zoom-in; }
.prod-body .eyebrow-link{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--link);
  margin-top: 1.1rem;
}
.prod-body .eyebrow-link i{ transition: transform .15s ease; }
a.prod-card:hover .eyebrow-link i{ transform: translateX(3px); }

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  color: var(--steel-light);
  margin-bottom: 1rem;
}
.breadcrumb a{ color: var(--mist); text-decoration: none; }
.breadcrumb a:hover{ color: var(--amber); }

/* ---------- Spec badges (detail pages) ---------- */
.spec-row{
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.5rem;
}

/* ---------- Product gallery (detail pages) ---------- */
.gallery{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.gallery-main{
  position: relative;
  background: var(--surface-2);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-main img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}
.gallery-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(11,42,68,0.75);
  color: var(--white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s ease;
}
.gallery-arrow:hover{ background: rgba(11,42,68,0.95); }
.gallery-arrow.prev{ left: .8rem; }
.gallery-arrow.next{ right: .8rem; }
.gallery-arrow svg{ width: 20px; height: 20px; }
.gallery-expand{
  position: absolute;
  right: .8rem;
  bottom: .8rem;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(11,42,68,0.75);
  color: var(--white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.gallery-count{
  position: absolute;
  left: .8rem;
  bottom: .8rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  background: rgba(11,42,68,0.75);
  color: var(--mist);
  padding: .3rem .6rem;
  border-radius: 6px;
}
.gallery-thumbs{
  display: flex;
  gap: .7rem;
  overflow-x: auto;
  padding-bottom: .3rem;
}
.gallery-thumbs button{
  flex: 0 0 auto;
  width: 84px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: var(--surface-2);
}
.gallery-thumbs button img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumbs button.is-active{ border-color: var(--amber); }

@media (min-width: 700px){
  .gallery-main{ aspect-ratio: 16 / 9; }
}

/* ---------- Lightbox ---------- */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(6,13,21,0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 3rem);
}
.lightbox.is-open{ display: flex; }
.lightbox-stage{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
.lightbox-stage img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  cursor: zoom-in;
  transition: transform .25s ease;
}
.lightbox-stage img.is-zoomed{
  max-width: none;
  max-height: none;
  width: auto;
  height: 190%;
  cursor: zoom-out;
}
.lightbox-btn{
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background .18s ease;
}
.lightbox-btn:hover{ background: rgba(255,255,255,0.22); }
.lightbox-btn svg{ width: 20px; height: 20px; }
.lightbox-close{ top: 1.2rem; right: 1.2rem; }
.lightbox-prev{ left: 1.2rem; top: 50%; transform: translateY(-50%); }
.lightbox-next{ right: 1.2rem; top: 50%; transform: translateY(-50%); }
.lightbox-count{
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--mist);
  background: rgba(255,255,255,0.1);
  padding: .35rem .8rem;
  border-radius: 999px;
}
@media (max-width: 620px){
  .lightbox-prev{ left: .4rem; }
  .lightbox-next{ right: .4rem; }
  .lightbox-btn{ width: 38px; height: 38px; }
}

/* ---------- Utilities ---------- */
.mt-0{ margin-top: 0; }
.center-text{ text-align: center; }


/* ---------- Product video + customer example ---------- */
.video-customer-section{ background:var(--bg-soft); }
.video-customer-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:clamp(1.25rem,3vw,2.25rem); align-items:stretch; }
.video-card,.video-client-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
.video-frame{ background:#111; display:flex; justify-content:center; align-items:center; min-height:320px; }
.video-frame video{ display:block; width:100%; max-height:620px; object-fit:contain; background:#111; }
.video-caption{ padding:1rem 1.15rem 1.2rem; margin:0; color:var(--text-muted); font-size:.94rem; }
.video-client-card{ padding:1.35rem; display:flex; flex-direction:column; justify-content:center; }
.video-client-card .client-logo{ margin-bottom:1rem; min-height:130px; }
.video-client-card .client-logo img{ max-height:110px; max-width:230px; }
.video-client-card h3{ margin-bottom:.5rem; }
.video-client-card p{ color:var(--text-muted); font-size:.95rem; }
.video-client-card .link-more{ margin-top:.6rem; }
@media (max-width:800px){
  .video-customer-grid{ grid-template-columns:1fr; }
  .video-frame video{ max-height:680px; }
}