/* ============================================================
   CONSTRUTECH — Atelier edition
   Inspirado en la coreografía editorial de hba.com, con identidad
   CONSTRUTECH: blanco/negro puro, Archivo + Fraunces, GSAP+Lenis.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }

:root{
  --paper:#ffffff;
  --ink:#0d0d0c;
  --ink-soft:#171715;
  --line: rgba(13,13,12,.14);
  --line-on-ink: rgba(251,251,249,.18);
  --muted:#68685f;
  --muted-on-ink: rgba(251,251,249,.6);
  --off-ink: rgba(251,251,249,.92);

  --font-display: "Fraunces", serif;
  --font-sans: "Archivo", sans-serif;

  --pad: clamp(20px, 4vw, 56px);
  --radius-img: clamp(6px, 1vw, 14px);
  --ease: cubic-bezier(.22,1,.36,1);

  --hdr-h: 84px;
}

html, body { margin:0; padding:0; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; background:none; border:0; cursor:pointer; color:inherit; }
h1,h2,h3,p{ margin:0; }
em{ font-style: italic; }

.h-display{
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
}

.eyebrow{
  display:inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow.on-ink{ color: var(--muted-on-ink); }

/* ---------- Pills / buttons ---------- */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 13px 22px 11px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.pill:hover{ background: var(--ink); color: var(--paper); }
.pill .ico{ transition: transform .35s var(--ease); }
.pill:hover .ico{ transform: translateX(3px); }

.pill--line{ border-color: var(--ink); color: var(--ink); }
.pill--line-invert{ border-color: var(--off-ink); color: var(--off-ink); }
.pill--line-invert:hover{ background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ============ LOADER ============ */
.loader{
  position: fixed; inset:0; z-index: 9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 18px;
  background: var(--ink);
  color: var(--paper);
}
.loader__mark{ width: 200px; height: auto; }
body:not(.is-loading) .loader{
  opacity: 0; visibility: hidden; pointer-events:none;
  transition: opacity .6s var(--ease), visibility 0s .6s;
}

/* ============ HEADER ============ */
.hdr{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 var(--pad);
  height: var(--hdr-h);
  color: var(--off-ink);
  background: transparent;
  transition: color .4s var(--ease), height .4s var(--ease), background-color .4s var(--ease);
}
.hdr.is-scrolled{ height: 64px; }
.hdr[data-theme="light"]{ color: var(--ink); }
/* Fondo sólido mientras el nav está abierto: el texto siempre debe leerse,
   sin importar qué sección quede detrás del header transparente. */
.hdr.is-open{ background: var(--ink); color: var(--off-ink); }
.hdr__brand{
  display:flex; align-items:center; gap:14px; font-weight:600; letter-spacing:.02em; font-size:17px;
  padding: 12px 0; margin: -12px 0; min-height:44px;
}
.hdr__mark{ position:relative; width:56px; height:31px; display:inline-block; }
.hdr__mark img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition: opacity .3s var(--ease); }
.hdr__mark-dark{ opacity:0; }
.hdr__mark-light{ opacity:1; }
.hdr[data-theme="light"] .hdr__mark-dark{ opacity:1; }
.hdr[data-theme="light"] .hdr__mark-light{ opacity:0; }
.hdr.is-open .hdr__mark-dark{ opacity:0; }
.hdr.is-open .hdr__mark-light{ opacity:1; }
/* ---------- Nav: oculto por defecto, aparece con el toggle (efecto hba.com) ---------- */
.hdr__nav{
  display:flex; gap: clamp(16px,2.4vw,34px);
  opacity:0; visibility:hidden; transform: translateY(-6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s .4s;
}
.hdr.is-open .hdr__nav{
  opacity:1; visibility:visible; transform:none;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s;
}
.hdr__nav a{
  font-size: 12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  position:relative; padding-bottom:2px;
}
.hdr__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.hdr__nav a:hover::after{ transform: scaleX(1); }

.hdr__toggle{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 8px; margin: -14px -8px;
  min-height:44px; cursor:pointer;
}
.hdr__toggle-label{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.hdr__toggle-ico{ width:16px; height:11px; position:relative; display:inline-block; }
.hdr__toggle-ico i{ position:absolute; left:0; right:0; height:1px; background:currentColor; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.hdr__toggle-ico i:nth-child(1){ top:0; }
.hdr__toggle-ico i:nth-child(2){ bottom:0; }
[data-menu-toggle][aria-expanded="true"] .hdr__toggle-ico i:nth-child(1){ transform: translateY(5px) rotate(45deg); }
[data-menu-toggle][aria-expanded="true"] .hdr__toggle-ico i:nth-child(2){ transform: translateY(-5px) rotate(-45deg); }

/* ---------- Scrim: atenúa el resto de la página al abrir el nav ---------- */
.hdr__scrim{
  position: fixed; inset:0; z-index: 440;
  background: rgba(13,13,12,.6);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .4s var(--ease), visibility 0s .4s;
}
body.menu-open .hdr__scrim{
  opacity:1; visibility:visible; pointer-events:auto;
  transition: opacity .4s var(--ease), visibility 0s;
}

@media (max-width: 700px){
  .hdr__nav{
    position:fixed; top: var(--hdr-h); left:0; right:0; z-index:450;
    flex-direction:column; gap:0;
    background: var(--ink); color: var(--off-ink);
    padding: 8px var(--pad) 20px;
  }
  .hdr.is-open .hdr__nav{ top: 64px; }
  .hdr__nav a{ padding: 12px 0; border-bottom: 1px solid var(--line-on-ink); }
}

/* ============ HERO — de plano (boceto) a obra (foto) ============ */
.hero{
  position: relative;
  height: 240svh; /* recorrido extra para que el reveal avance con el scroll */
}
.hero__pin{
  position: sticky; top:0;
  height: 100svh; min-height: 560px;
  overflow: hidden;
  color: var(--off-ink);
}
.hero__sketch, .hero__reveal{ position:absolute; inset:0; }
.hero__sketch img{ width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.05); }
.hero__reveal{
  clip-path: inset(50% 50% 50% 50% round 0px);
  will-change: clip-path;
}
.hero__reveal img{ width:100%; height:100%; object-fit:cover; transform: scale(1.15); will-change: transform; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(13,13,12,.5) 0%, rgba(13,13,12,.15) 38%, rgba(13,13,12,.6) 100%);
}
.hero__content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: calc(var(--hdr-h) + 20px) var(--pad) 64px;
  gap: 22px;
}
.badge{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding: 8px 14px; border:1px solid var(--line-on-ink); border-radius:999px;
}
.badge .dot{ width:6px; height:6px; border-radius:50%; background:#8fd18f; display:inline-block; }
.hero__title{
  position:relative;
  font-family: var(--font-display); font-weight:300;
  font-size: clamp(38px, 6.4vw, 96px);
  line-height: 1.02; letter-spacing:-0.01em; max-width: 22ch;
  min-height: 1.1em;
}
.hero__phase{
  position:absolute; left:0; top:0; right:0;
  opacity:0; transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.hero__phase.is-active{ position:relative; opacity:1; transform:none; }
.hero__foot{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
  opacity:0; transform: translateY(10px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.hero__foot.is-in{ opacity:1; transform:none; }
.hero__lead{ max-width: 40ch; font-size: clamp(15px,1.6vw,19px); color: var(--off-ink); }
.hero__scrolldown{
  position:absolute; right: var(--pad); bottom: 26px; z-index:2;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--muted-on-ink);
  display:flex; align-items:center; gap:10px;
}
.hero__scrolldown i{ width:1px; height:34px; background: var(--line-on-ink); position:relative; overflow:hidden; }
.hero__scrolldown i::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: var(--off-ink); animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:0; } 100%{ top:100%; } }

@media (prefers-reduced-motion: reduce){
  .hero{ height:100svh; }
  .hero__reveal{ clip-path:none; }
  .hero__reveal img{ transform:none; }
  .hero__phase[data-hero-phase="1"]{ display:none; }
  .hero__phase.is-active{ position:relative; }
  .hero__foot{ opacity:1; transform:none; }
}

/* ============ SECTION SHELL ============ */
main > section{ padding: clamp(80px,10vw,140px) var(--pad); }
main > section.hero{ padding: 0; }

/* ============ WHO ============ */
.who__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "img copy" "img text";
  gap: 0 clamp(32px,6vw,90px);
}
.who__img{ grid-area: img; align-self:start; overflow:hidden; border-radius: var(--radius-img); }
.who__img img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/5; }

/* ---------- Image reveal (crece con el scroll, tipo hba.com) ---------- */
[data-img-reveal]{ clip-path: inset(0% 0% 100% 0%); }
[data-img-reveal] img{ transform: scale(1.18); transform-origin: 50% 100%; }
.who__copy{ grid-area: copy; align-self:end; padding-bottom: 28px; }
.who__copy .eyebrow{ display:block; margin-bottom:16px; }
.who__copy .h-display{ font-size: clamp(34px,5vw,58px); }
.who__text{ grid-area: text; padding-top: 28px; display:flex; flex-direction:column; gap:26px; }
.who__text p{ font-size: clamp(16px,1.6vw,20px); color: var(--ink-soft); max-width: 46ch; }
.who__text .pill{ align-self:flex-start; }

@media (max-width: 800px){
  .who__grid{ grid-template-columns: 1fr; grid-template-areas: "img" "copy" "text"; }
  .who__copy{ padding: 28px 0 0; }
  .who__text{ padding-top: 18px; }
}

/* ============ DUO ============ */
.duo{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,3vw,28px);
  padding: 0 var(--pad) clamp(80px,10vw,140px);
}
.duo__item{ margin:0; overflow:hidden; border-radius: var(--radius-img); }
.duo__item img{ width:100%; object-fit:cover; aspect-ratio: 3/4; }
.duo__item--b{ margin-top: clamp(40px,8vw,120px); }
.duo__item figcaption{
  margin-top:12px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted);
}
@media (max-width: 700px){
  .duo{ grid-template-columns:1fr; }
  .duo__item--b{ margin-top:0; }
}

/* ============ SHOWCASE (pinned projects) ============ */
.showcase{ position:relative; background: var(--ink); padding:0; }
.showcase__pin{
  position: relative;
  height: 100svh;
  overflow: hidden;
  color: var(--off-ink);
}
.showcase__stage{ position:absolute; inset:0; }
.showcase__item{
  position:absolute; inset:0;
  opacity:0;
}
.showcase__item img{ width:100%; height:100%; object-fit:cover; will-change: transform, border-radius; }
.showcase__item[data-showcase-item="0"]{ opacity:1; }
.showcase__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(13,13,12,.15) 0%, rgba(13,13,12,.05) 40%, rgba(13,13,12,.86) 100%);
}
.showcase__panel{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: clamp(28px,5vw,56px) var(--pad) clamp(30px,5vw,48px);
  display:flex; flex-direction:column; gap:16px;
}
.showcase__titles{ position:relative; min-height: clamp(52px,9vw,108px); }
.showcase__title{
  position:absolute; left:0; right:0; bottom:0;
  font-family: var(--font-display); font-weight:300;
  font-size: clamp(30px,6vw,64px); line-height:1.05;
  opacity:0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.showcase__title.is-active{ opacity:1; transform:none; }
.showcase__panel .pill{ align-self:flex-start; border-color: var(--off-ink); color: var(--off-ink); margin-top:4px; }
.showcase__panel .pill:hover{ background: var(--paper); color: var(--ink); }
.showcase__meta{
  display:flex; flex-wrap:wrap; gap: clamp(18px,3vw,48px);
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--muted-on-ink);
  margin-top:8px;
}

/* ============ SPOTLIGHT ============ */
.spotlight{
  display:grid; grid-template-columns: .95fr 1.05fr; align-items:center; gap: clamp(30px,6vw,80px);
  background: var(--paper);
}
.spotlight__copy .h-display{ font-size: clamp(30px,4.4vw,50px); margin-bottom:28px; }
.spotlight__img{ overflow:hidden; border-radius: var(--radius-img); }
.spotlight__img img{ width:100%; aspect-ratio: 4/5; object-fit:cover; }
@media (max-width: 860px){
  .spotlight{ grid-template-columns:1fr; }
  .spotlight__img{ order:-1; }
}

/* ============ SERVICES (image sequence scrubbing) ============ */
.services{ background: var(--paper); color: var(--ink); padding-bottom:0 !important; }
.services__head{ max-width: 46ch; margin: 0 auto clamp(40px,6vw,72px); text-align:center; }
.services__head .h-display{ font-size: clamp(26px,3.6vw,42px); margin-top:14px; }
.services__wrap{ position:relative; height: 260vh; }
.services__pin{
  position: sticky; top:0; height:100vh;
  display:flex; align-items:center;
  overflow:hidden;
}
.services__track{ display:flex; gap: clamp(16px,2vw,24px); will-change: transform; padding-right: var(--pad); }
.services__card{ width: clamp(230px,26vw,340px); flex:none; }
.services__card a{ display:block; }
.services__card-img{ overflow:hidden; border-radius: var(--radius-img); aspect-ratio: 3/4; }
.services__card-img img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); pointer-events:none; }
.services__card:hover .services__card-img img{ transform: scale(1.06); }
.services__card-foot{ padding-top:16px; display:flex; flex-direction:column; gap:8px; }
.services__card-foot h3{ font-family: var(--font-display); font-weight:400; font-size: clamp(17px,1.8vw,20px); line-height:1.3; }
.services__card-btn{
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--muted);
  display:inline-flex; align-items:center; gap:6px;
}
.services__card-btn .ico{ transition: transform .35s var(--ease); }
.services__card:hover .services__card-btn .ico{ transform: translateX(3px); }

/* ============ PROCESS ============ */
.process__head{ margin-bottom: clamp(36px,6vw,64px); max-width: 60ch; }
.process__head .h-display{ font-size: clamp(28px,4.2vw,46px); margin-top:16px; }
.process__grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(20px,3vw,32px);
}
.process__step{ display:flex; flex-direction:column; gap:14px; }
.process__media{ overflow:hidden; border-radius: var(--radius-img); }
.process__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition: transform .6s var(--ease); }
.process__step:hover .process__media img{ transform: scale(1.05); }
.process__n{ font-family: var(--font-display); font-style:italic; color: var(--muted); font-size:14px; }
.process__step h3{ font-size:18px; font-weight:600; }
.process__step p{ font-size:14px; color: var(--muted); }
@media (max-width: 900px){ .process__grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .process__grid{ grid-template-columns: 1fr; } }

/* ============ CLIENTS ============ */
.clients{ background: var(--paper); }
.clients__head{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom: clamp(28px,5vw,48px); }
.clients__track{ overflow:hidden; }
.clients__row{
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line);
}
.clients__logo{
  background: var(--paper);
  aspect-ratio: 16/9;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(18px,3vw,34px);
}
.clients__logo img{ width:100%; height:100%; object-fit:contain; filter: grayscale(1); opacity:.65; transition: opacity .35s var(--ease), filter .35s var(--ease); }
.clients__logo:hover img{ filter:none; opacity:1; }
@media (max-width: 860px){ .clients__row{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 520px){ .clients__row{ grid-template-columns: repeat(2,1fr); } }

/* ============ FIGURES ============ */
.figures{ background: var(--paper); border-top: 1px solid var(--line); }
.figures__copy{ max-width: 68ch; margin-bottom: clamp(40px,6vw,72px); }
.figures__copy .h-display{ font-size: clamp(28px,4.2vw,46px); margin: 16px 0 20px; }
.figures__copy p{ color: var(--muted); font-size: clamp(15px,1.4vw,17px); }
.figures__grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(20px,3vw,28px); }
.figure{
  border-top: 1px solid var(--line); padding-top: 22px;
  display:flex; flex-direction:column; gap:6px;
}
.figure__n{ font-family: var(--font-display); font-weight:300; font-size: clamp(44px,6vw,76px); line-height:1; }
.figure__u{ font-family: var(--font-display); font-weight:300; font-size: clamp(28px,4vw,44px); }
.figure__l{ font-size:13px; color: var(--muted); max-width:22ch; }
@media (max-width: 800px){ .figures__grid{ grid-template-columns: repeat(2,1fr); } }

/* ============ FAQ ============ */
.faq{ background: var(--paper); display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px,6vw,80px); }
.faq__head .h-display{ font-size: clamp(28px,4vw,42px); margin-top:14px; }
.faq__list{ display:flex; flex-direction:column; }
.faq__item{ border-bottom: 1px solid var(--line); }
.faq__item:first-child{ border-top: 1px solid var(--line); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding: 22px 0; text-align:left; cursor:pointer;
}
.faq__q span:first-child{ font-family: var(--font-display); font-size: clamp(17px,1.8vw,21px); }
.faq__icon{ position:relative; width:16px; height:16px; flex:none; }
.faq__icon::before, .faq__icon::after{ content:""; position:absolute; background: var(--ink); }
.faq__icon::before{ left:0; right:0; top:50%; height:1px; transform:translateY(-50%); }
.faq__icon::after{ top:0; bottom:0; left:50%; width:1px; transform:translateX(-50%); transition: transform .35s var(--ease); }
.faq__item.is-open .faq__icon::after{ transform: translateX(-50%) scaleY(0); }
.faq__a{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq__a-inner{ overflow:hidden; }
.faq__a-inner p{ padding: 0 0 22px; color: var(--muted); font-size:15px; max-width:56ch; }
.faq__item.is-open .faq__a{ grid-template-rows: 1fr; }
@media (max-width: 800px){ .faq{ grid-template-columns:1fr; } }

/* ============ FOOTER ============ */
.ftr{ background: var(--ink); color: var(--off-ink); }

.ftr__top{
  display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px,7vw,100px);
  padding: clamp(64px,9vw,120px) var(--pad) clamp(56px,8vw,96px);
  border-bottom: 1px solid var(--line-on-ink);
}
.ftr__top-copy{ display:flex; flex-direction:column; gap:18px; }
.ftr__top-copy .h-display{ font-size: clamp(36px,5.6vw,64px); line-height:1.05; }
.ftr__top-copy p{ color: var(--muted-on-ink); font-size:16px; max-width:34ch; }
.ftr__cta-btn{
  align-self:flex-start; margin-top:10px;
  display:inline-flex; align-items:center; gap:10px;
  background: var(--paper); color: var(--ink);
  padding: 16px 28px; border-radius:999px;
  font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  transition: opacity .3s var(--ease);
}
.ftr__cta-btn:hover{ opacity:.82; }
.ftr__cta-btn .ico{ transition: transform .35s var(--ease); }
.ftr__cta-btn:hover .ico{ transform: translateX(3px); }

.ftr__cols{ display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(20px,3vw,32px); }
.ftr__col{ display:flex; flex-direction:column; gap:12px; }
.ftr__col a, .ftr__col span{ font-size:14px; color: var(--muted-on-ink); }
.ftr__col a{ transition: color .3s var(--ease); }
.ftr__col a:hover{ color: var(--off-ink); }
@media (max-width: 860px){ .ftr__top{ grid-template-columns:1fr; } }
@media (max-width: 620px){ .ftr__cols{ grid-template-columns: 1fr 1fr; } }

.ftr__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding: 22px var(--pad) 32px;
  font-size:12px; letter-spacing:.04em; color: var(--muted-on-ink);
}
.ftr__bottom a:hover{ color: var(--off-ink); }
.ftr__brand{ display:flex; align-items:center; gap:12px; color: var(--off-ink); font-weight:600; font-size:15px; }
.ftr__mark{ width:48px; height:auto; }

/* ============ REVEAL ANIMATIONS ============ */
[data-reveal]{ opacity:0; transform: translateY(28px); }
[data-reveal].is-in{ opacity:1; transform:none; transition: opacity .9s var(--ease), transform .9s var(--ease); }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  .hero__media img{ animation:none; transform:none; }
  [data-reveal]{ opacity:1; transform:none; }
  [data-img-reveal]{ clip-path:none; }
  [data-img-reveal] img{ transform:none; }
  .showcase__title{ transition:none; }
}