:root {
    --rr-red: #FF0000;
    --rr-red-hot: #CC0000;
    --rr-white: #FAFAFA;
    --rr-black: #1D1D1D;
    --rr-ink-900: #0b0b0b;
    --rr-ink-800: #141414;
    --rr-ink-700: #1f1f1f;
    --rr-ink-600: #2a2a2a;
    --rr-ink-500: #3a3a3a;
    --rr-ink-300: #6e6e6e;
    --rr-ink-200: #9b9b9b;
    --rr-ink-100: #c2c2c2;
    --rr-display: 'Berlin Sans', 'Arial Narrow', sans-serif;
    --rr-body: 'Barlow', 'Arial', sans-serif;
    --rr-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --rr-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { background: var(--rr-ink-900); color: var(--rr-white); font-family: var(--rr-body); -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.6; }
  html { scroll-behavior: smooth; }
  body { overflow-x: hidden; }
  a { color: inherit; text-decoration: none; cursor: pointer; }
  img, svg { display: block; max-width: 100%; }
  ::selection { background: var(--rr-red); color: #fff; }

  .red { color: var(--rr-red); }
  .wrap { width: min(1180px, 100%); margin: 0 auto; }

  /* ========== NAV — aligned with index.html ========== */
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 40px;
    background: rgba(20,20,20,0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .nav__logo { display: flex; align-items: center; gap: 12px; }
  .nav__logo-icon { width: 64px; height: 64px; background: var(--rr-red); border-radius: 6px; flex-shrink: 0; position: relative; }
  .nav__logo-icon img { width: 70px; height: 70px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .nav__logo-text { display: flex; flex-direction: column; line-height: 1.1; }
  .nav__logo-text strong { font-family: var(--rr-display); font-weight: 700; font-size: 12px; letter-spacing: .08em; color: var(--rr-white); }
  .nav__logo-text small { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--rr-ink-200); font-weight: 500; }
  .nav__links { display: flex; gap: 40px; align-items: center; }
  .nav__links a { font-family: var(--rr-display); font-weight: 400; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--rr-ink-100); transition: color .2s var(--rr-ease); }
  .nav__links a:hover { color: var(--rr-white); }
  .nav__cta { background: var(--rr-red); color: #fff; padding: 12px 20px; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; font-weight: 600; transition: background .2s var(--rr-ease); border: none; cursor: pointer; }
  .nav__cta:hover { background: var(--rr-red-hot); }

  main { padding-top: 104px; }
  section { padding: 80px 40px; position: relative; }

  .eyebrow { font-family: var(--rr-condensed); font-size: 14px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--rr-red); margin-bottom: 18px; }
  h1, h2, h3 { text-wrap: balance; }
  h1 { font-family: var(--rr-display); font-size: clamp(54px, 9vw, 118px); font-weight: 700; line-height: .9; letter-spacing: -.03em; text-transform: uppercase; max-width: 980px; }
  h2 { font-family: var(--rr-display); font-size: clamp(36px, 5.2vw, 72px); line-height: .98; letter-spacing: -.02em; text-transform: uppercase; margin-bottom: 20px; }
  h3 { font-family: var(--rr-display); font-size: 24px; line-height: 1.12; margin-bottom: 16px; }
  p { font-size: 16px; line-height: 1.72; color: #cfcfcf; }
  .lead { font-size: 19px; line-height: 1.6; color: var(--rr-ink-100); }

  .hero {
    min-height: calc(100vh - 104px);
    display: flex; align-items: center;
    background:
      radial-gradient(ellipse at 18% 20%, rgba(255,0,0,0.14), transparent 38%),
      radial-gradient(ellipse at 80% 70%, rgba(255,0,0,0.06), transparent 48%),
      var(--rr-ink-900);
    overflow: hidden;
  }
  .hero::after { content: ''; position: absolute; right: -120px; bottom: -120px; width: 460px; height: 460px; background: url('./brand/isotipo-red.svg') center/contain no-repeat; opacity: .05; pointer-events: none; }
  .hero__sub { margin-top: 30px; max-width: 760px; font-size: clamp(18px, 2.1vw, 25px); line-height: 1.38; color: var(--rr-ink-100); }
  .hero__meta { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 56px; }

  .meta-card, .panel, .visual-card, .press-card, .role-card, .challenge-card, .solution-card, .spec { background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.095); }
  .meta-card { padding: 24px; min-height: 130px; }
  .meta-card__label, .spec__label { font-family: var(--rr-condensed); font-size: 11px; color: var(--rr-red); letter-spacing: .16em; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; }
  .meta-card__value { font-size: 18px; line-height: 1.35; font-weight: 600; }

  .section-head { margin-bottom: 46px; max-width: 840px; }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  .panel { padding: 34px; }
  .list { list-style: none; display: grid; gap: 13px; margin-top: 22px; }
  .list li { position: relative; padding-left: 22px; color: #d4d4d4; line-height: 1.5; }
  .list li::before { content: '—'; position: absolute; left: 0; color: var(--rr-red); }

  .challenge-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 34px; }
  .challenge-card { padding: 30px; background: var(--rr-ink-800); min-height: 160px; display: flex; flex-direction: column; justify-content: flex-start; }
  .challenge-card strong { display: block; font-family: var(--rr-display); font-size: 34px; color: var(--rr-red); margin-bottom: 10px; }
  .challenge-card span { color: #d6d6d6; line-height: 1.5; }

  .role-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 22px; align-items: stretch; }
  .role-card { padding: 36px; background: var(--rr-ink-800); }
  .role-card--red { border-color: rgba(255,0,0,.35); box-shadow: 0 0 50px rgba(255,0,0,.05) inset; }

  .specs { background: #111; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); }
  .specs__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
  .spec { padding: 26px; background: rgba(255,255,255,.035); }
  .spec__value { font-size: 19px; font-weight: 600; line-height: 1.35; }

  .solution-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
  .solution-card { padding: 34px; background: var(--rr-ink-800); min-height: 100%; }
  .solution-card .number { font-family: var(--rr-display); color: var(--rr-red); font-size: 42px; margin-bottom: 14px; font-weight: 700; }

  .visuals-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
  .visual-card { min-height: 300px; display: grid; grid-template-rows: 1fr auto; background: var(--rr-ink-800); overflow: hidden; position: relative; }
  .visual-card--wide { grid-column: span 2; min-height: 380px; }
  .visual-card img { width: 100%; height: 100%; object-fit: cover; opacity: .92; background: radial-gradient(circle at 70% 20%, rgba(255,0,0,.12), transparent 38%), linear-gradient(135deg, rgba(255,0,0,.08), rgba(255,255,255,.02)); }
  .visual-card figcaption { padding: 22px 24px 24px; background: linear-gradient(180deg, rgba(11,11,11,.72), rgba(11,11,11,.96)); }
  .placeholder-tag { display: inline-flex; color: var(--rr-red); font-family: var(--rr-condensed); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
  .visual-card p { color: var(--rr-ink-100); font-size: 14px; max-width: 620px; }

  .press-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
  .press-card { padding: 26px; transition: transform .2s var(--rr-ease), border-color .2s var(--rr-ease); min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; }
  .press-card:hover { transform: translateY(-4px); border-color: rgba(255,0,0,.55); }
  .press-card span { display: block; font-size: 11px; color: var(--rr-red); letter-spacing: .16em; text-transform: uppercase; font-weight: 700; line-height: 1.2; }
  .press-card strong { display: block; font-family: var(--rr-display); font-size: 20px; margin-top: 0; line-height: 1.12; }

  .relationship { background: linear-gradient(135deg, rgba(255,0,0,.12), rgba(255,255,255,.03)); border-top: 1px solid rgba(255,0,0,.18); border-bottom: 1px solid rgba(255,0,0,.18); }
  .relationship blockquote { font-family: var(--rr-display); font-size: clamp(34px, 5vw, 72px); line-height: .98; letter-spacing: -.02em; text-transform: uppercase; max-width: 980px; }
  .relationship p { margin-top: 28px; max-width: 780px; }

  .section-cta { text-align: center; padding: 95px 40px; background: var(--rr-ink-800); }
  .section-cta p { max-width: 690px; margin: 0 auto 34px; color: var(--rr-ink-100); font-size: 18px; }
  .cta-btn { display: inline-block; padding: 15px 30px; background: var(--rr-red); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: background .2s var(--rr-ease), transform .2s var(--rr-ease); }
  .cta-btn:hover { background: var(--rr-red-hot); transform: translateY(-2px); }

  /* ========== FOOTER — aligned with index.html ========== */
  footer { background: var(--rr-black); padding: 60px 40px; }
  .foot__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 60px; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--rr-ink-600); }
  .foot__brand { max-width: 320px; flex-shrink: 0; }
  .foot__cols { display: flex; gap: 60px; justify-content: flex-end; }
  .foot__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
  .foot__logo-icon { width: 64px; height: 64px; background: var(--rr-red); border-radius: 6px; flex-shrink: 0; position: relative; }
  .foot__logo-icon img { width: 70px; height: 70px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .foot__tagline { font-size: 14px; line-height: 1.6; color: var(--rr-ink-100); }
  .foot__col h4 { font-family: var(--rr-display); font-weight: 600; font-size: 13px; margin-bottom: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--rr-white); text-align: right; }
  .foot__col a { display: block; font-family: var(--rr-display); font-weight: 400; font-size: 13px; color: var(--rr-ink-100); margin-bottom: 8px; transition: color .2s; text-align: right; }
  .foot__col a:hover { color: var(--rr-white); }
  .foot__bottom { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--rr-ink-200); }



  .hero-cover { margin-top: 54px; }
  .hero-cover__frame { aspect-ratio: 2536 / 1435; width: 100%; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: radial-gradient(circle at 70% 20%, rgba(255,0,0,.14), transparent 34%), linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); }
  .hero-cover__frame img { width: 100%; height: 100%; object-fit: cover; }
  .media-frame { width: 100%; min-height: 320px; border: 1px solid rgba(255,255,255,.095); background: var(--rr-ink-800); overflow: hidden; position: relative; }
  .media-frame video, .media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .media-frame--16x9 { aspect-ratio: 16/9; min-height: auto; }
  .media-caption { font-size: 13px; color: var(--rr-ink-200); margin-top: 12px; }
  .linkedin-preview { display: grid; grid-template-columns: 82px 1fr; gap: 18px; align-items: center; padding: 22px; margin-top: 28px; border: 1px solid rgba(255,255,255,.095); background: rgba(255,255,255,.035); transition: border-color .2s var(--rr-ease), transform .2s var(--rr-ease); }
  .linkedin-preview:hover { border-color: rgba(255,0,0,.55); transform: translateY(-3px); }
  .linkedin-preview__icon { height: 82px; display: grid; place-items: center; background: rgba(255,255,255,.07); font-family: var(--rr-display); font-size: 28px; color: var(--rr-white); }
  .linkedin-preview strong { display: block; font-family: var(--rr-display); font-size: 18px; margin-bottom: 6px; }
  .linkedin-preview span { display: block; color: var(--rr-ink-100); font-size: 14px; line-height: 1.45; }

  .linkedin-preview-container { margin-top: 28px; width: min(504px, 100%); }
  .linkedin-preview-card { position: relative; overflow: hidden; display: block; aspect-ratio: 504 / 500; border: 1px solid rgba(255,255,255,.095); background: rgba(255,255,255,.035); text-decoration: none; transition: transform 0.3s var(--rr-ease), border-color 0.3s var(--rr-ease); }
  .linkedin-preview-card:hover { transform: translateY(-4px); border-color: rgba(255,0,0,.55); }
  .linkedin-preview__image { width: 100%; height: 100%; overflow: hidden; }
  .linkedin-preview__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .linkedin-preview__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%); display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding: 24px; opacity: 0; transition: opacity 0.3s var(--rr-ease); }
  .linkedin-preview-card:hover .linkedin-preview__overlay { opacity: 1; }
  .linkedin-preview__logo { width: 32px; height: 32px; color: white; flex-shrink: 0; }
  .linkedin-preview__logo svg { width: 100%; height: 100%; fill: currentColor; }
  .linkedin-preview__overlay span { color: white; font-size: 14px; font-family: var(--rr-body); font-weight: 500; }
  .role-card { transition: border-color .2s var(--rr-ease), box-shadow .2s var(--rr-ease), transform .2s var(--rr-ease); }
  .role-card--red { border-color: rgba(255,255,255,.095); box-shadow: none; }
  .role-card:hover { border-color: rgba(255,0,0,.55); box-shadow: 0 0 50px rgba(255,0,0,.05) inset; transform: translateY(-3px); }
  .solution-card { overflow: hidden; padding: 0; }
  .solution-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: #080808; border-bottom: 1px solid rgba(255,255,255,.08); position: relative; }
  .solution-card__media img, .solution-card__media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .22s var(--rr-ease), transform .22s var(--rr-ease); }
  .solution-card__content { padding: 30px; }
  .hover-swap { position: relative; }
  .hover-swap .hover-img { position: absolute; inset: 0; opacity: 0; z-index: 1; transition: opacity 0.4s var(--rr-ease); }
  .hover-swap figcaption { position: relative; z-index: 2; }
  .hover-swap .base-img { position: relative; z-index: 0; transition: opacity 0.4s var(--rr-ease); }
  .hover-swap:hover .hover-img { opacity: 1; }
  .hover-swap:hover .base-img { opacity: 0; }
  
  .turnaround-card { overflow: hidden; transition: transform 0.3s var(--rr-ease); aspect-ratio: 1; border: 2px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
  .turnaround-card:hover { transform: scale(1.05); }
  .turnaround-trigger { all: unset; cursor: pointer; display: block; width: 100%; height: 100%; }
  .turnaround-trigger img { width: 100%; height: 100%; object-fit: cover; display: block; }
  
  /* Lightbox Modal Styles */
  .turnaround-modal { position: fixed; inset: 0; background: rgba(13, 13, 13, 0.95); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; visibility: hidden; transition: opacity 0.3s var(--rr-ease), visibility 0.3s var(--rr-ease); }
  .turnaround-modal.active { opacity: 1; visibility: visible; }
  .turnaround-modal__content { position: relative; width: min(90vw, 900px); max-height: 90vh; display: flex; align-items: center; justify-content: center; }
  .turnaround-modal__image { width: 100%; height: auto; max-height: 80vh; object-fit: contain; display: block; }
  .turnaround-modal__close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; z-index: 101; padding: 0; display: flex; align-items: center; justify-content: center; }
  .turnaround-modal__close span { position: absolute; width: 28px; height: 2px; background: var(--rr-white); transition: all 0.2s var(--rr-ease); }
  .turnaround-modal__close span:first-child { transform: rotate(45deg); }
  .turnaround-modal__close span:last-child { transform: rotate(-45deg); }
  .turnaround-modal__close:hover span { background: var(--rr-red); }
  .turnaround-modal__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: var(--rr-white); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 102; transition: all 0.2s var(--rr-ease); }
  .turnaround-modal__nav:hover { background: rgba(255,0,0,.3); border-color: rgba(255,0,0,.55); }
  .turnaround-modal__nav svg { width: 24px; height: 24px; }
  .turnaround-modal__nav--prev { left: 20px; }
  .turnaround-modal__nav--next { right: 20px; }
  .turnaround-modal__counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: var(--rr-ink-100); font-size: 12px; font-family: var(--rr-body); letter-spacing: .08em; text-transform: uppercase; z-index: 101; }
  .process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 56px; }
  .turnaround-section { width: 100%; padding: 80px 60px; background: rgba(0,0,0,.3); }
  .turnaround-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
  .media-section-title { font-family: var(--rr-display); font-size: 28px; text-transform: uppercase; margin: 56px 0 20px; }
  .media-subsection { font-size: 14px; color: var(--rr-ink-100); margin-bottom: 28px; line-height: 1.6; }
  .press-card { position: relative; overflow: hidden; }
  .press-card > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .press-logo { display: inline-grid; place-items: center; min-height: 54px; min-width: 100%; padding: 12px 14px; margin-bottom: 4px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.045); font-family: var(--rr-display); font-size: 18px; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
  .press-logo--neo { font-family: var(--rr-condensed); font-size: 30px; letter-spacing: .08em; }
  .press-logo--linkedin { font-size: 26px; letter-spacing: 0; }
  .press-logo-svg { height: 48px; width: auto; filter: brightness(1.1); transition: filter .2s var(--rr-ease); }
  .press-card small { color: var(--rr-ink-200); margin-top: 8px; }

  @media (max-width: 1024px) {
    .nav__links { gap: 24px; }
    section { padding: 84px 32px; }
    .hero__meta, .specs__grid, .press-grid { grid-template-columns: repeat(2,1fr); }
    .two-col, .role-grid, .solution-grid, .process-grid { grid-template-columns: 1fr; }
    .turnaround-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .foot__top { flex-wrap: wrap; gap: 40px; }
    .foot__cols { gap: 32px; }
  }
  @media (max-width: 760px) {
    .nav { padding: 16px 20px; }
    .nav__hamburger {
      display: flex;
    }
    .nav__links { 
      position: fixed;
      top: 80px;
      left: 0;
      right: 0;
      background: rgba(11, 11, 11, 0.95);
      backdrop-filter: blur(12px);
      flex-direction: column;
      padding: 24px;
      gap: 16px;
      display: none !important;
      max-height: calc(100vh - 80px);
      overflow-y: auto;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .nav__links.active {
      display: flex !important;
    }
    .nav__links a,
    .nav__links button {
      padding: 12px 16px;
      text-align: left;
    }
    main { padding-top: 96px; }
    section { padding: 68px 20px; }
    .hero { min-height: auto; padding-top: 72px; }
    h1 { font-size: clamp(46px, 17vw, 74px); }
    .hero__meta, .specs__grid, .press-grid, .challenge-grid, .visuals-grid, .turnaround-grid { grid-template-columns: 1fr; }
    .visual-card--wide { grid-column: span 1; }
    .meta-card, .panel, .role-card, .solution-card { padding: 26px; }
    .foot__top { flex-direction: column; }
    .foot__cols { flex-wrap: wrap; gap: 24px; }
    .foot__col h4, .foot__col a { text-align: left; }
    .foot__bottom { flex-direction: column; gap: 12px; text-align: center; }
  }

/* Optimized case-study video media */
.visual-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #080808;
}

.visual-card video.lazy-video,
.solution-card__media video.lazy-video {
  min-height: 100%;
}

  /* Fix scrollbar displacement on mobile when nav opens */
  @media (max-width: 768px) {
    body {
      overflow-x: hidden;
    }
    body.nav-open {
      overflow-y: hidden;
      padding-right: 0;
    }
  }

  /* Fix diagonal scroll on mobile */
  @media (max-width: 768px) {
    body {
      touch-action: pan-y;
      overflow-x: hidden;
    }
  }

  /* ========== HAMBURGER MENU CSS ========== */
  .nav__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 51;
    padding: 8px;
  }

  .nav__hamburger span {
    width: 24px;
    height: 2px;
    background: var(--rr-white);
    transition: all 0.3s var(--rr-ease);
    display: block;
  }

  .nav__hamburger span:first-child {
    margin-bottom: 6px;
  }

  .nav__hamburger:hover span {
    background: var(--rr-red);
  }

  .nav__hamburger.active span:first-child {
    transform: rotate(45deg) translate(10px, 10px);
  }

  .nav__hamburger.active span:last-child {
    transform: rotate(-45deg) translate(7px, -7px);
  }