@font-face {
  font-family: "Degular Display";
  src: url("fonts/Degular-Display-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SF-Pro-Display-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --yellow-dark: #9D8A00;
  --ink: #111111;
  --bg: #FFFFFF;
  --font-display: "Degular Display", "Archivo Narrow", sans-serif;
  --font-detail: "Cormorant Garamond", Georgia, serif;
  --font-body: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
a:hover, a:focus-visible { border-color: var(--ink); }
a:focus-visible { outline: 2px solid var(--yellow-dark); outline-offset: 4px; }

.stage {
  height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 1.5rem;
}

/* ---------- LOADER ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: background-color .6s ease .3s;
}

.blueprint-lines {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity .6s ease;
}
.blueprint-lines line {
  stroke: #d6d6d6;
  stroke-width: 0.75px;
  vector-effect: non-scaling-stroke;
  fill: none;
  transition: stroke-dashoffset .75s cubic-bezier(.65,0,.35,1);
}
.blueprint-lines.is-faded {
  opacity: 0;
}

.logo-wrap {
  position: relative;
  width: min(62vw, 420px, 46svh);
  aspect-ratio: 1674 / 1647;
  transition: transform 1.1s cubic-bezier(.65,0,.35,1);
}

/* wordmark "BELFAST / Construction Management" recortado aparte de
   LOGO con palabra en negro.png. Posicionado en % (no px/em fijos) relativo
   al mismo .logo-wrap que ya escala en todos los breakpoints y al
   achicarse (scale .34 en .loader.is-shrunk), asi la distancia respecto
   al isotipo se mantiene proporcional siempre. Los porcentajes salen de
   medir por pixeles el archivo original del cliente: la distancia real
   entre el pie del isotipo y el techo del texto es ~19% del alto del
   isotipo -- convertido a fraccion del canvas completo de 1674x1647
   (mismo canvas que usa LOGO LOADING.png para el isotipo del loading). */
.logo-wordmark {
  position: absolute;
  top: 69.62%;
  left: 50%;
  width: 62.37%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .5s ease .7s;
}
.logo-wordmark.revealed {
  opacity: 1;
}

.isotipo-piezas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: opacity 1.1s cubic-bezier(.65,0,.35,1);
}
.isotipo-piezas path {
  fill: transparent;
  stroke: #111;
  stroke-width: 4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .7s cubic-bezier(.65,0,.35,1), fill .4s ease;
}
.isotipo-piezas path.drawn {
  stroke-dashoffset: 0;
}
.isotipo-piezas path.filled {
  fill: #E8D300;
  stroke: #E8D300;
}
.logo-wrap.is-wordmark-only .logo-wordmark {
  top: 0;
  width: 160%;
}

.loader.is-shrunk .logo-wrap {
  transform: scale(.40) translateY(-80vh);
}

.loader.is-transparent {
  background: transparent;
  pointer-events: none;
}

/* ---------- HERO / PARÉNTESIS + TEXTO ---------- */

.hero {
  position: relative;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s ease, transform .7s ease;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* altura fija que ya contempla la foto abierta (la mas alta que puede
     estar el contenido) -- asi el espacio nunca cambia ni empuja el
     centrado general cuando la foto se abre o se cierra */
  min-height: min(20rem, 27svh);
}
.hero.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.paren-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .15em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 7vw, 4.6rem);
  text-transform: uppercase;
  letter-spacing: .01em;
  flex-wrap: wrap;
  max-width: 90vw;
}

.paren {
  display: inline-block;
  transition: transform .7s cubic-bezier(.65,0,.35,1), opacity .5s ease;
  opacity: 0;
}
.paren-l { transform: translateX(28px); }
.paren-r { transform: translateX(-28px); }
.paren-row.is-open .paren {
  opacity: 1;
  transform: translateX(0);
}
.paren-row.is-open.is-split .paren-l { transform: translateX(-1.5em); }
.paren-row.is-open.is-split .paren-r { transform: translateX(1.5em); }

.proximamente {
  margin: 0;
  display: inline-flex;
  white-space: nowrap;
}

.letter {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transition: opacity .4s ease, filter .4s ease, transform .6s cubic-bezier(.65,0,.35,1);
}
.letter.is-in { opacity: 1; filter: blur(0); }

.letter.pre-o.is-split { transform: translateY(0) translateX(-1.3em); }
.letter.post-o.is-split { transform: translateY(0) translateX(1.3em); }

.letter-o {
  position: relative;
}
.o-sizer {
  visibility: hidden;
}

/* la "o" real (misma tipografia que el resto) se corta al medio en dos
   mitades -- cada mitad es un contenedor recortado con el glifo completo
   adentro, corrido para que se vea solo su mitad -- y al separarse quedan
   leyendose como "(" y ")" a los costados de las fotos. */
.o-glyph-half {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: transform .6s cubic-bezier(.65,0,.35,1);
}
.o-glyph-half-l { left: 0; }
.o-glyph-half-r { left: 50%; }

.o-glyph-text {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
}
.o-glyph-half-r .o-glyph-text { left: -100%; }

.letter-o.is-split .o-glyph-half-l { transform: translateX(-1.3em); }
.letter-o.is-split .o-glyph-half-r { transform: translateX(1.3em); }

/* tilde de la "o" dibujada aparte (ver nota en buildWord/script.js): una
   barrita rotada en vez de depender del acento compuesto por la fuente de
   respaldo, que quedaba desproporcionado. Se oculta al abrirse la ventana
   de fotos porque ya no hay un solo cuerpo de letra sobre el que apoyarse. */
.o-accent {
  position: absolute;
  top: 0.02em;
  left: 64%;
  width: 0.26em;
  height: 0.1em;
  background: currentColor;
  border-radius: 1px;
  transform: translateX(-40%) rotate(-35deg);
  transform-origin: center;
  transition: opacity .3s ease;
}
.letter-o.is-split .o-accent {
  opacity: 0;
}

/* el "corte": una linea vertical fina que aparece justo al medio de la o,
   antes de que se separe -- como si un cuchillo marcara el eje primero */
.o-cut-line {
  position: absolute;
  left: 50%;
  top: 6%;
  bottom: 6%;
  width: 1.5px;
  background: currentColor;
  transform: translateX(-50%) scaleY(0);
  transform-origin: center;
  opacity: 0;
  transition: transform .3s ease, opacity .25s ease;
}
.letter-o.is-cutting .o-cut-line {
  transform: translateX(-50%) scaleY(1);
  opacity: 1;
}
.letter-o.is-split .o-cut-line {
  opacity: 0;
}

.photo-window {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.3em;
  height: 4.1em;
  border-radius: 2px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform .55s cubic-bezier(.65,0,.35,1) .15s, opacity .4s ease .15s;
  background: var(--ink);
  pointer-events: none;
}
.photo-window.is-open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.photo-window img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  opacity: 0;
  transform: scale(1);
  transition: opacity .45s ease, filter .35s ease, transform .35s ease;
  pointer-events: none;
}
.photo-window img.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* solo en dispositivos con mouse/cursor real -- en touch el navegador puede
   dejar el :hover "pegado" en el ultimo elemento tocado (no hay forma de
   "sacar" el mouse de encima), lo que hacia que la ultima foto del loop
   quedara a color permanentemente en mobile */
@media (hover: hover) and (pointer: fine) {
  .photo-window img.is-active:hover {
    filter: grayscale(0) contrast(1.05);
    transform: scale(1.08);
  }
}

/* ---------- CONTACTO ---------- */

.contact {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + min(10rem, 13.5svh) + 14svh);
  opacity: 0;
  text-align: center;
}
.contact.is-visible {
  opacity: 1;
}

.contact-cta {
  font-family: var(--font-detail);
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  margin: 0 0 .9rem;
}

.contact-details {
  font-family: var(--font-body);
  font-size: .9rem;
  letter-spacing: .01em;
  margin: 0 0 1.1rem;
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
}

.social-list {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin: 0 0 .75rem;
  padding: 0;
  font-family: var(--font-body);
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.legal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding: 1.25rem 1.5rem;
  font-family: var(--font-body);
  font-size: .75rem;
  color: #8a8a8a;
}
.legal p { margin: 0; }
.legal a {
  color: inherit;
  font-weight: 600;
}
.legal a:hover, .legal a:focus-visible {
  color: var(--ink);
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 480px) {
  .stage { padding: 0 1.25rem; }
  .logo-wrap { width: 58vw; }
  .loader.is-shrunk .logo-wrap { transform: scale(.55) translateY(-48.5vh); }
  .logo-wrap.is-wordmark-only .logo-wordmark { width: 100%; }
  .social-list { gap: 1rem; }
  .blueprint-lines line { stroke-width: 0.4px; }
  .contact { top: calc(50% + min(10rem, 13.5svh) + 7.3svh); }
}

/* ---------- MOTION SAFE ---------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}