/* =====================================================================
   MACHINES — Slayer-style "one machine, one screen", reinterpreted:
   full-bleed photos, wide-tracked labels, text anchored low-left, and a
   CSS sticky stack where each screen slides over the previous one.
   ===================================================================== */
.m-track{ display:block; letter-spacing:.42em; color:var(--ink-muted); margin-bottom:18px; }

/* ---------- hero ---------- */
.m-hero{ position:relative; height:100vh; height:100svh; min-height:600px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; background:var(--bg-deep); }
.m-hero-media{ position:absolute; inset:0; }
.m-hero-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.m-hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(12,10,7,.9) 0%, rgba(12,10,7,.55) 45%, rgba(12,10,7,.15) 80%), linear-gradient(0deg, rgba(12,10,7,.95) 0%, rgba(12,10,7,0) 45%); }
.m-hero-inner{ position:relative; z-index:2; padding-bottom:clamp(28px, 5vh, 48px); }
.m-latin{ display:block; font-size:clamp(2.6rem, 1.3rem + 5vw, 6.4rem); color:var(--accent-soft); margin-bottom:14px; }
.m-title{ font-size:clamp(2rem, 1.2rem + 3.4vw, 4.4rem); margin-bottom:20px; }
.m-lead{ max-width:46ch; color:var(--ink-muted); font-size:var(--t-body); line-height:1.8; }
.m-index{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--hairline-strong); }
.m-index a{ padding:20px var(--gutter); font-size:15px; color:var(--ink-muted); border-left:1px solid var(--hairline); transition:color .3s var(--ease), background-color .3s var(--ease); }
.m-index a:first-child{ border-left:0; }
.m-index a:hover{ color:var(--ink); background:rgba(242,236,227,.05); }
.m-index em{ font-style:normal; font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; color:var(--accent-soft); margin-right:10px; }

.js .m-hero-media img{ animation:mSettle 2.4s var(--ease) both; }
.js .m-hero-inner > *{ animation:mRise 1s var(--ease) both; }
.js .m-hero-inner > :nth-child(2){ animation-delay:.15s; }
.js .m-hero-inner > :nth-child(3){ animation-delay:.3s; }
.js .m-hero-inner > :nth-child(4){ animation-delay:.45s; }
.js .m-index{ animation:mRise 1s var(--ease) .6s both; }
@keyframes mSettle{ from{ transform:scale(1.08); } to{ transform:none; } }
@keyframes mRise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* ---------- stack ---------- */
.m-stack{ position:relative; }
.m-screen{ position:sticky; top:0; height:100vh; height:100svh; min-height:560px; display:flex; align-items:flex-end; overflow:hidden; background:var(--bg-deep); }
.m-bg{ position:absolute; inset:0; }
.m-bg img{ width:100%; height:100%; object-fit:cover; }
.m-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(12,10,7,.9) 0%, rgba(12,10,7,.6) 40%, rgba(12,10,7,.1) 78%), linear-gradient(0deg, rgba(12,10,7,.85) 0%, rgba(12,10,7,0) 50%); }
.m-shade{ position:absolute; inset:0; z-index:3; background:#0c0a07; opacity:0; pointer-events:none; }
.m-content{ position:relative; z-index:2; padding-top:calc(var(--header-h) + 24px); padding-bottom:clamp(48px, 10vh, 104px); }
.m-no{ display:block; font-family:var(--f-mono); font-size:13px; letter-spacing:.14em; color:var(--accent-soft); margin-bottom:14px; }
.m-no i{ font-style:normal; color:var(--ink-faint); }
.m-h{ font-size:clamp(2rem, 1.2rem + 3.2vw, 4.2rem); margin-bottom:20px; }
.m-p{ max-width:44ch; color:var(--ink-muted); font-size:var(--t-body); line-height:1.8; margin-bottom:22px; }
.m-spec{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; }
.m-spec li{ font-family:var(--f-mono); font-size:12.5px; letter-spacing:.06em; padding:7px 12px; border:1px solid var(--hairline-strong); color:var(--ink); background:rgba(12,10,7,.35); }
.m-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
.m-tel{ display:inline-flex; flex-direction:column; gap:6px; font-family:var(--f-body); font-weight:700; font-size:clamp(2rem, 1.4rem + 2.4vw, 3.4rem); letter-spacing:.02em; line-height:1; margin-bottom:30px; transition:color .3s var(--ease); }
.m-tel:hover{ color:var(--accent-soft); }

/* ---------- closing ---------- */
.m-close{ position:relative; z-index:4; padding:clamp(110px, 20vh, 200px) 0; text-align:center; background:radial-gradient(ellipse 60% 60% at 50% 40%, rgba(171,70,55,.16), rgba(171,70,55,0) 70%), var(--bg-deep); border-top:1px solid var(--hairline); }
.m-close-inner{ display:flex; flex-direction:column; align-items:center; }
.m-close-latin{ font-size:clamp(2.2rem, 1.2rem + 4vw, 5rem); margin-bottom:22px; }
.m-close-title{ font-size:clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem); margin-bottom:36px; }
.m-close-ctas{ justify-content:center; }

/* ---------- responsive ---------- */
@media (max-width:860px){
  .m-index{ grid-template-columns:repeat(2, 1fr); }
  .m-index a{ padding:14px var(--gutter); font-size:14px; border-top:1px solid var(--hairline); }
  .m-index a:nth-child(odd){ border-left:0; }
  .m-bg::after{ background:linear-gradient(0deg, rgba(12,10,7,.96) 0%, rgba(12,10,7,.78) 48%, rgba(12,10,7,.25) 100%); }
  .m-hero-media::after{ background:linear-gradient(0deg, rgba(12,10,7,.97) 0%, rgba(12,10,7,.7) 55%, rgba(12,10,7,.35) 100%); }
}
@media (max-width:480px){
  .m-index a em{ display:block; margin:0 0 2px; }
  .m-spec{ margin-bottom:24px; }
}
/* stacking needs the whole screen to fit; on short or motion-reduced screens it is a plain stack */
@media (max-height:520px), (prefers-reduced-motion: reduce){
  .m-screen{ position:relative; height:auto; min-height:100vh; min-height:100svh; }
}
@media (prefers-reduced-motion: reduce){
  .js .m-hero-media img, .js .m-hero-inner > *, .js .m-index{ animation:none; }
}