@import url("../fonts/fonts.css");

/* ============================================================
   SAV CREATIVE — sistema de diseño
   Tokens tomados de la extracción del sitio original en Framer.
   ============================================================ */

:root {
  /* Color */
  --black:        #1e1e1e;
  --charcoal:     #0e0e0e;
  --dark-gray:    #2e353b;
  --gray:         #5a6271;
  --light-gray:   #8a919b;
  --border:       #d0d8e4;
  --off-white:    #eef0f6;
  --white:        #ffffff;
  --amber:        #ffba00;

  /* Pasteles: único color del sitio, sólo en las tarjetas de servicios */
  --pastel-pink:  rgb(255, 232, 253);
  --pastel-beige: rgb(247, 239, 215);
  --pastel-green: rgb(239, 252, 225);
  --pastel-peach: rgb(255, 219, 209);
  --pastel-blue:  rgb(232, 252, 255);

  /* Fresh green used for the "+" signs on the homepage stats */
  --green: #2fa96b;

  /* Tipografía */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --script: "Sacramento", "Segoe Script", cursive;

  /* Layout */
  --max-w:   1360px;
  --pad:     40px;
  --radius:  16px;
  --pill:    500px;

  /* Ritmo vertical — la generosidad ES el diseño. No reducir. */
  --sect-lg: 128px;
  --sect-md: 96px;
  --sect-sm: 48px;

  /* Movimiento */
  --ease: cubic-bezier(.44, 0, .56, 1);
  --dur:  .4s;
}

@media (max-width: 1199px) { :root { --pad: 24px; --sect-lg: 88px; --sect-md: 72px; --sect-sm: 32px; } }
@media (max-width: 809px)  { :root { --pad: 16px; --sect-lg: 56px; --sect-md: 48px; --sect-sm: 24px; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }

::selection { background: var(--black); color: var(--white); }

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

/* ---------- Utilidades de composición ---------- */
.wrap { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); }
.wrap--narrow { max-width: 810px; }

/* Focus frame: softly blurs the very top, sides and bottom of the viewport
   as you scroll, so the centre reads as "in focus". Sits above page content
   but below the clock, menu and nav (which keep their own higher z-index). */
.edge-focus {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 56%, #000 96%);
          mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 56%, #000 96%);
}
/* Subtle always-visible vignette so the "in focus" frame reads even over white areas */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 29;
  pointer-events: none;
  box-shadow: inset 0 0 90px 26px rgba(15, 15, 20, .07);
}
@media (max-width: 809px) {
  .edge-focus { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
}

.section    { padding: var(--sect-lg) 0; }
.section--md{ padding: var(--sect-md) 0; }
.section--sm{ padding: var(--sect-sm) 0; }

.mono {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--light-gray);
}

/* Títulos de sección. El punto final es deliberado: "Latest Projects." */
.h-display {
  font-size: clamp(2.1rem, 4.4vw, 3.25rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--black);
}
.h-section {
  font-size: clamp(2.1rem, 3.7vw, 2.65rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.03em;
  color: var(--black);
}
.h-sub {
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.h-eyebrow {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
/* A quieter section title — clearly smaller than the page's .h-display so it
   reads as a subheading (used for Photography. / Videography. on the gallery). */
.h-subsection {
  font-size: clamp(1.4rem, 2.3vw, 1.8rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--black);
}

.lede  { font-size: 1.13rem; font-weight: 400; line-height: 1.5; color: var(--gray); }
.body  { font-size: 1rem;    font-weight: 400; line-height: 1.5; color: var(--gray); }
.meta  { font-size: .88rem;  color: var(--light-gray); }

/* Nicer line-breaking site-wide: balance headings, and avoid a single word
   dangling on the last line (orphans) in body copy. Affects wrapping only —
   never font sizes — so the desktop layout keeps its measurements. */
.h-display, .h-section, .h-subsection, .h-sub, .hero__hi, .hero__kicker,
.flip-cover__title, .flip-cover__sub { text-wrap: balance; }
.lede, .body, p, .card__desc, .proj-loc { text-wrap: pretty; }

/* Enlaces: color y subrayado animan a la vez, 0.4s. */
.link {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease),
              text-decoration-color var(--dur) var(--ease),
              text-decoration-thickness var(--dur) var(--ease),
              text-underline-offset var(--dur) var(--ease);
}
.link:hover {
  color: var(--black);
  text-decoration-color: currentColor;
  text-underline-offset: 5px;
}

/* Botón pastilla */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--pill);
  background: var(--black);
  color: var(--white);
  font-size: .94rem;
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.pill:hover { background: var(--dark-gray); transform: translateY(-2px); }
.pill--ghost {
  background: transparent;
  color: var(--black);
  border: 1px solid var(--border);
}
.pill--ghost:hover { background: var(--off-white); border-color: var(--light-gray); }

/* Aparición al hacer scroll (stagger vía --d) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   NAVEGACIÓN
   Dos elementos flotando en 80px de blanco. El vacío es el diseño.
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: 80px;
  z-index: 60;
  display: flex;
  align-items: center;
  pointer-events: none;
  mix-blend-mode: difference;
}
.nav__inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.nav__logo, .nav__toggle { pointer-events: auto; }

.nav__logo { margin-left: 0; }   /* aligned with the content column (not hanging off the edge) */
.nav__logo-txt {
  display: inline-block;
  font-family: var(--script);
  font-size: 30px;            /* smaller than the old 44px mark */
  line-height: 1;
  color: #fff;                /* white + the nav's mix-blend-mode:difference => black on white, white over dark photos */
  transition: opacity var(--dur) var(--ease);
}
@media (max-width: 809px) { .nav__logo-txt { font-size: 26px; } }
.nav__logo:hover .nav__logo-txt { opacity: .6; }

/* "+" que gira a "×" al abrir */
.nav__toggle {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  position: relative;
}
.nav__toggle span {
  position: absolute;
  width: 22px; height: 2px;
  background: var(--white);   /* difference -> se ve negro sobre fondo claro */
  border-radius: 50px;
  transition: transform .45s var(--ease);
}
.nav__toggle span:nth-child(2) { transform: rotate(90deg); }
body.menu-open .nav__toggle span:nth-child(1) { transform: rotate(45deg); }
body.menu-open .nav__toggle span:nth-child(2) { transform: rotate(-45deg); }

/* ---------- Menú a pantalla completa ---------- */
.menu {
  position: fixed;
  /* Top panel — drops down from the top and covers roughly the upper half.
     Sized to comfortably hold 7 nav items + the footer row. */
  inset: 0 0 auto 0;
  height: min(74vh, 720px);
  z-index: 50;
  /* Frosted panel: more transparent so more of the blurred page shows through */
  background: rgba(250, 250, 250, .38);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .28);
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  /* Reveal by unmasking downward (clip-path) instead of moving the panel — a moving
     element breaks up backdrop-filter blur, causing unblurred streaks. Clipping keeps
     the panel stationary so the blur computes cleanly. */
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
  transition: clip-path .55s var(--ease), opacity .4s var(--ease), visibility .55s;
}
body.menu-open .menu { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); }
body.menu-open { overflow: hidden; }

.menu__list { list-style: none; }
.menu__item { overflow: hidden; }
.menu__link {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 5px 0;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.18;
  transform: translateY(110%);
  transition: transform .6s var(--ease), color var(--dur) var(--ease);
  transition-delay: var(--d, 0s);
}
body.menu-open .menu__link { transform: none; }
.menu__link:hover { color: var(--gray); }
.menu__num {
  font-family: var(--mono);
  font-size: .88rem;
  color: var(--light-gray);
  letter-spacing: 0;
  flex: none;
}
.menu__foot {
  margin-top: clamp(28px, 5vh, 64px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  opacity: 0;
  transition: opacity .5s var(--ease) .35s;
}
body.menu-open .menu__foot { opacity: 1; }
.menu__socials { display: flex; gap: 20px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding-top: 80px;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* Reloj vertical girado 90° en el margen izquierdo */
.hero__clock, .hero__socials {
  position: absolute;
  top: 50%;
  font-family: var(--mono);
  font-size: .81rem;
  color: var(--light-gray);
  letter-spacing: .04em;
  white-space: nowrap;
  z-index: 2;
}
/* Clock pinned vertically to the left edge of the screen, always visible.
   mix-blend-mode keeps it readable over both white space and photos. */
.hero__clock {
  position: fixed;
  left: 14px;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  margin: 0;
  z-index: 40;
  color: #c2c8d2;
  mix-blend-mode: difference;
}
/* IG / IN sit horizontally just above the arch strip, right edge */
.hero__socials {
  right: var(--pad);
  top: auto;
  bottom: calc(clamp(380px, 42vw, 640px) + 24px);
  transform: none;
  display: flex;
  gap: 16px;
}
.hero__socials a { display: inline-flex; align-items: center; gap: 5px; transition: color var(--dur) var(--ease); }
.hero__socials a:hover { color: var(--black); }
.social-ic { width: 28px; height: 28px; }
@media (max-width: 809px) { .hero__clock, .hero__socials { display: none; } }

.hero__text {
  text-align: center;
  padding: var(--sect-md) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
/* El lettering original, vectorizado desde el PNG de Framer */
/* "Hi! My name is" (kept as text) + Savannah's real handwritten signature */
.hero__hi {
  font-size: clamp(1.15rem, 2.6vw, 1.75rem);
  font-weight: 400;
  color: var(--black);
  letter-spacing: -.01em;
}
/* Savannah's name in a flowing script font */
.hero__name {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(3.6rem, 12vw, 8.5rem);
  line-height: 1;
  color: var(--black);
  margin: 0 auto;
  letter-spacing: 0;
}
.hero__kicker { font-size: 1.06rem; font-weight: 400; color: var(--black); letter-spacing: -.01em; }

/* ---------- Hero arch strip: continuous auto-scroll, photos + videos ---------- */
.hero__arches { overflow: hidden; width: 100%; margin-top: var(--sect-sm); }
.harch {
  flex: 0 0 auto;
  width: clamp(240px, 24vw, 400px);   /* wider = about 4 arches visible at once */
  height: clamp(380px, 42vw, 640px);
  margin: 0 8px;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background: var(--off-white);
}
.harch img, .harch video {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ---------- Vídeos: los originales son reels verticales 1080x1920 ---------- */
.videos {
  display: flex;
  justify-content: center;
  gap: 24px;
}
@media (max-width: 809px) { .videos { gap: 12px; } }
.videos figure { flex: 0 1 380px; margin: 0; }
.videos video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--off-white);
}
.videos figcaption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--light-gray);
}

/* ============================================================
   MARQUESINAS (logos y métricas)
   ============================================================ */
.marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--speed, 40s) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.marquee__group { display: flex; align-items: center; flex: none; }

/* Los originales traen cada uno su propio margen blanco y proporciones muy
   dispares (de 9:1 a 1:1). Se recortan al contenido y se igualan por ÁREA
   óptica, no por altura: si no, un logotipo alargado aplasta a uno cuadrado. */
.logo-item {
  flex: none;
  height: 80px;
  padding: 0 clamp(24px, 3.4vw, 56px);
  display: grid;
  place-items: center;
}
.logo-item img {
  height: calc(var(--h, 30px) * 1.22);   /* slightly bigger logos */
  width: auto;
  object-fit: contain;
  opacity: .9;                 /* full original colour, per brand files */
  transition: opacity var(--dur) var(--ease);
}
.logo-item:hover img { opacity: 1; }
@media (max-width: 809px) {
  .logo-item { height: 58px; }
  .logo-item img { height: calc(var(--h, 30px) * .9); }
}

/* Métricas */
.stat {
  flex: none;
  padding: 0 clamp(28px, 4vw, 72px);
  display: flex;
  align-items: baseline;
  gap: 14px;
  white-space: nowrap;
}
.stat__num {
  font-size: clamp(2.4rem, 4vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -.07em;
  line-height: 1;
}
.stat__label { font-size: .94rem; color: var(--gray); letter-spacing: -.01em; }
.stat__sep { color: var(--border); font-size: 2rem; }

/* ---------- Intro line + "watch on Instagram" image (under Services) ---------- */
.intro__lead {
  font-size: clamp(1.6rem, 3.6vw, 2.7rem);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.22;
  color: var(--black);
  max-width: 26ch;
}
.intro__lead--em {
  margin-top: 12px;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 700;
  font-style: normal;
}
.intro__media {
  display: block;
  position: relative;
  margin: var(--sect-sm) auto 0;
  max-width: 520px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--off-white);
}
.intro__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.intro__media:hover img { transform: scale(1.04); }
.intro__play {
  position: absolute;
  left: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: var(--pill);
  background: rgba(255,255,255,.92);
  color: var(--black);
  font-size: .85rem; font-weight: 500;
  transition: background var(--dur) var(--ease);
}
.intro__media:hover .intro__play { background: #fff; }

/* ---------- Stats: count-up numbers, evenly spaced, blur-in on scroll ---------- */
.stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px 24px; }
@media (max-width: 1199px) { .stats-row { grid-template-columns: repeat(3, 1fr); gap: 40px 24px; } }
@media (max-width: 809px)  { .stats-row { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; } }
.statc__num { display: block; font-size: clamp(2rem, 3.1vw, 2.9rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.statc__plus { color: var(--green); font-weight: 400; }
.statc__label { display: block; margin-top: 10px; font-size: .88rem; color: var(--gray); line-height: 1.4; }

/* Blur-in reveal: element starts soft-blurred and sharpens as it enters view */
.reveal-blur { opacity: 0; filter: blur(12px); transition: opacity .9s var(--ease), filter .9s var(--ease); transition-delay: var(--d, 0s); }
.reveal-blur.is-in { opacity: 1; filter: blur(0); }

/* ============================================================
   GALERÍA HORIZONTAL
   ============================================================ */
.gallery {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 0 var(--pad);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery__item {
  flex: 0 0 auto;
  height: 520px;
  border-radius: var(--radius);
  overflow: hidden;
  scroll-snap-align: center;
  background: var(--off-white);
}
.gallery__item img { height: 100%; width: auto; object-fit: cover; transition: transform 1.2s var(--ease); }
.gallery__item:hover img { transform: scale(1.04); }
@media (max-width: 1199px) { .gallery__item { height: 500px; } }
@media (max-width: 809px)  { .gallery__item { height: 386px; gap: 16px; } }

/* ============================================================
   ÍNDICE DE PROYECTOS — nombre a la izquierda, año a la derecha
   ============================================================ */
.index { border-top: 1px solid var(--border); }
.index__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: padding-left .5s var(--ease);
}
.index__row:hover { padding-left: 16px; }
.index__row::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--off-white);
  z-index: -1;
  transition: width .5s var(--ease);
}
.index__row:hover::after { width: 100%; }
.index__name {
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 400;
  letter-spacing: -.02em;
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.index__num { font-family: var(--mono); font-size: .81rem; color: var(--light-gray); flex: none; }
.index__year { font-family: var(--mono); font-size: .88rem; color: var(--light-gray); flex: none; }
.index__arrow {
  flex: none;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.index__row:hover .index__arrow { opacity: 1; transform: none; }
@media (max-width: 809px) {
  .index__num { display: none; }
  .index__arrow { display: none; }
}

/* ============================================================
   CARRUSEL DE SERVICIOS — el único color del sitio
   ============================================================ */
.carousel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: var(--sect-sm);
}
.carousel-nav { display: flex; gap: 10px; }
.carousel-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: grid; place-items: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.carousel-btn:hover { background: var(--black); border-color: var(--black); color: var(--white); }
.carousel-btn:disabled { opacity: .3; pointer-events: none; }
.carousel-btn svg { width: 18px; height: 18px; }

.carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.carousel::-webkit-scrollbar { display: none; }

.card {
  flex: 0 0 auto;
  width: clamp(280px, 27vw, 400px);
  height: 600px;
  border-radius: var(--radius);
  padding: 40px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transition: transform .6s var(--ease);
}
.card:hover { transform: translateY(-8px); }
@media (max-width: 809px) { .card { height: 495px; padding: 24px; width: 80vw; } }

.card__num { font-family: var(--mono); font-size: .81rem; color: var(--dark-gray); }
.card__title {
  margin-top: 14px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.card__art {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 24px 0;
  min-height: 0;
}
.card__art img {
  max-height: 100%;
  width: auto;
  mix-blend-mode: multiply;      /* el halftone se funde con el pastel */
  transition: transform .8s var(--ease);
}
.card:hover .card__art img { transform: scale(1.06) rotate(-2deg); }
.card__desc { font-size: .94rem; line-height: 1.5; color: var(--dark-gray); }

/* ============================================================
   FAQ (acordeón)
   ============================================================ */
/* Two columns: "FAQ." heading on the left, the accordion on the right */
.faq-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; align-items: start; }
@media (max-width: 809px) { .faq-layout { grid-template-columns: 1fr; gap: 20px; } }

.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  text-align: left;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.01em;
  transition: color var(--dur) var(--ease);
}
.faq__q:hover { color: var(--gray); }
.faq__chev {
  flex: none;
  width: 18px; height: 18px;
  transition: transform .45s var(--ease);
  color: var(--light-gray);
}
.faq__item.is-open .faq__chev { transform: rotate(180deg); }
.faq__a {
  overflow: hidden;
  height: 0;
  transition: height .45s var(--ease);
}
.faq__a p { padding: 0 0 26px; max-width: 70ch; font-size: .875rem; line-height: 1.55; color: var(--gray); }

/* ============================================================
   BLOG
   ============================================================ */
.posts { display: grid; grid-template-columns: repeat(4, minmax(50px, 1fr)); gap: 20px; }
@media (max-width: 809px) { .posts { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

.post__media {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--off-white);
  aspect-ratio: 1 / 1;
}
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.post:hover .post__media img { transform: scale(1.04); }
.post__date { margin-top: 18px; font-family: var(--mono); font-size: .75rem; color: var(--light-gray); }
.post__title {
  margin-top: 8px;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.02em;
  transition: color var(--dur) var(--ease);
}
.post:hover .post__title { color: var(--gray); }

/* Artículo */
.article__body { max-width: 810px; margin: 0 auto; }
.article__body > * + * { margin-top: 24px; }
.article__body p { font-size: 1.13rem; line-height: 1.6; color: var(--gray); }
.article__body h2 {
  margin-top: 56px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--black);
}
.article__body h3 { margin-top: 40px; font-size: 1.25rem; font-weight: 600; color: var(--black); }
.article__body ul { padding-left: 22px; }
.article__body li { font-size: 1.13rem; line-height: 1.6; color: var(--gray); margin-top: 10px; }
.article__body img { border-radius: var(--radius); margin: 48px 0; width: 100%; }
.article__body strong { color: var(--black); font-weight: 600; }
.article__body blockquote {
  border-left: 2px solid var(--black);
  padding-left: 24px;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--black);
  letter-spacing: -.01em;
}

.prevnext {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--border);
  padding-top: 32px;
  margin-top: var(--sect-md);
}
.prevnext span { display: block; font-family: var(--mono); font-size: .75rem; color: var(--light-gray); margin-bottom: 6px; }
.prevnext a { font-size: 1rem; font-weight: 500; max-width: 34ch; transition: color var(--dur) var(--ease); }
.prevnext a:hover { color: var(--gray); }
.prevnext > :last-child:not(:first-child) { text-align: right; margin-left: auto; }

/* ============================================================
   PROYECTOS — rejilla y ficha
   ============================================================ */
.grid-projects { display: grid; grid-template-columns: repeat(3, minmax(50px, 1fr)); gap: 24px; }
@media (max-width: 1199px) { .grid-projects { grid-template-columns: repeat(2, minmax(50px, 1fr)); } }
@media (max-width: 809px)  { .grid-projects { grid-template-columns: 1fr; gap: 16px; } }

.pcard__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--off-white);
}
/* `> img` = the cover photo only, NOT the logo image nested inside .pcard__logo */
.pcard__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .5s var(--ease); }
.pcard:hover .pcard__media > img { transform: scale(1.05); filter: blur(7px) brightness(.9); }

/* Project logo that fades in over the blurred cover on hover */
.pcard__logo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.pcard__logo img {
  max-width: 42%;
  max-height: 30%;
  width: auto;
  object-fit: contain;
  /* Transparent background; a soft white halo keeps the sharp logo readable
     over the blurred photo without a solid box. */
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, .95)) drop-shadow(0 0 5px rgba(255, 255, 255, .9));
  transform: translateY(8px);
  transition: transform var(--dur) var(--ease);
}
.pcard:hover .pcard__logo { opacity: 1; }
.pcard:hover .pcard__logo img { transform: none; }

/* Text shown as a logo when a project has no brand mark */
.pcard__logotext {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(.95rem, 1.5vw, 1.2rem);
  color: var(--black);
  text-align: center;
  padding: 0 14px;
  transform: translateY(8px);
  transition: transform var(--dur) var(--ease);
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, .95)) drop-shadow(0 0 5px rgba(255, 255, 255, .9));
}
.pcard:hover .pcard__logotext { transform: none; }

/* Works page: cards start black & white; colour returns (blurred) on hover */
.grid-projects--bw .pcard__media > img { filter: grayscale(1); }
.grid-projects--bw .pcard:hover .pcard__media > img { filter: blur(7px) brightness(.9); }

/* ============================================================
   WORKS FLIPBOOK — realistic editorial archive book (page-flip lib)
   ============================================================ */
.flipbook-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px 0 44px;
}
/* Before the flip book is built by JS, keep the raw stacked pages from sprawling
   down the page while images load. Once built, `.is-ready` removes the clip so the
   page-turn animation isn't cut off at the edges. */
.flipbook-wrap:not(.is-ready) { max-height: 88vh; overflow: hidden; }
/* Faint stacked-paper layers behind the book, for depth */
.flipbook-wrap::before,
.flipbook-wrap::after {
  content: "";
  position: absolute;
  top: 42px; height: min(660px, 78vh);
  width: min(500px, 82vw);
  left: 50%;
  border-radius: 4px;
  background: #efe7d7;
  box-shadow: 0 34px 55px -34px rgba(0, 0, 0, .5);
  z-index: 0;
}
.flipbook-wrap::before { transform: translateX(-50%) rotate(-1.6deg); }
.flipbook-wrap::after  { transform: translateX(-52%) rotate(1.1deg); }
#flipbook { position: relative; z-index: 2; touch-action: pan-y; }
#flipbook-m { position: relative; z-index: 2; touch-action: pan-y; }
.flipbook-wrap--m { display: none; }   /* phone book hidden on desktop */
.flipbook-nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.flipbook-hint { margin: 0; color: var(--light-gray); }
.flipbook-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--black);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.flipbook-arrow:hover { background: var(--black); color: #fff; border-color: var(--black); }
.flipbook-arrow svg { width: 18px; height: 18px; }

/* Inside pages: warm paper with a faint grain */
.flip-page {
  overflow: hidden;
  background-color: #f6f1e8;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(80, 60, 20, .04)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 70px rgba(120, 100, 60, .09);
}
.flip-page__inner {
  position: relative;
  height: 100%;
  padding: 36px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.flip-page__num { position: absolute; top: 15px; right: 22px; font-size: .66rem; color: var(--light-gray); letter-spacing: .05em; }

/* Project entry inside the flipbook: 1:1 photo + name + facts sidebar */
.flip-page__inner { justify-content: center; gap: 30px; }
.flip-proj { display: flex; gap: 16px; align-items: center; }
.flip-proj__media {
  position: relative;
  width: 46%; flex: none;
  aspect-ratio: 1 / 1;
}
.flip-proj__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.flip-proj:hover .flip-proj__media img { transform: scale(1.04); }
.flip-proj__info { flex: 1; min-width: 0; }
.flip-proj__name { font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 4px; color: var(--black); }
.flip-proj__loc { font-size: .82rem; color: var(--gray); letter-spacing: -.01em; }
.flip-proj .facts { margin-top: 22px; border-top: 1px solid rgba(60, 51, 39, .22); }
.flip-proj .facts__row { padding: 8px 0; border-bottom: 1px solid rgba(60, 51, 39, .22); gap: 10px; }
.flip-proj .facts__k { font-size: .64rem; }
.flip-proj .facts__v { font-size: .78rem; line-height: 1.35; }
.flip-page .pcard { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; width: 82%; margin: 0 auto; }
.flip-page .pcard__media {
  aspect-ratio: auto; flex: 1; min-height: 0;
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .4);
}
.flip-page .pcard__media > img { filter: none; }   /* full colour */
.flip-page .pcard:hover .pcard__media > img { filter: blur(6px) brightness(.92); }
.flip-page .pcard__foot { padding-top: 12px; }

/* Metal paper clip on each photo */
.clip { position: absolute; top: -13px; left: 24px; width: 19px; color: #a9afb8; z-index: 5; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .28)); }
.clip svg { width: 100%; height: auto; display: block; }

/* Cover & back cover — light pastel-beige with a grainy finish */
.flip-page--cover {
  background-color: #f0e8d6;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(90, 74, 45, .05)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.11'/%3E%3C/svg%3E");
  color: #3c3327;
  box-shadow: inset 0 0 0 1px rgba(60, 51, 39, .1), inset 0 0 90px rgba(90, 74, 45, .1);
}
.flip-cover { height: 100%; padding: 50px 38px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.flip-cover--back { align-items: flex-start; }
.flip-cover__eyebrow { color: rgba(60, 51, 39, .55); letter-spacing: .16em; }
.flip-cover__title { font-size: clamp(2rem, 4.4vw, 2.9rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.06; }
.flip-cover__title span { display: block; font-style: italic; color: rgba(60, 51, 39, .55); }
.flip-cover__sub { font-size: .95rem; color: rgba(60, 51, 39, .7); line-height: 1.5; max-width: 32ch; margin-top: 6px; }
.flip-cover__script { font-family: "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive; font-size: clamp(2.4rem, 6.5vw, 3.6rem); line-height: 1; }
.flip-cover__by { color: rgba(60, 51, 39, .62); letter-spacing: .06em; }
.flip-cover .pill { background: #3c3327; color: #f0e7d5; }

/* ============================================================
   WORKS BINDER — pages flip up over a ring spine as you scroll
   ============================================================ */
.binder-wrap { position: relative; height: 300vh; }   /* scroll room for 3 pages */
.binder-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  perspective: 2400px;
  overflow: hidden;
}
.binder {
  position: relative;
  width: min(880px, 94vw);
  aspect-ratio: 1 / 1.2;
  transform-style: preserve-3d;
}
/* Metal ring spine poking above the top edge */
.binder__rings {
  position: absolute;
  top: -15px; left: 5%; right: 5%;
  height: 30px;
  display: flex;
  justify-content: space-between;
  z-index: 60;
  pointer-events: none;
}
.binder__rings i {
  width: 20px; height: 30px;
  border-radius: 10px;
  background: linear-gradient(180deg, #eef1f5 0%, #b9c0c9 42%, #7d8791 60%, #d6dbe1 100%);
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .35), inset 0 -2px 3px rgba(0, 0, 0, .25);
}
.bpage {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #f6f4f0, #ece9e2);
  border-radius: 4px 4px 10px 10px;
  padding: 46px 30px 28px;
  box-shadow: 0 42px 70px -32px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .6);
  transform-origin: top center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.bpage__num {
  position: absolute; top: 16px; right: 24px;
  font-family: var(--mono); font-size: .72rem; color: var(--light-gray); letter-spacing: .04em;
}
.bpage__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  height: 100%;
}
.bpage .pcard { display: flex; flex-direction: column; min-height: 0; }
.bpage .pcard__media { aspect-ratio: auto; flex: 1; min-height: 0; }
.bpage .pcard__media > img { filter: grayscale(1); }
.bpage .pcard:hover .pcard__media > img { filter: blur(6px) brightness(.9); }
.bpage .pcard__foot { padding-top: 10px; }
.binder__hint {
  position: absolute; left: 0; right: 0; bottom: 6vh;
  text-align: center; color: var(--light-gray);
}

@media (max-width: 809px) {
  .binder-wrap { height: auto; }
  .binder-stage { position: static; height: auto; perspective: none; padding: 10px 0 30px; overflow: visible; }
  .binder { aspect-ratio: auto; }
  .bpage {
    position: static; inset: auto; transform: none !important;
    margin-bottom: 22px; padding: 30px 18px 22px;
  }
  .bpage__grid { grid-template-rows: auto; }
  .bpage .pcard__media { aspect-ratio: 3 / 4; }
  .binder__rings, .binder__hint { display: none; }
}

/* Homepage "Latest Projects": two columns with landscape covers */
.home-projects { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.home-projects .pcard__media { aspect-ratio: 4 / 5; background: var(--off-white); }
@media (max-width: 809px) { .home-projects { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
.pcard__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
}
.pcard__name { font-size: 1.13rem; font-weight: 500; letter-spacing: -.02em; transition: color var(--dur) var(--ease); }
.pcard:hover .pcard__name { color: var(--gray); }
.pcard__year { font-family: var(--mono); font-size: .81rem; color: var(--light-gray); flex: none; }

/* Ficha de proyecto: contenido + barra lateral de datos */
.project-head { display: grid; grid-template-columns: 1fr 340px; gap: 64px; align-items: start; }
@media (max-width: 1199px) { .project-head { grid-template-columns: 1fr; gap: 40px; } }

.facts { border-top: 1px solid var(--border); }
.facts__row { display: flex; gap: 16px; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--border); }
.facts__k { font-family: var(--mono); font-size: .75rem; color: var(--light-gray); text-transform: uppercase; flex: none; }
.facts__v { font-size: .94rem; text-align: right; color: var(--black); }

.work-list { list-style: none; counter-reset: w; }
.work-list li {
  counter-increment: w;
  display: flex;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
  color: var(--gray);
  line-height: 1.5;
}
.work-list li::before {
  content: "( " counter(w, decimal-leading-zero) " )";
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--light-gray);
  flex: none;
  padding-top: 3px;
}

.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px; }
.result { border-top: 1px solid var(--black); padding-top: 16px; }
.result__num { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.result__label { margin-top: 8px; font-size: .88rem; color: var(--gray); line-height: 1.4; }

/* ============================================================
   PHONE STATS — a phone lying flat; notifications pop up in 3D
   ============================================================ */
.phone-stats { display: flex; justify-content: center; padding-top: 20px; }
.phone-stats__scene {
  position: relative;
  width: min(490px, 94vw);
  height: max(540px, calc(290px + var(--pn-count, 6) * 60px));
  margin: 0 auto;
  perspective: 1100px;
  perspective-origin: 50% 30%;
}
/* Soft contact shadow on the imaginary ground */
.phone-stats__shadow {
  position: absolute;
  left: 50%; bottom: 48px;
  width: 254px; height: 58px;
  margin-left: -127px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .24), transparent 68%);
  filter: blur(6px);
}
/* The phone, laid flat and receding into the distance */
.phone {
  position: absolute;
  left: 50%; bottom: 48px;
  width: 238px; height: 476px;
  margin-left: -119px;
  border-radius: 36px;
  background: linear-gradient(165deg, #2a2a33 0%, #16161b 60%, #202027 100%);
  border: 9px solid #0b0b0e;
  box-shadow: 0 26px 34px -18px rgba(0, 0, 0, .5);
  transform: rotateX(68deg);
  transform-origin: 50% 100%;
}
.phone__cam {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: #050507; box-shadow: inset 0 0 0 2px #1b1b22;
}
.phone__bar {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .4);
}
/* Stack of notifications standing up above the phone */
.phone-stats__stack {
  position: absolute;
  left: 50%; bottom: 166px;
  width: min(404px, 90vw);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;   /* first notification lowest, nearest the phone */
  align-items: center;
  gap: 12px;
  transform-style: preserve-3d;
  z-index: 2;
}
.pn-card {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 38px -16px rgba(0, 0, 0, .34);
  opacity: 0;
  transform-origin: 50% 100%;
  transform: rotateX(70deg) translateY(52px) scale(.72);
}
/* Each card rises from lying on the phone to standing upright, in sequence */
.phone-stats.is-in .pn-card {
  animation: pn-rise .8s var(--ease) forwards;
  animation-delay: calc(var(--i) * .42s);
}
@keyframes pn-rise {
  0%   { opacity: 0; transform: rotateX(70deg) translateY(54px) scale(.72); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: rotateX(5deg) translateY(0) scale(1); }
}
.pn-card__icon { width: 42px; height: 42px; border-radius: 11px; flex: none; display: grid; place-items: center; color: #fff; }
.pn-card__icon svg { width: 24px; height: 24px; }
.pn-card__icon--instagram { background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); }
.pn-card__icon--tiktok { background: #0f0f0f; }
.pn-card__icon--google { background: #fff; border: 1px solid var(--border); }
.pn-card__icon--youtube { background: #fff; border: 1px solid var(--border); }
.pn-card__icon--facebook { background: #fff; border: 1px solid var(--border); }

/* Performance section: written stats on the left, animated phone on the right */
.perf-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 809px) { .perf-layout { grid-template-columns: 1fr; gap: 40px; } }
.perf-stats > div + div { margin-top: 40px; }
.perf-phone { display: flex; justify-content: center; }
.pn-card__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pn-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pn-card__app { font-size: .96rem; font-weight: 600; color: var(--black); }
.pn-card__time { font-family: var(--mono); font-size: .68rem; color: var(--light-gray); text-transform: uppercase; }
.pn-card__msg { font-size: .92rem; color: var(--dark-gray); line-height: 1.35; }
.pn-card__msg strong { color: var(--black); font-weight: 700; }
@media (max-width: 809px) {
  .phone-stats__scene { height: 540px; }
  .phone { width: 202px; height: 404px; margin-left: -101px; }
  .phone-stats__stack { bottom: 146px; }
}

.figure { margin: 0; }
.figure img { width: 100%; border-radius: var(--radius); background: var(--off-white); }
.figure figcaption { margin-top: 12px; font-family: var(--mono); font-size: .75rem; color: var(--light-gray); }

/* Project hero gallery — portrait 3:4 images across the top of a project page */
.pgrid { display: grid; grid-template-columns: repeat(var(--pg-cols, 3), 1fr); gap: clamp(10px, 1.4vw, 20px); }
.pgrid__item { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); background: var(--off-white); }
.pgrid__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.pgrid__item:hover img { transform: scale(1.03); }
/* "contain" variant: show the whole image (no cropped edges), e.g. screenshots/grids */
.pgrid--contain .pgrid__item { background: var(--off-white); }
.pgrid--contain .pgrid__item img { object-fit: contain; }
@media (max-width: 900px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }

/* Project detail: keep the main hero image modest, not enormous */
[data-page="projects"] .wrap > figure.figure { max-width: 680px; margin-inline: auto; }

/* Project detail: bottom gallery as a continuous auto-scrolling strip */
.pgallery {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.pgallery__item {
  flex: 0 0 auto;
  height: 240px;
  margin: 0 10px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--off-white);
}
.pgallery__item img { height: 100%; width: auto; object-fit: cover; display: block; }
@media (max-width: 809px) { .pgallery__item { height: 180px; } }

/* Instagram feeds shown pinned to a board */
.pinboard {
  display: flex; justify-content: center; align-items: flex-start;
  flex-wrap: wrap; gap: 48px;
  padding: 56px 40px;
  background-color: #ece5d8;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(120, 100, 60, .05)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.05'/%3E%3C/svg%3E");
  border-radius: var(--radius);
}
.pinboard__item {
  position: relative;
  margin: 0;
  background: #fff;
  padding: 12px 12px 30px;
  box-shadow: 0 24px 44px -22px rgba(0, 0, 0, .45);
  width: min(300px, 40%);
  transform: rotate(-1.8deg);
}
.pinboard__item:nth-child(even) { transform: rotate(1.8deg); margin-top: 26px; }
.pinboard__item img { width: 100%; height: auto; display: block; }
.pinboard__pin {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fbfbfc, #c2c7cf 55%, #8f96a0);
  box-shadow: 0 5px 7px -1px rgba(0, 0, 0, .4);
  z-index: 2;
}
.pinboard__pin::after { content: ""; position: absolute; inset: 0; margin: auto; width: 5px; height: 5px; border-radius: 50%; background: rgba(0, 0, 0, .3); }
@media (max-width: 809px) {
  .pinboard { padding: 32px 16px; gap: 30px; }
  .pinboard__item { width: 78%; }
  .pinboard__item:nth-child(even) { margin-top: 0; }
}

.media-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 809px) { .media-duo { grid-template-columns: 1fr; gap: 16px; } }

/* ============================================================
   ABOUT
   ============================================================ */
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
@media (max-width: 1199px) { .about-stats { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
@media (max-width: 809px)  { .about-stats { grid-template-columns: 1fr; gap: 32px; } }
.about-stat__num { font-size: clamp(2.4rem, 4.4vw, 3.75rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.about-stat__label { margin-top: 10px; font-size: .88rem; color: var(--gray); line-height: 1.4; max-width: 24ch; }

/* Marca de agua de logo de cliente al fondo (MAX BEACH / BE1B) */
.watermark { position: relative; }
.watermark::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, 92%);
  aspect-ratio: 3 / 1;
  background-image: var(--wm);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}
.watermark > * { position: relative; z-index: 1; }

.skills { border-top: 1px solid var(--border); }
.skill {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 809px) { .skill { grid-template-columns: 1fr; gap: 4px; } }
.skill__name { font-size: 1.06rem; font-weight: 500; letter-spacing: -.01em; }
.skill__desc { font-size: .94rem; color: var(--gray); }

/* Click-to-open creative toolbox: shaking case reveals the skills list */
.toolbox { position: relative; }
.toolbox__trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 8px 0;
  background: none;
  border: 0;
  cursor: pointer;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.toolbox__img {
  width: clamp(300px, 42vw, 500px);
  height: auto;
  filter: drop-shadow(0 24px 44px rgba(0, 0, 0, .16));
  animation: toolbox-wiggle 5s var(--ease) infinite;
  transform-origin: 50% 88%;
}
.toolbox__hint {
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--light-gray);
}
.toolbox__trigger:hover .toolbox__hint { color: var(--black); }
/* a tiny wobble every few seconds to invite the click */
@keyframes toolbox-wiggle {
  0%, 90%, 100% { transform: rotate(0); }
  93% { transform: rotate(-1deg); }
  96% { transform: rotate(1deg); }
  98% { transform: rotate(-0.5deg); }
}
/* once opened: fade the case out and animate the list in */
.toolbox.is-open .toolbox__trigger {
  opacity: 0;
  transform: scale(.92) translateY(-8px);
  pointer-events: none;
  position: absolute;
  inset: 0 0 auto 0;
}
.skills[hidden] { display: none; }
.toolbox.is-open .skills { animation: toolbox-reveal .6s var(--ease) both; }
@keyframes toolbox-reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toolbox__img { animation: none; } }

/* ============================================================
   FORMULARIO — sólo línea inferior, sin caja
   ============================================================ */
.form { display: flex; flex-direction: column; gap: 32px; }
.field { position: relative; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--light-gray);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.field input, .field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--light-gray);
  background: transparent;
  padding: 10px 0;
  font-size: 1.06rem;
  color: var(--black);
  border-radius: 0;
  transition: border-color var(--dur) var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--gray); opacity: 1; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--black); border-bottom-width: 2px; }

.form__note { font-size: .88rem; color: var(--gray); }
.form__note[data-state="ok"]  { color: var(--black); }
.form__note[data-state="err"] { color: #b4231f; }

/* ============================================================
   PIE — presente en todas las páginas
   ============================================================ */
.footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
  padding: var(--sect-lg) 0 40px;
}
.footer > * { position: relative; }

/* Pink handset that hangs from the sentence on the left */
.footer__phone {
  display: block;
  width: clamp(300px, 40vw, 480px);
  height: auto;
  margin-top: -10px;
  margin-left: -28px;
  transform-origin: 50% 8%;
  animation: phone-sway 3.5s ease-in-out infinite;
}
@keyframes phone-sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}
@media (prefers-reduced-motion: reduce) { .footer__phone { animation: none; } }

.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: var(--sect-sm);
}
.footer__socials { display: flex; gap: 16px; align-items: center; }
.footer__socials .social-ic-link { display: inline-flex; color: var(--gray); transition: color var(--dur) var(--ease); }
.footer__socials .social-ic-link:hover { color: var(--black); }
.footer__socials .social-ic { width: 22px; height: 22px; }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 1199px) { .footer__grid { grid-template-columns: 1fr; gap: 48px; } }
.footer__muted { color: var(--gray); }
.footer__email { display: inline-block; margin-top: 22px; }
.footer__reach {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  letter-spacing: -.02em;
  margin-bottom: 26px;
}

.footer__bottom {
  margin-top: var(--sect-md);
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__nav { display: flex; gap: 28px; font-size: .88rem; flex-wrap: wrap; }

/* ============================================================
   Reel de Instagram
   ============================================================ */
.reel {
  position: relative;
  width: min(360px, 100%);
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  overflow: hidden;
  background: var(--black);
  border: 8px solid var(--black);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.4);
}
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.25);
  transition: opacity var(--dur) var(--ease);
}
.reel__play.is-hidden { opacity: 0; pointer-events: none; }
.reel__play span {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: grid; place-items: center;
  transition: transform var(--dur) var(--ease);
}
.reel__play:hover span { transform: scale(1.08); }

/* ---------- Cabecera interna de página ---------- */
.page-head { padding: calc(80px + var(--sect-md)) 0 var(--sect-sm); }
.page-head__crumb { font-family: var(--mono); font-size: .75rem; color: var(--light-gray); margin-bottom: 20px; }
/* Location shown under a project title */
.proj-loc { margin-top: 10px; font-size: 1.13rem; color: var(--gray); letter-spacing: -.01em; }

/* ---------- Aviso de copia offline ---------- */
.offline-note {
  background: var(--off-white);
  border-radius: var(--radius);
  padding: 20px 24px;
  font-size: .88rem;
  color: var(--gray);
  line-height: 1.5;
}
.offline-note strong { color: var(--black); }

/* ============================================================
   INTRO COVER — folder flat-lay that opens into the homepage
   ============================================================ */
html.intro-active { overflow: hidden; }
.intro-cover {
  position: fixed; inset: 0; z-index: 200;
  background: radial-gradient(120% 120% at 50% 30%, #fdfcf9, #f1eee6);
  display: grid; place-items: center;
  cursor: pointer;
  will-change: transform;
  transition: transform 1.05s cubic-bezier(.72, 0, .16, 1);
}
/* Open by sliding the whole cover down off-screen to reveal the page — the card
   lifts and scales a touch as the cover drops, for a cinematic "opening" feel. */
.intro-cover.is-opening { transform: translateY(101%); pointer-events: none; }
.intro-cover.is-opening .intro-art { transform: translateY(-26px) scale(1.08); transition: transform 1.05s var(--ease); }
.intro-art {
  position: relative;
  width: min(560px, 90vw);
  aspect-ratio: 2132 / 2166;
  /* soft shadow is baked into the PNG artwork — no runtime drop-shadow filter
     (that doubled up and rendered a hard edge during the animation) */
}
.intro-art img { display: block; }
.intro-art__base {
  position: absolute; left: 8%; top: 0; width: 77.2%; height: auto;
  animation: intro-rise .9s var(--ease) .1s both;
}
.intro-art__front {
  position: absolute; left: 0; top: 60%; width: 98.12%; height: auto;
  animation: intro-drop-in 1s var(--ease) .55s both;
}
@keyframes intro-rise { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes intro-drop-in { from { opacity: 0; transform: translateY(46px) rotate(-2deg); } to { opacity: 1; transform: none; } }
@media (max-width: 809px) { .intro-art { width: 92vw; } }

/* ============================================================
   WORK EXAMPLES — Google-style search card with typing bar
   ============================================================ */
.worksearch { max-width: 620px; margin: 0 auto; }
.worksearch__logo {
  text-align: center;
  font-size: clamp(2rem, 6vw, 2.7rem);
  font-weight: 500;
  letter-spacing: -.02em;
  margin-bottom: 24px;
}
.worksearch__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 52px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid #dfe1e5;
  border-radius: 26px;
  box-shadow: 0 1px 6px rgba(32, 33, 36, .1);
  transition: box-shadow var(--dur) var(--ease);
}
.worksearch:hover .worksearch__bar { box-shadow: 0 1px 12px rgba(32, 33, 36, .18); }
.worksearch__mag { width: 20px; height: 20px; flex: none; color: #9aa0a6; }
.worksearch__typed {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  font-size: 1.05rem; color: #202124;
  overflow: hidden; white-space: nowrap;
}
.worksearch__word { overflow: hidden; }
.worksearch__caret { width: 1px; height: 1.15em; background: #202124; margin-left: 1px; animation: ws-blink 1s steps(1) infinite; }
@keyframes ws-blink { 50% { opacity: 0; } }
.worksearch__mic { width: 20px; height: 20px; flex: none; }

.worksearch__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 8px 0;
  background: #fff;
  border: 1px solid #dfe1e5;
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(32, 33, 36, .12);
  overflow: hidden;
}
.worksearch__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  color: #202124;
  transition: background var(--dur) var(--ease);
}
.worksearch__item:hover { background: #f1f3f4; }
.worksearch__mag--sm { width: 17px; height: 17px; color: #9aa0a6; }
.worksearch__label { flex: 1; min-width: 0; font-size: 1rem; letter-spacing: -.01em; }
.worksearch__go { flex: none; font-size: .72rem; color: var(--light-gray); opacity: 0; transform: translateX(-4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.worksearch__item:hover .worksearch__go { opacity: 1; transform: none; }
@media (max-width: 560px) {
  .worksearch__label { font-size: .9rem; }
  .worksearch__go { display: none; }
}

/* ============================================================
   CAMERA SNAP — a vintage camera pops in from a random edge,
   flashes, and glides back out (site-wide, every 20–30s).
   Positioned/animated from JS (wireCameraSnap in ui.js).
   ============================================================ */
.camsnap {
  position: fixed;
  top: auto; left: auto; right: auto; bottom: auto;
  width: clamp(172px, 20vw, 292px);   /* image includes ~18% baked-shadow padding */
  z-index: 45;                 /* above content, below the open menu (50) */
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}
.camsnap__img {
  display: block;
  width: 100%;
  height: auto;                /* soft shadow is baked into the PNG — no runtime filter */
}
/* soft light-bloom over the camera's flash unit — a single gentle pulse, no strobe */
.camsnap__bloom {
  position: absolute;
  top: -20%; left: -20%; right: -20%; bottom: -20%;
  border-radius: 50%;
  background: radial-gradient(circle at 26% 24%, rgba(255,255,255,.95), rgba(255,255,255,.35) 28%, rgba(255,255,255,0) 62%);
  opacity: 0;
  pointer-events: none;
}
.camsnap.is-flash .camsnap__bloom { animation: cam-bloom .55s var(--ease) both; }
@keyframes cam-bloom {
  0%   { opacity: 0; transform: scale(.6); }
  22%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.45); }
}
/* respect reduced-motion: JS also skips scheduling, this is a belt-and-braces */
@media (prefers-reduced-motion: reduce) { .camsnap { display: none; } }

/* ============================================================
   CREATIVE DIRECTION — campaign cards, video block, impact band
   ============================================================ */

/* Grid of clickable campaign covers on the landing page (2 across; 3 across
   for the smaller "More campaigns" row). Drops to 1 column on phones. */
.cd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); }
.cd-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 809px) {
  .cd-grid { grid-template-columns: 1fr; gap: 28px; }
  .cd-grid--3 { grid-template-columns: 1fr; }
}

.cdcard { display: block; color: inherit; text-decoration: none; }
.cdcard__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--off-white);
}
.cdcard__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s var(--ease), filter .5s var(--ease);
}
.cdcard:hover .cdcard__media img { transform: scale(1.05); filter: brightness(.82); }

/* "Watch →" chip that fades in on hover */
.cdcard__watch {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%);
  padding: 10px 20px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--black);
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  opacity: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}
.cdcard:hover .cdcard__watch { opacity: 1; transform: translate(-50%, -50%); }

.cdcard__foot { padding-top: 16px; }
.cdcard__kind { color: var(--gray); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.cdcard__title { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.cd-grid--3 .cdcard__title { font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.cdcard:hover .cdcard__title { color: var(--gray); transition: color var(--dur) var(--ease); }

/* Creative Direction landing hero: big 3:4 looping video with campaign cards
   drifting across it (pause on hover, click to open the campaign). */
.cdhero {
  position: relative;
  width: 100%;
  max-width: min(760px, 94vw);
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--off-white);
}
/* Slight blur (scaled up a touch so the blur doesn't reveal the container edge) */
.cdhero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: blur(3px); transform: scale(1.06); }
/* Dark gradient at the bottom so the moving cards stay readable */
.cdhero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  /* gentle even darkening + soft vignette so the centred cards read clearly */
  background: radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,.12) 0%, rgba(0,0,0,.34) 100%);
}
.cdhero__hint {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.85); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(0,0,0,.28); padding: 5px 12px; border-radius: 999px; pointer-events: none;
}
/* The moving strip, sitting in the lower part of the video */
.cdhero__cards {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.cdhero__track { display: flex; gap: 16px; width: max-content; padding: 0 8px; animation: cdhero-marquee 30s linear infinite; }
.cdhero__cards:hover .cdhero__track,
.cdhero__cards:focus-within .cdhero__track { animation-play-state: paused; }
@keyframes cdhero-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.cdhero__card { flex: 0 0 auto; width: clamp(130px, 20vw, 168px); text-decoration: none; }
.cdhero__thumb {
  position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.14);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cdhero__card:hover .cdhero__thumb { transform: translateY(-4px) scale(1.03); box-shadow: 0 16px 34px rgba(0,0,0,.45); }
.cdhero__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cdhero__label {
  position: absolute; inset: auto 0 0 0; padding: 24px 12px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
  display: flex; flex-direction: column; gap: 2px;
}
.cdhero__kind { color: rgba(255,255,255,.72); font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; }
.cdhero__title { color: #fff; font-size: .82rem; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
@media (prefers-reduced-motion: reduce) {
  .cdhero__track { animation: none; }
  .cdhero__cards { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* The play-on-the-spot video block */
.cvideo {
  position: relative;
  width: 100%;
  max-width: var(--cv-maxw, 440px);
  aspect-ratio: var(--cv-ratio, 3 / 4);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--off-white);
}
.cvideo__cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.cvideo.is-playing .cvideo__cover { display: none; }

.cvideo__player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Round play button over the cover */
.cvideo__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0, 0, 0, .12); border: 0; cursor: pointer;
  transition: background .3s var(--ease);
}
.cvideo__play:hover { background: rgba(0, 0, 0, .22); }
.cvideo.is-playing .cvideo__play { display: none; }
.cvideo__playicon {
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  position: relative;
  transition: transform var(--dur) var(--ease);
}
.cvideo__play:hover .cvideo__playicon { transform: scale(1.08); }
.cvideo__playicon::after {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent var(--black);
}

/* Placeholder state before a video is added */
.cvideo__soon {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .9); color: var(--gray);
  font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
}

/* Campaign Impact — big numbers across the bottom of a campaign page */
.impact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.impact__num { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.impact__label { margin-top: 8px; font-family: var(--mono); font-size: .8rem; color: var(--gray); letter-spacing: .03em; }
.impact__note { text-align: center; margin-top: 22px; color: var(--light-gray); font-size: .8rem; letter-spacing: .05em; }
@media (max-width: 640px) { .impact { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; } }

/* ============================================================
   GALLERY WALL — albums hung as picture frames
   ============================================================ */
.gwall {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: flex-start;
  gap: clamp(28px, 4vw, 70px) clamp(24px, 4vw, 60px);
  padding: clamp(10px, 3vw, 40px) 0;
}
/* Stagger every other frame vertically so it reads as a scattered wall, not a row */
.gwall__item:nth-child(even) { margin-top: clamp(24px, 5vw, 64px); }
.gwall__item:nth-child(3n)   { margin-top: clamp(8px, 2vw, 28px); }

/* Art-gallery picture lights — a scattered few frames get a brass gallery light
   mounted on top, its warm glow falling onto the artwork itself (screen blend so
   it lights the photo, NOT the white wall behind — no yellow spill on the page). */
.gwall__item--lit { position: relative; }
/* warm light falling onto the artwork (brightest just under the lamp, fading down) */
.gwall__item--lit::before {
  content: "";
  position: absolute;
  left: 50%; top: 1%;
  transform: translateX(-50%);
  width: 86%; height: 56%;
  background: radial-gradient(ellipse 62% 100% at 50% 0%,
              rgba(255,246,220,.9) 0%, rgba(255,242,208,.55) 26%,
              rgba(255,238,200,.24) 52%, transparent 80%);
  mix-blend-mode: screen;      /* only brightens the frame/photo; invisible on the white wall */
  pointer-events: none;
  z-index: 2;
}
/* the brass picture light sitting on top of the frame */
.gwall__item--lit::after {
  content: "";
  position: absolute;
  left: 50%; top: -7%;
  transform: translateX(-50%);
  width: 50%; aspect-ratio: 552 / 143;
  background: url('/assets/img/gallery-light.png') center/contain no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.22));
  pointer-events: none;
  z-index: 3;
}
@media (prefers-reduced-motion: reduce) { .gwall__item--lit::before { opacity: 1; } }

.frameal {
  display: inline-flex; flex-direction: column; align-items: center;
  width: var(--w, 260px); text-decoration: none; color: inherit;
  transform: rotate(var(--angle, 0deg));
  transition: transform .45s var(--ease);
}
.frameal:hover { transform: rotate(0deg) scale(1.04); z-index: 3; }
.frameal__frame {
  position: relative; width: 100%; aspect-ratio: var(--ar, 760/980); display: block;
  /* Soft, layered shadow that follows the frame's exact shape — no hard box line */
  filter: drop-shadow(0 4px 9px rgba(0, 0, 0, .09)) drop-shadow(0 16px 32px rgba(0, 0, 0, .11));
}
.frameal__photo { position: absolute; overflow: hidden; background: var(--off-white); }
.frameal__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .4s var(--ease); }
.frameal:hover .frameal__photo img { filter: brightness(.9); }
.frameal__png { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Shaped frames: clip the photo so it fills the opening, not the bounding box */
.frameal--oval .frameal__photo { clip-path: ellipse(50% 50% at 50% 50%); }
.frameal--octagon .frameal__photo {
  clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
}
.frameal__label { margin-top: 16px; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.frameal__name { font-size: 1.05rem; font-weight: 500; letter-spacing: -.02em; }
.frameal:hover .frameal__name { color: var(--gray); transition: color var(--dur) var(--ease); }
.frameal__count { font-size: .74rem; color: var(--light-gray); }
/* Calm the rotations right down on small screens so nothing overlaps */
@media (max-width: 640px) {
  .frameal { transform: rotate(calc(var(--angle, 0deg) * .4)); width: min(var(--w, 260px), 44vw); }
  .gwall { gap: 28px 16px; }
  .gwall__item:nth-child(even), .gwall__item:nth-child(3n) { margin-top: 8px; }
}

/* ============================================================
   GALLERY — album photo grid + lightbox
   ============================================================ */
/* Uniform grid: fills left-to-right with no interior gaps (last row may be a
   partial trailing row, which is normal). Thumbnails share one crop; the
   lightbox shows each photo full and uncropped. */
.galgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
@media (max-width: 640px) { .galgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } }

.galphoto {
  display: block; width: 100%; margin: 0; padding: 0; border: 0;
  aspect-ratio: 4 / 5;
  background: var(--off-white); cursor: pointer; overflow: hidden;
  border-radius: var(--radius); line-height: 0;
}
.galphoto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease), filter .4s var(--ease); }
.galphoto:hover img { transform: scale(1.04); filter: brightness(.9); }
.galphoto:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }

/* Full-screen photo viewer */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 12, 12, .92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: clamp(16px, 4vw, 60px);
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: 4px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.lightbox__btn {
  position: absolute; background: rgba(255, 255, 255, .1); color: #fff; border: 0;
  cursor: pointer; display: grid; place-items: center; border-radius: 50%;
  width: 52px; height: 52px; font-size: 2rem; line-height: 1;
  transition: background .25s var(--ease);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .25); }
.lightbox__close { top: 20px; right: 20px; font-size: 2.2rem; }
.lightbox__prev { left: clamp(10px, 3vw, 34px); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(10px, 3vw, 34px); top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lightbox__btn { width: 44px; height: 44px; font-size: 1.6rem; }
  .lightbox__prev { left: 8px; } .lightbox__next { right: 8px; }
}

/* Videography album — grid of vertical video tiles (poster + play button) */
.vidgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
@media (max-width: 640px) { .vidgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } }
.vidtile {
  position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0;
  aspect-ratio: 9 / 16;
  background: var(--off-white); cursor: pointer; overflow: hidden;
  border-radius: var(--radius); line-height: 0;
}
.vidtile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease), filter .4s var(--ease); }
.vidtile:hover img { transform: scale(1.04); filter: brightness(.82); }
.vidtile:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.vidtile__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(255, 255, 255, .82); backdrop-filter: blur(2px);
  display: grid; place-items: center; transition: transform .3s var(--ease), background .3s var(--ease);
}
.vidtile__play::after {
  content: ''; margin-left: 4px;
  border-style: solid; border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent var(--black);
}
.vidtile:hover .vidtile__play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.vidtile__title {
  position: absolute; left: 0; right: 0; bottom: 0; line-height: 1.2;
  padding: 22px 12px 10px; color: #fff; font-size: .74rem; letter-spacing: .04em;
  text-align: left; background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}
/* Full-screen video viewer (reuses .lightbox) */
.lightbox__video {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 4px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); background: #000;
}

/* ============================================================
   MOBILE OPTIMISATION  (phones, ≤640px)
   Everything here lives inside media queries, so the DESKTOP
   layout — every size and measurement — is left exactly as-is.
   ============================================================ */
@media (max-width: 640px) {
  :root { --pad: 20px; }               /* a little more breathing room at the edges */

  /* Headings: lower the clamp floors so big type fits a phone */
  .h-display    { font-size: clamp(1.95rem, 8.4vw, 2.5rem); }
  .h-section    { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  .h-subsection { font-size: clamp(1.35rem, 5.6vw, 1.7rem); }
  .h-eyebrow    { font-size: 1.15rem; }
  .lede         { font-size: 1rem; line-height: 1.55; }

  /* Home hero: clear the nav with generous top space, shrink the arch strip */
  .hero { min-height: auto; padding-top: 80px; }
  .hero__text { padding: 30px 0 10px; gap: 14px; }
  .hero__arches { margin-top: 22px; margin-bottom: 8px; }
  .harch { width: 44vw; height: 60vw; margin: 0 6px; }

  /* About: centre the statistics on a phone */
  .about-stats { text-align: center; justify-items: center; }
  .about-stat__label { margin-left: auto; margin-right: auto; }

  /* Services carousel cards: smaller, smaller icon, tidy spacing */
  /* Side padding so EVERY card (incl. the first) snaps to the centre, one per click */
  .carousel { padding-inline: calc(13vw - var(--pad)); scroll-padding-inline: calc(13vw - var(--pad)); }
  .card { height: 396px; width: 74vw; padding: 20px; }
  .card__num { font-size: .74rem; }
  .card__title { font-size: .92rem; margin-top: 8px; line-height: 1.35; }
  .card__art { padding: 8px 0; }
  .card__art img { max-height: 148px; }
  .card__desc { margin-top: 12px; font-size: .88rem; }

  /* Gallery walls: frames were sized in fixed px — make them ~2 per row */
  .frameal { width: min(43vw, 185px); }
  .gwall { gap: 24px 14px; padding: 6px 0 0; }
  .gwall__item:nth-child(even), .gwall__item:nth-child(3n) { margin-top: 6px; }
  .frameal__name { font-size: .95rem; }

  /* Intro cover: smaller + nudged right/up so the collage reads centred
     (the collage art leans left/low inside its box, so we compensate) */
  .intro-art { width: 74vw; transform: translate(9%, -5%); }

  /* Works book: show the PHONE book (one project per page) instead of the
     desktop one, so the open two-page spread is readable with margins. */
  .flipbook-wrap--d { display: none; }
  .flipbook-wrap--m { display: flex; }
  .flipbook-wrap { padding: 14px 0 26px; }
  /* the beige "stacked paper" behind the smaller landscape book */
  .flipbook-wrap::before, .flipbook-wrap::after { width: 360px; height: 258px; top: 15px; }
  /* One-project-per-page layout: small book cover on top, details below,
     spread EVENLY down the whole page (not clustered in the middle) */
  .flip-page__inner--single { padding: 17px 13px 15px; gap: 0; justify-content: flex-start; }
  .flip-page__inner--single .flip-page__num { font-size: .55rem; top: 8px; right: 12px; }
  .flip-page__inner--single .flip-proj { flex: 1 1 auto; flex-direction: column; align-items: stretch; justify-content: space-evenly; gap: 0; }
  .flip-page__inner--single .flip-proj__media { width: 50%; margin: 0 auto; aspect-ratio: 4 / 5; }
  .flip-page__inner--single .flip-proj__name { font-size: .70rem; line-height: 1.1; margin-bottom: 3px; }
  .flip-page__inner--single .flip-proj__loc { font-size: .59rem; }
  /* scope/timeline rows with a little more breathing room */
  .flip-page__inner--single .facts { margin-top: 10px; }
  .flip-page__inner--single .facts__row { padding: 8px 0; gap: 9px; }
  .flip-page__inner--single .facts__k { font-size: .48rem; }
  .flip-page__inner--single .facts__v { font-size: .55rem; line-height: 1.2; }
  /* Cover + back cover: small type so nothing is clipped on the narrow page */
  .flip-cover { padding: 18px 13px; gap: 7px; }
  .flip-cover__eyebrow { font-size: .52rem; letter-spacing: .09em; }
  .flip-cover__title { font-size: 1.15rem; line-height: 1.04; }
  .flip-cover__title span { display: block; }
  .flip-cover__sub { font-size: .57rem; line-height: 1.35; margin-top: 3px; }
  .flip-cover__script { font-size: 1.47rem; }
  .flip-cover__by { font-size: .55rem; }
  .flip-cover .pill { font-size: .68rem; padding: 7px 14px; }

  /* Project pages: the animated notification phone — smaller, and pushed down
     so there's a clear gap between the written stats and the phone */
  .phone-stats { padding-top: 34px; }
  .phone-stats__scene { width: min(320px, 90vw); height: max(430px, calc(240px + var(--pn-count, 6) * 46px)); }
  .phone { width: 166px; height: 332px; margin-left: -83px; bottom: 36px; }
  .phone-stats__shadow { width: 186px; height: 44px; margin-left: -93px; bottom: 36px; }
  .phone-stats__stack { bottom: 116px; width: min(300px, 86vw); gap: 9px; }
  .pn-card { padding: 9px 11px; border-radius: 14px; }
  .pn-card__icon { width: 34px; height: 34px; border-radius: 9px; }
  .pn-card__icon svg { width: 19px; height: 19px; }
  .pn-card__app { font-size: .82rem; }
  .pn-card__msg { font-size: .78rem; }
  .pn-card__time { font-size: .6rem; }

  /* Footer: clear gap so it doesn't crowd the last section */
  .footer { padding-top: 72px; }

  /* Logo was clipped by a negative margin on narrow screens */
  .nav__logo { margin-left: 0; }
}

/* Extra tightening for the smallest phones */
@media (max-width: 400px) {
  .h-display { font-size: clamp(1.8rem, 8.6vw, 2.3rem); }
  .card { width: 78vw; height: 384px; }
  .card__art img { max-height: 138px; }
  .frameal { width: min(44vw, 168px); }
}