/* ============================================
   SYNERGYNOX — SPECTACULAR FX LAYER
   ============================================ */

:root {
  --bg-dark: #272727;
  --bg-darker: #272727;
  --glow: 0 0 80px rgba(61, 168, 158, .35);
}

/* ---------- Scroll progress bar ---------- */
.scroll-prog {
  position: fixed; top: 0; left: 0; height: 3px;
  width: 0%; z-index: 999;
  background: linear-gradient(90deg, var(--teal), var(--mint), var(--teal));
  box-shadow: 0 0 12px var(--mint);
  transition: width .12s linear;
}

/* ---------- Custom cursor ---------- */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  a, button, .magnetic, .tilt, [data-cursor], .mat-card, .gal-item, .panel, .pf-item { cursor: none; }
  .cur { position: fixed; pointer-events: none; z-index: 1000; left: 0; top: 0; mix-blend-mode: difference; }
  .cur-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #fff;
    transform: translate(-50%, -50%);
  }
  .cur-ring {
    width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.7);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width .25s var(--ease-out), height .25s var(--ease-out), background .25s, border-color .25s;
  }
  body.cur-hover .cur-ring {
    width: 72px; height: 72px;
    background: rgba(61, 168, 158, .25);
    border-color: var(--mint);
  }
}

/* ---------- HERO CINEMATIC (dark) ---------- */
.cine {
  position: relative;
  background: var(--bg-dark);
  color: #fff;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}
.cine-canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}
.cine-grad {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(14,125,111,.35), transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(162,62,69,.28), transparent 55%),
    linear-gradient(180deg, rgba(10,20,19,.2) 0%, rgba(5,12,11,.95) 100%);
}
.cine-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .12;
  background-image:
    linear-gradient(to right, #fff 1px, transparent 1px),
    linear-gradient(to bottom, #fff 1px, transparent 1px);
  background-size: 100px 100px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
}
.cine-inner {
  position: relative; z-index: 3;
  max-width: 1440px;
  margin: 0 auto;
  padding: 100px var(--pad) 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 40px;
}

.cine-top {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.cine-top .dot-live {
  width: 8px; height: 8px; border-radius: 50%; background: var(--mint);
  display: inline-block; margin-right: 10px;
  box-shadow: 0 0 12px var(--mint);
  animation: pulse-live 1.6s ease-in-out infinite;
}
@keyframes pulse-live {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.7); }
}

.cine-center {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.cine-headline {
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(56px, 9vw, 168px);
  line-height: .9;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.cine-headline .ln {
  display: block; overflow: hidden;
  /* Room for uppercase diacritics (Á É Í Ó Ú) so overflow:hidden doesn't clip
     the accent marks; negative margin keeps the vertical rhythm unchanged. */
  padding-top: .18em;
  margin-top: -.18em;
  perspective: 800px;
  perspective-origin: 50% 100%;
}
.cine-headline .ln span {
  display: inline-block;
  transform: translateY(110%) rotateX(-25deg);
  transform-origin: 50% 100%;
  transition: transform 1.1s cubic-bezier(.2,.9,.2,1);
}
.cine-headline.go .ln:nth-child(1) span { transform: translateY(0) rotateX(0deg); transition-delay: .1s; }
.cine-headline.go .ln:nth-child(2) span { transform: translateY(0) rotateX(0deg); transition-delay: .25s; }
.cine-headline.go .ln:nth-child(3) span { transform: translateY(0) rotateX(0deg); transition-delay: .4s; }
.cine-headline .accent { color: var(--mint); font-weight: 300; }
.cine-headline .stroke {
  -webkit-text-stroke: 2px #fff;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cine-lead {
  max-width: 420px;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,.75);
}
.cine-lead p + p { margin-top: 18px; }

.cine-3d {
  position: relative;
  aspect-ratio: 1/1;
  perspective: 1200px;
}
.cine-ring {
  position: absolute; inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
}
.cine-ring.r2 { inset: 18%; border-color: rgba(61,168,158,.4); }
.cine-ring.r3 { inset: 28%; border-color: rgba(255,255,255,.08); }
.cine-ring.spin { animation: spin-ring 30s linear infinite; }
.cine-ring.spin.rev { animation-direction: reverse; animation-duration: 45s; }
@keyframes spin-ring {
  to { transform: rotate(1turn); }
}

.cine-coin {
  position: absolute; inset: 22%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #f4f1ea 0%, #b8b8b0 30%, #6a6e68 65%, #2a2e2c 100%);
  box-shadow:
    inset 0 0 40px rgba(0,0,0,.5),
    inset 0 20px 60px rgba(255,255,255,.15),
    0 30px 80px rgba(0,0,0,.6),
    0 0 120px rgba(14,125,111,.4);
  animation: coin-tilt 8s ease-in-out infinite;
}
@keyframes coin-tilt {
  0%, 100% { transform: rotateX(15deg) rotateY(-10deg); }
  50% { transform: rotateX(-10deg) rotateY(15deg); }
}
.cine-coin::before {
  content: 'SN'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 24%; letter-spacing: -.06em;
  color: rgba(10,20,19,.3); text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.cine-spark {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 12px var(--mint), 0 0 24px var(--mint);
  animation: spark 4s ease-in-out infinite;
}
.cine-spark.s1 { top: 12%; left: 18%; animation-delay: 0s; }
.cine-spark.s2 { top: 70%; left: 80%; animation-delay: 1s; background: var(--mint); box-shadow: 0 0 12px var(--mint), 0 0 24px var(--mint); }
.cine-spark.s3 { top: 30%; left: 88%; animation-delay: 2s; }
.cine-spark.s4 { top: 80%; left: 10%; animation-delay: 3s; }
@keyframes spark {
  0%, 100% { opacity: 0; transform: scale(.5); }
  50% { opacity: 1; transform: scale(2); }
}

.cine-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 28px;
  padding-bottom: 30px;
  gap: 40px;
}
.cine-stat .v {
  font-size: clamp(34px, 4.4vw, 64px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
}
.cine-stat .v .unit { font-size: 40%; color: var(--mint); margin-left: 4px; font-weight: 500; }
.cine-stat .l {
  margin-top: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

.cine-cta-row {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  margin-top: 28px;
}
.btn-cine {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 30px;
  background: var(--cta-orange); color: #fff;
  font-weight: 800; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  border-radius: 100px;
  transition: all .35s var(--ease-out);
  position: relative; overflow: hidden;
}
.btn-cine::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.8) 50%, rgba(255,255,255,.55) 55%, transparent 100%);
  transform: translateX(-130%);
  transition: transform .65s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.btn-cine:hover::after { transform: translateX(130%); }
.btn-cine:hover { background: #fff; transform: translateY(-2px); }
.btn-cine .ar {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.25); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: transform .4s var(--ease-out);
}
.btn-cine:hover .ar { transform: translateX(6px) rotate(-45deg); background: #fff; color: var(--cta-orange); }

.btn-ghost-cine {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 30px;
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  border-radius: 100px;
  transition: all .35s var(--ease-out);
}
.btn-ghost-cine:hover { border-color: var(--mint); color: var(--mint); transform: translateY(-2px); }

/* ---------- Mega marquee ---------- */
.mega-marquee {
  background: var(--bg-darker);
  color: #fff;
  padding: 28px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mega-marquee .track {
  display: flex; gap: 60px; white-space: nowrap;
  animation: marq 35s linear infinite;
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(40px, 6vw, 88px);
  text-transform: uppercase; letter-spacing: -.02em;
}
.mega-marquee .track span { display: inline-flex; align-items: center; gap: 60px; }
.mega-marquee .track span::after { content: '✦'; color: var(--mint); font-size: .6em; }
@keyframes marq {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- DARK SECTION generic ---------- */
.dk { background: var(--bg-dark); color: #fff; padding: 140px 0; position: relative; overflow: hidden; }
.dk .shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.dk .eyebrow { color: var(--mint); }
.dk h2.display-2 { color: #fff; }

.section-tag {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase;
  color: var(--mint); margin-bottom: 20px;
}
.section-tag::before {
  content: ''; width: 36px; height: 1px; background: var(--mint);
}

.huge-h {
  font-weight: 900;
  font-size: clamp(48px, 8vw, 128px);
  line-height: .88;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.huge-h .stroke {
  -webkit-text-stroke: 2px currentColor;
  -webkit-text-fill-color: transparent;
}
.huge-h .em { color: var(--mint); font-weight: 300; }

/* ---------- Service cards (numbered) ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 80px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.svc-card {
  padding: 40px 28px 32px;
  border-right: 1px solid rgba(255,255,255,.12);
  position: relative;
  transition: background .4s var(--ease-out), box-shadow .4s var(--ease-out);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 1px 0 0 rgba(255,255,255,.04);
}
.svc-card { border-bottom: 1px solid rgba(255,255,255,.12); }
.svc-card:nth-child(3n) { border-right: 0; }
.svc-card:nth-last-child(-n+3) { border-bottom: 0; }
.svc-card:hover {
  background: rgba(61,168,158,.06);
  box-shadow: inset 0 1px 0 rgba(61,168,158,.3), inset 1px 0 0 rgba(61,168,158,.1), inset 0 0 60px rgba(61,168,158,.04);
}
.svc-card .num {
  font-size: 11px; font-weight: 800; letter-spacing: .25em;
  color: rgba(255,255,255,.4);
  margin-bottom: 28px;
}
.svc-card .ic {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(61,168,158,.18), rgba(61,168,158,.02));
  border: 1px solid rgba(61,168,158,.3);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
  color: var(--mint);
  transition: transform .5s var(--ease-out), background .4s;
}
.svc-card:hover .ic { transform: rotate(45deg) scale(1.08); background: linear-gradient(135deg, rgba(61,168,158,.35), rgba(61,168,158,.08)); }
.svc-card h4 {
  font-size: 26px; font-weight: 800; letter-spacing: -.02em;
  margin-bottom: 14px;
}
.svc-card p { color: rgba(255,255,255,.65); font-size: 15px; line-height: 1.6; }
.svc-card .pill {
  display: inline-block; margin-top: 24px;
  padding: 6px 14px; border: 1px solid rgba(255,255,255,.18);
  border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--mint);
}

/* ---------- Process horizontal cards ---------- */
.proc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 80px;
}
.proc-card {
  position: relative;
  padding: 32px 28px 40px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
  transition: all .5s var(--ease-out);
}
.proc-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(61,168,158,.18), transparent 60%);
  opacity: 0; transition: opacity .5s;
}
.proc-card:hover { transform: translateY(-6px); border-color: rgba(61,168,158,.5); }
.proc-card:hover::before { opacity: 1; }
.proc-card > * { position: relative; z-index: 1; }
.proc-card .num-big {
  font-size: 84px; font-weight: 900;
  line-height: 1; letter-spacing: -.05em;
  color: rgba(255,255,255,.08);
  margin-bottom: 14px;
}
.proc-card h4 { font-size: 22px; font-weight: 800; margin-bottom: 14px; }
.proc-card p { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.6; }

/* ---------- Materials big cards ---------- */
.mat-strip {
  background: var(--paper);
  padding: 60px 0 80px;
  position: relative;
}
.mat-strip .shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.mat-strip .section-tag { color: var(--teal); }
.mat-strip .section-tag::before { background: var(--teal); }

.mat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 80px;
}
.mat-card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .6s var(--ease-out);
}
.mat-card .bg {
  position: absolute; inset: 0;
  transition: transform 1.2s var(--ease-out);
}
.mat-card:hover .bg { transform: scale(1.08); }
.mat-card .veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(10,20,19,.85) 100%);
}
.mat-card .top {
  position: absolute; top: 18px; left: 18px;
  font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: #fff; padding: 6px 12px; border-radius: 100px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}
.mat-card .info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 22px;
  background: linear-gradient(0deg, rgba(5,12,11,.92) 0%, rgba(10,20,19,.65) 100%);
  backdrop-filter: blur(8px);
  transform: translateY(calc(100% - 90px));
  transition: transform .45s cubic-bezier(.4,0,.2,1);
  color: #fff;
}
.mat-card:hover .info { transform: translateY(0); }
.mat-card .info h4 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.mat-card .info .meta {
  margin-top: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--mint);
}
.mat-card .info p { font-size: 13px; color: rgba(255,255,255,.8); margin-top: 14px; line-height: 1.6; }

.mat-card.steel .bg { background: radial-gradient(circle at 30% 30%, #5a5a55, #1a1a18 70%), repeating-linear-gradient(90deg, #3a3a36 0 2px, #4a4a45 2px 4px); }
.mat-card.inox .bg { background: linear-gradient(135deg, #d8dcdb 0%, #9aa1a0 50%, #44494a 100%); }
.mat-card.alum .bg { background: linear-gradient(135deg, #c5cdcc 0%, #8a9594 50%, #5a6360 100%); }
.mat-card.copper .bg { background: linear-gradient(135deg, #d77b4d 0%, #8a3f1d 70%); }

/* ---------- MEGA stat (single colossal number) ---------- */
.mega-num {
  background: var(--bg-darker);
  color: #fff;
  padding: 160px 0;
  text-align: center;
  position: relative; overflow: hidden;
}
.mega-num .shell { max-width: 1100px; margin: 0 auto; padding: 0 var(--pad); }
.mega-num .v {
  font-weight: 900;
  font-size: clamp(120px, 22vw, 360px);
  line-height: .85;
  letter-spacing: -.06em;
  background: linear-gradient(180deg, #fff 0%, var(--mint) 50%, var(--teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mega-num .l {
  margin-top: 30px;
  font-size: 18px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

/* ---------- Gallery masonry ---------- */
.gal {
  background: var(--paper);
  padding: 140px 0 80px;
}
.gal .shell { max-width: 1440px; margin: 0 auto; padding: 0 var(--pad); }
.gal .gal-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 120px;
  gap: 12px;
  margin-top: 60px;
}
.gal-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .5s var(--ease-out);
}
.gal-item:hover { transform: scale(.985); }
.gal-item .bg { position: absolute; inset: 0; transition: transform 1s var(--ease-out); }
.gal-item:hover .bg { transform: scale(1.08); }
.gal-item .lbl {
  position: absolute; bottom: 14px; left: 16px;
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  background: rgba(0,0,0,.6); padding: 6px 10px; border-radius: 4px;
  opacity: 0; transform: translateY(8px); transition: all .4s;
}
.gal-item:hover .lbl { opacity: 1; transform: translateY(0); }
.gi-a { grid-column: span 6; grid-row: span 4; }
.gi-a .bg { background: url('assets/images/proj-polishing.jpg') center/cover; position: relative; }
.gi-b { grid-column: span 3; grid-row: span 2; }
.gi-b .bg { background: url('assets/images/proj-cnc.jpg') center/cover; }
.gi-c { grid-column: span 3; grid-row: span 2; }
.gi-c .bg { background: url('assets/images/proj-anchor.jpg') center/cover; }
.gi-d { grid-column: span 3; grid-row: span 2; }
.gi-d .bg { background: url('assets/images/proj-before-after.jpg') center/cover; }
.gi-e { grid-column: span 3; grid-row: span 2; }
.gi-e .bg { background: url('assets/images/proj-lathe.jpg') center/cover; }
.gi-f { grid-column: span 4; grid-row: span 3; }
.gi-f .bg { background: url('assets/images/proj-hull.jpg') center/cover; }
.gi-g { grid-column: span 4; grid-row: span 3; }
.gi-g .bg { background: url('assets/images/proj-villa.jpg') center/cover; }
.gi-h { grid-column: span 4; grid-row: span 3; }
.gi-h .bg { background: linear-gradient(135deg, #1a3530, #062F2B); }

/* ---------- Equipment / facility big block ---------- */
.fac {
  background: var(--bg-dark); color: #fff;
  padding: 160px 0;
  position: relative; overflow: hidden;
}
.fac .shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.fac-vis {
  aspect-ratio: 4/5;
  position: relative;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(61,168,158,.3), transparent 60%),
    linear-gradient(135deg, #1a2624 0%, #050C0B 100%);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
}
.fac-vis::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.fac-machine {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 70%; aspect-ratio: 1;
}
.fac-machine .body {
  position: absolute; inset: 20% 5% 5% 5%;
  background: linear-gradient(180deg, #2a302e 0%, #0a1413 100%);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.fac-machine .head {
  position: absolute; left: 10%; right: 10%; top: 0;
  height: 25%;
  background: linear-gradient(180deg, #44494a 0%, #2a302e 100%);
  border-radius: 8px 8px 0 0;
  border: 1px solid rgba(255,255,255,.18);
}
.fac-machine .beam {
  position: absolute; left: 50%; top: 25%; width: 4px; height: 60%;
  background: linear-gradient(180deg, var(--mint), transparent);
  box-shadow: 0 0 16px var(--mint), 0 0 32px var(--mint);
  transform: translateX(-50%);
  animation: beam-pulse 1.6s ease-in-out infinite;
}
@keyframes beam-pulse {
  0%, 100% { opacity: .4; height: 30%; }
  50% { opacity: 1; height: 60%; }
}
.fac-machine .target {
  position: absolute; left: 50%; top: 85%; width: 16px; height: 16px;
  border-radius: 50%; background: var(--mint);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px var(--mint), 0 0 40px var(--mint);
  animation: target-move 5s ease-in-out infinite;
}
@keyframes target-move {
  0%, 100% { left: 30%; }
  50% { left: 70%; }
}
.fac h2 { font-size: clamp(40px, 5.5vw, 84px); line-height: .95; letter-spacing: -.04em; font-weight: 900; text-transform: uppercase; }
.fac h2 .em { color: var(--mint); font-weight: 300; }
.fac p.lead { font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.75); margin-top: 24px; max-width: 480px; }
.fac-specs {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.fac-specs .spec {
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.18);
}
.fac-specs .spec b { display: block; font-size: 30px; font-weight: 900; color: #fff; letter-spacing: -.02em; }
.fac-specs .spec span { font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* ---------- Big CTA footer ---------- */
.bigcta {
  background: var(--dark-grey);
  color: #fff;
  padding: 160px 0 140px;
  text-align: center;
  position: relative; overflow: hidden;
}
.bigcta .ring {
  position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  pointer-events: none;
}
.bigcta .r1 { width: 800px; height: 800px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.bigcta .r2 { width: 1200px; height: 1200px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.bigcta .r3 { width: 1600px; height: 1600px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.bigcta h2 {
  font-size: clamp(56px, 9vw, 160px);
  font-weight: 900; line-height: .9;
  letter-spacing: -.04em; text-transform: uppercase;
  position: relative;
}
.bigcta h2 .em { font-weight: 300; color: rgba(255,255,255,.7); }
.bigcta .sub {
  margin-top: 30px;
  font-size: 18px; line-height: 1.7;
  max-width: 600px; margin-left: auto; margin-right: auto;
  color: rgba(255,255,255,.85);
  position: relative;
}
.bigcta .row {
  margin-top: 40px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  position: relative;
}
.bigcta .btn-cine {
  background: var(--cta-orange); color: #fff;
}
.bigcta .btn-cine .ar { background: rgba(255,255,255,.25); color: #fff; }

/* ---------- Marquee small inline ---------- */
.tags-marq {
  margin-top: 50px;
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  position: relative;
}
.tags-marq .tg {
  padding: 10px 18px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.25);
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: #fff;
}

/* ---------- Sticky scroll narrative ---------- */
.split {
  background: var(--bg-dark); color: #fff;
  padding: 140px 0;
}
.split .shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.split .left { position: sticky; top: 120px; align-self: start; }
.split .left h2 { font-size: clamp(40px, 6vw, 88px); line-height: .95; font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; }
.split .left .em { color: var(--mint); font-weight: 300; }
.split .right { display: flex; flex-direction: column; gap: 24px; }
.split .step {
  padding: 32px;
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  transition: all .5s var(--ease-out);
}
.split .step:hover { transform: translateX(8px); border-color: rgba(61,168,158,.4); background: rgba(61,168,158,.06); }
.split .step .n { font-size: 11px; font-weight: 800; letter-spacing: .25em; color: var(--mint); margin-bottom: 14px; }
.split .step h4 { font-size: 26px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 10px; }
.split .step p { color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.7; }

/* ---------- Testimonial slab ---------- */
.test-slab {
  background: var(--paper);
  padding: 140px 0;
}
.test-slab .shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.test-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 80px;
}
.test-card {
  padding: 40px 32px;
  background: var(--silver);
  border-radius: 14px;
  border: 1px solid rgba(26,31,30,.1);
  position: relative;
  transition: transform .5s var(--ease-out), box-shadow .5s;
}
.test-card:hover { transform: translateY(-6px); box-shadow: 0 30px 80px rgba(0,0,0,.08); }
.test-card .qmark {
  font-family: serif; font-size: 80px; line-height: 1; color: var(--mint);
  margin-bottom: -20px;
}
.test-card .qt { font-size: 17px; line-height: 1.7; color: var(--ink); }
.test-card .who { margin-top: 28px; display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line); }
.test-card .av {
  display: none;
}
.test-card .meta b { display: block; font-size: 14px; font-weight: 800; }
.test-card .meta span { font-size: 12px; color: var(--mute); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- MEGA footer ---------- */
.mfoot {
  background: var(--bg-darker); color: #fff;
  padding: 100px 0 40px;
  position: relative; overflow: hidden;
}
.mfoot .shell { max-width: 1440px; margin: 0 auto; padding: 0 var(--pad); }
.mfoot-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px;
}
.mfoot h6 { font-size: 11px; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; color: var(--mint); margin-bottom: 18px; }
.mfoot li { list-style: none; padding: 7px 0; color: rgba(255,255,255,.65); font-size: 14px; transition: color .3s; cursor: default; }
.mfoot li a { cursor: pointer; }
.mfoot li:hover { color: var(--mint); }
.mfoot .brand { font-weight: 900; font-size: 28px; letter-spacing: -.02em; }
.mfoot p { color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.7; margin-top: 14px; max-width: 360px; }
.mfoot-mega {
  font-size: clamp(80px, 22vw, 380px);
  font-weight: 900; line-height: .85;
  letter-spacing: -.06em;
  text-transform: uppercase;
  margin-top: 80px;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.2);
}
.mfoot-bot {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
  font-size: 12px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
/* Three equal columns so the credit sits dead-centre regardless of the
   copyright / legal widths on each side. */
.mfoot-bot > span { flex: 1 1 0; }
.mfoot-bot > span:first-child { text-align: left; }
.mfoot-bot > span:last-child  { text-align: right; }
.mfoot-credit { text-align: center; }
.mfoot-credit a { color: inherit; text-decoration: none; transition: color .3s; }
.mfoot-credit a:hover { color: var(--mint); }
@media (max-width: 640px) {
  .mfoot-bot > span,
  .mfoot-bot > span:first-child,
  .mfoot-bot > span:last-child { flex: none; text-align: center; }
}

/* ---------- Sub-hero headline reveal (same 3D flip as .cine-headline) ---------- */
.reveal-headline .ln {
  display: block;
  overflow: hidden;
  /* Room for uppercase diacritics (Á É Í Ó Ú) so overflow:hidden doesn't clip
     the accent marks at the resting state; negative margin keeps rhythm. */
  padding-top: .18em;
  margin-top: -.18em;
  perspective: 800px;
  perspective-origin: 50% 100%;
}
.reveal-headline .ln span {
  display: inline-block;
  transform: translateY(110%) rotateX(-25deg);
  transform-origin: 50% 100%;
  transition: transform 1.1s cubic-bezier(.2,.9,.2,1);
}
.reveal-headline.go .ln span {
  transform: translateY(0) rotateX(0deg);
}

/* ---------- Magnetic / tilt utilities ---------- */
.magnetic { transition: transform .3s var(--ease-out); display: inline-block; }
.tilt { transition: transform .35s var(--ease-out); }
.reveal-y { overflow: hidden; padding-top: .18em; margin-top: -.18em; }
.reveal-y > * { display: inline-block; transform: translateY(110%); transition: transform 1s cubic-bezier(.2,.9,.2,1); }
.reveal-y.is-in > * { transform: translateY(0); }

/* ---------- Responsive ---------- */

/* ---- Tablet landscape 1024px ---- */
@media (max-width: 1024px) {
  .dk, .split, .fac, .mat-strip, .gal, .test-slab, .bigcta { padding: 100px 0; }
  .mega-num { padding: 100px 0; }
  .cine-inner { padding: 80px var(--pad) 0; }
  .proc-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .cine-3d { max-width: 420px; margin: 0 auto; }
}

/* ---- Tablet portrait 768px ---- */
@media (max-width: 960px) {
  /* Section paddings */
  .dk, .split, .fac, .mat-strip, .gal, .test-slab, .bigcta { padding: 80px 0; }
  .mega-num { padding: 80px 0; }
  .mega-marquee { padding: 20px 0; }
  .mega-marquee .track { font-size: clamp(32px, 8vw, 64px); gap: 40px; }

  /* Layouts → single column */
  .cine-center, .fac .shell, .mfoot-grid { grid-template-columns: 1fr; }
  .fac .shell > div:first-child { order: unset; }
  .fac .shell > div:last-child  { order: unset; }

  /* Split process: column */
  .split .shell { grid-template-columns: 1fr; }
  .split .left { position: static; }

  /* Cards → 2 cols */
  .cine-stats, .mat-grid, .test-grid, .fac-specs, .proc-grid { grid-template-columns: 1fr 1fr; }

  /* Service grid → 2 cols, reset nth-child borders */
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc-card { border-right: 1px solid rgba(255,255,255,.12) !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; }
  .svc-card:nth-child(3n) { border-right: 1px solid rgba(255,255,255,.12) !important; }
  .svc-card:nth-last-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,.12) !important; }
  .svc-card:nth-child(2n) { border-right: 0 !important; }
  .svc-card:last-child { border-bottom: 0 !important; border-right: 0 !important; }

  /* Gallery grid spans */
  .gi-a, .gi-b, .gi-c, .gi-d, .gi-e, .gi-f, .gi-g, .gi-h { grid-column: span 6; }

  /* Headlines */
  .huge-h { font-size: clamp(40px, 9vw, 86px); }
  .cine-headline { font-size: clamp(64px, 11vw, 128px) !important; }
  .bigcta h2 { font-size: clamp(48px, 10vw, 96px); }
}

/* ---- Mobile 640px ---- */
@media (max-width: 640px) {
  /* Section paddings */
  .dk, .split, .fac, .mat-strip, .gal, .test-slab { padding: 64px 0; }
  .bigcta { padding: 80px 0 64px; }
  .mega-num { padding: 64px 0; }
  .cine-inner { padding-top: 60px; min-height: unset; }
  .mega-marquee { padding: 16px 0; }
  .mega-marquee .track { font-size: clamp(28px, 9vw, 48px); gap: 28px; }

  /* Typography */
  .huge-h { font-size: clamp(36px, 11vw, 64px); }
  .cine-headline { font-size: clamp(52px, 13vw, 96px) !important; line-height: .92 !important; }
  .bigcta h2 { font-size: clamp(40px, 12vw, 72px); }
  .cine-lead p { font-size: 15px; }
  .cine-cta-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .btn-cine, .btn-ghost-cine { width: 100%; justify-content: center; }

  /* Stats → 2 cols */
  .cine-stats { grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 20px; }
  .cine-stat .v { font-size: clamp(28px, 8vw, 44px); }

  /* All grids → 1 col */
  .svc-grid, .proc-grid, .mat-grid, .test-grid, .fac-specs { grid-template-columns: 1fr; }
  .svc-card { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; }
  .svc-card:last-child { border-bottom: 0 !important; }
  .mat-card { aspect-ratio: 3/2; }

  /* Gallery */
  .gal-row-top { grid-template-columns: 1fr; }
  .gal-2x2 { grid-template-columns: 1fr 1fr; }
  .gal-row-bot { grid-template-columns: 1fr 1fr; }
  .gi-a, .gi-b, .gi-c, .gi-d, .gi-e, .gi-f, .gi-g, .gi-h { grid-column: span 12; grid-row: span 2; }

  /* Process split */
  .split .shell { grid-template-columns: 1fr; gap: 32px; }
  .split .left { position: static; }
  .split .step { padding: 20px; }
  .split .step h4 { font-size: 20px; }

  /* Facilities */
  .fac .shell { grid-template-columns: 1fr; gap: 40px; }
  .fac-vis { aspect-ratio: 3/2; }
  .fac-specs { grid-template-columns: 1fr 1fr 1fr; }

  /* Footer */
  .mfoot-grid { grid-template-columns: 1fr; gap: 24px; }
  .mfoot-mega { font-size: clamp(48px, 18vw, 120px); }

  /* Coin / 3D */
  .cine-3d { display: none; }

  /* Cursor off on touch */
  body { cursor: auto !important; }
  .cur { display: none; }

  /* Instagram */
  .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ig-header { flex-direction: column; align-items: flex-start; }

  /* Subhero */
  .subhero { padding: 80px 0 50px; }
  /* Smaller cap so the longest single word (e.g. "craftsmanship") fits one
     line at 375px and wraps cleanly at spaces instead of mid-word. */
  .subhero h1 { font-size: clamp(30px, 10vw, 64px); }
  /* ── Disable ALL depth/reveal animations on mobile.
     depth-l uses translateX(-80px) and depth-r uses translateX(+80px) which
     create horizontal overflow; iOS Safari detects this as scrollable content
     and cancels ALL tap events — making every button on the page unresponsive. ── */
  .depth,
  .depth-l,
  .depth-up,
  .depth-r { transform: none !important; opacity: 1 !important; transition: none !important; }
  .depth-stagger > * { transform: none !important; opacity: 1 !important; transition: none !important; }

  /* Reveal headline — skip translateY clip animation on mobile, and let long
     words/segments wrap instead of being cut by the .ln overflow:hidden box
     (e.g. "craftsmanship", long ES/DE words). Animation is off here anyway. */
  .reveal-headline .ln { overflow: visible; }
  .reveal-headline .ln span { display: block; white-space: normal; overflow-wrap: break-word; transform: translateY(0) rotateX(0deg) !important; transition: none !important; }
  .reveal-y > * { transform: translateY(0) !important; transition: none !important; }
}

/* ── Instagram feed ──────────────────────────────────────────── */
.ig-section { padding: 80px 0 100px; background: var(--deep); border-top: 1px solid rgba(255,255,255,.06); }
.ig-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 48px; flex-wrap: wrap; gap: 24px;
}
.ig-handle { color: var(--mint); text-decoration: none; transition: color .25s; }
.ig-handle:hover { color: #fff; }
.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ig-card {
  display: block; position: relative; aspect-ratio: 1;
  border-radius: 12px; overflow: hidden; cursor: pointer; text-decoration: none;
  background: var(--ink); border: 1px solid rgba(255,255,255,.06);
  transition: border-color .3s, box-shadow .3s;
}
.ig-card:hover { border-color: rgba(61,168,158,.35); box-shadow: 0 8px 40px rgba(61,168,158,.08); }
.ig-card__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.ig-card:hover .ig-card__img { transform: scale(1.07); }
.ig-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(5,12,11,.92) 0%, rgba(5,12,11,.3) 55%, transparent 100%);
  opacity: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px; gap: 6px;
  transition: opacity .35s;
}
.ig-card:hover .ig-card__overlay { opacity: 1; }
.ig-card__type { position: absolute; top: 12px; right: 12px; color: rgba(255,255,255,.9); }
.ig-card__caption {
  font-size: 12px; color: rgba(255,255,255,.82); line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ig-card__date {
  font-size: 10px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mint);
}
.ig-skeleton { animation: ig-shimmer 1.8s ease-in-out infinite; }
@keyframes ig-shimmer {
  0%, 100% { background: rgba(61,168,158,.05); }
  50%       { background: rgba(61,168,158,.11); }
}
.ig-placeholder .ig-card__img {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(61,168,158,.07), rgba(61,168,158,.02));
}
.ig-placeholder__icon { color: rgba(61,168,158,.25); }
.ig-notice {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 48px 24px; margin-top: 8px;
  background: rgba(61,168,158,.03); border: 1px dashed rgba(61,168,158,.22);
  border-radius: 12px; color: rgba(255,255,255,.55); font-size: 14px; line-height: 1.7;
}
.ig-notice__icon { color: rgba(61,168,158,.35); margin-bottom: 14px; }
.ig-notice strong { color: rgba(255,255,255,.85); }
.ig-notice code {
  background: rgba(61,168,158,.12); border-radius: 4px;
  padding: 2px 7px; font-size: 12px; color: var(--mint); font-family: monospace;
}
.ig-notice--error { border-color: rgba(180,60,60,.3); background: rgba(180,60,60,.04); }

/* ── prefers-reduced-motion ──────────────────────────────────────────────── */
/* Respect the OS setting: disable/minimise all animations for users
   who need reduced motion (vestibular disorders, motion sensitivity, etc.)   */
@media (prefers-reduced-motion: reduce) {
  /* Kill all transitions & animations globally */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* Scroll-progress bar: skip width transition */
  .scroll-prog { transition: none !important; }

  /* Hero headline: reveal instantly (don't hide text) */
  .cine-headline .ln span,
  .reveal-headline .ln span { transform: translateY(0) rotateX(0deg) !important; }
  .cine-headline { transition: none !important; }

  /* Reveal-y lines: show immediately */
  .reveal-y > * { transform: translateY(0) !important; opacity: 1 !important; }
  .reveal-y.is-in > * { transform: translateY(0) !important; }

  /* Depth scroll reveals: show without motion */
  .depth, .depth-l, .depth-r, .depth-up { opacity: 1 !important; transform: none !important; }
  .depth-stagger > * { opacity: 1 !important; transform: none !important; }

  /* Marquee: freeze */
  .mega-marquee .track { animation: none !important; }

  /* 3-D rings & coin */
  .cine-ring.spin { animation: none !important; }
  .cine-coin { animation: none !important; }

  /* Sparks */
  .cine-spark { animation: none !important; opacity: 1; }

  /* Live dot */
  .cine-top .dot-live { animation: none !important; }

  /* Machine beam / target */
  .fac-machine .beam,
  .fac-machine .target { animation: none !important; }

  /* Port pulse rings */
  .port .ring { animation: none !important; }

  /* Button shimmer sweep */
  .btn-cine::after { display: none !important; }

  /* Parallax: disable tick loop effect */
  [data-parallax] { transform: none !important; }

  /* Hero photo parallax */
  .hero-photo { transform: none !important; }

  /* Tilt / magnetic on cards */
  .panel, .grade-card, .station-card, .post, .we-work .card { transform: none !important; }
}